浏览代码

Merge pull request #285 from scmmishra/heatmap-radius

feat: allow corner radius for heatmap
tags/v1.4.0
Shivam Mishra 5 年前
committed by GitHub
父节点
当前提交
1834ff71bd
找不到此签名对应的密钥 GPG 密钥 ID: 4AEE18F83AFDEB23
共有 3 个文件被更改,包括 7 次插入5 次删除
  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 查看文件

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


+ 2
- 2
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;


+ 4
- 3
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


正在加载...
取消
保存