You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yj...@apache.org on 2022/08/11 19:34:09 UTC
[superset] branch master updated: fix(plugin-chart-echarts): missing value format in mixed timeseries (#21044)
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 2d1ba46844 fix(plugin-chart-echarts): missing value format in mixed timeseries (#21044)
2d1ba46844 is described below
commit 2d1ba468441b113c574d6fcc5984e8e09ddbc1c6
Author: JUST.in DO IT <ju...@airbnb.com>
AuthorDate: Thu Aug 11 12:33:59 2022 -0700
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(-)
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 a6a13e4e56..1082ac58ab 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 }) => (
+ <SuperChart
+ chartType="mixed-timeseries"
+ width={width}
+ height={height}
+ queriesData={[
+ {
+ data: negativeNumData,
+ colnames: ['__timestamp'],
+ coltypes: [2],
+ },
+ {
+ data: negativeNumData.map(({ __timestamp, Boston }) => ({
+ __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 0000000000..ce5cb79d27
--- /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 bcdd01a333..0bca3a03e6 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);
});