From efab258228e22e81c9cadd7d4211961343d8be4e Mon Sep 17 00:00:00 2001 From: Conglei Date: Wed, 12 Sep 2018 18:34:21 -0700 Subject: [PATCH] [SIP-6] removed get_data for BigNumber (#5861) * removed get_data for BigNumber * removed duplicated condition * fixed typo --- .../visualizations/BigNumber/BigNumber.jsx | 64 +------------- .../src/visualizations/BigNumber/adaptor.jsx | 85 +++++++++++++++++++ .../src/visualizations/BigNumber/index.js | 5 ++ superset/assets/src/visualizations/index.js | 4 +- superset/viz.py | 18 ---- 5 files changed, 94 insertions(+), 82 deletions(-) create mode 100644 superset/assets/src/visualizations/BigNumber/adaptor.jsx create mode 100644 superset/assets/src/visualizations/BigNumber/index.js 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):