[docs] full migration of demo to docsBuilder

dist/frappe-charts.esm.js

@@ -301,10 +301,6 @@ class SvgTip {
 	}
 }
 
-/**
- * Returns the value of a number upto 2 decimal places.
- * @param {Number} d Any number
- */
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }

docs/assets/css/index.css

@@ -54,7 +54,7 @@ section figure {
 .btn, .btn-group {
 	margin-bottom: 1rem;
 }
-.btn-group {
+.btn-group, .btn-action {
 	margin-right: 0.5rem;
 }
 h1 {

docs/assets/js/data.js

@@ -130,6 +130,69 @@ export const typeData = {
 	]
 };
 
+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"];
+
+const baseLength = 10;
+const fullLength = 30;
+
+let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
+let updateDataAllValues = Array.from({length: fullLength}, getRandom);
+
+// We're gonna be shuffling this
+let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
+
+let getUpdateArray = (sourceArray, length=10) => {
+	let indices = updateDataAllIndices.slice(0, length);
+	return indices.map((index) => sourceArray[index]);
+};
+
+let currentLastIndex = baseLength;
+
+export function getUpdateData() {
+	shuffle(updateDataAllIndices);
+	let value = getRandom();
+	let start = getRandom();
+	let 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
+			},
+		],
+	};
+}
+
+export function getAddUpdateData() {
+	if(currentLastIndex >= fullLength) return;
+
+	// TODO: Fix update on removal
+	currentLastIndex++;
+	let c = currentLastIndex -1;
+
+	return [updateDataAllLabels[c], [updateDataAllValues[c]]];
+
+	// updateChart.addDataPoint(
+	// 	updateDataAllLabels[index], [updateDataAllValues[index]]
+	// );
+}
+
 export const trendsData = {
 	labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
 		1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
@@ -154,6 +217,16 @@ export const moonData = {
 	diameters: [5262.4, 4820.6, 3637.4, 3121.6],
 };
 
+export const eventsData = {
+	labels: ["Ganymede", "Callisto", "Io", "Europa"],
+	datasets: [
+		{
+			"values": moonData.distances,
+			"formatted": moonData.distances.map(d => d*1000 + " km")
+		}
+	]
+};
+
 // const jupiterMoons = {
 // 	'Ganymede': {
 // 		mass: '14819000 x 10^16 kg',

docs/assets/js/demoConfig.js

@@ -1,8 +1,8 @@
-import { lineCompositeData, barCompositeData, typeData, trendsData, heatmapData } from './data';
+import { lineCompositeData, barCompositeData, typeData, getUpdateData,
+    getAddUpdateData, trendsData, eventsData, moonData, heatmapData } from './data';
 import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
 
-export default {
+export const lineComposite = {
-	lineComposite: {
     config: {
         title: "Fireball/Bolide Events - Yearly (reported)",
         data: lineCompositeData,
@@ -16,9 +16,9 @@ export default {
             dotSize: 8
         }
     }
-	},
+}
 
-	barComposite: {
+export const barComposite = {
     config: {
         data: barCompositeData,
         type: "bar",
@@ -32,10 +32,12 @@ export default {
             stacked: 1
         }
     }
-	},
+}
 
-    demoMain: {
+export const demoSections = [
+    {
         title: "Create a Chart",
+        name: "demo-main",
         contentBlocks: [
             {
                 type: "code",
@@ -121,10 +123,50 @@ export default {
         ]
     },
 
-    updateValues: { },
+    {
+        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: []
+                    }
+                ]
+            }
+        ]
+    },
 
-	trendsPlot: {
+	{
         title: "Plot Trends",
+        name: "trends-plot",
         contentBlocks: [
             {
                 type: "demo",
@@ -161,10 +203,58 @@ export default {
 
     },
 
-    stateChange: {},
+    {
+        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">
+                    <img class="moon-image" src="./assets/img/europa.jpg">
+                </div>
+                <div class="content-data mt1">
+                    <h6 class="moon-name">Europa</h6>
+                    <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
+                    <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>
+                    <p>Diameter: <span class="diameter">3121.6</span> km</p>
+                </div>`,
+                postSetup: (chart, figure, row) => {
+                    chart.parent.addEventListener('data-select', (e) => {
+                        let i = e.index;
+                        let 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: `  ...
+    isNavigable: 1, // Navigate across data points; default 0
+  ...
 
-	heatmap: {
+  chart.parent.addEventListener('data-select', (e) => {
+    update_moon_data(e.index); // e contains index and value of current datapoint
+  });`,
+            }
+        ]
+    },
+
+	{
         title: "And a Month-wise Heatmap",
+        name: "heatmap",
         contentBlocks: [
             {
                 type: "demo",
@@ -220,8 +310,10 @@ export default {
             }
         ],
     },
-    codePenDemo: {
+
+    {
         title: "Demo",
+        name: "codepen",
         contentBlocks: [
             {
                 type: "custom",
@@ -234,8 +326,9 @@ export default {
             }
         ]
     },
-    optionsList: {
+    {
         title: "Available Options",
+        name: "options",
         contentBlocks: [
             {
                 type: "code",
@@ -315,8 +408,9 @@ export default {
         ]
     },
 
-    installation: {
+    {
         title: "Install",
+        name: "installation",
         contentBlocks: [
             { type: "text", content: 'Install via npm' },
             { type: "code", lang: "console", content: `  npm install frappe-charts` },
@@ -341,4 +435,4 @@ export default {
             },
         ]
     }
-}
+]

docs/assets/js/docsBuilder.js

@@ -1,25 +1,30 @@
 import { $ } from '../../../src/js/utils/dom';
 import { toTitleCase } from '../../../src/js/utils/helpers';
 
-export class docSectionBuilder {
+export class docsBuilder {
 	constructor(LIB_OBJ) {
 		this.LIB_OBJ = LIB_OBJ;
 	}
 
-	setParent(parent) {
+	makeSection(parent, sys) {
-		// this.parent = parent;
+		return new docSection(this.LIB_OBJ, parent, sys);
-		this.section = parent;
 	}
+}
 
-	setSys(sys) {
+class docSection {
+	constructor(LIB_OBJ, parent, sys) {
+		this.LIB_OBJ = LIB_OBJ;
+		this.parent = parent;  // should be preferably a section
 		this.sys = sys;
 		this.blockMap = {};
+
+		this.make();
 	}
 
 	make() {
-		// const section = document.querySelector(this.section);
+		// const section = document.querySelector(this.parent);
 		let s = this.sys;
-		$.create('h6', { inside: this.section, innerHTML: s.title });
+		$.create('h6', { inside: this.parent, innerHTML: s.title });
 
 		s.contentBlocks.forEach((blockConf, index) => {
 			this.blockMap[index] = this.getBlock(blockConf);
@@ -34,14 +39,16 @@ export class docSectionBuilder {
 			throw new Error(`Unknown section block type '${blockConf.type}'.`);
 		}
 	}
+
 	getText(blockConf) {
 		return $.create('p', {
-			inside: this.section,
+			inside: this.parent,
 			innerHTML: blockConf.content
 		});
 	}
+
 	getCode(blockConf) {
-		let pre = $.create('pre', { inside: this.section });
+		let pre = $.create('pre', { inside: this.parent });
 		let lang = blockConf.lang || 'javascript';
 		let code = $.create('code', {
 			inside: pre,
@@ -49,21 +56,41 @@ export class docSectionBuilder {
 			innerHTML: blockConf.content
 		});
 	}
+
 	getCustom(blockConf) {
-		this.section.innerHTML +=  blockConf.html;
+		this.parent.innerHTML +=  blockConf.html;
 	}
+
 	getDemo(blockConf) {
-		let args = blockConf.config;
+		let bc = blockConf;
-		let figure = $.create('figure', { inside: this.section });
+		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;
+		}
 		this.libObj = new this.LIB_OBJ(figure, args);
 
-		this.getDemoOptions(blockConf.options, args, figure);
+		if(bc.postSetup) {
-		this.getDemoActions(blockConf.actions, args);
+			bc.postSetup(this.libObj, figure, row);
 		}
-	getDemoOptions(options, args, figure) {
+
+		this.getDemoOptions(bc.options, args, figure);
+		this.getDemoActions(bc.actions, args);
+	}
+
+	getDemoOptions(options=[], args={}, figure) {
 		options.forEach(o => {
 			const btnGroup = $.create('div', {
-				inside: this.section,
+				inside: this.parent,
 				className: `btn-group ${o.name}`
 			});
 			const mapKeys = o.mapKeys;
@@ -99,14 +126,14 @@ export class docSectionBuilder {
 		});
 	}
 
-	getDemoActions(actions, args) {
+	getDemoActions(actions=[], args={}) {
 		actions.forEach(o => {
 			let args = o.args || [];
 			$.create('button', {
-				inside: this.section,
+				inside: this.parent,
-				className: `btn btn-sm btn-secondary`,
+				className: `btn btn-action btn-sm btn-secondary`,
 				innerHTML: o.name,
-				onClick: () => {this.libObj[o.fn](...o.args);}
+				onClick: () => {this.libObj[o.fn](...args);}
 			});
 		});
 	}

docs/assets/js/index.js

@@ -1,179 +1,26 @@
-import { $ } from '../../../src/js/utils/dom';
+import { $, insertAfter } from '../../../src/js/utils/dom';
-import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
+import { fireballOver25, fireball_2_5, fireball_5_25 } from './data';
-import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
+import { lineComposite, barComposite, demoSections} from './demoConfig';
-	barCompositeData, typeData, trendsData, moonData } from './data';
+import { docsBuilder } from './docsBuilder';
-import dc from './demoConfig';
-import { docSectionBuilder } from './docSectionBuilder';
 
 let Chart = frappe.Chart; // eslint-disable-line no-undef
-let dcb = new docSectionBuilder(Chart);
+let dbd = new docsBuilder(Chart);
 
-let lineComposite = new Chart("#line-composite-1", dc.lineComposite.config);
+let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
-let barComposite = new Chart("#bar-composite-1", dc.barComposite.config);
+let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
 
-lineComposite.parent.addEventListener('data-select', (e) => {
+lineCompositeChart.parent.addEventListener('data-select', (e) => {
 	let i = e.index;
-	barComposite.updateDatasets([
+	barCompositeChart.updateDatasets([
 		fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
 	]);
 });
 
-let section = document.querySelector('.demo-main');
+let currentElement = document.querySelector('header');
-dcb.setParent(section);
-dcb.setSys(dc.demoMain);
-dcb.make();
 
-// Update values chart
+demoSections.forEach(sectionConf => {
-// ================================================================================
+	let sectionEl = $.create('section', { className: sectionConf.name });
-let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
+	insertAfter(sectionEl, currentElement);
-	"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
+	currentElement = sectionEl;
-	"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
+	dbd.makeSection(sectionEl, sectionConf);
-
-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
-// ================================================================================
-
-section = document.querySelector('.trends-plot');
-dcb.setParent(section);
-dcb.setSys(dc.trendsPlot);
-dcb.make();
-
-
-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
-// ================================================================================
-
-section = document.querySelector('.heatmap');
-dcb.setParent(section);
-dcb.setSys(dc.heatmap);
-dcb.make();
-
-section = document.querySelector('.codepen');
-dcb.setParent(section);
-dcb.setSys(dc.codePenDemo);
-dcb.make();
-
-section = document.querySelector('.options');
-dcb.setParent(section);
-dcb.setSys(dc.optionsList);
-dcb.make();
-
-section = document.querySelector('.installation');
-dcb.setParent(section);
-dcb.setSys(dc.installation);
-dcb.make();

docs/assets/js/index.min.js

@@ -193,6 +193,68 @@ $.create = function (tag, o) {
 
 // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
 
+
+
+
+function insertAfter(newNode, referenceNode) {
+	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+// 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"];
+
+
+
+
+// https://stackoverflow.com/a/11252167/6495043
+
+
+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;
+}
+
+// export function getMonthsBetween(startDate, endDate) {}
+
+
+
+
+
+
+
+
+
+
+
+// mutates
+
+
+// mutates
+function addDays(date, numberOfDays) {
+	date.setDate(date.getDate() + numberOfDays);
+}
+
 // Fixed 5-color theme,
 // More colors are difficult to parse visually
 
@@ -273,61 +335,6 @@ function toTitleCase(str) {
 	});
 }
 
-// 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"];
-
-
-
-
-// https://stackoverflow.com/a/11252167/6495043
-
-
-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;
-}
-
-// export function getMonthsBetween(startDate, endDate) {}
-
-
-
-
-
-
-
-
-
-
-
-// mutates
-
-
-// mutates
-function addDays(date, numberOfDays) {
-	date.setDate(date.getDate() + numberOfDays);
-}
-
 var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
 
 var lineCompositeData = {
@@ -401,6 +408,71 @@ var typeData = {
 	}]
 };
 
+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: [{
@@ -415,6 +487,16 @@ var moonData = {
 	diameters: [5262.4, 4820.6, 3637.4, 3121.6]
 };
 
+var eventsData = {
+	labels: ["Ganymede", "Callisto", "Io", "Europa"],
+	datasets: [{
+		"values": moonData.distances,
+		"formatted": moonData.distances.map(function (d) {
+			return d * 1000 + " km";
+		})
+	}]
+};
+
 // const jupiterMoons = {
 // 	'Ganymede': {
 // 		mass: '14819000 x 10^16 kg',
@@ -466,8 +548,7 @@ var heatmapData = {
 	end: end
 };
 
-var dc = {
+var lineComposite = {
-    lineComposite: {
     config: {
         title: "Fireball/Bolide Events - Yearly (reported)",
         data: lineCompositeData,
@@ -481,9 +562,9 @@ var dc = {
             dotSize: 8
         }
     }
-    },
+};
 
-    barComposite: {
+var barComposite = {
     config: {
         data: barCompositeData,
         type: "bar",
@@ -497,10 +578,11 @@ var dc = {
             stacked: 1
         }
     }
-    },
+};
 
-    demoMain: {
+var demoSections = [{
     title: "Create a Chart",
+    name: "demo-main",
     contentBlocks: [{
         type: "code",
         lang: "html",
@@ -543,12 +625,41 @@ var dc = {
         }],
         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: [{
-    updateValues: {},
+            name: "Random Data",
-
+            fn: "update",
-    trendsPlot: {
+            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: {
@@ -579,12 +690,39 @@ var dc = {
         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>',
-    stateChange: {},
+        postSetup: function postSetup(chart, figure, row) {
-
+            chart.parent.addEventListener('data-select', function (e) {
-    heatmap: {
+                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: {
@@ -618,25 +756,24 @@ var dc = {
         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  });'
     }]
-    },
+}, {
-    codePenDemo: {
     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>'
     }]
-    },
+}, {
-    optionsList: {
     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  '
     }]
-    },
+}, {
-
-    installation: {
     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",
@@ -646,8 +783,7 @@ var dc = {
         lang: "html",
         content: '  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;'
     }]
-    }
+}];
-};
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -655,33 +791,43 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var docSectionBuilder = function () {
+var docsBuilder = function () {
-	function docSectionBuilder(LIB_OBJ) {
+	function docsBuilder(LIB_OBJ) {
-		_classCallCheck(this, docSectionBuilder);
+		_classCallCheck(this, docsBuilder);
 
 		this.LIB_OBJ = LIB_OBJ;
 	}
 
-	_createClass(docSectionBuilder, [{
+	_createClass(docsBuilder, [{
-		key: 'setParent',
+		key: 'makeSection',
-		value: function setParent(parent) {
+		value: function makeSection(parent, sys) {
-			// this.parent = parent;
+			return new docSection(this.LIB_OBJ, parent, sys);
-			this.section = parent;
 		}
-	}, {
+	}]);
-		key: 'setSys',
+
-		value: function setSys(sys) {
+	return docsBuilder;
+}();
+
+var docSection = function () {
+	function docSection(LIB_OBJ, parent, sys) {
+		_classCallCheck(this, docSection);
+
+		this.LIB_OBJ = LIB_OBJ;
+		this.parent = parent; // should be preferably a section
 		this.sys = sys;
 		this.blockMap = {};
+
+		this.make();
 	}
-	}, {
+
+	_createClass(docSection, [{
 		key: 'make',
 		value: function make() {
 			var _this = this;
 
-			// const section = document.querySelector(this.section);
+			// const section = document.querySelector(this.parent);
 			var s = this.sys;
-			$.create('h6', { inside: this.section, innerHTML: s.title });
+			$.create('h6', { inside: this.parent, innerHTML: s.title });
 
 			s.contentBlocks.forEach(function (blockConf, index) {
 				_this.blockMap[index] = _this.getBlock(blockConf);
@@ -701,14 +847,14 @@ var docSectionBuilder = function () {
 		key: 'getText',
 		value: function getText(blockConf) {
 			return $.create('p', {
-				inside: this.section,
+				inside: this.parent,
 				innerHTML: blockConf.content
 			});
 		}
 	}, {
 		key: 'getCode',
 		value: function getCode(blockConf) {
-			var pre = $.create('pre', { inside: this.section });
+			var pre = $.create('pre', { inside: this.parent });
 			var lang = blockConf.lang || 'javascript';
 			var code = $.create('code', {
 				inside: pre,
@@ -719,26 +865,48 @@ var docSectionBuilder = function () {
 	}, {
 		key: 'getCustom',
 		value: function getCustom(blockConf) {
-			this.section.innerHTML += blockConf.html;
+			this.parent.innerHTML += blockConf.html;
 		}
 	}, {
 		key: 'getDemo',
 		value: function getDemo(blockConf) {
-			var args = blockConf.config;
+			var bc = blockConf;
-			var figure = $.create('figure', { inside: this.section });
+			var args = bc.config;
+			var figure = void 0,
+			    row = void 0;
+			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>\n\t\t\t\t\t<div class="col-sm-4"></div>'
+				});
+				figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
+				row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
+			}
 			this.libObj = new this.LIB_OBJ(figure, args);
 
-			this.getDemoOptions(blockConf.options, args, figure);
+			if (bc.postSetup) {
-			this.getDemoActions(blockConf.actions, args);
+				bc.postSetup(this.libObj, figure, row);
+			}
+
+			this.getDemoOptions(bc.options, args, figure);
+			this.getDemoActions(bc.actions, args);
 		}
 	}, {
 		key: 'getDemoOptions',
-		value: function getDemoOptions(options, args, figure) {
+		value: function getDemoOptions() {
+			var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
 			var _this2 = this;
 
+			var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+			var figure = arguments[2];
+
 			options.forEach(function (o) {
 				var btnGroup = $.create('div', {
-					inside: _this2.section,
+					inside: _this2.parent,
 					className: 'btn-group ' + o.name
 				});
 				var mapKeys = o.mapKeys;
@@ -777,191 +945,47 @@ var docSectionBuilder = function () {
 		}
 	}, {
 		key: 'getDemoActions',
-		value: function getDemoActions(actions, args) {
+		value: function getDemoActions() {
 			var _this3 = this;
 
+			var actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 			actions.forEach(function (o) {
+				var args = o.args || [];
 				$.create('button', {
-					inside: _this3.section,
+					inside: _this3.parent,
-					className: 'btn btn-sm btn-secondary',
+					className: 'btn btn-action btn-sm btn-secondary',
 					innerHTML: o.name,
 					onClick: function onClick() {
 						var _libObj;
 
-						(_libObj = _this3.libObj)[o.fn].apply(_libObj, _toConsumableArray(o.args));
+						(_libObj = _this3.libObj)[o.fn].apply(_libObj, _toConsumableArray(args));
 					}
 				});
 			});
 		}
 	}]);
 
-	return docSectionBuilder;
+	return docSection;
 }();
 
 var Chart = frappe.Chart; // eslint-disable-line no-undef
-var dcb = new docSectionBuilder(Chart);
+var dbd = new docsBuilder(Chart);
 
-var lineComposite = new Chart("#line-composite-1", dc.lineComposite.config);
+var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
-var barComposite = new Chart("#bar-composite-1", dc.barComposite.config);
+var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
 
-lineComposite.parent.addEventListener('data-select', function (e) {
+lineCompositeChart.parent.addEventListener('data-select', function (e) {
 	var i = e.index;
-	barComposite.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
+	barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
 });
 
-var section = document.querySelector('.demo-main');
+var currentElement = document.querySelector('header');
-dcb.setParent(section);
-dcb.setSys(dc.demoMain);
-dcb.make();
 
-// Update values chart
+demoSections.forEach(function (sectionConf) {
-// ================================================================================
+	var sectionEl = $.create('section', { className: sectionConf.name });
-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"];
+	insertAfter(sectionEl, currentElement);
-
+	currentElement = sectionEl;
-var getRandom = function getRandom() {
+	dbd.makeSection(sectionEl, sectionConf);
-	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
-// ================================================================================
-
-section = document.querySelector('.trends-plot');
-dcb.setParent(section);
-dcb.setSys(dc.trendsPlot);
-dcb.make();
-
-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
-// ================================================================================
-
-section = document.querySelector('.heatmap');
-dcb.setParent(section);
-dcb.setSys(dc.heatmap);
-dcb.make();
-
-section = document.querySelector('.codepen');
-dcb.setParent(section);
-dcb.setSys(dc.codePenDemo);
-dcb.make();
-
-section = document.querySelector('.options');
-dcb.setParent(section);
-dcb.setSys(dc.optionsList);
-dcb.make();
-
-section = document.querySelector('.installation');
-dcb.setParent(section);
-dcb.setSys(dc.installation);
-dcb.make();
-
 }());

docs/index.html

@@ -32,54 +32,7 @@
       <figure id="bar-composite-1" class="border"></figure>
     </header>
 
-    <section class="demo-main"></section>
+    <!-- Generated content goes here -->
-
-    <section>
-      <h6>Update Values</h6>
-      <div id="chart-update" class="border"></div>
-
-      <div class="chart-update-buttons mt-1 mx-auto" role="group">
-        <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
-        <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
-        <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
-        <button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
-      </div>
-    </section>
-
-    <section class="trends-plot"></section>
-
-    <section>
-      <h6>Listen to state change</h6>
-      <div class="row">
-        <div class="col-sm-8">
-          <div id="chart-events" class="border"></div>
-        </div>
-        <div class="col-sm-4 chart-events-data">
-          <div class="image-container border">
-            <img class="moon-image" src="./assets/img/europa.jpg">
-          </div>
-          <div class="content-data mt1">
-            <h6 class="moon-name">Europa</h6>
-            <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
-            <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>
-            <p>Diameter: <span class="diameter">3121.6</span> km</p>
-          </div>
-        </div>
-      </div>
-      <pre><code class="hljs javascript mt1">  ...
-  isNavigable: 1, // Navigate across data points; default 0
-  ...
-
-  chart.parent.addEventListener('data-select', (e) => {
-    update_moon_data(e.index); // e contains index and value of current datapoint
-  });</code></pre>
-    </section>
-
-    <section class="heatmap"></section>
-
-    <section class="codepen"></section>
-    <section class="options"></section>
-    <section class="installation"></section>
 
     <section class="text-center">
       <!-- Closing -->

src/js/utils/dom.js

@@ -135,3 +135,7 @@ export function activate($parent, $child, commonSelector, activeClass='active',
 
 	$child.classList.add(activeClass);
 }
+
+export function insertAfter(newNode, referenceNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}