feat(core): add support for horizontal bar charts (#415)

* feat(core): add support for horizontal bar charts * add stories for horizontal bar * add horizontal discrete bar chart * add vue and angular stories * update zero-line transition * Update packages/core/src/components/graphs/bar-stacked.ts Co-Authored-By: Cal Smith <[email protected]> * enable switching orientations for grouped bar without duplicating draw logic * fix lint errors * draw simple bars in horizontal & vertical orientations * draw stacked bars regardless of 2D orientation * add orientation support for time-series stacked bar charts * use the calculated bar width in all 3 bar types * add requested PR changes * fix lint error * fix lint error * fix tests * fix lint error * fix tests tsconfig issue * add knobs to all stories * add requested PR changes * code style changes * code style fixes Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Cal Smith <[email protected]>
carbon-design-system · Jan 21, 2020 · 6a480f0 · 6a480f0
1 parent b4191b3
commit 6a480f0
Show file tree

Hide file tree

Showing 37 changed files with 976 additions and 439 deletions.
diff --git a/packages/angular/stories/bar-horizontal.stories.ts b/packages/angular/stories/bar-horizontal.stories.ts
@@ -0,0 +1,84 @@
+import { storiesOf } from "@storybook/angular";
+import { withKnobs, object } from "@storybook/addon-knobs";
+
+import { ChartsModule } from "../src/charts.module";
+
+import {
+	// Horizontal bar
+	groupedHorizontalBarOptions,
+	groupedHorizontalBarData,
+	simpleHorizontalBarOptions,
+	simpleHorizontalBarData,
+	simpleHorizontalBarTimeSeriesOptions,
+	simpleHorizontalBarTimeSeriesData,
+	stackedHorizontalBarTimeSeriesOptions,
+	stackedHorizontalBarTimeSeriesData,
+	stackedHorizontalBarData,
+	stackedHorizontalBarOptions,
+} from "../../core/demo/demo-data/index";
+import { addWidthAndHeight } from "./commons";
+
+const template = barType => `
+<ibm-${barType}-bar-chart
+	class="n-chart"
+	[data]="data"
+	[options]="options"
+	#${barType}BarChart>
+</ibm-${barType}-bar-chart>
+`;
+
+const stories = storiesOf("Bar (Horizontal)", module).addDecorator(withKnobs);
+stories.add(simpleHorizontalBarOptions.title, () => ({
+	template: template("simple"),
+	moduleMetadata: {
+		imports: [ChartsModule]
+	},
+	props: {
+		data: object("Data", simpleHorizontalBarData),
+		options: object("Options", addWidthAndHeight(simpleHorizontalBarOptions))
+	}
+}));
+
+stories.add(simpleHorizontalBarTimeSeriesOptions.title, () => ({
+	template: template("simple"),
+	moduleMetadata: {
+		imports: [ChartsModule]
+	},
+	props: {
+		data: object("Data", simpleHorizontalBarTimeSeriesData),
+		options: object("Options", addWidthAndHeight(simpleHorizontalBarTimeSeriesOptions))
+	}
+}));
+
+stories.add(groupedHorizontalBarOptions.title, () => ({
+	template: template("grouped"),
+	moduleMetadata: {
+		imports: [ChartsModule]
+	},
+	props: {
+		data: object("Data", groupedHorizontalBarData),
+		options: object("Options", addWidthAndHeight(groupedHorizontalBarOptions))
+	}
+}));
+
+stories.add(stackedHorizontalBarOptions.title, () => ({
+	template: template("stacked"),
+	moduleMetadata: {
+		imports: [ChartsModule]
+	},
+	props: {
+		data: object("Data", stackedHorizontalBarData),
+		options: object("Options", addWidthAndHeight(stackedHorizontalBarOptions))
+	}
+}));
+
+stories.add(stackedHorizontalBarTimeSeriesOptions.title, () => ({
+	template: template("stacked"),
+	moduleMetadata: {
+		imports: [ChartsModule]
+	},
+	props: {
+		data: object("Data", stackedHorizontalBarTimeSeriesData),
+		options: object("Options", addWidthAndHeight(stackedHorizontalBarTimeSeriesOptions))
+	}
+}));
diff --git a/packages/core/demo/chart-types.ts b/packages/core/demo/chart-types.ts
@@ -2,14 +2,24 @@ const {
 	// Bar
 	groupedBarOptions,
 	groupedBarData,
+	groupedHorizontalBarOptions,
+	groupedHorizontalBarData,
 	simpleBarOptions,
 	simpleBarData,
+	simpleHorizontalBarOptions,
+	simpleHorizontalBarData,
 	simpleBarTimeSeriesOptions,
 	simpleBarTimeSeriesData,
-	stackedBarData,
+	simpleHorizontalBarTimeSeriesOptions,
+	simpleHorizontalBarTimeSeriesData,
 	stackedBarOptions,
+	stackedBarData,
+	stackedHorizontalBarOptions,
+	stackedHorizontalBarData,
 	stackedBarTimeSeriesOptions,
 	stackedBarTimeSeriesData,
+	stackedHorizontalBarTimeSeriesOptions,
+	stackedHorizontalBarTimeSeriesData,
 	// Pie & donut
 	pieOptions,
 	pieData,
@@ -33,16 +43,21 @@ const {
 } = require("./demo-data/index");
 
 export const chartTypes = [
-	{
-		id: "grouped-bar",
-		options: groupedBarOptions,
-		data: groupedBarData
-	},
 	{
 		id: "simple-bar",
 		options: simpleBarOptions,
 		data: simpleBarData
 	},
+	{
+		id: "simple-horizontal-bar-time-series",
+		options: simpleHorizontalBarTimeSeriesOptions,
+		data: simpleHorizontalBarTimeSeriesData
+	},
+	{
+		id: "simple-horizontal-bar",
+		options: simpleHorizontalBarOptions,
+		data: simpleHorizontalBarData
+	},
 	{
 		id: "scatter-time-series",
 		options: scatterTimeSeriesOptions,
@@ -54,20 +69,40 @@ export const chartTypes = [
 		data: scatterData
 	},
 	{
-		id: "simple-bar-time-series",
-		options: simpleBarTimeSeriesOptions,
-		data: simpleBarTimeSeriesData
+		id: "grouped-bar",
+		options: groupedBarOptions,
+		data: groupedBarData
+	},
+	{
+		id: "grouped-horizontal-bar",
+		options: groupedHorizontalBarOptions,
+		data: groupedHorizontalBarData
 	},
 	{
 		id: "stacked-bar",
 		options: stackedBarOptions,
 		data: stackedBarData
 	},
+	{
+		id: "stacked-horizontal-bar",
+		options: stackedHorizontalBarOptions,
+		data: stackedHorizontalBarData
+	},
+	{
+		id: "simple-bar-time-series",
+		options: simpleBarTimeSeriesOptions,
+		data: simpleBarTimeSeriesData
+	},
 	{
 		id: "stacked-bar-time-series",
 		options: stackedBarTimeSeriesOptions,
 		data: stackedBarTimeSeriesData
 	},
+	{
+		id: "stacked-horizontal-bar-time-series",
+		options: stackedHorizontalBarTimeSeriesOptions,
+		data: stackedHorizontalBarTimeSeriesData
+	},
 	{
 		id: "pie",
 		options: pieOptions,

diff --git a/packages/core/demo/demo-data/bar.ts b/packages/core/demo/demo-data/bar.ts
@@ -57,7 +57,23 @@ export const groupedBarOptions = {
 		},
 		bottom: {
 			scaleType: "labels",
-			secondary: true,
+			secondary: true
+		}
+	}
+};
+
+// Horizontal Grouped
+export const groupedHorizontalBarData = groupedBarData;
+
+export const groupedHorizontalBarOptions = {
+	title: "Grouped horizontal bar (discrete)",
+	axes: {
+		left: {
+			scaleType: "labels",
+			primary: true,
+		},
+		bottom: {
+			secondary: true
 		}
 	}
 };
@@ -87,11 +103,26 @@ export const simpleBarOptions = {
 		},
 		bottom: {
 			scaleType: "labels",
-			secondary: true,
+			secondary: true
 		}
 	}
 };
 
+// Horizontal Simple
+export const simpleHorizontalBarData = simpleBarData;
+
+export const simpleHorizontalBarOptions = {
+	title: "Simple horizontal bar (discrete)",
+	axes: {
+		left: {
+			primary: true,
+			scaleType: "labels"
+		},
+		bottom: {
+			secondary: true
+		}
+	}
+};
 
 export const simpleBarTimeSeriesData = {
 	labels: ["Qty", "More", "Sold", "Restocking", "Miscellaneous"],
@@ -140,6 +171,22 @@ export const simpleBarTimeSeriesOptions = {
 	}
 };
 
+// Horizontal simple time series
+export const simpleHorizontalBarTimeSeriesOptions = {
+	title: "Simple horizontal bar (time series)",
+	axes: {
+		left: {
+			scaleType: "time",
+			primary: true
+		},
+		bottom: {
+			secondary: true
+		}
+	}
+};
+
+export const simpleHorizontalBarTimeSeriesData = simpleBarTimeSeriesData;
+
 // Stacked bar
 export const stackedBarData = {
 	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
@@ -196,11 +243,27 @@ export const stackedBarOptions = {
 		},
 		bottom: {
 			scaleType: "labels",
-			secondary: true,
+			secondary: true
 		}
 	}
 };
 
+// horizontal stacked bar
+export const stackedHorizontalBarData = stackedBarData;
+
+export const stackedHorizontalBarOptions = {
+	title: "Stacked horizontal bar (discrete)",
+	axes: {
+		left: {
+			scaleType: "labels",
+			primary: true
+		},
+		bottom: {
+			stacked: true,
+			secondary: true
+		}
+	}
+};
 
 export const stackedBarTimeSeriesData = {
 	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
@@ -321,3 +384,20 @@ export const stackedBarTimeSeriesOptions = {
 		}
 	}
 };
+
+// Stacked horizontal bar (time series)
+export const stackedHorizontalBarTimeSeriesOptions = {
+	title: "Stacked horizontal bar (time series)",
+	axes: {
+		left: {
+			primary: true,
+			scaleType: "time"
+		},
+		bottom: {
+			stacked: true,
+			secondary: true
+		}
+	}
+};
+
+export const stackedHorizontalBarTimeSeriesData = stackedBarTimeSeriesData;
diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts
@@ -5,7 +5,7 @@ const urlParams = new URLSearchParams(window.location.search);
 // Grab "theme" param from query string
 let themeToUse = colorPalettes.DEFAULT;
 if (urlParams.has("theme") && colorPalettes[urlParams.get("theme")]) {
-    themeToUse = colorPalettes[urlParams.get("theme")];
+	themeToUse = colorPalettes[urlParams.get("theme")];
 }
 
 export const colors = themeToUse;
diff --git a/packages/core/demo/demo-options.ts b/packages/core/demo/demo-options.ts
@@ -1,5 +1,3 @@
-import { colorPalettes } from "../src/index";
-
 export const setOrUpdateParam = (name, value) => {
     const params = new URLSearchParams(location.search)
 

diff --git a/packages/core/demo/index.ts b/packages/core/demo/index.ts
@@ -30,8 +30,7 @@ const changeDemoData = (chartType: any, chartObj: any) => {
 	// Function to be used to randomize a value
 	const randomizeValue = datum => {
 		const currentVal = datum.value !== undefined ? datum.value : datum;
-		const firstTry = Math.max(0.85 * currentVal, currentVal * Math.random() * (Math.random() * 5));
-		let result = currentVal > 0 ? Math.min(3 * currentVal, firstTry) : Math.max(3 * currentVal, firstTry);
+		let result = Math.random() > 0.5 ? 0.95 * currentVal : 1.05 * currentVal;
 
 		if (Math.random() > 0.5
 			|| chartType.indexOf("stacked") !== -1
@@ -157,14 +156,19 @@ chartTypes.forEach(type => {
 		let classToInitialize;
 		switch (type.id) {
 			case "simple-bar":
+			case "simple-horizontal-bar":
 			case "simple-bar-time-series":
+			case "simple-horizontal-bar-time-series":
 				classToInitialize = SimpleBarChart;
 				break;
 			case "grouped-bar":
+			case "grouped-horizontal-bar":
 				classToInitialize = GroupedBarChart;
 				break;
 			case "stacked-bar":
+			case "stacked-horizontal-bar":
 			case "stacked-bar-time-series":
+			case "stacked-horizontal-bar-time-series":
 				classToInitialize = StackedBarChart;
 				break;
 			case "scatter":

diff --git a/packages/core/src/axis-chart.ts b/packages/core/src/axis-chart.ts
@@ -17,11 +17,11 @@ import {
 } from "./components/index";
 import { Tools } from "./tools";
 
-import { Axes, Curves } from "./services/index";
+import { CartesianScales, Curves } from "./services/index";
 
 export class AxisChart extends Chart {
 	services: any = Object.assign(this.services, {
-		axes: Axes,
+		cartesianScales: CartesianScales,
 		curves: Curves
 	});
 

diff --git a/packages/core/src/charts/bar-grouped.ts b/packages/core/src/charts/bar-grouped.ts
@@ -12,7 +12,7 @@ import {
 	Grid,
 	GroupedBar,
 	TwoDimensionalAxes,
-	HorizontalZeroLine,
+	ZeroLine,
 	TooltipBar,
 	// the imports below are needed because of typescript bug (error TS4029)
 	Tooltip,
@@ -43,7 +43,7 @@ export class GroupedBarChart extends AxisChart {
 			new TwoDimensionalAxes(this.model, this.services),
 			new Grid(this.model, this.services),
 			new GroupedBar(this.model, this.services),
-			new HorizontalZeroLine(this.model, this.services)
+			new ZeroLine(this.model, this.services)
 		];
 
 		const components: any[] = this.getAxisChartComponents(graphFrameComponents);