feat: Improves the Waterfall chart

superset-frontend/packages/superset-ui-core/src/color/index.ts

@@ -32,6 +32,7 @@ export * from './SequentialScheme';
 export { default as ColorSchemeRegistry } from './ColorSchemeRegistry';
 export * from './colorSchemes';
 export * from './utils';
+export * from './types';
 export {
   default as getSharedLabelColor,
   SharedLabelColor,

superset-frontend/packages/superset-ui-core/src/color/types.ts

@@ -24,3 +24,10 @@ export interface ColorsInitLookup {
 export interface ColorsLookup {
   [key: string]: string;
 }
+
+export interface RgbaColor {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}

superset-frontend/packages/superset-ui-core/src/color/utils.ts

@@ -86,3 +86,36 @@ export function addAlpha(color: string, opacity: number): string {
 
   return `${color}${alpha}`;
 }
+
+export function hexToRgb(h: string) {
+  let r = '0';
+  let g = '0';
+  let b = '0';
+
+  // 3 digits
+  if (h.length === 4) {
+    r = `0x${h[1]}${h[1]}`;
+    g = `0x${h[2]}${h[2]}`;
+    b = `0x${h[3]}${h[3]}`;
+
+    // 6 digits
+  } else if (h.length === 7) {
+    r = `0x${h[1]}${h[2]}`;
+    g = `0x${h[3]}${h[4]}`;
+    b = `0x${h[5]}${h[6]}`;
+  }
+
+  return `rgb(${+r}, ${+g}, ${+b})`;
+}
+
+export function rgbToHex(red: number, green: number, blue: number) {
+  let r = red.toString(16);
+  let g = green.toString(16);
+  let b = blue.toString(16);
+
+  if (r.length === 1) r = `0${r}`;
+  if (g.length === 1) g = `0${g}`;
+  if (b.length === 1) b = `0${b}`;
+
+  return `#${r}${g}${b}`;
+}

superset-frontend/packages/superset-ui-core/test/color/utils.test.ts

@@ -17,7 +17,12 @@
  * under the License.
  */
 
-import { getContrastingColor, addAlpha } from '@superset-ui/core';
+import {
+  getContrastingColor,
+  addAlpha,
+  hexToRgb,
+  rgbToHex,
+} from '@superset-ui/core';
 
 describe('color utils', () => {
   describe('getContrastingColor', () => {
@@ -82,4 +87,23 @@ describe('color utils', () => {
       }).toThrow();
     });
   });
+  describe('hexToRgb', () => {
+    it('convert 3 digits hex', () => {
+      expect(hexToRgb('#fff')).toBe('rgb(255, 255, 255)');
+    });
+    it('convert 6 digits hex', () => {
+      expect(hexToRgb('#ffffff')).toBe('rgb(255, 255, 255)');
+    });
+    it('convert invalid hex', () => {
+      expect(hexToRgb('#ffffffffffffff')).toBe('rgb(0, 0, 0)');
+    });
+  });
+  describe('rgbToHex', () => {
+    it('convert rgb to hex - white', () => {
+      expect(rgbToHex(255, 255, 255)).toBe('#ffffff');
+    });
+    it('convert rgb to hex - black', () => {
+      expect(rgbToHex(0, 0, 0)).toBe('#000000');
+    });
+  });
 });

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

@@ -78,8 +78,6 @@ import { convertInteger } from '../utils/convertInteger';
 import { defaultGrid, defaultYAxis } from '../defaults';
 import {
   getPadding,
-  getTooltipTimeFormatter,
-  getXAxisFormatter,
   transformEventAnnotation,
   transformFormulaAnnotation,
   transformIntervalAnnotation,
@@ -88,7 +86,11 @@ import {
 } from '../Timeseries/transformers';
 import { TIMESERIES_CONSTANTS, TIMEGRAIN_TO_TIMESTAMP } from '../constants';
 import { getDefaultTooltip } from '../utils/tooltip';
-import { getYAxisFormatter } from '../utils/getYAxisFormatter';
+import {
+  getTooltipTimeFormatter,
+  getXAxisFormatter,
+  getYAxisFormatter,
+} from '../utils/formatters';
 
 const getFormatter = (
   customFormatters: Record<string, ValueFormatter>,

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

@@ -80,8 +80,6 @@ import { defaultGrid, defaultYAxis } from '../defaults';
 import {
   getBaselineSeriesForStream,
   getPadding,
-  getTooltipTimeFormatter,
-  getXAxisFormatter,
   transformEventAnnotation,
   transformFormulaAnnotation,
   transformIntervalAnnotation,
@@ -94,7 +92,11 @@ import {
   TIMEGRAIN_TO_TIMESTAMP,
 } from '../constants';
 import { getDefaultTooltip } from '../utils/tooltip';
-import { getYAxisFormatter } from '../utils/getYAxisFormatter';
+import {
+  getTooltipTimeFormatter,
+  getXAxisFormatter,
+  getYAxisFormatter,
+} from '../utils/formatters';
 
 export default function transformProps(
   chartProps: EchartsTimeseriesChartProps,

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

@@ -24,14 +24,10 @@ import {
   EventAnnotationLayer,
   FilterState,
   FormulaAnnotationLayer,
-  getTimeFormatter,
   IntervalAnnotationLayer,
   isTimeseriesAnnotationResult,
   LegendState,
-  smartDateDetailedFormatter,
-  smartDateFormatter,
   SupersetTheme,
-  TimeFormatter,
   TimeseriesAnnotationLayer,
   TimeseriesDataRecord,
   ValueFormatter,
@@ -582,27 +578,3 @@ export function getPadding(
         : TIMESERIES_CONSTANTS.gridOffsetRight,
   });
 }
-
-export function getTooltipTimeFormatter(
-  format?: string,
-): TimeFormatter | StringConstructor {
-  if (format === smartDateFormatter.id) {
-    return smartDateDetailedFormatter;
-  }
-  if (format) {
-    return getTimeFormatter(format);
-  }
-  return String;
-}
-
-export function getXAxisFormatter(
-  format?: string,
-): TimeFormatter | StringConstructor | undefined {
-  if (format === smartDateFormatter.id || !format) {
-    return undefined;
-  }
-  if (format) {
-    return getTimeFormatter(format);
-  }
-  return String;
-}

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx

@@ -16,59 +16,26 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import Echart from '../components/Echart';
-import { allEventHandlers } from '../utils/eventHandlers';
 import { WaterfallChartTransformedProps } from './types';
+import { EventHandlers } from '../types';
 
 export default function EchartsWaterfall(
   props: WaterfallChartTransformedProps,
 ) {
-  const {
-    height,
-    width,
-    echartOptions,
-    setDataMask,
-    labelMap,
-    groupby,
-    refs,
-    selectedValues,
-  } = props;
-  const handleChange = useCallback(
-    (values: string[]) => {
-      const groupbyValues = values.map(value => labelMap[value]);
+  const { height, width, echartOptions, refs, onLegendStateChanged } = props;
 
-      setDataMask({
-        extraFormData: {
-          filters:
-            values.length === 0
-              ? []
-              : groupby.map((col, idx) => {
-                  const val = groupbyValues.map(v => v[idx]);
-                  if (val === null || val === undefined)
-                    return {
-                      col,
-                      op: 'IS NULL',
-                    };
-                  return {
-                    col,
-                    op: 'IN',
-                    val: val as (string | number | boolean)[],
-                  };
-                }),
-        },
-        filterState: {
-          value: groupbyValues.length ? groupbyValues : null,
-          selectedValues: values.length ? values : null,
-        },
-      });
+  const eventHandlers: EventHandlers = {
+    legendselectchanged: payload => {
+      onLegendStateChanged?.(payload.selected);
+    },
+    legendselectall: payload => {
+      onLegendStateChanged?.(payload.selected);
+    },
+    legendinverseselect: payload => {
+      onLegendStateChanged?.(payload.selected);
     },
-    [setDataMask, groupby, labelMap],
-  );
-
-  const eventHandlers = {
-    ...allEventHandlers(props),
-    handleChange,
   };
 
   return (
@@ -78,7 +45,6 @@ export default function EchartsWaterfall(
       width={width}
       echartOptions={echartOptions}
       eventHandlers={eventHandlers}
-      selectedValues={selectedValues}
     />
   );
 }

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

@@ -16,14 +16,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { buildQueryContext, QueryFormData } from '@superset-ui/core';
+import {
+  buildQueryContext,
+  ensureIsArray,
+  getXAxisColumn,
+  isXAxisSet,
+  QueryFormData,
+} from '@superset-ui/core';
 
 export default function buildQuery(formData: QueryFormData) {
-  const { series, columns } = formData;
+  const columns = [
+    ...(isXAxisSet(formData) ? ensureIsArray(getXAxisColumn(formData)) : []),
+    ...ensureIsArray(formData.groupby),
+  ];
   return buildQueryContext(formData, baseQueryObject => [
     {
       ...baseQueryObject,
-      columns: columns?.length ? [series, columns] : [series],
+      columns,
+      orderby: columns?.map(column => [column, true]),
     },
   ]);
 }