From f7fd64ed666d642b4b4bb7fe8c64a3104442d035 Mon Sep 17 00:00:00 2001
From: Fei Z <feifeizheng@outlook.com>
Date: Wed, 24 Jun 2020 18:49:42 -0400
Subject: [PATCH] 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 <45505172+Donisius@users.noreply.github.com>

* style: add semicolons and revert code

Co-authored-by: Fei <fei-fei.zheng@ibm.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>
Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>
---
 packages/core/demo/data/area.ts  | 28 ++++++++++++++++++++++++++++
 packages/core/demo/data/index.ts |  6 ++++++
 packages/core/src/model.ts       | 18 ++++++++++++++++++
 3 files changed, 52 insertions(+)

diff --git a/packages/core/demo/data/area.ts b/packages/core/demo/data/area.ts
index 2556a61139..33b687379f 100644
--- 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
index e6190f44c3..bea8dc0723 100644
--- 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
index 0688d8e307..ff324b06d7 100644
--- 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) => {