feat(core): specify config as interfaces

- add interfaces for each chart types specific config
- add interface for the data format
- clean up unused variables

packages/core/src/bar-chart.ts

@@ -1,11 +1,12 @@
 // D3 Imports
 import { select, mouse } from "d3-selection";
-import { scaleBand } from "d3-scale";
+import { scaleBand, ScaleBand } from "d3-scale";
 import { min } from "d3-array";
 
 import { BaseAxisChart } from "./base-axis-chart";
 import { StackedBarChart } from "./stacked-bar-chart";
 import * as Configuration from "./configuration";
+import { ChartConfig, BarChartOptions, ChartTypes } from "./configuration";
 
 import { Tools } from "./tools";
 
@@ -53,12 +54,11 @@ const isWidthConstrained = (maxWidth, currentBandWidth) => {
 };
 
 export class BarChart extends BaseAxisChart {
-	x: any;
-	x1?: any;
-	y: any;
-	colorScale: any;
+	x1?: ScaleBand<any>;
 
-	constructor(holder: Element, configs: any) {
+	options: BarChartOptions;
+
+	constructor(holder: Element, configs: ChartConfig<BarChartOptions>) {
 		// If this is a stacked bar chart, change the object prototype
 		if (configs.options.scales.y.stacked) {
 			if (getYMin(configs) >= 0) {
@@ -70,6 +70,13 @@ export class BarChart extends BaseAxisChart {
 
 		super(holder, configs);
 
+		// initialize options
+		if (configs.options) {
+			this.options = Object.assign({}, Configuration.options.BAR, configs.options);
+		} else {
+			this.options = Object.assign({}, Configuration.options.BAR);
+		}
+
 		// To be used for combo chart instances of a bar chart
 		const { axis } = configs.options;
 		if (axis) {
@@ -82,7 +89,7 @@ export class BarChart extends BaseAxisChart {
 				.rangeRound([0, getMaxBarWidth(Tools.getProperty(this.options, "bars", "maxWidth"), this.x.bandwidth())]);
 		}
 
-		this.options.type = "bar";
+		this.options.type = ChartTypes.BAR;
 	}
 
 	setXScale(xScale?: any) {
@@ -237,11 +244,6 @@ export class BarChart extends BaseAxisChart {
 	}
 
 	updateElements(animate: boolean, rect?: any, g?: any) {
-		const { scales } = this.options;
-
-		const chartSize = this.getChartSize();
-		const height = chartSize.height - this.getBBox(".x.axis").height;
-
 		if (!rect) {
 			rect = this.innerWrap.selectAll("rect.bar");
 		}

packages/core/src/base-axis-chart.ts

@@ -1,23 +1,24 @@
 // D3 Imports
 import { select } from "d3-selection";
-import { scaleBand, scaleLinear } from "d3-scale";
-import { axisBottom, axisLeft, axisRight } from "d3-axis";
+import { scaleBand, scaleLinear, ScaleBand, ScaleLinear } from "d3-scale";
+import { axisBottom, axisLeft, axisRight, AxisScale, AxisDomain } from "d3-axis";
 import { min, max } from "d3-array";
 
 import { BaseChart } from "./base-chart";
 
 import * as Configuration from "./configuration";
+import { ChartConfig, AxisChartOptions } from "./configuration";
 import { Tools } from "./tools";
 
 export class BaseAxisChart extends BaseChart {
-	x: any;
-	y: any;
-	y2: any;
+	x: ScaleBand<any>;
+	y: ScaleLinear<any, any>;
+	y2: ScaleLinear<any, any>;
 	thresholdDimensions: any;
 
 	options: any = Object.assign({}, Configuration.options.AXIS);
 
-	constructor(holder: Element, configs: any) {
+	constructor(holder: Element, configs: ChartConfig<AxisChartOptions>) {
 		super(holder, configs);
 
 		if (configs.options) {

packages/core/src/base-chart.ts

@@ -10,6 +10,7 @@ import { transition, Transition } from "d3-transition";
 
 // Internal Imports
 import * as Configuration from "./configuration";
+import { ChartConfig, BaseChartOptions, ChartData } from "./configuration";
 import { Tools } from "./tools";
 import PatternsService from "./services/patterns";
 
@@ -28,11 +29,11 @@ export class BaseChart {
 	svg: any;
 	innerWrap: any;
 
-	options: any = Object.assign({}, Configuration.options.BASE);
+	options: BaseChartOptions = Object.assign({}, Configuration.options.BASE);
 
 	// Data
-	data: any;
-	displayData: any;
+	data: ChartData;
+	displayData: ChartData;
 	fixedDataLabels;
 
 	// Fill scales & fill related objects
@@ -46,7 +47,7 @@ export class BaseChart {
 		tooltips: null
 	};
 
-	constructor(holder: Element, configs: any) {
+	constructor(holder: Element, configs: ChartConfig<BaseChartOptions>) {
 		this.id = `chart-${BaseChart.chartCount++}`;
 
 		if (configs.options) {
@@ -165,7 +166,6 @@ export class BaseChart {
 	}
 
 	getKeysFromData() {
-		const { datasets } = this.displayData;
 		const keys = {};
 
 		if (this.getLegendType() === Configuration.legend.basedOn.LABELS) {

packages/core/src/combo-chart.ts

@@ -1,16 +1,20 @@
 import { BaseAxisChart } from "./base-axis-chart";
 
-import * as ChartTypes from "./index";
+import * as ChartInstances from "./index";
+import * as Configuration from "./configuration";
+import { ChartConfig, ComboChartOptions, ChartTypes } from "./configuration";
 
 // TODO - Support adding/removing charts when updating data
 export class ComboChart extends BaseAxisChart {
 	// Includes all the sub-charts
 	charts = [];
 
-	constructor(holder: Element, configs: any) {
+	options: ComboChartOptions = Object.assign({}, Configuration.options.COMBO);
+
+	constructor(holder: Element, configs: ChartConfig<ComboChartOptions>) {
 		super(holder, configs);
 
-		this.options.type = "combo";
+		this.options.type = ChartTypes.COMBO;
 	}
 
 	// Extract data related to the specific sub-chart
@@ -47,10 +51,10 @@ export class ComboChart extends BaseAxisChart {
 
 		this.displayData.datasets.forEach(dataset => {
 			// If the chart type is valid
-			if (ChartTypes[dataset.chartType]) {
+			if (ChartInstances[dataset.chartType]) {
 				// If the chart for this dataset has not already been created
 				if (this.charts.findIndex(chart => chart.type === dataset.chartType) === -1) {
-					if (ChartTypes[dataset.chartType].prototype instanceof BaseAxisChart) {
+					if (ChartInstances[dataset.chartType].prototype instanceof BaseAxisChart) {
 						const chartConfigs = {
 							data: this.extractDataForChart(dataset.chartType),
 							options: Object.assign({}, this.options, {
@@ -62,7 +66,7 @@ export class ComboChart extends BaseAxisChart {
 							})
 						};
 
-						const chart = new ChartTypes[dataset.chartType](
+						const chart = new ChartInstances[dataset.chartType](
 							this.holder,
 							chartConfigs
 						);