[docs][major] setup home and docsify page

7 년 전 · 52d904da7d
--- a/dist/frappe-charts.min.iife.js
+++ b/dist/frappe-charts.min.iife.js
--- a/dist/frappe-charts.min.iife.js.map
+++ b/dist/frappe-charts.min.iife.js.map
--- a/docs/docsify/.nojekyll
+++ b/docs/docsify/.nojekyll
--- a/docs/docsify/README.md
+++ b/docs/docsify/README.md
--- a/docs/docsify/_sidebar.md
+++ b/docs/docsify/_sidebar.md
--- a/docs/assets/css/index.css
+++ b/docs/assets/css/index.css
@@ -1,7 +1,7 @@
 body {
 	/* container styles */
    max-width: 720px;
    margin: auto;
    /* max-width: 720px;
    margin: auto; */

 	font-family: "proxima-nova", sans-serif;
 	font-size: 15px;
@@ -105,6 +105,9 @@ a, a:focus, a:hover {
 .text-center {
 	text-align: center;
 }
 .hide {
 	display: none;
 }


 /* Moon images */
--- a/docs/assets/js/docsBuilder.js
+++ b/docs/assets/js/docsBuilder.js
@@ -7,7 +7,6 @@ export class docsBuilder {
 	}

 	makeSection(parent, sys) {
 		console.log('parent here?', parent);
 		return new docSection(this.LIB_OBJ, parent, sys);
 	}
 }
@@ -26,15 +25,18 @@ class docSection {
 	make() {
 		// const section = document.querySelector(this.parent);
 		let s = this.sys;
 		// if(s.title) {
 		// 	$.create('h6', { inside: this.parent, innerHTML: s.title });
 		// }

 		// s.contentBlocks.forEach((blockConf, index) => {
 		// 	this.blockMap[index] = this.getBlock(blockConf);
 		// });
 		if(s.title) {
 			$.create('h6', { inside: this.parent, innerHTML: s.title });
 		}

 		this.blockMap['test'] = this.getDemo(s);
 		if(s.contentBlocks) {
 			s.contentBlocks.forEach((blockConf, index) => {
 				this.blockMap[index] = this.getBlock(blockConf);
 			});
 		} else {
 			// TODO:
 			this.blockMap['test'] = this.getDemo(s);
 		}
 	}

 	getBlock(blockConf) {
--- a/docs/assets/js/frappe-charts.min.js
+++ b/docs/assets/js/frappe-charts.min.js
--- a/docs/assets/js/index.js
+++ b/docs/assets/js/index.js
@@ -1,35 +0,0 @@
 import { $, insertAfter } from '../../../src/js/utils/dom';
 import { fireballOver25, fireball_2_5, fireball_5_25 } from './data';
 import { lineComposite, barComposite, demoSections} from './demoConfig';
 import { docSections } from './docsConfig';
 import { docsBuilder } from './docsBuilder';

 let Chart = frappe.Chart; // eslint-disable-line no-undef
 let dbd = new docsBuilder(Chart);
 let currentElement = document.querySelector('header');
 let sections = [];

 if(document.querySelectorAll('#line-composite-1').length) {
 	let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
 	let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);

 	lineCompositeChart.parent.addEventListener('data-select', (e) => {
 		let i = e.index;
 		barCompositeChart.updateDatasets([
 			fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
 		]);
 	});

 	sections = demoSections;
 }

 // else {
 // 	sections = docSections;
 // }

 sections.forEach(sectionConf => {
 	let sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
 	insertAfter(sectionEl, currentElement);
 	currentElement = sectionEl;
 	dbd.makeSection(sectionEl, sectionConf);
 });
--- a/docs/assets/js/index.min.js
+++ b/docs/assets/js/index.min.js
--- a/docs/docsify/chap1/test1.md
+++ b/docs/docsify/chap1/test1.md
--- a/docs/docsify/demoRegistry.js
+++ b/docs/docsify/demoRegistry.js
@@ -1,4 +1,4 @@
 import { sampleData, trendsData } from '../assets/js/data';
 import { sampleData, trendsData } from './assets/js/data';

 export const demoRegistry = {
 	demo1: {
--- a/docs/docsify/assets/css/bootstrap.min.css
+++ b/docs/docsify/assets/css/bootstrap.min.css
--- a/docs/docsify/assets/css/hljs.css
+++ b/docs/docsify/assets/css/hljs.css
@@ -1,99 +0,0 @@
 /*
  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;
 }
--- a/docs/docsify/assets/css/index.css
+++ b/docs/docsify/assets/css/index.css
@@ -1,121 +0,0 @@
 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 */
 }
 section figure {
 	border: 1px solid #ddd; /* SAME 3 */
 	border-radius: 3px;
 }
 .btn, .btn-group {
 	margin-bottom: 1rem;
 }
 .btn-group, .btn-action {
 	margin-right: 0.5rem;
 }
 h1 {
 	font-size: 3.5rem;
    margin-bottom: 1.5rem;
 }
 h1, h6 {
 	font-weight: 700;
 }
 p.new-context {
 	margin-top: 2rem;
 }
 .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 */
 .mt1 {
 	margin-top: 1rem; /* SAME 2 */
 }
 .mv1 {
 	margin: 2em 0 1em 0;
 }
 .border {
 	border: 1px solid #ddd;  /* SAME 3 */
 	border-radius: 3px;
 }
 .text-center {
 	text-align: center;
 }


 /* Moon images */
 .image-container {
 	padding: 3px;
 }
 .image-container img{
 	display: block;
    width: 100%;
 }
 .content-data p {
 	margin-bottom: 5px;
 	font-size: 12px;
 }
--- a/docs/docsify/assets/css/reset.css
+++ b/docs/docsify/assets/css/reset.css
@@ -1,353 +0,0 @@
 /*!
 *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 */
--- a/docs/docsify/index.html
+++ b/docs/docsify/index.html
@@ -1,24 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>frappe-charts - https://frappe.github.io/charts</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="https://frappe.github.io/charts">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="vuestyle.css" media="screen">

  <link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen">
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
  <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
  <link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
  <link rel="stylesheet" type="text/css" href="style.css" media="screen">
 </head>
 <body>
  <div id="app"></div>

  <script src="indexShadow.min.js"></script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
 </body>
 </html>
--- a/docs/docsify/indexShadow.js
+++ b/docs/docsify/indexShadow.js
@@ -1,20 +0,0 @@
 import { docsBuilder } from '../assets/js/docsBuilder';
 import { Chart } from "../../dist/frappe-charts.min.esm";
 import { demoRegistry } from './demoRegistry';

 window.$docsify = {
 	name: 'frappe-charts',
 	// repo: 'https://github.com/frappe/charts',
 	loadSidebar: true,
 	executeScript: true,
 	plugins: [
 		function(hook, vm) {
 			hook.doneEach(function() {
 				let dbd = new docsBuilder(Chart);

 				console.log("inside hook", document.querySelector('.demo'));
 				dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
 			});
 		}
 	]
 }
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,28 +1,36 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>Frappe Charts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="open source javascript js charts library svg zero-dependency
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Frappe Charts</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="https://frappe.github.io/charts">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <meta name="keywords" content="open source javascript js charts library svg zero-dependency
      interactive data visualization beautiful drag resize">
    <meta name="description" content="A simple, responsive, modern charts library for the web.">

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
    <link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
  <link rel="stylesheet" type="text/css" href="vuestyle.css" media="screen">

  <link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen">
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
  <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
  <link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
  <link rel="stylesheet" type="text/css" href="style.css" media="screen">

    <script src="assets/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
  <script src="assets/js/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

    <link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
    <link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
  <link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
  <link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">

    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </head>
  <script async defer src="https://buttons.github.io/buttons.js"></script>

 </head>
 <body>
  <div id="home-page">

  <body>
    <header>
      <h1>Frappe Charts</h1>
      <p class="lead-text">GitHub-inspired simple and modern SVG charts for the web
@@ -37,7 +45,7 @@
    <section class="closing text-center">
      <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
      <p style="mt1: 3rem; margin-bottom: 1.5rem;">
        <a href="docsify/index.html" style="margin-right: 1rem;" target="_blank">Documentation</a>
        <a href="#" id="docs-link" style="margin-right: 1rem;">Documentation</a>
        <a href="https://github.com/frappe/charts" target="_blank">GitHub</a>
      </p>
      <p><a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a></p>
@@ -66,8 +74,17 @@
      </svg>
    </a>

    <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
    <script src="assets/js/frappe-charts.min.js"></script>
    <script src="assets/js/index.min.js"></script>
  </body>
  </div>

  <div id="app"></div>

  <!-- SCRIPTS -->
  <script src="index.min.js"></script>

  <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
  <script src="assets/js/frappe-charts.min.js"></script>

  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
 </body>
 </html>
--- a/docs/index.js
+++ b/docs/index.js
@@ -0,0 +1,49 @@
 import { docsBuilder } from './assets/js/docsBuilder';
 import { Chart } from "../dist/frappe-charts.min.esm";
 import { demoRegistry } from './demoRegistry';

 import { $, insertAfter } from '../src/js/utils/dom';
 import { fireballOver25, fireball_2_5, fireball_5_25 } from './assets/js/data';
 import { lineComposite, barComposite, demoSections} from './assets/js/demoConfig';

 let dbd = new docsBuilder(Chart);
 let currentElement = document.querySelector('header');

 if(document.querySelectorAll('#line-composite-1').length) {
 	let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
 	let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);

 	lineCompositeChart.parent.addEventListener('data-select', (e) => {
 		let i = e.index;
 		barCompositeChart.updateDatasets([
 			fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
 		]);
 	});

 	demoSections.forEach(sectionConf => {
 		let sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
 		insertAfter(sectionEl, currentElement);
 		currentElement = sectionEl;
 		dbd.makeSection(sectionEl, sectionConf);
 	});
 }

 window.$docsify = {
 	name: 'frappe-charts',
 	// repo: 'https://github.com/frappe/charts',
 	loadSidebar: true,
 	executeScript: true,
 	plugins: [
 		function(hook, vm) {
 			hook.doneEach(function() {
 				dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
 				document.querySelector("main").classList.add("hide");
 			});
 		}
 	]
 }

 document.querySelector("#docs-link").addEventListener('click', () => {
 	document.querySelector("#home-page").classList.add("hide");
 	document.querySelector("main").classList.remove("hide");
 });
--- a/docs/docsify/indexShadow.min.js
+++ b/docs/docsify/indexShadow.min.js
@@ -166,11 +166,15 @@ $.create = function (tag, o) {

 // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/

 // Fixed 5-color theme,
 // More colors are difficult to parse visually



 function insertAfter(newNode, referenceNode) {
 	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
 }

 // Fixed 5-color theme,
 // More colors are difficult to parse visually



@@ -180,6 +184,9 @@ $.create = function (tag, o) {



 var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
 var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];



 // Universal constants
@@ -201,7 +208,20 @@ $.create = function (tag, o) {
 * 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
@@ -222,7 +242,14 @@ $.create = function (tag, o) {


 // 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
 }



@@ -248,7 +275,6 @@ var docsBuilder = function () {
 	_createClass(docsBuilder, [{
 		key: 'makeSection',
 		value: function makeSection(parent, sys) {
 			console.log('parent here?', parent);
 			return new docSection(this.LIB_OBJ, parent, sys);
 		}
 	}]);
@@ -272,17 +298,22 @@ var docSection = function () {
 	_createClass(docSection, [{
 		key: 'make',
 		value: function make() {
 			var _this = this;

 			// const section = document.querySelector(this.parent);
 			var s = this.sys;
 			// if(s.title) {
 			// 	$.create('h6', { inside: this.parent, innerHTML: s.title });
 			// }

 			// s.contentBlocks.forEach((blockConf, index) => {
 			// 	this.blockMap[index] = this.getBlock(blockConf);
 			// });
 			if (s.title) {
 				$.create('h6', { inside: this.parent, innerHTML: s.title });
 			}

 			this.blockMap['test'] = this.getDemo(s);
 			if (s.contentBlocks) {
 				s.contentBlocks.forEach(function (blockConf, index) {
 					_this.blockMap[index] = _this.getBlock(blockConf);
 				});
 			} else {
 				// TODO:
 				this.blockMap['test'] = this.getDemo(s);
 			}
 		}
 	}, {
 		key: 'getBlock',
@@ -354,14 +385,14 @@ var docSection = function () {
 		value: function getDemoOptions(demoIndex) {
 			var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

 			var _this = this;
 			var _this2 = this;

 			var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 			var figure = arguments[3];

 			options.forEach(function (o) {
 				var btnGroup = $.create('div', {
 					inside: _this.parent,
 					inside: _this2.parent,
 					className: 'btn-group ' + o.name
 				});
 				var mapKeys = o.mapKeys;
@@ -395,7 +426,7 @@ var docSection = function () {
 								// boolean, string, number, object
 								args[o.path[0]] = state;
 							}
 							_this.demos[demoIndex] = new _this.LIB_OBJ(figure, args);
 							_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
 						}
 					});

@@ -408,19 +439,19 @@ var docSection = function () {
 	}, {
 		key: 'getDemoActions',
 		value: function getDemoActions(demoIndex) {
 			var _this2 = this;
 			var _this3 = this;

 			var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 			actions.forEach(function (o) {
 				var args = o.args || [];
 				$.create('button', {
 					inside: _this2.parent,
 					inside: _this3.parent,
 					className: 'btn btn-action btn-sm btn-secondary',
 					innerHTML: o.name,
 					onClick: function onClick() {
 						var _demos$demoIndex;

 						(_demos$demoIndex = _this2.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
 						(_demos$demoIndex = _this3.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
 					}
 				});
 			});
@@ -5095,7 +5126,7 @@ var NO_OF_MILLIS$1 = 1000;
 var SEC_IN_DAY$1 = 86400;



 var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];



@@ -5140,22 +5171,152 @@ function addDays$1(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 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 baseLength = 10;
 var fullLength = 30;

 var getRandom = function getRandom() {
 	return Math.floor(getRandomBias(-40, 60, 0.8, 1));
 };
 var updateDataAllValues = Array.from({ length: fullLength }, getRandom);

 // We're gonna be shuffling this
 var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
 	return i;
 });

 var getUpdateArray = function getUpdateArray(sourceArray) {
 	var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;

 	var indices = updateDataAllIndices.slice(0, length);
 	return indices.map(function (index) {
 		return sourceArray[index];
 	});
 };

 var currentLastIndex = baseLength;

 function getUpdateData() {
 	shuffle(updateDataAllIndices);
 	var value = getRandom();
 	var start = getRandom();
 	var end = getRandom();
 	currentLastIndex = baseLength;

 	return {
 		labels: updateDataAllLabels.slice(0, baseLength),
 		datasets: [{
 			values: getUpdateArray(updateDataAllValues)
 		}],
 		yMarkers: [{
 			label: "Altitude",
 			value: value,
 			type: 'dashed'
 		}],
 		yRegions: [{
 			label: "Range",
 			start: start,
 			end: end
 		}]
 	};
 }

 function getAddUpdateData() {
 	if (currentLastIndex >= fullLength) return;

 	// TODO: Fix update on removal
 	currentLastIndex++;
 	var c = currentLastIndex - 1;

 	return [updateDataAllLabels[c], [updateDataAllValues[c]]];

 	// updateChart.addDataPoint(
 	// 	updateDataAllLabels[index], [updateDataAllValues[index]]
 	// );
 }

 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"],
@@ -5206,6 +5367,8 @@ var end = clone$1(start);
 start.setFullYear(start.getFullYear() - 2);
 end.setFullYear(end.getFullYear() - 1);

 var dataPoints = {};

 var startTs = timestampSec(start);
 var endTs = timestampSec(end);

@@ -5213,10 +5376,15 @@ 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$1;
 }


 var heatmapData = {
 	dataPoints: dataPoints,
 	start: start,
 	end: end
 };

 var sampleData = {
 	0: {
@@ -5278,6 +5446,262 @@ var demoRegistry = {
 	}
 };

 var lineComposite = {
    config: {
        title: "Fireball/Bolide Events - Yearly (reported)",
        data: lineCompositeData,
        type: "line",
        height: 190,
        colors: ["green"],
        isNavigable: 1,
        valuesOverPoints: 1,

        lineOptions: {
            dotSize: 8
        }
    }
 };

 var barComposite = {
    config: {
        data: barCompositeData,
        type: "bar",
        height: 210,
        colors: ["violet", "light-blue", "#46a9f9"],
        valuesOverPoints: 1,
        axisOptions: {
            xAxisMode: "tick"
        },
        barOptions: {
            stacked: 1
        }
    }
 };

 var demoSections = [{
    title: "Create a Chart",
    name: "demo-main",
    contentBlocks: [{
        type: "code",
        lang: "html",
        content: '  &lt!--HTML--&gt;\n  &lt;figure id="frost-chart"&gt;&lt;/figure&gt;'
    }, {
        type: "code",
        lang: "javascript",
        content: '  // Javascript\n  let chart = new frappe.Chart( "#frost-chart", { // or DOM element\n    data: {\n    labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",\n      "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],\n\n    datasets: [\n      {\n        name: "Some Data", chartType: \'bar\',\n        values: [25, 40, 30, 35, 8, 52, 17, -4]\n      },\n      {\n        name: "Another Set", chartType: \'bar\',\n        values: [25, 50, -10, 15, 18, 32, 27, 14]\n      },\n      {\n        name: "Yet Another", chartType: \'line\',\n        values: [15, 20, -3, -15, 58, 12, -17, 37]\n      }\n    ],\n\n    yMarkers: [{ label: "Marker", value: 70,\n      options: { labelPos: \'left\' }}],\n    yRegions: [{ label: "Region", start: -10, end: 50,\n      options: { labelPos: \'right\' }}]\n    },\n\n    title: "My Awesome Chart",\n    type: \'axis-mixed\', // or \'bar\', \'line\', \'pie\', \'percentage\'\n    height: 300,\n    colors: [\'purple\', \'#ffa3ef\', \'light-blue\'],\n\n    tooltipOptions: {\n      formatTooltipX: d => (d + \'\').toUpperCase(),\n      formatTooltipY: d => d + \' pts\',\n    }\n  });\n\n  chart.export();'
    }, {
        type: "demo",
        config: {
            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';
                }
            }
        },
        options: [{
            name: "type",
            path: ["type"],
            type: "string",
            states: {
                "Mixed": 'axis-mixed',
                "Line": 'line',
                "Bar": 'bar',
                "Pie Chart": 'pie',
                "Percentage Chart": 'percentage'
            },
            activeState: "Mixed"
        }],
        actions: [{ name: "Export ...", fn: "export", args: [] }]
    }]
 }, {
    title: "Update Values",
    name: "updates-chart",
    contentBlocks: [{
        type: "demo",
        config: {
            data: getUpdateData(),
            type: 'line',
            height: 300,
            colors: ['#ff6c03'],
            lineOptions: {
                regionFill: 1
            }
        },
        actions: [{
            name: "Random Data",
            fn: "update",
            args: [getUpdateData()]
        }, {
            name: "Add Value",
            fn: "addDataPoint",
            args: getAddUpdateData()
        }, {
            name: "Remove Value",
            fn: "removeDataPoint",
            args: []
        }, {
            name: "Export ...",
            fn: "export",
            args: []
        }]
    }]
 }, {
    title: "Plot Trends",
    name: "trends-plot",
    contentBlocks: [{
        type: "demo",
        config: {
            title: "Mean Total Sunspot Count - Yearly",
            data: trendsData,
            type: 'line',
            height: 300,
            colors: ['#238e38'],
            axisOptions: {
                xAxisMode: 'tick',
                yAxisMode: 'span',
                xIsSeries: 1
            }
        },
        options: [{
            name: "lineOptions",
            path: ["lineOptions"],
            type: "map",
            mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
            states: {
                "Line": [0, 1, 0, 0],
                "Dots": [1, 0, 0, 0],
                "HeatLine": [0, 1, 1, 0],
                "Region": [0, 1, 0, 1]
            },
            activeState: "HeatLine"
        }],
        actions: [{ name: "Export ...", fn: "export", args: [] }]
    }]
 }, {
    title: "Listen to state change",
    name: "state-change",
    contentBlocks: [{
        type: "demo",
        config: {
            title: "Jupiter's Moons: Semi-major Axis (1000 km)",
            data: eventsData,
            type: 'bar',
            height: 330,
            colors: ['grey'],
            isNavigable: 1
        },
        sideContent: '<div class="image-container border">\n                    <img class="moon-image" src="./assets/img/europa.jpg">\n                </div>\n                <div class="content-data mt1">\n                    <h6 class="moon-name">Europa</h6>\n                    <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>\n                    <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>\n                    <p>Diameter: <span class="diameter">3121.6</span> km</p>\n                </div>',
        postSetup: function postSetup(chart, figure, row) {
            chart.parent.addEventListener('data-select', function (e) {
                var i = e.index;
                var name = moonData.names[i];
                row.querySelector('.moon-name').innerHTML = name;
                row.querySelector('.semi-major-axis').innerHTML = moonData.distances[i] * 1000;
                row.querySelector('.mass').innerHTML = moonData.masses[i];
                row.querySelector('.diameter').innerHTML = moonData.diameters[i];
                row.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
            });
        }
    }, {
        type: "code",
        lang: "javascript",
        content: '  ...\n    isNavigable: 1, // Navigate across data points; default 0\n  ...\n\n  chart.parent.addEventListener(\'data-select\', (e) => {\n    update_moon_data(e.index); // e contains index and value of current datapoint\n  });'
    }]
 }, {
    title: "And a Month-wise Heatmap",
    name: "heatmap",
    contentBlocks: [{
        type: "demo",
        config: {
            title: "Monthly Distribution",
            data: heatmapData,
            type: 'heatmap',
            discreteDomains: 1,
            countLabel: 'Level',
            colors: HEATMAP_COLORS_BLUE,
            legendScale: [0, 1, 2, 4, 5]
        },
        options: [{
            name: "Discrete domains",
            path: ["discreteDomains"],
            type: 'boolean',
            // boolNames: ["Continuous", "Discrete"],
            states: { "Discrete": 1, "Continuous": 0 }
        }, {
            name: "Colors",
            path: ["colors"],
            type: "object",
            states: {
                "Green (Default)": [],
                "Blue": HEATMAP_COLORS_BLUE,
                "GitHub's Halloween": HEATMAP_COLORS_YELLOW
            }
        }],
        actions: [{ name: "Export ...", fn: "export", args: [] }]
    }, {
        type: "code",
        lang: "javascript",
        content: '  let heatmap = new frappe.Chart("#heatmap", {\n    type: \'heatmap\',\n    title: "Monthly Distribution",\n    data: {\n    dataPoints: {\'1524064033\': 8, /* ... */},\n                        // object with timestamp-value pairs\n      start: startDate\n      end: endDate      // Date objects\n    },\n    countLabel: \'Level\',\n    discreteDomains: 0  // default: 1\n    colors: [\'#ebedf0\', \'#c0ddf9\', \'#73b3f3\', \'#3886e1\', \'#17459e\'],\n                // Set of five incremental colors,\n                // preferably with a low-saturation color for zero data;\n                // def: [\'#ebedf0\', \'#c6e48b\', \'#7bc96f\', \'#239a3b\', \'#196127\']\n  });'
    }]
 }, {
    title: "Demo",
    name: "codepen",
    contentBlocks: [{
        type: "custom",
        html: '<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"\n                    data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">\n                    See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>\n                    by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on\n                    <a href="https://codepen.io">CodePen</a>.\n                </p>'
    }]
 }, {
    title: "Available Options",
    name: "options",
    contentBlocks: [{
        type: "code",
        lang: "javascript",
        content: '\n  ...\n  {\n    data: {\n      labels: [],\n      datasets: [],\n      yRegions: [],\n      yMarkers: []\n    }\n    title: \'\',\n    colors: [],\n    height: 200,\n\n    tooltipOptions: {\n      formatTooltipX: d => (d + \'\').toUpperCase(),\n      formatTooltipY: d => d + \' pts\',\n    }\n\n    // Axis charts\n    isNavigable: 1,        // default: 0\n    valuesOverPoints: 1,   // default: 0\n    barOptions: {\n      spaceRatio: 1        // default: 0.5\n      stacked: 1           // default: 0\n    }\n\n    lineOptions: {\n      dotSize: 6,          // default: 4\n      hideLine: 0,         // default: 0\n      hideDots: 1,         // default: 0\n      heatline: 1,         // default: 0\n      regionFill: 1        // default: 0\n    }\n\n    axisOptions: {\n      yAxisMode: \'span\',   // Axis lines, default\n      xAxisMode: \'tick\',   // No axis lines, only short ticks\n      xIsSeries: 1         // Allow skipping x values for space\n                           // default: 0\n    },\n\n    // Pie/Percentage charts\n    maxLegendPoints: 6,    // default: 20\n    maxSlices: 10,         // default: 20\n\n    // Percentage chart\n    barOptions: {\n      height: 15           // default: 20\n      depth: 5             // default: 2\n    }\n\n    // Heatmap\n    discreteDomains: 1,    // default: 1\n  }\n  ...\n\n  // Updating values\n  chart.update(data);\n\n  // Axis charts:\n  chart.addDataPoint(label, valueFromEachDataset, index)\n  chart.removeDataPoint(index)\n  chart.updateDataset(datasetValues, index)\n\n  // Exporting\n  chart.export();\n\n  // Unbind window-resize events\n  chart.unbindWindowEvents();\n\n  '
    }]
 }, {
    title: "Install",
    name: "installation",
    contentBlocks: [{ type: "text", content: 'Install via npm' }, { type: "code", lang: "console", content: '  npm install frappe-charts' }, { type: "text", content: 'And include it in your project' }, { type: "code", lang: "javascript", content: '  import { Chart } from "frappe-charts' }, { type: "text", content: 'Use as:' }, {
        type: "code",
        lang: "javascript",
        content: '  new Chart();          // ES6 module\n                        // or\n  new frappe.Chart();   // Browser'
    }, { type: "text", content: '... or include it directly in your HTML' }, {
        type: "code",
        lang: "html",
        content: '  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;'
    }]
 }];

 var dbd = new docsBuilder(Chart);
 var currentElement = document.querySelector('header');

 if (document.querySelectorAll('#line-composite-1').length) {
 	var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
 	var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);

 	lineCompositeChart.parent.addEventListener('data-select', function (e) {
 		var i = e.index;
 		barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
 	});

 	demoSections.forEach(function (sectionConf) {
 		var sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
 		insertAfter(sectionEl, currentElement);
 		currentElement = sectionEl;
 		dbd.makeSection(sectionEl, sectionConf);
 	});
 }

 window.$docsify = {
 	name: 'frappe-charts',
 	// repo: 'https://github.com/frappe/charts',
@@ -5285,12 +5709,15 @@ window.$docsify = {
 	executeScript: true,
 	plugins: [function (hook, vm) {
 		hook.doneEach(function () {
 			var dbd = new docsBuilder(Chart);

 			console.log("inside hook", document.querySelector('.demo'));
 			dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
 			document.querySelector("main").classList.add("hide");
 		});
 	}]
 };

 document.querySelector("#docs-link").addEventListener('click', function () {
 	document.querySelector("#home-page").classList.add("hide");
 	document.querySelector("main").classList.remove("hide");
 });

 }());
--- a/docs/docsify/style.css
+++ b/docs/docsify/style.css
@@ -1,3 +1,3 @@
 a {
 /* a {
 	color: red;
 }
 } */
--- a/docs/docsify/test.md
+++ b/docs/docsify/test.md
--- a/docs/docsify/vuestyle.css
+++ b/docs/docsify/vuestyle.css
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -40,11 +40,8 @@ fs.readFile('src/css/charts.scss', (err, css) => {
 export default [
 	{
 		input: 'src/js/index.js',
 		sourcemap: true,
 		output: [
 			{
 				file: 'docs/assets/js/frappe-charts.min.js',
 				format: 'iife',
 			},
 			{
 				file: pkg.browser,
 				format: 'iife',
@@ -80,42 +77,8 @@ export default [
 			uglify()
 		]
 	},
 	{
 		input: 'docs/assets/js/index.js',
 		output: [
 			{
 				file: 'docs/assets/js/index.min.js',
 				format: 'iife',
 			}
 		],
 		name: 'frappe',
 		plugins: [
 			postcssPlugin({
 				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/css/**'
 				]
 			}),
 			babel({
 				exclude: 'node_modules/**'
 			}),
 			replace({
 				exclude: 'node_modules/**',
 				ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
 			})
 		]
 	},


 	{
 		input: 'src/js/chart.js',
 		sourcemap: true,
@@ -154,11 +117,13 @@ export default [
 			// uglify()
 		],
 	},


 	{
 		input: 'docs/docsify/indexShadow.js',
 		input: 'docs/index.js',
 		output: [
 			{
 				file: 'docs/docsify/indexShadow.min.js',
 				file: 'docs/index.min.js',
 				format: 'iife',
 			}
 		],
@@ -168,6 +133,8 @@ export default [
 			})
 		]
 	},


 	{
 		input: 'src/js/chart.js',
 		output: [