Rebranded

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

docs/assets/css/hljs.css

@@ -0,0 +1,99 @@
+/*
+  github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+*/
+
+.hljs {
+  display: block;
+  color: #36414c;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #F8F8F9;
+  border-radius: 3px;
+}
+
+.hljs-comment,
+.hljs-quote {
+ color: #998;
+ font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+ color: #333;
+ font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+ color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+ color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+ color: #900;
+ font-weight: bold;
+}
+
+.hljs-subst {
+ font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+ color: #458;
+ font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+ color: #000080;
+ font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+ color: #009926;
+}
+
+.hljs-symbol,
+
+.hljs-bullet {
+ color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+ color: #0086b3;
+}
+
+.hljs-meta {
+ color: #999;
+ font-weight: bold;
+}
+
+.hljs-deletion {
+ background: #fdd;
+}
+
+.hljs-addition {
+ background: #dfd;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: bold;
+}

docs/assets/css/index.css

@@ -0,0 +1,110 @@
+body {
+	/* container styles */
+    max-width: 720px;
+    margin: auto;
+
+	font-family: "proxima-nova", sans-serif;
+	font-size: 15px;
+	color: #6c7680;
+	text-rendering: optimizeLegibility !important;
+	line-height: 1.5em;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.lead,
+.page-sidebar,
+.breadcrumb,
+.label,
+.h6,
+.sans,
+blockquote {
+	font-family: "proxima-nova", sans-serif;
+	color: #36414C;
+}
+
+header {
+	margin: 4rem 0;  /* SAME 1 */
+	font-size: 1.6em;
+	font-weight: 300;
+	text-align: center;
+}
+header .lead-text {
+	line-height: 3rem;
+	margin: 2rem 0;
+}
+.demo-tip {
+	margin-top: 1rem;   /* SAME 2 */
+	font-size: 1rem;
+}
+section {
+	margin: 4em 0;   /* SAME 1 */
+}
+h1 {
+	font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+}
+h1, h6 {
+	font-weight: 700;
+}
+.btn {
+	outline: none !important;
+}
+.blue.button {
+	color: #fff;
+	background: #7575ff;
+	border: 0px;
+	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
+}
+.blue.button:hover {
+	background: #5b5be5;
+}
+.large.button {
+	font-size: 1.33em;
+	padding: 12px 24px 10px;
+	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
+}
+a {
+	color: #5E64FF;
+}
+a, a:focus, a:hover {
+	transition: color 0.3s, border 0.3s, background-color 0.3s;
+}
+
+
+/* BaseCSS */
+.margin-top {
+	margin-top: 1rem; /* SAME 2 */
+}
+.mv1 {
+	margin: 2em 0 1em 0;
+}
+.border {
+	border: 1px solid #ddd;
+	border-radius: 3px;
+}
+
+
+/* Moon images */
+.image-container {
+	padding: 3px;
+}
+.image-container img{
+	display: block;
+    width: 100%;
+}
+.content-data p {
+	margin-bottom: 5px;
+	font-size: 12px;
+}
+
+
+.text-center {
+	text-align: center;
+}

docs/assets/css/reset.css

@@ -0,0 +1,353 @@
+/*!
+ *this reset is a copy of bootstrap's reboot.css which is inturn a fork of normalise*
+ * Bootstrap Reboot v4.0.0-beta.3 (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+
+ *,
+ *::before,
+ *::after {
+   box-sizing: border-box;
+ }
+
+ html {
+   font-family: sans-serif;
+   -webkit-text-size-adjust: 100%;
+   -ms-text-size-adjust: 100%;
+   -ms-overflow-style: scrollbar;
+   -webkit-tap-highlight-color: transparent;
+   --line-height: 3;
+   line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
+ }
+
+ @-ms-viewport {
+   width: device-width;
+ }
+
+ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+   display: block;
+ }
+
+ body {
+   margin: 0;
+   font-size: 1em;
+   font-weight: 400;
+   /* line-height: 1.5; */
+   text-align: left;
+   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans",  Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+   color: #36414c;
+   font-weight:normal;
+   -webkit-text-size-adjust: 100%;
+   -webkit-font-feature-settings: "kern" 1;
+   -moz-font-feature-settings: "kern" 1;
+   -o-font-feature-settings: "kern" 1;
+   font-feature-settings: "kern" 1;
+   font-kerning: normal;
+   text-rendering: optimizeLegibility;
+ }
+
+ [tabindex="-1"]:focus {
+   outline: 0 !important;
+ }
+
+ hr {
+   box-sizing: content-box;
+   height: 0;
+   overflow: visible;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+   margin-top: 0;
+   margin-bottom: 1.6rem;
+ }
+
+ p {
+   margin-top: 0;
+   margin-bottom: 1rem;
+ }
+
+ abbr[title],
+ abbr[data-original-title] {
+   text-decoration: underline;
+   -webkit-text-decoration: underline dotted;
+   text-decoration: underline dotted;
+   cursor: help;
+   border-bottom: 0;
+ }
+
+ address {
+   margin-bottom: 1rem;
+   font-style: normal;
+   line-height: inherit;
+ }
+
+ ol,
+ ul,
+ dl {
+   margin-top: 0;
+   margin-bottom: 1rem;
+ }
+
+ ol ol,
+ ul ul,
+ ol ul,
+ ul ol {
+   margin-bottom: 0;
+ }
+
+ dt {
+   font-weight: 700;
+ }
+
+ dd {
+   margin-bottom: .5rem;
+   margin-left: 0;
+ }
+
+ blockquote {
+   margin: 0 0 1rem;
+ }
+
+ dfn {
+   font-style: italic;
+ }
+
+ b,
+ strong {
+   font-weight: bolder;
+ }
+
+ small {
+   font-size: 80%;
+ }
+
+ sub,
+ sup {
+   position: relative;
+   font-size: 75%;
+   line-height: 0;
+   vertical-align: baseline;
+ }
+
+ sub {
+   bottom: -.25em;
+ }
+
+ sup {
+   top: -.5em;
+ }
+
+ a {
+   color: #007bff;
+   text-decoration: none;
+   background-color: transparent;
+   -webkit-text-decoration-skip: objects;
+ }
+
+ a:hover {
+   color: #0056b3;
+   text-decoration: underline;
+ }
+
+ a:not([href]):not([tabindex]) {
+   color: inherit;
+   text-decoration: none;
+ }
+
+ a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+   color: inherit;
+   text-decoration: none;
+ }
+
+ a:not([href]):not([tabindex]):focus {
+   outline: 0;
+ }
+
+ pre,
+ code,
+ kbd,
+ samp {
+   font-family: monospace, monospace;
+   font-size: 1em;
+ }
+
+ pre {
+   margin-top: 0;
+   margin-bottom: 1rem;
+   overflow: auto;
+   -ms-overflow-style: scrollbar;
+ }
+
+ figure {
+   margin: 0 0 1rem;
+ }
+
+ img {
+   vertical-align: middle;
+   border-style: none;
+ }
+
+ svg:not(:root) {
+   overflow: hidden;
+ }
+
+ a,
+ area,
+ button,
+ [role="button"],
+ input:not([type="range"]),
+ label,
+ select,
+ summary,
+ textarea {
+   -ms-touch-action: manipulation;
+   touch-action: manipulation;
+ }
+
+ table {
+   border-collapse: collapse;
+ }
+
+ caption {
+   padding-top: 0.75rem;
+   padding-bottom: 0.75rem;
+   color: #6c757d;
+   text-align: left;
+   caption-side: bottom;
+ }
+
+ th {
+   text-align: inherit;
+ }
+
+ label {
+   display: inline-block;
+   margin-bottom: .5rem;
+ }
+
+ button {
+   border-radius: 0;
+ }
+
+ button:focus {
+   outline: 1px dotted;
+   outline: 5px auto -webkit-focus-ring-color;
+ }
+
+ input,
+ button,
+ select,
+ optgroup,
+ textarea {
+   margin: 0;
+   font-family: inherit;
+   font-size: inherit;
+   line-height: inherit;
+ }
+
+ button,
+ input {
+   overflow: visible;
+ }
+
+ button,
+ select {
+   text-transform: none;
+ }
+
+ button,
+ html [type="button"],
+ [type="reset"],
+ [type="submit"] {
+   -webkit-appearance: button;
+ }
+
+ button::-moz-focus-inner,
+ [type="button"]::-moz-focus-inner,
+ [type="reset"]::-moz-focus-inner,
+ [type="submit"]::-moz-focus-inner {
+   padding: 0;
+   border-style: none;
+ }
+
+ input[type="radio"],
+ input[type="checkbox"] {
+   box-sizing: border-box;
+   padding: 0;
+ }
+
+ input[type="date"],
+ input[type="time"],
+ input[type="datetime-local"],
+ input[type="month"] {
+   -webkit-appearance: listbox;
+ }
+
+ textarea {
+   overflow: auto;
+   resize: vertical;
+ }
+
+ fieldset {
+   min-width: 0;
+   padding: 0;
+   margin: 0;
+   border: 0;
+ }
+
+ legend {
+   display: block;
+   width: 100%;
+   max-width: 100%;
+   padding: 0;
+   margin-bottom: .5rem;
+   font-size: 1.5rem;
+   line-height: inherit;
+   color: inherit;
+   white-space: normal;
+ }
+
+ progress {
+   vertical-align: baseline;
+ }
+
+ [type="number"]::-webkit-inner-spin-button,
+ [type="number"]::-webkit-outer-spin-button {
+   height: auto;
+ }
+
+ [type="search"] {
+   outline-offset: -2px;
+   -webkit-appearance: none;
+ }
+
+ [type="search"]::-webkit-search-cancel-button,
+ [type="search"]::-webkit-search-decoration {
+   -webkit-appearance: none;
+ }
+
+ ::-webkit-file-upload-button {
+   font: inherit;
+   -webkit-appearance: button;
+ }
+
+ output {
+   display: inline-block;
+ }
+
+ summary {
+   display: list-item;
+   cursor: pointer;
+ }
+
+ template {
+   display: none;
+ }
+
+ [hidden] {
+   display: none !important;
+ }
+ /*# sourceMappingURL=bootstrap-reboot.css.map */

docs/assets/js/data.js

@@ -0,0 +1,278 @@
+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,
+			options: { labelPos: "left" },
+		},
+	],
+
+	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,
+			options: { labelPos: "left" },
+			// type: 'dashed'
+		},
+	],
+
+	yRegions: [
+		{
+			label: "Region",
+			start: -10,
+			end: 50,
+			options: { labelPos: "right" },
+		},
+	],
+
+	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.7, 671.034],
+	diameters: [5262.4, 4820.6, 3637.4, 3121.6],
+};

docs/assets/js/demoConfig.js

@@ -0,0 +1,55 @@
+import { lineCompositeData, barCompositeData } from './data';
+
+export default {
+	lineComposite: {
+		elementID: "#chart-composite-1",
+		options: {
+			title: "Fireball/Bolide Events - Yearly (reported)",
+			data: lineCompositeData,
+			type: "line",
+			height: 190,
+			colors: ["green"],
+			isNavigable: 1,
+			valuesOverPoints: 1,
+
+			lineOptions: {
+				dotSize: 8
+			}
+		}
+	},
+
+	barComposite: {
+		elementID: "#chart-composite-2",
+		options: {
+			data: barCompositeData,
+			type: "bar",
+			height: 210,
+			colors: ["violet", "light-blue", "#46a9f9"],
+			valuesOverPoints: 1,
+			axisOptions: {
+				xAxisMode: "tick",
+				shortenYAxisNumbers: true
+			},
+			barOptions: {
+				stacked: 1
+			}
+		}
+	},
+
+	demoMain: {
+		elementID: "",
+		options: {
+			title: "My Awesome Chart",
+			data: "typeData",
+			type: "axis-mixed",
+			height: 300,
+			colors: ["purple", "magenta", "light-blue"],
+			maxSlices: 10,
+
+			tooltipOptions: {
+				formatTooltipX: d => (d + '').toUpperCase(),
+				formatTooltipY: d => d + ' pts',
+			}
+		}
+	}
+};

docs/assets/js/index.js

@@ -0,0 +1,375 @@
+import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
+import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
+import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
+/* eslint-disable no-unused-vars */
+import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
+	barCompositeData, typeData, trendsData, moonData } from './data';
+/* eslint-enable no-unused-vars */
+import demoConfig from './demoConfig';
+// import { lineComposite, barComposite } from './demoConfig';
+// ================================================================================
+
+let Chart = influxframework.Chart; // eslint-disable-line no-undef
+
+let lc = demoConfig.lineComposite;
+let lineCompositeChart = new Chart (lc.elementID, lc.options);
+
+let bc = demoConfig.barComposite;
+let barCompositeChart = new Chart (bc.elementID, bc.options);
+
+lineCompositeChart.parent.addEventListener('data-select', (e) => {
+	let i = e.index;
+	barCompositeChart.updateDatasets([
+		fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
+	]);
+});
+
+// ================================================================================
+
+let customColors = ['purple', 'magenta', 'light-blue'];
+let typeChartArgs = {
+	title: "My Awesome Chart",
+	data: typeData,
+	type: 'axis-mixed',
+	height: 300,
+	colors: customColors,
+
+	// maxLegendPoints: 6,
+	maxSlices: 10,
+
+	tooltipOptions: {
+		formatTooltipX: d => (d + '').toUpperCase(),
+		formatTooltipY: d => d + ' pts',
+	}
+};
+
+let aggrChart = new Chart("#chart-aggr", typeChartArgs);
+
+Array.prototype.slice.call(
+	document.querySelectorAll('.aggr-type-buttons button')
+).map(el => {
+	el.addEventListener('click', (e) => {
+		let btn = e.target;
+		let type = btn.getAttribute('data-type');
+		typeChartArgs.type = type;
+		if(type !== 'axis-mixed') {
+			typeChartArgs.colors = undefined;
+		} else {
+			typeChartArgs.colors = customColors;
+		}
+
+		if(type !== 'percentage') {
+			typeChartArgs.height = 300;
+		} else {
+			typeChartArgs.height = undefined;
+		}
+
+		let newChart = new Chart("#chart-aggr", typeChartArgs);
+		if(newChart){
+			aggrChart = newChart;
+		}
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+document.querySelector('.export-aggr').addEventListener('click', () => {
+	aggrChart.export();
+});
+
+// Update values chart
+// ================================================================================
+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(getRandomBias(-40, 60, 0.8, 1));
+let updateDataAllValues = Array.from({length: 30}, getRandom);
+
+// We're gonna be shuffling this
+let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
+
+let getUpdateData = (source_array, length=10) => {
+	let indices = updateDataAllIndices.slice(0, length);
+	return indices.map((index) => source_array[index]);
+};
+
+let updateData = {
+	labels: getUpdateData(updateDataAllLabels),
+	datasets: [{
+		"values": getUpdateData(updateDataAllValues)
+	}],
+	yMarkers: [
+		{
+			label: "Altitude",
+			value: 25,
+			type: 'dashed'
+		}
+	],
+	yRegions: [
+		{
+			label: "Range",
+			start: 10,
+			end: 45
+		},
+	],
+};
+
+let updateChart = new Chart("#chart-update", {
+	data: updateData,
+	type: 'line',
+	height: 300,
+	colors: ['#ff6c03'],
+	lineOptions: {
+		// hideLine: 1,
+		regionFill: 1
+	},
+});
+
+let chartUpdateButtons = document.querySelector('.chart-update-buttons');
+
+chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", () => {
+	shuffle(updateDataAllIndices);
+	let value = getRandom();
+	let start = getRandom();
+	let end = getRandom();
+	let data = {
+		labels: updateDataAllLabels.slice(0, 10),
+		datasets: [{values: getUpdateData(updateDataAllValues)}],
+		yMarkers: [
+			{
+				label: "Altitude",
+				value: value,
+				type: 'dashed'
+			}
+		],
+		yRegions: [
+			{
+				label: "Range",
+				start: start,
+				end: end
+			},
+		],
+	};
+	updateChart.update(data);
+});
+
+chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", () => {
+	let index = updateChart.state.datasetLength; // last index to add
+	if(index >= updateDataAllIndices.length) return;
+	updateChart.addDataPoint(
+		updateDataAllLabels[index], [updateDataAllValues[index]]
+	);
+});
+
+chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", () => {
+	updateChart.removeDataPoint();
+});
+
+document.querySelector('.export-update').addEventListener('click', () => {
+	updateChart.export();
+});
+
+// Trends Chart
+// ================================================================================
+
+let plotChartArgs = {
+	title: "Mean Total Sunspot Count - Yearly",
+	data: trendsData,
+	type: 'line',
+	height: 300,
+	colors: ['#238e38'],
+	lineOptions: {
+		hideDots: 1,
+		heatline: 1,
+	},
+	axisOptions: {
+		xAxisMode: 'tick',
+		yAxisMode: 'span',
+		xIsSeries: 1
+	}
+};
+
+let trendsChart = new Chart("#chart-trends", plotChartArgs);
+
+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 = {};
+		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(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+document.querySelector('.export-trends').addEventListener('click', () => {
+	trendsChart.export();
+});
+
+
+// Event chart
+// ================================================================================
+
+
+
+let eventsData = {
+	labels: ["Ganymede", "Callisto", "Io", "Europa"],
+	datasets: [
+		{
+			"values": moonData.distances,
+			"formatted": moonData.distances.map(d => d*1000 + " km")
+		}
+	]
+};
+
+let eventsChart = new Chart("#chart-events", {
+	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
+	data: eventsData,
+	type: 'bar',
+	height: 330,
+	colors: ['grey'],
+	isNavigable: 1,
+});
+
+let dataDiv = document.querySelector('.chart-events-data');
+
+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 today = new Date();
+let start = clone(today);
+addDays(start, 4);
+let end = clone(start);
+start.setFullYear( start.getFullYear() - 2 );
+end.setFullYear( end.getFullYear() - 1 );
+
+let dataPoints = {};
+
+let startTs = timestampSec(start);
+let endTs = timestampSec(end);
+
+startTs = timestampToMidnight(startTs);
+endTs = timestampToMidnight(endTs, true);
+
+while (startTs < endTs) {
+	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
+	startTs += SEC_IN_DAY;
+}
+
+const heatmapData = {
+	dataPoints: dataPoints,
+	start: start,
+	end: end
+};
+
+let heatmapArgs = {
+	title: "Monthly Distribution",
+	data: heatmapData,
+	type: 'heatmap',
+	discreteDomains: 1,
+	countLabel: 'Level',
+	colors: HEATMAP_COLORS_BLUE,
+	legendScale: [0, 1, 2, 4, 5]
+};
+let heatmapChart = new Chart("#chart-heatmap", heatmapArgs);
+
+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 discreteDomains = 0;
+
+		if(mode === 'discrete') {
+			discreteDomains = 1;
+		}
+
+		let colors = [];
+		let colors_mode = document
+			.querySelector('.heatmap-color-buttons .active')
+			.getAttribute('data-color');
+		if(colors_mode === 'halloween') {
+			colors = HEATMAP_COLORS_YELLOW;
+		} else if (colors_mode === 'blue') {
+			colors = HEATMAP_COLORS_BLUE;
+		}
+
+		heatmapArgs.discreteDomains = discreteDomains;
+		heatmapArgs.colors = colors;
+		new Chart("#chart-heatmap", heatmapArgs);
+
+		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 = HEATMAP_COLORS_YELLOW;
+		} else if (colors_mode === 'blue') {
+			colors = HEATMAP_COLORS_BLUE;
+		}
+
+		let discreteDomains = 1;
+
+		let view_mode = document
+			.querySelector('.heatmap-mode-buttons .active')
+			.getAttribute('data-mode');
+		if(view_mode === 'continuous') {
+			discreteDomains = 0;
+		}
+
+		heatmapArgs.discreteDomains = discreteDomains;
+		heatmapArgs.colors = colors;
+		new Chart("#chart-heatmap", heatmapArgs);
+
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+document.querySelector('.export-heatmap').addEventListener('click', () => {
+	heatmapChart.export();
+});

docs/assets/js/index.min.js

@@ -0,0 +1,563 @@
+(function () {
+'use strict';
+
+var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
+var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
+
+// Universal constants
+var ANGLE_RATIO = Math.PI / 180;
+
+/**
+ * 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;
+}
+
+// https://stackoverflow.com/a/29325222
+function getRandomBias(min, max, bias, influence) {
+	var range = max - min;
+	var biasValue = range * bias + min;
+	var rnd = Math.random() * range + min,
+	    // random in range
+	mix = Math.random() * influence; // random mixer
+	return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
+}
+
+// Playing around with dates
+var NO_OF_MILLIS = 1000;
+var SEC_IN_DAY = 86400;
+var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+function clone(date) {
+	return new Date(date.getTime());
+}
+
+function timestampSec(date) {
+	return date.getTime() / NO_OF_MILLIS;
+}
+
+function timestampToMidnight(timestamp) {
+	var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+	var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY);
+	if (roundAhead) {
+		return midnightTs + SEC_IN_DAY;
+	}
+	return midnightTs;
+}
+
+// mutates
+function addDays(date, numberOfDays) {
+	date.setDate(date.getDate() + numberOfDays);
+}
+
+// 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,
+		options: { labelPos: "left" }
+	}],
+
+	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,
+		options: { labelPos: "left" }
+		// type: 'dashed'
+	}],
+
+	yRegions: [{
+		label: "Region",
+		start: -10,
+		end: 50,
+		options: { labelPos: "right" }
+	}],
+
+	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.7, 671.034],
+	diameters: [5262.4, 4820.6, 3637.4, 3121.6]
+};
+
+var demoConfig = {
+	lineComposite: {
+		elementID: "#chart-composite-1",
+		options: {
+			title: "Fireball/Bolide Events - Yearly (reported)",
+			data: lineCompositeData,
+			type: "line",
+			height: 190,
+			colors: ["green"],
+			isNavigable: 1,
+			valuesOverPoints: 1,
+
+			lineOptions: {
+				dotSize: 8
+			}
+		}
+	},
+
+	barComposite: {
+		elementID: "#chart-composite-2",
+		options: {
+			data: barCompositeData,
+			type: "bar",
+			height: 210,
+			colors: ["violet", "light-blue", "#46a9f9"],
+			valuesOverPoints: 1,
+			axisOptions: {
+				xAxisMode: "tick",
+				shortenYAxisNumbers: true
+			},
+			barOptions: {
+				stacked: 1
+			}
+		}
+	},
+
+	demoMain: {
+		elementID: "",
+		options: {
+			title: "My Awesome Chart",
+			data: "typeData",
+			type: "axis-mixed",
+			height: 300,
+			colors: ["purple", "magenta", "light-blue"],
+			maxSlices: 10,
+
+			tooltipOptions: {
+				formatTooltipX: function formatTooltipX(d) {
+					return (d + '').toUpperCase();
+				},
+				formatTooltipY: function formatTooltipY(d) {
+					return d + ' pts';
+				}
+			}
+		}
+	}
+};
+
+// import { lineComposite, barComposite } from './demoConfig';
+// ================================================================================
+
+var Chart = influxframework.Chart; // eslint-disable-line no-undef
+
+var lc = demoConfig.lineComposite;
+var lineCompositeChart = new Chart(lc.elementID, lc.options);
+
+var bc = demoConfig.barComposite;
+var barCompositeChart = new Chart(bc.elementID, bc.options);
+
+lineCompositeChart.parent.addEventListener('data-select', function (e) {
+	var i = e.index;
+	barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
+});
+
+// ================================================================================
+
+var customColors = ['purple', 'magenta', 'light-blue'];
+var typeChartArgs = {
+	title: "My Awesome Chart",
+	data: typeData,
+	type: 'axis-mixed',
+	height: 300,
+	colors: customColors,
+
+	// 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", typeChartArgs);
+
+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');
+		typeChartArgs.type = type;
+		if (type !== 'axis-mixed') {
+			typeChartArgs.colors = undefined;
+		} else {
+			typeChartArgs.colors = customColors;
+		}
+
+		if (type !== 'percentage') {
+			typeChartArgs.height = 300;
+		} else {
+			typeChartArgs.height = undefined;
+		}
+
+		var newChart = new Chart("#chart-aggr", typeChartArgs);
+		if (newChart) {
+			aggrChart = newChart;
+		}
+		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+document.querySelector('.export-aggr').addEventListener('click', function () {
+	aggrChart.export();
+});
+
+// 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(getRandomBias(-40, 60, 0.8, 1));
+};
+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 updateData = {
+	labels: getUpdateData(updateDataAllLabels),
+	datasets: [{
+		"values": getUpdateData(updateDataAllValues)
+	}],
+	yMarkers: [{
+		label: "Altitude",
+		value: 25,
+		type: 'dashed'
+	}],
+	yRegions: [{
+		label: "Range",
+		start: 10,
+		end: 45
+	}]
+};
+
+var updateChart = new Chart("#chart-update", {
+	data: updateData,
+	type: 'line',
+	height: 300,
+	colors: ['#ff6c03'],
+	lineOptions: {
+		// hideLine: 1,
+		regionFill: 1
+	}
+});
+
+var chartUpdateButtons = document.querySelector('.chart-update-buttons');
+
+chartUpdateButtons.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
+		}]
+	};
+	updateChart.update(data);
+});
+
+chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", function () {
+	var index = updateChart.state.datasetLength; // last index to add
+	if (index >= updateDataAllIndices.length) return;
+	updateChart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]);
+});
+
+chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", function () {
+	updateChart.removeDataPoint();
+});
+
+document.querySelector('.export-update').addEventListener('click', function () {
+	updateChart.export();
+});
+
+// Trends Chart
+// ================================================================================
+
+var plotChartArgs = {
+	title: "Mean Total Sunspot Count - Yearly",
+	data: trendsData,
+	type: 'line',
+	height: 300,
+	colors: ['#238e38'],
+	lineOptions: {
+		hideDots: 1,
+		heatline: 1
+	},
+	axisOptions: {
+		xAxisMode: 'tick',
+		yAxisMode: 'span',
+		xIsSeries: 1
+	}
+};
+
+var trendsChart = 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');
+	});
+});
+
+document.querySelector('.export-trends').addEventListener('click', function () {
+	trendsChart.export();
+});
+
+// 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: 330,
+	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 today = new Date();
+var start = clone(today);
+addDays(start, 4);
+var end = clone(start);
+start.setFullYear(start.getFullYear() - 2);
+end.setFullYear(end.getFullYear() - 1);
+
+var dataPoints = {};
+
+var startTs = timestampSec(start);
+var endTs = timestampSec(end);
+
+startTs = timestampToMidnight(startTs);
+endTs = timestampToMidnight(endTs, true);
+
+while (startTs < endTs) {
+	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
+	startTs += SEC_IN_DAY;
+}
+
+var heatmapData = {
+	dataPoints: dataPoints,
+	start: start,
+	end: end
+};
+
+var heatmapArgs = {
+	title: "Monthly Distribution",
+	data: heatmapData,
+	type: 'heatmap',
+	discreteDomains: 1,
+	countLabel: 'Level',
+	colors: HEATMAP_COLORS_BLUE,
+	legendScale: [0, 1, 2, 4, 5]
+};
+var heatmapChart = new Chart("#chart-heatmap", heatmapArgs);
+
+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 = HEATMAP_COLORS_YELLOW;
+		} else if (colors_mode === 'blue') {
+			colors = HEATMAP_COLORS_BLUE;
+		}
+
+		heatmapArgs.discreteDomains = discreteDomains;
+		heatmapArgs.colors = colors;
+		new Chart("#chart-heatmap", heatmapArgs);
+
+		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 = HEATMAP_COLORS_YELLOW;
+		} else if (colors_mode === 'blue') {
+			colors = HEATMAP_COLORS_BLUE;
+		}
+
+		var discreteDomains = 1;
+
+		var view_mode = document.querySelector('.heatmap-mode-buttons .active').getAttribute('data-mode');
+		if (view_mode === 'continuous') {
+			discreteDomains = 0;
+		}
+
+		heatmapArgs.discreteDomains = discreteDomains;
+		heatmapArgs.colors = colors;
+		new Chart("#chart-heatmap", heatmapArgs);
+
+		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
+	});
+});
+
+document.querySelector('.export-heatmap').addEventListener('click', function () {
+	heatmapChart.export();
+});
+
+}());
+//# sourceMappingURL=index.min.js.map