Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SIP-6] removed get_data for BigNumber #5861

Merged
merged 3 commits into from
Sep 13, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 2 additions & 62 deletions superset/assets/src/visualizations/BigNumber/BigNumber.jsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -26,7 +23,7 @@ const PROPORTION = {
TRENDLINE: 0.3,
};

function renderTooltipFactory(formatValue) {
export function renderTooltipFactory(formatValue) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was used only in this file. Not sure it is useful to export now. (ok to expert if there are other places using or unit test)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually it is also used in adaptor for the prop renderTooltip. That is why I exported it :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I missed that. Thank you!

return function renderTooltip({ datum }) { // eslint-disable-line
const { x: rawDate, y: rawValue } = datum;
const formattedDate = formatDateVerbose(rawDate);
Expand Down Expand Up @@ -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;
85 changes: 85 additions & 0 deletions superset/assets/src/visualizations/BigNumber/adaptor.jsx
Original file line number Diff line number Diff line change
@@ -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;
5 changes: 5 additions & 0 deletions superset/assets/src/visualizations/BigNumber/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import adaptor from './adaptor';
import BigNumber from './BigNumber';

export { BigNumber };
export default adaptor;
4 changes: 2 additions & 2 deletions superset/assets/src/visualizations/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
18 changes: 0 additions & 18 deletions superset/viz.py
Original file line number Diff line number Diff line change
Expand Up @@ -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):

Expand All @@ -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):

Expand Down