From d84614cb659c9cb2a55ab861cfae83a40c1e8452 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 22 Oct 2020 12:13:50 +0530 Subject: [PATCH] feat: update legendBar --- src/js/charts/AxisChart.js | 8 ++------ src/js/utils/draw.js | 12 ++++++++---- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js index ae2780e..c5a3a59 100644 --- a/src/js/charts/AxisChart.js +++ b/src/js/charts/AxisChart.js @@ -422,17 +422,13 @@ export default class AxisChart extends BaseChart { renderLegend() { let s = this.data; - if(s.datasets.length > 1) { + if (s.datasets.length > 1) { this.legendArea.textContent = ''; + let barWidth = AXIS_LEGEND_BAR_SIZE; s.datasets.map((d, i) => { - let barWidth = AXIS_LEGEND_BAR_SIZE; - // let rightEndPoint = this.baseWidth - this.measures.margins.left - this.measures.margins.right; - // let multiplier = s.datasets.length - i; let rect = legendBar( - // rightEndPoint - multiplier * barWidth, // To right align barWidth * i, '0', - barWidth, this.colors[i], d.name, this.config.truncateLegends); diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 0980c52..3537424 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -223,22 +223,26 @@ export function heatSquare(className, x, y, size, radius, fill='none', data={}) return createSVG("rect", args); } -export function legendBar(x, y, size, fill='none', label, truncate=false) { +export function legendBar(x, y, fill = 'none', label, truncate = true) { label = truncate ? truncateString(label, LABEL_MAX_CHARS) : label; let args = { className: 'legend-bar', x: 0, y: 0, - width: size, - height: '2px', + width: '12px', + height: '12px', + rx: '2px', + ry: '2px', fill: fill }; + let text = createSVG('text', { className: 'legend-dataset-text', x: 0, y: 0, - dy: (FONT_SIZE * 2) + 'px', + dy: (FONT_SIZE) + 'px', + dx: (FONT_SIZE * 1.5) + 'px', 'font-size': (FONT_SIZE * 1.2) + 'px', 'text-anchor': 'start', fill: FONT_FILL,