From f2478c8f8b5f9a9a60d5a1d10c707ba7ec9651ef Mon Sep 17 00:00:00 2001 From: "JUST.in DO IT" Date: Thu, 11 Aug 2022 12:33:59 -0700 Subject: [PATCH] fix(plugin-chart-echarts): missing value format in mixed timeseries (#21044) --- .../MixedTimeseries/Stories.tsx | 64 ++++++++++++++++++- .../MixedTimeseries/negativeData.ts | 45 +++++++++++++ .../src/MixedTimeseries/transformProps.ts | 34 +++++++++- 3 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/negativeData.ts diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/Stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/Stories.tsx index a6a13e4e56121..1082ac58ab028 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/Stories.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/Stories.tsx @@ -31,6 +31,7 @@ import { MixedTimeseriesTransformProps, } from '@superset-ui/plugin-chart-echarts'; import data from '../Timeseries/data'; +import negativeNumData from './negativeData'; import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo'; new EchartsTimeseriesChartPlugin() @@ -57,6 +58,8 @@ export const Timeseries = ({ width, height }) => { Boston: row.Boston, })) .filter(row => !!row.Boston), + colnames: ['__timestamp'], + coltypes: [2], }, { data: data @@ -82,8 +85,13 @@ export const Timeseries = ({ width, height }) => { logAxis: boolean('Log axis', false), xAxisTimeFormat: 'smart_date', tooltipTimeFormat: 'smart_date', - yAxisFormat: 'SMART_NUMBER', + yAxisFormat: select( + 'y-axis format', + ['$,.2f', 'SMART_NUMBER'], + '$,.2f', + ), yAxisTitle: text('Y Axis title', ''), + yAxisIndexB: select('yAxisIndexB', [0, 1], 1), minorSplitLine: boolean('Query 1: Minor splitline', false), seriesType: select( 'Query 1: Line type', @@ -105,7 +113,61 @@ export const Timeseries = ({ width, height }) => { markerEnabledB: boolean('Query 2: Enable markers', false), markerSizeB: number('Query 2: Marker Size', 6), opacityB: number('Query 2: Opacity', 0.2), + showValue: true, }} /> ); }; + +export const WithNegativeNumbers = ({ width, height }) => ( + ({ + __timestamp, + avgRate: Boston / 100, + })), + }, + ]} + formData={{ + contributionMode: undefined, + colorScheme: 'supersetColors', + seriesType: select( + 'Line type', + ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'], + 'line', + ), + xAxisTimeFormat: 'smart_date', + yAxisFormat: select( + 'y-axis format', + { + 'Original value': '~g', + 'Smart number': 'SMART_NUMBER', + '(12345.432 => $12,345.43)': '$,.2f', + }, + '$,.2f', + ), + stack: true, + showValue: boolean('Query 1: Show Value', true), + showValueB: boolean('Query 2: Show Value', false), + showLegend: true, + markerEnabledB: true, + yAxisIndexB: select( + 'Query 2: Y Axis', + { + Primary: 0, + Secondary: 1, + }, + 1, + ), + }} + /> +); diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/negativeData.ts b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/negativeData.ts new file mode 100644 index 0000000000000..ce5cb79d27fda --- /dev/null +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/negativeData.ts @@ -0,0 +1,45 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export default [ + { + __timestamp: 1619827200000, + Boston: 10.8812312312, + Washington: -45.3089432023, + JerseyCity: -23.0509234029834, + }, + { + __timestamp: 1622505600000, + Boston: 80.81029340234, + Washington: -10.299023489023, + JerseyCity: 53.54239402349, + }, + { + __timestamp: 1625097600000, + Boston: 30.9129034924, + Washington: 100.25234902349, + JerseyCity: 27.17239402394, + }, + { + __timestamp: 1627776000000, + Boston: 42.6129034924, + Washington: 90.23234902349, + JerseyCity: -32.23239402394, + }, +]; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index fe70bdff5e67c..eaa84207a8688 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -47,6 +47,8 @@ import { getAxisType, getColtypesMapping, getLegendProps, + extractDataTotalValues, + extractShowValueIndexes, } from '../utils/series'; import { extractAnnotationLabels, @@ -139,6 +141,7 @@ export default function transformProps( yAxisTitlePosition, sliceId, timeGrainSqla, + percentageThreshold, }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; const colorScale = CategoricalColorNamespace.getScale(colorScheme as string); @@ -184,7 +187,28 @@ export default function transformProps( rawSeriesB.forEach(seriesOption => mapSeriesIdToAxis(seriesOption, yAxisIndexB), ); - + const showValueIndexesA = extractShowValueIndexes(rawSeriesA, { + stack, + }); + const showValueIndexesB = extractShowValueIndexes(rawSeriesB, { + stack, + }); + const { totalStackedValues, thresholdValues } = extractDataTotalValues( + rebasedDataA, + { + stack, + percentageThreshold, + xAxisCol, + }, + ); + const { + totalStackedValues: totalStackedValuesB, + thresholdValues: thresholdValuesB, + } = extractDataTotalValues(rebasedDataB, { + stack: Boolean(stackB), + percentageThreshold, + xAxisCol, + }); rawSeriesA.forEach(entry => { const transformedSeries = transformSeries(entry, colorScale, { area, @@ -198,6 +222,10 @@ export default function transformProps( filterState, seriesKey: entry.name, sliceId, + formatter, + showValueIndexes: showValueIndexesA, + totalStackedValues, + thresholdValues, }); if (transformedSeries) series.push(transformedSeries); }); @@ -217,6 +245,10 @@ export default function transformProps( ? `${entry.name} (1)` : entry.name, sliceId, + formatter: formatterSecondary, + showValueIndexes: showValueIndexesB, + totalStackedValues: totalStackedValuesB, + thresholdValues: thresholdValuesB, }); if (transformedSeries) series.push(transformedSeries); });