fix(tabular-rep): better handling of null values (#1779)

* fix(model):Adding null check for model value * fix(meter):added meter null fallback
carbon-design-system · Mar 8, 2024 · 011f3b4 · 011f3b4
1 parent 06cc93c
commit 011f3b4
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git a/packages/core/src/components/essentials/title-meter.ts b/packages/core/src/components/essentials/title-meter.ts
@@ -230,7 +230,7 @@ export class MeterTitle extends Title {
 			.append('text')
 			.classed('percent-value', true)
 			.merge(percentage as any)
-			.text((d: any) => `${numberFormatter(d, localeCode)}%`)
+			.text((d: any) => `${d !== null && d !== undefined ? numberFormatter(d, localeCode) : 0}%`)
 			.attr('x', +title.attr('x') + title.node().getComputedTextLength() + offset) // set the position to after the title
 			.attr('y', title.attr('y'))
 

diff --git a/packages/core/src/model/alluvial.ts b/packages/core/src/model/alluvial.ts
@@ -20,7 +20,7 @@ export class AlluvialChartModel extends ChartModelCartesian {
 			...displayData.map((datum: any) => [
 				datum['source'],
 				datum['target'],
-				numberFormatter(datum['value'], localeCode)
+				datum['value'] === null ? '&ndash;' : numberFormatter(datum['value'], localeCode)
 			])
 		]
 

diff --git a/packages/core/src/model/choropleth.ts b/packages/core/src/model/choropleth.ts
@@ -75,7 +75,7 @@ export class ChoroplethModel extends ChartModel {
 			...displayData.map(datum => [
 				datum['id'] === null ? '&ndash;' : datum['id'],
 				datum['name'],
-				numberFormatter(datum['value'], localeCode)
+				datum['value'] === null ? '&ndash;' : numberFormatter(datum['value'], localeCode)
 			])
 		]
 

diff --git a/packages/core/src/model/heatmap.ts b/packages/core/src/model/heatmap.ts
@@ -250,7 +250,7 @@ export class HeatmapModel extends ChartModelCartesian {
 						: datum[primaryDomain.identifier],
 
 				datum[primaryRange.identifier] === null ? '&ndash;' : datum[primaryRange.identifier],
-				numberFormatter(datum['value'], localeCode)
+				datum['value'] === null ? '&ndash;' : numberFormatter(datum['value'], localeCode)
 			])
 		]
 

diff --git a/packages/core/src/model/meter.ts b/packages/core/src/model/meter.ts
@@ -86,7 +86,7 @@ export class MeterChartModel extends ChartModel {
 			cells = [
 				[
 					datum[groupMapsTo],
-					numberFormatter(datum['value'], localeCode),
+					datum['value'] === null ? '&ndash;' : numberFormatter(datum['value'], localeCode),
 					...(status ? [status] : [])
 				]
 			]
@@ -96,11 +96,14 @@ export class MeterChartModel extends ChartModel {
 			headers = ['Group', 'Value', 'Percentage of total']
 			cells = [
 				...displayData.map((datum: any) => {
-					const value = datum['value']
-					const percentValue = Number(((datum['value'] / domainMax) * 100).toFixed(2))
+					let value
+					datum['value'] !== null && datum['value'] !== undefined
+						? (value = Number(datum['value']))
+						: (value = 0)
+					let percentValue = Number(((datum['value'] / domainMax) * 100).toFixed(2))
 					return [
 						datum[groupMapsTo],
-						numberFormatter(value, localeCode),
+						datum['value'] === null ? '&ndash;' : numberFormatter(value, localeCode),
 						numberFormatter(percentValue, localeCode) + ' %'
 					]
 				})

diff --git a/packages/core/src/model/treemap.ts b/packages/core/src/model/treemap.ts
@@ -18,7 +18,11 @@ export class TreemapChartModel extends ChartModel {
 		displayData.forEach((datum: any) => {
 			if (Array.isArray(datum.children)) {
 				datum.children.forEach((child: any) => {
-					cells.push([child.name, datum.name, numberFormatter(child.value, localeCode)])
+					cells.push([
+						child.name,
+						datum.name,
+						child.value === null ? '&ndash;' : numberFormatter(child.value, localeCode)
+					])
 				})
 			} else if (getProperty(datum.name) !== null && getProperty(datum.value)) {
 				cells.push(['–', datum.name, numberFormatter(datum.value, localeCode)])