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',
+ },
];