wrap legend for aggregation charts

dist/frappe-charts.esm.js

@@ -1698,19 +1698,29 @@ class AggregationChart extends BaseChart {
 	renderLegend() {
 		let s = this.state;
 		this.legendArea.textContent = '';
-
 		this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
 
+		let count = 0;
+		let y = 0;
 		this.legendTotals.map((d, i) => {
 			let barWidth = 110;
-			let rect = legendDot(
-				barWidth * i + 5,
-				'0',
+			let divisor = Math.floor(
+				(this.width - getExtraWidth(this.measures))/barWidth
+			);
+			if(count > divisor) {
+				count = 0;
+				y += 20;
+			}
+			let x = barWidth * count + 5;
+			let dot = legendDot(
+				x,
+				y,
 				5,
 				this.colors[i],
 				`${s.labels[i]}: ${d}`
 			);
-			this.legendArea.appendChild(rect);
+			this.legendArea.appendChild(dot);
+			count++;
 		});
 	}
 }
@@ -2225,14 +2235,20 @@ class PercentageChart extends AggregationChart {
 	constructor(parent, args) {
 		super(parent, args);
 		this.type = 'percentage';
+		this.setup();
+	}
 
-		this.barOptions = args.barOptions || {};
-		this.barOptions.height = this.barOptions.height
-			|| PERCENTAGE_BAR_DEFAULT_HEIGHT;
-		this.barOptions.depth = this.barOptions.depth
-			|| PERCENTAGE_BAR_DEFAULT_DEPTH;
+	setMeasures(options) {
+		let m = this.measures;
+		this.barOptions = options.barOptions || {};
 
-		this.setup();
+		let b = this.barOptions;
+		b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT;
+		b.depth = b.depth || PERCENTAGE_BAR_DEFAULT_DEPTH;
+
+		m.paddings.right = 30;
+		m.legendHeight = 80;
+		m.baseHeight = b.height * 10 + b.depth * 0.5;
 	}
 
 	setupComponents() {

docs/assets/js/index.js

@@ -58,7 +58,7 @@ let typeChartArgs = {
 	height: 300,
 	colors: customColors,
 
-	maxLegendPoints: 6,
+	// maxLegendPoints: 6,
 	maxSlices: 10,
 
 	tooltipOptions: {
@@ -82,6 +82,12 @@ Array.prototype.slice.call(
 			typeChartArgs.colors = customColors;
 		}
 
+		if(type !== 'percentage') {
+			typeChartArgs.height = 300;
+		} else {
+			typeChartArgs.height = undefined;
+		}
+
 		let newChart = new Chart("#chart-aggr", typeChartArgs);
 		if(newChart){
 			aggrChart = newChart;

docs/assets/js/index.min.js

@@ -46,12 +46,6 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
 
 // Universal constants
 
-/**
- * Returns the value of a number upto 2 decimal places.
- * @param {Number} d Any number
- */
-
-
 /**
  * Returns whether or not two given arrays are equal.
  * @param {Array} arr1 First array
@@ -120,6 +114,7 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
 
 
 
+// https://stackoverflow.com/a/11252167/6495043
 
 
 function clone(date) {
@@ -160,8 +155,6 @@ function addDays(date, numberOfDays) {
 	date.setDate(date.getDate() + numberOfDays);
 }
 
-// Composite Chart
-// ================================================================================
 var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
 
 var lineCompositeData = {
@@ -352,7 +345,7 @@ var typeChartArgs = {
 	height: 300,
 	colors: customColors,
 
-	maxLegendPoints: 6,
+	// maxLegendPoints: 6,
 	maxSlices: 10,
 
 	tooltipOptions: {
@@ -378,6 +371,12 @@ Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button'
 			typeChartArgs.colors = customColors;
 		}
 
+		if (type !== 'percentage') {
+			typeChartArgs.height = 300;
+		} else {
+			typeChartArgs.height = undefined;
+		}
+
 		var newChart = new Chart("#chart-aggr", typeChartArgs);
 		if (newChart) {
 			aggrChart = newChart;

src/js/charts/AggregationChart.js

@@ -1,5 +1,6 @@
 import BaseChart from './BaseChart';
 import { legendDot } from '../utils/draw';
+import { getExtraWidth } from '../utils/constants';
 
 export default class AggregationChart extends BaseChart {
 	constructor(parent, args) {
@@ -57,19 +58,29 @@ export default class AggregationChart extends BaseChart {
 	renderLegend() {
 		let s = this.state;
 		this.legendArea.textContent = '';
-
 		this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
 
+		let count = 0;
+		let y = 0;
 		this.legendTotals.map((d, i) => {
 			let barWidth = 110;
-			let rect = legendDot(
-				barWidth * i + 5,
-				'0',
+			let divisor = Math.floor(
+				(this.width - getExtraWidth(this.measures))/barWidth
+			);
+			if(count > divisor) {
+				count = 0;
+				y += 20;
+			}
+			let x = barWidth * count + 5;
+			let dot = legendDot(
+				x,
+				y,
 				5,
 				this.colors[i],
 				`${s.labels[i]}: ${d}`
 			);
-			this.legendArea.appendChild(rect);
+			this.legendArea.appendChild(dot);
+			count++;
 		});
 	}
 }

src/js/charts/PercentageChart.js

@@ -7,14 +7,20 @@ export default class PercentageChart extends AggregationChart {
 	constructor(parent, args) {
 		super(parent, args);
 		this.type = 'percentage';
+		this.setup();
+	}
 
-		this.barOptions = args.barOptions || {};
-		this.barOptions.height = this.barOptions.height
-			|| PERCENTAGE_BAR_DEFAULT_HEIGHT;
-		this.barOptions.depth = this.barOptions.depth
-			|| PERCENTAGE_BAR_DEFAULT_DEPTH;
+	setMeasures(options) {
+		let m = this.measures;
+		this.barOptions = options.barOptions || {};
 
-		this.setup();
+		let b = this.barOptions;
+		b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT;
+		b.depth = b.depth || PERCENTAGE_BAR_DEFAULT_DEPTH;
+
+		m.paddings.right = 30;
+		m.legendHeight = 80;
+		m.baseHeight = b.height * 10 + b.depth * 0.5;
 	}
 
 	setupComponents() {