From 162478e099d8fdf7a0ec1a282f7076a5fa0cabfd Mon Sep 17 00:00:00 2001
From: Luca Falasco <falasco.luca@gmail.com>
Date: Wed, 22 Apr 2020 16:25:07 +0200
Subject: [PATCH] add lines to stacked area chart

---
 packages/core/src/charts/area-stacked.ts    |  5 +++--
 packages/core/src/components/graphs/line.ts | 22 ++++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/charts/area-stacked.ts b/packages/core/src/charts/area-stacked.ts
index aa56270a65..f5a56c00a4 100644
--- a/packages/core/src/charts/area-stacked.ts
+++ b/packages/core/src/charts/area-stacked.ts
@@ -5,7 +5,7 @@ import { ChartConfig, StackedAreaChartOptions } from "../interfaces/index";
 import { Tools } from "../tools";
 
 // Components
-import { Grid, StackedArea, TwoDimensionalAxes } from "../components/index";
+import { Grid, StackedArea, TwoDimensionalAxes, Line } from "../components/index";
 
 export class StackedAreaChart extends AxisChart {
 	constructor(
@@ -32,7 +32,8 @@ export class StackedAreaChart extends AxisChart {
 		const graphFrameComponents = [
 			new TwoDimensionalAxes(this.model, this.services),
 			new Grid(this.model, this.services),
-			new StackedArea(this.model, this.services)
+			new StackedArea(this.model, this.services),
+			new Line(this.model, this.services, { stacked: true })
 		];
 
 		const components: any[] = this.getAxisChartComponents(
diff --git a/packages/core/src/components/graphs/line.ts b/packages/core/src/components/graphs/line.ts
index 3a59c57ebf..8c9b21cbad 100644
--- a/packages/core/src/components/graphs/line.ts
+++ b/packages/core/src/components/graphs/line.ts
@@ -4,7 +4,6 @@ import * as Configuration from "../../configuration";
 import { Roles, Events } from "../../interfaces";
 
 // D3 Imports
-import { select } from "d3-selection";
 import { line } from "d3-shape";
 
 export class Line extends Component {
@@ -20,6 +19,7 @@ export class Line extends Component {
 
 	render(animate = true) {
 		const svg = this.getContainerSVG();
+		const options = this.model.getOptions();
 
 		// D3 line generator function
 		const lineGenerator = line()
@@ -36,10 +36,25 @@ export class Line extends Component {
 				return true;
 			});
 
-		const groupedData = this.model.getGroupedData();
+		let data = []
+		if (this.configs.stacked) {
+			const stackedData = this.model.getStackedData({ percentage: options.percentage })
+			
+			data = stackedData.map(d => ({
+				name: d[0].group,
+				data: d.map(datum => ({
+					date: datum.data.sharedStackKey,
+					group: datum.group,
+					value: datum[1]
+				}))
+			})) 
+		} else {
+		 data = this.model.getGroupedData()
+		}
+
 		// Update the bound data on line groups
 		const lineGroups = svg.selectAll("g.lines")
-			.data(groupedData, group => group.name);
+			.data(data, group => group.name);
 
 		// Remove elements that need to be exited
 		// We need exit at the top here to make sure that
@@ -60,6 +75,7 @@ export class Line extends Component {
 
 		// Apply styles and datum
 		enteringPaths.merge(svg.selectAll("g.lines path"))
+			.data(data, group => group.name)
 			.attr("stroke", (group, i) => {
 				return this.model.getStrokeColor(group.name)
 			})