add area stacked percentage

carbon-design-system · Apr 17, 2020 · 8c4c43e · 8c4c43e
1 parent 32cfbb9
commit 8c4c43e
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 35 deletions.
diff --git a/packages/core/demo/data/area.ts b/packages/core/demo/data/area.ts
@@ -30,3 +30,20 @@ export const stackedAreaTimeSeriesOptions = {
 	},
 	curve: "curveMonotoneX"
 };
+
+export const stackedAreaPercentageTimeSeriesOptions = {
+	title: "Area Stacked Percentage (time series)",
+	axes: {
+		left: {
+			domain: [0, 100],
+			secondary: true,
+			stacked: true
+		},
+		bottom: {
+			scaleType: "time",
+			primary: true
+		}
+	},
+	percentage: true,
+	curve: "curveMonotoneX"
+};
diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
@@ -214,6 +214,11 @@ let allDemoGroups = [
 				options: areaDemos.stackedAreaTimeSeriesOptions,
 				data: areaDemos.stackedAreaTimeSeriesData,
 				chartType: chartTypes.StackedAreaChart
+			},
+			{
+				options: areaDemos.stackedAreaPercentageTimeSeriesOptions,
+				data: areaDemos.stackedAreaTimeSeriesData,
+				chartType: chartTypes.StackedAreaChart
 			}
 		]
 	},

diff --git a/packages/core/src/components/graphs/area-stacked.ts b/packages/core/src/components/graphs/area-stacked.ts
@@ -4,8 +4,7 @@ import * as Configuration from "../../configuration";
 import { Roles, ScaleTypes, Events, TooltipTypes } from "../../interfaces";
 
 // D3 Imports
-import { area, stack } from "d3-shape";
-import { Tools } from "../../tools";
+import { area } from "d3-shape";
 import { select, color } from "d3";
 
 export class StackedArea extends Component {
@@ -46,37 +45,6 @@ export class StackedArea extends Component {
 		});
 	}
 
-	// getStackedData() {
-	// 	const datasets = this.model.getGroupedData();
-	// 	const keys: string[] = this.model.getDataGroupNames();
-
-	// 	const flattenedData: [] = datasets.flatMap(d =>
-	// 		d.data.map(datum => ({
-	// 			[d.label]: datum.value,
-	// 			xValue: datum.date
-	// 		}))
-	// 	);
-
-	// 	const preStackData: { [key: string]: number }[] = flattenedData.reduce(
-	// 		(acc, cur: any) => {
-	// 			const index = acc.findIndex(o =>
-	// 				Tools.compareNumeric(o.xValue, cur.xValue)
-	// 			);
-
-	// 			if (index > -1) {
-	// 				acc[index] = { ...acc[index], ...cur };
-	// 			} else {
-	// 				acc.push({ ...cur });
-	// 			}
-
-	// 			return acc;
-	// 		},
-	// 		[]
-	// 	);
-
-	// 	return stack().groups(keys)(preStackData);
-	// }
-
 	addEventListeners() {
 		const self = this;
 		this.parent
@@ -145,6 +113,7 @@ export class StackedArea extends Component {
 	render(animate = true) {
 		const svg = this.getContainerSVG();
 		const self = this;
+		const options = this.model.getOptions();
 
 		const mainXScale = this.services.cartesianScales.getMainXScale();
 		const mainYScale = this.services.cartesianScales.getMainYScale();
@@ -159,7 +128,7 @@ export class StackedArea extends Component {
 			return;
 		}
 
-		const stackedData = this.model.getStackedData();
+		const stackedData = this.model.getStackedData({ percentage: options.percentage });
 
 		const areaGroups = svg
 			.selectAll("g.areas")

diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
@@ -226,13 +226,30 @@ export class ChartModel {
 		}) as any;
 	}
 
-	getStackedData() {
+	getStackedData({ percentage } = { percentage: false }) {
 		const options = this.getOptions();
 		const { groupMapsTo } = options.data;
 
 		const dataGroupNames = this.getDataGroupNames();
 		const dataValuesGroupedByKeys = this.getDataValuesGroupedByKeys();
 
+		if (percentage) {
+			const maxByKey = Tools.fromPairs(dataValuesGroupedByKeys.map((d: any) => [d.sharedStackKey, 0]));
+
+			dataValuesGroupedByKeys.forEach((d: any) => {
+				dataGroupNames.forEach(name => {
+					maxByKey[d.sharedStackKey] += d[name];
+				})
+			});
+
+			// cycle through data values to get percentage
+			dataValuesGroupedByKeys.forEach((d: any) => {
+				dataGroupNames.forEach(name => {
+					d[name] = d[name] / maxByKey[d.sharedStackKey] * 100;
+				})
+			});
+		}
+
 		return stack().keys(dataGroupNames)(dataValuesGroupedByKeys)
 			.map((series, i) => {
 				// Add data group names to each series

diff --git a/packages/core/src/tools.ts b/packages/core/src/tools.ts
@@ -11,6 +11,7 @@ import {
 	cloneDeep as lodashCloneDeep,
 	uniq as lodashUnique,
 	clamp as lodashClamp,
+	fromPairs as lodashFromPairs,
 	// the imports below are needed because of typescript bug (error TS4029)
 	Cancelable,
 	DebounceSettings
@@ -25,6 +26,7 @@ export namespace Tools {
 	export const merge = lodashMerge;
 	export const removeArrayDuplicates = lodashUnique;
 	export const clamp = lodashClamp;
+	export const fromPairs = lodashFromPairs;
 
 	/**
 	 * Returns default chart options merged with provided options,