[docs] numeric control, more docs

docs/README.md

@@ -25,12 +25,12 @@
         <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
     </a>
 </p>
-
+<!--
 <p align="center">
     <a href="https://frappe.github.io/charts">
         <img src=".github/example.gif">
     </a>
-</p>
+</p> -->
 
 ### Contents
 * [Installation](#installation)

docs/_sidebar.md

@@ -12,21 +12,17 @@
 
 * Update state
   * [Modify data](update_state/modify_data.md)
-
-* Events
-  * [Navigation]()
-  * [Event hooks]()
+  * [Navigation](update_state/navigation.md)
 
 * Heatmap
   * [Day-based Month-wise data](basic/heatmap.md)
 
 * Exporting
-  * [Image Files]()
+  * [Image Files](exporting/images.md)
 
 * Reference
-  * [Configuration]()
-  * [API]()
+  * [Configuration](reference/configuration.md)
+  * [API](reference/api.md)
 
-* [ChangeLog]()
-* [Wrappers]()
-* [Contributing]()
+* [Wrappers](wrappers.md)
+* [Contributing](contributing.md)

docs/assets/js/demoConfig.js

@@ -1,6 +1,5 @@
 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 const lineComposite = {
     config: {
@@ -263,14 +262,14 @@ export const demoSections = [
                     type: 'heatmap',
                     discreteDomains: 1,
                     countLabel: 'Level',
-                    colors: HEATMAP_COLORS_BLUE,
+                    colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
                     legendScale: [0, 1, 2, 4, 5]
                 },
                 options: [
                     {
                         name: "Discrete domains",
                         path: ["discreteDomains"],
-                        type: 'boolean',
+                        type: 'Boolean',
                         // boolNames: ["Continuous", "Discrete"],
                         states: { "Discrete": 1, "Continuous": 0 }
                     },
@@ -280,8 +279,8 @@ export const demoSections = [
                         type: "object",
                         states: {
                             "Green (Default)": [],
-                            "Blue": HEATMAP_COLORS_BLUE,
-                            "GitHub's Halloween": HEATMAP_COLORS_YELLOW
+                            "Blue": ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
+                            "GitHub's Halloween": ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
                         }
                     }
                 ],

docs/basic/annotations.md

@@ -98,7 +98,7 @@ For a non-web or static interface, where tooltips are absent, `valuesOverPoints`
         {
             name: 'type',
             path: ['type'],
-            type: 'string',
+            type: 'String',
             states: { 'Bar': 'bar', 'Line': 'line' },
             activeState: 'Bar'
         }

docs/basic/basic_chart.md

@@ -60,7 +60,7 @@ Notice that this case demonstrates why the `colors` option is an array. We'll se
         {
             name: 'type',
             path: ['type'],
-            type: 'string',
+            type: 'String',
             states: { 'Line': 'line', 'Bar': 'bar' },
             activeState: 'Mixed'
         }
@@ -90,7 +90,7 @@ Try resizing the window to see the effect, with different ratio values.
     }"
     v-bind:options="[
         {
-            name: 'barOptions',
+            name: 'spaceRatio',
             path: ['barOptions', 'spaceRatio'],
             type: 'number',
             numberOptions: { min: 0.1, max: 1.9, step: 0.1 },
@@ -136,7 +136,7 @@ lineOptions: {
     }"
     v-bind:options="[
         {
-            name: 'lineOptions',
+            name: 'dotSize',
             path: ['lineOptions', 'dotSize'],
             type: 'number',
             numberOptions: { min: 3, max: 10, step: 1 },

docs/basic/heatmap.md

@@ -5,7 +5,7 @@ The heatmap is a representation of day-wise data (similar to [the GitHub Contrib
 In this case, the data has three parts,
 
 ```js
-let heatmapData = {
+let data = {
 	dataPoints: {
 		"1426744959": 20,
 		"1463673055": 113,
@@ -16,6 +16,47 @@ let heatmapData = {
 	end: endDate
 }
 ```
+
+```js
+let chart = new Chart("#heatmap", {
+    type: 'heatmap',
+    data: data,
+})
+```
+<chart-demo data="heatmap-data" v-bind:config="{
+		title: 'Monthly Distribution',
+        type: 'heatmap',
+	}">
+</chart-demo>
+
+<chart-demo data="heatmap-data" v-bind:config="{
+		title: 'Monthly Distribution',
+        type: 'heatmap',
+        height: 200,
+		discreteDomains: 1,
+		countLabel: 'Level',
+		colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
+	}"
+	v-bind:options="[
+		{
+			name: 'Discrete domains',
+			path: ['discreteDomains'],
+			type: 'Boolean',
+			// boolNames: ['Continuous', 'Discrete'],
+			states: { 'Discrete': 1, 'Continuous': 0 }
+		},
+		{
+			name: 'Colors',
+			path: ['colors'],
+			type: 'Array',
+			states: {
+				'Green (Default)': [],
+				'Blue': ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
+				'Halloween': ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
+			}
+		}
+	]">
+</chart-demo>
 (We are working on making the start date and end date implicit and optional). [tip]
 
 The chart is rendered by the type `heatmap`:

docs/basic/stacked_and_mixed.md

@@ -84,7 +84,7 @@ barOptions: {
       {
         name: 'barOptions',
         path: ['barOptions', 'stacked'],
-        type: 'boolean',
+        type: 'Boolean',
         states: { 'Stacked': 1, 'Adjacent': 0 },
         activeState: 1
       }

docs/basic/trends_regions.md

@@ -18,10 +18,15 @@ lineOptions: {
 </chart-demo>
 
 ## Plotting Trends
-Line charts great to show trends data. One of the reason trends are interesting is because the data involved usually involves a large number of data points. For so many points, we'd really like to keep the plot as less detailed as we can, while also using the already present color to advantage. Let's see how we can change some properties of a default line chart can reduce clutter.
+Line charts are great to show trends. One of the reasons they are interesting is because the data involved usually involves a large number of data points. For so many points, we'd really like to keep the plot as less detailed as we can, while also using the already present color to advantage. Let's see how we can change some properties of a default line chart can reduce clutter.
 
 ## Continuity
-The X axis (often the time axis) is usually continuous. That means we can reduce the redundancy of rendering every X label by allowing for only a few periodic ones. We can do this by setting the `xIsSeries` property in `axisOptions` to `true`.
+The X axis (often the time axis) is usually continuous. That means we can reduce the redundancy of rendering every X label by allowing for only a few periodic ones.
+
+
+We can skip X labels by setting the `xIsSeries` property in `axisOptions` to `true`.
+
+
 
 ```js
 axisOptions: {
@@ -123,7 +128,7 @@ Here's a demo using different combinations of the line options.
 		{
 			name: 'lineOptions',
 			path: ['lineOptions'],
-			type: 'map',
+			type: 'Map',
 			mapKeys: ['hideLine', 'hideDots', 'heatline', 'areaFill'],
 			states: {
 				'Line': [0, 1, 0, 0],

docs/contributing.md

@@ -0,0 +1,15 @@
+# Contributing
+If you wish to contribute to Frappe Charts:
+
+1. Clone the git repo.
+2. `cd` into project directory
+3. `npm install`
+4. `npm run dev`
+
+All changes should be made in the code base contained in `src`.
+
+To contribute to one of the chart types, there are individual js files specific to each chart type in `src/js/charts/`, with `BaseChart` being the root for any chart. All charts are broadly categorised as `AxisChart`, `AggregationCharts` (`PieChart` and `PercentageChart`) and `Heatmap`. Common behaviour to be in all children charts can be considered to be defined in the parent.
+
+Most of the ground-level logic code is segregated into the utils modules `src/js/utils/`.
+
+If you wish to use an arbitrary constant value for a specific measure, color, ratio etc., check `src/js/utils/constants.js` and register the value to be used.

docs/data.js

@@ -128,6 +128,59 @@ function getAddUpdateData() {
 	// );
 }
 
+const NO_OF_MILLIS = 1000;
+const SEC_IN_DAY = 86400;
+
+function clone(date) {
+	return new Date(date.getTime());
+}
+
+function timestampToMidnight(timestamp, roundAhead = false) {
+	let midnightTs = Math.floor(timestamp - (timestamp % SEC_IN_DAY));
+	if(roundAhead) {
+		return midnightTs + SEC_IN_DAY;
+	}
+	return midnightTs;
+}
+
+function timestampSec(date) {
+	return date.getTime()/NO_OF_MILLIS;
+}
+
+function addDays(date, numberOfDays) {
+	let newDate = clone(date);
+	newDate.setDate(newDate.getDate() + numberOfDays);
+	return newDate;
+}
+
+function getHeatmapData() {
+	let today = new Date();
+	let start = clone(today);
+	start = addDays(start, 4);
+	let end = clone(start);
+	start.setFullYear( start.getFullYear() - 2 );
+	end.setFullYear( end.getFullYear() - 1 );
+
+	let dataPoints = {};
+
+	let startTs = timestampSec(start);
+	let endTs = timestampSec(end);
+
+	startTs = timestampToMidnight(startTs);
+	endTs = timestampToMidnight(endTs, true);
+
+	while (startTs < endTs) {
+		dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
+		startTs += SEC_IN_DAY;
+	}
+
+	return {
+		dataPoints: dataPoints,
+		start: start,
+		end: end
+	};
+}
+
 
 const sampleData = {
 	"0": {
@@ -228,13 +281,11 @@ const sampleData = {
 			{
 				name: "Some Data",
 				values: [18, 40, 30, 35, 8, 52, 17, -4],
-				axisPosition: 'right',
 				chartType: 'bar'
 			},
 			{
 				name: "Another Set",
 				values: [30, 50, -10, 15, 18, 32, 27, 14],
-				axisPosition: 'right',
 				chartType: 'bar'
 			},
 			{
@@ -265,4 +316,6 @@ const sampleData = {
 	},
 
 	"get-update-data": getUpdateData,
+
+	"heatmap-data": getHeatmapData
 }

docs/demoBuilder.js

@@ -1,18 +1,30 @@
-function $(expr, con) {
+function $$(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
 }
 
-$.create = (tag, o) => {
+$$.create = (tag, o) => {
 	var element = document.createElement(tag);
+	let container = null;
+
+	if (o.withLabel) {
+		container = document.createElement('div');
+		container.classList.add('input-wrapper');
+		element.label = document.createElement('label');
+		element.label.innerHTML = o.withLabel;
+		container.appendChild(element.label);
+		container.appendChild(element);
+	}
 
 	for (var i in o) {
 		var val = o[i];
 
-		if (i === "inside") {
-			$(val).appendChild(element);
-		}
-		else if (i === "around") {
-			var ref = $(val);
+		if(i === "inside") {
+			let child = container ? container : element;
+
+			$$(val).appendChild(child);
+
+		} else if (i === "around") {
+			var ref = $$(val);
 			ref.parentNode.insertBefore(element, ref);
 			element.appendChild(ref);
 
@@ -24,6 +36,11 @@ $.create = (tag, o) => {
 				val(element.value);
 			});
 
+		} else if (i === "onChange" ) {
+			element.addEventListener('change', function(e) {
+				val(element.value);
+			});
+
 		} else if (i === "styles") {
 			if(typeof val === "object") {
 				Object.keys(val).map(prop => {
@@ -38,13 +55,17 @@ $.create = (tag, o) => {
 		}
 	}
 
-	return element;
+	return container ? container : element;
 };
 
 function toTitleCase(str) {
     return str.replace(/\w*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
 }
 
+function scrub(text) {
+	return text.replace(/ /g, "_").toLowerCase();
+};
+
 // export class demoBuilder {
 class demoBuilder {
 	constructor(LIB_OBJ) {
@@ -71,7 +92,7 @@ class docSection {
 		// const section = document.querySelector(this.parent);
 		let s = this.sys;
 		if(s.title) {
-			$.create('h6', { inside: this.parent, innerHTML: s.title });
+			$$.create('h6', { inside: this.parent, innerHTML: s.title });
 		}
 
 		if(s.contentBlocks) {
@@ -94,7 +115,7 @@ class docSection {
 	}
 
 	getText(blockConf) {
-		return $.create('p', {
+		return $$.create('p', {
 			inside: this.parent,
 			className: 'new-context',
 			innerHTML: blockConf.content
@@ -102,9 +123,9 @@ class docSection {
 	}
 
 	getCode(blockConf) {
-		let pre = $.create('pre', { inside: this.parent });
+		let pre = $$.create('pre', { inside: this.parent });
 		let lang = blockConf.lang || 'javascript';
-		let code = $.create('code', {
+		let code = $$.create('code', {
 			inside: pre,
 			className: `hljs ${lang}`,
 			innerHTML: blockConf.content
@@ -121,15 +142,15 @@ class docSection {
 
 		let figure, row;
 		if(!bc.sideContent) {
-			figure = $.create('figure', { inside: this.parent });
+			figure = $$.create('figure', { inside: this.parent });
 		} else {
-			row = $.create('div', {
+			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') });
+			figure = $$.create('figure', { inside: row.querySelector('.col-sm-8') });
 			row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
 		}
 
@@ -147,23 +168,26 @@ class docSection {
 
 	getDemoOptions(demoIndex, options=[], args={}, figure) {
 		options.forEach(o => {
-			const btnGroup = $.create('div', {
+			console.log("o", o);
+			const btnGroup = $$.create('div', {
 				inside: this.parent,
-				className: `btn-group ${o.name}`
+				className: `btn-group ${scrub(o.name)}`
 			});
 			const mapKeys = o.mapKeys;
 
 			if(o.type === "number") {
 				let numOpts = o.numberOptions;
+				let activeState = o.activeState ? o.activeState : 0
 
-				const inputGroup = $.create('input', {
+				const inputGroup = $$.create('input', {
 					inside: btnGroup,
+					withLabel: o.name + ': ' + '<b>' + activeState + '</b>',
 					className: `form-control`,
 					type: "range",
 					min: numOpts.min,
 					max: numOpts.max,
 					step: numOpts.step,
-					value: o.activeState ? o.activeState : 0,
+					value: activeState,
 					// (max - min)/2
 					onInput: (value) => {
 						if(o.path[1]) {
@@ -172,18 +196,23 @@ class docSection {
 							args[o.path[0]] = value;
 						}
 
+						let label = inputGroup.querySelector('label');
+						if(label) {
+							label.innerHTML = o.name + ': ' + '<b>' + value + '</b>';
+						}
+
 						this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
 					}
 				});
 
-			} else if(["map", "string", "boolean"].includes(o.type)) {
+			} else if(["Map", "String", "Boolean", "Array", "Object"].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', {
+					let button = $$.create('button', {
 						inside: btnGroup,
 						className: `btn btn-sm btn-secondary ${activeClass}`,
 						innerHTML: key,
@@ -210,7 +239,7 @@ class docSection {
 	getDemoActions(demoIndex, actions=[], args={}) {
 		actions.forEach(o => {
 			let args = o.args || [];
-			$.create('button', {
+			$$.create('button', {
 				inside: this.parent,
 				className: `btn btn-action btn-sm btn-secondary`,
 				innerHTML: o.name,

docs/exporting/images.md

@@ -0,0 +1,22 @@
+## Exporting to images
+
+Frappe charts are exportable to an SVG format, in which they are natively rendered.
+
+```js
+chart.export();
+```
+
+<chart-demo data="get-update-data" v-bind:config="{
+		title: 'My Area Chart',
+        type: 'line',
+        height: 300,
+		lineOptions: { areaFill: 1 }
+    }"
+	v-bind:actions="[
+		{
+			name: 'Export',
+			fn: 'export',
+			args: []
+		}
+	]">
+</chart-demo>

docs/index.html

@@ -88,15 +88,15 @@
   <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 src="//unpkg.com/vue/dist/vue.js"></script> -->
+  <script src="/externals/vue.js"></script>
   <script>
 
     let dbd = new demoBuilder(frappe.Chart);
-    console.log(sampleData, getAddUpdateData, getUpdateData);
 
     Vue.component('chart-demo', {
       template: '<div class="chart-demo"></div>',
-      props: ['data', 'config', 'options', 'actions'],
+      props: ['data', 'config', 'options', 'actions', 'sideContent'],
       mounted: function() {
         let config = this.config;
         config.data = sampleData[this.data];
@@ -104,23 +104,28 @@
           config.data = sampleData[this.data]();
         }
 
-        console.log(sampleData, getAddUpdateData, getUpdateData);
         var demoConfig = {
           config: config,
           options: this.options,
-          actions: this.actions.actions
+          actions: this.actions,
+          sideContent: this.sideContent,
         };
 
+        console.log(this.sideContent);
+
         dbd.makeSection(this.$el, demoConfig);
       }
     });
 
-    new Vue({
-      el: '#app',
-      data: {
+    Vue.mixin({
+      methods: {
         getAddUpdateData: getAddUpdateData,
         getUpdateData: getUpdateData
       }
+    })
+
+    new Vue({
+      el: '#app',
     });
 
     window.$docsify = {
@@ -137,7 +142,8 @@
     };
   </script>
 
-  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  <!-- <script src="//unpkg.com/docsify/lib/docsify.min.js"></script> -->
+  <script src="/externals/docsify.min.js"></script>
   <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
   <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
 </body>

docs/index.min.js

@@ -5581,7 +5581,7 @@ var demoSections = [{
         options: [{
             name: "Discrete domains",
             path: ["discreteDomains"],
-            type: 'boolean',
+            type: 'Boolean',
             // boolNames: ["Continuous", "Discrete"],
             states: { "Discrete": 1, "Continuous": 0 }
         }, {

docs/reference/api.md

@@ -0,0 +1,57 @@
+# API
+
+## Modifying Data
+There are two ways to update data in a chart: either in adding and removing individual points, or updating the existing data with an entirely new set of data points.
+
+### Updating individual data points
+
+#### addDataPoint
+Add a data point to the chart, increasing the length of the dataset.
+
+```js
+addDataPoint(label: String, valueFromEachDataset: Array, index: Number): void
+
+// Usage
+let label = 'Wed';
+let valueFromEachDataset = [30, 17];
+
+chart.addDataPoint(label, valueFromEachDataset); // by default adds at end
+chart.addDataPoint(label, valueFromEachDataset, 6);
+```
+
+#### removeDataPoint
+Remove a data point from the chart, reducing the length of the dataset.
+
+```js
+removeDataPoint(index: Number): void
+
+// Usage
+chart.removeDataPoint(); // by default removes from end
+chart.removeDataPoint(10);
+```
+
+### Updating full data
+
+#### update
+
+Update the entire data, including annotations, by passing the entire new `data` object to `update`.
+
+```js
+update(data: Object): void
+
+// Usage
+chart.update(data);
+```
+
+## Exporting
+
+#### export
+
+Frappe charts are exportable to an SVG format, in which they are natively rendered.
+
+```js
+export(): void
+
+// Usage
+chart.export();
+```

docs/reference/configuration.md

@@ -1,198 +1,186 @@
----
-sidebarDepth: 2
----
-
 # Configuration
 
 With all the customizable features of Frappe Charts, this section is dedicated to enabling / disabling existing functionality.
 
 ## Container
 
-The first parameter required by the `DataTable` constructor is the container element. You can pass in a CSS Selector or a DOM Object.
+The first parameter required by the `Chart` constructor is the container element. You can pass in a CSS Selector or a DOM Object.
 
 ```javascript
-const datatable = new DataTable('#datatable', options);
+const chart = new Chart('#chart', options);
 // or
-const container = document.querySelector('#datatable');
-const datatable = new DataTable(container, options);
+const container = document.querySelector('#chart');
+const chart = new Chart(container, options);
 ```
 
 ## Options
 
-The second parameter required by the `DataTable` constructor is the options object. The minimum required configuration is to pass `column` and `data` values.
+The second parameter required by the `Chart` constructor is the options object. The minimum required configuration is to pass `data` values, which itself requires an array of `labels` and an array of `datasets`.
 
 ```javascript
 const options = {
-    columns: ['Name', 'Position', 'Salary'],
-    data: [
-        ['John Doe', 'DevOps Engineer', '$12300'],
-        ['Mary Jane', 'UX Design', '$14000'],
-    ]
+    data: {
+        labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm"],
+
+        datasets: [
+            {
+                name: "Some Data", values: [25, 40, 30, 35, 8]
+            },
+            {
+                name: "Another Set", values: [25, 50, -10, 15, 18]
+            }
+        ]
+    }
 }
 
-const datatable = new DataTable(container, options);
+const chart = new Chart(container, options);
 ```
 
-The following options are configurable:
-
-### getEditor
- - Type: `Function`
- - Default: `null`
-
-Customize the editor behaviour.
-
----
-
-### serialNoColumn
- - Type: `Boolean`
- - Default: `true`
+### data
+ - Type: `Object`
+ - Required Properties: `labels`, `datasets`
+ - Optional Properties: `yMarkers`, `yRegions`
 
-Whether to show serial number as the first column in datatable.
+Contains an array of `labels` and an array of `datasets`, each a value for the 2-dimensional data points.
 
----
+May also have [annotation]() parameters, for example those for `yMarkers` and `yRegions`. This is because all properties defined inside data are meant to be animatable.
+```javascript
+data: {
+    labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm"],
 
-### checkboxColumn
- - Type: `Boolean`
- - Default: `false`
+    datasets: [
+        { name: "Some Data", values: [25, 40, 30, 35, 8] },
+        { name: "Another Set", values: [25, 50, -10, 15, 18] }
+    ],
 
-Whether to show checkbox column in the datatable.
+    yMarkers: [{ label: "Marker", value: 70 }],
 
----
+    yRegions: [{ label: "Region", start: -10, end: 50 }]
+}
+```
 
-### clusterize
- - Type: `Boolean`
- - Default: `true`
+Other configurable options are listed as follows:
 
-Whether to use clusterize to render the data.
+### title
+ - Type: `String`
+ - Default: `''`
 
-> If you don't want to show large number of rows. Then you can turn this off. In that case you don't need to load the `clusterize.js` lib
+Add a title to the Chart.
 
 ---
 
-### layout
+### type
  - Type: `String`
- - Default: `fixed`
- - Options: `fixed | fluid | ratio`
+ - Values: `line | bar | axis-mixed | pie | percentage | heatmap`
+ - Default: `line`
 
-This option controls how width of each `column` is calculated in the DataTable.
+Let the chart know what type to render.
 
-#### fixed
+#### type: 'axis-mixed'
 
-The column width is calculated based on the content of the first row of the table. This layout can result in horizontal scroll.
+Mixed axis chart. For this to work, you must pass the `chartType` value for each dataset.
 
-#### fluid
+```javascript
 
-The column width is adjusted based on the width of container. So the columns will be resized if the window is resized. This layout won't result in horizontal scroll. You will always see all the columns.
+const data = {
+    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
 
-#### ratio
+    datasets: [
+        {
+            name: "Some Data",
+            values: [18, 40, 30, 35, 8, 52, 17],
+            chartType: 'bar'
+        },
+        {
+            name: "Yet Another",
+            values: [15, 20, -3, -15, 58, 12, -17],
+            chartType: 'line'
+        }
+    ]
+}
 
-This layout works similar to the `flex` property in CSS. When column A has `width` set as `1` and column B as `2`, then column B's width  will be twice as much as column A.
+const chart = new Chart('#chart', {
+    data: data
+});
+
+```
 
 ---
 
-### noDataMessage
- - Type: `String`
- - Default: `No Data`
+### colors
+ - Type: `Array`
+ - Default: `['light-blue', 'blue', 'violet', 'red', 'orange',
+	'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey']`
 
-The message shown when there are no rows to show in the DataTable.
+Set the colors to be used for each individual unit type, depending on the chart type.
 
 ---
 
-### dynamicRowHeight
- - Type: `Boolean`
- - Default: `false`
+### height
+ - Type: `Number`
+ - Default: `240`
 
-The height of the row will be set according to the content of the cell with the maximum height in that row.
+Set the height of the chart in pixels.
 
 ---
 
-### cellHeight
- - Type: `Number`
- - Default: `null`
-
-Set the height of each cell explicitly.
+### axisOptions
+ - Type: `Object`
+ - Default: `{}`
 
-> If this value is set, `dynamicRowHeight` won't have any effect.
+#### xAxisMode and yAxisMode
+ - Type: `String`
+ - Values: `span | tick`
+ - Default: `span`
 
----
+Foo
 
-### inlineFilters
+#### xIsSeries
  - Type: `Boolean`
- - Default: `false`
+ - Default: `0`
 
-Whether to enable the inline filter feature. If the value is `true`, then you can activate the filter row by pressing `Ctrl/Cmd + F` after clicking on any cell in the DataTable.
+Foo
 
 ---
 
-### treeView
- - Type: `Boolean`
- - Default: `false`
-
-Whether to render rows in a tree structure. For this to work, you must pass the `indent` value for each row.
+### TooltipOptions
+ - Type: `Object`
+ - Default: `{}`
 
-Example
-```javascript
+####
+---
 
-const data = [
-    {
-        'Department': 'IT Department',
-        'No of People': '10',
-        'indent': 0,
-    },
-    {
-        'Department': 'Javascript Team',
-        'No of People': '5',
-        'indent': 1,
-    },
-    {
-        'Department': 'Vue.js Team',
-        'No of People': '3',
-        'indent': 2,
-    },
-    {
-        'Department': 'React Team',
-        'No of People': '2',
-        'indent': 2,
-    },
-    {
-        'Department': 'Design Team',
-        'No of People': '5',
-        'indent': 1,
-    },
-]
-
-const datatable = new DataTable('#datatable', {
-    columns: ['Department', 'No of People'],
-    data: data
-});
+### barOptions
+ - Type: `Object`
+ - Default: `{}`
 
-```
+This option controls how width of each `column` is calculated in the chart.
 
----
+#### spaceRatio
+ - Type: `Number`
+ - Min: `0`
+ - Max: `2`
+ - Default: `0.5`
 
-### checkedRowStatus
+#### stacked
  - Type: `Boolean`
- - Default: `true`
-
-Whether to show the number of rows checked in a toast message.
+ - Default: `0`
 
 ---
 
-### pasteFromClipboard
- - _Experimental_
- - Type: `Boolean`
- - Default: `false`
+### lineOptions
+ - Type: `Object`
+ - Default: `{}`
 
-Whether to allow the user to paste copied content into selected cell(s).
+Foo
 
 ---
 
-### dropdownButton
- - Type: `String`
- - Default: `▼`
-
-String to render as the dropdown button. You can pass a span with an icon class.
+### isNavigable
+ - Type: `Boolean`
+ - Default: `0`
 
+Foo
 Example
 
 ```javascript
@@ -202,25 +190,10 @@ Example
 
 ```
 
-### headerDropdown
- - Type: `Array`
-
-When you hover over any column, you see the dropdown button which is used to perform certain actions for that column.
-This options allows you to pass an array of custom buttons with custom actions defined by you.
-
-```javascript
-options = {
-    headerDropdown: [
-        {
-            label: 'Copy column contents',
-            action: function (column) {
-                // code to copy the column contents
-            }
-        },
-}
-```
+### valuesOverPoints
+ - Type: `Boolean`
+ - Default: `0`
 
-### events
- - Type: `Object`
+Foo
 
- The events options is described in detailed in the [next section](events.md).
+###

docs/style.css

@@ -1,3 +1,15 @@
-/* a {
-	color: red;
-} */
+input[type="range"] {
+    padding: 0;
+}
+
+.input-wrapper {
+	display: flex;
+	margin-right: 15px;
+}
+
+.input-wrapper label {
+	margin-right: 10px;
+	margin-top: 5px;
+	font-size: 0.8em;
+	flex-shrink: 0;
+}

docs/update_state/modify_data.md

@@ -1,8 +1,26 @@
+# Modifying Data
+
 There are two ways to update data in a chart: either in adding and removing individual points, or updating the existing data with an entirely new set of data points.
 
-## Updating individual data points
+### Updating individual data points
+
+```js
+let label = 'Wed';
+let valueFromEachDataset = [30];
+let index = 10; // default for adding/removing values: last index
+
+chart.addDataPoint(label, valueFromEachDataset); // by default adds at end
+chart.addDataPoint(label, valueFromEachDataset, index);
+```
+
+```js
+let index = 10;
+chart.removeDataPoint();
+chart.removeDataPoint(index);
+```
+
 <chart-demo data="get-update-data" v-bind:config="{
-        type: 'bar',
+        type: 'line',
         height: 200
     }"
 	v-bind:actions="[
@@ -19,10 +37,16 @@ There are two ways to update data in a chart: either in adding and removing indi
 	]">
 </chart-demo>
 
-## Updating full data
+### Updating full data
+
+Another way is to simply update the entire data, including annotations, by passing the entire new `data` object to `update`.
+
+```js
+chart.update(data);
+```
 
 <chart-demo data="get-update-data" v-bind:config="{
-        type: 'bar',
+        type: 'line',
         height: 200
     }"
 	v-bind:actions="[
@@ -34,6 +58,3 @@ There are two ways to update data in a chart: either in adding and removing indi
 	]">
 </chart-demo>
 
-
-[update data with varying lengths]
-

docs/update_state/navigation.md

@@ -0,0 +1,23 @@
+# Navigation
+
+<chart-demo data="2" v-bind:config="{
+        type: 'bar',
+        height: 140,
+		isNavigable: 1,
+        colors: ['orange'],
+        axisOptions: { xAxisMode: 'tick' },
+        barOptions: { spaceRatio: 0.2 },
+    }">
+</chart-demo>
+
+
+<chart-demo data="2" sideContent="2"
+	v-bind:config="{
+        type: 'bar',
+        height: 140,
+		isNavigable: 1,
+        colors: ['grey'],
+        axisOptions: { xAxisMode: 'tick' },
+        barOptions: { spaceRatio: 0.2 },
+    }">
+</chart-demo>

docs/vuestyle.css

@@ -35,7 +35,7 @@ div#app:empty:before {
 }
 
 .progress {
-	background-color: var(--theme-color, #42b983);
+	background-color: var(--theme-color, #7b85f2);
 	height: 2px;
 	left: 0;
 	position: fixed;
@@ -48,7 +48,7 @@ div#app:empty:before {
 
 .search .search-keyword,
 .search a:hover {
-	color: var(--theme-color, #42b983)
+	color: var(--theme-color, #7b85f2)
 }
 
 .search .search-keyword {
@@ -138,11 +138,11 @@ li input[type=checkbox] {
 
 .app-nav a.active,
 .app-nav a:hover {
-	color: var(--theme-color, #42b983)
+	color: var(--theme-color, #7b85f2)
 }
 
 .app-nav a.active {
-	border-bottom: 2px solid var(--theme-color, #42b983)
+	border-bottom: 2px solid var(--theme-color, #7b85f2)
 }
 
 .app-nav li {
@@ -208,7 +208,7 @@ li input[type=checkbox] {
 
 .github-corner svg {
 	color: #fff;
-	fill: var(--theme-color, #42b983);
+	fill: var(--theme-color, #7b85f2);
 	height: 80px;
 	width: 80px
 }
@@ -339,7 +339,7 @@ main.hidden {
 }
 
 .sidebar-toggle span {
-	background-color: var(--theme-color, #42b983);
+	background-color: var(--theme-color, #7b85f2);
 	display: block;
 	margin-bottom: 4px;
 	width: 16px;
@@ -630,10 +630,10 @@ section.cover ul {
 }
 
 section.cover .cover-main>p:last-child a {
-	border: 1px solid var(--theme-color, #42b983);
+	border: 1px solid var(--theme-color, #7b85f2);
 	border-radius: 2rem;
 	box-sizing: border-box;
-	color: var(--theme-color, #42b983);
+	color: var(--theme-color, #7b85f2);
 	display: inline-block;
 	font-size: 1.05rem;
 	letter-spacing: .1rem;
@@ -644,7 +644,7 @@ section.cover .cover-main>p:last-child a {
 }
 
 section.cover .cover-main>p:last-child a:last-child {
-	background-color: var(--theme-color, #42b983);
+	background-color: var(--theme-color, #7b85f2);
 	color: #fff
 }
 
@@ -658,12 +658,12 @@ section.cover .cover-main>p:last-child a:hover {
 }
 
 section.cover blockquote>p>a {
-	border-bottom: 2px solid var(--theme-color, #42b983);
+	border-bottom: 2px solid var(--theme-color, #7b85f2);
 	transition: color .3s
 }
 
 section.cover blockquote>p>a:hover {
-	color: var(--theme-color, #42b983)
+	color: var(--theme-color, #7b85f2)
 }
 
 .sidebar,
@@ -699,7 +699,7 @@ body {
 
 .sidebar ul li.active>a {
 	border-right: 2px solid;
-	color: var(--theme-color, #42b983);
+	color: var(--theme-color, #7b85f2);
 	font-weight: 600
 }
 
@@ -719,7 +719,7 @@ body {
 }
 
 .markdown-section a {
-	color: var(--theme-color, #42b983);
+	color: var(--theme-color, #7b85f2);
 	font-weight: 600
 }
 
@@ -769,7 +769,7 @@ body {
 }
 
 .markdown-section blockquote {
-	border-left: 4px solid var(--theme-color, #42b983);
+	border-left: 4px solid var(--theme-color, #7b85f2);
 	color: #858585;
 	margin: 2em 0;
 	padding-left: 20px
@@ -843,7 +843,7 @@ body {
 }
 
 .token.string {
-	color: var(--theme-color, #42b983)
+	color: var(--theme-color, #7b85f2)
 }
 
 .token.selector {
@@ -865,7 +865,7 @@ body {
 .token.control,
 .token.directive,
 .token.unit {
-	color: var(--theme-color, #42b983)
+	color: var(--theme-color, #7b85f2)
 }
 
 .token.keyword {

docs/wrappers.md

@@ -0,0 +1,4 @@
+- [@tobiaslins](https://github.com/tobiaslins) contributed tweaks for his quest to make these easy to use with React. Check out his [repo]
+- [@iamkdev's](https://github.com/iamkdev) blog on [usage with Angular](https://medium.com/@iamkdev/frappé-charts-with-angular-c9c5dd075d9f).
+- A [Ruby Gem](https://github.com/pacuna/frappe_charts).
+

src/js/utils/dom.js

@@ -34,6 +34,11 @@ $.create = (tag, o) => {
 				val(element.value);
 			});
 
+		} else if (i === "onChange" ) {
+			element.addEventListener('change', function(e) {
+				val(element.value);
+			});
+
 		} else if (i === "styles") {
 			if(typeof val === "object") {
 				Object.keys(val).map(prop => {