feat: support no data within BigNumber viz (#327)

apache · Nov 26, 2021 · 4613183 · 4613183
1 parent e60bf41
commit 4613183
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 7 deletions.
diff --git a/...i-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx b/...i-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx
@@ -126,7 +126,7 @@ class BigNumberVis extends React.PureComponent {
 
   renderHeader(maxHeight) {
     const { bigNumber, formatBigNumber, width } = this.props;
-    const text = formatBigNumber(bigNumber);
+    const text = bigNumber === null ? 'No data' : formatBigNumber(bigNumber);
 
     const container = this.createTemporaryContainer();
     document.body.append(container);
@@ -153,13 +153,18 @@ class BigNumberVis extends React.PureComponent {
   }
 
   renderSubheader(maxHeight) {
-    const { subheader, width } = this.props;
+    const { bigNumber, subheader, width } = this.props;
     let fontSize = 0;
-    if (subheader) {
+
+    const text =
+      bigNumber === null
+        ? 'Try applying different filters or ensuring your Datasource contains data'
+        : subheader;
+    if (text) {
       const container = this.createTemporaryContainer();
       document.body.append(container);
       fontSize = computeMaxFontSize({
-        text: subheader,
+        text,
         maxWidth: Math.floor(width),
         maxHeight,
         className: 'subheader-line',
@@ -176,7 +181,7 @@ class BigNumberVis extends React.PureComponent {
           height: maxHeight,
         }}
       >
-        {subheader}
+        {text}
       </div>
     );
   }

diff --git a/...ugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js b/...ugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js
@@ -55,7 +55,7 @@ export default function transformProps(chartProps) {
   let formattedSubheader = subheader;
   if (supportTrendLine) {
     const sortedData = [...data].sort((a, b) => a[TIME_COLUMN] - b[TIME_COLUMN]);
-    bigNumber = sortedData[sortedData.length - 1][metricName];
+    bigNumber = sortedData.length === 0 ? null : sortedData[sortedData.length - 1][metricName];
     if (compareLag > 0) {
       const compareIndex = sortedData.length - (compareLag + 1);
       if (compareIndex >= 0) {
@@ -73,7 +73,7 @@ export default function transformProps(chartProps) {
         }))
       : null;
   } else {
-    bigNumber = data[0][metricName];
+    bigNumber = data.length === 0 ? null : data[0][metricName];
     trendLineData = null;
   }
 

diff --git a/...et-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx b/...et-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx
@@ -31,4 +31,31 @@ export default [
     storyName: 'Basic',
     storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
   },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="big-number"
+        width={400}
+        height={400}
+        queryData={{ data: [] }}
+        formData={{
+          colorPicker: {
+            r: 0,
+            g: 122,
+            b: 135,
+            a: 1,
+          },
+          compareLag: 1,
+          compareSuffix: 'over 10Y',
+          metric: 'sum__SP_POP_TOTL',
+          showTrendLine: true,
+          startYAxisAtZero: true,
+          vizType: 'big_number',
+          yAxisFormat: '.3s',
+        }}
+      />
+    ),
+    storyName: 'No Data',
+    storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
+  },
 ];
diff --git a/...-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx b/...-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx
@@ -22,4 +22,22 @@ export default [
     storyName: 'Basic',
     storyPath: 'legacy-|preset-chart-big-number|BigNumberTotalChartPlugin',
   },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="big-number-total"
+        width={400}
+        height={400}
+        queryData={{ data: [] }}
+        formData={{
+          metric: 'sum__num',
+          subheader: 'total female participants',
+          vizType: 'big_number_total',
+          yAxisFormat: '.3s',
+        }}
+      />
+    ),
+    storyName: 'No Data',
+    storyPath: 'legacy-|preset-chart-big-number|BigNumberTotalChartPlugin',
+  },
 ];