feat(storybook): Co-habitating/Upgrading Storybooks to v7 (dependency madness ensues) (#26907)

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -234,16 +234,19 @@ export default function transformProps(
   const formatter = contributionMode
     ? getNumberFormatter(',.0%')
     : currencyFormat?.symbol
-    ? new CurrencyFormatter({ d3Format: yAxisFormat, currency: currencyFormat })
-    : getNumberFormatter(yAxisFormat);
+      ? new CurrencyFormatter({
+          d3Format: yAxisFormat,
+          currency: currencyFormat,
+        })
+      : getNumberFormatter(yAxisFormat);
   const formatterSecondary = contributionMode
     ? getNumberFormatter(',.0%')
     : currencyFormatSecondary?.symbol
-    ? new CurrencyFormatter({
-        d3Format: yAxisFormatSecondary,
-        currency: currencyFormatSecondary,
-      })
-    : getNumberFormatter(yAxisFormatSecondary);
+      ? new CurrencyFormatter({
+          d3Format: yAxisFormatSecondary,
+          currency: currencyFormatSecondary,
+        })
+      : getNumberFormatter(yAxisFormatSecondary);
   const customFormatters = buildCustomFormatters(
     [...ensureIsArray(metrics), ...ensureIsArray(metricsB)],
     currencyFormats,
@@ -369,7 +372,7 @@ export default function transformProps(
       customFormatters,
       formatter,
       metrics,
-      labelMap[seriesName]?.[0],
+      labelMap?.[seriesName]?.[0],
       !!contributionMode,
     );
 
@@ -414,7 +417,7 @@ export default function transformProps(
       customFormattersSecondary,
       formatterSecondary,
       metricsB,
-      labelMapB[seriesName]?.[0],
+      labelMapB?.[seriesName]?.[0],
       !!contributionMode,
     );
 

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts

@@ -21,21 +21,34 @@ import {
   sections,
 } from '@superset-ui/chart-controls';
 import { t } from '@superset-ui/core';
+import { LegendOrientation, LegendType } from '../types';
 import {
   OrientationType,
   EchartsTimeseriesSeriesType,
   EchartsTimeseriesFormData,
 } from './types';
-import {
-  DEFAULT_LEGEND_FORM_DATA,
-  DEFAULT_TITLE_FORM_DATA,
-} from '../constants';
+// import {
+//   DEFAULT_LEGEND_FORM_DATA,
+//   DEFAULT_TITLE_FORM_DATA,
+// } from '../constants';
 import { defaultXAxis } from '../defaults';
 
 // @ts-ignore
 export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
-  ...DEFAULT_LEGEND_FORM_DATA,
-  ...DEFAULT_TITLE_FORM_DATA,
+  // ...DEFAULT_LEGEND_FORM_DATA, // TODO: figure out why these break things for stories (e.g. Bubble Chart)
+  // Here are the contents of DEFAULT_LEGEND_FORM_DATA:
+  legendMargin: null,
+  legendOrientation: LegendOrientation.Top,
+  legendType: LegendType.Scroll,
+  showLegend: true,
+  // ...DEFAULT_TITLE_FORM_DATA, // TODO: figure out why these break things for stories (e.g. Bubble Chart)
+  // here are the contents of DEFAULT_TITLE_FORM_DATA:
+  xAxisTitle: '',
+  xAxisTitleMargin: 0,
+  yAxisTitle: '',
+  yAxisTitleMargin: 0,
+  yAxisTitlePosition: 'Top',
+  // Now that the weird bug workaround is over, here's the rest...
   ...DEFAULT_SORT_SERIES_DATA,
   annotationLayers: sections.annotationLayers,
   area: false,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -219,7 +219,7 @@ export default function transformProps(
     getMetricLabel,
   );
 
-  const isMultiSeries = groupby.length || metrics.length > 1;
+  const isMultiSeries = groupby?.length || metrics?.length > 1;
 
   const [rawSeries, sortedTotalValues, minPositiveValue] = extractSeries(
     rebasedData,
@@ -297,7 +297,7 @@ export default function transformProps(
           : getCustomFormatter(
               customFormatters,
               metrics,
-              labelMap[seriesName]?.[0],
+              labelMap?.[seriesName]?.[0],
             ) ?? defaultFormatter,
         showValue,
         onlyTotal,

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts

@@ -187,9 +187,9 @@ export default function transformProps(
     currencyFormat,
     granularitySqla = '',
     groupby,
-    increaseColor,
-    decreaseColor,
-    totalColor,
+    increaseColor = { r: 90, g: 193, b: 137 },
+    decreaseColor = { r: 224, g: 67, b: 85 },
+    totalColor = { r: 102, g: 102, b: 102 },
     metric = '',
     xAxis,
     xTicksLayout,

superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts

@@ -45,12 +45,15 @@ export const extractForecastSeriesContext = (
 export const extractForecastSeriesContexts = (
   seriesNames: string[],
 ): { [key: string]: ForecastSeriesEnum[] } =>
-  seriesNames.reduce((agg, name) => {
-    const context = extractForecastSeriesContext(name);
-    const currentContexts = agg[context.name] || [];
-    currentContexts.push(context.type);
-    return { ...agg, [context.name]: currentContexts };
-  }, {} as { [key: string]: ForecastSeriesEnum[] });
+  seriesNames.reduce(
+    (agg, name) => {
+      const context = extractForecastSeriesContext(name);
+      const currentContexts = agg[context.name] || [];
+      currentContexts.push(context.type);
+      return { ...agg, [context.name]: currentContexts };
+    },
+    {} as { [key: string]: ForecastSeriesEnum[] },
+  );
 
 export const extractForecastValuesFromTooltipParams = (
   params: any[],