Stacked Area chart

packages/angular/src/area-chart-stacked.component.ts

@@ -0,0 +1,34 @@
+import {
+	Component,
+	AfterViewInit
+} from "@angular/core";
+
+import { BaseChart } from "./base-chart.component";
+
+import { StackedAreaChart } from "@carbon/charts";
+
+/**
+ * Wrapper around `StackedAreaChart` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: "ibm-stacked-area-chart",
+	template: ``
+})
+export class StackedAreaChartComponent extends BaseChart implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		this.chart = new StackedAreaChart(
+			this.elementRef.nativeElement,
+			{
+				data: this.data,
+				options: this.options
+			}
+		);
+
+		Object.assign(this, this.chart);
+	}
+}

packages/angular/src/charts.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from "@angular/common";
 
 import { BaseChart } from "./base-chart.component";
 import { AreaChartComponent } from "./area-chart.component";
+import { StackedAreaChartComponent } from "./area-chart-stacked.component";
 import { SimpleBarChartComponent } from "./bar-chart-simple.component";
 import { GroupedBarChartComponent } from "./bar-chart-grouped.component";
 import { StackedBarChartComponent } from "./bar-chart-stacked.component";
@@ -20,6 +21,7 @@ import { RadarChartComponent } from "./radar-chart.component";
 	declarations: [
 		BaseChart,
 		AreaChartComponent,
+		StackedAreaChartComponent,
 		SimpleBarChartComponent,
 		GroupedBarChartComponent,
 		StackedBarChartComponent,
@@ -33,6 +35,7 @@ import { RadarChartComponent } from "./radar-chart.component";
 	exports: [
 		BaseChart,
 		AreaChartComponent,
+		StackedAreaChartComponent,
 		SimpleBarChartComponent,
 		GroupedBarChartComponent,
 		StackedBarChartComponent,

packages/angular/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./charts.module";
 
 export * from "./base-chart.component";
+export * from "./area-chart-stacked.component";
 export * from "./bar-chart-simple.component";
 export * from "./bar-chart-grouped.component";
 export * from "./bar-chart-stacked.component";

packages/core/CHANGELOG.md

@@ -18,55 +18,31 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @carbon/charts
 
-
-
-
-
 ## [0.32.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.1...v0.32.2) (2020-06-05)
 
-
 ### Bug Fixes
 
-* **core, angular, react, vue, svelte:** fix scatter graph data updates ([#654](https://github.com/carbon-design-system/carbon-charts/issues/654)) ([673d627](https://github.com/carbon-design-system/carbon-charts/commit/673d627f47274b9815ef94e4a48bb25485e1b9a3))
-
-
-
-
+-   **core, angular, react, vue, svelte:** fix scatter graph data updates ([#654](https://github.com/carbon-design-system/carbon-charts/issues/654)) ([673d627](https://github.com/carbon-design-system/carbon-charts/commit/673d627f47274b9815ef94e4a48bb25485e1b9a3))
 
 ## [0.32.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.0...v0.32.1) (2020-06-03)
 
-
 ### Bug Fixes
 
-* fix missing title option in charts interface ([b74d658](https://github.com/carbon-design-system/carbon-charts/commit/b74d6582277632c8a2a1f460f3ce73aadd40e500))
-
-
-
-
+-   fix missing title option in charts interface ([b74d658](https://github.com/carbon-design-system/carbon-charts/commit/b74d6582277632c8a2a1f460f3ce73aadd40e500))
 
 # [0.32.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.30.24...v0.32.0) (2020-05-29)
 
-
 ### Bug Fixes
 
-* **core:** threshold - support non JS-date values ([a132497](https://github.com/carbon-design-system/carbon-charts/commit/a1324972fa5266151b490cb7eeed92a92da5b2c4))
-* **svelte:** copy svelte source to dist/src ([492a504](https://github.com/carbon-design-system/carbon-charts/commit/492a50470d2b64793bd2c67c4115bb2732bc44f7))
-
-
-
-
+-   **core:** threshold - support non JS-date values ([a132497](https://github.com/carbon-design-system/carbon-charts/commit/a1324972fa5266151b490cb7eeed92a92da5b2c4))
+-   **svelte:** copy svelte source to dist/src ([492a504](https://github.com/carbon-design-system/carbon-charts/commit/492a50470d2b64793bd2c67c4115bb2732bc44f7))
 
 # [0.31.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.30.24...v0.31.0) (2020-05-29)
 
-
 ### Bug Fixes
 
-* **core:** threshold - support non JS-date values ([a132497](https://github.com/carbon-design-system/carbon-charts/commit/a1324972fa5266151b490cb7eeed92a92da5b2c4))
-* **svelte:** copy svelte source to dist/src ([492a504](https://github.com/carbon-design-system/carbon-charts/commit/492a50470d2b64793bd2c67c4115bb2732bc44f7))
-
-
-
-
+-   **core:** threshold - support non JS-date values ([a132497](https://github.com/carbon-design-system/carbon-charts/commit/a1324972fa5266151b490cb7eeed92a92da5b2c4))
+-   **svelte:** copy svelte source to dist/src ([492a504](https://github.com/carbon-design-system/carbon-charts/commit/492a50470d2b64793bd2c67c4115bb2732bc44f7))
 
 ## [0.30.24](https://github.com/carbon-design-system/carbon-charts/compare/v0.30.23...v0.30.24) (2020-05-15)
 

packages/core/demo/create-codesandbox.ts

@@ -2,7 +2,8 @@ import { getParameters } from "codesandbox/lib/api/define";
 
 const packageJSON = require("@carbon/charts/package.json");
 const libraryVersion = packageJSON.version;
-const carbonComponentsVersion = packageJSON.devDependencies["carbon-components"];
+const carbonComponentsVersion =
+	packageJSON.devDependencies["carbon-components"];
 
 const ibmPlexFontCSS = `@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap";
 `;

packages/core/demo/data/area.ts

@@ -1,19 +1,19 @@
 export const areaTimeSeriesData = [
-    { group: "Dataset 1", date: new Date(2019, 0, 1), value: 0 },
-    { group: "Dataset 1", date: new Date(2019, 0, 6), value: 57312 },
-    { group: "Dataset 1", date: new Date(2019, 0, 8), value: 21432 },
-    { group: "Dataset 1", date: new Date(2019, 0, 15), value: 70323 },
-    { group: "Dataset 1", date: new Date(2019, 0, 19), value: 21300 },
-    { group: "Dataset 2", date: new Date(2019, 0, 1), value: 50000 },
-    { group: "Dataset 2", date: new Date(2019, 0, 5), value: 15000 },
-    { group: "Dataset 2", date: new Date(2019, 0, 8), value: 20000 },
-    { group: "Dataset 2", date: new Date(2019, 0, 13), value: 39213 },
-    { group: "Dataset 2", date: new Date(2019, 0, 19), value: 61213 },
-    { group: "Dataset 3", date: new Date(2019, 0, 2), value: 10 },
-    { group: "Dataset 3", date: new Date(2019, 0, 6), value: 37312 },
-    { group: "Dataset 3", date: new Date(2019, 0, 8), value: 51432 },
-    { group: "Dataset 3", date: new Date(2019, 0, 13), value: 40323 },
-    { group: "Dataset 3", date: new Date(2019, 0, 19), value: 31300 }
+	{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 0 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 6), value: 57312 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 8), value: 21432 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 15), value: 70323 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 19), value: 21300 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 1), value: 50000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 5), value: 15000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 8), value: 20000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 13), value: 39213 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 19), value: 61213 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 2), value: 10 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 6), value: 37312 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 8), value: 51432 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 13), value: 40323 },
+	{ group: "Dataset 3", date: new Date(2019, 0, 19), value: 31300 },
 ];
 
 export const areaTimeSeriesOptions = {
@@ -22,27 +22,27 @@ export const areaTimeSeriesOptions = {
 		bottom: {
 			title: "2019 Annual Sales Figures",
 			mapsTo: "date",
-			scaleType: "time"
+			scaleType: "time",
 		},
 		left: {
 			mapsTo: "value",
 			title: "Conversion rate",
-			scaleType: "linear"
-		}
-	}
+			scaleType: "linear",
+		},
+	},
 };
 
 export const areaTimeSeriesCurvedData = [
-    { group: "Dataset 1", date: new Date(2019, 0, 1), value: 0 },
-    { group: "Dataset 1", date: new Date(2019, 0, 6), value: -37312 },
-    { group: "Dataset 1", date: new Date(2019, 0, 8), value: -22392 },
-    { group: "Dataset 1", date: new Date(2019, 0, 15), value: -52576 },
-    { group: "Dataset 1", date: new Date(2019, 0, 19), value: 20135 },
-    { group: "Dataset 2", date: new Date(2019, 0, 1), value: 47263 },
-    { group: "Dataset 2", date: new Date(2019, 0, 5), value: 14178 },
-    { group: "Dataset 2", date: new Date(2019, 0, 8), value: 23094 },
-    { group: "Dataset 2", date: new Date(2019, 0, 13), value: 45281 },
-    { group: "Dataset 2", date: new Date(2019, 0, 19), value: -63954 }
+	{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 0 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 6), value: -37312 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 8), value: -22392 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 15), value: -52576 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 19), value: 20135 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 1), value: 47263 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 5), value: 14178 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 8), value: 23094 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 13), value: 45281 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 19), value: -63954 },
 ];
 
 export const areaTimeSeriesCurvedOptions = {
@@ -51,12 +51,61 @@ export const areaTimeSeriesCurvedOptions = {
 		bottom: {
 			title: "2019 Annual Sales Figures",
 			mapsTo: "date",
-			scaleType: "time"
+			scaleType: "time",
 		},
 		left: {
 			mapsTo: "value",
-			scaleType: "linear"
-		}
+			scaleType: "linear",
+		},
+	},
+	curve: "curveNatural",
+};
+
+export const stackedAreaTimeSeriesData = [
+	{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 10000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 5), value: 65000 },
+	{ 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, 1), value: 20000 },
+	{ 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, 13), value: 30213 },
+	{ 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 stackedAreaTimeSeriesOptions = {
+	title: "Stacked area (time series)",
+	axes: {
+		left: {
+			stacked: true,
+		},
+		bottom: {
+			scaleType: "time",
+		},
+	},
+	curve: "curveMonotoneX",
+};
+
+export const stackedAreaPercentageTimeSeriesOptions = {
+	title: "Stacked area (percentage)",
+	axes: {
+		left: {
+			domain: [0, 100],
+			stacked: true,
+			ticks: {
+				formatter: (d) => `${d}%`,
+			},
+		},
+		bottom: {
+			scaleType: "time",
+		},
 	},
-	curve: "curveNatural"
+	percentage: true,
+	curve: "curveMonotoneX",
 };