Skip to content

Commit

Permalink
feat(plugin-chart-echarts): Add support for series values to ECharts …
Browse files Browse the repository at this point in the history
…timeseries charts (#1279)

* feat(plugin-chart-echarts): add support for series values

* feat(plugin-chart-echarts): name

* fix: lint

* fix: extract control

* fix: extract control
  • Loading branch information
stephenLYZ authored and zhaoyongjie committed Nov 26, 2021
1 parent e693381 commit f68d465
Show file tree
Hide file tree
Showing 13 changed files with 99 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from '../types';
import { legendSection } from '../../controls';
import { legendSection, showValueControl } from '../../controls';

const {
annotationLayers,
Expand Down Expand Up @@ -251,6 +251,7 @@ const config: ControlPanelConfig = {
},
},
],
[showValueControl],
[
{
name: 'stack',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
formData: { ...chartProps.formData, area: true },
});

export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
export default class EchartsAreaChartPlugin extends ChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const barTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Bar },
});

export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Line },
});

export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Smooth },
});

export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
} from '@superset-ui/chart-controls';

import { DEFAULT_FORM_DATA, EchartsTimeseriesContributionType } from '../types';
import { legendSection } from '../../controls';
import { legendSection, showValueControl } from '../../controls';

const {
annotationLayers,
Expand Down Expand Up @@ -211,6 +211,7 @@ const config: ControlPanelConfig = {
expanded: true,
controlSetRows: [
['color_scheme', 'label_colors'],
[showValueControl],
[
{
name: 'stack',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from '../types';
import { legendSection } from '../../controls';
import { legendSection, showValueControl } from '../../controls';

const {
area,
Expand Down Expand Up @@ -237,6 +237,7 @@ const config: ControlPanelConfig = {
},
},
],
[showValueControl],
[
{
name: 'stack',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { EchartsTimeseriesChartProps, EchartsTimeseriesFormData } from '../types
import example1 from './images/Step1.png';
import example2 from './images/Step2.png';

export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
EchartsTimeseriesFormData,
EchartsTimeseriesChartProps
> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from './types';
import { legendSection } from '../controls';
import { legendSection, showValueControl } from '../controls';

const {
area,
Expand Down Expand Up @@ -240,6 +240,7 @@ const config: ControlPanelConfig = {
},
},
],
[showValueControl],
[
{
name: 'stack',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export default function transformProps(
xAxisLabelRotation,
emitFilter,
groupby,
showValue,
}: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };

const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
Expand All @@ -105,6 +106,31 @@ export default function transformProps(
const series: SeriesOption[] = [];
const formatter = getNumberFormatter(contributionMode ? ',.0%' : yAxisFormat);

const totalStackedValues: number[] = [];
const showValueIndexes: number[] = [];

if (stack) {
rebasedData.forEach(data => {
const values = Object.keys(data).reduce((prev, curr) => {
if (curr === '__timestamp') {
return prev;
}
const value = data[curr] || 0;
return prev + (value as number);
}, 0);
totalStackedValues.push(values);
});

rawSeries.forEach((entry, seriesIndex) => {
const { data = [] } = entry;
(data as [Date, number][]).forEach((datum, dataIndex) => {
if (datum[1] !== null) {
showValueIndexes[dataIndex] = seriesIndex;
}
});
});
}

rawSeries.forEach(entry => {
const transformedSeries = transformSeries(entry, colorScale, {
area,
Expand All @@ -115,6 +141,10 @@ export default function transformProps(
areaOpacity: opacity,
seriesType,
stack,
formatter,
showValue,
totalStackedValues,
showValueIndexes,
});
if (transformedSeries) series.push(transformedSeries);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
getTimeFormatter,
IntervalAnnotationLayer,
isTimeseriesAnnotationResult,
NumberFormatter,
smartDateDetailedFormatter,
smartDateFormatter,
TimeFormatter,
Expand Down Expand Up @@ -73,6 +74,10 @@ export function transformSeries(
seriesType?: EchartsTimeseriesSeriesType;
stack?: boolean;
yAxisIndex?: number;
showValue?: boolean;
formatter?: NumberFormatter;
totalStackedValues?: number[];
showValueIndexes?: number[];
},
): SeriesOption | undefined {
const { name } = series;
Expand All @@ -86,6 +91,10 @@ export function transformSeries(
seriesType,
stack,
yAxisIndex = 0,
showValue,
formatter,
totalStackedValues = [],
showValueIndexes = [],
} = opts;

const forecastSeries = extractForecastSeriesContext(name || '');
Expand Down Expand Up @@ -119,6 +128,18 @@ export function transformSeries(
} else {
plotType = seriesType === 'bar' ? 'bar' : 'line';
}
let showSymbol = false;
if (!isConfidenceBand) {
if (plotType === 'scatter') {
showSymbol = true;
} else if (forecastEnabled && isObservation) {
showSymbol = true;
} else if (plotType === 'line' && showValue) {
showSymbol = true;
} else if (markerEnabled) {
showSymbol = true;
}
}
const lineStyle = isConfidenceBand ? { opacity: OpacityEnum.Transparent } : { opacity };
return {
...series,
Expand All @@ -141,10 +162,29 @@ export function transformSeries(
? opacity * areaOpacity
: 0,
},
showSymbol:
!isConfidenceBand &&
(plotType === 'scatter' || (forecastEnabled && isObservation) || markerEnabled),
showSymbol,
symbolSize: markerSize,
label: {
show: !!showValue,
position: 'top',
formatter: (params: any) => {
const {
value: [, numericValue],
dataIndex,
seriesIndex,
} = params;
if (formatter) {
if (!stack) {
return formatter(numericValue);
}
if (seriesIndex === showValueIndexes[dataIndex]) {
return formatter(totalStackedValues[dataIndex]);
}
return '';
}
return numericValue;
},
},
};
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
xAxisLabelRotation: number;
emitFilter: boolean;
groupby: string[];
showValue: boolean;
} & EchartsLegendFormData;

// @ts-ignore
Expand Down Expand Up @@ -105,6 +106,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
emitFilter: false,
groupby: [],
yAxisTitle: '',
showValue: false,
};

export interface EchartsTimeseriesChartProps extends ChartProps {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,14 @@ export const legendSection = [
[legendOrientationControl],
[legendMarginControl],
];

export const showValueControl = {
name: 'show_value',
config: {
type: 'CheckboxControl',
label: t('Show Value'),
default: false,
renderTrigger: true,
description: t('Show series values on the chart'),
},
};

0 comments on commit f68d465

Please sign in to comment.