[SIP-6] removed get_data for BigNumber (#5861)

* removed get_data for BigNumber

* removed duplicated condition

* fixed typo

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(
-    <BigNumberVis
-      className={className}
-      width={slice.width()}
-      height={slice.height()}
-      bigNumber={bigNumber}
-      formatBigNumber={formatValue}
-      subheader={formattedSubheader}
-      showTrendline={showTrendline}
-      startYAxisAtZero={startYAxisAtZero}
-      trendlineData={trendlineData}
-      mainColor={userColor}
-      gradientId={`big_number_${containerId}`}
-      renderTooltip={renderTooltipFactory(formatValue)}
-    />,
-    document.getElementById(containerId),
-  );
-}
-
-export default adaptor;
+export default BigNumberVis;

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(
+    <BigNumberVis
+      width={slice.width()}
+      height={slice.height()}
+      formatBigNumber={formatValue}
+      startYAxisAtZero={startYAxisAtZero}
+      mainColor={userColor}
+      gradientId={`big_number_${containerId}`}
+      renderTooltip={renderTooltipFactory(formatValue)}
+      {...transformedData}
+    />,
+    document.getElementById(containerId),
+  );
+}
+
+export default adaptor;

superset/assets/src/visualizations/BigNumber/index.js

@@ -0,0 +1,5 @@
+import adaptor from './adaptor';
+import BigNumber from './BigNumber';
+
+export { BigNumber };
+export default adaptor;

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,