[add] sums and average

docs/assets/css/index.css

@@ -39,11 +39,6 @@ hr {
 	margin-bottom: 2rem;
 }
 
-.graphics-container {
-	border: 1px solid #ddd;
-	border-radius: 3px;
-}
-
 pre.highlight {
 	background: #f7f7f7;
 	border-radius: 3px;
@@ -62,6 +57,17 @@ pre.highlight {
 .hero {
 	/*font-size: 1.4rem;*/
 }
+.data-container {
+	height: 302px;
+	padding: 20px;
+}
+.image-container {
+	padding: 3px;
+}
+.image-container img{
+	width: 170px;
+	height: 120px;
+}
 .margin-vertical-px {
 	margin: 15px 0px;
 }
@@ -69,3 +75,8 @@ pre.highlight {
 .margin-vertical-rem {
 	margin: 2em 0 1em 0;
 }
+
+.border {
+	border: 1px solid #ddd;
+	border-radius: 3px;
+}

docs/assets/js/index.js

@@ -4,7 +4,7 @@ let bar_composite_data = {
 	"labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
 	"datasets": [{
 			"color": "orange",
-			"values": [50804, 10000, 20000, 61500, 82936.88, 24010, 40000, 60000, 25840, 50804.82, 116820],
+			"values": [50804, 10000, 20000, 61500, 72936.88, 24010, 40000, 60000, 25840, 50804.82, 16820],
 			"formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
 		}
 	]
@@ -189,7 +189,7 @@ let events_chart = new frappe.chart.FrappeChart({
 let aggr_chart = new frappe.chart.FrappeChart({
 	parent: "#chart-aggr",
 	data: aggr_data,
-	type: 'line',
+	type: 'bar',
 	height: 250
 });
 
@@ -221,6 +221,8 @@ Array.prototype.slice.call(
 	});
 });
 
+
+
 let chart_update_buttons = document.querySelector('.chart-update-buttons');
 
 chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
@@ -244,3 +246,24 @@ chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("c
 	update_chart.remove_data_point();
 });
 
+
+
+document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
+	if(e.target.innerHTML === "Show Sums") {
+		aggr_chart.show_sums();
+		e.target.innerHTML = "Hide Sums";
+	} else {
+		aggr_chart.hide_sums();
+		e.target.innerHTML = "Show Sums";
+	}
+});
+
+document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
+	if(e.target.innerHTML === "Show Average") {
+		aggr_chart.show_average();
+		e.target.innerHTML = "Hide Average";
+	} else {
+		aggr_chart.hide_average();
+		e.target.innerHTML = "Show Average";
+	}
+});

docs/index.html

@@ -33,11 +33,11 @@
         </div>
 
         <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
-          <div id="chart-composite-1" class="graphics-container"><svg height=225></svg></div>
+          <div id="chart-composite-1" class="border"><svg height=225></svg></div>
           <p class="mt-1">Use arrow keys to navigate data points</p>
         </div>
         <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
-          <div id="chart-composite-2" class="graphics-container"><svg height=225></svg></div>
+          <div id="chart-composite-2" class="border"><svg height=225></svg></div>
         </div>
       </div>
 
@@ -51,7 +51,7 @@
                 Create a new chart
               </h6>
               <pre><code class="hljs html">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
-              <div id="chart-types" class="graphics-container"></div>
+              <div id="chart-types" class="border"></div>
               <div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">
                 <button type="button" class="btn btn-sm btn-secondary active" data-type='bar'>Bar Chart</button>
                 <button type="button" class="btn btn-sm btn-secondary" data-type='line'>Line Chart</button>
@@ -66,7 +66,7 @@
                 Update Values
               </h6>
               <pre><code class="hljs html">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
-              <div id="chart-update" class="graphics-container"></div>
+              <div id="chart-update" class="border"></div>
               <div class="chart-update-buttons mt-1 mx-auto" role="group">
                 <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
                 <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
@@ -81,7 +81,18 @@
               <h6 class="margin-vertical-rem">
                 Listen to state change
               </h6>
-              <div id="chart-events" class="graphics-container"></div>
+              <div class="row">
+                <div class="col-sm-8">
+                  <div id="chart-events" class="border"></div>
+                </div>
+                <div class="col-sm-4">
+                  <div id="chart-events-data" class="border data-container">
+                    <div class="image-container border">
+                      <img src="https://apod.nasa.gov/apod/image/1208/perseids2012_hackmann_2000.jpg">
+                    </div>
+                  </div>
+                </div>
+              </div>
               <pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
             </div>
           </div>
@@ -91,10 +102,10 @@
               <h6 class="margin-vertical-rem">
                 Simple Aggregations
               </h6>
-              <div id="chart-aggr" class="graphics-container"></div>
+              <div id="chart-aggr" class="border"></div>
-              <div class="mt-1 mx-auto" role="group">
+              <div class="chart-aggr-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary">Show Sums</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-aggregation="sums">Show Sums</button>
-                <button type="button" class="btn btn-sm btn-secondary">Show Average</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-aggregation="average">Show Average</button>
               </div>
               <pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
             </div>
@@ -105,7 +116,7 @@
               <h6 class="margin-vertical-rem">
                 Oh, and an Annual Heatmap
               </h6>
-              <div id="chart-heatmap" class="graphics-container"
+              <div id="chart-heatmap" class="border"
                 style="overflow: scroll; text-align: center; padding: 20px;"></div>
               <div class="mt-1 mx-auto" role="group">
                 <button type="button" class="btn btn-sm btn-secondary active">Dicrete</button>
@@ -133,8 +144,8 @@
 
     <div class="built-with-frappe text-center" style="margin-top: -20px">
         <img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="https://frappe.github.io/frappe/assets/img/frappe-bird-grey.svg">
-        <p style="margin: 24px 0 0px 0; font-size: 15px">Made with ♥ by <a href="https://github.com/pratu16x7" target="_blank">pratu16x7</a>. Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.</p>
+        <p style="margin: 24px 0 80px 0; font-size: 15px">Made with ♥ by <a href="https://github.com/pratu16x7" target="_blank">pratu16x7</a>. Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.</p>
-        <p style="margin: 24px 0 80px 0; font-size: 12px">Data from <a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a></p>
+        <!--<p style="margin: 24px 0 80px 0; font-size: 12px">Data from <a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a></p>-->
     </div>
 
     <a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">

src/charts.js

@@ -1,21 +1,3 @@
-// specific_values = [
-// 	{
-// 		title: "Average",
-// 		line_type: "dashed",	// "dashed" or "solid"
-// 		value: 10
-// 	},
-// ]
-
-// summary = [
-// 	{
-// 		title: "Total",
-// 		color: 'blue',		// Indicator colors: 'grey', 'blue', 'red', 'green', 'orange',
-// 					// 'violet', 'darkgrey', 'black', 'yellow', 'light-blue'
-// 		value: 80
-// 	}
-// ]
-
-// Validate all arguments, check passed data format, set defaults
 "use strict";
 
 let frappe = {chart:{}, chart_types:['line', 'bar', 'percentage', 'heatmap']};
@@ -297,10 +279,9 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 		this.x = this.data.labels;
 		this.y = this.data.datasets;
 
-		this.get_x_label = this.format_lambdas.x_label;
 		this.get_y_label = this.format_lambdas.y_label;
-		this.get_x_tooltip = this.format_lambdas.x_tooltip;
 		this.get_y_tooltip = this.format_lambdas.y_tooltip;
+		this.get_x_tooltip = this.format_lambdas.x_tooltip;
 
 		this.colors = ['green', 'blue', 'violet', 'red', 'orange',
 				'yellow', 'light-blue', 'light-green', 'purple', 'magenta'];
@@ -331,20 +312,22 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 	}
 
 	setup_y() {
-		const values = this.get_all_y_values();
-
 		if(this.y_axis_values) {
 			this.y_old_axis_values =  this.y_axis_values.slice();
 		}
 
+		let values = this.get_all_y_values();
+
+		if(this.y_sums && this.y_sums.length > 0) {
+			values = values.concat(this.y_sums);
+		}
+
 		this.y_axis_values = this.get_y_axis_points(values);
 
 		if(!this.y_old_axis_values) {
 			this.y_old_axis_values = this.y_axis_values.slice();
 		}
 
-		// this.y_axis_values = this.get_y_axis_points(values);
-
 		const y_pts = this.y_axis_values;
 		const value_range = y_pts[y_pts.length-1] - y_pts[0];
 
@@ -483,7 +466,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 		this.y.map((d, i) => {
 			d.svg_units = [];
 			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
-			this.make_new_units_for_dataset(this.x_axis_positions, d.y_tops, d.color || this.colors[i], i, this.y.length);
+			this.make_new_units(d, i);
 		});
 	}
 
@@ -496,7 +479,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 			d.svg_units = [];
 
 			this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
-			this.make_new_units_for_dataset(this.x_axis_positions, d.y_tops, d.color || this.colors[i], i, this.y.length);
+			this.make_new_units(d, i);
 		});
 
 		setTimeout(() => {
@@ -511,35 +494,41 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 		}, 500);
 	}
 
-	make_new_units() {
+	make_new_units(d, i) {
-		this.y.map((d, i) => {
+		this.make_new_units_for_dataset(
-			this.make_new_units_for_dataset(this.x_axis_positions, d.y_tops, d.color || this.colors[i], i, this.y.length);
+			this.x_axis_positions,
-		});
+			d.y_tops,
+			d.color || this.colors[i],
+			i,
+			this.y.length
+		);
 	}
 
-	make_new_units_for_dataset(x_values, y_values, color, dataset_index, no_of_datasets) {
+	make_new_units_for_dataset(x_values, y_values, color, dataset_index, no_of_datasets, group, array, unit) {
-		let group = this.svg_units_groups[dataset_index];
+		if(!group) group = this.svg_units_groups[dataset_index];
-		group.textContent = '';
+		if(!array) array = this.y[dataset_index].svg_units;
-		this.y[dataset_index].svg_units = [];
+		if(!unit) unit = this.unit_args;
+
+		group.textContent = '';
+		array.length = 0;
 
-		let d = this.unit_args;
 		y_values.map((y, i) => {
-			let data_unit = this.draw[d.type](
+			let data_unit = this.draw[unit.type](
 				x_values[i],
 				y,
-				d.args,
+				unit.args,
 				color,
 				dataset_index,
 				no_of_datasets
 			);
 			group.appendChild(data_unit);
-			this.y[dataset_index].svg_units.push(data_unit);
+			array.push(data_unit);
 		});
 	}
 
 	make_y_specifics() {
+		this.specific_y_group.textContent = '';
 		this.specific_values.map(d => {
-			this.specific_y_group.textContent = '';
 			this.specific_y_group.appendChild(
 				this.make_y_line(
 					0,
@@ -598,19 +587,82 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 	}
 
 	// API
-
 	show_sums() {
-		// Remake y axis
+		this.updating = true;
 
-		// Make sum units and animate
+		this.y_sums = new Array(this.x_axis_positions.length).fill(0);
+		this.y.map(d => {
+			d.values.map( (value, i) => {
+				this.y_sums[i] += value;
+			});
+		});
+
+		// Remake y axis, animate
+		this.update_values();
+
+		// Then make sum units, don't animate
+		this.sum_units = [];
+
+		this.make_new_units_for_dataset(
+			this.x_axis_positions,
+			this.y_sums.map( val => $$.float_2(this.zero_line - val * this.multiplier)),
+			'light-grey',
+			0,
+			1,
+			this.sum_group,
+			this.sum_units
+		);
+
+		// this.make_path && this.make_path(d, i, old_x, old_y, d.color || this.colors[i]);
+
+		this.updating = false;
 	}
 
 	hide_sums() {
-		//
+		if(this.updating) return;
+		this.y_sums = [];
+		this.sum_group.textContent = '';
+		this.sum_units = [];
+		this.update_values();
 	}
 
 	show_average() {
-		// has to be animated as well
+		this.old_specific_values = this.specific_values.slice();
+		this.y.map((d, i) => {
+			let sum = 0;
+			d.values.map(e => {sum+=e});
+			let average = sum/d.values.length;
+
+			this.specific_values.push({
+				title: "AVG" + " " + (i+1),
+				line_type: "dashed",
+				value: average,
+				auto: 1
+			});
+		});
+
+		console.log(this.specific_values);
+
+		this.update_values();
+	}
+
+	hide_average() {
+		this.old_specific_values = this.specific_values.slice();
+
+		let indices_to_remove = [];
+		this.specific_values.map((d, i) => {
+			if(d.auto) indices_to_remove.unshift(i);
+		});
+
+		console.log(indices_to_remove);
+
+		indices_to_remove.map(index => {
+			this.specific_values.splice(index, 1);
+		});
+
+		console.log(this.specific_values);
+
+		this.update_values();
 	}
 
 	update_values(new_y, new_x) {
@@ -628,7 +680,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 		this.no_of_extra_pts = new_x.length - this.x.length;
 
 		// Just update values prop, setup_x/y() will do the rest
-		this.y.map((d, i) => {d.values = new_y[i].values;});
+		if(new_y) this.y.map((d, i) => {d.values = new_y[i].values;});
 		if(new_x) this.x = new_x;
 
 		this.setup_x();
@@ -642,7 +694,10 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 			}, 300)
 		}
 
-		if(!$$.arrays_equal(this.y_old_axis_values, this.y_axis_values)) {
+		if(!$$.arrays_equal(this.y_old_axis_values, this.y_axis_values) ||
+			(this.old_specific_values &&
+			!$$.arrays_equal(this.old_specific_values, this.specific_values))) {
+
 			this.make_y_axis(true);
 			setTimeout(() => {
 				if(!this.updating) {
@@ -717,7 +772,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 		setTimeout(() => {
 			this.y.map((d, i) => {
 				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
-				this.make_new_units_for_dataset(this.x_axis_positions, d.y_tops, d.color || this.colors[i], i, this.y.length);
+				this.make_new_units(d, i);
 			});
 		}, 300);
 	}
@@ -1145,14 +1200,6 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 				}
 			});
 		});
-
-		// Sums
-		this.y_sums = new Array(this.x_axis_positions.length).fill(0);
-		this.y.map(d => {
-			d.values.map( (value, i) => {
-				this.y_sums[i] += value;
-			});
-		});
 	}
 
 	get_bar_height_and_y_attr(y_top) {
@@ -1251,8 +1298,9 @@ frappe.chart.BarChart = class BarChart extends frappe.chart.AxisChart {
 
 	make_overlay() {
 		// Just make one out of the first element
-		let unit = this.y[0].svg_units[0];
+		let index = this.x.length - 1;
-		this.update_current_data_point(0);
+		let unit = this.y[0].svg_units[index];
+		this.update_current_data_point(index);
 
 		if(this.overlay) {
 			this.overlay.parentNode.removeChild(this.overlay);
@@ -1394,7 +1442,6 @@ frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.Frappe
 		super(args);
 		this.type = 'percentage';
 
-		this.get_x_label = this.format_lambdas.x_label;
 		this.get_y_label = this.format_lambdas.y_label;
 		this.get_x_tooltip = this.format_lambdas.x_tooltip;
 		this.get_y_tooltip = this.format_lambdas.y_tooltip;