feat(core): first attempt at combo-chart

packages/core/demo/demo-data/combo.ts

@@ -0,0 +1,75 @@
+import { colors } from "./colors";
+
+export const comboData = {
+	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
+	datasets: [
+		{
+			label: "Dataset 1",
+			backgroundColors: [colors[0]],
+			data: [
+				65000,
+				-29123,
+				-35213,
+				51213,
+				16932
+			],
+			chartType: "BarChart"
+		},
+		{
+			label: "Dataset 2",
+			backgroundColors: [colors[2]],
+			data: [
+				-12312,
+				23232,
+				34232,
+				-12312,
+				-34234
+			],
+			chartType: "BarChart"
+		},
+		{
+			label: "Dataset 3",
+			backgroundColors: [colors[3]],
+			data: [
+				-32423,
+				21313,
+				64353,
+				24134,
+				32423
+			],
+			chartType: "BarChart"
+		},
+		{
+			label: "Dataset 4",
+			backgroundColors: [colors[1]],
+			data: [
+				32432,
+				11312,
+				3234,
+				43534,
+				34234
+			],
+			chartType: "LineChart"
+		}
+	]
+};
+
+export const comboOptions = {
+	scales: {
+		x: {
+			title: "2018 Annual Sales Figures",
+		},
+		y: {
+			formatter: axisValue => `${axisValue / 1000}k`,
+			yMaxAdjuster: yMaxValue => yMaxValue * 1.1,
+		},
+		y2: {
+			ticks: {
+				max: 70,
+				min: -60
+			}
+		}
+	},
+	legendClickable: true,
+	containerResizable: true
+};

packages/core/demo/demo-data/index.ts

@@ -3,3 +3,4 @@ export { colors } from "./colors";
 export * from "./bar";
 export * from "./pie-donut";
 export * from "./line";
+export * from "./combo";

packages/core/demo/index.html

@@ -45,6 +45,24 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
 			</div>
 		</header>
 
+		<!-- Combo Chart -->
+		<!-- <div class="chart-holder has-actions" id="classy-combo-chart-holder"></div>
+		<div class="chart-demo-actions" id="actions-combo">
+			<div class="btn-group--lg" role="group" aria-label="Options for changing data">
+				<button id="change-data-combo" class="btn--primary" type="button">Change Data</button>
+
+				<button class="btn--primary-addon" id="largeExpMenuBtn2" type="button" aria-controls="largeBtn2ExpMenu" aria-expanded="true" aria-haspopup="true">
+					<peretz-icon set="arrows_chevrons" icon="chevron_up" size="sm" class="icon--white-sm"></peretz-icon>
+				</button>
+
+				<ul class="btn_menu"  role="menu" aria-labelledby="comboActions">
+				  <li role="menuitem" tabindex="0" class="change-data-promise" data-promise-delay="2000">Using Promises (2s)</li>
+				  <li role="menuitem" tabindex="1" class="change-data-promise" data-promise-delay="5000">Using Promises (5s)</li>
+				  <li role="menuitem" tabindex="2" class="change-data-promise" data-promise-delay="10000">Using Promises (10s)</li>
+				</ul>
+			</div>
+		</div> -->
+
 		<!-- Donut Chart -->
 		<div class="chart-holder has-actions" id="classy-donut-chart-holder"></div>
 		<div class="chart-demo-actions" id="actions-donut" role="region" aria-label="Donut chart actions">

packages/core/demo/index.ts

@@ -3,7 +3,7 @@ import {
 	LineChart,
 	PieChart,
 	DonutChart,
-	DonutCenter
+	ComboChart
 } from "../src/index";
 
 // Styles
@@ -25,7 +25,10 @@ import {
 	curvedLineOptions,
 	curvedLineData,
 	lineData,
-	lineOptions
+	lineOptions,
+	// Combo
+	comboData,
+	comboOptions
 } from "./demo-data/index";
 
 const chartTypes = [
@@ -41,6 +44,12 @@ const chartTypes = [
 		options: simpleBarOptions,
 		data: simpleBarData
 	},
+	{
+		id: "combo",
+		name: "Combo",
+		options: comboOptions,
+		data: comboData
+	},
 	{
 		id: "stacked-bar",
 		name: "Bar",
@@ -158,7 +167,7 @@ const changeDemoData = (chartType: any, oldData: any, delay?: number) => {
 				return newDataset;
 			});
 
-			if (removeADataset) {
+			if (removeADataset && chartType !== "combo") {
 				const randomIndex = Math.floor(Math.random() * (newData.datasets.length - 1));
 				newData.datasets.splice(randomIndex, randomIndex);
 			}
@@ -244,6 +253,18 @@ chartTypes.forEach(type => {
 
 				setDemoActionsEventListener(type.id, type.data);
 
+				break;
+			case "combo":
+				classyCharts[type.id] = new ComboChart(
+					classyContainer,
+					{
+						data: type.data,
+						options: Object.assign({}, type.options, {type: type.id}),
+					}
+				);
+
+				setDemoActionsEventListener(type.id, type.data);
+
 				break;
 			case "curved-line":
 			case "line":

packages/core/src/bar-chart.ts

@@ -43,19 +43,33 @@ export class BarChart extends BaseAxisChart {
 
 		super(holder, configs);
 
+		// To be used for combo chart instances of a bar chart
+		const { axis } = configs.options;
+		if (axis) {
+			const { bar: margins } = Configuration.charts.margin;
+			const chartSize = this.getChartSize();
+			const width = chartSize.width - margins.left - margins.right;
+
+			this.x1 = scaleBand().rangeRound([0, width]).padding(Configuration.bars.spacing.bars);
+			this.x1.domain(configs.data.datasets.map(dataset => dataset.label)).rangeRound([0, this.x.bandwidth()]);
+		}
+
 		this.options.type = "bar";
 	}
 
-	setXScale(noAnimation?: boolean) {
+	setXScale(xScale?: any) {
 		const { bar: margins } = Configuration.charts.margin;
-
 		const chartSize = this.getChartSize();
 		const width = chartSize.width - margins.left - margins.right;
 
-		this.x = scaleBand().rangeRound([0, width]).padding(Configuration.bars.spacing.datasets);
-		this.x1 = scaleBand().rangeRound([0, width]).padding(Configuration.bars.spacing.bars);
+		if (xScale) {
+			this.x = xScale;
+		} else {
+			this.x = scaleBand().rangeRound([0, width]).padding(Configuration.bars.spacing.datasets);
+			this.x.domain(this.displayData.labels);
+		}
 
-		this.x.domain(this.displayData.labels);
+		this.x1 = scaleBand().rangeRound([0, width]).padding(Configuration.bars.spacing.bars);
 		this.x1.domain(this.displayData.datasets.map(dataset => dataset.label)).rangeRound([0, this.x.bandwidth()]);
 	}
 
@@ -218,7 +232,7 @@ export class BarChart extends BaseAxisChart {
 
 		this.updateXandYGrid(true);
 		// Scale out the domains
-		this.setXScale(true);
+		this.setXScale();
 		this.setYScale();
 
 		// Set the x & y axis as well as their labels

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

@@ -19,12 +19,18 @@ export class BaseAxisChart extends BaseChart {
 
 	constructor(holder: Element, configs: any) {
 		super(holder, configs);
+
+		const { axis } = configs.options;
+		if (axis) {
+			this.x = axis.x;
+			this.y = axis.y;
+			this.y2 = axis.y2;
+		}
 	}
 
 	setSVG(): any {
 		super.setSVG();
 
-		const chartSize = this.getChartSize();
 		this.container.classed("chart-axis", true);
 		this.innerWrap.append("g")
 			.attr("class", "x grid");
@@ -39,22 +45,32 @@ export class BaseAxisChart extends BaseChart {
 			this.displayData = data;
 		}
 
-		this.setSVG();
+		// If an axis exists
+		const xAxisRef = select(this.holder).select(".axis.x");
+		if (!xAxisRef.node()) {
+			this.setSVG();
 
-		// Scale out the domains
-		// Set the x & y axis as well as their labels
-		this.setXScale();
-		this.setXAxis();
-		this.setYScale();
-		this.setYAxis();
+			// Scale out the domains
+			// Set the x & y axis as well as their labels
+			this.setXScale();
+			this.setXAxis();
+			this.setYScale();
+			this.setYAxis();
+
+			// Draw the x & y grid
+			this.drawXGrid();
+			this.drawYGrid();
 
-		// Draw the x & y grid
-		this.drawXGrid();
-		this.drawYGrid();
+			this.addOrUpdateLegend();
+		} else {
+			const holderRef = select(this.holder);
+
+			this.innerWrap = holderRef.select("g.inner-wrap");
+			this.svg = holderRef.select("svg.chart-svg");
+		}
 
 		this.draw();
 
-		this.addOrUpdateLegend();
 		this.addDataPointEventListener();
 	}
 
@@ -166,15 +182,19 @@ export class BaseAxisChart extends BaseChart {
 	 *  Axis & Grids                      *
 	 *************************************/
 
-	setXScale(noAnimation?: boolean) {
-		const { bar: margins } = Configuration.charts.margin;
-		const { scales } = this.options;
+	setXScale(xScale?: any) {
+		if (xScale) {
+			this.x = xScale;
+		} else {
+			const { bar: margins } = Configuration.charts.margin;
+			const { scales } = this.options;
 
-		const chartSize = this.getChartSize();
-		const width = chartSize.width - margins.left - margins.right;
+			const chartSize = this.getChartSize();
+			const width = chartSize.width - margins.left - margins.right;
 
-		this.x = scaleBand().rangeRound([0, width]).padding(Configuration.scales.x.padding);
-		this.x.domain(this.displayData.labels);
+			this.x = scaleBand().rangeRound([0, width]).padding(Configuration.scales.x.padding);
+			this.x.domain(this.displayData.labels);
+		}
 	}
 
 	setXAxis(noAnimation?: boolean) {
@@ -184,7 +204,9 @@ export class BaseAxisChart extends BaseChart {
 
 		const t = noAnimation ? this.getInstantTransition() : this.getDefaultTransition();
 
-		const xAxis = axisBottom(this.x).tickSize(0).tickSizeOuter(0);
+		const xAxis = axisBottom(this.x)
+			.tickSize(0)
+			.tickSizeOuter(0);
 		let xAxisRef = this.svg.select("g.x.axis");
 
 		// If the <g class="x axis"> exists in the chart SVG, just update it
@@ -273,17 +295,20 @@ export class BaseAxisChart extends BaseChart {
 		return yMin;
 	}
 
-	setYScale() {
+	setYScale(yScale?: any) {
 		const chartSize = this.getChartSize();
 		const height = chartSize.height - this.innerWrap.select(".x.axis").node().getBBox().height;
 
 		const { scales } = this.options;
 
 		const yMin = this.getYMin();
 		const yMax = this.getYMax();
-
-		this.y = scaleLinear().range([height, 0]);
-		this.y.domain([Math.min(yMin, 0), yMax]);
+		if (yScale) {
+			this.y = yScale;
+		} else {
+			this.y = scaleLinear().range([height, 0]);
+			this.y.domain([Math.min(yMin, 0), yMax]);
+		}
 
 		if (scales.y2 && scales.y2.ticks.max) {
 			this.y2 = scaleLinear().rangeRound([height, 0]);

packages/core/src/base-chart.ts

@@ -74,9 +74,7 @@ export class BaseChart {
 	}
 
 	setData(data: any) {
-		const { selectors } = Configuration;
-		const innerWrapElement = this.holder.querySelector(selectors.INNERWRAP);
-		const initialDraw = innerWrapElement === null;
+		const initialDraw = !this.innerWrap;
 		const newDataIsAPromise = Promise.resolve(data) === data;
 
 		// Dispatch the update event
@@ -234,7 +232,7 @@ export class BaseChart {
 	setSVG(): any {
 		const chartSize = this.getChartSize();
 		this.svg = this.container.append("svg")
-			.classed("chart-svg", true);
+			.classed("chart-svg " + this.options.type, true);
 
 		this.innerWrap = this.svg.append("g")
 			.classed("inner-wrap", true);