feat(core angular react): support negative y-values

affects: @peretz/charts support negative y-values
carbon-design-system · Aug 15, 2018 · cfa941d · cfa941d
1 parent 5064f63
commit cfa941d
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 47 deletions.
diff --git a/packages/core/demo/demo-data/bar.ts b/packages/core/demo/demo-data/bar.ts
@@ -8,8 +8,8 @@ export const groupedBarData = {
 			backgroundColors: [colors[0]],
 			data: [
 				65000,
-				29123,
-				35213,
+				-29123,
+				-35213,
 				51213,
 				16932
 			]
@@ -19,28 +19,28 @@ export const groupedBarData = {
 			backgroundColors: [colors[1]],
 			data: [
 				32432,
-				21312,
-				56456,
-				21312,
+				-21312,
+				-56456,
+				-21312,
 				34234
 			]
 		},
 		{
 			label: "Dataset 3",
 			backgroundColors: [colors[2]],
 			data: [
-				12312,
+				-12312,
 				23232,
 				34232,
-				12312,
-				34234
+				-12312,
+				-34234
 			]
 		},
 		{
 			label: "Dataset 4",
 			backgroundColors: [colors[3]],
 			data: [
-				32423,
+				-32423,
 				21313,
 				64353,
 				24134,
@@ -51,7 +51,6 @@ export const groupedBarData = {
 };
 
 export const groupedBarOptions = {
-	accessibility: true,
 	scales: {
 		x: {
 			title: "2018 Annual Sales Figures",
@@ -64,8 +63,8 @@ export const groupedBarOptions = {
 		},
 		y2: {
 			ticks: {
-				max: 1,
-				min: 0
+				max: 70,
+				min: -60
 			}
 		}
 	},
@@ -109,6 +108,56 @@ export const simpleBarOptions = {
 	containerResizable: true,
 };
 
+export const stackedBarData = {
+	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
+	datasets: [
+		{
+			label: "Dataset 1",
+			backgroundColors: [colors[0]],
+			data: [
+				65000,
+				29123,
+				35213,
+				51213,
+				16932
+			]
+		},
+		{
+			label: "Dataset 2",
+			backgroundColors: [colors[1]],
+			data: [
+				32432,
+				21312,
+				56456,
+				21312,
+				34234
+			]
+		},
+		{
+			label: "Dataset 3",
+			backgroundColors: [colors[2]],
+			data: [
+				12312,
+				23232,
+				34232,
+				12312,
+				34234
+			]
+		},
+		{
+			label: "Dataset 4",
+			backgroundColors: [colors[3]],
+			data: [
+				32423,
+				21313,
+				64353,
+				24134,
+				32423
+			]
+		}
+	]
+};
+
 // Stacked bar
 export const stackedBarOptions = {
 	accessibility: false,

diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
@@ -76,16 +76,16 @@ <h2>Basic chart types: Demo</h2>
 			</div>
 		</div>
 
-		<div class="chart-holder has-actions" id="classy-simple-bar-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-simple-bar">
+		<div class="chart-holder has-actions" id="classy-simple-bar-accessible-chart-holder"></div>
+		<div class="chart-demo-actions" id="actions-simple-bar-accessible">
 			<div class="btn-group--lg" role="group" aria-label="Options for changing data">
-				<button id="change-data-simple-bar" class="btn--primary" type="button">Change Data</button>
+				<button id="change-data-simple-bar-accessible" 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="simpleBarActions">
+				<ul class="btn_menu"  role="menu" aria-labelledby="simpleBarAccessibleActions">
 				  <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>
@@ -110,16 +110,16 @@ <h2>Basic chart types: Demo</h2>
 			</div>
 		</div>
 
-		<div class="chart-holder has-actions" id="classy-simple-bar-accessible-chart-holder"></div>
-		<div class="chart-demo-actions" id="actions-simple-bar-accessible">
+		<div class="chart-holder has-actions" id="classy-simple-bar-chart-holder"></div>
+		<div class="chart-demo-actions" id="actions-simple-bar">
 			<div class="btn-group--lg" role="group" aria-label="Options for changing data">
-				<button id="change-data-simple-bar-accessible" class="btn--primary" type="button">Change Data</button>
+				<button id="change-data-simple-bar" 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="simpleBarAccessibleActions">
+				<ul class="btn_menu"  role="menu" aria-labelledby="simpleBarActions">
 				  <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>

diff --git a/packages/core/demo/index.ts b/packages/core/demo/index.ts
@@ -18,6 +18,7 @@ import {
 	groupedBarData,
 	simpleBarOptions,
 	simpleBarData,
+	stackedBarData,
 	stackedBarOptions,
 	// Pie & donut
 	pieOptions,
@@ -47,7 +48,7 @@ const chartTypes = [
 		id: "stacked-bar",
 		name: "Bar",
 		options: stackedBarOptions,
-		data: groupedBarData
+		data: stackedBarData
 	},
 	{
 		id: "simple-bar-accessible",
@@ -59,7 +60,7 @@ const chartTypes = [
 		id: "stacked-bar-accessible",
 		name: "Bar",
 		options: Object.assign({}, stackedBarOptions, {accessibility: true}),
-		data: groupedBarData
+		data: stackedBarData
 	},
 	{
 		id: "curved-line",

diff --git a/packages/core/src/bar-chart.ts b/packages/core/src/bar-chart.ts
@@ -4,6 +4,24 @@ import { BaseAxisChart } from "./base-axis-chart";
 import { StackedBarChart } from "./stacked-bar-chart";
 import { Configuration } from "./configuration";
 
+const getYMin = configs => {
+	const { datasets } = configs.data;
+	const { scales } = configs.options;
+	let yMin;
+
+	if (datasets.length === 1) {
+		yMin = d3.min(datasets[0].data);
+	} else {
+		yMin = d3.min(datasets, (d: any) => (d3.min(d.data)));
+	}
+
+	if (scales.y.yMinAdjuster) {
+		yMin = scales.y.yMinAdjuster(yMin);
+	}
+
+	return yMin;
+};
+
 export class BarChart extends BaseAxisChart {
 	x: any;
 	x1?: any;
@@ -12,7 +30,7 @@ export class BarChart extends BaseAxisChart {
 
 	constructor(holder: Element, configs: any) {
 		// If this is a stacked bar chart, change the object prototype
-		if (configs.options.scales.y.stacked) {
+		if (configs.options.scales.y.stacked && getYMin(configs) >= 0 ) {
 			return new StackedBarChart(holder, configs);
 		}
 
@@ -61,9 +79,9 @@ export class BarChart extends BaseAxisChart {
 						.append("rect")
 						.classed("bar", true)
 						.attr("x", d => this.x1(d.datasetLabel))
-						.attr("y", d => this.y(d.value))
+						.attr("y", d => this.y(Math.max(0, d.value)))
 						.attr("width", this.x1.bandwidth())
-						.attr("height", d => height - this.y(d.value))
+						.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
 						.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
 						.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.label) : null)
 						.attr("stroke-width", Configuration.bars.default.strokeWidth)
@@ -106,9 +124,9 @@ export class BarChart extends BaseAxisChart {
 			.append("rect")
 			.attr("class", "bar")
 			.attr("x", d => this.x1(d.datasetLabel))
-			.attr("y", d => this.y(d.value))
+			.attr("y", d => this.y(Math.max(0, d.value)))
 			.attr("width", this.x1.bandwidth())
-			.attr("height", d => height - this.y(d.value))
+			.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
 			.attr("opacity", 0)
 			.transition(this.getFillTransition())
 			.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
@@ -122,9 +140,9 @@ export class BarChart extends BaseAxisChart {
 			.append("rect")
 			.attr("class", "bar")
 			.attr("x", d => this.x1(d.datasetLabel))
-			.attr("y", d => this.y(d.value))
+			.attr("y", d => this.y(Math.max(0, d.value)))
 			.attr("width", this.x1.bandwidth())
-			.attr("height", d => height - this.y(d.value))
+			.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
 			.attr("opacity", 0)
 			.transition(this.getFillTransition())
 			.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
@@ -175,9 +193,9 @@ export class BarChart extends BaseAxisChart {
 			// TODO
 			// .ease(d3.easeCircle)
 			.attr("x", d => this.x1(d.datasetLabel))
-			.attr("y", d => this.y(d.value))
+			.attr("y", d => this.y(Math.max(0, d.value)))
 			.attr("width", this.x1.bandwidth())
-			.attr("height", d => height - this.y(d.value))
+			.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
 			.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
 			.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.label) : null);
 	}