[docs] complete trends_regions.md, regionFill -> areaFill

dist/frappe-charts.esm.js

@@ -982,7 +982,7 @@ function getPaths(xList, yList, color, options={}, meta={}) {
 	};
 
 	// Region
-	if(options.regionFill) {
+	if(options.areaFill) {
 		let gradient_id_region = makeGradient(meta.svgDefs, color, true);
 
 		let pathStr = "M" + `${xList[0]},${meta.zeroLine}L` + pointsStr + `L${xList.slice(-1)[0]},${meta.zeroLine}`;
@@ -2177,7 +2177,7 @@ let componentConfigs = {
 					c.color,
 					{
 						heatline: c.heatline,
-						regionFill: c.regionFill
+						areaFill: c.areaFill
 					},
 					{
 						svgDefs: c.svgDefs,
@@ -3406,7 +3406,7 @@ class AxisChart extends BaseChart {
 					color: this.colors[index],
 					svgDefs: this.svgDefs,
 					heatline: this.lineOptions.heatline,
-					regionFill: this.lineOptions.regionFill,
+					areaFill: this.lineOptions.areaFill,
 					hideDots: this.lineOptions.hideDots,
 					hideLine: this.lineOptions.hideLine,
 

dist/frappe-charts.min.cjs.js

@@ -1198,7 +1198,7 @@ function getPaths(xList, yList, color) {
 	};
 
 	// Region
-	if (options.regionFill) {
+	if (options.areaFill) {
 		var gradient_id_region = makeGradient(meta.svgDefs, color, true);
 
 		var pathStr = "M" + (xList[0] + ',' + meta.zeroLine + 'L') + pointsStr + ('L' + xList.slice(-1)[0] + ',' + meta.zeroLine);
@@ -2578,7 +2578,7 @@ var componentConfigs = {
 			if (!c.hideLine) {
 				this.paths = getPaths(data.xPositions, data.yPositions, c.color, {
 					heatline: c.heatline,
-					regionFill: c.regionFill
+					areaFill: c.areaFill
 				}, {
 					svgDefs: c.svgDefs,
 					zeroLine: data.zeroLine
@@ -3978,7 +3978,7 @@ var AxisChart = function (_BaseChart) {
 					color: _this3.colors[index],
 					svgDefs: _this3.svgDefs,
 					heatline: _this3.lineOptions.heatline,
-					regionFill: _this3.lineOptions.regionFill,
+					areaFill: _this3.lineOptions.areaFill,
 					hideDots: _this3.lineOptions.hideDots,
 					hideLine: _this3.lineOptions.hideLine,
 

dist/frappe-charts.min.esm.js

@@ -1194,7 +1194,7 @@ function getPaths(xList, yList, color) {
 	};
 
 	// Region
-	if (options.regionFill) {
+	if (options.areaFill) {
 		var gradient_id_region = makeGradient(meta.svgDefs, color, true);
 
 		var pathStr = "M" + (xList[0] + ',' + meta.zeroLine + 'L') + pointsStr + ('L' + xList.slice(-1)[0] + ',' + meta.zeroLine);
@@ -2574,7 +2574,7 @@ var componentConfigs = {
 			if (!c.hideLine) {
 				this.paths = getPaths(data.xPositions, data.yPositions, c.color, {
 					heatline: c.heatline,
-					regionFill: c.regionFill
+					areaFill: c.areaFill
 				}, {
 					svgDefs: c.svgDefs,
 					zeroLine: data.zeroLine
@@ -3974,7 +3974,7 @@ var AxisChart = function (_BaseChart) {
 					color: _this3.colors[index],
 					svgDefs: _this3.svgDefs,
 					heatline: _this3.lineOptions.heatline,
-					regionFill: _this3.lineOptions.regionFill,
+					areaFill: _this3.lineOptions.areaFill,
 					hideDots: _this3.lineOptions.hideDots,
 					hideLine: _this3.lineOptions.hideLine,
 

docs/_sidebar.md

@@ -3,7 +3,7 @@
 
 * Axis charts
   * [A basic chart](basic/basic_chart.md)
-  * [Trends and Region Charts](basic/trends_regions.md)
+  * [Area and Trends Charts](basic/trends_regions.md)
   * [Annotations and Tooltip format](basic/annotations.md)
   * [Stacked and Mixed Charts](basic/stacked_and_mixed.md)
 

docs/assets/js/demoConfig.js

@@ -135,7 +135,7 @@ export const demoSections = [
                     height: 300,
                     colors: ['#ff6c03'],
                     lineOptions: {
-                        regionFill: 1
+                        areaFill: 1
                     }
                 },
                 actions: [
@@ -187,12 +187,12 @@ export const demoSections = [
                         name: "lineOptions",
                         path: ["lineOptions"],
                         type: "map",
-                        mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
+                        mapKeys: ['hideLine', 'hideDots', 'heatline', 'areaFill'],
                         states: {
                             "Line": [0, 1, 0, 0],
                             "Dots": [1, 0, 0, 0],
                             "HeatLine": [0, 1, 1, 0],
-                            "Region": [0, 1, 0, 1]
+                            "Area": [0, 1, 0, 1]
                         },
                         activeState: "HeatLine"
                     }
@@ -363,7 +363,7 @@ export const demoSections = [
       hideLine: 0,         // default: 0
       hideDots: 1,         // default: 0
       heatline: 1,         // default: 0
-      regionFill: 1        // default: 0
+      areaFill: 1        // default: 0
     }
 
     axisOptions: {

docs/basic/basic_chart.md

@@ -1,6 +1,6 @@
-## What is it
+## Axis chart: 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:
+An axis chart is generally a 2D rendition of data, where a set of values corresponds to every point in a dataset. That's why, data is the most important component for a chart. For example, for some values across items, the data could look like:
 ```js
 data = {
 	labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
@@ -50,6 +50,7 @@ data: {
     ]
 }
 ```
+Notice that this case demonstrates why the `colors` option is an array. We'll see more about it ahead.
 <chart-demo data="1" v-bind:config="{
         type: 'line',
         height: 200,

docs/basic/trends_regions.md

@@ -1,33 +1,140 @@
-## Plotting Trends
-Line charts a great to show trends data. Given that such data usually involves a large number of data points. Changing some properties of a default line chart can reduce clutter.
-
-The X axis is a continuous (usually time) axis.
-
-
-## Data points
-For a homomorphic to plot
-
-Or you could just choose to show only the dots instead
-
-
-
-## Region Chart
-
-Or a more subtle way to show gradation of values.
+## Area Chart
+An area chart is derived from a line chart, by marking the area between the X axis and the line plot. It is usually used to compare the areas under the curve for two or more different plots.
 
+```js
+lineOptions: {
+	areaFill: 1 // default: 0
+},
+```
+<chart-demo data="1"
+	v-bind:config="{
+		type: 'line',
+		height: 240,
+		colors: ['violet'],
+		lineOptions: {
+			areaFill: 1
+		},
+	}">
+</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.
 
+## 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`.
 
-## Combinations
+```js
+axisOptions: {
+	xIsSeries: true // default: false
+},
+```
+This results only some of the X ticks having a label.
+<chart-demo data="trends-data"
+	v-bind:config="{
+		type: 'line',
+		height: 180,
+		colors: ['violet'],
+		axisOptions: {
+			xAxisMode: 'tick',
+			xIsSeries: 1
+		}
+	}">
+</chart-demo>
+
+The line plot in the above plot could still be simplified. For example, to maintain uniformity, we could opt out of showing the dots at all, with `hideDots`.
 ```js
 lineOptions: {
-	dotSize: 8 // default: 4
+	hideDots: 1 // default: 0
 },
 ```
+<chart-demo data="trends-data"
+	v-bind:config="{
+		type: 'line',
+		height: 180,
+		colors: ['violet'],
+		axisOptions: {
+			xAxisMode: 'tick',
+			xIsSeries: 1
+		},
+		lineOptions: {
+			hideDots: 1
+		},
+	}">
+</chart-demo>
+
+Or you could just choose to show only the dots instead.
+```js
+lineOptions: {
+	hideLine: 1 // default: 0
+},
+```
+<chart-demo data="trends-data"
+	v-bind:config="{
+		type: 'line',
+		height: 180,
+		colors: ['violet'],
+		axisOptions: {
+			xAxisMode: 'tick',
+			xIsSeries: 1
+		},
+		lineOptions: {
+			hideLine: 1
+		},
+	}">
+</chart-demo>
+Needless to say, turning both of them on would be too amusing to be of any use :)
+
+A subtle way to show gradation of values is to render a change in color with the magnitude of the values. The property that does this is called `heatline`.
+```js
+lineOptions: {
+	heatline: 1 // default: 0
+},
+```
+<chart-demo data="trends-data"
+	v-bind:config="{
+		type: 'line',
+		height: 180,
+		colors: ['violet'],
+		axisOptions: {
+			xAxisMode: 'tick',
+			xIsSeries: 1
+		},
+		lineOptions: {
+			hideDots: 1,
+			heatline: 1
+		},
+	}">
+</chart-demo>
 
+## Combinations
 Here's a demo using different combinations of the line options.
 
-<div class="demo" id="line-trends-region-toggle"></div>
+<chart-demo data="trends-data"
+	v-bind:config="{
+		type: 'line',
+		height: 200,
+		colors: ['violet'],
+		axisOptions: {
+			xAxisMode: 'tick',
+			xIsSeries: 1
+		}
+	}"x
+    v-bind:options="[
+		{
+			name: 'lineOptions',
+			path: ['lineOptions'],
+			type: 'map',
+			mapKeys: ['hideLine', 'hideDots', 'heatline', 'areaFill'],
+			states: {
+				'Line': [0, 1, 0, 0],
+				'Dots': [1, 0, 0, 0],
+				'HeatLine': [0, 1, 1, 0],
+				'Area': [0, 1, 0, 1]
+			},
+			activeState: 'Area'
+		}
+    ]">
+</chart-demo>
 
 Next up, we'll play around with more than one datasets play out in charts.
 

docs/data.js

@@ -25,5 +25,21 @@ const sampleData = {
 			{ values: [300, 250, 720, 560, 370, 610, 690, 410,
 				370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }
 		]
+	},
+	"trends-data": {
+		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: [
+			{
+				values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4,
+					39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8,
+					33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6,
+					28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7,
+					12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
+			}
+		]
 	}
 }

docs/getting_started/quick_start.md

@@ -48,3 +48,10 @@ const chart = new frappe.Chart("#chart", {  // or a DOM element,
 
 ## Demo
 Here's a demo to try out yourself:
+<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>

docs/index.html

@@ -125,8 +125,6 @@
     };
   </script>
 
-  <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-
   <script src="//unpkg.com/docsify/lib/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>

docs/index.js

@@ -1,6 +1,5 @@
 import { docsBuilder } from './assets/js/docsBuilder';
 import { Chart } from "../dist/frappe-charts.min.esm";
-import { demoRegistry } from './demoRegistry';
 
 import { $, insertAfter } from '../src/js/utils/dom';
 import { fireballOver25, fireball_2_5, fireball_5_25 } from './assets/js/data';

docs/index.min.js

@@ -1700,7 +1700,7 @@ function getPaths(xList, yList, color) {
 	};
 
 	// Region
-	if (options.regionFill) {
+	if (options.areaFill) {
 		var gradient_id_region = makeGradient(meta.svgDefs, color, true);
 
 		var pathStr = "M" + (xList[0] + ',' + meta.zeroLine + 'L') + pointsStr + ('L' + xList.slice(-1)[0] + ',' + meta.zeroLine);
@@ -3205,7 +3205,7 @@ var componentConfigs = {
 			if (!c.hideLine) {
 				this.paths = getPaths(data.xPositions, data.yPositions, c.color, {
 					heatline: c.heatline,
-					regionFill: c.regionFill
+					areaFill: c.areaFill
 				}, {
 					svgDefs: c.svgDefs,
 					zeroLine: data.zeroLine
@@ -4782,7 +4782,7 @@ var AxisChart = function (_BaseChart) {
 					color: _this3.colors[index],
 					svgDefs: _this3.svgDefs,
 					heatline: _this3.lineOptions.heatline,
-					regionFill: _this3.lineOptions.regionFill,
+					areaFill: _this3.lineOptions.areaFill,
 					hideDots: _this3.lineOptions.hideDots,
 					hideLine: _this3.lineOptions.hideLine,
 
@@ -5493,7 +5493,7 @@ var demoSections = [{
             height: 300,
             colors: ['#ff6c03'],
             lineOptions: {
-                regionFill: 1
+                areaFill: 1
             }
         },
         actions: [{
@@ -5535,7 +5535,7 @@ var demoSections = [{
             name: "lineOptions",
             path: ["lineOptions"],
             type: "map",
-            mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
+            mapKeys: ['hideLine', 'hideDots', 'heatline', 'areaFill'],
             states: {
                 "Line": [0, 1, 0, 0],
                 "Dots": [1, 0, 0, 0],
@@ -5625,7 +5625,7 @@ var demoSections = [{
     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  '
+        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      areaFill: 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  '
     }]
 }, {
     title: "Install",
@@ -5662,44 +5662,4 @@ if (document.querySelectorAll('#line-composite-1').length && !document.querySele
 	});
 }
 
-window.$docsify = {
-	name: 'frappe-charts',
-	// repo: 'https://github.com/frappe/charts',
-	loadSidebar: true,
-	subMaxLevel: 2,
-	executeScript: true
-	// plugins: [
-	// 	function(hook, vm) {
-	// 		hook.doneEach(function() {
-	// 			let demos = document.querySelectorAll('.demo')
-
-	// 			for (var i = 0; i < demos.length; ++i) {
-	// 				let el = demos[i];
-	// 				let id = el.getAttribute("id");
-	// 				dbd.makeSection(el, demoRegistry[id]);
-	// 			}
-
-	// 		});
-
-	// 		// hook.ready(function() {
-	// 		// 	let scripts = document.querySelectorAll('script');
-	// 		// 	for (var i = 0; i < scripts.length; ++i) {
-	// 		// 		let el = scripts[i];
-	// 		// 		let id = el.getAttribute("id");
-
-	// 		// 		let demoDiv = $.create('div', {className: `${id}`});
-	// 		// 		insertAfter(demoDiv, el);
-	// 		// 		console.log(demoStore);
-	// 		// 		dbd.makeSection(demoDiv, demoStore[id]);
-	// 		// 	}
-	// 		// });
-	// 	}
-	// ]
-};
-
-document.querySelector("#docs-link").addEventListener('click', function () {
-	document.querySelector("#home-page").classList.add("hide");
-	document.querySelector("main").classList.remove("hide");
-});
-
 }());

src/js/charts/AxisChart.js

@@ -294,7 +294,7 @@ export default class AxisChart extends BaseChart {
 					color: this.colors[index],
 					svgDefs: this.svgDefs,
 					heatline: this.lineOptions.heatline,
-					regionFill: this.lineOptions.regionFill,
+					areaFill: this.lineOptions.areaFill,
 					hideDots: this.lineOptions.hideDots,
 					hideLine: this.lineOptions.hideLine,
 

src/js/objects/ChartComponents.js

@@ -354,7 +354,7 @@ let componentConfigs = {
 					c.color,
 					{
 						heatline: c.heatline,
-						regionFill: c.regionFill
+						areaFill: c.areaFill
 					},
 					{
 						svgDefs: c.svgDefs,

src/js/utils/draw.js

@@ -551,7 +551,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
 	};
 
 	// Region
-	if(options.regionFill) {
+	if(options.areaFill) {
 		let gradient_id_region = makeGradient(meta.svgDefs, color, true);
 
 		let pathStr = "M" + `${xList[0]},${meta.zeroLine}L` + pointsStr + `L${xList.slice(-1)[0]},${meta.zeroLine}`;