feat(plugin-chart-echarts): Echarts Waterfall (apache#17906)

Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com>

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Stories.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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.
+ */
+import React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { withKnobs } from '@storybook/addon-knobs';
+import {
+  EchartsWaterfallChartPlugin,
+  WaterfallTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from './data';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+
+new EchartsWaterfallChartPlugin()
+  .configure({ key: 'echarts-waterfall' })
+  .register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts-waterfall',
+  WaterfallTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins|plugin-chart-echarts/Waterfall',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Waterfall = ({ width, height }) => (
+  <SuperChart
+    chartType="echarts-waterfall"
+    width={width}
+    height={height}
+    queriesData={[{ data }]}
+    formData={{
+      metric: `SUM(decomp_volume)`,
+      columns: 'due_to_group',
+      series: 'period',
+      x_ticks_layout: '45°',
+      adhocFilters: [
+        {
+          clause: 'WHERE',
+          comparator: '0',
+          expressionType: 'SIMPLE',
+          filterOptionName: 'filter_8ix98su8zu4_t4767ixmbp9',
+          isExtra: false,
+          isNew: false,
+          operator: '!=',
+          sqlExpression: null,
+          subject: 'period',
+        },
+      ],
+    }}
+  />
+);

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/data.ts

@@ -0,0 +1,80 @@
+/**
+ * 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 [
+  { due_to_group: 'Facebook', period: '2020', 'SUM(decomp_volume)': 1945565.5 },
+  {
+    due_to_group: 'Competitor TV Advertising',
+    period: '2019',
+    'SUM(decomp_volume)': 1213252,
+  },
+  {
+    due_to_group: 'Online Advertising',
+    period: '2018',
+    'SUM(decomp_volume)': 999990,
+  },
+  { due_to_group: 'COREBASE', period: '2017', 'SUM(decomp_volume)': 852094 },
+  { due_to_group: 'COREBASE', period: '2018', 'SUM(decomp_volume)': 736576 },
+  { due_to_group: 'DISPLAY', period: '2017', 'SUM(decomp_volume)': 621608 },
+  { due_to_group: 'DISPLAY', period: '2018', 'SUM(decomp_volume)': 388904 },
+  { due_to_group: 'Facebook', period: '2019', 'SUM(decomp_volume)': 94909 },
+  {
+    due_to_group: 'Online Advertising',
+    period: '2017',
+    'SUM(decomp_volume)': 81334,
+  },
+  { due_to_group: 'Halo TV', period: '2018', 'SUM(decomp_volume)': 66828 },
+  { due_to_group: 'Halo TV', period: '2017', 'SUM(decomp_volume)': 46818 },
+  {
+    due_to_group: 'Competitor TV Advertising',
+    period: '2017',
+    'SUM(decomp_volume)': 25252,
+  },
+  { due_to_group: 'Facebook', period: '2017', 'SUM(decomp_volume)': 23932 },
+  { due_to_group: 'DFSI', period: '2017', 'SUM(decomp_volume)': 21466 },
+  { due_to_group: 'Coupons', period: '2017', 'SUM(decomp_volume)': 11160 },
+  { due_to_group: 'Facebook', period: '2018', 'SUM(decomp_volume)': 9444 },
+  { due_to_group: 'DFSI', period: '2019', 'SUM(decomp_volume)': 8785 },
+  {
+    due_to_group: 'Competitive Coupons',
+    period: '2017',
+    'SUM(decomp_volume)': 8724,
+  },
+  {
+    due_to_group: 'Competitive Coupons',
+    period: '2019',
+    'SUM(decomp_volume)': 8724,
+  },
+  { due_to_group: 'Coupons', period: '2019', 'SUM(decomp_volume)': 2950 },
+  { due_to_group: 'BB Display', period: '2019', 'SUM(decomp_volume)': 1844 },
+  { due_to_group: 'BB Display', period: '2017', 'SUM(decomp_volume)': 1844 },
+  { due_to_group: 'Email', period: '2017', 'SUM(decomp_volume)': 810 },
+  { due_to_group: 'OTHER', period: '2017', 'SUM(decomp_volume)': 78 },
+  { due_to_group: 'Email', period: '2019', 'SUM(decomp_volume)': -987000 },
+  { due_to_group: 'Email', period: '2020', 'SUM(decomp_volume)': -998988 },
+  {
+    due_to_group: 'Online Advertising',
+    period: '2020',
+    'SUM(decomp_volume)': -1500000.7,
+  },
+  {
+    due_to_group: 'Online Advertising',
+    period: '2019',
+    'SUM(decomp_volume)': -1671652,
+  },
+];

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

@@ -0,0 +1,84 @@
+/**
+ * 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.
+ */
+import React, { useCallback } from 'react';
+import Echart from '../components/Echart';
+import { allEventHandlers } from '../utils/eventHandlers';
+import { WaterfallChartTransformedProps } 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]);
+
+      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,
+        },
+      });
+    },
+    [setDataMask, groupby, labelMap],
+  );
+
+  const eventHandlers = {
+    ...allEventHandlers(props),
+    handleChange,
+  };
+
+  return (
+    <Echart
+      refs={refs}
+      height={height}
+      width={width}
+      echartOptions={echartOptions}
+      eventHandlers={eventHandlers}
+      selectedValues={selectedValues}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+import { buildQueryContext, QueryFormData } from '@superset-ui/core';
+
+export default function buildQuery(formData: QueryFormData) {
+  const { series, columns } = formData;
+  return buildQueryContext(formData, baseQueryObject => [
+    {
+      ...baseQueryObject,
+      columns: columns?.length ? [series, columns] : [series],
+    },
+  ]);
+}

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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+
+import { t } from '@superset-ui/core';
+
+export const TOTAL_MARK = t('Total');
+export const ASSIST_MARK = t('Assist');
+export const LEGEND = {
+  INCREASE: t('Increase'),
+  DECREASE: t('Decrease'),
+  TOTAL: t('Total'),
+};
+export const TOKEN = '-';