jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #285 from scmmishra/heatmap-radius

Browse Source 
feat: allow corner radius for heatmap
This commit is contained in:
Shivam Mishra 2020-05-09 17:55:07 +05:30 committed by GitHub
commit 1834ff71bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/charts/Heatmap.js
View File

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

4
src/js/objects/ChartComponents.js
View File

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

7
src/js/utils/draw.js
View File

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