Pārlūkot izejas kodu

feat: allow corner radius for heatmap

tags/v1.4.0
Shivam Mishra pirms 5 gadiem
vecāks
revīzija
4f48d8d597
3 mainītis faili ar 7 papildinājumiem un 5 dzēšanām
  1. +1
    -0
      src/js/charts/Heatmap.js
  2. +2
    -2
      src/js/objects/ChartComponents.js
  3. +4
    -3
      src/js/utils/draw.js

+ 1
- 0
src/js/charts/Heatmap.js Parādīt failu

@@ -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)


+ 2
- 2
src/js/objects/ChartComponents.js Parādīt failu

@@ -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;


+ 4
- 3
src/js/utils/draw.js Parādīt failu

@@ -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


Notiek ielāde…
Atcelt
Saglabāt