From 48a9b7bbc929386d861ac935c3f1d840921de80e Mon Sep 17 00:00:00 2001 From: justin-park Date: Wed, 10 Aug 2022 16:24:08 -0700 Subject: [PATCH 1/3] fix(plugin-echarts-mixed-timeseries): missing value format --- .../MixedTimeseries/Stories.tsx | 48 ++++++++++++++++++- .../MixedTimeseries/negativeData.ts | 39 +++++++++++++++ .../src/MixedTimeseries/transformProps.ts | 34 ++++++++++++- 3 files changed, 119 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..044b2c0b16af8 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() @@ -82,8 +83,9 @@ export const Timeseries = ({ width, height }) => { logAxis: boolean('Log axis', false), xAxisTimeFormat: 'smart_date', tooltipTimeFormat: 'smart_date', - yAxisFormat: 'SMART_NUMBER', + yAxisFormat: '$,.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 +107,51 @@ 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: '$,.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..ad42a2ea76c8d --- /dev/null +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries/negativeData.ts @@ -0,0 +1,39 @@ +/* + * 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.88, + Washington: -45.3, + JerseyCity: -23.05, + }, + { + __timestamp: 1622505600000, + Boston: 80.81, + Washington: -10.29, + JerseyCity: 53.54, + }, + { + __timestamp: 1625097600000, + Boston: 30.91, + Washington: 100.25, + JerseyCity: 27.17, + }, +]; 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 bcdd01a333393..0bca3a03e65f0 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, @@ -140,6 +142,7 @@ export default function transformProps( yAxisTitlePosition, sliceId, timeGrainSqla, + percentageThreshold, }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; const colorScale = CategoricalColorNamespace.getScale(colorScheme as string); @@ -185,7 +188,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, @@ -200,6 +224,10 @@ export default function transformProps( seriesKey: entry.name, sliceId, queryIndex: 0, + formatter, + showValueIndexes: showValueIndexesA, + totalStackedValues, + thresholdValues, }); if (transformedSeries) series.push(transformedSeries); }); @@ -220,6 +248,10 @@ export default function transformProps( : entry.name, sliceId, queryIndex: 1, + formatter: formatterSecondary, + showValueIndexes: showValueIndexesB, + totalStackedValues: totalStackedValuesB, + thresholdValues: thresholdValuesB, }); if (transformedSeries) series.push(transformedSeries); }); From 17b537e4328e663898551a9a1c0bbd519b0a1abb Mon Sep 17 00:00:00 2001 From: justin-park Date: Thu, 11 Aug 2022 10:18:48 -0700 Subject: [PATCH 2/3] formatting for __timestamp sample --- .../MixedTimeseries/Stories.tsx | 4 ++++ .../MixedTimeseries/negativeData.ts | 24 ++++++++++++------- 2 files changed, 19 insertions(+), 9 deletions(-) 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 044b2c0b16af8..c93ed167949e8 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 @@ -58,6 +58,8 @@ export const Timeseries = ({ width, height }) => { Boston: row.Boston, })) .filter(row => !!row.Boston), + colnames: ['__timestamp'], + coltypes: [2], }, { data: data @@ -121,6 +123,8 @@ export const WithNegativeNumbers = ({ width, height }) => ( queriesData={[ { data: negativeNumData, + colnames: ['__timestamp'], + coltypes: [2], }, { data: negativeNumData.map(({ __timestamp, Boston }) => ({ 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 index ad42a2ea76c8d..ce5cb79d27fda 100644 --- 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 @@ -20,20 +20,26 @@ export default [ { __timestamp: 1619827200000, - Boston: 10.88, - Washington: -45.3, - JerseyCity: -23.05, + Boston: 10.8812312312, + Washington: -45.3089432023, + JerseyCity: -23.0509234029834, }, { __timestamp: 1622505600000, - Boston: 80.81, - Washington: -10.29, - JerseyCity: 53.54, + Boston: 80.81029340234, + Washington: -10.299023489023, + JerseyCity: 53.54239402349, }, { __timestamp: 1625097600000, - Boston: 30.91, - Washington: 100.25, - JerseyCity: 27.17, + Boston: 30.9129034924, + Washington: 100.25234902349, + JerseyCity: 27.17239402394, + }, + { + __timestamp: 1627776000000, + Boston: 42.6129034924, + Washington: 90.23234902349, + JerseyCity: -32.23239402394, }, ]; From 9bcf219be1dee43c1f6226b60362aa2ff2852bbf Mon Sep 17 00:00:00 2001 From: justin-park Date: Thu, 11 Aug 2022 10:28:19 -0700 Subject: [PATCH 3/3] knob for yAxisFormat --- .../MixedTimeseries/Stories.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) 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 c93ed167949e8..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 @@ -85,7 +85,11 @@ export const Timeseries = ({ width, height }) => { logAxis: boolean('Log axis', false), xAxisTimeFormat: 'smart_date', tooltipTimeFormat: 'smart_date', - yAxisFormat: '$,.2f', + 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), @@ -142,7 +146,15 @@ export const WithNegativeNumbers = ({ width, height }) => ( 'line', ), xAxisTimeFormat: 'smart_date', - yAxisFormat: '$,.2f', + 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),