diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx index f371b73a127c..6df74a9aaa93 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-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} ); } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js index 4a1113b47568..9de9d3812b0d 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/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/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx index dfe39bc31a45..66bc69f79255 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-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: () => ( + + ), + storyName: 'No Data', + storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin', + }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx index 86ecb67e9bcc..8991554b4281 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-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: () => ( + + ), + storyName: 'No Data', + storyPath: 'legacy-|preset-chart-big-number|BigNumberTotalChartPlugin', + }, ];