diff --git a/superset/assets/src/visualizations/BigNumber/BigNumber.jsx b/superset/assets/src/visualizations/BigNumber/BigNumber.jsx
index 3c5cffbc5e670..9f8a4a221b078 100644
--- a/superset/assets/src/visualizations/BigNumber/BigNumber.jsx
+++ b/superset/assets/src/visualizations/BigNumber/BigNumber.jsx
@@ -1,11 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import * as color from 'd3-color';
import { XYChart, AreaSeries, CrossHair, LinearGradient } from '@data-ui/xy-chart';
import { brandColor } from '../../modules/colors';
-import { d3FormatPreset } from '../../modules/utils';
import { formatDateVerbose } from '../../modules/dates';
import { computeMaxFontSize } from '../../modules/visUtils';
@@ -26,7 +23,7 @@ const PROPORTION = {
TRENDLINE: 0.3,
};
-function renderTooltipFactory(formatValue) {
+export function renderTooltipFactory(formatValue) {
return function renderTooltip({ datum }) { // eslint-disable-line
const { x: rawDate, y: rawValue } = datum;
const formattedDate = formatDateVerbose(rawDate);
@@ -228,61 +225,4 @@ class BigNumberVis extends React.Component {
BigNumberVis.propTypes = propTypes;
BigNumberVis.defaultProps = defaultProps;
-function adaptor(slice, payload) {
- const { formData, containerId } = slice;
- const { data, subheader, compare_suffix: compareSuffix } = payload.data;
- const compareLag = Number(payload.data.compare_lag);
- const supportTrendline = formData.viz_type === 'big_number';
- const showTrendline = supportTrendline && formData.show_trend_line;
- const startYAxisAtZero = formData.start_y_axis_at_zero;
- const formatValue = d3FormatPreset(formData.y_axis_format);
- const bigNumber = supportTrendline ? data[data.length - 1][1] : data[0][0];
- let userColor;
- if (formData.color_picker) {
- const { r, g, b } = formData.color_picker;
- userColor = color.rgb(r, g, b).hex();
- }
-
- let percentChange = 0;
- let formattedSubheader = subheader;
-
- if (supportTrendline && compareLag > 0) {
- const compareIndex = data.length - (compareLag + 1);
- if (compareIndex >= 0) {
- const compareValue = data[compareIndex][1];
- percentChange = compareValue === 0
- ? 0 : (bigNumber - compareValue) / Math.abs(compareValue);
- const formatPercentChange = d3.format('+.1%');
- formattedSubheader = `${formatPercentChange(percentChange)} ${compareSuffix}`;
- }
- }
-
- const trendlineData = showTrendline ? data.map(([x, y]) => ({ x, y })) : null;
-
- let className = '';
- if (percentChange > 0) {
- className = 'positive';
- } else if (percentChange < 0) {
- className = 'negative';
- }
-
- ReactDOM.render(
- ,
- document.getElementById(containerId),
- );
-}
-
-export default adaptor;
+export default BigNumberVis;
diff --git a/superset/assets/src/visualizations/BigNumber/adaptor.jsx b/superset/assets/src/visualizations/BigNumber/adaptor.jsx
new file mode 100644
index 0000000000000..40a3a0f3d3601
--- /dev/null
+++ b/superset/assets/src/visualizations/BigNumber/adaptor.jsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import * as color from 'd3-color';
+
+import BigNumberVis, { renderTooltipFactory } from './BigNumber';
+import { d3FormatPreset } from '../../modules/utils';
+
+const TIME_COLUMN = '__timestamp';
+
+function transform(data, formData) {
+ let bigNumber;
+ let trendlineData;
+ const metricName = formData.metric.label || formData.metric;
+ const compareSuffix = formData.compare_suffix || '';
+ const compareLag = +formData.compare_lag || 0;
+ const supportTrendline = formData.viz_type === 'big_number';
+ const showTrendline = supportTrendline && formData.show_trend_line;
+ let percentChange = 0;
+ const subheader = formData.subheader || '';
+ let formattedSubheader = subheader;
+ if (supportTrendline) {
+ const sortedData = [...data].sort((a, b) => a[TIME_COLUMN] - b[TIME_COLUMN]);
+ bigNumber = sortedData[sortedData.length - 1][metricName];
+ if (compareLag > 0) {
+ const compareIndex = sortedData.length - (compareLag + 1);
+ if (compareIndex >= 0) {
+ const compareValue = sortedData[compareIndex][metricName];
+ percentChange = compareValue === 0
+ ? 0 : (bigNumber - compareValue) / Math.abs(compareValue);
+ const formatPercentChange = d3.format('+.1%');
+ formattedSubheader = `${formatPercentChange(percentChange)} ${compareSuffix}`;
+ }
+ }
+ trendlineData = showTrendline
+ ? sortedData.map(point => ({ x: point[TIME_COLUMN], y: point[metricName] }))
+ : null;
+ } else {
+ bigNumber = data[0][metricName];
+ trendlineData = null;
+ }
+
+ let className = '';
+ if (percentChange > 0) {
+ className = 'positive';
+ } else if (percentChange < 0) {
+ className = 'negative';
+ }
+
+ return {
+ bigNumber,
+ trendlineData,
+ className,
+ subheader: formattedSubheader,
+ showTrendline,
+ };
+}
+
+function adaptor(slice, payload) {
+ const { formData, containerId } = slice;
+
+ const transformedData = transform(payload.data, formData);
+ const startYAxisAtZero = formData.start_y_axis_at_zero;
+ const formatValue = d3FormatPreset(formData.y_axis_format);
+ let userColor;
+ if (formData.color_picker) {
+ const { r, g, b } = formData.color_picker;
+ userColor = color.rgb(r, g, b).hex();
+ }
+
+ ReactDOM.render(
+ ,
+ document.getElementById(containerId),
+ );
+}
+
+export default adaptor;
diff --git a/superset/assets/src/visualizations/BigNumber/index.js b/superset/assets/src/visualizations/BigNumber/index.js
new file mode 100644
index 0000000000000..3aaef63c3da06
--- /dev/null
+++ b/superset/assets/src/visualizations/BigNumber/index.js
@@ -0,0 +1,5 @@
+import adaptor from './adaptor';
+import BigNumber from './BigNumber';
+
+export { BigNumber };
+export default adaptor;
diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js
index d6445c46b56a1..91f425bd7edea 100644
--- a/superset/assets/src/visualizations/index.js
+++ b/superset/assets/src/visualizations/index.js
@@ -65,9 +65,9 @@ const vizMap = {
[VIZ_TYPES.area]: loadNvd3,
[VIZ_TYPES.bar]: loadNvd3,
[VIZ_TYPES.big_number]: () =>
- loadVis(import(/* webpackChunkName: 'big_number' */ './BigNumber/BigNumber.jsx')),
+ loadVis(import(/* webpackChunkName: 'big_number' */ './BigNumber/index.js')),
[VIZ_TYPES.big_number_total]: () =>
- loadVis(import(/* webpackChunkName: "big_number" */ './BigNumber/BigNumber.jsx')),
+ loadVis(import(/* webpackChunkName: "big_number" */ './BigNumber/index.js')),
[VIZ_TYPES.box_plot]: loadNvd3,
[VIZ_TYPES.bubble]: loadNvd3,
[VIZ_TYPES.bullet]: loadNvd3,
diff --git a/superset/viz.py b/superset/viz.py
index d88685eeaddb7..77d8da551abba 100644
--- a/superset/viz.py
+++ b/superset/viz.py
@@ -1029,16 +1029,6 @@ def query_obj(self):
self.form_data['metric'] = metric
return d
- def get_data(self, df):
- form_data = self.form_data
- df.sort_values(by=df.columns[0], inplace=True)
- compare_lag = form_data.get('compare_lag')
- return {
- 'data': df.values.tolist(),
- 'compare_lag': compare_lag,
- 'compare_suffix': form_data.get('compare_suffix', ''),
- }
-
class BigNumberTotalViz(BaseViz):
@@ -1058,14 +1048,6 @@ def query_obj(self):
self.form_data['metric'] = metric
return d
- def get_data(self, df):
- form_data = self.form_data
- df.sort_values(by=df.columns[0], inplace=True)
- return {
- 'data': df.values.tolist(),
- 'subheader': form_data.get('subheader', ''),
- }
-
class NVD3TimeSeriesViz(NVD3Viz):