[fixes] docs init, fix multi demos and axis override

dist/frappe-charts.esm.js

@@ -102,6 +102,7 @@ const BASE_MEASURES = {
 	},
 
 	baseHeight: 240,
+
 	titleHeight: 20,
 	legendHeight: 30,
 
@@ -133,7 +134,9 @@ function getExtraWidth(m) {
 const INIT_CHART_UPDATE_TIMEOUT = 700;
 const CHART_POST_ANIMATE_TIMEOUT = 400;
 
-const DEFAULT_AXIS_CHART_TYPE = 'line';
+const AXIS_CHART_DEFAULT_TYPE = 'line';
+
+
 const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
 
 const AXIS_LEGEND_BAR_SIZE = 100;
@@ -301,6 +304,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));
 }
@@ -1357,7 +1364,7 @@ class BaseChart {
 		this.rawChartArgs = options;
 
 		this.title = options.title || '';
-		this.type = options.type || '';
+		this.type = options.type || 'line';
 
 		this.realData = this.prepareData(options.data);
 		this.data = this.prepareFirstData(this.realData);
@@ -2994,6 +3001,11 @@ function dataPrep(data, type) {
 		}];
 	}
 
+	let overridingType;
+	if(AXIS_DATASET_CHART_TYPES.includes(type)) {
+		overridingType = type;
+	}
+
 	datasets.map(d=> {
 		// Set values
 		if(!d.values) {
@@ -3012,14 +3024,13 @@ function dataPrep(data, type) {
 		}
 
 		// Set labels
-		//
 
 		// Set type
-		if(!d.chartType ) {
-			if(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE;
-			d.chartType = type;
+		if(overridingType) {
+			d.chartType = overridingType;
+		} else if(!d.chartType) {
+			d.chartType = AXIS_CHART_DEFAULT_TYPE;
 		}
-
 	});
 
 	// Markers
@@ -3109,7 +3120,6 @@ class AxisChart extends BaseChart {
 		this.barOptions = args.barOptions || {};
 		this.lineOptions = args.lineOptions || {};
 
-		this.type = args.type || 'line';
 		this.init = 1;
 
 		this.setup();
@@ -3676,6 +3686,7 @@ class AxisChart extends BaseChart {
 	// removeDataPoint(index = 0) {}
 }
 
+// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	bar: AxisChart,
 	line: AxisChart,

docs/assets/js/data.js

@@ -278,3 +278,18 @@ export const heatmapData = {
 	end: end
 };
 
+export const sampleData = {
+	0: {
+		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+		datasets: [
+			{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
+		]
+	},
+	1: {
+		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] }
+		]
+	}
+}

docs/assets/js/demoConfig.js

@@ -200,7 +200,6 @@ export const demoSections = [
                 actions: [{ name: "Export ...", fn: "export", args: [] }]
             }
         ],
-
     },
 
     {

docs/assets/js/docsBuilder.js

@@ -17,6 +17,7 @@ class docSection {
 		this.parent = parent;  // should be preferably a section
 		this.sys = sys;
 		this.blockMap = {};
+		this.demos = [];
 
 		this.make();
 	}
@@ -24,7 +25,9 @@ class docSection {
 	make() {
 		// const section = document.querySelector(this.parent);
 		let s = this.sys;
-		$.create('h6', { inside: this.parent, innerHTML: s.title });
+		if(s.title) {
+			$.create('h6', { inside: this.parent, innerHTML: s.title });
+		}
 
 		s.contentBlocks.forEach((blockConf, index) => {
 			this.blockMap[index] = this.getBlock(blockConf);
@@ -77,17 +80,20 @@ class docSection {
 			figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
 			row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
 		}
-		this.libObj = new this.LIB_OBJ(figure, args);
+
+		let libObj = new this.LIB_OBJ(figure, args);
+		let demoIndex = this.demos.length;
+		this.demos.push(libObj);
 
 		if(bc.postSetup) {
-			bc.postSetup(this.libObj, figure, row);
+			bc.postSetup(this.demos[demoIndex], figure, row);
 		}
 
-		this.getDemoOptions(bc.options, args, figure);
-		this.getDemoActions(bc.actions, args);
+		this.getDemoOptions(demoIndex, bc.options, args, figure);
+		this.getDemoActions(demoIndex, bc.actions, args);
 	}
 
-	getDemoOptions(options=[], args={}, figure) {
+	getDemoOptions(demoIndex, options=[], args={}, figure) {
 		options.forEach(o => {
 			const btnGroup = $.create('div', {
 				inside: this.parent,
@@ -117,7 +123,7 @@ class docSection {
 							// boolean, string, number, object
 							args[o.path[0]] = state;
 						}
-						this.libObj = new this.LIB_OBJ(figure, args);
+						this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
 					}
 				});
 
@@ -126,14 +132,14 @@ class docSection {
 		});
 	}
 
-	getDemoActions(actions=[], args={}) {
+	getDemoActions(demoIndex, actions=[], args={}) {
 		actions.forEach(o => {
 			let args = o.args || [];
 			$.create('button', {
 				inside: this.parent,
 				className: `btn btn-action btn-sm btn-secondary`,
 				innerHTML: o.name,
-				onClick: () => {this.libObj[o.fn](...args);}
+				onClick: () => {this.demos[demoIndex][o.fn](...args);}
 			});
 		});
 	}

docs/assets/js/docsConfig.js

@@ -0,0 +1,83 @@
+import { sampleData } from './data';
+
+export const docSections = [
+	{
+		name: "start",
+		contentBlocks: [
+			{
+				type: "text",
+				content: `A chart is generally a 2D rendition of data. For example, f
+					or 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: "text",
+				content: `Plug that in with a type 'bar', 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: 'line',
+                    height: 140,
+                    colors: ['red'],
+                },
+			},
+			{
+				type: "text",
+				content: `Similar is a 'line' chart:`
+			},
+			{
+				type: "code",
+				content: `    ...
+    type: 'line',
+    ...`
+			},
+			{
+				type: "demo",
+				config: {
+                    data: sampleData[0],
+                    type: 'bar',
+                    height: 140,
+                    colors: ['blue'],
+                },
+			}
+		]
+	},
+	{
+		title: "Adding more datasets",
+		name: "multi-dataset",
+		contentBlocks: [
+			{
+				type: "text",
+				content: `Having more datasets, as in an axis chart, every dataset is represented individually.`
+			},
+			{
+				type: "demo",
+				config: {
+                    data: sampleData[1],
+                    type: 'line',
+                    height: 200,
+                    colors: ['yellow', 'light-green'],
+                },
+			}
+		]
+	}
+]

docs/assets/js/index.js

@@ -1,25 +1,32 @@
 import { $, insertAfter } from '../../../src/js/utils/dom';
 import { fireballOver25, fireball_2_5, fireball_5_25 } from './data';
 import { lineComposite, barComposite, demoSections} from './demoConfig';
+import { docSections } from './docsConfig';
 import { docsBuilder } from './docsBuilder';
 
 let Chart = frappe.Chart; // eslint-disable-line no-undef
 let dbd = new docsBuilder(Chart);
+let currentElement = document.querySelector('header');
+let sections;
 
-let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
-let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
+if(window.location.pathname.split("/").pop().includes('index')) {
+	let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
+	let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
 
-lineCompositeChart.parent.addEventListener('data-select', (e) => {
-	let i = e.index;
-	barCompositeChart.updateDatasets([
-		fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
-	]);
-});
+	lineCompositeChart.parent.addEventListener('data-select', (e) => {
+		let i = e.index;
+		barCompositeChart.updateDatasets([
+			fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
+		]);
+	});
 
-let currentElement = document.querySelector('header');
+	sections = demoSections;
+} else {
+	sections = docSections;
+}
 
-demoSections.forEach(sectionConf => {
-	let sectionEl = $.create('section', { className: sectionConf.name });
+sections.forEach(sectionConf => {
+	let sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
 	insertAfter(sectionEl, currentElement);
 	currentElement = sectionEl;
 	dbd.makeSection(sectionEl, sectionConf);

docs/assets/js/index.min.js

@@ -214,7 +214,6 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
 
 
 
-// https://stackoverflow.com/a/11252167/6495043
 
 
 function clone(date) {
@@ -273,6 +272,12 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
 
 // Universal constants
 
+/**
+ * Returns the value of a number upto 2 decimal places.
+ * @param {Number} d Any number
+ */
+
+
 /**
  * Returns whether or not two given arrays are equal.
  * @param {Array} arr1 First array
@@ -335,6 +340,8 @@ function toTitleCase(str) {
 	});
 }
 
+// Composite Chart
+// ================================================================================
 var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
 
 var lineCompositeData = {
@@ -548,6 +555,17 @@ var heatmapData = {
 	end: end
 };
 
+var sampleData = {
+	0: {
+		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+		datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]
+	},
+	1: {
+		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] }]
+	}
+};
+
 var lineComposite = {
     config: {
         title: "Fireball/Bolide Events - Yearly (reported)",
@@ -689,7 +707,6 @@ var demoSections = [{
         }],
         actions: [{ name: "Export ...", fn: "export", args: [] }]
     }]
-
 }, {
     title: "Listen to state change",
     name: "state-change",
@@ -785,6 +802,60 @@ var demoSections = [{
     }]
 }];
 
+var docSections = [{
+	name: "start",
+	contentBlocks: [{
+		type: "text",
+		content: "A chart is generally a 2D rendition of data. For example, f\n\t\t\t\t\tor a set of values across items, the data could look like:"
+	}, {
+		type: "code",
+		content: "  data = {\n    labels: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n    datasets: [\n\t  { values: [18, 40, 30, 35, 8, 52, 17, -4] }\n    ]\n  }"
+	}, {
+		type: "text",
+		content: "Plug that in with a type 'bar', a color and height:"
+	}, {
+		type: "code",
+		content: "  new frappe.Chart( \"#chart\", {\n    data: data,\n    type: 'bar',\n    height: 140,\n    colors: ['red']\n  });"
+	}, {
+		type: "demo",
+		config: {
+			data: sampleData[0],
+			type: 'line',
+			height: 140,
+			colors: ['red']
+		}
+	}, {
+		type: "text",
+		content: "Similar is a 'line' chart:"
+	}, {
+		type: "code",
+		content: "    ...\n    type: 'line',\n    ..."
+	}, {
+		type: "demo",
+		config: {
+			data: sampleData[0],
+			type: 'bar',
+			height: 140,
+			colors: ['blue']
+		}
+	}]
+}, {
+	title: "Adding more datasets",
+	name: "multi-dataset",
+	contentBlocks: [{
+		type: "text",
+		content: "Having more datasets, as in an axis chart, every dataset is represented individually."
+	}, {
+		type: "demo",
+		config: {
+			data: sampleData[1],
+			type: 'line',
+			height: 200,
+			colors: ['yellow', 'light-green']
+		}
+	}]
+}];
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -816,6 +887,7 @@ var docSection = function () {
 		this.parent = parent; // should be preferably a section
 		this.sys = sys;
 		this.blockMap = {};
+		this.demos = [];
 
 		this.make();
 	}
@@ -827,7 +899,9 @@ var docSection = function () {
 
 			// const section = document.querySelector(this.parent);
 			var s = this.sys;
-			$.create('h6', { inside: this.parent, innerHTML: s.title });
+			if (s.title) {
+				$.create('h6', { inside: this.parent, innerHTML: s.title });
+			}
 
 			s.contentBlocks.forEach(function (blockConf, index) {
 				_this.blockMap[index] = _this.getBlock(blockConf);
@@ -885,24 +959,27 @@ var docSection = function () {
 				figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
 				row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
 			}
-			this.libObj = new this.LIB_OBJ(figure, args);
+
+			var libObj = new this.LIB_OBJ(figure, args);
+			var demoIndex = this.demos.length;
+			this.demos.push(libObj);
 
 			if (bc.postSetup) {
-				bc.postSetup(this.libObj, figure, row);
+				bc.postSetup(this.demos[demoIndex], figure, row);
 			}
 
-			this.getDemoOptions(bc.options, args, figure);
-			this.getDemoActions(bc.actions, args);
+			this.getDemoOptions(demoIndex, bc.options, args, figure);
+			this.getDemoActions(demoIndex, bc.actions, args);
 		}
 	}, {
 		key: 'getDemoOptions',
-		value: function getDemoOptions() {
-			var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+		value: function getDemoOptions(demoIndex) {
+			var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
 			var _this2 = this;
 
-			var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-			var figure = arguments[2];
+			var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+			var figure = arguments[3];
 
 			options.forEach(function (o) {
 				var btnGroup = $.create('div', {
@@ -933,7 +1010,7 @@ var docSection = function () {
 								// boolean, string, number, object
 								args[o.path[0]] = state;
 							}
-							_this2.libObj = new _this2.LIB_OBJ(figure, args);
+							_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
 						}
 					});
 
@@ -945,10 +1022,10 @@ var docSection = function () {
 		}
 	}, {
 		key: 'getDemoActions',
-		value: function getDemoActions() {
+		value: function getDemoActions(demoIndex) {
 			var _this3 = this;
 
-			var actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+			var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 			actions.forEach(function (o) {
 				var args = o.args || [];
 				$.create('button', {
@@ -956,9 +1033,9 @@ var docSection = function () {
 					className: 'btn btn-action btn-sm btn-secondary',
 					innerHTML: o.name,
 					onClick: function onClick() {
-						var _libObj;
+						var _demos$demoIndex;
 
-						(_libObj = _this3.libObj)[o.fn].apply(_libObj, _toConsumableArray(args));
+						(_demos$demoIndex = _this3.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
 					}
 				});
 			});
@@ -970,19 +1047,25 @@ var docSection = function () {
 
 var Chart = frappe.Chart; // eslint-disable-line no-undef
 var dbd = new docsBuilder(Chart);
+var currentElement = document.querySelector('header');
+var sections = void 0;
 
-var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
-var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
+if (window.location.pathname.split("/").pop().includes('index')) {
+	var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
+	var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
 
-lineCompositeChart.parent.addEventListener('data-select', function (e) {
-	var i = e.index;
-	barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
-});
+	lineCompositeChart.parent.addEventListener('data-select', function (e) {
+		var i = e.index;
+		barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
+	});
 
-var currentElement = document.querySelector('header');
+	sections = demoSections;
+} else {
+	sections = docSections;
+}
 
-demoSections.forEach(function (sectionConf) {
-	var sectionEl = $.create('section', { className: sectionConf.name });
+sections.forEach(function (sectionConf) {
+	var sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
 	insertAfter(sectionEl, currentElement);
 	currentElement = sectionEl;
 	dbd.makeSection(sectionEl, sectionConf);

docs/docs.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Frappe Charts</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <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.">
+
+    <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">
+
+    <script src="assets/js/highlight.pack.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+    <link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
+    <link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
+
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+  </head>
+
+  <body>
+    <header>
+      <h1>Documentation</h1>
+      <p class="lead-text">Because it is beautiful.</p>
+    </header>
+
+    <!-- Generated content goes here -->
+
+    <footer class="built-with-frappe text-center">
+        <img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png">
+        <p style="margin: 24px 0 0px 0; font-size: 15px">
+          Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
+          Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.
+          Read the <a href="https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97" target="_blank">blog post</a>.
+        </p>
+        <p style="margin: 24px 0 80px 0; font-size: 12px">
+          Data from the <a href="https://www.amsmeteors.org" target="_blank">American Meteor Society</a>,
+          <a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and
+          <a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a>
+        </p>
+    </footer>
+
+    <!-- <a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
+      <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </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>
+</html>

docs/index.html

@@ -34,16 +34,13 @@
 
     <!-- Generated content goes here -->
 
-    <section class="text-center">
-      <!-- Closing -->
+    <section class="closing text-center">
       <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
-      <p style="mt1: 3rem;margin-bottom: 1.5rem;">
-        <!-- <a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a> -->
-        <a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a>
-      </p>
-      <p style="mt1: 1rem;">
-        <a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
+      <p style="mt1: 3rem; margin-bottom: 1.5rem;">
+        <a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a>
+        <a href="https://github.com/frappe/charts" target="_blank">GitHub</a>
       </p>
+      <p><a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a></p>
       <p>License: MIT</p>
     </section>
 

rollup.config.js

@@ -40,7 +40,6 @@ fs.readFile('src/css/charts.scss', (err, css) => {
 export default [
 	{
 		input: 'src/js/index.js',
-		sourcemap: true,
 		output: [
 			{
 				file: 'docs/assets/js/frappe-charts.min.js',
@@ -83,7 +82,6 @@ export default [
 	},
 	{
 		input: 'docs/assets/js/index.js',
-		sourcemap: true,
 		output: [
 			{
 				file: 'docs/assets/js/index.min.js',

src/js/charts/AxisChart.js

@@ -16,7 +16,6 @@ export default class AxisChart extends BaseChart {
 		this.barOptions = args.barOptions || {};
 		this.lineOptions = args.lineOptions || {};
 
-		this.type = args.type || 'line';
 		this.init = 1;
 
 		this.setup();

src/js/charts/BaseChart.js

@@ -23,7 +23,7 @@ export default class BaseChart {
 		this.rawChartArgs = options;
 
 		this.title = options.title || '';
-		this.type = options.type || '';
+		this.type = options.type || 'line';
 
 		this.realData = this.prepareData(options.data);
 		this.data = this.prepareFirstData(this.realData);

src/js/utils/axis-chart-utils.js

@@ -1,5 +1,5 @@
 import { fillArray } from '../utils/helpers';
-import { DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH } from '../utils/constants';
+import { AXIS_CHART_DEFAULT_TYPE, AXIS_CHART_MIXED_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH } from '../utils/constants';
 
 export function dataPrep(data, type) {
 	data.labels = data.labels || [];
@@ -16,6 +16,11 @@ export function dataPrep(data, type) {
 		}];
 	}
 
+	let overridingType;
+	if(AXIS_DATASET_CHART_TYPES.includes(type)) {
+		overridingType = type;
+	};
+
 	datasets.map(d=> {
 		// Set values
 		if(!d.values) {
@@ -34,14 +39,13 @@ export function dataPrep(data, type) {
 		}
 
 		// Set labels
-		//
 
 		// Set type
-		if(!d.chartType ) {
-			if(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE;
-			d.chartType = type;
+		if(overridingType) {
+			d.chartType = overridingType;
+		} else if(!d.chartType) {
+			d.chartType = AXIS_CHART_DEFAULT_TYPE;
 		}
-
 	});
 
 	// Markers

src/js/utils/constants.js

@@ -31,6 +31,7 @@ export const BASE_MEASURES = {
 	},
 
 	baseHeight: 240,
+
 	titleHeight: 20,
 	legendHeight: 30,
 
@@ -62,7 +63,9 @@ export function getExtraWidth(m) {
 export const INIT_CHART_UPDATE_TIMEOUT = 700;
 export const CHART_POST_ANIMATE_TIMEOUT = 400;
 
-export const DEFAULT_AXIS_CHART_TYPE = 'line';
+export const AXIS_CHART_DEFAULT_TYPE = 'line';
+export const AXIS_CHART_MIXED_TYPE = 'axis-mixed';
+export const AXIS_CHART_TYPES = ['line', 'bar', 'axis-mixed'];
 export const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
 
 export const AXIS_LEGEND_BAR_SIZE = 100;