[demoBuilder] add numeric toggle

dist/frappe-charts.esm.js

@@ -21,6 +21,11 @@ $.create = (tag, o) => {
 		} else if (i === "onClick" ) {
 			element.addEventListener('click', val);
 
+		} else if (i === "onInput" ) {
+			element.addEventListener('input', function(e) {
+				val(element.value);
+			});
+
 		} else if (i === "styles") {
 			if(typeof val === "object") {
 				Object.keys(val).map(prop => {
@@ -144,7 +149,7 @@ const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
 const AXIS_LEGEND_BAR_SIZE = 100;
 
 const BAR_CHART_SPACE_RATIO = 1;
-const MIN_BAR_PERCENT_HEIGHT = 0.01;
+const MIN_BAR_PERCENT_HEIGHT = 0.02;
 
 const LINE_CHART_DOT_SIZE = 4;
 const DOT_OVERLAY_SIZE_INCR = 4;

dist/frappe-charts.min.cjs.js

@@ -166,6 +166,10 @@ $.create = function (tag, o) {
 			element.appendChild(ref);
 		} else if (i === "onClick") {
 			element.addEventListener('click', val);
+		} else if (i === "onInput") {
+			element.addEventListener('input', function (e) {
+				val(element.value);
+			});
 		} else if (i === "styles") {
 			if ((typeof val === "undefined" ? "undefined" : _typeof(val)) === "object") {
 				Object.keys(val).map(function (prop) {
@@ -281,7 +285,7 @@ var AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
 var AXIS_LEGEND_BAR_SIZE = 100;
 
 var BAR_CHART_SPACE_RATIO = 1;
-var MIN_BAR_PERCENT_HEIGHT = 0.01;
+var MIN_BAR_PERCENT_HEIGHT = 0.02;
 
 var LINE_CHART_DOT_SIZE = 4;
 var DOT_OVERLAY_SIZE_INCR = 4;

dist/frappe-charts.min.esm.js

@@ -162,6 +162,10 @@ $.create = function (tag, o) {
 			element.appendChild(ref);
 		} else if (i === "onClick") {
 			element.addEventListener('click', val);
+		} else if (i === "onInput") {
+			element.addEventListener('input', function (e) {
+				val(element.value);
+			});
 		} else if (i === "styles") {
 			if ((typeof val === "undefined" ? "undefined" : _typeof(val)) === "object") {
 				Object.keys(val).map(function (prop) {
@@ -277,7 +281,7 @@ var AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
 var AXIS_LEGEND_BAR_SIZE = 100;
 
 var BAR_CHART_SPACE_RATIO = 1;
-var MIN_BAR_PERCENT_HEIGHT = 0.01;
+var MIN_BAR_PERCENT_HEIGHT = 0.02;
 
 var LINE_CHART_DOT_SIZE = 4;
 var DOT_OVERLAY_SIZE_INCR = 4;

docs/assets/js/docsBuilder.js

@@ -107,41 +107,53 @@ class docSection {
 			});
 			const mapKeys = o.mapKeys;
 
-			if(o.type === "map") {
-				args[o.path[0]] = {};
-			}
-
-			const inputGroup = $.create('input', {
-				inside: btnGroup,
-				// className: `form-control`,
-				// innerHTML: `<input type="text" class="form-control" placeholder="Username"
-				// 	aria-label="Username" aria-describedby="basic-addon1">`
-			});
+			if(o.type === "number") {
+				let numOpts = o.numberOptions;
 
-			Object.keys(o.states).forEach(key => {
-				let state = o.states[key];
-				let activeClass = key === o.activeState ? 'active' : '';
-
-				let button = $.create('button', {
+				const inputGroup = $.create('input', {
 					inside: btnGroup,
-					className: `btn btn-sm btn-secondary ${activeClass}`,
-					innerHTML: key,
-					onClick: (e) => {
-						// map
-						if(o.type === "map") {
-							mapKeys.forEach((attr, i) => {
-								args[o.path[0]][attr] = state[i];
-							})
-						} else {
-							// boolean, string, number, object
-							args[o.path[0]] = state;
-						}
+					className: `form-control`,
+					type: "range",
+					min: numOpts.min,
+					max: numOpts.max,
+					step: numOpts.step,
+					value: o.activeState ? o.activeState : 0,
+					// (max - min)/2
+					onInput: (value) => {
+						args[o.path[0]][o.path[1]] = value;
+
 						this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
 					}
 				});
 
-				if(activeClass) { button.click(); }
-			});
+			} else if(["map", "string"].includes(o.type)) {
+				args[o.path[0]] = {};
+
+				Object.keys(o.states).forEach(key => {
+					let state = o.states[key];
+					let activeClass = key === o.activeState ? 'active' : '';
+
+					let button = $.create('button', {
+						inside: btnGroup,
+						className: `btn btn-sm btn-secondary ${activeClass}`,
+						innerHTML: key,
+						onClick: (e) => {
+							// map
+							if(o.type === "map") {
+								mapKeys.forEach((attr, i) => {
+									args[o.path[0]][attr] = state[i];
+								})
+							} else {
+								// boolean, string, number, object
+								args[o.path[0]] = state;
+							}
+							this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
+						}
+					});
+
+					if(activeClass) { button.click(); }
+				});
+			}
 		});
 	}
 

docs/basic/aggr_sliced_diags.md

@@ -1 +1,25 @@
-## Sliced Diagrams
+## AKA Sliced Diagrams
+Another family of charts, the aggregation charts accumulate the value at a data point across the multiple datasets.
+
+**The data format stays the same.**
+
+## Pie chart
+Perhaps the most well-known representation of data slices are Pie charts:
+
+```js
+
+```
+
+
+## Percentage Charts FTW
+
+Pies have received some [criticism]() for data perception; we are much better at parsing sizes in a single dimension rather than an area. That's why, the much leaner `percentage` chart can come in handy:
+
+```js
+type: 'percentage'
+```
+
+## Limiting the slices
+When there are too many to make sense
+
+11

docs/demoRegistry.js

@@ -47,16 +47,14 @@ export const demoRegistry = {
 		options: [
 			{
 				name: "barOptions",
-				path: ["barOptions"],
-				type: "map",
-				mapKeys: ['spaceRatio'],
-				states: {
-					"0.2": [0.2],
-					"0.5": [0.5],
-					"1": [1],
-					"1.5": [1.5]
+				path: ["barOptions", "spaceRatio"],
+				type: "number",
+				numberOptions: {
+					min: 0.1,
+					max: 1.9,
+					step: 0.1,
 				},
-				activeState: "0.2"
+				activeState: 0.2
 			}
 		]
 	},
@@ -77,16 +75,14 @@ export const demoRegistry = {
 		options: [
 			{
 				name: "lineOptions",
-				path: ["lineOptions"],
-				type: "map",
-				mapKeys: ['dotSize'],
-				states: {
-					"3": [3],
-					"4": [4],
-					"8": [8],
-					"10": [10],
+				path: ["lineOptions", "dotSize"],
+				type: "number",
+				numberOptions: {
+					min: 3,
+					max: 10,
+					step: 1
 				},
-				activeState: "8"
+				activeState: 8
 			}
 		]
 	},

docs/update_state/modify_data.md

@@ -0,0 +1,9 @@
+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 full data
+
+[update data with varying lengths]
+

package.json

@@ -39,19 +39,19 @@
     "babel-plugin-istanbul": "^4.1.5",
     "babel-preset-env": "^1.6.1",
     "babel-preset-latest": "^6.24.1",
-    "clean-css": "^4.1.11",
     "babel-register": "^6.26.0",
+    "clean-css": "^4.1.11",
     "coveralls": "^3.0.0",
     "cross-env": "^5.1.4",
     "cssnano": "^3.10.0",
     "eslint": "^4.18.2",
     "fs": "0.0.1-security",
-    "livereload": "^0.6.3",
+    "livereload": "^0.7.0",
     "mocha": "^5.0.5",
     "node-sass": "^4.7.2",
     "npm-run-all": "^4.1.1",
-    "postcss": "^6.0.21",
     "nyc": "^11.6.0",
+    "postcss": "^6.0.21",
     "postcss-cssnext": "^3.0.2",
     "postcss-nested": "^2.1.2",
     "precss": "^3.1.2",
@@ -65,6 +65,5 @@
     "rollup-plugin-uglify-es": "0.0.1",
     "rollup-watch": "^4.3.1"
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }

src/js/utils/constants.js

@@ -77,7 +77,7 @@ export const AXIS_CHART_OPTIONS = {
 export const AXIS_LEGEND_BAR_SIZE = 100;
 
 export const BAR_CHART_SPACE_RATIO = 1;
-export const MIN_BAR_PERCENT_HEIGHT = 0.01;
+export const MIN_BAR_PERCENT_HEIGHT = 0.02;
 
 export const LINE_CHART_DOT_SIZE = 4;
 export const DOT_OVERLAY_SIZE_INCR = 4;

src/js/utils/dom.js

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

yarn.lock

@@ -2720,13 +2720,13 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-livereload@^0.6.3:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/livereload/-/livereload-0.6.3.tgz#d97f6b133db6c70eff575abc7460f10cd35f6f76"
+livereload@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/livereload/-/livereload-0.7.0.tgz#38238dd155ffb251191697f737b6b13f471da115"
   dependencies:
     chokidar "^1.7.0"
     opts ">= 1.2.0"
-    ws "^1.1.1"
+    ws "^1.1.5"
 
 load-json-file@^1.0.0:
   version "1.1.0"
@@ -5200,7 +5200,7 @@ write@^0.2.1:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^1.1.1:
+ws@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
   dependencies: