add series, init; update trends chart

docs/assets/js/index.js

@@ -110,28 +110,68 @@ Array.prototype.slice.call(
 // Trends Chart
 // ================================================================================
 let trends_data = {
-	"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
-		"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed",
-		"Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"],
+	"labels": [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
+		1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
+		1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996,
+		1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006,
+		2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016] ,
 	"datasets": [
 		{
 			"color": "blue",
-			"values": [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58,
-				12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17]
+			"values": [132.9, 150.0, 149.4, 148.0,  94.4,  97.6,  54.1,  49.2,  22.5, 18.4,
+				39.3, 131.0, 220.1, 218.9, 198.9, 162.4,  91.0,  60.5,  20.6,  14.8,
+				33.9, 123.0, 211.1, 191.8, 203.3, 133.0,  76.1,  44.9,  25.1,  11.6,
+				28.9,  88.3, 136.3, 173.9, 170.4, 163.6,  99.3,  65.3,  45.8,  24.7,
+				12.6,   4.2,   4.8,  24.9,  80.8,  84.5,  94.0, 113.3,  69.8,  39.8]
 		}
 	]
 };
 
-let plot_chart = new Chart({
+let plot_chart_args = {
 	parent: "#chart-trends",
+	title: "Mean Total Sunspot Count - Yearly",
 	data: trends_data,
 	type: 'line',
 	height: 250,
+	is_series: 1,
 	show_dots: 0,
-	// region_fill: 1,
 	heatline: 1,
 	x_axis_mode: 'tick',
-	y_axis_mode: 'tick'
+	y_axis_mode: 'span'
+};
+
+new Chart(plot_chart_args);
+
+Array.prototype.slice.call(
+	document.querySelectorAll('.chart-plot-buttons button')
+).map(el => {
+	el.addEventListener('click', (e) => {
+		let btn = e.target;
+		let type = btn.getAttribute('data-type');
+		let conf = [];
+
+		if(type === 'line') {
+			conf = [0, 0, 0];
+		} else if(type === 'region') {
+			conf = [0, 0, 1];
+		} else {
+			conf = [0, 1, 0];
+		}
+
+		plot_chart_args.show_dots = conf[0];
+		plot_chart_args.heatline = conf[1];
+		plot_chart_args.region_fill = conf[2];
+
+		plot_chart_args.init = false;
+
+		new Chart(plot_chart_args);
+
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
 });
 
 // Update values chart
@@ -215,6 +255,7 @@ let update_chart = new Chart({
 	data: update_data,
 	type: 'line',
 	height: 250,
+	is_series: 1,
 	region_fill: 1
 });
 

docs/index.html

@@ -118,13 +118,14 @@
               <pre><code class="hljs javascript">  ...
     x_axis_mode: 'tick',  // for short label ticks
                           // or 'span' for long spanning vertical axis lines
-    y_axis_mode: 'tick',
+    y_axis_mode: 'span',  // for long horizontal lines, or 'tick'
+    is_series: 1,         // to allow for skipping of X values
   ...</code></pre>
               <div id="chart-trends" class="border"></div>
               <div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-update="line">Line</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-update="heatline">HeatLine</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-update="region">Region</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-type="line">Line</button>
+                <button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-type="region">Region</button>
               </div>
               <pre><code class="hljs javascript margin-vertical-px">  ...
     type: 'line',   // Line chart specific properties:

src/scripts/charts/AxisChart.js

@@ -9,6 +9,8 @@ export default class AxisChart extends BaseChart {
 		this.x = this.data.labels;
 		this.y = this.data.datasets;
 
+		this.is_series = args.is_series;
+
 		this.get_y_label = this.format_lambdas.y_label;
 		this.get_y_tooltip = this.format_lambdas.y_tooltip;
 		this.get_x_tooltip = this.format_lambdas.x_tooltip;
@@ -130,8 +132,26 @@ export default class AxisChart extends BaseChart {
 			return;
 		}
 
+		let allowed_space = this.avg_unit_width * 1.5;
+		let allowed_letters = allowed_space / 8;
+
 		this.x_axis_group.textContent = '';
 		this.x.map((point, i) => {
+			let space_taken = this.get_strwidth(point);
+			if(space_taken > allowed_space) {
+				if(this.is_series) {
+					// Skip some axis lines if X axis is a series
+					let skips = 1;
+					while((space_taken/skips)*2 > allowed_space) {
+						skips++;
+					}
+					if(i % skips !== 0) {
+						return;
+					}
+				} else {
+					point = point.slice(0, allowed_letters-3) + " ...";
+				}
+			}
 			this.x_axis_group.appendChild(
 				this.make_x_line(
 					height,
@@ -218,10 +238,14 @@ export default class AxisChart extends BaseChart {
 	}
 
 	setup_navigation(init) {
-		// Hack: defer nav till initial update_values
-		setTimeout(() => {
+		if(init) {
+			// Hack: defer nav till initial update_values
+			setTimeout(() => {
+				super.setup_navigation(init);
+			}, 500);
+		} else {
 			super.setup_navigation(init);
-		}, 500);
+		}
 	}
 
 	make_new_units(d, i) {
@@ -705,13 +729,6 @@ export default class AxisChart extends BaseChart {
 	}
 
 	make_x_line(height, text_start_at, point, label_class, axis_line_class, x_pos) {
-		let allowed_space = this.avg_unit_width * 1.5;
-
-		if(this.get_strwidth(point) > allowed_space) {
-			let allowed_letters = allowed_space / 8;
-			point = point.slice(0, allowed_letters-3) + " ...";
-		}
-
 		let line = $.createSVG('line', {
 			x1: 0,
 			x2: 0,
@@ -858,6 +875,12 @@ export default class AxisChart extends BaseChart {
 		if(no_of_parts > 5) {
 			no_of_parts /= 2;
 			part_size *= 2;
+
+			pos_no_of_parts /=2;
+		}
+
+		if (max_val < (pos_no_of_parts - 1) * part_size) {
+			no_of_parts--;
 		}
 
 		return this.get_intervals(

src/scripts/charts/BaseChart.js

@@ -82,7 +82,11 @@ export default class BaseChart {
 
 	setup() {
 		this.bind_window_events();
-		this.refresh(true);
+		if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
+			this.refresh();
+		} else {
+			this.refresh(true);
+		}
 	}
 
 	bind_window_events() {
@@ -252,7 +256,7 @@ export default class BaseChart {
 
 	// Helpers
 	get_strwidth(string) {
-		return string.length * 8;
+		return (string+"").length * 8;
 	}
 
 	// Objects