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;

3
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
}; };