fix(plugin-chart-echarts): missing value format in mixed timeseries (#21044)

Author: justinpark

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,
+      ),
+    }}
+  />
+);

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,
+  },
+];

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 } from '../utils/annotation';
 import {
@@ -136,6 +138,7 @@ export default function transformProps(
     yAxisTitlePosition,
     sliceId,
     timeGrainSqla,
+    percentageThreshold,
   }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
@@ -181,7 +184,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,
@@ -195,6 +219,10 @@ export default function transformProps(
       filterState,
       seriesKey: entry.name,
       sliceId,
+      formatter,
+      showValueIndexes: showValueIndexesA,
+      totalStackedValues,
+      thresholdValues,
     });
     if (transformedSeries) series.push(transformedSeries);
   });
@@ -214,6 +242,10 @@ export default function transformProps(
         ? `${entry.name} (1)`
         : entry.name,
       sliceId,
+      formatter: formatterSecondary,
+      showValueIndexes: showValueIndexesB,
+      totalStackedValues: totalStackedValuesB,
+      thresholdValues: thresholdValuesB,
     });
     if (transformedSeries) series.push(transformedSeries);
   });