[major] API change: parent and options

dist/frappe-charts.esm.js

@@ -987,7 +987,7 @@ const COLOR_COMPATIBLE_CHARTS = {
 	heatmap: []
 };
 
-function getDifferentChart(type, current_type, args) {
+function getDifferentChart(type, current_type, parent, args) {
 	if(type === current_type) return;
 
 	if(!ALL_CHART_TYPES.includes(type)) {
@@ -1004,8 +1004,7 @@ function getDifferentChart(type, current_type, args) {
 	// Okay, this is anticlimactic
 	// this function will need to actually be 'changeChartType(type)'
 	// that will update only the required elements, but for now ...
-	return new Chart({
-		parent: args.parent,
+	return new Chart(parent, {
 		title: args.title,
 		data: args.data,
 		type: type,
@@ -1130,36 +1129,26 @@ function runSMILAnimation(parent, svgElement, elementsToAnimate) {
 }
 
 class BaseChart {
-	constructor({
-		height = 240,
-
-		title = '',
-		subtitle = '',
-		colors = [],
-
-		isNavigable = 0,
-		showLegend = 1,
-
-		type = '',
-
-		parent,
-		data
-	}) {
-		this.rawChartArgs = arguments[0];
+	constructor(parent, options) {
+		this.rawChartArgs = options;
 
 		this.parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
-		this.title = title;
-		this.subtitle = subtitle;
-		this.argHeight = height;
-		this.type = type;
+        if (!(this.parent instanceof HTMLElement)) {
+            throw new Error('No `parent` element to render on was provided.');
+        }
+
+		this.title = options.title || '';
+		this.subtitle = options.subtitle || '';
+		this.argHeight = options.height || 240;
+		this.type = options.type || '';
 
-		this.realData = this.prepareData(data);
+		this.realData = this.prepareData(options.data);
 		this.data = this.prepareFirstData(this.realData);
 		this.colors = [];
 		this.config = {
 			showTooltip: 1, // calculate
-			showLegend: 1,
-			isNavigable: isNavigable,
+			showLegend: options.showLegend || 1,
+			isNavigable: options.isNavigable || 0,
 			animate: 1
 		};
 		this.state = {};
@@ -1170,7 +1159,7 @@ class BaseChart {
 			this.overlays = [];
 		}
 
-		this.configure(arguments[0]);
+		this.configure(options);
 	}
 
 	configure(args) {
@@ -1210,11 +1199,7 @@ class BaseChart {
 		this.rightMargin = RIGHT_MARGIN_BASE_CHART;
 	}
 
-	validate(){
-		if(!this.parent) {
-			console.error("No parent element to render on was provided.");
-			return false;
-		}
+	validate() {
 		return true;
 	}
 
@@ -1419,13 +1404,13 @@ class BaseChart {
 	removeDataPoint(index = 0) {}
 
 	getDifferentChart(type) {
-		return getDifferentChart(type, this.type, this.rawChartArgs);
+		return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
 	}
 }
 
 class PercentageChart extends BaseChart {
-	constructor(args) {
-		super(args);
+	constructor(parent, args) {
+		super(parent, args);
 		this.type = 'percentage';
 
 		this.max_slices = 10;
@@ -1549,8 +1534,8 @@ const ANGLE_RATIO = Math.PI / 180;
 const FULL_ANGLE = 360;
 
 class PieChart extends BaseChart {
-	constructor(args) {
-		super(args);
+	constructor(parent, args) {
+		super(parent, args);
 		this.type = 'pie';
 		this.elements_to_animate = null;
 		this.hoverRadio = args.hoverRadio || 0.1;
@@ -1980,29 +1965,21 @@ function getMaxCheckpoint(value, distribution) {
 }
 
 class Heatmap extends BaseChart {
-	constructor({
-		start = '',
-		domain = '',
-		subdomain = '',
-		data = {},
-		discrete_domains = 0,
-		count_label = '',
-		legend_colors = []
-	}) {
-		super(arguments[0]);
+	constructor(parent, options) {
+		super(parent, options);
 
 		this.type = 'heatmap';
 
-		this.domain = domain;
-		this.subdomain = subdomain;
-		this.data = data;
-		this.discrete_domains = discrete_domains;
-		this.count_label = count_label;
+		this.domain = options.domain || '';
+		this.subdomain = options.subdomain || '';
+		this.data = options.data || {};
+		this.discrete_domains = options.discrete_domains || 1;
+		this.count_label = options.count_label || '';
 
 		let today = new Date();
-		this.start = start || addDays(today, 365);
+		this.start = options.start || addDays(today, 365);
 
-		legend_colors = legend_colors.slice(0, 5);
+		let legend_colors = (options.legend_colors || []).slice(0, 5);
 		this.legend_colors = this.validate_colors(legend_colors)
 			? legend_colors
 			: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
@@ -2680,8 +2657,8 @@ function getComponent(name, constants, getData) {
 }
 
 class AxisChart extends BaseChart {
-	constructor(args) {
-		super(args);
+	constructor(parent, args) {
+		super(parent, args);
 		this.isSeries = args.isSeries;
 		this.valuesOverPoints = args.valuesOverPoints;
 		this.formatTooltipY = args.formatTooltipY;
@@ -3158,7 +3135,6 @@ class AxisChart extends BaseChart {
 
 // keep a binding at the end of chart
 
-// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	// multiaxis: MultiAxisChart,
 	percentage: PercentageChart,
@@ -3166,16 +3142,16 @@ const chartTypes = {
 	pie: PieChart
 };
 
-function getChartByType(chartType = 'line', options) {
+function getChartByType(chartType = 'line', parent, options) {
 	if(chartType === 'line') {
 		options.type = 'line';
-		return new AxisChart(options);
+		return new AxisChart(parent, options);
 	} else if (chartType === 'bar') {
 		options.type = 'bar';
-		return new AxisChart(options);
+		return new AxisChart(parent, options);
 	} else if (chartType === 'axis-mixed') {
 		options.type = 'line';
-		return new AxisChart(options);
+		return new AxisChart(parent, options);
 	}
 
 	if (!chartTypes[chartType]) {
@@ -3183,12 +3159,12 @@ function getChartByType(chartType = 'line', options) {
 		return;
 	}
 
-	return new chartTypes[chartType](options);
+	return new chartTypes[chartType](parent, options);
 }
 
 class Chart {
-	constructor(args) {
-		return getChartByType(args.type, arguments[0]);
+	constructor(parent, options) {
+		return getChartByType(options.type, parent, options);
 	}
 }
 

docs/assets/js/index.js

@@ -62,8 +62,7 @@ let more_line_data = [
 let c1 = document.querySelector("#chart-composite-1");
 let c2 = document.querySelector("#chart-composite-2");
 
-let bar_composite_chart = new Chart ({
-	parent: c1,
+let bar_composite_chart = new Chart (c1, {
 	title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
 	data: bar_composite_data,
 	type: 'bar',
@@ -76,8 +75,7 @@ let bar_composite_chart = new Chart ({
 	// regionFill: 1
 });
 
-let line_composite_chart = new Chart ({
-	parent: c2,
+let line_composite_chart = new Chart (c2, {
 	data: line_composite_data,
 	type: 'line',
 	lineOptions: {
@@ -165,8 +163,7 @@ let type_data = {
 	]
 };
 
-let type_chart = new Chart({
-	parent: "#chart-types",
+let type_chart = new Chart("#chart-types", {
 	// title: "My Awesome Chart",
 	data: type_data,
 	type: 'bar',
@@ -222,7 +219,6 @@ let trends_data = {
 };
 
 let plot_chart_args = {
-	parent: "#chart-trends",
 	title: "Mean Total Sunspot Count - Yearly",
 	data: trends_data,
 	type: 'line',
@@ -237,7 +233,7 @@ let plot_chart_args = {
 	yAxisMode: 'span'
 };
 
-new Chart(plot_chart_args);
+new Chart("#chart-trends", plot_chart_args);
 
 Array.prototype.slice.call(
 	document.querySelectorAll('.chart-plot-buttons button')
@@ -261,7 +257,7 @@ Array.prototype.slice.call(
 
 		plot_chart_args.init = false;
 
-		new Chart(plot_chart_args);
+		new Chart("#chart-trends", plot_chart_args);
 
 		Array.prototype.slice.call(
 			btn.parentNode.querySelectorAll('button')).map(el => {
@@ -301,8 +297,7 @@ let update_data = {
 	]
 };
 
-let update_chart = new Chart({
-	parent: "#chart-update",
+let update_chart = new Chart("#chart-update", {
 	data: update_data,
 	type: 'line',
 	height: 250,
@@ -377,8 +372,7 @@ let events_data = {
 	]
 };
 
-let events_chart = new Chart({
-	parent: "#chart-events",
+let events_chart = new Chart("#chart-events", {
 	title: "Jupiter's Moons: Semi-major Axis (1000 km)",
 	data: events_data,
 	type: 'bar',
@@ -412,8 +406,7 @@ let aggr_data = {
 	]
 };
 
-let aggr_chart = new Chart({
-	parent: "#chart-aggr",
+let aggr_chart = new Chart("#chart-aggr", {
 	data: aggr_data,
 	type: 'bar',
 	height: 250,
@@ -456,8 +449,7 @@ for (var i = 0; i< 375; i++) {
 	timestamp = Math.floor(timestamp - 86400).toFixed(1);
 }
 
-new Chart({
-	parent: "#chart-heatmap",
+new Chart("#chart-heatmap", {
 	data: heatmap_data,
 	type: 'heatmap',
 	legend_scale: [0, 1, 2, 4, 5],
@@ -485,8 +477,7 @@ Array.prototype.slice.call(
 			colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
 		}
 
-		new Chart({
-			parent: "#chart-heatmap",
+		new Chart("#chart-heatmap", {
 			data: heatmap_data,
 			type: 'heatmap',
 			legend_scale: [0, 1, 2, 4, 5],
@@ -524,8 +515,7 @@ Array.prototype.slice.call(
 			discrete_domains = 0;
 		}
 
-		new Chart({
-			parent: "#chart-heatmap",
+		new Chart("#chart-heatmap", {
 			data: heatmap_data,
 			type: 'heatmap',
 			legend_scale: [0, 1, 2, 4, 5],

package.json

@@ -52,5 +52,8 @@
     "rollup-plugin-uglify": "^2.0.1",
     "rollup-plugin-uglify-es": "0.0.1",
     "rollup-watch": "^4.3.1"
+  },
+  "dependencies": {
+    "eslint": "^4.18.2"
   }
 }

src/js/chart.js

@@ -13,16 +13,16 @@ const chartTypes = {
 	pie: PieChart
 };
 
-function getChartByType(chartType = 'line', options) {
+function getChartByType(chartType = 'line', parent, options) {
 	if(chartType === 'line') {
 		options.type = 'line';
-		return new AxisChart(options);
+		return new AxisChart(parent, options);
 	} else if (chartType === 'bar') {
 		options.type = 'bar';
-		return new AxisChart(options);
+		return new AxisChart(parent, options);
 	} else if (chartType === 'axis-mixed') {
 		options.type = 'line';
-		return new AxisChart(options);
+		return new AxisChart(parent, options);
 	}
 
 	if (!chartTypes[chartType]) {
@@ -30,11 +30,11 @@ function getChartByType(chartType = 'line', options) {
 		return;
 	}
 
-	return new chartTypes[chartType](options);
+	return new chartTypes[chartType](parent, options);
 }
 
 export default class Chart {
-	constructor(args) {
-		return getChartByType(args.type, arguments[0]);
+	constructor(parent, options) {
+		return getChartByType(options.type, parent, options);
 	}
 }

src/js/charts/AxisChart.js

@@ -9,8 +9,8 @@ import { makeOverlay, updateOverlay } from '../utils/draw';
 import { MIN_BAR_PERCENT_HEIGHT, DEFAULT_AXIS_CHART_TYPE, BAR_CHART_SPACE_RATIO, LINE_CHART_DOT_SIZE } from '../utils/constants';
 
 export default class AxisChart extends BaseChart {
-	constructor(args) {
-		super(args);
+	constructor(parent, args) {
+		super(parent, args);
 		this.isSeries = args.isSeries;
 		this.valuesOverPoints = args.valuesOverPoints;
 		this.formatTooltipY = args.formatTooltipY;

src/js/charts/BaseChart.js

@@ -9,36 +9,26 @@ import { getDifferentChart } from '../config';
 import { runSMILAnimation } from '../utils/animation';
 
 export default class BaseChart {
-	constructor({
-		height = 240,
-
-		title = '',
-		subtitle = '',
-		colors = [],
-
-		isNavigable = 0,
-		showLegend = 1,
-
-		type = '',
-
-		parent,
-		data
-	}) {
-		this.rawChartArgs = arguments[0];
+	constructor(parent, options) {
+		this.rawChartArgs = options;
 
 		this.parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
-		this.title = title;
-		this.subtitle = subtitle;
-		this.argHeight = height;
-		this.type = type;
+        if (!(this.parent instanceof HTMLElement)) {
+            throw new Error('No `parent` element to render on was provided.');
+        }
 
-		this.realData = this.prepareData(data);
+		this.title = options.title || '';
+		this.subtitle = options.subtitle || '';
+		this.argHeight = options.height || 240;
+		this.type = options.type || '';
+
+		this.realData = this.prepareData(options.data);
 		this.data = this.prepareFirstData(this.realData);
 		this.colors = [];
 		this.config = {
 			showTooltip: 1, // calculate
-			showLegend: 1,
-			isNavigable: isNavigable,
+			showLegend: options.showLegend || 1,
+			isNavigable: options.isNavigable || 0,
 			animate: 1
 		};
 		this.state = {};
@@ -49,7 +39,7 @@ export default class BaseChart {
 			this.overlays = [];
 		}
 
-		this.configure(arguments[0]);
+		this.configure(options);
 	}
 
 	configure(args) {
@@ -89,13 +79,7 @@ export default class BaseChart {
 		this.rightMargin = RIGHT_MARGIN_BASE_CHART;
 	}
 
-	validate(){
-		let args = this.rawChartArgs;
-		// Now yo have the args, set this stuff only after validating
-		if(!this.parent) {
-			console.error("No parent element to render on was provided.");
-			return false;
-		}
+	validate() {
 		return true;
 	}
 
@@ -300,6 +284,6 @@ export default class BaseChart {
 	removeDataPoint(index = 0) {}
 
 	getDifferentChart(type) {
-		return getDifferentChart(type, this.type, this.rawChartArgs);
+		return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
 	}
 }

src/js/charts/Heatmap.js

@@ -5,29 +5,21 @@ import { calcDistribution, getMaxCheckpoint } from '../utils/intervals';
 import { isValidColor } from '../utils/colors';
 
 export default class Heatmap extends BaseChart {
-	constructor({
-		start = '',
-		domain = '',
-		subdomain = '',
-		data = {},
-		discrete_domains = 0,
-		count_label = '',
-		legend_colors = []
-	}) {
-		super(arguments[0]);
+	constructor(parent, options) {
+		super(parent, options);
 
 		this.type = 'heatmap';
 
-		this.domain = domain;
-		this.subdomain = subdomain;
-		this.data = data;
-		this.discrete_domains = discrete_domains;
-		this.count_label = count_label;
+		this.domain = options.domain || '';
+		this.subdomain = options.subdomain || '';
+		this.data = options.data || {};
+		this.discrete_domains = options.discrete_domains || 1;
+		this.count_label = options.count_label || '';
 
 		let today = new Date();
-		this.start = start || addDays(today, 365);
+		this.start = options.start || addDays(today, 365);
 
-		legend_colors = legend_colors.slice(0, 5);
+		let legend_colors = (options.legend_colors || []).slice(0, 5);
 		this.legend_colors = this.validate_colors(legend_colors)
 			? legend_colors
 			: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];

src/js/charts/PercentageChart.js

@@ -2,8 +2,8 @@ import BaseChart from './BaseChart';
 import { $, getOffset } from '../utils/dom';
 
 export default class PercentageChart extends BaseChart {
-	constructor(args) {
-		super(args);
+	constructor(parent, args) {
+		super(parent, args);
 		this.type = 'percentage';
 
 		this.max_slices = 10;

src/js/charts/PieChart.js

@@ -7,8 +7,8 @@ const ANGLE_RATIO = Math.PI / 180;
 const FULL_ANGLE = 360;
 
 export default class PieChart extends BaseChart {
-	constructor(args) {
-		super(args);
+	constructor(parent, args) {
+		super(parent, args);
 		this.type = 'pie';
 		this.elements_to_animate = null;
 		this.hoverRadio = args.hoverRadio || 0.1;

src/js/config.js

@@ -21,7 +21,7 @@ const COLOR_COMPATIBLE_CHARTS = {
 	heatmap: []
 };
 
-export function getDifferentChart(type, current_type, args) {
+export function getDifferentChart(type, current_type, parent, args) {
 	if(type === current_type) return;
 
 	if(!ALL_CHART_TYPES.includes(type)) {
@@ -38,8 +38,7 @@ export function getDifferentChart(type, current_type, args) {
 	// Okay, this is anticlimactic
 	// this function will need to actually be 'changeChartType(type)'
 	// that will update only the required elements, but for now ...
-	return new Chart({
-		parent: args.parent,
+	return new Chart(parent, {
 		title: args.title,
 		data: args.data,
 		type: type,