[docs] cleanup scripts, build index.min.js

dist/frappe-charts.esm.js

@@ -224,7 +224,7 @@ const DATA_COLOR_DIVISIONS = {
 	heatmap: HEATMAP_DISTRIBUTION_SIZE
 };
 
-const BASE_CHART_TOP_MARGIN = 30;
+const BASE_CHART_TOP_MARGIN = 10;
 const BASE_CHART_LEFT_MARGIN = 20;
 const BASE_CHART_RIGHT_MARGIN = 20;
 
@@ -268,6 +268,10 @@ const DEFAULT_COLORS = {
 	heatmap: HEATMAP_COLORS
 };
 
+/**
+ * Returns the value of a number upto 2 decimal places.
+ * @param {Number} d Any number
+ */
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }
@@ -1276,7 +1280,7 @@ class BaseChart {
 	bindTooltip() {}
 
 	draw(onlyWidthChange=false, init=false) {
-		this.calcWidth();
+		this.updateWidth();
 		this.calc(onlyWidthChange);
 		this.makeChartArea();
 		this.setupComponents();
@@ -1297,7 +1301,7 @@ class BaseChart {
 		this.setupNavigation(init);
 	}
 
-	calcWidth() {
+	updateWidth() {
 		this.baseWidth = getElementContentWidth(this.parent);
 		this.width = this.baseWidth - (this.leftMargin + this.rightMargin);
 	}
@@ -1343,12 +1347,8 @@ class BaseChart {
 
 	updateNav() {
 		if(this.config.isNavigable) {
-			// if(!this.overlayGuides){
 			this.makeOverlay();
 			this.bindUnits();
-			// } else {
-			// 	this.updateOverlay();
-			// }
 		}
 	}
 
@@ -2148,6 +2148,8 @@ const NO_OF_MILLIS = 1000;
 const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
 	"July", "August", "September", "October", "November", "December"];
 
+
+
 // https://stackoverflow.com/a/11252167/6495043
 function treatAsUtc(dateStr) {
 	let result = new Date(dateStr);
@@ -2165,6 +2167,8 @@ function getDdMmYyyy(date) {
 	].join('-');
 }
 
+
+
 function getWeeksBetween(startDateStr, endDateStr) {
 	return Math.ceil(getDaysBetween(startDateStr, endDateStr) / 7);
 }
@@ -2431,13 +2435,7 @@ class Heatmap extends BaseChart {
 		this.no_of_cols = getWeeksBetween(this.firstWeekStart + '', this.lastWeekStart + '') + 1;
 	}
 
-	setMargins() {
-		super.setMargins();
-		// this.leftMargin = HEATMAP_SQUARE_SIZE;
-		// this.topMargin = HEATMAP_SQUARE_SIZE;
-	}
-
-	calcWidth() {
+	updateWidth() {
 		this.baseWidth = (this.no_of_cols + 99) * COL_SIZE;
 
 		if(this.discreteDomains) {
@@ -2457,8 +2455,13 @@ class Heatmap extends BaseChart {
 	}
 
 	calc() {
-		let dataValues = Object.keys(this.dataPoints).map(key => this.dataPoints[key]);
-		this.distribution = calcDistribution(dataValues, HEATMAP_DISTRIBUTION_SIZE);
+		this.distribution = calcDistribution(
+			Object.values(this.dataPoints), HEATMAP_DISTRIBUTION_SIZE);
+	}
+
+	update(data=this.data) {
+		this.data = this.prepareData(data);
+		this.draw();
 	}
 
 	render() {
@@ -3282,6 +3285,7 @@ class AxisChart extends BaseChart {
 	// removeDataPoint(index = 0) {}
 }
 
+// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	// multiaxis: MultiAxisChart,
 	percentage: PercentageChart,

docs/assets/js/data.js

@@ -0,0 +1,196 @@
+import { MONTH_NAMES_SHORT } from '../../../src/js/utils/date-utils';
+
+// Composite Chart
+// ================================================================================
+const reportCountList = [152, 222, 199, 287, 534, 709,
+	1179, 1256, 1632, 1856, 1850];
+
+export const lineCompositeData = {
+	labels: ["2007", "2008", "2009", "2010", "2011", "2012",
+		"2013", "2014", "2015", "2016", "2017"],
+
+	yMarkers: [
+		{
+			label: "Average 100 reports/month",
+			value: 1200,
+		}
+	],
+
+	datasets: [{
+		"name": "Events",
+		"values": reportCountList
+	}]
+};
+
+
+export const fireball_5_25 = [
+	[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1],
+	[2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4],
+	[5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1],
+	[0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8],
+	[6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11],
+	[7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20],
+	[13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29],
+	[24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18],
+	[31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24],
+	[32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32],
+	[31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50],
+];
+export const fireball_2_5 = [
+	[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20],
+	[11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24],
+	[20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9],
+	[7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33],
+	[38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53],
+	[50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69],
+	[54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87],
+	[84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93],
+	[73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89],
+	[106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156],
+	[81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171],
+];
+export const fireballOver25 = [
+	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+	[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
+	[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
+	[1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
+	[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2],
+	[3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1],
+	[2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4],
+	[7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9],
+	[5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9],
+	[5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2],
+	[5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3],
+	[8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]
+];
+
+export const barCompositeData = {
+	labels: MONTH_NAMES_SHORT,
+	datasets: [
+		{
+			name: "Over 25 reports",
+			values: fireballOver25[9],
+		},
+		{
+			name: "5 to 25 reports",
+			values: fireball_5_25[9],
+		},
+		{
+			name: "2 to 5 reports",
+			values: fireball_2_5[9]
+		}
+	]
+};
+
+// Demo Chart multitype Chart
+// ================================================================================
+export const typeData = {
+	labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
+		"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
+
+	yMarkers: [
+		{
+			label: "Marker",
+			value: 43,
+			// type: 'dashed'
+		}
+	],
+
+	yRegions: [
+		{
+			label: "Region",
+			start: -10,
+			end: 50
+		},
+	],
+
+	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'
+		}
+	]
+};
+
+export const trendsData = {
+	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]
+		}
+	]
+};
+
+export const moonData = {
+	names: ["Ganymede", "Callisto", "Io", "Europa"],
+	masses: [14819000, 10759000, 8931900, 4800000],
+	distances: [1070.412, 1882.709, 421.700, 671.034],
+	diameters: [5262.4, 4820.6, 3637.4, 3121.6],
+};
+
+// const jupiterMoons = {
+// 	'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 today = new Date();
+let start = new Date(today.getTime());
+let end = new Date(today.getTime());
+start.setFullYear( start.getFullYear() - 2 );
+end.setFullYear( start.getFullYear() - 1 );
+
+export let dataPoints = {};
+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++) {
+	dataPoints[parseInt(timestamp)] = Math.floor(Math.random() * 5);
+	timestamp = Math.floor(timestamp - 86400).toFixed(1);
+}
+
+export const heatmapData = {
+	dataPoints: dataPoints,
+	start: start,
+	end: end
+};

docs/assets/js/index.js

@@ -1,92 +1,15 @@
-// Composite Chart
-// ================================================================================
-let reportCountList = [152, 222, 199, 287, 534, 709,
-	1179, 1256, 1632, 1856, 1850];
-
-let lineCompositeData = {
-	labels: ["2007", "2008", "2009", "2010", "2011", "2012",
-		"2013", "2014", "2015", "2016", "2017"],
-
-	yMarkers: [
-		{
-			label: "Average 100 reports/month",
-			value: 1200,
-		}
-	],
-
-	datasets: [{
-		"name": "Events",
-		"values": reportCountList
-	}]
-};
+import { shuffle } from '../../../src/js/utils/helpers';
+import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
+	barCompositeData, typeData, trendsData, moonData, heatmapData } from './data';
 
-
-let fireball_5_25 = [
-	[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1],
-	[2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4],
-	[5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1],
-	[0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8],
-	[6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11],
-	[7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20],
-	[13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29],
-	[24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18],
-	[31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24],
-	[32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32],
-	[31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50],
-];
-let fireball_2_5 = [
-	[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20],
-	[11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24],
-	[20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9],
-	[7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33],
-	[38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53],
-	[50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69],
-	[54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87],
-	[84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93],
-	[73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89],
-	[106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156],
-	[81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171],
-];
-let fireballOver25 = [
-	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-	[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
-	[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
-	[1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
-	[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2],
-	[3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1],
-	[2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4],
-	[7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9],
-	[5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9],
-	[5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2],
-	[5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3],
-	[8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]
-];
-
-let monthNames = ["January", "February", "March", "April", "May", "June",
-	"July", "August", "September", "October", "November", "December"];
-
-let barCompositeData = {
-	labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-	datasets: [
-		{
-			name: "Over 25 reports",
-			values: fireballOver25[9],
-		},
-		{
-			name: "5 to 25 reports",
-			values: fireball_5_25[9],
-		},
-		{
-			name: "2 to 5 reports",
-			values: fireball_2_5[9]
-		}
-	]
-};
+// ================================================================================
 
 let c1 = document.querySelector("#chart-composite-1");
 let c2 = document.querySelector("#chart-composite-2");
 
-let lineCompositeChart = new frappe.Chart (c1, {
+let Chart = frappe.Chart; // eslint-disable-line no-undef
+
+let lineCompositeChart = new Chart (c1, {
 	title: "Fireball/Bolide Events - Yearly (reported)",
 	data: lineCompositeData,
 	type: 'line',
@@ -102,7 +25,7 @@ let lineCompositeChart = new frappe.Chart (c1, {
 	// regionFill: 1
 });
 
-let barCompositeChart = new frappe.Chart (c2, {
+let barCompositeChart = new Chart (c2, {
 	data: barCompositeData,
 	type: 'bar',
 	height: 190,
@@ -124,67 +47,8 @@ lineCompositeChart.parent.addEventListener('data-select', (e) => {
 	]);
 });
 
-
-// Demo Chart (bar, linepts, scatter(blobs), percentage)
 // ================================================================================
-let typeData = {
-	labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
-		"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
-
-	yMarkers: [
-		{
-			label: "Marker",
-			value: 43,
-			// type: 'dashed'
-		}
-	],
-
-	yRegions: [
-		{
-			label: "Region",
-			start: -10,
-			end: 50
-		},
-	],
-
-	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'
-		}
-	]
-};
-
-// let typeChart = new frappe.Chart("#chart-types", {
-// 	title: "My Awesome Chart",
-// 	data: typeData,
-// 	type: 'bar',
-// 	height: 250,
-// 	colors: ['purple', 'magenta', 'red'],
-// 	tooltipOptions: {
-// 		formatTooltipX: d => (d + '').toUpperCase(),
-// 		formatTooltipY: d => d + ' pts',
-// 	}
-// });
 
-
-
-
-// Aggregation chart
-// ================================================================================
 let args = {
 	data: typeData,
 	type: 'axis-mixed',
@@ -198,8 +62,9 @@ let args = {
 		formatTooltipX: d => (d + '').toUpperCase(),
 		formatTooltipY: d => d + ' pts',
 	}
-}
-let aggrChart = new frappe.Chart("#chart-aggr", args);
+};
+
+let aggrChart = new Chart("#chart-aggr", args);
 
 Array.prototype.slice.call(
 	document.querySelectorAll('.aggr-type-buttons button')
@@ -223,25 +88,25 @@ Array.prototype.slice.call(
 
 // Update values chart
 // ================================================================================
-let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
+let updateDataAllLabels = ["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 getRandom = () => Math.floor(Math.random() * 75 - 15);
-let update_data_all_values = Array.from({length: 30}, getRandom);
+let updateDataAllValues = Array.from({length: 30}, getRandom);
 
 // We're gonna be shuffling this
-let update_data_all_indices = update_data_all_labels.map((d,i) => i);
+let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
 
-let get_update_data = (source_array, length=10) => {
-	let indices = update_data_all_indices.slice(0, length);
+let getUpdateData = (source_array, length=10) => {
+	let indices = updateDataAllIndices.slice(0, length);
 	return indices.map((index) => source_array[index]);
 };
 
 let update_data = {
-	labels: get_update_data(update_data_all_labels),
+	labels: getUpdateData(updateDataAllLabels),
 	datasets: [{
-		"values": get_update_data(update_data_all_values)
+		"values": getUpdateData(updateDataAllValues)
 	}],
 	yMarkers: [
 		{
@@ -259,7 +124,7 @@ let update_data = {
 	],
 };
 
-let update_chart = new frappe.Chart("#chart-update", {
+let update_chart = new Chart("#chart-update", {
 	data: update_data,
 	type: 'line',
 	height: 250,
@@ -272,14 +137,14 @@ let update_chart = new frappe.Chart("#chart-update", {
 
 let chart_update_buttons = document.querySelector('.chart-update-buttons');
 
-chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
-	shuffle(update_data_all_indices);
+chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", () => {
+	shuffle(updateDataAllIndices);
 	let value = getRandom();
 	let start = getRandom();
 	let end = getRandom();
 	let data = {
-		labels: update_data_all_labels.slice(0, 10),
-		datasets: [{values: get_update_data(update_data_all_values)}],
+		labels: updateDataAllLabels.slice(0, 10),
+		datasets: [{values: getUpdateData(updateDataAllValues)}],
 		yMarkers: [
 			{
 				label: "Altitude",
@@ -294,44 +159,28 @@ chart_update_buttons.querySelector('[data-update="random"]').addEventListener("c
 				end: end
 			},
 		],
-	}
+	};
 	update_chart.update(data);
 });
 
-chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
+chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", () => {
 	let index = update_chart.state.datasetLength; // last index to add
-	if(index >= update_data_all_indices.length) return;
+	if(index >= updateDataAllIndices.length) return;
 	update_chart.addDataPoint(
-		update_data_all_labels[index], [update_data_all_values[index]]
+		updateDataAllLabels[index], [updateDataAllValues[index]]
 	);
 });
 
-chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
+chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", () => {
 	update_chart.removeDataPoint();
 });
 
 // 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 plotChartArgs = {
 	title: "Mean Total Sunspot Count - Yearly",
-	data: trends_data,
+	data: trendsData,
 	type: 'line',
 	height: 250,
 	colors: ['#238e38'],
@@ -346,7 +195,7 @@ let plotChartArgs = {
 	}
 };
 
-new frappe.Chart("#chart-trends", plotChartArgs);
+new Chart("#chart-trends", plotChartArgs);
 
 Array.prototype.slice.call(
 	document.querySelectorAll('.chart-plot-buttons button')
@@ -364,7 +213,7 @@ Array.prototype.slice.call(
 		// plotChartArgs.init = false;
 		plotChartArgs.lineOptions = config;
 
-		new frappe.Chart("#chart-trends", plotChartArgs);
+		new Chart("#chart-trends", plotChartArgs);
 
 		Array.prototype.slice.call(
 			btn.parentNode.querySelectorAll('button')).map(el => {
@@ -377,89 +226,44 @@ Array.prototype.slice.call(
 
 // 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 = {
+
+
+let eventsData = {
 	labels: ["Ganymede", "Callisto", "Io", "Europa"],
 	datasets: [
 		{
-			"values": distances,
-			"formatted": distances.map(d => d*1000 + " km")
+			"values": moonData.distances,
+			"formatted": moonData.distances.map(d => d*1000 + " km")
 		}
 	]
 };
 
-let events_chart = new frappe.Chart("#chart-events", {
+let eventsChart = new Chart("#chart-events", {
 	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
-	data: events_data,
+	data: eventsData,
 	type: 'bar',
 	height: 250,
 	colors: ['grey'],
 	isNavigable: 1,
 });
 
-let data_div = document.querySelector('.chart-events-data');
+let dataDiv = 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";
+eventsChart.parent.addEventListener('data-select', (e) => {
+	let name = moonData.names[e.index];
+	dataDiv.querySelector('.moon-name').innerHTML = name;
+	dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
+	dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
+	dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
+	dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
 });
 
 // Heatmap
 // ================================================================================
 
-
-
-let heatmapData = {};
-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++) {
-	heatmapData[parseInt(timestamp)] = Math.floor(Math.random() * 5);
-	timestamp = Math.floor(timestamp - 86400).toFixed(1);
-}
-
-let today = new Date();
-let start = today;
-let end = '';
-start.setFullYear( start.getFullYear() - 2 );
-
-let heatmap = new frappe.Chart("#chart-heatmap", {
-	data: {
-		dataPoints: heatmapData,
-		start: start,
-		end: end,
-	},
+let heatmap = new Chart("#chart-heatmap", {
+	data: heatmapData,
 	type: 'heatmap',
 	height: 115,
 	discreteDomains: 1,
@@ -488,7 +292,7 @@ Array.prototype.slice.call(
 			colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
 		}
 
-		new frappe.Chart("#chart-heatmap", {
+		new Chart("#chart-heatmap", {
 			data: heatmapData,
 			type: 'heatmap',
 			legendScale: [0, 1, 2, 4, 5],
@@ -526,7 +330,7 @@ Array.prototype.slice.call(
 			discreteDomains = 0;
 		}
 
-		new frappe.Chart("#chart-heatmap", {
+		new Chart("#chart-heatmap", {
 			data: heatmapData,
 			type: 'heatmap',
 			legendScale: [0, 1, 2, 4, 5],
@@ -542,29 +346,3 @@ Array.prototype.slice.call(
 		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/assets/js/index.min.js

@@ -0,0 +1,556 @@
+(function () {
+'use strict';
+
+function __$styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// Universal constants
+
+
+
+// Fixed 5-color theme,
+// More colors are difficult to parse visually
+
+/**
+ * Returns whether or not two given arrays are equal.
+ * @param {Array} arr1 First array
+ * @param {Array} arr2 Second array
+ */
+
+
+/**
+ * Shuffles array in place. ES6 version
+ * @param {Array} array An array containing the items.
+ */
+function shuffle(array) {
+	// Awesomeness: https://bost.ocks.org/mike/shuffle/
+	// https://stackoverflow.com/a/2450976/6495043
+	// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
+
+	for (var i = array.length - 1; i > 0; i--) {
+		var j = Math.floor(Math.random() * (i + 1));
+		var _ref = [array[j], array[i]];
+		array[i] = _ref[0];
+		array[j] = _ref[1];
+	}
+
+	return array;
+}
+
+/**
+ * Fill an array with extra points
+ * @param {Array} array Array
+ * @param {Number} count number of filler elements
+ * @param {Object} element element to fill with
+ * @param {Boolean} start fill at start?
+ */
+
+
+/**
+ * Returns pixel width of string.
+ * @param {String} string
+ * @param {Number} charWidth Width of single char in pixels
+ */
+
+// Playing around with dates
+
+
+
+
+
+
+
+var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+// https://stackoverflow.com/a/11252167/6495043
+
+
+
+
+
+
+
+
+// mutates
+
+// Composite Chart
+// ================================================================================
+var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
+
+var lineCompositeData = {
+	labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
+
+	yMarkers: [{
+		label: "Average 100 reports/month",
+		value: 1200
+	}],
+
+	datasets: [{
+		"name": "Events",
+		"values": reportCountList
+	}]
+};
+
+var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]];
+var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]];
+var fireballOver25 = [
+// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]];
+
+var barCompositeData = {
+	labels: MONTH_NAMES_SHORT,
+	datasets: [{
+		name: "Over 25 reports",
+		values: fireballOver25[9]
+	}, {
+		name: "5 to 25 reports",
+		values: fireball_5_25[9]
+	}, {
+		name: "2 to 5 reports",
+		values: fireball_2_5[9]
+	}]
+};
+
+// Demo Chart multitype Chart
+// ================================================================================
+var typeData = {
+	labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
+
+	yMarkers: [{
+		label: "Marker",
+		value: 43
+		// type: 'dashed'
+	}],
+
+	yRegions: [{
+		label: "Region",
+		start: -10,
+		end: 50
+	}],
+
+	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'
+	}]
+};
+
+var trendsData = {
+	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]
+	}]
+};
+
+var moonData = {
+	names: ["Ganymede", "Callisto", "Io", "Europa"],
+	masses: [14819000, 10759000, 8931900, 4800000],
+	distances: [1070.412, 1882.709, 421.700, 671.034],
+	diameters: [5262.4, 4820.6, 3637.4, 3121.6]
+};
+
+// const jupiterMoons = {
+// 	'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'
+// 	},
+// };
+
+// ================================================================================
+
+var today = new Date();
+var start = new Date(today.getTime());
+var end = new Date(today.getTime());
+start.setFullYear(start.getFullYear() - 2);
+end.setFullYear(start.getFullYear() - 1);
+
+var dataPoints = {};
+var current_date = new Date();
+var timestamp = current_date.getTime() / 1000;
+timestamp = Math.floor(timestamp - timestamp % 86400).toFixed(1); // convert to midnight
+for (var i = 0; i < 375; i++) {
+	dataPoints[parseInt(timestamp)] = Math.floor(Math.random() * 5);
+	timestamp = Math.floor(timestamp - 86400).toFixed(1);
+}
+
+var heatmapData = {
+	dataPoints: dataPoints,
+	start: start,
+	end: end
+};
+
+var c1 = document.querySelector("#chart-composite-1");
+var c2 = document.querySelector("#chart-composite-2");
+
+var Chart = frappe.Chart; // eslint-disable-line no-undef
+
+var lineCompositeChart = new Chart(c1, {
+	title: "Fireball/Bolide Events - Yearly (reported)",
+	data: lineCompositeData,
+	type: 'line',
+	height: 190,
+	colors: ['green'],
+	isNavigable: 1,
+	valuesOverPoints: 1,
+
+	lineOptions: {
+		dotSize: 8
+	}
+	// yAxisMode: 'tick'
+	// regionFill: 1
+});
+
+var barCompositeChart = new Chart(c2, {
+	data: barCompositeData,
+	type: 'bar',
+	height: 190,
+	colors: ['violet', 'light-blue', '#46a9f9'],
+	valuesOverPoints: 1,
+	axisOptions: {
+		xAxisMode: 'tick'
+	},
+	barOptions: {
+		stacked: 1
+	}
+
+});
+
+lineCompositeChart.parent.addEventListener('data-select', function (e) {
+	var i = e.index;
+	barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
+});
+
+// ================================================================================
+
+var args = {
+	data: typeData,
+	type: 'axis-mixed',
+	height: 250,
+	colors: ['purple', 'magenta', 'light-blue'],
+
+	maxLegendPoints: 6,
+	maxSlices: 10,
+
+	tooltipOptions: {
+		formatTooltipX: function formatTooltipX(d) {
+			return (d + '').toUpperCase();
+		},
+		formatTooltipY: function formatTooltipY(d) {
+			return d + ' pts';
+		}
+	}
+};
+
+var aggrChart = new Chart("#chart-aggr", args);
+
+Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button')).map(function (el) {
+	el.addEventListener('click', function (e) {
+		var btn = e.target;
+		var type = btn.getAttribute('data-type');
+		args.type = type;
+
+		var newChart = aggrChart.getDifferentChart(type);
+		if (newChart) {
+			aggrChart = newChart;
+		}
+		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+// Update values chart
+// ================================================================================
+var updateDataAllLabels = ["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"];
+
+var getRandom = function getRandom() {
+	return Math.floor(Math.random() * 75 - 15);
+};
+var updateDataAllValues = Array.from({ length: 30 }, getRandom);
+
+// We're gonna be shuffling this
+var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
+	return i;
+});
+
+var getUpdateData = function getUpdateData(source_array) {
+	var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+
+	var indices = updateDataAllIndices.slice(0, length);
+	return indices.map(function (index) {
+		return source_array[index];
+	});
+};
+
+var update_data = {
+	labels: getUpdateData(updateDataAllLabels),
+	datasets: [{
+		"values": getUpdateData(updateDataAllValues)
+	}],
+	yMarkers: [{
+		label: "Altitude",
+		value: 25,
+		type: 'dashed'
+	}],
+	yRegions: [{
+		label: "Range",
+		start: 10,
+		end: 45
+	}]
+};
+
+var update_chart = new Chart("#chart-update", {
+	data: update_data,
+	type: 'line',
+	height: 250,
+	colors: ['#ff6c03'],
+	lineOptions: {
+		// hideLine: 1,
+		regionFill: 1
+	}
+});
+
+var chart_update_buttons = document.querySelector('.chart-update-buttons');
+
+chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", function () {
+	shuffle(updateDataAllIndices);
+	var value = getRandom();
+	var start = getRandom();
+	var end = getRandom();
+	var data = {
+		labels: updateDataAllLabels.slice(0, 10),
+		datasets: [{ values: getUpdateData(updateDataAllValues) }],
+		yMarkers: [{
+			label: "Altitude",
+			value: value,
+			type: 'dashed'
+		}],
+		yRegions: [{
+			label: "Range",
+			start: start,
+			end: end
+		}]
+	};
+	update_chart.update(data);
+});
+
+chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", function () {
+	var index = update_chart.state.datasetLength; // last index to add
+	if (index >= updateDataAllIndices.length) return;
+	update_chart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]);
+});
+
+chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", function () {
+	update_chart.removeDataPoint();
+});
+
+// Trends Chart
+// ================================================================================
+
+var plotChartArgs = {
+	title: "Mean Total Sunspot Count - Yearly",
+	data: trendsData,
+	type: 'line',
+	height: 250,
+	colors: ['#238e38'],
+	lineOptions: {
+		hideDots: 1,
+		heatline: 1
+	},
+	axisOptions: {
+		xAxisMode: 'tick',
+		yAxisMode: 'span',
+		xIsSeries: 1
+	}
+};
+
+new Chart("#chart-trends", plotChartArgs);
+
+Array.prototype.slice.call(document.querySelectorAll('.chart-plot-buttons button')).map(function (el) {
+	el.addEventListener('click', function (e) {
+		var btn = e.target;
+		var type = btn.getAttribute('data-type');
+		var config = {};
+		config[type] = 1;
+
+		if (['regionFill', 'heatline'].includes(type)) {
+			config.hideDots = 1;
+		}
+
+		// plotChartArgs.init = false;
+		plotChartArgs.lineOptions = config;
+
+		new Chart("#chart-trends", plotChartArgs);
+
+		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+// Event chart
+// ================================================================================
+
+
+var eventsData = {
+	labels: ["Ganymede", "Callisto", "Io", "Europa"],
+	datasets: [{
+		"values": moonData.distances,
+		"formatted": moonData.distances.map(function (d) {
+			return d * 1000 + " km";
+		})
+	}]
+};
+
+var eventsChart = new Chart("#chart-events", {
+	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
+	data: eventsData,
+	type: 'bar',
+	height: 250,
+	colors: ['grey'],
+	isNavigable: 1
+});
+
+var dataDiv = document.querySelector('.chart-events-data');
+
+eventsChart.parent.addEventListener('data-select', function (e) {
+	var name = moonData.names[e.index];
+	dataDiv.querySelector('.moon-name').innerHTML = name;
+	dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
+	dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
+	dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
+	dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
+});
+
+// Heatmap
+// ================================================================================
+
+var heatmap = new Chart("#chart-heatmap", {
+	data: heatmapData,
+	type: 'heatmap',
+	height: 115,
+	discreteDomains: 1,
+	colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
+});
+
+console.log(heatmapData, heatmap);
+
+Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) {
+	el.addEventListener('click', function (e) {
+		var btn = e.target;
+		var mode = btn.getAttribute('data-mode');
+		var discreteDomains = 0;
+
+		if (mode === 'discrete') {
+			discreteDomains = 1;
+		}
+
+		var colors = [];
+		var 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: heatmapData,
+			type: 'heatmap',
+			legendScale: [0, 1, 2, 4, 5],
+			height: 115,
+			discreteDomains: discreteDomains,
+			colors: colors
+		});
+
+		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+Array.prototype.slice.call(document.querySelectorAll('.heatmap-color-buttons button')).map(function (el) {
+	el.addEventListener('click', function (e) {
+		var btn = e.target;
+		var colors_mode = btn.getAttribute('data-color');
+		var colors = [];
+
+		if (colors_mode === 'halloween') {
+			colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
+		}
+
+		var discreteDomains = 1;
+
+		var view_mode = document.querySelector('.heatmap-mode-buttons .active').getAttribute('data-mode');
+		if (view_mode === 'continuous') {
+			discreteDomains = 0;
+		}
+
+		new Chart("#chart-heatmap", {
+			data: heatmapData,
+			type: 'heatmap',
+			legendScale: [0, 1, 2, 4, 5],
+			height: 115,
+			discreteDomains: discreteDomains,
+			colors: colors
+		});
+
+		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+}());
+//# sourceMappingURL=index.min.js.map

docs/assets/js/old_index.js

@@ -1,559 +0,0 @@
-// 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/index.html

@@ -29,7 +29,6 @@
           <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;">
@@ -182,7 +181,7 @@
                 And a Month-wise Heatmap
               </h6>
               <div id="chart-heatmap" class="border"
-                style="overflow: scroll; text-align: center; padding: 20px;"></div>
+                style="overflow: scroll;"></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>
@@ -336,6 +335,6 @@
     </a>
 
     <script src="assets/js/frappe-charts.min.js"></script>
-    <script src="assets/js/index.js"></script>
+    <script src="assets/js/index.min.js"></script>
   </body>
 </html>

rollup.config.js

@@ -56,6 +56,43 @@ export default [
 			uglify()
 		]
 	},
+	{
+		input: 'docs/assets/js/index.js',
+		sourcemap: true,
+		output: [
+			{
+				file: 'docs/assets/js/index.min.js',
+				format: 'iife',
+			}
+		],
+		name: 'frappe',
+		plugins: [
+			postcss({
+				preprocessor: (content, id) => new Promise((resolve, reject) => {
+					const result = sass.renderSync({ file: id })
+					resolve({ code: result.css.toString() })
+				}),
+				extensions: [ '.scss' ],
+				plugins: [
+					nested(),
+					cssnext({ warnForDuplicates: false }),
+					cssnano()
+				]
+			}),
+			eslint({
+				exclude: [
+					'src/scss/**'
+				]
+			}),
+			babel({
+				exclude: 'node_modules/**'
+			}),
+			replace({
+				exclude: 'node_modules/**',
+				ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
+			})
+		]
+	},
 	{
 		input: 'src/js/chart.js',
 		output: [

src/js/charts/BaseChart.js

@@ -112,7 +112,7 @@ export default class BaseChart {
 	bindTooltip() {}
 
 	draw(onlyWidthChange=false, init=false) {
-		this.calcWidth();
+		this.updateWidth();
 		this.calc(onlyWidthChange);
 		this.makeChartArea();
 		this.setupComponents();
@@ -133,7 +133,7 @@ export default class BaseChart {
 		this.setupNavigation(init);
 	}
 
-	calcWidth() {
+	updateWidth() {
 		this.baseWidth = getElementContentWidth(this.parent);
 		this.width = this.baseWidth - (this.leftMargin + this.rightMargin);
 	}
@@ -179,12 +179,8 @@ export default class BaseChart {
 
 	updateNav() {
 		if(this.config.isNavigable) {
-			// if(!this.overlayGuides){
 			this.makeOverlay();
 			this.bindUnits();
-			// } else {
-			// 	this.updateOverlay();
-			// }
 		}
 	}
 

src/js/charts/Heatmap.js

@@ -1,6 +1,6 @@
 import BaseChart from './BaseChart';
 import { makeSVGGroup, makeHeatSquare, makeText } from '../utils/draw';
-import { addDays, getDdMmYyyy, getWeeksBetween, getMonthName,
+import { addDays, getDdMmYyyy, getWeeksBetween, getMonthName, clone,
 	NO_OF_MILLIS, NO_OF_YEAR_MONTHS, NO_OF_DAYS_IN_WEEK } from '../utils/date-utils';
 import { calcDistribution, getMaxCheckpoint } from '../utils/intervals';
 import { HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE,
@@ -42,13 +42,7 @@ export default class Heatmap extends BaseChart {
 		this.no_of_cols = getWeeksBetween(this.firstWeekStart + '', this.lastWeekStart + '') + 1;
 	}
 
-	setMargins() {
-		super.setMargins();
-		// this.leftMargin = HEATMAP_SQUARE_SIZE;
-		// this.topMargin = HEATMAP_SQUARE_SIZE;
-	}
-
-	calcWidth() {
+	updateWidth() {
 		this.baseWidth = (this.no_of_cols + 99) * COL_SIZE;
 
 		if(this.discreteDomains) {
@@ -68,8 +62,13 @@ export default class Heatmap extends BaseChart {
 	}
 
 	calc() {
-		let dataValues = Object.keys(this.dataPoints).map(key => this.dataPoints[key]);
-		this.distribution = calcDistribution(dataValues, HEATMAP_DISTRIBUTION_SIZE);
+		this.distribution = calcDistribution(
+			Object.values(this.dataPoints), HEATMAP_DISTRIBUTION_SIZE);
+	}
+
+	update(data=this.data) {
+		this.data = this.prepareData(data);
+		this.draw();
 	}
 
 	render() {

src/js/utils/constants.js

@@ -16,7 +16,7 @@ export const DATA_COLOR_DIVISIONS = {
 	heatmap: HEATMAP_DISTRIBUTION_SIZE
 };
 
-export const BASE_CHART_TOP_MARGIN = 30;
+export const BASE_CHART_TOP_MARGIN = 10;
 export const BASE_CHART_LEFT_MARGIN = 20;
 export const BASE_CHART_RIGHT_MARGIN = 20;
 

src/js/utils/date-utils.js

@@ -7,6 +7,8 @@ export const NO_OF_MILLIS = 1000;
 export const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
 	"July", "August", "September", "October", "November", "December"];
 
+export const MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
 // https://stackoverflow.com/a/11252167/6495043
 function treatAsUtc(dateStr) {
 	let result = new Date(dateStr);
@@ -24,6 +26,10 @@ export function getDdMmYyyy(date) {
 	].join('-');
 }
 
+export function clone(date) {
+	return new Date(date.getTime());
+}
+
 export function getWeeksBetween(startDateStr, endDateStr) {
 	return Math.ceil(getDaysBetween(startDateStr, endDateStr) / 7);
 }