Merge pull request #137 from achillesrasquinha/tree-shaking

[ENH] Enable Tree Shaking Charts

.gitignore

@@ -1,6 +1,63 @@
-# cache
-node_modules
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# misc
-.DS_Store
-yarn.lock
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+.DS_Store

README.md

@@ -42,9 +42,9 @@
 * ...or include within your HTML
 
   ```html
-    <script src="https://cdn.jsdelivr.net/npm/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"></script>
     <!-- or -->
-    <script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"></script>
+    <script src="https://unpkg.com/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"></script>
   ```
 
 #### Usage
@@ -55,27 +55,22 @@ const data = {
     ],
     datasets: [
         {
-            title: "Some Data",
+            title: "Some Data", type: "bar",
             values: [25, 40, 30, 35, 8, 52, 17, -4]
         },
         {
-            title: "Another Set",
+            title: "Another Set", type: "line",
             values: [25, 50, -10, 15, 18, 32, 27, 14]
         }
     ]
 }
 
-const chart = new Chart({
-    parent: "#chart", // or a DOM element
+const chart = new Chart("#chart", { // or a DOM element
     title: "My Awesome Chart",
     data: data,
-    type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
+    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
     height: 250,
-
-    colors: ['#7cd6fd', '#743ee2'],
-
-    format_tooltip_x: d => (d + '').toUpperCase(),
-    format_tooltip_y: d => d + ' pts'
+    colors: ['#7cd6fd', '#743ee2']
 })
 ```
 
@@ -88,6 +83,16 @@ If you want to contribute:
 
 #### Updates
 
+##### v1.0.0
+- Major rewrite out. Some new features include:
+    - Mixed type axis datasets
+    - Stacked bar charts
+    - Value over data points
+    - Y Markers and regions
+    - Dot size, Bar space size, and other options
+    - Legend for axis charts
+- We would be looking to incorporate existing PRs and issues in the meantime.
+
 ##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development.
 
 ##### v0.0.7

dist/frappe-charts.esm.js

@@ -230,6 +230,10 @@ const DEFAULT_CHAR_WIDTH = 7;
 const ANGLE_RATIO = Math.PI / 180;
 const FULL_ANGLE = 360;
 
+/**
+ * Returns the value of a number upto 2 decimal places.
+ * @param {Number} d Any number
+ */
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }
@@ -306,113 +310,11 @@ function equilizeNoOfElements(array1, array2,
 	return [array1, array2];
 }
 
-const UNIT_ANIM_DUR = 350;
-const PATH_ANIM_DUR = 350;
-const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
-const REPLACE_ALL_NEW_DUR = 250;
-
-const STD_EASING = 'easein';
-
-function translate(unit, oldCoord, newCoord, duration) {
-	let old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', ');
-	return [
-		unit,
-		{transform: newCoord.join(', ')},
-		duration,
-		STD_EASING,
-		"translate",
-		{transform: old}
-	];
-}
-
-function translateVertLine(xLine, newX, oldX) {
-	return translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);
-}
-
-function translateHoriLine(yLine, newY, oldY) {
-	return translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);
-}
-
-function animateRegion(rectGroup, newY1, newY2, oldY2) {
-	let newHeight = newY1 - newY2;
-	let rect = rectGroup.childNodes[0];
-	let width = rect.getAttribute("width");
-	let rectAnim = [
-		rect,
-		{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },
-		MARKER_LINE_ANIM_DUR,
-		STD_EASING
-	];
-
-	let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);
-	return [rectAnim, groupAnim];
-}
-
-function animateBar(bar, x, yTop, width, offset=0, index=0, meta={}) {
-	let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
-	y -= offset;
-	if(bar.nodeName !== 'rect') {
-		let rect = bar.childNodes[0];
-		let rectAnim = [
-			rect,
-			{width: width, height: height},
-			UNIT_ANIM_DUR,
-			STD_EASING
-		];
-
-		let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
-		let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
-		return [rectAnim, groupAnim];
-	} else {
-		return [[bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]];
-	}
-	// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
-}
-
-function animateDot(dot, x, y) {
-	if(dot.nodeName !== 'circle') {
-		let oldCoordStr = dot.getAttribute("transform").split("(")[1].slice(0, -1);
-		let groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
-		return [groupAnim];
-	} else {
-		return [[dot, {cx: x, cy: y}, UNIT_ANIM_DUR, STD_EASING]];
-	}
-	// dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
-}
-
-function animatePath(paths, newXList, newYList, zeroLine) {
-	let pathComponents = [];
-
-	let pointsStr = newYList.map((y, i) => (newXList[i] + ',' + y));
-	let pathStr = pointsStr.join("L");
-
-	const animPath = [paths.path, {d:"M"+pathStr}, PATH_ANIM_DUR, STD_EASING];
-	pathComponents.push(animPath);
-
-	if(paths.region) {
-		let regStartPt = `${newXList[0]},${zeroLine}L`;
-		let regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`;
-
-		const animRegion = [
-			paths.region,
-			{d:"M" + regStartPt + pathStr + regEndPt},
-			PATH_ANIM_DUR,
-			STD_EASING
-		];
-		pathComponents.push(animRegion);
-	}
-
-	return pathComponents;
-}
-
-function animatePathStr(oldPath, pathStr) {
-	return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];
-}
-
 const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
 const FONT_SIZE = 10;
 const BASE_LINE_COLOR = '#dadada';
+
 function $$1(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
 }
@@ -647,6 +549,8 @@ function yLine(y, label, width, options={}) {
 		x2 = width;
 	}
 
+	// let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
+
 	x1 += options.offset;
 	x2 += options.offset;
 
@@ -793,7 +697,7 @@ function datasetBar(x, yTop, width, color, label='', index=0, offset=0, meta={})
 	}
 }
 
-function datasetDot(x, y, radius, color, label='', index=0, meta={}) {
+function datasetDot(x, y, radius, color, label='', index=0) {
 	let dot = createSVG('circle', {
 		style: `fill: ${color}`,
 		'data-point-index': index,
@@ -904,10 +808,10 @@ let updateOverlay = {
 		}
 		let attributes = ['x', 'y', 'width', 'height'];
 		Object.values(unit.attributes)
-		.filter(attr => attributes.includes(attr.name) && attr.specified)
-		.map(attr => {
-			overlay.setAttribute(attr.name, attr.nodeValue);
-		});
+			.filter(attr => attributes.includes(attr.name) && attr.specified)
+			.map(attr => {
+				overlay.setAttribute(attr.name, attr.nodeValue);
+			});
 
 		if(transformValue) {
 			overlay.setAttribute('transform', transformValue);
@@ -922,10 +826,10 @@ let updateOverlay = {
 		}
 		let attributes = ['cx', 'cy'];
 		Object.values(unit.attributes)
-		.filter(attr => attributes.includes(attr.name) && attr.specified)
-		.map(attr => {
-			overlay.setAttribute(attr.name, attr.nodeValue);
-		});
+			.filter(attr => attributes.includes(attr.name) && attr.specified)
+			.map(attr => {
+				overlay.setAttribute(attr.name, attr.nodeValue);
+			});
 
 		if(transformValue) {
 			overlay.setAttribute('transform', transformValue);
@@ -1027,6 +931,109 @@ function getDifferentChart(type, current_type, parent, args) {
 	return new Chart(parent, args);
 }
 
+const UNIT_ANIM_DUR = 350;
+const PATH_ANIM_DUR = 350;
+const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
+const REPLACE_ALL_NEW_DUR = 250;
+
+const STD_EASING = 'easein';
+
+function translate(unit, oldCoord, newCoord, duration) {
+	let old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', ');
+	return [
+		unit,
+		{transform: newCoord.join(', ')},
+		duration,
+		STD_EASING,
+		"translate",
+		{transform: old}
+	];
+}
+
+function translateVertLine(xLine, newX, oldX) {
+	return translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);
+}
+
+function translateHoriLine(yLine, newY, oldY) {
+	return translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);
+}
+
+function animateRegion(rectGroup, newY1, newY2, oldY2) {
+	let newHeight = newY1 - newY2;
+	let rect = rectGroup.childNodes[0];
+	let width = rect.getAttribute("width");
+	let rectAnim = [
+		rect,
+		{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },
+		MARKER_LINE_ANIM_DUR,
+		STD_EASING
+	];
+
+	let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);
+	return [rectAnim, groupAnim];
+}
+
+function animateBar(bar, x, yTop, width, offset=0, meta={}) {
+	let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
+	y -= offset;
+	if(bar.nodeName !== 'rect') {
+		let rect = bar.childNodes[0];
+		let rectAnim = [
+			rect,
+			{width: width, height: height},
+			UNIT_ANIM_DUR,
+			STD_EASING
+		];
+
+		let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
+		let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
+		return [rectAnim, groupAnim];
+	} else {
+		return [[bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]];
+	}
+	// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
+}
+
+function animateDot(dot, x, y) {
+	if(dot.nodeName !== 'circle') {
+		let oldCoordStr = dot.getAttribute("transform").split("(")[1].slice(0, -1);
+		let groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
+		return [groupAnim];
+	} else {
+		return [[dot, {cx: x, cy: y}, UNIT_ANIM_DUR, STD_EASING]];
+	}
+	// dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
+}
+
+function animatePath(paths, newXList, newYList, zeroLine) {
+	let pathComponents = [];
+
+	let pointsStr = newYList.map((y, i) => (newXList[i] + ',' + y));
+	let pathStr = pointsStr.join("L");
+
+	const animPath = [paths.path, {d:"M"+pathStr}, PATH_ANIM_DUR, STD_EASING];
+	pathComponents.push(animPath);
+
+	if(paths.region) {
+		let regStartPt = `${newXList[0]},${zeroLine}L`;
+		let regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`;
+
+		const animRegion = [
+			paths.region,
+			{d:"M" + regStartPt + pathStr + regEndPt},
+			PATH_ANIM_DUR,
+			STD_EASING
+		];
+		pathComponents.push(animRegion);
+	}
+
+	return pathComponents;
+}
+
+function animatePathStr(oldPath, pathStr) {
+	return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];
+}
+
 // Leveraging SMIL Animations
 
 const EASING = {
@@ -1178,7 +1185,7 @@ class BaseChart {
 	}
 
 	configure(args) {
-		this.setColors();
+		this.setColors(args);
 		this.setMargins();
 
 		// Bind window events
@@ -1331,8 +1338,8 @@ class BaseChart {
 	updateNav() {
 		if(this.config.isNavigable) {
 			// if(!this.overlayGuides){
-				this.makeOverlay();
-				this.bindUnits();
+			this.makeOverlay();
+			this.bindUnits();
 			// } else {
 			// 	this.updateOverlay();
 			// }
@@ -1403,18 +1410,13 @@ class BaseChart {
 	onDownArrow() {}
 	onEnterKey() {}
 
-	getDataPoint(index = 0) {}
-	setCurrentDataPoint(point) {}
-
-	updateDataset(dataset, index) {}
-	addDataset(dataset, index) {}
-	removeDataset(index = 0) {}
+	addDataPoint() {}
+	removeDataPoint() {}
 
-	updateDatasets(datasets) {}
+	getDataPoint() {}
+	setCurrentDataPoint() {}
 
-	updateDataPoint(dataPoint, index = 0) {}
-	addDataPoint(dataPoint, index = 0) {}
-	removeDataPoint(index = 0) {}
+	updateDataset() {}
 
 	getDifferentChart(type) {
 		return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
@@ -1795,8 +1797,6 @@ let componentConfigs = {
 			return this.units;
 		},
 		animateElements(newData) {
-			let c = this.constants;
-
 			let newXPos = newData.xPositions;
 			let newYPos = newData.yPositions;
 			let newOffsets = newData.offsets;
@@ -1827,7 +1827,7 @@ let componentConfigs = {
 
 			this.store.map((bar, i) => {
 				animateElements = animateElements.concat(animateBar(
-					bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], c.index,
+					bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i],
 					{zeroLine: newData.zeroLine}
 				));
 			});
@@ -2305,7 +2305,7 @@ function getValueRange(orderedArray) {
 }
 
 function scale(val, yAxis) {
-	return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier)
+	return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier);
 }
 
 function calcDistribution(values, distributionSize) {
@@ -2602,7 +2602,7 @@ function dataPrep(data, type) {
 		}];
 	}
 
-	datasets.map((d, i)=> {
+	datasets.map(d=> {
 		// Set values
 		if(!d.values) {
 			d.values = zeroArray;
@@ -2656,7 +2656,7 @@ function zeroDataPrep(realData) {
 				name: '',
 				values: zeroArray.slice(0, -1),
 				chartType: d.chartType
-			}
+			};
 		}),
 	};
 
@@ -3140,10 +3140,10 @@ class AxisChart extends BaseChart {
 		// Render overlays
 		this.overlayGuides.map(d => {
 			let currentUnit = d.units[this.state.currentIndex];
+
 			d.overlay = makeOverlay[d.type](currentUnit);
 			this.drawArea.appendChild(d.overlay);
 		});
-
 	}
 
 	updateOverlayGuides() {
@@ -3256,6 +3256,7 @@ class AxisChart extends BaseChart {
 	// removeDataPoint(index = 0) {}
 }
 
+// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	// multiaxis: MultiAxisChart,
 	percentage: PercentageChart,
@@ -3289,4 +3290,4 @@ class Chart {
 	}
 }
 
-export default Chart;
+export { Chart, PercentageChart, PieChart, Heatmap, AxisChart };

docs/assets/js/index.js

@@ -86,7 +86,7 @@ let barCompositeData = {
 let c1 = document.querySelector("#chart-composite-1");
 let c2 = document.querySelector("#chart-composite-2");
 
-let lineCompositeChart = new Chart (c1, {
+let lineCompositeChart = new frappe.Chart (c1, {
 	title: "Fireball/Bolide Events - Yearly (reported)",
 	data: lineCompositeData,
 	type: 'line',
@@ -102,7 +102,7 @@ let lineCompositeChart = new Chart (c1, {
 	// regionFill: 1
 });
 
-let barCompositeChart = new Chart (c2, {
+let barCompositeChart = new frappe.Chart (c2, {
 	data: barCompositeData,
 	type: 'bar',
 	height: 190,
@@ -168,7 +168,7 @@ let typeData = {
 	]
 };
 
-// let typeChart = new Chart("#chart-types", {
+// let typeChart = new frappe.Chart("#chart-types", {
 // 	title: "My Awesome Chart",
 // 	data: typeData,
 // 	type: 'bar',
@@ -199,7 +199,7 @@ let args = {
 		formatTooltipY: d => d + ' pts',
 	}
 }
-let aggrChart = new Chart("#chart-aggr", args);
+let aggrChart = new frappe.Chart("#chart-aggr", args);
 
 Array.prototype.slice.call(
 	document.querySelectorAll('.aggr-type-buttons button')
@@ -209,7 +209,7 @@ Array.prototype.slice.call(
 		let type = btn.getAttribute('data-type');
 		args.type = type;
 
-		let newChart = new Chart("#chart-aggr", args);;
+		let newChart = new frappe.Chart("#chart-aggr", args);;
 		if(newChart){
 			aggrChart = newChart;
 		}
@@ -259,7 +259,7 @@ let update_data = {
 	],
 };
 
-let update_chart = new Chart("#chart-update", {
+let update_chart = new frappe.Chart("#chart-update", {
 	data: update_data,
 	type: 'line',
 	height: 250,
@@ -346,7 +346,7 @@ let plotChartArgs = {
 	}
 };
 
-new Chart("#chart-trends", plotChartArgs);
+new frappe.Chart("#chart-trends", plotChartArgs);
 
 Array.prototype.slice.call(
 	document.querySelectorAll('.chart-plot-buttons button')
@@ -364,7 +364,7 @@ Array.prototype.slice.call(
 		// plotChartArgs.init = false;
 		plotChartArgs.lineOptions = config;
 
-		new Chart("#chart-trends", plotChartArgs);
+		new frappe.Chart("#chart-trends", plotChartArgs);
 
 		Array.prototype.slice.call(
 			btn.parentNode.querySelectorAll('button')).map(el => {
@@ -415,7 +415,7 @@ let events_data = {
 	]
 };
 
-let events_chart = new Chart("#chart-events", {
+let events_chart = new frappe.Chart("#chart-events", {
 	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
 	data: events_data,
 	type: 'bar',
@@ -447,7 +447,7 @@ for (var i = 0; i< 375; i++) {
 	timestamp = Math.floor(timestamp - 86400).toFixed(1);
 }
 
-new Chart("#chart-heatmap", {
+new frappe.Chart("#chart-heatmap", {
 	data: heatmapData,
 	type: 'heatmap',
 	legendScale: [0, 1, 2, 4, 5],
@@ -456,6 +456,8 @@ new Chart("#chart-heatmap", {
 	legendColors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
 });
 
+// console.log(heatmapData, heatmap);
+
 Array.prototype.slice.call(
 	document.querySelectorAll('.heatmap-mode-buttons button')
 ).map(el => {
@@ -476,7 +478,7 @@ Array.prototype.slice.call(
 			colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
 		}
 
-		new Chart("#chart-heatmap", {
+		new frappe.Chart("#chart-heatmap", {
 			data: heatmapData,
 			type: 'heatmap',
 			legendScale: [0, 1, 2, 4, 5],
@@ -514,7 +516,7 @@ Array.prototype.slice.call(
 			discreteDomains = 0;
 		}
 
-		new Chart("#chart-heatmap", {
+		new frappe.Chart("#chart-heatmap", {
 			data: heatmapData,
 			type: 'heatmap',
 			legendScale: [0, 1, 2, 4, 5],

docs/index.html

@@ -191,8 +191,7 @@
                 <button type="button" class="btn btn-sm btn-secondary" data-color="default">Default green</button>
                 <button type="button" class="btn btn-sm btn-secondary active" data-color="halloween">GitHub's Halloween</button>
               </div>
-              <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new Chart({
-    parent: "#heatmap",
+              <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new Chart("#heatmap", {
     type: 'heatmap',
     height: 115,
     data: heatmapData,  // object with date/timestamp-value pairs
@@ -287,9 +286,9 @@
               <p class="step-explain">Install via npm</p>
               <pre><code class="hljs console">  npm install frappe-charts</code></pre>
               <p class="step-explain">And include it in your project</p>
-              <pre><code class="hljs javascript">  import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre>
+              <pre><code class="hljs javascript">  import { Chart } from "frappe-charts"</code></pre>
               <p class="step-explain">... or include it directly in your HTML</p>
-              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre>
+              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.0.0"&gt;&lt;/script&gt;</code></pre>
 
             </div>
           </div>

docs/old_index.html

@@ -53,7 +53,7 @@
               <p class="step-explain">And include it in your project</p>
               <pre><code class="hljs javascript">  import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre>
               <p class="step-explain">... or include it directly in your HTML</p>
-              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre>
+              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre>
               <p class="step-explain">Make a new Chart</p>
               <pre><code class="hljs html">  &lt!--HTML--&gt;
   &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-charts",
-  "version": "0.0.8",
+  "version": "1.0.0",
   "description": "https://frappe.github.io/charts",
   "main": "dist/frappe-charts.min.cjs.js",
   "module": "dist/frappe-charts.min.esm.js",
@@ -51,9 +51,10 @@
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^2.0.1",
     "rollup-plugin-uglify-es": "0.0.1",
-    "rollup-watch": "^4.3.1"
+    "rollup-watch": "^4.3.1",
+    "eslint": "^4.18.2"
   },
   "dependencies": {
-    "eslint": "^4.18.2"
+    
   }
 }

rollup.config.js

@@ -27,7 +27,7 @@ export default [
 				format: 'iife',
 			}
 		],
-		name: 'Chart',
+		name: 'frappe',
 		plugins: [
 			postcss({
 				preprocessor: (content, id) => new Promise((resolve, reject) => {

src/js/chart.js

@@ -33,8 +33,10 @@ function getChartByType(chartType = 'line', parent, options) {
 	return new chartTypes[chartType](parent, options);
 }
 
-export default class Chart {
+class Chart {
 	constructor(parent, options) {
 		return getChartByType(options.type, parent, options);
 	}
 }
+
+export { Chart, PercentageChart, PieChart, Heatmap, AxisChart };

src/js/charts/AggregationChart.js

@@ -1,5 +1,5 @@
 import BaseChart from './BaseChart';
-import { $, getOffset } from '../utils/dom';
+import { $ } from '../utils/dom';
 
 export default class AggregationChart extends BaseChart {
 	constructor(parent, args) {

src/js/charts/AxisChart.js

@@ -174,7 +174,7 @@ export default class AxisChart extends BaseChart {
 		if(this.data.yRegions) {
 			this.data.yRegions.map(d => {
 				allValueLists.push([d.end, d.start]);
-			})
+			});
 		}
 
 		return [].concat(...allValueLists);
@@ -439,10 +439,10 @@ export default class AxisChart extends BaseChart {
 		// Render overlays
 		this.overlayGuides.map(d => {
 			let currentUnit = d.units[this.state.currentIndex];
+
 			d.overlay = makeOverlay[d.type](currentUnit);
 			this.drawArea.appendChild(d.overlay);
 		});
-
 	}
 
 	updateOverlayGuides() {

src/js/charts/BaseChart.js

@@ -1,7 +1,6 @@
 import SvgTip from '../objects/SvgTip';
 import { $, isElementInViewport, getElementContentWidth } from '../utils/dom';
 import { makeSVGContainer, makeSVGDefs, makeSVGGroup } from '../utils/draw';
-import { getStringWidth } from '../utils/helpers';
 import { VERT_SPACE_OUTSIDE_BASE_CHART, TRANSLATE_Y_BASE_CHART, LEFT_MARGIN_BASE_CHART,
 	RIGHT_MARGIN_BASE_CHART, INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT } from '../utils/constants';
 import { getColor, DEFAULT_COLORS } from '../utils/colors';
@@ -44,7 +43,7 @@ export default class BaseChart {
 	}
 
 	configure(args) {
-		this.setColors();
+		this.setColors(args);
 		this.setMargins();
 
 		// Bind window events
@@ -197,8 +196,8 @@ export default class BaseChart {
 	updateNav() {
 		if(this.config.isNavigable) {
 			// if(!this.overlayGuides){
-				this.makeOverlay();
-				this.bindUnits();
+			this.makeOverlay();
+			this.bindUnits();
 			// } else {
 			// 	this.updateOverlay();
 			// }
@@ -269,18 +268,13 @@ export default class BaseChart {
 	onDownArrow() {}
 	onEnterKey() {}
 
-	getDataPoint(index = 0) {}
-	setCurrentDataPoint(point) {}
+	addDataPoint() {}
+	removeDataPoint() {}
 
-	updateDataset(dataset, index) {}
-	addDataset(dataset, index) {}
-	removeDataset(index = 0) {}
+	getDataPoint() {}
+	setCurrentDataPoint() {}
 
-	updateDatasets(datasets) {}
-
-	updateDataPoint(dataPoint, index = 0) {}
-	addDataPoint(dataPoint, index = 0) {}
-	removeDataPoint(index = 0) {}
+	updateDataset() {}
 
 	getDifferentChart(type) {
 		return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);

src/js/config.js

@@ -1,4 +1,4 @@
-import Chart from './chart';
+import { Chart } from './chart';
 
 const ALL_CHART_TYPES = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie'];
 

src/js/objects/ChartComponents.js

@@ -235,8 +235,6 @@ let componentConfigs = {
 			return this.units;
 		},
 		animateElements(newData) {
-			let c = this.constants;
-
 			let newXPos = newData.xPositions;
 			let newYPos = newData.yPositions;
 			let newOffsets = newData.offsets;
@@ -267,7 +265,7 @@ let componentConfigs = {
 
 			this.store.map((bar, i) => {
 				animateElements = animateElements.concat(animateBar(
-					bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], c.index,
+					bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i],
 					{zeroLine: newData.zeroLine}
 				));
 			});

src/js/utils/animate.js

@@ -36,13 +36,13 @@ export function animateRegion(rectGroup, newY1, newY2, oldY2) {
 		{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },
 		MARKER_LINE_ANIM_DUR,
 		STD_EASING
-	]
+	];
 
 	let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);
 	return [rectAnim, groupAnim];
 }
 
-export function animateBar(bar, x, yTop, width, offset=0, index=0, meta={}) {
+export function animateBar(bar, x, yTop, width, offset=0, meta={}) {
 	let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
 	y -= offset;
 	if(bar.nodeName !== 'rect') {
@@ -52,7 +52,7 @@ export function animateBar(bar, x, yTop, width, offset=0, index=0, meta={}) {
 			{width: width, height: height},
 			UNIT_ANIM_DUR,
 			STD_EASING
-		]
+		];
 
 		let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
 		let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);

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

@@ -1,4 +1,4 @@
-import { floatTwo, fillArray } from '../utils/helpers';
+import { fillArray } from '../utils/helpers';
 import { DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH } from '../utils/constants';
 
 export function dataPrep(data, type) {
@@ -16,7 +16,7 @@ export function dataPrep(data, type) {
 		}];
 	}
 
-	datasets.map((d, i)=> {
+	datasets.map(d=> {
 		// Set values
 		if(!d.values) {
 			d.values = zeroArray;
@@ -70,7 +70,7 @@ export function zeroDataPrep(realData) {
 				name: '',
 				values: zeroArray.slice(0, -1),
 				chartType: d.chartType
-			}
+			};
 		}),
 	};
 

src/js/utils/draw.js

@@ -1,13 +1,11 @@
 import { getBarHeightAndYAttr } from './draw-utils';
 import { getStringWidth } from './helpers';
-import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate';
 import { DOT_OVERLAY_SIZE_INCR } from './constants';
 
 const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
 export const FONT_SIZE = 10;
 const BASE_LINE_COLOR = '#dadada';
-const BASE_BG_COLOR = '#F7FAFC';
 
 function $(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
@@ -245,11 +243,11 @@ export function yLine(y, label, width, options={}) {
 	let x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0;
 
 	if(options.mode === 'tick' && options.pos === 'right') {
-		x1 = width + AXIS_TICK_LENGTH
+		x1 = width + AXIS_TICK_LENGTH;
 		x2 = width;
 	}
 
-	let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
+	// let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
 
 	x1 += options.offset;
 	x2 += options.offset;
@@ -397,7 +395,7 @@ export function datasetBar(x, yTop, width, color, label='', index=0, offset=0, m
 	}
 }
 
-export function datasetDot(x, y, radius, color, label='', index=0, meta={}) {
+export function datasetDot(x, y, radius, color, label='', index=0) {
 	let dot = createSVG('circle', {
 		style: `fill: ${color}`,
 		'data-point-index': index,
@@ -448,7 +446,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
 
 	let paths = {
 		path: path
-	}
+	};
 
 	// Region
 	if(options.regionFill) {
@@ -497,7 +495,7 @@ export let makeOverlay = {
 		}
 		return overlay;
 	}
-}
+};
 
 export let updateOverlay = {
 	'bar': (unit, overlay) => {
@@ -508,10 +506,10 @@ export let updateOverlay = {
 		}
 		let attributes = ['x', 'y', 'width', 'height'];
 		Object.values(unit.attributes)
-		.filter(attr => attributes.includes(attr.name) && attr.specified)
-		.map(attr => {
-			overlay.setAttribute(attr.name, attr.nodeValue);
-		});
+			.filter(attr => attributes.includes(attr.name) && attr.specified)
+			.map(attr => {
+				overlay.setAttribute(attr.name, attr.nodeValue);
+			});
 
 		if(transformValue) {
 			overlay.setAttribute('transform', transformValue);
@@ -526,14 +524,13 @@ export let updateOverlay = {
 		}
 		let attributes = ['cx', 'cy'];
 		Object.values(unit.attributes)
-		.filter(attr => attributes.includes(attr.name) && attr.specified)
-		.map(attr => {
-			overlay.setAttribute(attr.name, attr.nodeValue);
-		});
+			.filter(attr => attributes.includes(attr.name) && attr.specified)
+			.map(attr => {
+				overlay.setAttribute(attr.name, attr.nodeValue);
+			});
 
 		if(transformValue) {
 			overlay.setAttribute('transform', transformValue);
 		}
 	}
-}
-
+};

src/js/utils/helpers.js

@@ -70,7 +70,7 @@ export function bindChange(obj, getFn, setFn) {
 			setFn();
 			return Reflect.set(target, prop, value);
 		},
-		get: function(target, prop, value) {
+		get: function(target, prop) {
 			getFn();
 			return Reflect.get(target, prop);
 		}

src/js/utils/intervals.js

@@ -197,7 +197,7 @@ export function getValueRange(orderedArray) {
 }
 
 export function scale(val, yAxis) {
-	return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier)
+	return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier);
 }
 
 export function calcDistribution(values, distributionSize) {