[event-binding] chart.unbindWindowEvents()

dist/frappe-charts.esm.js

@@ -298,10 +298,6 @@ class SvgTip {
 	}
 }
 
-/**
- * Returns the value of a number upto 2 decimal places.
- * @param {Number} d Any number
- */
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }
@@ -1342,6 +1338,8 @@ function prepareForExport(svg) {
 	return container.innerHTML;
 }
 
+let BOUND_DRAW_FN;
+
 class BaseChart {
 	constructor(parent, options) {
 
@@ -1422,8 +1420,18 @@ class BaseChart {
 		this.height = height - getExtraHeight(this.measures);
 
 		// Bind window events
-		window.addEventListener('resize', () => this.draw(true));
-		window.addEventListener('orientationchange', () => this.draw(true));
+		BOUND_DRAW_FN = this.boundDrawFn.bind(this);
+		window.addEventListener('resize', BOUND_DRAW_FN);
+		window.addEventListener('orientationchange', this.boundDrawFn.bind(this));
+	}
+
+	boundDrawFn() {
+		this.draw(true);
+	}
+
+	unbindWindowEvents() {
+		window.removeEventListener('resize', BOUND_DRAW_FN);
+		window.removeEventListener('orientationchange', this.boundDrawFn.bind(this));
 	}
 
 	// Has to be called manually
@@ -1632,15 +1640,6 @@ class BaseChart {
 
 	updateDataset() {}
 
-	boundDrawFn() {
-		this.draw(true);
-	}
-
-	unbindWindowEvents(){
-		window.removeEventListener('resize', () => this.boundDrawFn.bind(this));
-		window.removeEventListener('orientationchange', () => this.boundDrawFn.bind(this));
-	}
-
 	export() {
 		let chartSvg = prepareForExport(this.svg);
 		downloadFile(this.title || 'Chart', [chartSvg]);
@@ -2253,7 +2252,7 @@ class PercentageChart extends AggregationChart {
 
 		m.paddings.right = 30;
 		m.legendHeight = 80;
-		m.baseHeight = b.height * 10 + b.depth * 0.5;
+		m.baseHeight = (b.height + b.depth * 0.5) * 8;
 	}
 
 	setupComponents() {
@@ -3673,7 +3672,6 @@ class AxisChart extends BaseChart {
 	// removeDataPoint(index = 0) {}
 }
 
-// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	bar: AxisChart,
 	line: AxisChart,

docs/assets/js/data.js

@@ -14,6 +14,7 @@ export const lineCompositeData = {
 		{
 			label: "Average 100 reports/month",
 			value: 1200,
+			options: { labelPos: 'left' }
 		}
 	],
 

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) {
@@ -169,7 +164,8 @@ var lineCompositeData = {
 
 	yMarkers: [{
 		label: "Average 100 reports/month",
-		value: 1200
+		value: 1200,
+		options: { labelPos: 'left' }
 	}],
 
 	datasets: [{
@@ -299,8 +295,6 @@ var heatmapData = {
 	end: end
 };
 
-// ================================================================================
-
 var c1 = document.querySelector("#chart-composite-1");
 var c2 = document.querySelector("#chart-composite-2");
 

docs/index.html

@@ -255,6 +255,7 @@
     isNavigable: 1,        // default: 0
     valuesOverPoints: 1,   // default: 0
     barOptions: {
+      spaceRatio: 1        // default: 0.5
       stacked: 1           // default: 0
     }
 
@@ -274,15 +275,17 @@
     },
 
     // Pie/Percentage charts
-
     maxLegendPoints: 6,    // default: 20
     maxSlices: 10,         // default: 20
 
-    // Heatmap
+    // Percentage chart
+    barOptions: {
+      height: 15           // default: 20
+      depth: 5             // default: 2
+    }
 
+    // Heatmap
     discreteDomains: 1,    // default: 1
-    start: startDate,      // Date object
-    colors: []
   }
   ...
 
@@ -297,6 +300,9 @@
     // Exporting
     chart.export();
 
+    // Unbind window-resize events
+    chart.unbindWindowEvents();
+
   </code></pre>
               </div>
             </div>

src/js/charts/BaseChart.js

@@ -7,6 +7,8 @@ import { getColor, isValidColor } from '../utils/colors';
 import { runSMILAnimation } from '../utils/animation';
 import { downloadFile, prepareForExport } from '../utils/export';
 
+let BOUND_DRAW_FN;
+
 export default class BaseChart {
 	constructor(parent, options) {
 
@@ -87,8 +89,18 @@ export default class BaseChart {
 		this.height = height - getExtraHeight(this.measures);
 
 		// Bind window events
-		window.addEventListener('resize', () => this.draw(true));
-		window.addEventListener('orientationchange', () => this.draw(true));
+		BOUND_DRAW_FN = this.boundDrawFn.bind(this);
+		window.addEventListener('resize', BOUND_DRAW_FN);
+		window.addEventListener('orientationchange', this.boundDrawFn.bind(this));
+	}
+
+	boundDrawFn() {
+		this.draw(true);
+	}
+
+	unbindWindowEvents() {
+		window.removeEventListener('resize', BOUND_DRAW_FN);
+		window.removeEventListener('orientationchange', this.boundDrawFn.bind(this));
 	}
 
 	// Has to be called manually
@@ -297,15 +309,6 @@ export default class BaseChart {
 
 	updateDataset() {}
 
-	boundDrawFn() {
-		this.draw(true);
-	}
-
-	unbindWindowEvents(){
-		window.removeEventListener('resize', () => this.boundDrawFn.bind(this));
-		window.removeEventListener('orientationchange', () => this.boundDrawFn.bind(this));
-	}
-
 	export() {
 		let chartSvg = prepareForExport(this.svg);
 		downloadFile(this.title || 'Chart', [chartSvg]);

src/js/charts/PercentageChart.js

@@ -20,7 +20,7 @@ export default class PercentageChart extends AggregationChart {
 
 		m.paddings.right = 30;
 		m.legendHeight = 80;
-		m.baseHeight = b.height * 10 + b.depth * 0.5;
+		m.baseHeight = (b.height + b.depth * 0.5) * 8;
 	}
 
 	setupComponents() {