Merge pull request #285 from scmmishra/heatmap-radius

feat: allow corner radius for heatmap

src/js/charts/Heatmap.js

@@ -98,6 +98,7 @@ export default class Heatmap extends BaseChart {
 				colWidth: COL_WIDTH,
 				rowHeight: ROW_HEIGHT,
 				squareSize: HEATMAP_SQUARE_SIZE,
+				radius: this.rawChartArgs.radius || 0,
 				xTranslate: s.domainConfigs
 					.filter((config, j) => j < i)
 					.map(config => config.cols.length - lessCol)

src/js/objects/ChartComponents.js

@@ -252,7 +252,7 @@ let componentConfigs = {
 	heatDomain: {
 		layerClass: function() { return 'heat-domain domain-' + this.constants.index; },
 		makeElements(data) {
-			let {index, colWidth, rowHeight, squareSize, xTranslate} = this.constants;
+			let {index, colWidth, rowHeight, squareSize, radius, xTranslate} = this.constants;
 			let monthNameHeight = -12;
 			let x = xTranslate, y = 0;
 
@@ -275,7 +275,7 @@ let componentConfigs = {
 							'data-value': day.dataValue,
 							'data-day': i
 						};
-						let square = heatSquare('day', x, y, squareSize, day.fill, data);
+						let square = heatSquare('day', x, y, squareSize, radius, day.fill, data);
 						this.serializedSubDomains.push(square);
 					}
 					y += rowHeight;

src/js/utils/draw.js

@@ -190,13 +190,14 @@ export function percentageBar(x, y, width, height,
 	return createSVG("rect", args);
 }
 
-export function heatSquare(className, x, y, size, fill='none', data={}) {
+export function heatSquare(className, x, y, size, radius, fill='none', data={}) {
 	let args = {
 		className: className,
 		x: x,
 		y: y,
 		width: size,
 		height: size,
+		rx: radius,
 		fill: fill
 	};
 
@@ -322,7 +323,7 @@ function makeHoriLine(y, label, x1, x2, options={}) {
 	if(!options.stroke) options.stroke = BASE_LINE_COLOR;
 	if(!options.lineType) options.lineType = '';
 	if (options.shortenNumbers) label = shortenLargeNumber(label);
-	
+
 	let className = 'line-horizontal ' + options.className +
 		(options.lineType === "dashed" ? "dashed": "");
 
@@ -583,7 +584,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
 	// Spline
 	if (options.spline)
 		pointsStr = getSplineCurvePointsStr(xList, yList);
-    
+
 	let path = makePath("M"+pointsStr, 'line-graph-path', color);
 
 	// HeatLine