From 96095ec5793a021c44cfa3bfe7f44eb389316def Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 28 Jul 2020 14:15:34 +0530
Subject: [PATCH] feat: update legend dots

---
 src/js/charts/AggregationChart.js |  6 ++++--
 src/js/utils/draw.js              | 36 ++++++++++++++++++++++---------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/js/charts/AggregationChart.js b/src/js/charts/AggregationChart.js
index 2e6f79f..c5d146a 100644
--- a/src/js/charts/AggregationChart.js
+++ b/src/js/charts/AggregationChart.js
@@ -75,7 +75,7 @@ export default class AggregationChart extends BaseChart {
 			}
 			if(count > divisor) {
 				count = 0;
-				y += 20;
+				y += 60;
 			}
 			let x = barWidth * count + 5;
 			let label = this.config.truncateLegends ? truncateString(s.labels[i], barWidth/10) : s.labels[i];
@@ -83,9 +83,11 @@ export default class AggregationChart extends BaseChart {
 			let dot = legendDot(
 				x,
 				y,
-				5,
+				12,
+				3,
 				this.colors[i],
 				`${label}: ${formatted}`,
+				d,
 				false
 			);
 			this.legendArea.appendChild(dot);
diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js
index f9ef021..5a5121b 100644
--- a/src/js/utils/draw.js
+++ b/src/js/utils/draw.js
@@ -239,33 +239,49 @@ export function legendBar(x, y, size, fill='none', label, truncate=false) {
 	return group;
 }
 
-export function legendDot(x, y, size, fill='none', label, truncate=false) {
+export function legendDot(x, y, size, radius, fill='none', label, value, truncate=false) {
 	label = truncate ? truncateString(label, LABEL_MAX_CHARS) : label;
 
 	let args = {
 		className: 'legend-dot',
-		cx: 0,
-		cy: 0,
-		r: size,
+		x: 0,
+		y: 4 - size,
+		height: size,
+		width: size,
+		rx: radius,
 		fill: fill
 	};
-	let text = createSVG('text', {
-		className: 'legend-dataset-text',
-		x: 0,
+
+	let textLabel = createSVG('text', {
+		className: 'legend-dataset-label',
+		x: size,
 		y: 0,
 		dx: (FONT_SIZE) + 'px',
 		dy: (FONT_SIZE/3) + 'px',
-		'font-size': (FONT_SIZE * 1.2) + 'px',
+		'font-size': (FONT_SIZE * 1.6) + 'px',
 		'text-anchor': 'start',
 		fill: FONT_FILL,
 		innerHTML: label
 	});
 
+	let textValue = createSVG('text', {
+		className: 'legend-dataset-value',
+		x: size,
+		y: FONT_SIZE + 10,
+		dx: (FONT_SIZE) + 'px',
+		dy: (FONT_SIZE/3) + 'px',
+		'font-size': (FONT_SIZE * 1.2) + 'px',
+		'text-anchor': 'start',
+		fill: FONT_FILL,
+		innerHTML: value
+	});
+
 	let group = createSVG('g', {
 		transform: `translate(${x}, ${y})`
 	});
-	group.appendChild(createSVG("circle", args));
-	group.appendChild(text);
+	group.appendChild(createSVG("rect", args));
+	group.appendChild(textLabel);
+	group.appendChild(textValue);
 
 	return group;
 }