add event chart

docs/assets/css/index.css

@@ -62,15 +62,19 @@ pre.highlight {
 	/*font-size: 1.4rem;*/
 }
 .data-container {
-	height: 302px;
 	padding: 20px;
+	padding-bottom: 0px;
 }
 .image-container {
 	padding: 3px;
 }
 .image-container img{
-	width: 170px;
+	display: block;
-	height: 120px;
+    width: 100%;
+}
+.data p {
+	margin-bottom: 5px;
+	font-size: 12px;
 }
 .margin-vertical-px {
 	margin: 15px 0px;

docs/assets/js/index.js

@@ -4,10 +4,10 @@ let report_count_list = [17, 40, 33, 44, 126, 156,
 	324, 333, 478, 495, 373];
 
 let bar_composite_data = {
-	"labels": ["2007", "2008", "2009", "2010", "2011", "2012",
+	labels: ["2007", "2008", "2009", "2010", "2011", "2012",
 		"2013", "2014", "2015", "2016", "2017"],
 
-	"datasets": [{
+	datasets: [{
 		"title": "Events",
 		"color": "orange",
 		"values": report_count_list,
@@ -16,8 +16,8 @@ let bar_composite_data = {
 };
 
 let line_composite_data = {
-	"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+	labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-	"datasets": [{
+	datasets: [{
 		"color": "green",
 		"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
 		// "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"],
@@ -63,10 +63,10 @@ bar_composite_chart.parent.addEventListener('data-select', (e) => {
 // Demo Chart (bar, linepts, scatter(blobs), percentage)
 // ================================================================================
 let type_data = {
-	"labels": ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
+	labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
 		"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
 
-	"datasets": [
+	datasets: [
 		{
 			title: "Some Data", color: "light-blue",
 			values: [25, 40, 30, 35, 8, 52, 17, -4]
@@ -110,12 +110,12 @@ Array.prototype.slice.call(
 // Trends Chart
 // ================================================================================
 let trends_data = {
-	"labels": [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
+	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": [
+	datasets: [
 		{
 			"color": "blue",
 			"values": [132.9, 150.0, 149.4, 148.0,  94.4,  97.6,  54.1,  49.2,  22.5, 18.4,
@@ -191,8 +191,8 @@ let get_update_data = (source_array, length=10) => {
 };
 
 let update_data = {
-	"labels": get_update_data(update_data_all_labels),
+	labels: get_update_data(update_data_all_labels),
-	"datasets": [{
+	datasets: [{
 		"color": "red",
 		"values": get_update_data(update_data_all_values)
 	}],
@@ -206,18 +206,83 @@ let update_data = {
 	]
 };
 
+let update_chart = new Chart({
+	parent: "#chart-update",
+	data: update_data,
+	type: 'line',
+	height: 250,
+	is_series: 1,
+	region_fill: 1
+});
+
+// Event chart
+// ================================================================================
+let moon_names = ["Ganymede", "Callisto", "Io", "Europa"];
+let masses = [14819000, 10759000, 8931900, 4800000];
+let distances = [1070.412, 1882.709, 421.700, 671.034];
+let diameters = [5262.4, 4820.6, 3637.4, 3121.6];
+
+let jupiter_moons = {
+	'Ganymede': {
+		mass: '14819000 x 10^16 kg',
+		'semi-major-axis': '1070412 km',
+		'diameter': '5262.4 km'
+	},
+	'Callisto': {
+		mass: '10759000 x 10^16 kg',
+		'semi-major-axis': '1882709 km',
+		'diameter': '4820.6 km'
+	},
+	'Io': {
+		mass: '8931900 x 10^16 kg',
+		'semi-major-axis': '421700 km',
+		'diameter': '3637.4 km'
+	},
+	'Europa': {
+		mass: '4800000 x 10^16 kg',
+		'semi-major-axis': '671034 km',
+		'diameter': '3121.6 km'
+	},
+};
+
 let events_data = {
-	"labels": ["Sun", "Mon", "Tue", "Wed", "Thu"],
+	labels: ["Ganymede", "Callisto", "Io", "Europa"],
-	"datasets": [{
+	datasets: [
+		{
+			// "title": "km",
 			"color": "light-green",
-			"values": [25, 40, 30, 35, 48]
+			"values": distances,
+			"formatted": distances.map(d => d*1000 + " km")
 		}
 	]
 };
 
+let events_chart = new Chart({
+	parent: "#chart-events",
+	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
+	data: events_data,
+	type: 'bar',
+	height: 250,
+	is_navigable: 1,
+});
+
+let data_div = document.querySelector('.chart-events-data');
+
+events_chart.parent.addEventListener('data-select', (e) => {
+	let name = moon_names[e.index];
+	data_div.querySelector('.moon-name').innerHTML = name;
+	data_div.querySelector('.semi-major-axis').innerHTML = distances[e.index];
+	data_div.querySelector('.mass').innerHTML = masses[e.index];
+	data_div.querySelector('.diameter').innerHTML = diameters[e.index];
+	data_div.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
+});
+
+// Aggregation chart
+// ================================================================================
 let aggr_data = {
-	"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+	labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-	"datasets": [{
+	datasets: [
+		{
 			"color": "purple",
 			"values": [25, 40, 30, 35, 8, 52, 17]
 		},
@@ -229,44 +294,6 @@ let aggr_data = {
 	]
 };
 
-let heatmap_data = {
-	1479753000.0: 1,
-	1498588200.0: 1,
-	1499193000.0: 1,
-	1499625000.0: 2,
-	1500921000.0: 1,
-	1501612200.0: 1,
-	1502994600.0: 1,
-	1503858600.0: 1,
-	1504809000.0: 3,
-	1505241000.0: 1,
-	1506277800.0: 2
-};
-
-
-// Charts
-// ================================================================================
-
-
-
-
-let update_chart = new Chart({
-	parent: "#chart-update",
-	data: update_data,
-	type: 'line',
-	height: 250,
-	is_series: 1,
-	region_fill: 1
-});
-
-let events_chart = new Chart({
-	parent: "#chart-events",
-	data: events_data,
-	type: 'bar',
-	height: 250,
-	is_navigable: 1,
-});
-
 let aggr_chart = new Chart({
 	parent: "#chart-aggr",
 	data: aggr_data,
@@ -274,43 +301,6 @@ let aggr_chart = new Chart({
 	height: 250
 });
 
-let heatmap = new Chart({
-	parent: "#chart-heatmap",
-	data: heatmap_data,
-	type: 'heatmap',
-	height: 100,
-	// discrete_domains: 1
-});
-
-// Events
-// ================================================================================
-
-
-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)}],
-		get_update_data(update_data_all_labels)
-	);
-});
-
-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();
-});
-
-
-
 document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
 	if(e.target.innerHTML === "Show Sums") {
 		aggr_chart.show_sums();
@@ -331,6 +321,57 @@ document.querySelector('[data-aggregation="average"]').addEventListener("click",
 	}
 });
 
+// Heatmap
+// ================================================================================
+let heatmap_data = {
+	1479753000.0: 1,
+	1498588200.0: 1,
+	1499193000.0: 1,
+	1499625000.0: 2,
+	1500921000.0: 1,
+	1501612200.0: 1,
+	1502994600.0: 1,
+	1503858600.0: 1,
+	1504809000.0: 3,
+	1505241000.0: 1,
+	1506277800.0: 2
+};
+
+let heatmap = new Chart({
+	parent: "#chart-heatmap",
+	data: heatmap_data,
+	type: 'heatmap',
+	height: 100,
+	// discrete_domains: 1
+});
+
+// Events
+// ================================================================================
+
+
+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

@@ -147,8 +147,15 @@
                   <div id="chart-events" class="border"></div>
                 </div>
                 <div class="col-sm-4">
-                  <div id="chart-events-data" class="border data-container">
+                  <div class="chart-events-data" class="border data-container">
                     <div class="image-container border">
+                      <img class="moon-image" src="./assets/img/europa.jpg">
+                    </div>
+                    <div class="data margin-vertical-px">
+                      <h6 class="moon-name">Europa</h6>
+                      <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
+                      <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>
+                      <p>Diameter: <span class="diameter">3121.6</span> km</p>
                     </div>
                   </div>
                 </div>

src/scripts/charts/AxisChart.js

@@ -619,6 +619,9 @@ export default class AxisChart extends BaseChart {
 		const last_line_pos = old_pos[old_pos.length - 1];
 
 		let add_and_animate_line = (value, old_pos, new_pos) => {
+			if(typeof new_pos === 'string') {
+				new_pos = parseInt(new_pos.substring(0, new_pos.length-1));
+			}
 			const x_line = this.make_x_line(
 				height,
 				text_start_at,
@@ -708,7 +711,7 @@ export default class AxisChart extends BaseChart {
 			const filler_vals = new Array(Math.abs(no_of_extras)).fill("");
 			superimposed_values = new_vals.concat(filler_vals);
 
-			const filler_pos = new Array(Math.abs(no_of_extras)).fill(last_line_pos);
+			const filler_pos = new Array(Math.abs(no_of_extras)).fill(last_line_pos + "F");
 			superimposed_positions = new_pos.concat(filler_pos);
 		}
 
@@ -774,7 +777,8 @@ export default class AxisChart extends BaseChart {
 
 		let y_level = $.createSVG('g', {
 			className: `tick ${axis_line_class}`,
-			transform: `translate(0, ${y_pos})`
+			transform: `translate(0, ${y_pos})`,
+			'stroke-opacity': 1
 		});
 
 		if(darker) {
@@ -788,6 +792,19 @@ export default class AxisChart extends BaseChart {
 	}
 
 	add_and_animate_y_line(value, old_pos, new_pos, i, group, type, specific=false) {
+		let filler = false;
+		if(typeof new_pos === 'string') {
+			new_pos = parseInt(new_pos.substring(0, new_pos.length-1));
+			filler = true;
+		}
+		let new_props = {transform: `0, ${ new_pos }`};
+		let old_props = {transform: `0, ${ old_pos }`};
+
+		if(filler) {
+			new_props['stroke-opacity'] = 0;
+			// old_props['stroke-opacity'] = 1;
+		}
+
 		let [width, text_end_at, axis_line_class, start_at] = this.get_y_axis_line_props(specific);
 		let axis_label_class = !specific ? 'y-value-text' : 'specific-value';
 		value = !specific ? value : (value+"").toUpperCase();
@@ -807,11 +824,11 @@ export default class AxisChart extends BaseChart {
 
 		this.elements_to_animate && this.elements_to_animate.push([
 			{unit: y_line, array: [0], index: 0},
-			{transform: `0, ${ new_pos }`},
+			new_props,
 			250,
 			"easein",
 			"translate",
-			{transform: `0, ${ old_pos }`}
+			old_props
 		]);
 	}