add lines to stacked area chart

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(

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)
 			})