[docs] migrate more sections, demos and install

dist/frappe-charts.esm.js

@@ -301,6 +301,10 @@ 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

@@ -51,8 +51,11 @@ section figure {
 	border-radius: 3px;
 	overflow: auto;
 }
-section code {
-	margin-top: 1rem;   /* SAME 2 */
+.btn, .btn-group {
+	margin-bottom: 1rem;
+}
+.btn-group {
+	margin-right: 0.5rem;
 }
 h1 {
 	font-size: 3.5rem;

docs/assets/js/demoConfig.js

@@ -1,4 +1,4 @@
-import { lineCompositeData, barCompositeData, trendsData, heatmapData } from './data';
+import { lineCompositeData, barCompositeData, typeData, trendsData, heatmapData } from './data';
 import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
 
 export default {
@@ -35,12 +35,8 @@ export default {
 	},
 
     demoMain: {
-        title: "Creating a Chart",
+        title: "Create a Chart",
         contentBlocks: [
-            {
-                type: "text",
-                content: `Booga wooga wooga Booga Booga wooga`,
-            },
             {
                 type: "code",
                 lang: "html",
@@ -94,7 +90,7 @@ export default {
                 type: "demo",
                 config: {
                     title: "My Awesome Chart",
-                    data: "typeData",
+                    data: typeData,
                     type: "axis-mixed",
                     height: 300,
                     colors: ["purple", "magenta", "light-blue"],
@@ -105,20 +101,19 @@ export default {
                         formatTooltipY: d => d + ' pts',
                     }
                 },
-                sideContent: {},
                 options: [
                     {
-                        name: "lineOptions",
-                        path: ["lineOptions"],
-                        type: "map",
-                        mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
+                        name: "type",
+                        path: ["type"],
+                        type: "string",
                         states: {
-                            "Line": [0, 1, 0, 0],
-                            "Dots": [1, 0, 0, 0],
-                            "HeatLine": [0, 1, 1, 0],
-                            "Region": [0, 1, 0, 1]
+                            "Mixed": 'axis-mixed',
+                            "Line": 'line',
+                            "Bar": 'bar',
+                            "Pie Chart": 'pie',
+                            "Percentage Chart": 'percentage',
                         },
-                        activeState: "HeatLine"
+                        activeState: "Mixed"
                     }
                 ],
                 actions: [{ name: "Export ...", fn: "export", args: [] }],
@@ -224,5 +219,126 @@ export default {
   });`,
             }
         ],
+    },
+    codePenDemo: {
+        title: "Demo",
+        contentBlocks: [
+            {
+                type: "custom",
+                html: `<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
+                    data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
+                    See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
+                    by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
+                    <a href="https://codepen.io">CodePen</a>.
+                </p>`
+            }
+        ]
+    },
+    optionsList: {
+        title: "Available Options",
+        contentBlocks: [
+            {
+                type: "code",
+                lang: "javascript",
+                content: `
+  ...
+  {
+    data: {
+      labels: [],
+      datasets: [],
+      yRegions: [],
+      yMarkers: []
+    }
+    title: '',
+    colors: [],
+    height: 200,
+
+    tooltipOptions: {
+      formatTooltipX: d => (d + '').toUpperCase(),
+      formatTooltipY: d => d + ' pts',
+    }
+
+    // Axis charts
+    isNavigable: 1,        // default: 0
+    valuesOverPoints: 1,   // default: 0
+    barOptions: {
+      spaceRatio: 1        // default: 0.5
+      stacked: 1           // default: 0
+    }
+
+    lineOptions: {
+      dotSize: 6,          // default: 4
+      hideLine: 0,         // default: 0
+      hideDots: 1,         // default: 0
+      heatline: 1,         // default: 0
+      regionFill: 1        // default: 0
+    }
+
+    axisOptions: {
+      yAxisMode: 'span',   // Axis lines, default
+      xAxisMode: 'tick',   // No axis lines, only short ticks
+      xIsSeries: 1         // Allow skipping x values for space
+                           // default: 0
+    },
+
+    // Pie/Percentage charts
+    maxLegendPoints: 6,    // default: 20
+    maxSlices: 10,         // default: 20
+
+    // Percentage chart
+    barOptions: {
+      height: 15           // default: 20
+      depth: 5             // default: 2
+    }
+
+    // Heatmap
+    discreteDomains: 1,    // default: 1
+  }
+  ...
+
+  // Updating values
+  chart.update(data);
+
+  // Axis charts:
+  chart.addDataPoint(label, valueFromEachDataset, index)
+  chart.removeDataPoint(index)
+  chart.updateDataset(datasetValues, index)
+
+  // Exporting
+  chart.export();
+
+  // Unbind window-resize events
+  chart.unbindWindowEvents();
+
+  `
+            }
+        ]
+    },
+
+    installation: {
+        title: "Install",
+        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
+                        // or
+  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;`,
+            },
+        ]
     }
 }

docs/assets/js/docSectionBuilder.js

@@ -1,4 +1,5 @@
 import { $ } from '../../../src/js/utils/dom';
+import { toTitleCase } from '../../../src/js/utils/helpers';
 
 export class docSectionBuilder {
 	constructor(LIB_OBJ) {
@@ -26,26 +27,31 @@ export class docSectionBuilder {
 	}
 
 	getBlock(blockConf) {
-		let block;
-		let type = blockConf.type;
-
-		if(type === "text") {
-			block = this.getText(blockConf);
-		} else if(type === "code") {
-			block = this.getCode(blockConf);
+		let fnName = 'get' + toTitleCase(blockConf.type);
+		if(this[fnName]) {
+			return this[fnName](blockConf);
 		} else {
-			block = this.getDemo(blockConf);
+			throw new Error(`Unknown section block type '${blockConf.type}'.`);
 		}
 	}
-	getText(blockConf) {}
+	getText(blockConf) {
+		return $.create('p', {
+			inside: this.section,
+			innerHTML: blockConf.content
+		});
+	}
 	getCode(blockConf) {
 		let pre = $.create('pre', { inside: this.section });
+		let lang = blockConf.lang || 'javascript';
 		let code = $.create('code', {
 			inside: pre,
-			className: `hljs ${blockConf.lang}`,
+			className: `hljs ${lang}`,
 			innerHTML: blockConf.content
 		});
 	}
+	getCustom(blockConf) {
+		this.section.innerHTML +=  blockConf.html;
+	}
 	getDemo(blockConf) {
 		let args = blockConf.config;
 		let figure = $.create('figure', { inside: this.section });
@@ -81,7 +87,7 @@ export class docSectionBuilder {
 								args[o.path[0]][attr] = state[i];
 							})
 						} else {
-							// boolean, number, object
+							// boolean, string, number, object
 							args[o.path[0]] = state;
 						}
 						this.libObj = new this.LIB_OBJ(figure, args);

docs/assets/js/index.js

@@ -18,62 +18,10 @@ lineComposite.parent.addEventListener('data-select', (e) => {
 	]);
 });
 
-// ================================================================================
-
-let customColors = ['purple', 'magenta', 'light-blue'];
-let typeChartArgs = {
-	title: "My Awesome Chart",
-	data: typeData,
-	type: 'axis-mixed',
-	height: 300,
-	colors: customColors,
-	valuesOverPoints: 1,
-
-	// maxLegendPoints: 6,
-	maxSlices: 10,
-
-	tooltipOptions: {
-		formatTooltipX: d => (d + '').toUpperCase(),
-		formatTooltipY: d => d + ' pts',
-	}
-};
-
-let aggrChart = new Chart("#chart-aggr", typeChartArgs);
-
-Array.prototype.slice.call(
-	document.querySelectorAll('.aggr-type-buttons button')
-).map(el => {
-	el.addEventListener('click', (e) => {
-		let btn = e.target;
-		let type = btn.getAttribute('data-type');
-		typeChartArgs.type = type;
-		if(type !== 'axis-mixed') {
-			typeChartArgs.colors = undefined;
-		} else {
-			typeChartArgs.colors = customColors;
-		}
-
-		if(type !== 'percentage') {
-			typeChartArgs.height = 300;
-		} else {
-			typeChartArgs.height = undefined;
-		}
-
-		let newChart = new Chart("#chart-aggr", typeChartArgs);
-		if(newChart){
-			aggrChart = newChart;
-		}
-		Array.prototype.slice.call(
-			btn.parentNode.querySelectorAll('button')).map(el => {
-			el.classList.remove('active');
-		});
-		btn.classList.add('active');
-	});
-});
-
-document.querySelector('.export-aggr').addEventListener('click', () => {
-	aggrChart.export();
-});
+let section = document.querySelector('.demo-main');
+dcb.setParent(section);
+dcb.setSys(dc.demoMain);
+dcb.make();
 
 // Update values chart
 // ================================================================================
@@ -171,7 +119,7 @@ document.querySelector('.export-update').addEventListener('click', () => {
 // Trends Chart
 // ================================================================================
 
-let section = document.querySelector('.trends-plot');
+section = document.querySelector('.trends-plot');
 dcb.setParent(section);
 dcb.setSys(dc.trendsPlot);
 dcb.make();
@@ -214,3 +162,18 @@ 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

@@ -265,6 +265,14 @@ function getRandomBias(min, max, bias, influence) {
 	return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
 }
 
+
+
+function toTitleCase(str) {
+	return str.replace(/\w*/g, function (txt) {
+		return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+	});
+}
+
 // Playing around with dates
 
 
@@ -492,11 +500,8 @@ var dc = {
     },
 
     demoMain: {
-        title: "Creating a Chart",
+        title: "Create a Chart",
         contentBlocks: [{
-            type: "text",
-            content: 'Booga wooga wooga Booga Booga wooga'
-        }, {
             type: "code",
             lang: "html",
             content: '  &lt!--HTML-->\n  <figure id="frost-chart"></figure>'
@@ -508,7 +513,7 @@ var dc = {
             type: "demo",
             config: {
                 title: "My Awesome Chart",
-                data: "typeData",
+                data: typeData,
                 type: "axis-mixed",
                 height: 300,
                 colors: ["purple", "magenta", "light-blue"],
@@ -523,19 +528,18 @@ var dc = {
                     }
                 }
             },
-            sideContent: {},
             options: [{
-                name: "lineOptions",
-                path: ["lineOptions"],
-                type: "map",
-                mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
+                name: "type",
+                path: ["type"],
+                type: "string",
                 states: {
-                    "Line": [0, 1, 0, 0],
-                    "Dots": [1, 0, 0, 0],
-                    "HeatLine": [0, 1, 1, 0],
-                    "Region": [0, 1, 0, 1]
+                    "Mixed": 'axis-mixed',
+                    "Line": 'line',
+                    "Bar": 'bar',
+                    "Pie Chart": 'pie',
+                    "Percentage Chart": 'percentage'
                 },
-                activeState: "HeatLine"
+                activeState: "Mixed"
             }],
             actions: [{ name: "Export ...", fn: "export", args: [] }]
         }]
@@ -614,6 +618,34 @@ 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",
+        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",
+        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",
+        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;'
+        }]
     }
 };
 
@@ -658,30 +690,37 @@ var docSectionBuilder = function () {
 	}, {
 		key: 'getBlock',
 		value: function getBlock(blockConf) {
-			var block = void 0;
-			var type = blockConf.type;
-
-			if (type === "text") {
-				block = this.getText(blockConf);
-			} else if (type === "code") {
-				block = this.getCode(blockConf);
+			var fnName = 'get' + toTitleCase(blockConf.type);
+			if (this[fnName]) {
+				return this[fnName](blockConf);
 			} else {
-				block = this.getDemo(blockConf);
+				throw new Error('Unknown section block type \'' + blockConf.type + '\'.');
 			}
 		}
 	}, {
 		key: 'getText',
-		value: function getText(blockConf) {}
+		value: function getText(blockConf) {
+			return $.create('p', {
+				inside: this.section,
+				innerHTML: blockConf.content
+			});
+		}
 	}, {
 		key: 'getCode',
 		value: function getCode(blockConf) {
 			var pre = $.create('pre', { inside: this.section });
+			var lang = blockConf.lang || 'javascript';
 			var code = $.create('code', {
 				inside: pre,
-				className: 'hljs ' + blockConf.lang,
+				className: 'hljs ' + lang,
 				innerHTML: blockConf.content
 			});
 		}
+	}, {
+		key: 'getCustom',
+		value: function getCustom(blockConf) {
+			this.section.innerHTML += blockConf.html;
+		}
 	}, {
 		key: 'getDemo',
 		value: function getDemo(blockConf) {
@@ -723,7 +762,7 @@ var docSectionBuilder = function () {
 									args[o.path[0]][attr] = state[i];
 								});
 							} else {
-								// boolean, number, object
+								// boolean, string, number, object
 								args[o.path[0]] = state;
 							}
 							_this2.libObj = new _this2.LIB_OBJ(figure, args);
@@ -770,63 +809,10 @@ lineComposite.parent.addEventListener('data-select', function (e) {
 	barComposite.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
 });
 
-// ================================================================================
-
-var customColors = ['purple', 'magenta', 'light-blue'];
-var typeChartArgs = {
-	title: "My Awesome Chart",
-	data: typeData,
-	type: 'axis-mixed',
-	height: 300,
-	colors: customColors,
-	valuesOverPoints: 1,
-
-	// maxLegendPoints: 6,
-	maxSlices: 10,
-
-	tooltipOptions: {
-		formatTooltipX: function formatTooltipX(d) {
-			return (d + '').toUpperCase();
-		},
-		formatTooltipY: function formatTooltipY(d) {
-			return d + ' pts';
-		}
-	}
-};
-
-var aggrChart = new Chart("#chart-aggr", typeChartArgs);
-
-Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button')).map(function (el) {
-	el.addEventListener('click', function (e) {
-		var btn = e.target;
-		var type = btn.getAttribute('data-type');
-		typeChartArgs.type = type;
-		if (type !== 'axis-mixed') {
-			typeChartArgs.colors = undefined;
-		} else {
-			typeChartArgs.colors = customColors;
-		}
-
-		if (type !== 'percentage') {
-			typeChartArgs.height = 300;
-		} else {
-			typeChartArgs.height = undefined;
-		}
-
-		var newChart = new Chart("#chart-aggr", typeChartArgs);
-		if (newChart) {
-			aggrChart = newChart;
-		}
-		Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
-			el.classList.remove('active');
-		});
-		btn.classList.add('active');
-	});
-});
-
-document.querySelector('.export-aggr').addEventListener('click', function () {
-	aggrChart.export();
-});
+var section = document.querySelector('.demo-main');
+dcb.setParent(section);
+dcb.setSys(dc.demoMain);
+dcb.make();
 
 // Update values chart
 // ================================================================================
@@ -920,7 +906,7 @@ document.querySelector('.export-update').addEventListener('click', function () {
 // Trends Chart
 // ================================================================================
 
-var section = document.querySelector('.trends-plot');
+section = document.querySelector('.trends-plot');
 dcb.setParent(section);
 dcb.setSys(dc.trendsPlot);
 dcb.make();
@@ -963,4 +949,19 @@ 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,61 +32,7 @@
       <figure id="bar-composite-1" class="border"></figure>
     </header>
 
-    <section>
-      <h6>Create a chart</h6>
-      <p>Click or use arrow keys to navigate data points</p>
-      <pre><code class="hljs html">  &lt!--HTML--&gt;
-  &lt;figure id="frost-chart"&gt;&lt;/figure&gt;</code></pre>
-      <pre><code class="hljs javascript">  // Javascript
-  let chart = new frappe.Chart( "#frost-chart", { // or DOM element
-    data: {
-      labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
-      "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
-
-      datasets: [
-        {
-          name: "Some Data", chartType: 'bar',
-          values: [25, 40, 30, 35, 8, 52, 17, -4]
-        },
-        {
-          name: "Another Set", chartType: 'bar',
-          values: [25, 50, -10, 15, 18, 32, 27, 14]
-        },
-        {
-          name: "Yet Another", chartType: 'line',
-          values: [15, 20, -3, -15, 58, 12, -17, 37]
-        }
-      ],
-
-      yMarkers: [{ label: "Marker", value: 70,
-        options: { labelPos: 'left' }}],
-      yRegions: [{ label: "Region", start: -10, end: 50,
-        options: { labelPos: 'right' }}]
-    },
-
-    title: "My Awesome Chart",
-    type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
-    height: 300,
-    colors: ['purple', '#ffa3ef', 'light-blue'],
-
-    tooltipOptions: {
-      formatTooltipX: d => (d + '').toUpperCase(),
-      formatTooltipY: d => d + ' pts',
-    }
-  });
-
-  chart.export();
-</code></pre>
-
-      <div id="chart-aggr" class="border"></div>
-      <div class="btn-group aggr-type-buttons mt1 mx-auto" role="group">
-        <button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button>
-        <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
-        <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
-      </div>
-      <button type="button" class="btn btn-sm btn-secondary export-aggr mt1">Export ...</button>
-
-    </section>
+    <section class="demo-main"></section>
 
     <section>
       <h6>Update Values</h6>
@@ -131,105 +77,9 @@
 
     <section class="heatmap"></section>
 
-    <section>
-      <h6>Demo</h6>
-      <p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
-        data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
-          See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
-          by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
-          <a href="https://codepen.io">CodePen</a>.
-      </p>
-      <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-    </section>
-
-    <section>
-      <h6>Available options</h6>
-      <pre><code class="hljs javascript">
-    ...
-    {
-      data: {
-        labels: [],
-        datasets: [],
-        yRegions: [],
-        yMarkers: []
-      }
-      title: '',
-      colors: [],
-      height: 200,
-
-      tooltipOptions: {
-        formatTooltipX: d => (d + '').toUpperCase(),
-        formatTooltipY: d => d + ' pts',
-      }
-
-      // Axis charts
-      isNavigable: 1,        // default: 0
-      valuesOverPoints: 1,   // default: 0
-      barOptions: {
-        spaceRatio: 1        // default: 0.5
-        stacked: 1           // default: 0
-      }
-
-      lineOptions: {
-        dotSize: 6,          // default: 4
-        hideLine: 0,         // default: 0
-        hideDots: 1,         // default: 0
-        heatline: 1,         // default: 0
-        regionFill: 1        // default: 0
-      }
-
-      axisOptions: {
-        yAxisMode: 'span',   // Axis lines, default
-        xAxisMode: 'tick',   // No axis lines, only short ticks
-        xIsSeries: 1         // Allow skipping x values for space
-                              // default: 0
-      },
-
-      // Pie/Percentage charts
-      maxLegendPoints: 6,    // default: 20
-      maxSlices: 10,         // default: 20
-
-      // Percentage chart
-      barOptions: {
-        height: 15           // default: 20
-        depth: 5             // default: 2
-      }
-
-      // Heatmap
-      discreteDomains: 1,    // default: 1
-    }
-    ...
-
-  // Updating values
-  chart.update(data);
-
-  // Axis charts:
-  chart.addDataPoint(label, valueFromEachDataset, index)
-  chart.removeDataPoint(index)
-  chart.updateDataset(datasetValues, index)
-
-  // Exporting
-  chart.export();
-
-  // Unbind window-resize events
-  chart.unbindWindowEvents();
-
-</code></pre>
-    </section>
-
-    <section>
-      <h6>Install</h6>
-      <p>Install via npm</p>
-      <pre><code class="hljs console">  npm install frappe-charts</code></pre>
-      <p>And include it in your project</p>
-      <pre><code class="hljs javascript">  import { Chart } from "frappe-charts"</code></pre>
-      <p>... or include it directly in your HTML</p>
-      <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
-      <p>Use as:</p>
-      <pre><code class="hljs javascript">  new Chart();          // ES6 module
-                        // or
-  new frappe.Chart();   // Browser</code></pre>
-    </section>
+    <section class="codepen"></section>
+    <section class="options"></section>
+    <section class="installation"></section>
 
     <section class="text-center">
       <!-- Closing -->
@@ -266,6 +116,7 @@
       </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>

src/js/utils/helpers.js

@@ -92,3 +92,7 @@ export function getPositionByAngle(angle, radius) {
 		y: Math.cos(angle * ANGLE_RATIO) * radius,
 	};
 }
+
+export function toTitleCase(str) {
+    return str.replace(/\w*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+}