feat(plugin-chart-echarts): Echarts Waterfall

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { withKnobs } from '@storybook/addon-knobs';
+import { EchartsWaterfallChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import transformProps from '@superset-ui/plugin-chart-echarts/src/Waterfall/transformProps';
+import data from './data';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+
+new EchartsWaterfallChartPlugin().configure({ key: 'echarts-waterfall' }).register();
+
+getChartTransformPropsRegistry().registerValue('echarts-waterfall', transformProps);
+
+export default {
+ title: 'Chart Plugins|plugin-chart-echarts/Waterfall',
+ decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Waterfall = ({ width, height }) => {
+ return (
+ <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',
+ },
+ ],
+ }}
+ />
+ );
+};

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

@@ -0,0 +1,30 @@
+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 },
+];

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

@@ -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 React from 'react';
+import Echart from '../components/Echart';
+import { WaterfallChartTransformedProps } from './types';
+
+export default function EchartsWaterfall({
+ height,
+ width,
+ echartOptions,
+}: WaterfallChartTransformedProps) {
+ return <Echart height={height} width={width} echartOptions={echartOptions} />;
+}

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

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

plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx

@@ -0,0 +1,113 @@
+/**
+ * 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 { t } from '@superset-ui/core';
+import { ControlPanelConfig, formatSelectOptions, sections } from '@superset-ui/chart-controls';
+import { showValueControl } from '../controls';
+
+const config: ControlPanelConfig = {
+ controlPanelSections: [
+ sections.legacyTimeseriesTime,
+ {
+ label: t('Query'),
+ expanded: true,
+ controlSetRows: [['metric'], ['adhoc_filters'], ['series'], ['columns'], ['row_limit']],
+ },
+ {
+ label: t('Chart Options'),
+ expanded: true,
+ controlSetRows: [
+ ['color_scheme', 'label_colors'],
+ [showValueControl],
+ [
+ {
+ name: 'show_legend',
+ config: {
+ type: 'CheckboxControl',
+ label: t('Show legend'),
+ renderTrigger: true,
+ default: false,
+ description: t('Whether to display a legend for the chart'),
+ },
+ },
+ ],
+ [
+ {
+ name: 'rich_tooltip',
+ config: {
+ type: 'CheckboxControl',
+ label: t('Rich tooltip'),
+ renderTrigger: true,
+ default: true,
+ description: t('Shows a list of all series available at that point in time'),
+ },
+ },
+ ],
+ [<h1 className="section-header">{t('X Axis')}</h1>],
+ [
+ {
+ name: 'x_axis_label',
+ config: {
+ type: 'TextControl',
+ label: t('X Axis Label'),
+ renderTrigger: true,
+ default: '',
+ },
+ },
+ ],
+ [
+ {
+ name: 'x_ticks_layout',
+ config: {
+ type: 'SelectControl',
+ label: t('X Tick Layout'),
+ choices: formatSelectOptions(['auto', 'flat', '45°', '90°', 'staggered']),
+ default: 'auto',
+ clearable: false,
+ renderTrigger: true,
+ description: t('The way the ticks are laid out on the X-axis'),
+ },
+ },
+ ],
+ [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [
+ {
+ name: 'y_axis_label',
+ config: {
+ type: 'TextControl',
+ label: t('Y Axis Label'),
+ renderTrigger: true,
+ default: '',
+ },
+ },
+ ],
+ ['y_axis_format'],
+ ],
+ },
+ ],
+ controlOverrides: {
+ columns: {
+ label: t('Breakdowns'),
+ description: t('Defines how each series is broken down'),
+ multi: false,
+ },
+ },
+};
+
+export default config;

plugins/plugin-chart-echarts/src/Waterfall/index.ts

@@ -0,0 +1,58 @@
+/**
+ * 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
+ * regardin
+ * g 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 { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import buildQuery from './buildQuery';
+import controlPanel from './controlPanel';
+import transformProps from './transformProps';
+import thumbnail from './images/thumbnail.png';
+import { EchartsWaterfallChartProps, EchartsWaterfallFormData } from './types';
+
+export default class EchartsWaterfallChartPlugin extends ChartPlugin<
+ EchartsWaterfallFormData,
+ EchartsWaterfallChartProps
+> {
+ /**
+ * The constructor is used to pass relevant metadata and callbacks that get
+ * registered in respective registries that are used throughout the library
+ * and application. A more thorough description of each property is given in
+ * the respective imported file.
+ *
+ * It is worth noting that `buildQuery` and is optional, and only needed for
+ * advanced visualizations that require either post processing operations
+ * (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
+ */
+ constructor() {
+ super({
+ buildQuery,
+ controlPanel,
+ loadChart: () => import('./EchartsWaterfall'),
+ metadata: new ChartMetadata({
+ credits: ['https://echarts.apache.org'],
+ category: t('Evolution'),
+ description: '',
+ exampleGallery: [],
+ name: t('Waterfall Chart'),
+ thumbnail,
+ tags: [],
+ }),
+ transformProps,
+ });
+ }
+}