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

Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com>
2026-04-25 11:04:48 +00:00 · 2023-10-06 21:08:16 +08:00
parent 0c40bea064
commit 17792a507c
14 changed files with 1124 additions and 0 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
@@ -0,0 +1,142 @@
+/**
+ * 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 { ensureIsArray, t } from '@superset-ui/core';
+import {
+  ControlPanelConfig,
+  formatSelectOptions,
+  getStandardizedControls,
+  sections,
+} from '@superset-ui/chart-controls';
+import { showValueControl } from '../controls';
+
+const config: ControlPanelConfig = {
+  controlPanelSections: [
+    sections.legacyTimeseriesTime,
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['series'],
+        ['columns'],
+        ['metric'],
+        ['adhoc_filters'],
+        ['row_limit'],
+      ],
+    },
+    {
+      label: t('Chart Options'),
+      expanded: true,
+      controlSetRows: [
+        ['color_scheme'],
+        [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',
+              ),
+            },
+          },
+        ],
+        [<div className="section-header">{t('X Axis')}</div>],
+        [
+          {
+            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'),
+            },
+          },
+        ],
+        [<div className="section-header">{t('Y Axis')}</div>],
+        [
+          {
+            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,
+    },
+  },
+  formDataOverrides: formData => {
+    const series = getStandardizedControls()
+      .popAllColumns()
+      .filter(col => !ensureIsArray(formData.columns).includes(col));
+    return {
+      ...formData,
+      series,
+      metric: getStandardizedControls().shiftMetric(),
+    };
+  },
+};
+
+export default config;