fix(barchart): handle null data correctly when we do have series

carbon-design-system · Nov 10, 2020 · b161d15 · b161d15
1 parent 5cbdc1d
commit b161d15
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/components/BarChartCard/BarChartCard.jsx b/src/components/BarChartCard/BarChartCard.jsx
@@ -121,9 +121,9 @@ const BarChartCard = ({
   );
 
   // Set the colors for each dataset
-  const uniqueDatasets = [
-    ...new Set(chartData.map((dataset) => dataset.group)),
-  ];
+  const uniqueDatasets = !isAllValuesEmpty
+    ? [...new Set(chartData.map((dataset) => dataset.group))]
+    : [];
   const colors = !isAllValuesEmpty
     ? formatColors(series, uniqueDatasets, isEditable)
     : null;

diff --git a/src/components/BarChartCard/barChartUtils.js b/src/components/BarChartCard/barChartUtils.js
@@ -104,8 +104,9 @@ export const formatChartData = (
   timeDataSourceId,
   type
 ) => {
-  const data = [];
-  if (!isNil(values) || !isEmpty(series)) {
+  let data = values;
+  if (!isNil(values) && !isEmpty(series)) {
+    data = [];
     // grouped or stacked
     if (type === BAR_CHART_TYPES.GROUPED || type === BAR_CHART_TYPES.STACKED) {
       let uniqueDatasetNames;

diff --git a/src/components/BarChartCard/barChartUtils.test.js b/src/components/BarChartCard/barChartUtils.test.js
@@ -185,6 +185,9 @@ describe('barChartUtils', () => {
         value: 270,
       },
     ]);
+    expect(
+      formatChartData(series, null, 'city', null, BAR_CHART_TYPES.GROUPED)
+    ).toBeNull();
   });
 
   it('formatChartData returns formatted data for time-based and group-based chart', () => {
@@ -257,6 +260,11 @@ describe('barChartUtils', () => {
         value: 200,
       },
     ]);
+
+    // Handle nulls
+    expect(
+      formatChartData(series, null, null, 'timestamp', BAR_CHART_TYPES.STACKED)
+    ).toBeNull();
   });
 
   it('formatChartData returns formatted data for simple, non-time and non-group chart', () => {
@@ -292,6 +300,9 @@ describe('barChartUtils', () => {
         value: 388,
       },
     ]);
+    expect(
+      formatChartData(series, null, 'city', null, BAR_CHART_TYPES.SIMPLE)
+    ).toBeNull();
   });
 
   it('formatChartData returns formatted data for time-based, non-group chart', () => {
@@ -332,6 +343,9 @@ describe('barChartUtils', () => {
         value: 565,
       },
     ]);
+    expect(
+      formatChartData(series, null, null, 'timestamp', BAR_CHART_TYPES.SIMPLE)
+    ).toBeNull();
   });
 
   it('formatChartData doesnt return null values', () => {