Add tooltip-styled legend

dist/frappe-charts.esm.js

@@ -239,6 +239,8 @@ const CHART_POST_ANIMATE_TIMEOUT = 400;
 const DEFAULT_AXIS_CHART_TYPE = 'line';
 const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
 
+const AXIS_LEGEND_BAR_SIZE = 100;
+
 const BAR_CHART_SPACE_RATIO = 0.5;
 const MIN_BAR_PERCENT_HEIGHT = 0.01;
 
@@ -350,6 +352,7 @@ const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
 const FONT_SIZE = 10;
 const BASE_LINE_COLOR = '#dadada';
+const FONT_FILL = '#555b51';
 
 function $$1(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
@@ -486,6 +489,35 @@ function heatSquare(className, x, y, size, fill='none', data={}) {
 	return createSVG("rect", args);
 }
 
+function legendBar(x, y, size, fill='none', label) {
+	let args = {
+		className: 'legend-bar',
+		x: 0,
+		y: 0,
+		width: size,
+		height: '2px',
+		fill: fill
+	};
+	let text = createSVG('text', {
+		className: 'legend-dataset-text',
+		x: 0,
+		y: 0,
+		dy: (FONT_SIZE * 2) + 'px',
+		'font-size': (FONT_SIZE * 1.2) + 'px',
+		'text-anchor': 'start',
+		fill: FONT_FILL,
+		innerHTML: label
+	});
+
+	let group = createSVG('g', {
+		transform: `translate(${x}, ${y})`
+	});
+	group.appendChild(createSVG("rect", args));
+	group.appendChild(text);
+
+	return group;
+}
+
 function makeText(className, x, y, content, fontSize = FONT_SIZE) {
 	return createSVG('text', {
 		className: className,
@@ -1292,9 +1324,7 @@ class BaseChart {
 			setTimeout(() => {this.update(this.data);}, this.initTimeout);
 		}
 
-		if(!onlyWidthChange) {
-			this.renderLegend();
-		}
+		this.renderLegend();
 
 		this.setupNavigation(init);
 	}
@@ -1363,7 +1393,7 @@ class BaseChart {
 		if(this.title.length) {
 			titleAreaHeight = 30;
 		}
-		if(this.showLegend) {
+		if(this.config.showLegend) {
 			legendAreaHeight = 30;
 		}
 		this.svg = makeSVGContainer(
@@ -1374,6 +1404,8 @@ class BaseChart {
 		);
 		this.svgDefs = makeSVGDefs(this.svg);
 
+		console.log(this.baseHeight, titleAreaHeight, legendAreaHeight);
+
 		if(this.title.length) {
 			this.titleEL = makeText(
 				'title',
@@ -1392,7 +1424,7 @@ class BaseChart {
 			`translate(${this.leftMargin}, ${top})`
 		);
 
-		top = this.baseHeight + titleAreaHeight;
+		top = this.baseHeight - titleAreaHeight;
 		this.legendArea = makeSVGGroup(
 			this.svg,
 			'chart-legend',
@@ -3204,21 +3236,24 @@ class AxisChart extends BaseChart {
 	}
 
 	renderLegend() {
-		// let s = this.data;
-		// this.statsWrapper.textContent = '';
-
-		// if(s.datasets.length > 1) {
-		// 	s.datasets.map((d, i) => {
-		// 		let stats = $.create('div', {
-		// 			className: 'stats',
-		// 			inside: this.statsWrapper
-		// 		});
-		// 		stats.innerHTML = `<span class="indicator">
-		// 			<i style="background: ${this.colors[i]}"></i>
-		// 			${d.name}
-		// 		</span>`;
-		// 	});
-		// }
+		let s = this.data;
+		this.legendArea.textContent = '';
+
+		if(s.datasets.length > 1) {
+			s.datasets.map((d, i) => {
+				let barWidth = AXIS_LEGEND_BAR_SIZE;
+				// let rightEndPoint = this.baseWidth - this.leftMargin - this.rightMargin;
+				// 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.legendArea.appendChild(rect);
+			});
+		}
 	}
 
 	makeOverlay() {

dist/frappe-charts.min.css

@@ -1 +1 @@
-.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px}.chart-container .graph-stats-container:after,.chart-container .graph-stats-container:before{content:"";display:block}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}
+.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}

docs/assets/js/index.min.js

@@ -264,8 +264,6 @@ var heatmapData = {
 	end: end
 };
 
-// ================================================================================
-
 var c1 = document.querySelector("#chart-composite-1");
 var c2 = document.querySelector("#chart-composite-2");
 

src/js/charts/AxisChart.js

@@ -1,11 +1,11 @@
 import BaseChart from './BaseChart';
 import { dataPrep, zeroDataPrep, getShortenedLabels } from '../utils/axis-chart-utils';
-import { Y_AXIS_LEFT_MARGIN, Y_AXIS_RIGHT_MARGIN } from '../utils/constants';
+import { Y_AXIS_LEFT_MARGIN, Y_AXIS_RIGHT_MARGIN, AXIS_LEGEND_BAR_SIZE } from '../utils/constants';
 import { getComponent } from '../objects/ChartComponents';
 import { getOffset, fire } from '../utils/dom';
 import { calcChartIntervals, getIntervalSize, getValueRange, getZeroIndex, scale } from '../utils/intervals';
 import { floatTwo } from '../utils/helpers';
-import { makeOverlay, updateOverlay } from '../utils/draw';
+import { makeOverlay, updateOverlay, legendBar } from '../utils/draw';
 import { MIN_BAR_PERCENT_HEIGHT, BAR_CHART_SPACE_RATIO, LINE_CHART_DOT_SIZE } from '../utils/constants';
 
 export default class AxisChart extends BaseChart {
@@ -395,21 +395,24 @@ export default class AxisChart extends BaseChart {
 	}
 
 	renderLegend() {
-		// let s = this.data;
-		// this.statsWrapper.textContent = '';
-
-		// if(s.datasets.length > 1) {
-		// 	s.datasets.map((d, i) => {
-		// 		let stats = $.create('div', {
-		// 			className: 'stats',
-		// 			inside: this.statsWrapper
-		// 		});
-		// 		stats.innerHTML = `<span class="indicator">
-		// 			<i style="background: ${this.colors[i]}"></i>
-		// 			${d.name}
-		// 		</span>`;
-		// 	});
-		// }
+		let s = this.data;
+		this.legendArea.textContent = '';
+
+		if(s.datasets.length > 1) {
+			s.datasets.map((d, i) => {
+				let barWidth = AXIS_LEGEND_BAR_SIZE;
+				// let rightEndPoint = this.baseWidth - this.leftMargin - this.rightMargin;
+				// 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.legendArea.appendChild(rect);
+			});
+		}
 	}
 
 	makeOverlay() {

src/js/charts/BaseChart.js

@@ -126,9 +126,7 @@ export default class BaseChart {
 			setTimeout(() => {this.update(this.data);}, this.initTimeout);
 		}
 
-		if(!onlyWidthChange) {
-			this.renderLegend();
-		}
+		this.renderLegend();
 
 		this.setupNavigation(init);
 	}
@@ -197,7 +195,7 @@ export default class BaseChart {
 		if(this.title.length) {
 			titleAreaHeight = 30;
 		}
-		if(this.showLegend) {
+		if(this.config.showLegend) {
 			legendAreaHeight = 30;
 		}
 		this.svg = makeSVGContainer(
@@ -208,6 +206,8 @@ export default class BaseChart {
 		);
 		this.svgDefs = makeSVGDefs(this.svg);
 
+		console.log(this.baseHeight, titleAreaHeight, legendAreaHeight);
+
 		if(this.title.length) {
 			this.titleEL = makeText(
 				'title',
@@ -226,7 +226,7 @@ export default class BaseChart {
 			`translate(${this.leftMargin}, ${top})`
 		);
 
-		top = this.baseHeight + titleAreaHeight;
+		top = this.baseHeight - titleAreaHeight;
 		this.legendArea = makeSVGGroup(
 			this.svg,
 			'chart-legend',

src/js/utils/constants.js

@@ -29,6 +29,8 @@ export const CHART_POST_ANIMATE_TIMEOUT = 400;
 export const DEFAULT_AXIS_CHART_TYPE = 'line';
 export const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
 
+export const AXIS_LEGEND_BAR_SIZE = 100;
+
 export const BAR_CHART_SPACE_RATIO = 0.5;
 export const MIN_BAR_PERCENT_HEIGHT = 0.01;
 

src/js/utils/draw.js

@@ -6,6 +6,7 @@ export const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
 export const FONT_SIZE = 10;
 const BASE_LINE_COLOR = '#dadada';
+const FONT_FILL = '#555b51';
 
 function $(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
@@ -148,6 +149,35 @@ export function heatSquare(className, x, y, size, fill='none', data={}) {
 	return createSVG("rect", args);
 }
 
+export function legendBar(x, y, size, fill='none', label) {
+	let args = {
+		className: 'legend-bar',
+		x: 0,
+		y: 0,
+		width: size,
+		height: '2px',
+		fill: fill
+	};
+	let text = createSVG('text', {
+		className: 'legend-dataset-text',
+		x: 0,
+		y: 0,
+		dy: (FONT_SIZE * 2) + 'px',
+		'font-size': (FONT_SIZE * 1.2) + 'px',
+		'text-anchor': 'start',
+		fill: FONT_FILL,
+		innerHTML: label
+	});
+
+	let group = createSVG('g', {
+		transform: `translate(${x}, ${y})`
+	});
+	group.appendChild(createSVG("rect", args));
+	group.appendChild(text);
+
+	return group;
+}
+
 export function makeText(className, x, y, content, fontSize = FONT_SIZE) {
 	return createSVG('text', {
 		className: className,

src/scss/charts.scss

@@ -3,58 +3,6 @@
 	font-family: -apple-system, BlinkMacSystemFont,
 		"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
 		"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-
-	.graph-focus-margin {
-		margin: 0px 5%;
-	}
-	&>.title {
-		margin-top: 25px;
-		margin-left: 25px;
-		text-align: left;
-		font-weight: normal;
-		font-size: 12px;
-		color: #6c7680;
-	}
-	.graphics {
-		margin-top: 10px;
-		padding-top: 10px;
-		padding-bottom: 10px;
-		position: relative;
-	}
-	.graph-stats-group {
-		display: flex;
-		justify-content: space-around;
-		flex: 1;
-	}
-	.graph-stats-container {
-		display: flex;
-		justify-content: space-between;
-		padding: 10px;
-		&:before,
-		&:after {
-			content: '';
-			display: block;
-		}
-		.stats {
-			padding-bottom: 15px;
-		}
-		.stats-title {
-			color: #8D99A6;
-		}
-		.stats-value {
-			font-size: 20px;
-			font-weight: 300;
-		}
-		.stats-description {
-			font-size: 12px;
-			color: #8D99A6;
-		}
-		.graph-data {
-			.stats-value {
-				color: #98d85b;
-			}
-		}
-	}
 	.axis, .chart-label {
 		fill: #555b51;
 		// temp commented
@@ -62,11 +10,6 @@
 			stroke: #dadada;
 		}
 	}
-	.percentage-graph {
-		.progress {
-			margin-bottom: 0px;
-		}
-	}
 	.dataset-units {
 		circle {
 			stroke: #fff;
@@ -192,29 +135,6 @@
 			}
 		}
 	}
-
-	/*Indicators*/
-	.indicator,
-	.indicator-right {
-		background: none;
-		font-size: 12px;
-		vertical-align: middle;
-		font-weight: bold;
-		color: #6c7680;
-	}
-	.indicator i {
-		content: '';
-		display: inline-block;
-		height: 8px;
-		width: 8px;
-		border-radius: 8px;
-	}
-	.indicator::before,.indicator i {
-		margin: 0 4px 0 0px;
-	}
-	.indicator-right::after {
-		margin: 0 0 0 4px;
-	}
 }