From 4507a9b95535d6cda523bb3692c8219cc1f78e45 Mon Sep 17 00:00:00 2001
From: shaziajk <44590418+shaziajk@users.noreply.github.com>
Date: Tue, 30 Mar 2021 19:15:55 +0100
Subject: [PATCH] =?UTF-8?q?release=20-=20fix(bounded=20area=20chart):=20up?=
 =?UTF-8?q?date=20bounded=20area=20chart=20so=20bounds=20don't=20sh?=
 =?UTF-8?q?=E2=80=A6=20(#985)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(bounded area chart): update bounded area chart so bounds don't show for null values

Behaviour of bounded area chart now match that of the line chart where null values are shown as a
break in the chart

fix #980

* fix(area chart): update so area chart also does not display when a point is defined as null

Matches behaviour of line chart where line is not displayed for null values

Co-authored-by: Shazia Kayani <shazia.kayani@ibm.com>
---
 packages/core/src/components/graphs/area.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/graphs/area.ts b/packages/core/src/components/graphs/area.ts
index 4384d82aa0..fee293ecc5 100644
--- a/packages/core/src/components/graphs/area.ts
+++ b/packages/core/src/components/graphs/area.ts
@@ -41,7 +41,16 @@ export class Area extends Component {
 		const { cartesianScales } = this.services;
 
 		const orientation = cartesianScales.getOrientation();
-		const areaGenerator = area().curve(this.services.curves.getD3Curve());
+		const areaGenerator = area()
+			.curve(this.services.curves.getD3Curve())
+			.defined((datum: any, i) => {
+				const rangeIdentifier = cartesianScales.getRangeIdentifier();
+				const value = datum[rangeIdentifier];
+				if (value === null || value === undefined) {
+					return false;
+				}
+				return true;
+			});
 
 		// Update the bound data on area groups
 		const groupedData = this.model.getGroupedData(this.configs.groups);
@@ -126,7 +135,7 @@ export class Area extends Component {
 				.select(
 					`path.${this.model.getColorClassName({
 						classNameTypes: [ColorClassNameTypes.STROKE],
-						dataGroupName: groupedData[0].name
+						dataGroupName: groupedData[0].name,
 					})}`
 				)
 				.node();