update aggr chart and heatmap

docs/assets/js/index.js

@@ -176,11 +176,10 @@ Array.prototype.slice.call(
 
 // Update values chart
 // ================================================================================
-let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
+let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
-	"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed",
+	"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
-	"Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"];
+	"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
-let update_data_all_values = [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58,
+let update_data_all_values = Array.from({length: 30}, () => Math.floor(Math.random() * 75 - 15));
-	12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17];
 
 // We're gonna be shuffling this
 let update_data_all_indices = update_data_all_labels.map((d,i) => i);
@@ -215,6 +214,30 @@ let update_chart = new Chart({
 	region_fill: 1
 });
 
+let chart_update_buttons = document.querySelector('.chart-update-buttons');
+
+chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
+	shuffle(update_data_all_indices);
+	update_chart.update_values(
+		[{values: get_update_data(update_data_all_values)}],
+		update_data_all_labels.slice(0, 10)
+	);
+});
+
+chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
+	// NOTE: this ought to be problem, labels stay the same after update
+	let index = update_chart.x.length; // last index to add
+	if(index >= update_data_all_indices.length) return;
+	update_chart.add_data_point(
+		[update_data_all_values[index]], update_data_all_labels[index]
+	);
+});
+
+chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
+	update_chart.remove_data_point();
+});
+
+
 // Event chart
 // ================================================================================
 let moon_names = ["Ganymede", "Callisto", "Io", "Europa"];
@@ -250,7 +273,7 @@ let events_data = {
 	datasets: [
 		{
 			// "title": "km",
-			"color": "light-green",
+			"color": "grey",
 			"values": distances,
 			"formatted": distances.map(d => d*1000 + " km")
 		}
@@ -313,10 +336,10 @@ document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e
 
 document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
 	if(e.target.innerHTML === "Show Average") {
-		aggr_chart.show_average();
+		aggr_chart.show_averages();
 		e.target.innerHTML = "Hide Average";
 	} else {
-		aggr_chart.hide_average();
+		aggr_chart.hide_averages();
 		e.target.innerHTML = "Show Average";
 	}
 });
@@ -342,36 +365,30 @@ let heatmap = new Chart({
 	data: heatmap_data,
 	type: 'heatmap',
 	height: 100,
-	// discrete_domains: 1
+	discrete_domains: 1  // default 0
 });
 
-// Events
+document.querySelector('[data-heatmap="discrete"]').addEventListener("click", (e) => {
+	heatmap = new Chart({
+		parent: "#chart-heatmap",
+		data: heatmap_data,
+		type: 'heatmap',
+		height: 100,
+		discrete_domains: 1  // default 0
+	});
+});
+
+document.querySelector('[data-heatmap="continuous"]').addEventListener("click", (e) => {
+	heatmap = new Chart({
+		parent: "#chart-heatmap",
+		data: heatmap_data,
+		type: 'heatmap',
+		height: 100
+	});
+});
+
+// Helpers
 // ================================================================================
-
-
-let chart_update_buttons = document.querySelector('.chart-update-buttons');
-
-chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
-	shuffle(update_data_all_indices);
-	update_chart.update_values(
-		[{values: get_update_data(update_data_all_values)}],
-		update_data_all_labels.slice(0, 10)
-	);
-});
-
-chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
-	// NOTE: this ought to be problem, labels stay the same after update
-	let index = update_chart.x.length; // last index to add
-	if(index >= update_data_all_indices.length) return;
-	update_chart.add_data_point(
-		[update_data_all_values[index]], update_data_all_labels[index]
-	);
-});
-
-chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
-	update_chart.remove_data_point();
-});
-
 function shuffle(array) {
 	// https://stackoverflow.com/a/2450976/6495043
 	// Awesomeness: https://bost.ocks.org/mike/shuffle/

docs/index.html

@@ -99,14 +99,30 @@
               <h6 class="margin-vertical-rem">
                 Update Values
               </h6>
-              <pre><code class="hljs html">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
+              <pre><code class="hljs javascript">  // Update entire datasets
+  chart.update_values(
+    [
+      {values: new_dataset_1_values},
+      {values: new_dataset_2_values}
+    ],
+    new_labels
+  );
+
+  // Add a new data point
+  chart.add_data_point(
+    [new_value_1, new_value_2],
+    new_label,
+    index // defaults to last index
+  );
+
+  // Remove a data point
+  chart.remove_data_point(index);</code></pre>
               <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>
                 <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
               </div>
-              <pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
             </div>
           </div>
 
@@ -160,7 +176,9 @@
                   </div>
                 </div>
               </div>
-              <pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
+              <pre><code class="hljs javascript margin-vertical-px">  chart.parent.addEventListener('data-select', (e) => {
+    update_moon_data(e.index); // e contains index and value of current datapoint
+  });</code></pre>
             </div>
           </div>
 
@@ -174,22 +192,30 @@
                 <button type="button" class="btn btn-sm btn-secondary" data-aggregation="sums">Show Sums</button>
                 <button type="button" class="btn btn-sm btn-secondary" data-aggregation="average">Show Averages</button>
               </div>
-              <pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
+              <pre><code class="hljs javascript margin-vertical-px">  chart.show_sums();  // and `hide_sums()`
+
+  chart.show_averages();  // and `hide_averages()`</code></pre>
             </div>
           </div>
 
           <div class="col-sm-10 push-sm-1">
             <div class="dashboard-section">
               <h6 class="margin-vertical-rem">
-                Oh, and an Annual Heatmap
+                And an Annual Heatmap
               </h6>
               <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>
+                <button type="button" class="btn btn-sm btn-secondary active" data-heatmap="discrete">Dicrete</button>
-                <button type="button" class="btn btn-sm btn-secondary">Continuous</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-heatmap="continuous">Continuous</button>
               </div>
-              <pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
+              <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new Chart({
+    parent: "#heatmap",
+    data: heatmap_data,  // object with date/timestamp-value pairs
+    type: 'heatmap',
+    height: 100,
+    discrete_domains: 1  // default 0
+  });</code></pre>
             </div>
           </div>
 

src/scripts/charts/AxisChart.js

@@ -209,6 +209,15 @@ export default class AxisChart extends BaseChart {
 	}
 
 	draw_graph(init=false) {
+		if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
+			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(d, i);
+				this.calc_y_dependencies();
+			});
+			return;
+		}
 		if(init) {
 			this.draw_new_graph_and_animate();
 			return;
@@ -322,6 +331,8 @@ export default class AxisChart extends BaseChart {
 	}
 
 	map_tooltip_x_position_and_show(relX) {
+		console.warn(this.y_min_tops);
+		if(!this.y_min_tops) return;
 		for(var i=this.x_axis_positions.length - 1; i >= 0 ; i--) {
 			let x_val = this.x_axis_positions[i];
 			// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
@@ -387,7 +398,7 @@ export default class AxisChart extends BaseChart {
 		this.update_values();
 	}
 
-	show_average() {
+	show_averages() {
 		this.old_specific_values = this.specific_values.slice();
 		this.y.map((d, i) => {
 			let sum = 0;
@@ -405,7 +416,7 @@ export default class AxisChart extends BaseChart {
 		this.update_values();
 	}
 
-	hide_average() {
+	hide_averages() {
 		this.old_specific_values = this.specific_values.slice();
 
 		let indices_to_remove = [];
@@ -971,6 +982,8 @@ export default class AxisChart extends BaseChart {
 				}
 			});
 		});
+		// this.chart_wrapper.removeChild(this.tip.container);
+		// this.make_tooltip();
 	}
 
 	get_bar_height_and_y_attr(y_top) {

src/scripts/charts/BaseChart.js

@@ -82,12 +82,8 @@ export default class BaseChart {
 
 	setup() {
 		this.bind_window_events();
-		if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
-			this.refresh();
-		} else {
 		this.refresh(true);
 	}
-	}
 
 	bind_window_events() {
 		window.addEventListener('resize', () => this.refresh());