Fix stacked area chart with uneven data (#681)

* fix: fix stacked area chart with uneven data sort stackKeys * style: remove console.log * improvement: add demo for uneven data and revise code * Update packages/core/src/model.ts Co-authored-by: Donisius Wigie <[email protected]> * style: add semicolons and revert code Co-authored-by: Fei <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Donisius Wigie <[email protected]>
carbon-design-system · Jun 24, 2020 · bc81b6a · bc81b6a
1 parent f53e68f
commit bc81b6a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/packages/core/demo/data/area.ts b/packages/core/demo/data/area.ts
@@ -92,6 +92,34 @@ export const stackedAreaTimeSeriesOptions = {
 	curve: "curveMonotoneX"
 };
 
+export const stackedAreaTimeSeriesUnevenData = [
+	{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 10000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 8), value: 10000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 13), value: 49213 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 17), value: 51213 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 5), value: 25000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 8), value: 60000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 17), value: 55213 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 1), value: 30000 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 5), value: 20000 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 8), value: 40000 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 13), value: 60213 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 17), value: 25213 }
+];
+
+export const stackedAreaTimeSeriesUnevenDataOptions = {
+	title: "Stacked area (time series with uneven data)",
+	axes: {
+		left: {
+			stacked: true
+		},
+		bottom: {
+			scaleType: "time"
+		}
+	},
+	curve: "curveMonotoneX"
+};
+
 export const stackedAreaPercentageTimeSeriesOptions = {
 	title: "Stacked area (percentage)",
 	axes: {

diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
@@ -117,6 +117,12 @@ let allDemoGroups = [
 				chartType: chartTypes.StackedAreaChart,
 				isDemoExample: true
 			},
+			{
+				options: areaDemos.stackedAreaTimeSeriesUnevenDataOptions,
+				data: areaDemos.stackedAreaTimeSeriesUnevenData,
+				chartType: chartTypes.StackedAreaChart,
+				isDemoExample: true
+			},
 			{
 				options: areaDemos.stackedAreaPercentageTimeSeriesOptions,
 				data: areaDemos.stackedAreaTimeSeriesData,

diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
@@ -163,6 +163,24 @@ export class ChartModel {
 			displayData,
 			(datum) => datum[domainIdentifier]
 		).keys();
+
+		const axisPosition = this.services.cartesianScales.domainAxisPosition; 
+		const scaleType = options.axes[axisPosition].scaleType;
+
+		// Sort keys
+		if (scaleType === ScaleTypes.TIME) {
+			stackKeys.sort((a: any, b: any) => {
+				const dateA: any = new Date(a);
+				const dateB: any = new Date(b);
+				return dateA - dateB;
+			});
+		} else if (
+			scaleType === ScaleTypes.LOG ||
+			scaleType === ScaleTypes.LINEAR
+		) {
+			stackKeys.sort((a: any, b: any) => a - b);
+		};
+
 		const dataGroupNames = this.getDataGroupNames();
 
 		return stackKeys.map((key) => {