Skip to content

Commit

Permalink
Fix adhoc metrics in Polygon
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistercrunch
mistercrunch committed Nov 16, 2018
1 parent 8b2cae0 commit 79ff176
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 51 deletions.
56 changes: 27 additions & 29 deletions superset/assets/src/chart/Chart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,7 @@ class Chart extends React.PureComponent {

renderTooltip() {
const { tooltip } = this.state;

if (tooltip) {
if (tooltip && tooltip.content) {
return (
<Tooltip
className="chart-tooltip"
Expand Down Expand Up @@ -173,32 +172,31 @@ class Chart extends React.PureComponent {
this.renderStartTime = Logger.getTimestamp();

return (
<div
className={`chart-container ${isLoading ? 'is-loading' : ''}`}
style={containerStyles}
>
{this.renderTooltip()}

{['loading', 'success'].indexOf(chartStatus) >= 0 && <Loading size={50} />}

{chartAlert && (
<StackTraceMessage
message={chartAlert}
link={queryResponse ? queryResponse.link : null}
stackTrace={chartStackTrace}
/>
)}

{!isLoading && !chartAlert && isFaded && (
<RefreshChartOverlay
width={width}
height={height}
onQuery={onQuery}
onDismiss={onDismissRefreshOverlay}
/>
)}
<ErrorBoundary onError={this.handleRenderFailure} showMessage={false}>
<div
className={`chart-container ${isLoading ? 'is-loading' : ''}`}
style={containerStyles}
>
{this.renderTooltip()}

<ErrorBoundary onError={this.handleRenderFailure} showMessage={false}>
{['loading', 'success'].indexOf(chartStatus) >= 0 && <Loading size={50} />}

{chartAlert && (
<StackTraceMessage
message={chartAlert}
link={queryResponse ? queryResponse.link : null}
stackTrace={chartStackTrace}
/>
)}

{!isLoading && !chartAlert && isFaded && (
<RefreshChartOverlay
width={width}
height={height}
onQuery={onQuery}
onDismiss={onDismissRefreshOverlay}
/>
)}
<SuperChart
className={`slice_container ${snakeCase(vizType)} ${isFaded ? ' faded' : ''}`}
chartType={vizType}
Expand All @@ -207,8 +205,8 @@ class Chart extends React.PureComponent {
onRenderFailure={this.handleRenderFailure}
skipRendering={skipChartRendering}
/>
</ErrorBoundary>
</div>
</div>
</ErrorBoundary>
);
}
}
Expand Down
12 changes: 9 additions & 3 deletions superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,12 @@ export function getLayer(formData, payload, setTooltip, selected, onSelect, filt
data = jsFnMutator(data);
}

const metricLabel = fd.metric ? fd.metric.label || fd.metric : null;
const accessor = d => d[metricLabel];
// base color for the polygons
const baseColorScaler = fd.metric === null
? () => [fc.r, fc.g, fc.b, 255 * fc.a]
: getBreakPointColorScaler(fd, data);
: getBreakPointColorScaler(fd, data, accessor);

// when polygons are selected, reduce the opacity of non-selected polygons
const colorScaler = (d) => {
Expand All @@ -61,7 +63,6 @@ export function getLayer(formData, payload, setTooltip, selected, onSelect, filt
}
return baseColor;
};

return new PolygonLayer({
id: `path-layer-${fd.slice_id}`,
data,
Expand Down Expand Up @@ -211,7 +212,12 @@ class DeckGLPolygon extends React.Component {
render() {
const { payload, formData, setControlValue } = this.props;
const { start, end, getStep, values, disabled, viewport } = this.state;
const buckets = getBuckets(formData, payload.data.features);

const fd = formData;
const metricLabel = fd.metric ? fd.metric.label || fd.metric : null;
const accessor = d => d[metricLabel];

const buckets = getBuckets(formData, payload.data.features, accessor);
return (
<div style={{ position: 'relative' }}>
<AnimatableDeckGLContainer
Expand Down
5 changes: 3 additions & 2 deletions superset/assets/src/visualizations/deckgl/layers/common.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,13 @@ export function commonLayerProps(formData, setTooltip, onSelect) {
let tooltipContentGenerator;
if (fd.js_tooltip) {
tooltipContentGenerator = sandboxedEval(fd.js_tooltip);
} else if (fd.line_column && fd.line_type === 'geohash') {
} else if (fd.line_column && fd.metric && ['geohash', 'zipcode'].indexOf(fd.line_type) >= 0) {
const metricLabel = fd.metric.label || fd.metric;
tooltipContentGenerator = o => (
<div>
<div>{fd.line_column}: <strong>{o.object[fd.line_column]}</strong></div>
{fd.metric &&
<div>{fd.metric}: <strong>{o.object[fd.metric]}</strong></div>}
<div>{metricLabel}: <strong>{o.object[metricLabel]}</strong></div>}
</div>);
}
if (tooltipContentGenerator) {
Expand Down
32 changes: 15 additions & 17 deletions superset/assets/src/visualizations/deckgl/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,19 @@ import { scaleThreshold } from 'd3-scale';
import { getSequentialSchemeRegistry, SequentialScheme } from '@superset-ui/color';
import { hexToRGB } from '../../modules/colors';

const DEFAULT_NUM_BUCKETS = 10;

export function getBreakPoints({
break_points: formDataBreakPoints,
num_buckets: formDataNumBuckets,
metric,
}, features) {
}, features, accessor) {
if (!features) {
return [];
}
if (formDataBreakPoints === undefined || formDataBreakPoints.length === 0) {
// compute evenly distributed break points based on number of buckets
const numBuckets = formDataNumBuckets
? parseInt(formDataNumBuckets, 10)
: 10;
const [minValue, maxValue] = extent(features, d => d[metric]);
const numBuckets = formDataNumBuckets ? parseInt(formDataNumBuckets, 10) : DEFAULT_NUM_BUCKETS;
const [minValue, maxValue] = extent(features, accessor);
const delta = (maxValue - minValue) / numBuckets;
const precision = delta === 0
? 0
Expand All @@ -32,15 +31,13 @@ export function getBreakPointColorScaler({
break_points: formDataBreakPoints,
num_buckets: formDataNumBuckets,
linear_color_scheme: linearColorScheme,
metric,
opacity,
}, features) {
}, features, accessor) {
const breakPoints = formDataBreakPoints || formDataNumBuckets
? getBreakPoints({
break_points: formDataBreakPoints,
num_buckets: formDataNumBuckets,
metric,
}, features)
}, features, accessor)
: null;
const colorScheme = Array.isArray(linearColorScheme)
? new SequentialScheme({
Expand Down Expand Up @@ -69,13 +66,14 @@ export function getBreakPointColorScaler({
maskPoint = value => value > breakPoints[n] || value < breakPoints[0];
} else {
// interpolate colors linearly
scaler = colorScheme.createLinearScale(extent(features, d => d[metric]));
scaler = colorScheme.createLinearScale(extent(features, accessor));
maskPoint = () => false;
}

return (d) => {
const c = hexToRGB(scaler(d[metric]));
if (maskPoint(d[metric])) {
const v = accessor(d);
const c = hexToRGB(scaler(v));
if (maskPoint(v)) {
c[3] = 0;
} else {
c[3] = (opacity / 100.0) * 255;
Expand All @@ -84,15 +82,15 @@ export function getBreakPointColorScaler({
};
}

export function getBuckets(fd, features) {
const breakPoints = getBreakPoints(fd, features, true);
const colorScaler = getBreakPointColorScaler(fd, features);
export function getBuckets(fd, features, accessor) {
const breakPoints = getBreakPoints(fd, features, accessor);
const colorScaler = getBreakPointColorScaler(fd, features, accessor);
const buckets = {};
breakPoints.slice(1).forEach((value, i) => {
const range = breakPoints[i] + ' - ' + breakPoints[i + 1];
const mid = 0.5 * (parseInt(breakPoints[i], 10) + parseInt(breakPoints[i + 1], 10));
buckets[range] = {
color: colorScaler({ [fd.metric]: mid }),
color: colorScaler({ [fd.metric.label || fd.metric]: mid }),
enabled: true,
};
});
Expand Down

0 comments on commit 79ff176

Please sign in to comment.