[start] web page

dist/frappe-charts.esm.js

@@ -1156,7 +1156,6 @@ class BaseChart {
 		this.options = {};
 
 		if(this.config.isNavigable) {
-			this.state.currentIndex = 0;
 			this.overlays = [];
 		}
 
@@ -1313,8 +1312,12 @@ class BaseChart {
 
 	updateNav() {
 		if(this.config.isNavigable) {
-			this.makeOverlay();
-			this.bindUnits();
+			// if(!this.overlayGuides){
+				this.makeOverlay();
+				this.bindUnits();
+			// } else {
+			// 	this.updateOverlay();
+			// }
 		}
 	}
 
@@ -1363,7 +1366,9 @@ class BaseChart {
 			document.addEventListener('keydown', (e) => {
 				if(isElementInViewport(this.chartWrapper)) {
 					e = e || window.event;
-					this.keyActions[e.keyCode]();
+					if(this.keyActions[e.keyCode]) {
+						this.keyActions[e.keyCode]();
+					}
 				}
 			});
 		}
@@ -2494,7 +2499,7 @@ let componentConfigs = {
 		makeElements(data) {
 			let c = this.constants;
 			this.unitType = 'bar';
-			return data.yPositions.map((y, j) => {
+			this.units = data.yPositions.map((y, j) => {
 				return datasetBar(
 					data.xPositions[j],
 					y,
@@ -2510,6 +2515,7 @@ let componentConfigs = {
 					}
 				)
 			});
+			return this.units;
 		},
 		animateElements(newData) {
 			let c = this.constants;
@@ -2573,10 +2579,10 @@ let componentConfigs = {
 				}
 			);
 
-			this.dots = [];
+			this.units = [];
 
 			if(!c.hideDots) {
-				this.dots = data.yPositions.map((y, j) => {
+				this.units = data.yPositions.map((y, j) => {
 					return datasetDot(
 						data.xPositions[j],
 						y,
@@ -2588,8 +2594,7 @@ let componentConfigs = {
 				});
 			}
 
-			return Object.values(this.paths).concat(this.dots);
-			// return this.dots;
+			return Object.values(this.paths).concat(this.units);
 		},
 		animateElements(newData) {
 			let newXPos = newData.xPositions;
@@ -2619,8 +2624,8 @@ let componentConfigs = {
 			animateElements = animateElements.concat(animatePath(
 				this.paths, newXPos, newYPos, newData.zeroLine));
 
-			if(this.dots.length) {
-				this.dots.map((dot, i) => {
+			if(this.units.length) {
+				this.units.map((dot, i) => {
 					animateElements = animateElements.concat(animateDot(
 						dot, newXPos[i], newYPos[i]));
 				});
@@ -3009,20 +3014,6 @@ class AxisChart extends BaseChart {
 	}
 
 	makeOverlay() {
-		// Just make one out of the first element
-		// let index = this.xAxisLabels.length - 1;
-		// let unit = this.y[0].svg_units[index];
-		// this.setCurrentDataPoint(index);
-
-		// if(this.overlay) {
-		// 	this.overlay.parentNode.removeChild(this.overlay);
-		// }
-
-		// this.overlay = unit.cloneNode();
-		// this.overlay.style.fill = '#000000';
-		// this.overlay.style.opacity = '0.4';
-		// this.drawArea.appendChild(this.overlay);
-
 		if(this.overlayGuides) {
 			this.overlayGuides.forEach(g => {
 				let o = g.overlay;
@@ -3034,12 +3025,12 @@ class AxisChart extends BaseChart {
 			return {
 				type: c.unitType,
 				overlay: undefined,
-				units: c.store,
+				units: c.units,
 			}
 		});
 
 		if(this.state.currentIndex === undefined) {
-			this.state.currentIndex = 0;
+			this.state.currentIndex = this.state.datasetLength - 1;
 		}
 
 		// Render overlays
@@ -3051,10 +3042,19 @@ class AxisChart extends BaseChart {
 
 	}
 
+	updateOverlayGuides() {
+		if(this.overlayGuides) {
+			this.overlayGuides.forEach(g => {
+				let o = g.overlay;
+				o.parentNode.removeChild(o);
+			});
+		}
+	}
+
 	bindOverlay() {
 		// on event, update overlay
 		this.parent.addEventListener('data-select', (e) => {
-			this.updateOverlay(e.svg_unit);
+			this.updateOverlay();
 		});
 	}
 

docs/assets/js/index.js

@@ -1,7 +1,7 @@
 // Composite Chart
 // ================================================================================
 let report_count_list = [17, 40, 33, 44, 126, 156,
-	324, 333, 478, 495, 176];
+	324, 333, 478, 495, 527];
 
 let bar_composite_data = {
 	labels: ["2007", "2008", "2009", "2010", "2011", "2012",
@@ -36,7 +36,7 @@ let bar_composite_data = {
 let line_composite_data = {
 	labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
 	datasets: [{
-		"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
+		"values": [37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35],
 		// "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40],
 		// "values": [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40],
 	}]
@@ -54,7 +54,7 @@ let more_line_data = [
 	[29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 27],
 	[36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26],
 	[37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35],
-	[36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
+	[36, 46, 45, 32, 27, 31, 30, 36, 39, 58, 82, 62],
 	// [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40]
 	// [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40]
 ];
@@ -65,26 +65,29 @@ let c2 = document.querySelector("#chart-composite-2");
 let bar_composite_chart = new Chart (c1, {
 	title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
 	data: bar_composite_data,
-	type: 'bar',
+	type: 'line',
 	height: 180,
-	colors: ['orange'],
+	colors: ['green'],
 	isNavigable: 1,
 	isSeries: 1,
-	valuesOverPoints: 1,
-	yAxisMode: 'tick'
+	// valuesOverPoints: 1,
+
+	lineOptions: {
+		dotSize: 8
+	},
+	// yAxisMode: 'tick'
 	// regionFill: 1
 });
 
 let line_composite_chart = new Chart (c2, {
 	data: line_composite_data,
-	type: 'line',
-	lineOptions: {
-		dotSize: 10
-	},
+	type: 'bar',
 	height: 180,
-	colors: ['green'],
+	colors: ['#46a9f9'],
 	isSeries: 1,
 	valuesOverPoints: 1,
+	xAxisMode: 'tick'
+
 });
 
 bar_composite_chart.parent.addEventListener('data-select', (e) => {
@@ -173,6 +176,7 @@ let type_chart = new Chart("#chart-types", {
 	xAxisMode: 'tick',
 	yAxisMode: 'span',
 	valuesOverPoints: 1,
+	isNavigable: 1,
 	barOptions: {
 		stacked: 1
 	}
@@ -413,7 +417,7 @@ let aggr_chart = new Chart("#chart-aggr", {
 	colors: ['light-green', 'blue'],
 	valuesOverPoints: 1,
 	barOptions: {
-		// stacked: 1
+		stacked: 1
 	}
 });
 

docs/assets/js/old_index.js

@@ -0,0 +1,559 @@
+// Composite Chart
+// ================================================================================
+let report_count_list = [17, 40, 33, 44, 126, 156,
+	324, 333, 478, 495, 176];
+
+let bar_composite_data = {
+	labels: ["2007", "2008", "2009", "2010", "2011", "2012",
+		"2013", "2014", "2015", "2016", "2017"],
+
+	yMarkers: [
+		{
+			label: "Marker 1",
+			value: 420,
+		},
+		{
+			label: "Marker 2",
+			value: 250,
+		}
+	],
+
+	yRegions: [
+		{
+			label: "Region Y 1",
+			start: 100,
+			end: 300
+		},
+	],
+
+	datasets: [{
+		"name": "Events",
+		"values": report_count_list,
+		// "formatted": report_count_list.map(d => d + " reports")
+	}]
+};
+
+let line_composite_data = {
+	labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+	datasets: [{
+		"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
+		// "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40],
+		// "values": [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40],
+	}]
+};
+
+let more_line_data = [
+	[4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1],
+	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+	[2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4],
+	[7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1],
+	[0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10],
+	[9, 10, 8, 10, 6, 5, 8, 8, 24, 15, 10, 13],
+	[9, 13, 16, 9, 4, 5, 7, 10, 14, 22, 23, 24],
+	[20, 22, 28, 19, 28, 19, 14, 19, 51, 37, 29, 38],
+	[29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 27],
+	[36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26],
+	[37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35],
+	[36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
+	// [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40]
+	// [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40]
+];
+
+let c1 = document.querySelector("#chart-composite-1");
+let c2 = document.querySelector("#chart-composite-2");
+
+let bar_composite_chart = new Chart (c1, {
+	title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
+	data: bar_composite_data,
+	type: 'bar',
+	height: 180,
+	colors: ['orange'],
+	isNavigable: 1,
+	isSeries: 1,
+	valuesOverPoints: 1,
+	yAxisMode: 'tick'
+	// regionFill: 1
+});
+
+let line_composite_chart = new Chart (c2, {
+	data: line_composite_data,
+	type: 'line',
+	lineOptions: {
+		dotSize: 10
+	},
+	height: 180,
+	colors: ['green'],
+	isSeries: 1,
+	valuesOverPoints: 1,
+});
+
+bar_composite_chart.parent.addEventListener('data-select', (e) => {
+	line_composite_chart.updateDataset(more_line_data[e.index]);
+});
+
+
+// Demo Chart (bar, linepts, scatter(blobs), percentage)
+// ================================================================================
+let type_data = {
+	labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
+		"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
+
+	yMarkers: [
+		{
+			label: "Marker 1",
+			value: 42,
+			type: 'dashed'
+		},
+		{
+			label: "Marker 2",
+			value: 25,
+			type: 'dashed'
+		}
+	],
+
+	yRegions: [
+		{
+			label: "Region Y 1",
+			start: -10,
+			end: 50
+		},
+	],
+
+	// will depend on series code for calculating X values
+	// xRegions: [
+	// 	{
+	// 		label: "Region X 2",
+	// 		start: ,
+	// 		end: ,
+	// 	}
+	// ],
+
+	datasets: [
+		{
+			name: "Some Data",
+			values: [18, 40, 30, 35, 8, 52, 17, -4],
+			axisPosition: 'right',
+			chartType: 'bar'
+		},
+		{
+			name: "Another Set",
+			values: [30, 50, -10, 15, 18, 32, 27, 14],
+			axisPosition: 'right',
+			chartType: 'bar'
+		},
+		{
+			name: "Yet Another",
+			values: [15, 20, -3, -15, 58, 12, -17, 37],
+			chartType: 'line'
+		}
+
+		// temp : Stacked
+		// {
+		// 	name: "Some Data",
+		// 	values:[25, 30, 50, 45, 18, 12, 27, 14]
+		// },
+		// {
+		// 	name: "Another Set",
+		// 	values: [18, 20, 30, 35, 8, 7, 17, 4]
+		// },
+		// {
+		// 	name: "Another Set",
+		// 	values: [11, 8, 19, 15, 3, 4, 10, 2]
+		// },
+	]
+};
+
+let type_chart = new Chart("#chart-types", {
+	// title: "My Awesome Chart",
+	data: type_data,
+	type: 'bar',
+	height: 250,
+	colors: ['purple', 'magenta', 'light-blue'],
+	isSeries: 1,
+	xAxisMode: 'tick',
+	yAxisMode: 'span',
+	valuesOverPoints: 1,
+	barOptions: {
+		stacked: 1
+	}
+    // formatTooltipX: d => (d + '').toUpperCase(),
+    // formatTooltipY: d => d + ' pts'
+});
+
+Array.prototype.slice.call(
+	document.querySelectorAll('.chart-type-buttons button')
+).map(el => {
+	el.addEventListener('click', (e) => {
+		let btn = e.target;
+		let type = btn.getAttribute('data-type');
+
+		let newChart = type_chart.getDifferentChart(type);
+		if(newChart){
+			type_chart = newChart;
+		}
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+// Trends Chart
+// ================================================================================
+let trends_data = {
+	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: [
+		{
+			"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_args = {
+	title: "Mean Total Sunspot Count - Yearly",
+	data: trends_data,
+	type: 'line',
+	height: 250,
+	colors: ['blue'],
+	isSeries: 1,
+	lineOptions: {
+		hideDots: 1,
+		heatline: 1,
+	},
+	xAxisMode: 'tick',
+	yAxisMode: 'span'
+};
+
+new Chart("#chart-trends", 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 config = [];
+
+		if(type === 'line') {
+			config = [0, 0, 0];
+		} else if(type === 'region') {
+			config = [0, 0, 1];
+		} else {
+			config = [0, 1, 0];
+		}
+
+		plot_chart_args.hideDots = config[0];
+		plot_chart_args.heatline = config[1];
+		plot_chart_args.regionFill = config[2];
+
+		plot_chart_args.init = false;
+
+		new Chart("#chart-trends", plot_chart_args);
+
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+// Update values chart
+// ================================================================================
+let update_data_all_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", "Thu", "Fri", "Sat", "Sun", "Mon"];
+let update_data_all_values = Array.from({length: 30}, () => Math.floor(Math.random() * 75 - 15));
+
+// We're gonna be shuffling this
+let update_data_all_indices = update_data_all_labels.map((d,i) => i);
+
+let get_update_data = (source_array, length=10) => {
+	let indices = update_data_all_indices.slice(0, length);
+	return indices.map((index) => source_array[index]);
+};
+
+let update_data = {
+	labels: get_update_data(update_data_all_labels),
+	datasets: [{
+		"values": get_update_data(update_data_all_values)
+	}],
+	"specific_values": [
+		{
+			name: "Altitude",
+			// name: "A very long text",
+			line_type: "dashed",
+			value: 38
+		},
+	]
+};
+
+let update_chart = new Chart("#chart-update", {
+	data: update_data,
+	type: 'line',
+	height: 250,
+	colors: ['red'],
+	isSeries: 1,
+	lineOptions: {
+		regionFill: 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);
+	let data = {
+		labels: update_data_all_labels.slice(0, 10),
+		datasets: [{values: get_update_data(update_data_all_values)}],
+	}
+	update_chart.update(data);
+});
+
+chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
+	let index = update_chart.state.datasetLength; // last index to add
+	if(index >= update_data_all_indices.length) return;
+	update_chart.addDataPoint(
+		update_data_all_labels[index], [update_data_all_values[index]]
+	);
+});
+
+chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
+	update_chart.removeDataPoint();
+});
+
+
+// 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: ["Ganymede", "Callisto", "Io", "Europa"],
+	datasets: [
+		{
+			"values": distances,
+			"formatted": distances.map(d => d*1000 + " km")
+		}
+	]
+};
+
+let events_chart = new Chart("#chart-events", {
+	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
+	data: events_data,
+	type: 'bar',
+	height: 250,
+	colors: ['grey'],
+	isNavigable: 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] * 1000;
+	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"],
+	datasets: [
+		{
+			"values": [25, 40, 30, 35, 8, 52, 17]
+		},
+		{
+			"values": [25, 50, 10, 15, 18, 32, 27],
+		}
+	]
+};
+
+let aggr_chart = new Chart("#chart-aggr", {
+	data: aggr_data,
+	type: 'bar',
+	height: 250,
+	colors: ['light-green', 'blue'],
+	valuesOverPoints: 1,
+	barOptions: {
+		// stacked: 1
+	}
+});
+
+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 Averages") {
+		aggr_chart.show_averages();
+		e.target.innerHTML = "Hide Averages";
+	} else {
+		aggr_chart.hide_averages();
+		e.target.innerHTML = "Show Averages";
+	}
+});
+
+// Heatmap
+// ================================================================================
+
+let heatmap_data = {};
+let current_date = new Date();
+let timestamp = current_date.getTime()/1000;
+timestamp = Math.floor(timestamp - (timestamp % 86400)).toFixed(1); // convert to midnight
+for (var i = 0; i< 375; i++) {
+	heatmap_data[parseInt(timestamp)] = Math.floor(Math.random() * 5);
+	timestamp = Math.floor(timestamp - 86400).toFixed(1);
+}
+
+new Chart("#chart-heatmap", {
+	data: heatmap_data,
+	type: 'heatmap',
+	legend_scale: [0, 1, 2, 4, 5],
+	height: 115,
+	discrete_domains: 1
+});
+
+Array.prototype.slice.call(
+	document.querySelectorAll('.heatmap-mode-buttons button')
+).map(el => {
+	el.addEventListener('click', (e) => {
+		let btn = e.target;
+		let mode = btn.getAttribute('data-mode');
+		let discrete_domains = 0;
+
+		if(mode === 'discrete') {
+			discrete_domains = 1;
+		}
+
+		let colors = [];
+		let colors_mode = document
+			.querySelector('.heatmap-color-buttons .active')
+			.getAttribute('data-color');
+		if(colors_mode === 'halloween') {
+			colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
+		}
+
+		new Chart("#chart-heatmap", {
+			data: heatmap_data,
+			type: 'heatmap',
+			legend_scale: [0, 1, 2, 4, 5],
+			height: 115,
+			discrete_domains: discrete_domains,
+			legend_colors: colors
+		});
+
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+Array.prototype.slice.call(
+	document.querySelectorAll('.heatmap-color-buttons button')
+).map(el => {
+	el.addEventListener('click', (e) => {
+		let btn = e.target;
+		let colors_mode = btn.getAttribute('data-color');
+		let colors = [];
+
+		if(colors_mode === 'halloween') {
+			colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
+		}
+
+		let discrete_domains = 1;
+
+		let view_mode = document
+			.querySelector('.heatmap-mode-buttons .active')
+			.getAttribute('data-mode');
+		if(view_mode === 'continuous') {
+			discrete_domains = 0;
+		}
+
+		new Chart("#chart-heatmap", {
+			data: heatmap_data,
+			type: 'heatmap',
+			legend_scale: [0, 1, 2, 4, 5],
+			height: 115,
+			discrete_domains: discrete_domains,
+			legend_colors: colors
+		});
+
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+// Helpers
+// ================================================================================
+function shuffle(array) {
+	// https://stackoverflow.com/a/2450976/6495043
+	// Awesomeness: https://bost.ocks.org/mike/shuffle/
+
+	var currentIndex = array.length, temporaryValue, randomIndex;
+
+	// While there remain elements to shuffle...
+	while (0 !== currentIndex) {
+
+		// Pick a remaining element...
+		randomIndex = Math.floor(Math.random() * currentIndex);
+		currentIndex -= 1;
+
+		// And swap it with the current element.
+		temporaryValue = array[currentIndex];
+		array[currentIndex] = array[randomIndex];
+		array[randomIndex] = temporaryValue;
+	}
+
+	return array;
+}
+
+

docs/old_index.html

@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Frappe Charts</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize">
+    <meta name="description" content="A simple, responsive, modern charts library for the web.">
+
+    <link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
+    <script src="assets/js/highlight.pack.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+    <link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
+    <link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
+        <div class="jumbotron" style="background: transparent;">
+          <h1>Frappe Charts</h1>
+          <p class="mt-2">GitHub-inspired simple and modern charts for the web</p>
+          <p class="mt-2">with zero dependencies.</p>
+          <!--<p class="mt-2">Because dumb charts are hard to come by.</p>-->
+        </div>
+
+        <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
+          <div id="chart-composite-1" class="border"><svg height=225></svg></div>
+          <p class="mt-1">Click or 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="border"><svg height=225></svg></div>
+        </div>
+      </div>
+
+      <div class="group later">
+        <div class="row section">
+
+          <div class="col-sm-10 push-sm-1">
+            <div class="dashboard-section">
+              <h6 class="margin-vertical-rem">
+                <!--Bars, Lines or <a href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts" target="_blank">Percentages</a>-->
+                Create a chart
+              </h6>
+              <p class="step-explain">Install</p>
+              <pre><code class="hljs console">  npm install frappe-charts</code></pre>
+              <p class="step-explain">And include it in your project</p>
+              <pre><code class="hljs javascript">  import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre>
+              <p class="step-explain">... or include it directly in your HTML</p>
+              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre>
+              <p class="step-explain">Make a new Chart</p>
+              <pre><code class="hljs html">  &lt!--HTML--&gt;
+  &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
+              <pre><code class="hljs javascript">  // Javascript
+  let data = {
+    labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
+      "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
+
+    datasets: [
+      {
+        label: "Some Data",
+        values: [25, 40, 30, 35, 8, 52, 17, -4]
+      },
+      {
+        label: "Another Set",
+        values: [25, 50, -10, 15, 18, 32, 27, 14]
+      },
+      {
+        label: "Yet Another",
+        values: [15, 20, -3, -15, 58, 12, -17, 37]
+      }
+    ]
+  };
+
+  let chart = new Chart({
+    parent: "#chart", // or a DOM element
+    title: "My Awesome Chart",
+    data: data,
+    type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
+    height: 250,
+
+    colors: ['#7cd6fd', 'violet', 'blue'],
+    // hex-codes or these preset colors;
+    // defaults (in order):
+    // ['light-blue', 'blue', 'violet', 'red',
+    // 'orange', 'yellow', 'green', 'light-green',
+    // 'purple', 'magenta', 'grey', 'dark-grey']
+
+    format_tooltip_x: d => (d + '').toUpperCase(),
+    format_tooltip_y: d => d + ' pts'
+  });</code></pre>
+              <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>
+                <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
+              </div>
+              <p class="text-muted">
+                <a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
+              </p>
+            </div>
+          </div>
+
+          <div class="col-sm-10 push-sm-1">
+            <div class="dashboard-section">
+              <h6 class="margin-vertical-rem">
+                Update Values
+              </h6>
+              <pre><code class="hljs javascript">  // Update entire datasets
+  chart.updateData(
+    [
+      {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 javascript margin-vertical-px">  ...
+    // Include specific Y values in input data to be displayed as lines
+    // (before passing data to a new chart):
+
+    data.specific_values = [
+      {
+        label: "Altitude",
+        line_type: "dashed", // or "solid"
+        value: 38
+      }
+    ]
+  ...</code></pre>
+            </div>
+          </div>
+
+          <div class="col-sm-10 push-sm-1">
+            <div class="dashboard-section">
+              <h6 class="margin-vertical-rem">
+                Plot Trends
+              </h6>
+              <pre><code class="hljs javascript">  ...
+    xAxisMode: 'tick',  // for short label ticks
+                          // or 'span' for long spanning vertical axis lines
+    yAxisMode: 'span',  // for long horizontal lines, or 'tick'
+    isSeries: 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-type="line">Line</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-type="dots">Dots</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:
+
+    hideDots: 1,   // Hide data points on the line; default 0
+    heatline: 1,    // Show a value-wise line gradient; default 0
+    regionFill: 1, // Fill the area under the graph; default 0
+  ...</code></pre>
+            </div>
+          </div>
+
+          <div class="col-sm-10 push-sm-1">
+            <div class="dashboard-section">
+              <h6 class="margin-vertical-rem">
+                Listen to state change
+              </h6>
+              <div class="row">
+                <div class="col-sm-8">
+                  <div id="chart-events" class="border"></div>
+                </div>
+                <div class="col-sm-4">
+                  <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>
+              </div>
+              <pre><code class="hljs javascript margin-vertical-px">  ...
+    type: 'bar',     // Bar Chart specific properties:
+    isNavigable: 1, // Navigate across bars; default 0
+  ...
+
+  chart.parent.addEventListener('data-select', (e) => {
+    update_moon_data(e.index); // e contains index and value of current datapoint
+  });</code></pre>
+            </div>
+          </div>
+
+          <div class="col-sm-10 push-sm-1">
+            <div class="dashboard-section">
+              <h6 class="margin-vertical-rem">
+                Simple Aggregations
+              </h6>
+              <div id="chart-aggr" class="border"></div>
+              <div class="chart-aggr-buttons mt-1 mx-auto" role="group">
+                <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 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">
+                And a Month-wise Heatmap
+              </h6>
+              <div id="chart-heatmap" class="border"
+                style="overflow: scroll; text-align: center; padding: 20px;"></div>
+              <div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
+                <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
+              </div>
+              <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
+                <button type="button" class="btn btn-sm btn-secondary active" data-color="default">Default green</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
+              </div>
+              <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new Chart({
+    parent: "#heatmap",
+    type: 'heatmap',
+    height: 115,
+    data: heatmap_data,  // object with date/timestamp-value pairs
+
+    discrete_domains: 1  // default: 0
+
+    start: start_date,
+                  // A Date object;
+                  // default: today's date in past year
+                  //          for an annual heatmap
+
+    legend_colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'],
+                  // Set of five incremental colors,
+                  // beginning with a low-saturation color for zero data;
+                  // default: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
+
+  });</code></pre>
+            </div>
+          </div>
+
+          <div class="col-sm-10 push-sm-1">
+            <div class="dashboard-section">
+              <!-- Closing -->
+              <div class="text-center" style="margin-top: 70px">
+                <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button">Download</button></a>
+                <p style="margin-top: 3rem;margin-bottom: 1.5rem;"><a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a></p>
+                <p style="margin-top: 1rem;"><iframe src="https://ghbtns.com/github-btn.html?user=frappe&repo=charts&type=star&count=true" frameborder="0" scrolling="0" width="94px" height="20px"></iframe></p>
+                <p>License: MIT</p>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <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">
+          Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
+          Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.
+          Read the <a href="https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97" target="_blank">blog post</a>.
+        </p>
+        <p style="margin: 24px 0 80px 0; font-size: 12px">
+          Data from the <a href="https://www.amsmeteors.org" target="_blank">American Meteor Society</a>,
+          <a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and
+          <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">
+      <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </svg>
+    </a>
+
+    <script src="assets/js/frappe-charts.min.js"></script>
+    <script src="assets/js/old_index.js"></script>
+  </body>
+</html>

src/js/charts/AxisChart.js

@@ -377,20 +377,6 @@ export default class AxisChart extends BaseChart {
 	}
 
 	makeOverlay() {
-		// Just make one out of the first element
-		// let index = this.xAxisLabels.length - 1;
-		// let unit = this.y[0].svg_units[index];
-		// this.setCurrentDataPoint(index);
-
-		// if(this.overlay) {
-		// 	this.overlay.parentNode.removeChild(this.overlay);
-		// }
-
-		// this.overlay = unit.cloneNode();
-		// this.overlay.style.fill = '#000000';
-		// this.overlay.style.opacity = '0.4';
-		// this.drawArea.appendChild(this.overlay);
-
 		if(this.overlayGuides) {
 			this.overlayGuides.forEach(g => {
 				let o = g.overlay;
@@ -402,12 +388,12 @@ export default class AxisChart extends BaseChart {
 			return {
 				type: c.unitType,
 				overlay: undefined,
-				units: c.store,
+				units: c.units,
 			}
 		});
 
 		if(this.state.currentIndex === undefined) {
-			this.state.currentIndex = 0;
+			this.state.currentIndex = this.state.datasetLength - 1;
 		}
 
 		// Render overlays
@@ -419,10 +405,19 @@ export default class AxisChart extends BaseChart {
 
 	}
 
+	updateOverlayGuides() {
+		if(this.overlayGuides) {
+			this.overlayGuides.forEach(g => {
+				let o = g.overlay;
+				o.parentNode.removeChild(o);
+			});
+		}
+	}
+
 	bindOverlay() {
 		// on event, update overlay
 		this.parent.addEventListener('data-select', (e) => {
-			this.updateOverlay(e.svg_unit);
+			this.updateOverlay();
 		});
 	}
 

src/js/charts/BaseChart.js

@@ -35,7 +35,6 @@ export default class BaseChart {
 		this.options = {};
 
 		if(this.config.isNavigable) {
-			this.state.currentIndex = 0;
 			this.overlays = [];
 		}
 
@@ -192,8 +191,12 @@ export default class BaseChart {
 
 	updateNav() {
 		if(this.config.isNavigable) {
-			this.makeOverlay();
-			this.bindUnits();
+			// if(!this.overlayGuides){
+				this.makeOverlay();
+				this.bindUnits();
+			// } else {
+			// 	this.updateOverlay();
+			// }
 		}
 	}
 
@@ -242,7 +245,9 @@ export default class BaseChart {
 			document.addEventListener('keydown', (e) => {
 				if(isElementInViewport(this.chartWrapper)) {
 					e = e || window.event;
-					this.keyActions[e.keyCode]();
+					if(this.keyActions[e.keyCode]) {
+						this.keyActions[e.keyCode]();
+					}
 				}
 			});
 		}

src/js/objects/ChartComponents.js

@@ -201,7 +201,7 @@ let componentConfigs = {
 		makeElements(data) {
 			let c = this.constants;
 			this.unitType = 'bar';
-			return data.yPositions.map((y, j) => {
+			this.units = data.yPositions.map((y, j) => {
 				return datasetBar(
 					data.xPositions[j],
 					y,
@@ -217,6 +217,7 @@ let componentConfigs = {
 					}
 				)
 			});
+			return this.units;
 		},
 		animateElements(newData) {
 			let c = this.constants;
@@ -280,10 +281,10 @@ let componentConfigs = {
 				}
 			)
 
-			this.dots = []
+			this.units = []
 
 			if(!c.hideDots) {
-				this.dots = data.yPositions.map((y, j) => {
+				this.units = data.yPositions.map((y, j) => {
 					return datasetDot(
 						data.xPositions[j],
 						y,
@@ -295,8 +296,7 @@ let componentConfigs = {
 				});
 			}
 
-			return Object.values(this.paths).concat(this.dots);
-			// return this.dots;
+			return Object.values(this.paths).concat(this.units);
 		},
 		animateElements(newData) {
 			let c = this.constants;
@@ -328,8 +328,8 @@ let componentConfigs = {
 			animateElements = animateElements.concat(animatePath(
 				this.paths, newXPos, newYPos, newData.zeroLine));
 
-			if(this.dots.length) {
-				this.dots.map((dot, i) => {
+			if(this.units.length) {
+				this.units.map((dot, i) => {
 					animateElements = animateElements.concat(animateDot(
 						dot, newXPos[i], newYPos[i]));
 				});