improvement: add demo for uneven data and revise code

carbon-design-system · Jun 24, 2020 · f9c2713 · f9c2713
1 parent 271cc4e
commit f9c2713
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 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
@@ -164,12 +164,22 @@ export class ChartModel {
 			(datum) => datum[domainIdentifier]
 		).keys();
 
+		const axisPosition = this.services.cartesianScales.domainAxisPosition; 
+		const scaleType = options.axes[axisPosition].scaleType;
+
 		// Sort keys
-		stackKeys.sort((a, b) => {
-			const dateA: any = new Date(a);
-			const dateB: any = new Date(b);
-			return dateA - dateB;
-		})
+		if (scaleType === ScaleTypes.TIME) {
+			stackKeys.sort((a, b) => {
+				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();