[docs] add intro chart topics

docs/_sidebar.md

@@ -1,10 +1,34 @@
 * Getting started
+  * [Quick start](getting_started/quick_start.md)
 
-  * [Quick start](chap1/test1.md)
+* Axis charts
+  * [A basic chart](basic/basic_chart.md)
+  * [Adding more datasets](basic/multiple_datasets.md)
+  * [Trends and Region Charts](basic/trends_regions.md)
 
-* Customization
+* Aggregation Charts
+  * []()
+  * []()
 
-  * [Configuration](test2.md)
+* Update data
+  * [Single Points]()
+  * [Entire Data]()
 
+* Events
+  * [Navigation]()
+  * [Event hooks]()
 
-* [Changelog](test.md)
+* Heatmap
+  * []()
+  * []()
+
+* Exporting
+  * []()
+
+* API
+  * [Configuration]()
+  * [Methods]()
+
+* [ChangeLog]()
+* [Wrappers]()
+* [Contributing]()

docs/assets/css/index.css

@@ -3,7 +3,6 @@ body {
     /* max-width: 720px;
     margin: auto; */
 
-	font-family: "proxima-nova", sans-serif;
 	font-size: 15px;
 	color: #6c7680;
 	text-rendering: optimizeLegibility !important;
@@ -12,6 +11,10 @@ body {
 	-webkit-font-smoothing: antialiased;
 }
 
+#home-page {
+	font-family: "proxima-nova", sans-serif;
+}
+
 h1,
 h2,
 h3,

docs/assets/js/docsConfig.js

@@ -1,279 +0,0 @@
-import { sampleData, trendsData } from './data';
-
-export const docSections = [
-	{
-		name: "start",
-		contentBlocks: [
-			// Intro
-			{
-				type: "text",
-				content: `A chart is generally a 2D rendition of data. For example,
-					for a set of values across items, the data could look like:`
-			},
-			{
-				type: "code",
-				content: `  data = {
-    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-    datasets: [
-	  { values: [18, 40, 30, 35, 8, 52, 17, -4] }
-    ]
-  }`
-			},
-
-			// type: 'bar'
-			{
-				type: "text",
-				content: `Plug that in with a type <b>bar</b>, a color and height:`
-			},
-			{
-				type: "code",
-				content: `  new frappe.Chart( "#chart", {
-    data: data,
-    type: 'bar',
-    height: 140,
-    colors: ['red']
-  });`
-			},
-			{
-				type: "demo",
-				config: {
-                    data: sampleData[0],
-                    type: 'bar',
-                    height: 140,
-                    colors: ['red'],
-                },
-			},
-
-			// type: 'line'
-			{
-				type: "text",
-				content: `And similarly, a <b>line</b> chart:`
-			},
-			{
-				type: "code",
-				content: `  ...
-  type: 'line',
-  ...`
-			},
-			{
-				type: "demo",
-				config: {
-                    data: sampleData[0],
-                    type: 'line',
-                    height: 140,
-                    colors: ['red'],
-                },
-			},
-
-			// Axes lines:
-			{
-				type: "text",
-				content: `Axes lines are configurable. By default they are long
-					<b>span</b>ning lines, but can also be short <b>tick</b>s:`
-			},
-			{
-				type: "code",
-				content: `  ...
-  axisOptions: {
-    xAxisMode: 'tick' // default: 'span'
-  },
-  ...`
-			},
-			{
-				type: "demo",
-				config: {
-                    data: sampleData[2],
-                    type: 'bar',
-                    height: 140,
-					colors: ['blue'],
-					axisOptions: {
-						xAxisMode: "tick",
-					},
-                },
-			},
-
-			// Bar width:
-			{
-				type: "text",
-				content: `The bar <b>width</b> can be set by defining the <b>ratio of the space</b>
-					between bars to the bar width.`
-			},
-			{
-				type: "code",
-				content: `  ...
-  barOptions: {
-    spaceRatio: 0.2 // default: 1
-  },
-  ...`
-			},
-			{
-				type: "demo",
-				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"
-                    }
-                ]
-			},
-
-			// Dot radius:
-			{
-				type: "text",
-				content: 'So can the <b>dot size</b> on a line graph, with the `dotSize` property in `lineOptions`.'
-			},
-			{
-				type: "code",
-				content: `  ...
-  lineOptions: {
-    dotRadius: 8 // default: 4
-  },
-  ...`
-			},
-			{
-				type: "demo",
-				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"
-					}
-				]
-			},
-		]
-	},
-	{
-		title: "Trends and region charts",
-		name: "trends-and-region",
-		contentBlocks: [
-			{
-				type: "text",
-				content: 'lineOptions` have a bunch of other properties too. Region charts are'
-			},
-			{
-				type: "code",
-				content: `  ...
-  data: {
-    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] }
-    ]
-  },
-  ...`
-			},
-			{
-				type: "demo",
-				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"
-                    }
-                ]
-			}
-		]
-	},
-	{
-		title: "Adding more datasets",
-		name: "multi-dataset",
-		contentBlocks: [
-			{
-				type: "text",
-				content: `A chart can have multiple datasets. In an axis chart, every dataset is represented individually.`
-			},
-			{
-				type: "code",
-				content: `  ...
-  data: {
-    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] }
-    ]
-  },
-  ...`
-			},
-			{
-				type: "demo",
-				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/basic/basic_chart.md

@@ -0,0 +1,62 @@
+## What is it
+
+A chart is generally a 2D rendition of data. For example, for a set of values across items, the data could look like:
+```js
+
+data = {
+	labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+	datasets: [
+		{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
+	]
+}
+```
+
+Plug that in with a type `bar`, a color and height,
+
+```js
+new frappe.Chart( "#chart", {
+    data: data,
+    type: 'bar',
+    height: 140,
+    colors: ['red']
+});
+```
+<div class="demo" id="bar-basic-1"></div>
+
+And similarly, a `line` chart:
+
+```js
+type:'line'
+```
+<div class="demo" id="line-basic-1"></div>
+
+## Tweaks
+
+Axes lines are configurable. By default they are long `span`ning lines, but can also be short `tick`s:`
+
+```js
+axisOptions: {
+	xAxisMode: 'tick' // default: 'span'
+},
+```
+<div class="demo" id="bar-axis-tick"></div>
+
+The bar <b>width</b> can be set by defining the <b>ratio of the space</b> between bars to the bar width.
+
+```js
+barOptions: {
+	spaceRatio: 0.2 // default: 1
+},
+```
+<div class="demo" id="bar-barwidth"></div>
+
+So can the <b>dot size</b> on a line graph, with the `dotSize` property in `lineOptions`.
+
+```js
+lineOptions: {
+	dotSize: 8 // default: 4
+},
+```
+<div class="demo" id="line-dotsize"></div>
+
+Next up, we'll discover how multiple datasets can behave in different charts.

docs/basic/multiple_datasets.md

@@ -0,0 +1,14 @@
+## Multiple datasets
+
+A chart can have multiple datasets. In an axis chart, every dataset is represented individually.
+
+```js
+data: {
+    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] }
+    ]
+},
+```
+<div class="demo" id="multi-dataset-line-bar"></div>

docs/basic/trends_regions.md

@@ -0,0 +1,9 @@
+`lineOptions` have a bunch of other properties too. Region charts are ...
+
+```js
+lineOptions: {
+	dotSize: 8 // default: 4
+},
+```
+
+<div class="demo" id="line-trends-region-toggle"></div>

docs/demoRegistry.js

@@ -1,18 +1,37 @@
 import { sampleData, trendsData } from './assets/js/data';
 
 export const demoRegistry = {
-	demo1: {
+	'bar-basic-1': {
-		type: "demo",
 		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",
+			},
 		},
 	},
 
-	demo2: {
+	'bar-barwidth': {
-		type: "demo",
 		config: {
 			data: sampleData[3],
 			type: 'bar',
@@ -41,4 +60,86 @@ export const demoRegistry = {
 			}
 		]
 	},
+
+	'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"
+			}
+		],
+	},
+
+	// '': {},
 };

docs/getting_started/quick_start.md

@@ -1,4 +1,4 @@
-#### Installation
+## Installation
 * Install via [`npm`](https://www.npmjs.com/get-npm):
 
   ```console
@@ -18,7 +18,7 @@
     <script src="https://unpkg.com/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
   ```
 
-#### Usage
+## Usage
 ```js
 const data = {
     labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",

docs/index.html

@@ -9,14 +9,15 @@
 
   <meta name="keywords" content="open source javascript js charts library svg zero-dependency
       interactive data visualization beautiful drag resize">
-    <meta name="description" content="A simple, responsive, modern charts library for the web.">
+  <meta name="description" content="A simple, responsive, modern charts library for the web.">
 
-  <link rel="stylesheet" type="text/css" href="vuestyle.css" media="screen">
 
   <link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen">
   <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
   <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
   <link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
+
+  <link rel="stylesheet" type="text/css" href="vuestyle.css" media="screen">
   <link rel="stylesheet" type="text/css" href="style.css" media="screen">
 
   <script src="assets/js/highlight.pack.js"></script>
@@ -29,7 +30,7 @@
 
 </head>
 <body>
-  <div id="home-page">
+  <div id="home-page" class="hide">
 
     <header>
       <h1>Frappe Charts</h1>
@@ -80,9 +81,11 @@
 
   <!-- SCRIPTS -->
   <script src="index.min.js"></script>
+  <script>
+    window.$docsify.subMaxLevel = 2;
+  </script>
 
   <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-  <script src="assets/js/frappe-charts.min.js"></script>
 
   <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
   <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>

docs/index.js

@@ -9,7 +9,9 @@ import { lineComposite, barComposite, demoSections} from './assets/js/demoConfig
 let dbd = new docsBuilder(Chart);
 let currentElement = document.querySelector('header');
 
-if(document.querySelectorAll('#line-composite-1').length) {
+if(document.querySelectorAll('#line-composite-1').length
+	&& !document.querySelector('#home-page').classList.contains("hide")) {
+
 	let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
 	let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
 
@@ -32,12 +34,20 @@ window.$docsify = {
 	name: 'frappe-charts',
 	// repo: 'https://github.com/frappe/charts',
 	loadSidebar: true,
+	subMaxLevel: 2,
 	executeScript: true,
 	plugins: [
 		function(hook, vm) {
 			hook.doneEach(function() {
-				dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
+				let demos = document.querySelectorAll('.demo')
-				document.querySelector("main").classList.add("hide");
+
+				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");
 			});
 		}
 	]

docs/index.min.js

@@ -5406,8 +5406,7 @@ var sampleData = {
 };
 
 var demoRegistry = {
-	demo1: {
+	'bar-basic-1': {
-		type: "demo",
 		config: {
 			data: sampleData[0],
 			type: 'bar',
@@ -5416,8 +5415,28 @@ var demoRegistry = {
 		}
 	},
 
-	demo2: {
+	'line-basic-1': {
-		type: "demo",
+		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',
@@ -5443,7 +5462,83 @@ var demoRegistry = {
 			},
 			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 = {
@@ -5685,7 +5780,8 @@ var demoSections = [{
 var dbd = new docsBuilder(Chart);
 var currentElement = document.querySelector('header');
 
-if (document.querySelectorAll('#line-composite-1').length) {
+if (document.querySelectorAll('#line-composite-1').length && !document.querySelector('#home-page').classList.contains("hide")) {
+
 	var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
 	var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
 
@@ -5706,11 +5802,19 @@ window.$docsify = {
 	name: 'frappe-charts',
 	// repo: 'https://github.com/frappe/charts',
 	loadSidebar: true,
+	subMaxLevel: 2,
 	executeScript: true,
 	plugins: [function (hook, vm) {
 		hook.doneEach(function () {
-			dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
+			var demos = document.querySelectorAll('.demo');
-			document.querySelector("main").classList.add("hide");
+
+			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");
 		});
 	}]
 };

docs/test.md

@@ -1 +0,0 @@
-* Change