From 46b4eca280d8ceeda10252ee4aade5badb647fa1 Mon Sep 17 00:00:00 2001
From: Stephen Liu <750188453@qq.com>
Date: Tue, 26 Oct 2021 18:51:54 +0800
Subject: [PATCH] feat: add storybook for missing chart and fix broken treemap
 (#1427)

---
 .../plugin-chart-echarts/Gauge/Stories.tsx    |  32 ++
 .../plugin-chart-echarts/Gauge/data.ts        |   6 +
 .../plugin-chart-echarts/Graph/Stories.tsx    |  34 ++
 .../plugin-chart-echarts/Graph/data.ts        | 310 ++++++++++++++++++
 .../plugin-chart-echarts/Radar/Stories.tsx    |  47 +++
 .../plugin-chart-echarts/Radar/data.ts        |  18 +
 .../plugin-chart-echarts/Treemap/Stories.tsx  |   2 +-
 7 files changed, 448 insertions(+), 1 deletion(-)
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/Stories.tsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/data.ts
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/Stories.tsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/data.ts
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Stories.tsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/data.ts

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/Stories.tsx
new file mode 100644
index 000000000000..51a1fba740c9
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/Stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { withKnobs } from '@storybook/addon-knobs';
+import { EchartsGaugeChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import transformProps from '@superset-ui/plugin-chart-echarts/lib/Gauge/transformProps';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+import { speed } from './data';
+
+new EchartsGaugeChartPlugin().configure({ key: 'echarts-gauge' }).register();
+
+getChartTransformPropsRegistry().registerValue('echarts-gauge', transformProps);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Gauge',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Gauge = ({ width, height }) => {
+  return (
+    <SuperChart
+      chartType="echarts-gauge"
+      width={width}
+      height={height}
+      queriesData={[{ data: speed }]}
+      formData={{
+        columns: [],
+        groupby: ['name'],
+        metric: 'value',
+      }}
+    />
+  );
+};
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/data.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/data.ts
new file mode 100644
index 000000000000..5d7337470e82
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/data.ts
@@ -0,0 +1,6 @@
+export const speed = [
+  {
+    name: 'km/h',
+    value: 70,
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/Stories.tsx
new file mode 100644
index 000000000000..be965d9cfffe
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/Stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { withKnobs } from '@storybook/addon-knobs';
+import { EchartsGraphChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import transformProps from '@superset-ui/plugin-chart-echarts/lib/Graph/transformProps';
+import { basic } from './data';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+
+new EchartsGraphChartPlugin().configure({ key: 'echarts-graph' }).register();
+
+getChartTransformPropsRegistry().registerValue('echarts-graph', transformProps);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Graph',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Graph = ({ width, height }) => {
+  return (
+    <SuperChart
+      chartType="echarts-graph"
+      width={width}
+      height={height}
+      queriesData={[{ data: basic }]}
+      formData={{
+        source: 'source',
+        target: 'target',
+        sourceCategory: 'sourceCategory',
+        targetCategory: 'targetCategory',
+        metric: 'value',
+      }}
+    />
+  );
+};
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/data.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/data.ts
new file mode 100644
index 000000000000..12857ffb0b7f
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/data.ts
@@ -0,0 +1,310 @@
+export const basic = [
+  {
+    source: '05/18/21 Live Demo',
+    target: '05/04/21 Live Demo',
+    value: 100,
+    sourceCategory: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '05/04/21 Live Demo',
+    target: '04/20/21 Live Demo',
+    value: 110,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '05/04/21 Live Demo',
+    target: '04/13/21 Live Demo',
+    value: 40,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '05/04/21 Live Demo',
+    target: '04/06/21 Live Demo',
+    value: 30,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '05/04/21 Live Demo',
+    target: '09/29/21 Live Demo',
+    value: 25,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '05/04/21 Live Demo',
+    target: '06/01/21 Live Demo',
+    value: 43,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '04/20/21 Live Demo',
+    target: '04/13/21 Live Demo',
+    value: 50,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '04/20/21 Live Demo',
+    target: '03/02/21 Meetup',
+    value: 40,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '04/20/21 Live Demo',
+    target: '06/01/21 Live Demo',
+    value: 58,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '04/20/21 Live Demo',
+    target: '03/25/21 Meetup',
+    value: 38,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '04/20/21 Live Demo',
+    target: '01/28/21 Meetup',
+    value: 34,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '04/13/21 Live Demo',
+    target: '04/06/21 Live Demo',
+    value: 34,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '04/13/21 Live Demo',
+    target: '09/29/21 Live Demo',
+    value: 56,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '04/06/21 Live Demo',
+    target: '09/29/21 Live Demo',
+    value: 77,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '04/13/21 Live Demo',
+    target: '03/02/21 Meetup',
+    value: 36,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '04/13/21 Live Demo',
+    target: '06/08/21 Live Demo',
+    value: 77,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '09/29/21 Live Demo',
+    target: '06/01/21 Live Demo',
+    value: 44,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '09/29/21 Live Demo',
+    target: '06/08/21 Live Demo',
+    value: 30,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '06/01/21 Live Demo',
+    target: '03/02/21 Meetup',
+    value: 67,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '06/01/21 Live Demo',
+    target: '03/25/21 Meetup',
+    value: 30,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '06/01/21 Live Demo',
+    target: '05/11/21 Meetup',
+    value: 52,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '06/01/21 Live Demo',
+    target: '06/08/21 Live Demo',
+    value: 43,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '06/01/21 Live Demo',
+    target: '01/28/21 Meetup',
+    value: 45,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '06/01/21 Live Demo',
+    target: '05/04/21 Live Demo',
+    value: 42,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '06/01/21 Live Demo',
+    target: '03/25/21 Meetup',
+    value: 32,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '03/02/21 Meetup',
+    target: '03/25/21 Meetup',
+    value: 23,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '03/02/21 Meetup',
+    target: '05/11/21 Meetup',
+    value: 43,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '03/02/21 Meetup',
+    target: '01/28/21 Meetup',
+    value: 33,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '03/02/21 Meetup',
+    target: '05/04/21 Live Demo',
+    value: 53,
+    category: 'Meetup',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '03/02/21 Meetup',
+    target: '03/25/21 Meetup',
+    value: 55,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '03/25/21 Meetup',
+    target: '05/11/21 Meetup',
+    value: 33,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '03/25/21 Meetup',
+    target: '06/08/21 Live Demo',
+    value: 73,
+    category: 'Meetup',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '03/25/21 Meetup',
+    target: '01/28/21 Meetup',
+    value: 63,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '03/25/21 Meetup',
+    target: '05/04/21 Live Demo',
+    value: 52,
+    category: 'Meetup',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '03/25/21 Meetup',
+    target: '03/25/21 Meetup',
+    value: 51,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '05/11/21 Meetup',
+    target: '06/08/21 Live Demo',
+    value: 35,
+    category: 'Meetup',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '05/11/21 Meetup',
+    target: '05/04/21 Live Demo',
+    value: 75,
+    category: 'Meetup',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '05/11/21 Meetup',
+    target: '01/28/21 Meetup',
+    value: 65,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '06/08/21 Live Demo',
+    target: '01/28/21 Meetup',
+    value: 36,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '06/08/21 Live Demo',
+    target: '05/04/21 Live Demo',
+    value: 46,
+    category: 'Live Demo',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '06/08/21 Live Demo',
+    target: '03/25/21 Meetup',
+    value: 26,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '03/25/21 Meetup',
+    target: '05/04/21 Live Demo',
+    value: 78,
+    category: 'Meetup',
+    targetCategory: 'Live Demo',
+  },
+  {
+    source: '03/25/21 Meetup',
+    target: '03/25/21 Meetup',
+    value: 45,
+    category: 'Meetup',
+    targetCategory: 'Meetup',
+  },
+  {
+    source: '05/18/21 Live Demo',
+    target: '03/25/21 Meetup',
+    value: 65,
+    category: 'Live Demo',
+    targetCategory: 'Meetup',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Stories.tsx
new file mode 100644
index 000000000000..047a5d300d31
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { withKnobs } from '@storybook/addon-knobs';
+import { EchartsRadarChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import transformProps from '@superset-ui/plugin-chart-echarts/lib/Radar/transformProps';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+import { basic } from './data';
+
+new EchartsRadarChartPlugin().configure({ key: 'echarts-radar' }).register();
+
+getChartTransformPropsRegistry().registerValue('echarts-radar', transformProps);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Radar',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Radar = ({ width, height }) => {
+  return (
+    <SuperChart
+      chartType="echarts-radar"
+      width={width}
+      height={height}
+      queriesData={[{ data: basic }]}
+      formData={{
+        columns: [],
+        groupby: ['Sales'],
+        metrics: [
+          'Sales',
+          'Administration',
+          'Information Technology',
+          'Customer Support',
+          'Development',
+          'Marketing',
+        ],
+        columnConfig: {
+          Sales: { radarMetricMaxValue: 6500 },
+          Administration: { radarMetricMaxValue: 16000 },
+          'Information Technology': { radarMetricMaxValue: 30000 },
+          'Customer Support': { radarMetricMaxValue: 38000 },
+          Development: { radarMetricMaxValue: 52000 },
+          Marketing: { radarMetricMaxValue: 25000 },
+        },
+      }}
+    />
+  );
+};
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/data.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/data.ts
new file mode 100644
index 000000000000..4c873497ff57
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/data.ts
@@ -0,0 +1,18 @@
+export const basic = [
+  {
+    Sales: 4200,
+    Administration: 3000,
+    'Information Technology': 20000,
+    'Customer Support': 35000,
+    Development: 50000,
+    Marketing: 18000,
+  },
+  {
+    Sales: 5000,
+    Administration: 14000,
+    'Information Technology': 28000,
+    'Customer Support': 26000,
+    Development: 42000,
+    Marketing: 21000,
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Treemap/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Treemap/Stories.tsx
index a7947bc53cb4..bc3476c54d04 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Treemap/Stories.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Treemap/Stories.tsx
@@ -25,7 +25,7 @@ export const Treemap = ({ width, height }) => {
       formData={{
         colorScheme: 'supersetColors',
         groupby: ['genre'],
-        metrics: ['count'],
+        metric: 'count',
         showLabels: boolean('Show labels', true),
         showUpperLabels: boolean('Show upperLabels', true),
         labelType: select('Treemap label type', ['key', 'value', 'key_value'], 'key_value'),