[docs] use Vue component demos in markdown itself

docs/assets/js/data.js

@@ -277,33 +277,3 @@ export const heatmapData = {
 	start: start,
 	end: end
 };
-
-export const sampleData = {
-	0: {
-		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-		datasets: [
-			{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
-		]
-	},
-	1: {
-		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-		datasets: [
-			{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
-			{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
-		]
-	},
-	2: {
-		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
-		datasets: [
-			{ values: [300, 250, 720, 560, 370, 610, 690, 410,
-				370, 480, 620, 260, 170, 510, 630, 710] }
-		]
-	},
-	3: {
-		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-		datasets: [
-			{ values: [300, 250, 720, 560, 370, 610, 690, 410,
-				370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }
-		]
-	}
-}

docs/basic/basic_chart.md

@@ -20,14 +20,22 @@ new frappe.Chart( "#chart", {
     colors: ['red']
 });
 ```
-<div class="demo" id="bar-basic-1"></div>
+<chart-demo
+    data="0"
+    v-bind:config="{ type: 'bar', height: 140, colors:['red'] }">
+</chart-demo>
+
 
 And similarly, a `line` chart is data-wise homomorphic to a bar chart:
 
 ```js
 type:'line'
 ```
-<div class="demo" id="line-basic-1"></div>
+<chart-demo
+    data="0"
+    v-bind:config="{ type: 'line', height: 140, colors:['red'] }">
+</chart-demo>
+
 
 ## Adding more datasets
 
@@ -42,7 +50,22 @@ data: {
     ]
 }
 ```
-<div class="demo" id="multi-dataset-line-bar"></div>
+<chart-demo data="1" v-bind:config="{
+        type: 'line',
+        height: 200,
+        colors:['green', 'light-green']
+    }"
+    v-bind:options="[
+        {
+            name: 'type',
+            path: ['type'],
+            type: 'string',
+            states: { 'Line': 'line', 'Bar': 'bar', },
+            activeState: 'Mixed'
+        }
+    ]">
+</chart-demo>
+
 
 ## Responsiveness
 
@@ -56,7 +79,25 @@ barOptions: {
 },
 ```
 Try resizing the window to see the effect, with different ratio values.
-<div class="demo" id="bar-barwidth"></div>
+
+<chart-demo data="2" v-bind:config="{
+        type: 'bar',
+        height: 140,
+        colors: ['orange'],
+        axisOptions: { xAxisMode: 'tick' },
+        barOptions: { spaceRatio: 0.2 },
+    }"
+    v-bind:options="[
+        {
+            name: 'barOptions',
+            path: ['barOptions', 'spaceRatio'],
+            type: 'number',
+            numberOptions: { min: 0.1, max: 1.9, step: 0.1 },
+            activeState: 0.2
+        }
+    ]">
+</chart-demo>
+
 
 ## More Tweaks
 
@@ -67,7 +108,16 @@ axisOptions: {
 	xAxisMode: 'tick' // default: 'span'
 },
 ```
-<div class="demo" id="bar-axis-tick"></div>
+<chart-demo
+    data="2"
+    v-bind:config="{
+        type: 'bar',
+        height: 140,
+        colors:['blue'],
+        axisOptions: { xAxisMode: 'tick' }
+    }">
+</chart-demo>
+
 
 Just like bar width, we can set the <b>dot size</b> on a line graph, with the [`dotSize`]() property in [`lineOptions`]().
 
@@ -76,6 +126,23 @@ lineOptions: {
 	dotSize: 8 // default: 4
 },
 ```
-<div class="demo" id="line-dotsize"></div>
+<chart-demo data="2" v-bind:config="{
+        type: 'line',
+        height: 140,
+        colors:['orange'],
+        axisOptions: { xAxisMode: 'tick' },
+        lineOptions: { dotSize: 8 }
+    }"
+    v-bind:options="[
+        {
+            name: 'lineOptions',
+            path: ['lineOptions', 'dotSize'],
+            type: 'number',
+            numberOptions: { min: 3, max: 10, step: 1 },
+            activeState: 8
+        }
+    ]">
+</chart-demo>
+
 
 These were some of the basic toggles to a chart; there are quite a few line options to go with, particularly to create [regions](). We'll look at those in next section.

docs/data.js

@@ -0,0 +1,29 @@
+const sampleData = {
+	"0": {
+		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+		datasets: [
+			{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
+		]
+	},
+	"1": {
+		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+		datasets: [
+			{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
+			{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
+		]
+	},
+	"2": {
+		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
+		datasets: [
+			{ values: [300, 250, 720, 560, 370, 610, 690, 410,
+				370, 480, 620, 260, 170, 510, 630, 710] }
+		]
+	},
+	"3": {
+		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+		datasets: [
+			{ values: [300, 250, 720, 560, 370, 610, 690, 410,
+				370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }
+		]
+	}
+}

docs/demoBuilder.js

@@ -0,0 +1,217 @@
+function $(expr, con) {
+	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
+}
+
+$.create = (tag, o) => {
+	var element = document.createElement(tag);
+
+	for (var i in o) {
+		var val = o[i];
+
+		if (i === "inside") {
+			$(val).appendChild(element);
+		}
+		else if (i === "around") {
+			var ref = $(val);
+			ref.parentNode.insertBefore(element, ref);
+			element.appendChild(ref);
+
+		} else if (i === "onClick" ) {
+			element.addEventListener('click', val);
+
+		} else if (i === "onInput" ) {
+			element.addEventListener('input', function(e) {
+				val(element.value);
+			});
+
+		} else if (i === "styles") {
+			if(typeof val === "object") {
+				Object.keys(val).map(prop => {
+					element.style[prop] = val[prop];
+				});
+			}
+		} else if (i in element ) {
+			element[i] = val;
+		}
+		else {
+			element.setAttribute(i, val);
+		}
+	}
+
+	return element;
+};
+
+function toTitleCase(str) {
+    return str.replace(/\w*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+}
+
+class demoBuilder {
+	constructor(LIB_OBJ) {
+		this.LIB_OBJ = LIB_OBJ;
+	}
+
+	makeSection(parent, sys) {
+		return new docSection(this.LIB_OBJ, parent, sys);
+	}
+}
+
+class docSection {
+	constructor(LIB_OBJ, parent, sys) {
+		this.LIB_OBJ = LIB_OBJ;
+		this.parent = parent;
+		this.sys = sys;
+		this.blockMap = {};
+		this.demos = [];
+
+		this.make();
+	}
+
+	make() {
+		// const section = document.querySelector(this.parent);
+		let s = this.sys;
+		if(s.title) {
+			$.create('h6', { inside: this.parent, innerHTML: s.title });
+		}
+
+		if(s.contentBlocks) {
+			s.contentBlocks.forEach((blockConf, index) => {
+				this.blockMap[index] = this.getBlock(blockConf);
+			});
+		} else {
+			// TODO:
+			this.blockMap['test'] = this.getDemo(s);
+		}
+	}
+
+	getBlock(blockConf) {
+		let fnName = 'get' + toTitleCase(blockConf.type);
+		if(this[fnName]) {
+			return this[fnName](blockConf);
+		} else {
+			throw new Error(`Unknown section block type '${blockConf.type}'.`);
+		}
+	}
+
+	getText(blockConf) {
+		return $.create('p', {
+			inside: this.parent,
+			className: 'new-context',
+			innerHTML: blockConf.content
+		});
+	}
+
+	getCode(blockConf) {
+		let pre = $.create('pre', { inside: this.parent });
+		let lang = blockConf.lang || 'javascript';
+		let code = $.create('code', {
+			inside: pre,
+			className: `hljs ${lang}`,
+			innerHTML: blockConf.content
+		});
+	}
+
+	getCustom(blockConf) {
+		this.parent.innerHTML +=  blockConf.html;
+	}
+
+	getDemo(blockConf) {
+		let bc = blockConf;
+		let args = bc.config;
+
+		let figure, row;
+		if(!bc.sideContent) {
+			figure = $.create('figure', { inside: this.parent });
+		} else {
+			row = $.create('div', {
+				inside: this.parent,
+				className: "row",
+				innerHTML: `<div class="col-sm-8"></div>
+					<div class="col-sm-4"></div>`,
+			});
+			figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
+			row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
+		}
+
+		let libObj = new this.LIB_OBJ(figure, args);
+		let demoIndex = this.demos.length;
+		this.demos.push(libObj);
+
+		if(bc.postSetup) {
+			bc.postSetup(this.demos[demoIndex], figure, row);
+		}
+
+		this.getDemoOptions(demoIndex, bc.options, args, figure);
+		this.getDemoActions(demoIndex, bc.actions, args);
+	}
+
+	getDemoOptions(demoIndex, options=[], args={}, figure) {
+		options.forEach(o => {
+			const btnGroup = $.create('div', {
+				inside: this.parent,
+				className: `btn-group ${o.name}`
+			});
+			const mapKeys = o.mapKeys;
+
+			if(o.type === "number") {
+				let numOpts = o.numberOptions;
+
+				const inputGroup = $.create('input', {
+					inside: btnGroup,
+					className: `form-control`,
+					type: "range",
+					min: numOpts.min,
+					max: numOpts.max,
+					step: numOpts.step,
+					value: o.activeState ? o.activeState : 0,
+					// (max - min)/2
+					onInput: (value) => {
+						args[o.path[0]][o.path[1]] = value;
+
+						this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
+					}
+				});
+
+			} else if(["map", "string"].includes(o.type)) {
+				args[o.path[0]] = {};
+
+				Object.keys(o.states).forEach(key => {
+					let state = o.states[key];
+					let activeClass = key === o.activeState ? 'active' : '';
+
+					let button = $.create('button', {
+						inside: btnGroup,
+						className: `btn btn-sm btn-secondary ${activeClass}`,
+						innerHTML: key,
+						onClick: (e) => {
+							// map
+							if(o.type === "map") {
+								mapKeys.forEach((attr, i) => {
+									args[o.path[0]][attr] = state[i];
+								})
+							} else {
+								// boolean, string, number, object
+								args[o.path[0]] = state;
+							}
+							this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
+						}
+					});
+
+					if(activeClass) { button.click(); }
+				});
+			}
+		});
+	}
+
+	getDemoActions(demoIndex, actions=[], args={}) {
+		actions.forEach(o => {
+			let args = o.args || [];
+			$.create('button', {
+				inside: this.parent,
+				className: `btn btn-action btn-sm btn-secondary`,
+				innerHTML: o.name,
+				onClick: () => {this.demos[demoIndex][o.fn](...args);}
+			});
+		});
+	}
+}
+

docs/demoRegistry.js

@@ -1,141 +0,0 @@
-import { sampleData, trendsData } from './assets/js/data';
-
-export const demoRegistry = {
-	'bar-basic-1': {
-		config: {
-			data: sampleData[0],
-			type: 'bar',
-			height: 140,
-			colors: ['red'],
-		}
-	},
-
-	'line-basic-1': {
-		config: {
-			data: sampleData[0],
-			type: 'line',
-			height: 140,
-			colors: ['red'],
-		}
-	},
-
-	'bar-axis-tick': {
-		config: {
-			data: sampleData[2],
-			type: 'bar',
-			height: 140,
-			colors: ['blue'],
-			axisOptions: {
-				xAxisMode: "tick",
-			},
-		},
-	},
-
-	'bar-barwidth': {
-		config: {
-			data: sampleData[3],
-			type: 'bar',
-			height: 140,
-			colors: ['orange'],
-			axisOptions: {
-				xAxisMode: "tick"
-			},
-			barOptions: {
-				spaceRatio: 0.2
-			},
-		},
-		options: [
-			{
-				name: "barOptions",
-				path: ["barOptions", "spaceRatio"],
-				type: "number",
-				numberOptions: {
-					min: 0.1,
-					max: 1.9,
-					step: 0.1,
-				},
-				activeState: 0.2
-			}
-		]
-	},
-
-	'line-dotsize': {
-		config: {
-			data: sampleData[2],
-			type: 'line',
-			height: 140,
-			colors: ['orange'],
-			axisOptions: {
-				xAxisMode: "tick"
-			},
-			lineOptions: {
-				dotSize: 8
-			}
-		},
-		options: [
-			{
-				name: "lineOptions",
-				path: ["lineOptions", "dotSize"],
-				type: "number",
-				numberOptions: {
-					min: 3,
-					max: 10,
-					step: 1
-				},
-				activeState: 8
-			}
-		]
-	},
-
-	'line-trends-region-toggle': {
-		config: {
-			data: trendsData,
-			type: 'line',
-			height: 180,
-			colors: ['violet'],
-			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"
-			}
-		]
-	},
-
-	'multi-dataset-line-bar': {
-		config: {
-			data: sampleData[1],
-			type: 'line',
-			height: 200,
-			colors: ['green', 'light-green'],
-		},
-		options: [
-			{
-				name: "type",
-				path: ["type"],
-				type: "string",
-				states: {
-					"Line": 'line',
-					"Bar": 'bar',
-				},
-				activeState: "Mixed"
-			}
-		],
-	},
-
-	// '': {},
-};

docs/index.html

@@ -80,13 +80,48 @@
   <div id="app"></div>
 
   <!-- SCRIPTS -->
+
+  <!-- Home page script -->
   <script src="index.min.js"></script>
+
+  <!-- Docs section script -->
+  <script src="data.js"></script>
+  <script src="demoBuilder.js"></script>
+  <script src="frappe-charts.min.iife.js"></script>
+  <script src="//unpkg.com/vue/dist/vue.js"></script>
   <script>
-    window.$docsify.subMaxLevel = 2;
-    window.$docsify.search = {
-      placeholder: 'Search Docs ...',
-      noData: 'No Results',
-      depth: 2
+
+    let dbd = new demoBuilder(frappe.Chart);
+
+    Vue.component('chart-demo', {
+      template: '<div class="chart-demo"></div>',
+      props: ['data', 'config', 'options', 'actions'],
+      mounted: function() {
+        let config = this.config;
+        config.data = sampleData[this.data];
+        var demoConfig = {
+          config: config,
+          options: this.options,
+          actions: this.actions
+        };
+
+        dbd.makeSection(this.$el, demoConfig);
+      }
+    });
+
+    new Vue({ el: '#app' });
+
+    window.$docsify = {
+      name: 'frappe-charts',
+      // repo: 'https://github.com/frappe/charts',
+      loadSidebar: true,
+      subMaxLevel: 2,
+      executeScript: true,
+      search: {
+        placeholder: 'Search Docs ...',
+        noData: 'No Results',
+        depth: 2
+      }
     };
   </script>
 

docs/index.js

@@ -29,31 +29,3 @@ if(document.querySelectorAll('#line-composite-1').length
 		dbd.makeSection(sectionEl, sectionConf);
 	});
 }
-
-window.$docsify = {
-	name: 'frappe-charts',
-	// repo: 'https://github.com/frappe/charts',
-	loadSidebar: true,
-	subMaxLevel: 2,
-	executeScript: true,
-	plugins: [
-		function(hook, vm) {
-			hook.doneEach(function() {
-				let demos = document.querySelectorAll('.demo')
-
-				for (var i = 0; i < demos.length; ++i) {
-					let el = demos[i];
-					let id = el.getAttribute("id");
-					dbd.makeSection(el, demoRegistry[id]);
-				}
-
-				// 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");
-});

docs/index.min.js

@@ -136,6 +136,10 @@ $.create = function (tag, o) {
 			element.appendChild(ref);
 		} else if (i === "onClick") {
 			element.addEventListener('click', val);
+		} else if (i === "onInput") {
+			element.addEventListener('input', function (e) {
+				val(element.value);
+			});
 		} else if (i === "styles") {
 			if ((typeof val === "undefined" ? "undefined" : _typeof(val)) === "object") {
 				Object.keys(val).map(function (prop) {
@@ -397,43 +401,54 @@ var docSection = function () {
 				});
 				var mapKeys = o.mapKeys;
 
-				if (o.type === "map") {
-					args[o.path[0]] = {};
-				}
-
-				var inputGroup = $.create('input', {
-					inside: btnGroup
-					// className: `form-control`,
-					// innerHTML: `<input type="text" class="form-control" placeholder="Username"
-					// 	aria-label="Username" aria-describedby="basic-addon1">`
-				});
-
-				Object.keys(o.states).forEach(function (key) {
-					var state = o.states[key];
-					var activeClass = key === o.activeState ? 'active' : '';
+				if (o.type === "number") {
+					var numOpts = o.numberOptions;
 
-					var button = $.create('button', {
+					var inputGroup = $.create('input', {
 						inside: btnGroup,
-						className: 'btn btn-sm btn-secondary ' + activeClass,
-						innerHTML: key,
-						onClick: function onClick(e) {
-							// map
-							if (o.type === "map") {
-								mapKeys.forEach(function (attr, i) {
-									args[o.path[0]][attr] = state[i];
-								});
-							} else {
-								// boolean, string, number, object
-								args[o.path[0]] = state;
-							}
+						className: 'form-control',
+						type: "range",
+						min: numOpts.min,
+						max: numOpts.max,
+						step: numOpts.step,
+						value: o.activeState ? o.activeState : 0,
+						// (max - min)/2
+						onInput: function onInput(value) {
+							args[o.path[0]][o.path[1]] = value;
+
 							_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
 						}
 					});
+				} else if (["map", "string"].includes(o.type)) {
+					args[o.path[0]] = {};
 
-					if (activeClass) {
-						button.click();
-					}
-				});
+					Object.keys(o.states).forEach(function (key) {
+						var state = o.states[key];
+						var activeClass = key === o.activeState ? 'active' : '';
+
+						var button = $.create('button', {
+							inside: btnGroup,
+							className: 'btn btn-sm btn-secondary ' + activeClass,
+							innerHTML: key,
+							onClick: function onClick(e) {
+								// map
+								if (o.type === "map") {
+									mapKeys.forEach(function (attr, i) {
+										args[o.path[0]][attr] = state[i];
+									});
+								} else {
+									// boolean, string, number, object
+									args[o.path[0]] = state;
+								}
+								_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
+							}
+						});
+
+						if (activeClass) {
+							button.click();
+						}
+					});
+				}
 			});
 		}
 	}, {
@@ -631,6 +646,10 @@ $$1.create = function (tag, o) {
 			element.appendChild(ref);
 		} else if (i === "onClick") {
 			element.addEventListener('click', val);
+		} else if (i === "onInput") {
+			element.addEventListener('input', function (e) {
+				val(element.value);
+			});
 		} else if (i === "styles") {
 			if ((typeof val === "undefined" ? "undefined" : _typeof$2(val)) === "object") {
 				Object.keys(val).map(function (prop) {
@@ -739,7 +758,7 @@ var AXIS_DATASET_CHART_TYPES$1 = ['line', 'bar'];
 var AXIS_LEGEND_BAR_SIZE$1 = 100;
 
 var BAR_CHART_SPACE_RATIO$1 = 1;
-var MIN_BAR_PERCENT_HEIGHT$1 = 0.01;
+var MIN_BAR_PERCENT_HEIGHT$1 = 0.02;
 
 var LINE_CHART_DOT_SIZE$1 = 4;
 var DOT_OVERLAY_SIZE_INCR$1 = 4;
@@ -5386,161 +5405,6 @@ var heatmapData = {
 	end: end
 };
 
-var sampleData = {
-	0: {
-		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-		datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]
-	},
-	1: {
-		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-		datasets: [{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] }, { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }]
-	},
-	2: {
-		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
-		datasets: [{ values: [300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710] }]
-	},
-	3: {
-		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-		datasets: [{ values: [300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }]
-	}
-};
-
-var demoRegistry = {
-	'bar-basic-1': {
-		config: {
-			data: sampleData[0],
-			type: 'bar',
-			height: 140,
-			colors: ['red']
-		}
-	},
-
-	'line-basic-1': {
-		config: {
-			data: sampleData[0],
-			type: 'line',
-			height: 140,
-			colors: ['red']
-		}
-	},
-
-	'bar-axis-tick': {
-		config: {
-			data: sampleData[2],
-			type: 'bar',
-			height: 140,
-			colors: ['blue'],
-			axisOptions: {
-				xAxisMode: "tick"
-			}
-		}
-	},
-
-	'bar-barwidth': {
-		config: {
-			data: sampleData[3],
-			type: 'bar',
-			height: 140,
-			colors: ['orange'],
-			axisOptions: {
-				xAxisMode: "tick"
-			},
-			barOptions: {
-				spaceRatio: 0.2
-			}
-		},
-		options: [{
-			name: "barOptions",
-			path: ["barOptions"],
-			type: "map",
-			mapKeys: ['spaceRatio'],
-			states: {
-				"0.2": [0.2],
-				"0.5": [0.5],
-				"1": [1],
-				"1.5": [1.5]
-			},
-			activeState: "0.2"
-		}]
-	},
-
-	'line-dotsize': {
-		config: {
-			data: sampleData[2],
-			type: 'line',
-			height: 140,
-			colors: ['orange'],
-			axisOptions: {
-				xAxisMode: "tick"
-			},
-			lineOptions: {
-				dotSize: 8
-			}
-		},
-		options: [{
-			name: "lineOptions",
-			path: ["lineOptions"],
-			type: "map",
-			mapKeys: ['dotSize'],
-			states: {
-				"3": [3],
-				"4": [4],
-				"8": [8],
-				"10": [10]
-			},
-			activeState: "8"
-		}]
-	},
-
-	'line-trends-region-toggle': {
-		config: {
-			data: trendsData,
-			type: 'line',
-			height: 180,
-			colors: ['violet'],
-			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"
-		}]
-	},
-
-	'multi-dataset-line-bar': {
-		config: {
-			data: sampleData[1],
-			type: 'line',
-			height: 200,
-			colors: ['green', 'light-green']
-		},
-		options: [{
-			name: "type",
-			path: ["type"],
-			type: "string",
-			states: {
-				"Line": 'line',
-				"Bar": 'bar'
-			},
-			activeState: "Mixed"
-		}]
-	}
-
-	// '': {},
-};
-
 var lineComposite = {
     config: {
         title: "Fireball/Bolide Events - Yearly (reported)",
@@ -5803,20 +5667,34 @@ window.$docsify = {
 	// repo: 'https://github.com/frappe/charts',
 	loadSidebar: true,
 	subMaxLevel: 2,
-	executeScript: true,
-	plugins: [function (hook, vm) {
-		hook.doneEach(function () {
-			var demos = document.querySelectorAll('.demo');
-
-			for (var i = 0; i < demos.length; ++i) {
-				var el = demos[i];
-				var id = el.getAttribute("id");
-				dbd.makeSection(el, demoRegistry[id]);
-			}
-
-			// document.querySelector("main").classList.add("hide");
-		});
-	}]
+	executeScript: true
+	// plugins: [
+	// 	function(hook, vm) {
+	// 		hook.doneEach(function() {
+	// 			let demos = document.querySelectorAll('.demo')
+
+	// 			for (var i = 0; i < demos.length; ++i) {
+	// 				let el = demos[i];
+	// 				let id = el.getAttribute("id");
+	// 				dbd.makeSection(el, demoRegistry[id]);
+	// 			}
+
+	// 		});
+
+	// 		// hook.ready(function() {
+	// 		// 	let scripts = document.querySelectorAll('script');
+	// 		// 	for (var i = 0; i < scripts.length; ++i) {
+	// 		// 		let el = scripts[i];
+	// 		// 		let id = el.getAttribute("id");
+
+	// 		// 		let demoDiv = $.create('div', {className: `${id}`});
+	// 		// 		insertAfter(demoDiv, el);
+	// 		// 		console.log(demoStore);
+	// 		// 		dbd.makeSection(demoDiv, demoStore[id]);
+	// 		// 	}
+	// 		// });
+	// 	}
+	// ]
 };
 
 document.querySelector("#docs-link").addEventListener('click', function () {