feat(core): support width & maxWidth values for bars

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

@@ -110,10 +110,7 @@ export const simpleBarOptions = {
 	},
 	legendClickable: true,
 	containerResizable: true,
-	theme: getTheme(),
-	bars: {
-		maxWidth: 50
-	},
+	theme: getTheme()
 };
 
 // Stacked bar

packages/core/src/bar-chart.ts

@@ -1,5 +1,5 @@
 // D3 Imports
-import { select, mouse } from "d3-selection";
+import { select } from "d3-selection";
 import { scaleBand, ScaleBand } from "d3-scale";
 import { min } from "d3-array";
 
@@ -31,7 +31,22 @@ const getYMin = configs => {
 // returns the configured max width or the calculated bandwidth
 // whichever is lower
 // defaults to the calculated bandwidth if no maxWidth is defined
-const getMaxBarWidth = (maxWidth, currentBandWidth) => {
+export const getBarWidth = function() {
+	const width = Tools.getProperty(this.options, "bars", "width");
+	const maxWidth = Tools.getProperty(this.options, "bars", "maxWidth");
+	const currentBandWidth = this.x.bandwidth();
+
+	if (width) {
+		if (maxWidth) {
+			if (width <= maxWidth) {
+				return width;
+			}
+
+			return maxWidth;
+		}
+
+		return width;
+	}
 	if (!maxWidth) {
 		return currentBandWidth;
 	}
@@ -43,7 +58,10 @@ const getMaxBarWidth = (maxWidth, currentBandWidth) => {
 
 // returns true if the calculated bandwidth is greater than the maxWidth (if defined)
 // i.e. if we should be constraining ourselves to a specific bar width
-const isWidthConstrained = (maxWidth, currentBandWidth) => {
+export const isWidthConstrained = function() {
+	const maxWidth = Tools.getProperty(this.options, "bars", "maxWidth");
+	const currentBandWidth = this.x.bandwidth();
+
 	if (!maxWidth) {
 		return false;
 	}
@@ -83,10 +101,9 @@ export class BarChart extends BaseAxisChart {
 			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(this.data.datasets.map(dataset => dataset.label))
-				.rangeRound([0, getMaxBarWidth(Tools.getProperty(this.options, "bars", "maxWidth"), this.x.bandwidth())]);
+				.rangeRound([0, getBarWidth.bind(this)()]);
 		}
 
 		this.options.type = ChartType.BAR;
@@ -112,11 +129,11 @@ export class BarChart extends BaseAxisChart {
 		}
 
 		this.x1.domain(this.displayData.datasets.map(dataset => dataset.label))
-			.rangeRound([0, getMaxBarWidth(Tools.getProperty(this.options, "bars", "maxWidth"), this.x.bandwidth())]);
+			.rangeRound([0, getBarWidth.bind(this)()]);
 	}
 
 	getBarX(d) {
-		if (!isWidthConstrained(Tools.getProperty(this.options, "bars", "maxWidth"), this.x.bandwidth())) {
+		if (!isWidthConstrained.bind(this)()) {
 			return this.x1(d.datasetLabel);
 		}
 

packages/core/src/stacked-bar-chart.ts

@@ -1,11 +1,13 @@
 // D3 Imports
-import { select, mouse } from "d3-selection";
+import { select } from "d3-selection";
 import { stack } from "d3-shape";
 import { max } from "d3-array";
 
+// Internal imports
 import * as Configuration from "./configuration";
 import { ChartConfig, StackedBarChartOptions, ChartType } from "./configuration";
 import { BaseAxisChart } from "./base-axis-chart";
+import { getBarWidth } from "./bar-chart";
 
 // Add datasetLabel to each piece of data
 // To be used to get the fill color
@@ -70,7 +72,9 @@ export class StackedBarChart extends BaseAxisChart {
 	}
 
 	// currently unused, but required to match the BarChart class
-	getBarX(d): number { return 0; }
+	getBarX(d): number {
+		return this.x(d.data.label) + this.x.step() / 2 - getBarWidth.bind(this)() / 2 - (Configuration.scales.x.padding * this.x.bandwidth()) / 2;
+	}
 
 	draw() {
 		this.innerWrap.style("width", "100%")
@@ -94,10 +98,10 @@ export class StackedBarChart extends BaseAxisChart {
 				.enter()
 					.append("rect")
 					.classed("bar", true)
-					.attr("x", d => this.x(d.data.label))
+					.attr("x", this.getBarX.bind(this))
 					.attr("y", d => this.y(d[1]))
 					.attr("height", d => this.y(d[0]) - this.y(d[1]))
-					.attr("width", d => this.x.bandwidth())
+					.attr("width", getBarWidth.bind(this))
 					.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
 					.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
 					.attr("stroke-width", Configuration.bars.default.strokeWidth)
@@ -130,10 +134,10 @@ export class StackedBarChart extends BaseAxisChart {
 			selection.enter()
 				.append("rect")
 				.classed("bar", true)
-				.attr("x", d => this.x(d.data.label))
+				.attr("x", this.getBarX.bind(this))
 				.attr("y", d => this.y(d[1]))
 				.attr("height", d => this.y(d[0]) - this.y(d[1]))
-				.attr("width", d => this.x.bandwidth())
+				.attr("width", getBarWidth.bind(this))
 				.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
 				.style("opacity", 0)
 				.transition(this.getFillTransition())
@@ -208,10 +212,10 @@ export class StackedBarChart extends BaseAxisChart {
 		rect
 			.transition(animate ? this.getFillTransition() : this.getInstantTransition())
 			.style("opacity", 1)
-			.attr("x", d => this.x(d.data.label))
+			.attr("x", this.getBarX.bind(this))
 			.attr("y", d => this.y(d[1]))
 			.attr("height", d => this.y(d[0]) - this.y(d[1]))
-			.attr("width", d => this.x.bandwidth())
+			.attr("width", getBarWidth.bind(this))
 			.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
 			.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
 			.attr("stroke-width", Configuration.bars.default.strokeWidth)
@@ -222,7 +226,7 @@ export class StackedBarChart extends BaseAxisChart {
 		const self = this;
 		const { accessibility } = this.options;
 
-		this.svg.selectAll("rect")
+		this.svg.selectAll("rect.bar")
 			.on("click", d => self.dispatchEvent("bar-onClick", d))
 			.on("mouseover", function(d) {
 				select(this)