chore(storybook): consolidate storybook and enhance plugin stories (#37771)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/stories/BigNumberTotal.stories.tsx

@@ -0,0 +1,93 @@
+/**
+ * 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 { SuperChart, VizType } from '@superset-ui/core';
+import { BigNumberTotalChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import { withResizableChartDemo } from '@storybook-shared';
+import data from './data';
+
+new BigNumberTotalChartPlugin()
+  .configure({ key: 'big-number-total' })
+  .register();
+
+export default {
+  title: 'Legacy Chart Plugins/legacy-preset-big-number/BigNumberTotal',
+  decorators: [withResizableChartDemo],
+  args: {
+    subheader: 'total female participants',
+    yAxisFormat: '.3s',
+    forceTimestampFormatting: false,
+  },
+  argTypes: {
+    subheader: { control: 'text' },
+    yAxisFormat: {
+      control: 'select',
+      options: ['SMART_NUMBER', '.2f', '.0%', '$,.2f', '.3s', ',d'],
+    },
+    forceTimestampFormatting: { control: 'boolean' },
+  },
+};
+
+export const TotalBasic = ({
+  subheader,
+  yAxisFormat,
+  forceTimestampFormatting,
+  width,
+  height,
+}: {
+  subheader: string;
+  yAxisFormat: string;
+  forceTimestampFormatting: boolean;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="big-number-total"
+    width={width}
+    height={height}
+    queriesData={[{ data }]}
+    formData={{
+      metric: 'sum__num',
+      subheader,
+      viz_type: VizType.BigNumberTotal,
+      y_axis_format: yAxisFormat,
+      force_timestamp_formatting: forceTimestampFormatting,
+    }}
+  />
+);
+
+export const TotalNoData = ({
+  width,
+  height,
+}: {
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="big-number-total"
+    width={width}
+    height={height}
+    queriesData={[{ data: [] }]}
+    formData={{
+      metric: 'sum__num',
+      subheader: 'total female participants',
+      viz_type: VizType.BigNumberTotal,
+      y_axis_format: '.3s',
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/stories/data.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 [
+  {
+    sum__num: 32546308,
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/stories/BigNumber.stories.tsx

@@ -0,0 +1,176 @@
+/**
+ * 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 { SuperChart, VizType } from '@superset-ui/core';
+import { BigNumberChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import { withResizableChartDemo } from '@storybook-shared';
+import testData from './data';
+
+new BigNumberChartPlugin().configure({ key: 'big-number' }).register();
+
+const TIME_COLUMN = '__timestamp';
+
+const formData = {
+  color_picker: {
+    r: 0,
+    g: 122,
+    b: 135,
+    a: 1,
+  },
+  compare_lag: 1,
+  compare_suffix: 'over 10Y',
+  metric: 'sum__SP_POP_TOTL',
+  show_trend_line: true,
+  start_y_axis_at_zero: true,
+  time_grain_sqla: 'P1Y',
+  viz_type: VizType.BigNumber,
+  x_axis: TIME_COLUMN,
+  y_axis_format: '.3s',
+};
+
+/**
+ * Add null values to trendline data
+ * @param data input data
+ */
+function withNulls(origData: object[], nullPosition = 3) {
+  const data = [...origData];
+  data[nullPosition] = {
+    ...data[nullPosition],
+    sum__SP_POP_TOTL: null,
+  };
+  return data;
+}
+
+export default {
+  title: 'Legacy Chart Plugins/legacy-preset-big-number/BigNumberWithTrendline',
+  decorators: [withResizableChartDemo],
+  args: {
+    showTrendLine: true,
+    startYAxisAtZero: true,
+    compareLag: 1,
+    compareSuffix: 'over 10Y',
+    yAxisFormat: '.3s',
+  },
+  argTypes: {
+    showTrendLine: { control: 'boolean' },
+    startYAxisAtZero: { control: 'boolean' },
+    compareLag: {
+      control: { type: 'range', min: 0, max: 10, step: 1 },
+      description: 'Number of periods to compare against',
+    },
+    compareSuffix: { control: 'text' },
+    yAxisFormat: {
+      control: 'select',
+      options: ['SMART_NUMBER', '.2f', '.0%', '$,.2f', '.3s', ',d'],
+    },
+  },
+};
+
+export const BasicWithTrendline = ({
+  width,
+  height,
+  showTrendLine,
+  startYAxisAtZero,
+  compareLag,
+  compareSuffix,
+  yAxisFormat,
+}: {
+  width: number;
+  height: number;
+  showTrendLine: boolean;
+  startYAxisAtZero: boolean;
+  compareLag: number;
+  compareSuffix: string;
+  yAxisFormat: string;
+}) => (
+  <SuperChart
+    chartType="big-number"
+    width={width}
+    height={height}
+    queriesData={[{ data: testData }]}
+    formData={{
+      ...formData,
+      show_trend_line: showTrendLine,
+      start_y_axis_at_zero: startYAxisAtZero,
+      compare_lag: compareLag,
+      compare_suffix: compareSuffix,
+      y_axis_format: yAxisFormat,
+    }}
+  />
+);
+
+export const weeklyTimeGranularity = () => (
+  <SuperChart
+    chartType="big-number"
+    width={400}
+    height={400}
+    queriesData={[{ data: testData }]}
+    formData={{
+      ...formData,
+      time_grain_sqla: 'P1W',
+    }}
+  />
+);
+
+export const nullInTheMiddle = () => (
+  <SuperChart
+    chartType="big-number"
+    width={400}
+    height={400}
+    queriesData={[{ data: withNulls(testData, 3) }]}
+    formData={formData}
+  />
+);
+
+export const fixedRange = () => (
+  <SuperChart
+    chartType="big-number"
+    width={400}
+    height={400}
+    queriesData={[
+      {
+        data: testData.slice(0, 9),
+        from_dttm: testData[testData.length - 1][TIME_COLUMN],
+        to_dttm: null,
+      },
+    ]}
+    formData={{
+      ...formData,
+      time_range_fixed: true,
+    }}
+  />
+);
+
+export const noFixedRange = () => (
+  <SuperChart
+    chartType="big-number"
+    width={400}
+    height={400}
+    queriesData={[
+      {
+        data: testData.slice(0, 9),
+        from_dttm: testData[testData.length - 1][TIME_COLUMN],
+        to_dttm: testData[0][TIME_COLUMN],
+      },
+    ]}
+    formData={{
+      ...formData,
+      time_range_fixed: false,
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/stories/data.ts

@@ -0,0 +1,78 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable sort-keys */
+export default [
+  {
+    __timestamp: 1388534400000.0,
+    sum__SP_POP_TOTL: 7237260256.0,
+  },
+  {
+    __timestamp: 1356998400000.0,
+    sum__SP_POP_TOTL: 7151135481.0,
+  },
+  {
+    __timestamp: 1325376000000.0,
+    sum__SP_POP_TOTL: 7066007165.0,
+  },
+  {
+    __timestamp: 1293840000000.0,
+    sum__SP_POP_TOTL: 6984252419.0,
+  },
+  {
+    __timestamp: 1262304000000.0,
+    sum__SP_POP_TOTL: 6901110512.0,
+  },
+  {
+    __timestamp: 1230768000000.0,
+    sum__SP_POP_TOTL: 6818457192.0,
+  },
+  {
+    __timestamp: 1199145600000.0,
+    sum__SP_POP_TOTL: 6735914031.0,
+  },
+  {
+    __timestamp: 1167609600000.0,
+    sum__SP_POP_TOTL: 6653571302.0,
+  },
+  {
+    __timestamp: 1136073600000.0,
+    sum__SP_POP_TOTL: 6572596462.0,
+  },
+  {
+    __timestamp: 1104537600000.0,
+    sum__SP_POP_TOTL: 6491857539.0,
+  },
+  {
+    __timestamp: 1072915200000.0,
+    sum__SP_POP_TOTL: 6411615629.0,
+  },
+  {
+    __timestamp: 1041379200000.0,
+    sum__SP_POP_TOTL: 6331766837.0,
+  },
+  {
+    __timestamp: 1009843200000.0,
+    sum__SP_POP_TOTL: 6252469127.0,
+  },
+  {
+    __timestamp: 978307200000.0,
+    sum__SP_POP_TOTL: 617333941.0,
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/stories/BoxPlot.stories.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  EchartsBoxPlotChartPlugin,
+  BoxPlotTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from './data';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsBoxPlotChartPlugin()
+  .configure({ key: 'echarts-boxplot' })
+  .register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts-boxplot',
+  BoxPlotTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/BoxPlot',
+  decorators: [withResizableChartDemo],
+  args: {
+    xTicksLayout: '45°', // Initial value
+  },
+  argTypes: {
+    xTicksLayout: {
+      control: 'select',
+      options: ['auto', 'flat', '45°', '90°', 'staggered'],
+      defaultValue: '45°', // Default value here
+    },
+  },
+};
+
+export const BoxPlot = ({
+  xTicksLayout,
+  width,
+  height,
+}: {
+  xTicksLayout: string;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="echarts-boxplot"
+    width={width}
+    height={height}
+    queriesData={[{ data }]}
+    formData={{
+      columns: [],
+      groupby: ['type', 'region'],
+      metrics: ['AVG(averageprice)'],
+      whiskerOptions: 'Tukey',
+      xTicksLayout,
+      yAxisFormat: 'SMART_NUMBER',
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/stories/data.ts

@@ -0,0 +1,141 @@
+/*
+ * 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 [
+  {
+    type: 'organic',
+    region: 'Charlotte',
+    'AVG(averageprice)__mean': 1.9405512820512825,
+    'AVG(averageprice)__median': 1.9025,
+    'AVG(averageprice)__max': 2.505,
+    'AVG(averageprice)__min': 1.4775,
+    'AVG(averageprice)__q1': 1.73875,
+    'AVG(averageprice)__q3': 2.105,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [2.735],
+  },
+  {
+    type: 'organic',
+    region: 'Hartford Springfield',
+    'AVG(averageprice)__mean': 2.231141025641026,
+    'AVG(averageprice)__median': 2.265,
+    'AVG(averageprice)__max': 2.595,
+    'AVG(averageprice)__min': 1.862,
+    'AVG(averageprice)__q1': 2.1285,
+    'AVG(averageprice)__q3': 2.32625,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [],
+  },
+  {
+    type: 'organic',
+    region: 'Jacksonville',
+    'AVG(averageprice)__mean': 1.829282051282052,
+    'AVG(averageprice)__median': 1.808,
+    'AVG(averageprice)__max': 2.255,
+    'AVG(averageprice)__min': 1.455,
+    'AVG(averageprice)__q1': 1.6945000000000001,
+    'AVG(averageprice)__q3': 1.9475,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [2.48, 2.406, 1.3075, 1.274],
+  },
+  {
+    type: 'organic',
+    region: 'NewYork',
+    'AVG(averageprice)__mean': 2.0531923076923073,
+    'AVG(averageprice)__median': 2.068,
+    'AVG(averageprice)__max': 2.348,
+    'AVG(averageprice)__min': 1.785,
+    'AVG(averageprice)__q1': 1.9725000000000001,
+    'AVG(averageprice)__q3': 2.125,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [2.3825, 2.38, 1.7075],
+  },
+  {
+    type: 'organic',
+    region: 'Northeast',
+    'AVG(averageprice)__mean': 1.8608333333333336,
+    'AVG(averageprice)__median': 1.868,
+    'AVG(averageprice)__max': 2.145,
+    'AVG(averageprice)__min': 1.5925,
+    'AVG(averageprice)__q1': 1.76375,
+    'AVG(averageprice)__q3': 1.96875,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [],
+  },
+  {
+    type: 'organic',
+    region: 'Orlando',
+    'AVG(averageprice)__mean': 1.7969999999999995,
+    'AVG(averageprice)__median': 1.8075,
+    'AVG(averageprice)__max': 2.1125,
+    'AVG(averageprice)__min': 1.306,
+    'AVG(averageprice)__q1': 1.6237499999999998,
+    'AVG(averageprice)__q3': 1.8697499999999998,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [2.3825, 2.358, 2.252],
+  },
+  {
+    type: 'organic',
+    region: 'Philadelphia',
+    'AVG(averageprice)__mean': 1.8673589743589747,
+    'AVG(averageprice)__median': 1.85,
+    'AVG(averageprice)__max': 2.2525,
+    'AVG(averageprice)__min': 1.56,
+    'AVG(averageprice)__q1': 1.7125,
+    'AVG(averageprice)__q3': 1.99575,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [],
+  },
+  {
+    type: 'organic',
+    region: 'Raleigh Greensboro',
+    'AVG(averageprice)__mean': 1.8851410256410257,
+    'AVG(averageprice)__median': 1.782,
+    'AVG(averageprice)__max': 2.402,
+    'AVG(averageprice)__min': 1.356,
+    'AVG(averageprice)__q1': 1.7000000000000002,
+    'AVG(averageprice)__q3': 2.0045,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [2.79, 2.6225, 2.5575, 2.5],
+  },
+  {
+    type: 'organic',
+    region: 'Sacramento',
+    'AVG(averageprice)__mean': 1.972871794871795,
+    'AVG(averageprice)__median': 1.9875,
+    'AVG(averageprice)__max': 2.655,
+    'AVG(averageprice)__min': 1.2925,
+    'AVG(averageprice)__q1': 1.74875,
+    'AVG(averageprice)__q3': 2.1465,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [],
+  },
+  {
+    type: 'organic',
+    region: 'San Francisco',
+    'AVG(averageprice)__mean': 2.213615384615385,
+    'AVG(averageprice)__median': 2.275,
+    'AVG(averageprice)__max': 2.9825,
+    'AVG(averageprice)__min': 1.2275,
+    'AVG(averageprice)__q1': 1.9675,
+    'AVG(averageprice)__q3': 2.541,
+    'AVG(averageprice)__count': 39,
+    'AVG(averageprice)__outliers': [],
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/stories/BubbleChart.stories.tsx

@@ -0,0 +1,191 @@
+/**
+ * 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 {
+  EchartsBubbleChartPlugin,
+  BubbleTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
+import { simpleBubbleData } from './data';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsBubbleChartPlugin().configure({ key: VizType.Bubble }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  VizType.Bubble,
+  BubbleTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts',
+  decorators: [withResizableChartDemo],
+  args: {
+    maxBubbleSize: 10,
+    xAxisTitle: '',
+    xAxisTitleMargin: 30,
+    yAxisTitle: '',
+    yAxisTitleMargin: 30,
+    logYAxis: false,
+    logXAxis: false,
+  },
+  argTypes: {
+    maxBubbleSize: {
+      control: 'select',
+      options: [5, 10, 25, 50, 100, 125],
+      name: 'Max Bubble Size',
+      description: 'Maximum size of bubbles',
+    },
+    xAxisTitle: {
+      control: 'text',
+      name: 'X Axis Title',
+      description: 'Title for the X axis',
+    },
+    xAxisTitleMargin: {
+      control: 'number',
+      name: 'X Axis Title Margin',
+      description: 'Margin for the X axis title',
+    },
+    yAxisTitle: {
+      control: 'text',
+      name: 'Y Axis Title',
+      description: 'Title for the Y axis',
+    },
+    yAxisTitleMargin: {
+      control: 'number',
+      name: 'Y Axis Title Margin',
+      description: 'Margin for the Y axis title',
+    },
+    logYAxis: {
+      control: 'boolean',
+      name: 'Log Y Axis',
+      description: 'Whether to use a logarithmic scale for the Y axis',
+    },
+    logXAxis: {
+      control: 'boolean',
+      name: 'Log X Axis',
+      description: 'Whether to use a logarithmic scale for the X axis',
+    },
+  },
+};
+
+export const BubbleChart = ({
+  maxBubbleSize,
+  xAxisTitle,
+  xAxisTitleMargin,
+  yAxisTitle,
+  yAxisTitleMargin,
+  logYAxis,
+  logXAxis,
+  width,
+  height,
+}: {
+  maxBubbleSize: number;
+  xAxisTitle: string;
+  xAxisTitleMargin: number;
+  yAxisTitle: string;
+  yAxisTitleMargin: number;
+  logYAxis: boolean;
+  logXAxis: boolean;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType={VizType.Bubble}
+    width={width}
+    height={height}
+    queriesData={[{ data: simpleBubbleData }]}
+    formData={{
+      entity: 'customer_name',
+      x: 'count',
+      y: {
+        aggregate: 'SUM',
+        column: {
+          advanced_data_type: null,
+          certification_details: null,
+          certified_by: null,
+          column_name: 'price_each',
+          description: null,
+          expression: null,
+          filterable: true,
+          groupby: true,
+          id: 570,
+          is_certified: false,
+          is_dttm: false,
+          python_date_format: null,
+          type: 'DOUBLE PRECISION',
+          type_generic: 0,
+          verbose_name: null,
+          warning_markdown: null,
+        },
+        expressionType: 'SIMPLE',
+        hasCustomLabel: false,
+        isNew: false,
+        label: 'SUM(price_each)',
+        optionName: 'metric_d9rpclvys0a_fs4bs0m2l1f',
+        sqlExpression: null,
+      },
+      adhocFilters: [],
+      size: {
+        aggregate: 'SUM',
+        column: {
+          advanced_data_type: null,
+          certification_details: null,
+          certified_by: null,
+          column_name: 'sales',
+          description: null,
+          expression: null,
+          filterable: true,
+          groupby: true,
+          id: 571,
+          is_certified: false,
+          is_dttm: false,
+          python_date_format: null,
+          type: 'DOUBLE PRECISION',
+          type_generic: 0,
+          verbose_name: null,
+          warning_markdown: null,
+        },
+        expressionType: 'SIMPLE',
+        hasCustomLabel: false,
+        isNew: false,
+        label: 'SUM(sales)',
+        optionName: 'metric_itj9wncjxk_dp3yibib0q',
+        sqlExpression: null,
+      },
+      limit: 10,
+      colorScheme: 'supersetColors',
+      maxBubbleSize,
+      xAxisTitle,
+      xAxisTitleMargin,
+      yAxisTitle,
+      yAxisTitleMargin,
+      yAxisTitlePosition: 'Left',
+      xAxisFormat: null,
+      logYAxis,
+      yAxisFormat: null,
+      logXAxis,
+      truncateYAxis: false,
+      yAxisBounds: [],
+      extraFormData: {},
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/stories/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 const simpleBubbleData = [
+  {
+    customer_name: 'AV Stores, Co.',
+    count: 51,
+    'SUM(price_each)': 3975.33,
+    'SUM(sales)': 157807.80999999997,
+  },
+  {
+    customer_name: 'Alpha Cognac',
+    count: 20,
+    'SUM(price_each)': 1701.95,
+    'SUM(sales)': 70488.44,
+  },
+  {
+    customer_name: 'Amica Models & Co.',
+    count: 26,
+    'SUM(price_each)': 2218.41,
+    'SUM(sales)': 94117.26000000002,
+  },
+  {
+    customer_name: "Anna's Decorations, Ltd",
+    count: 46,
+    'SUM(price_each)': 3843.67,
+    'SUM(sales)': 153996.13000000003,
+  },
+  {
+    customer_name: 'Atelier graphique',
+    count: 7,
+    'SUM(price_each)': 558.4300000000001,
+    'SUM(sales)': 24179.96,
+  },
+  {
+    customer_name: 'Australian Collectables, Ltd',
+    count: 23,
+    'SUM(price_each)': 1809.7099999999998,
+    'SUM(sales)': 64591.46000000001,
+  },
+  {
+    customer_name: 'Australian Collectors, Co.',
+    count: 55,
+    'SUM(price_each)': 4714.479999999999,
+    'SUM(sales)': 200995.40999999997,
+  },
+  {
+    customer_name: 'Australian Gift Network, Co',
+    count: 15,
+    'SUM(price_each)': 1271.05,
+    'SUM(sales)': 59469.11999999999,
+  },
+  {
+    customer_name: 'Auto Assoc. & Cie.',
+    count: 18,
+    'SUM(price_each)': 1484.8600000000001,
+    'SUM(sales)': 64834.32000000001,
+  },
+  {
+    customer_name: 'Auto Canal Petit',
+    count: 27,
+    'SUM(price_each)': 2188.82,
+    'SUM(sales)': 93170.65999999999,
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/stories/Funnel.stories.tsx

@@ -0,0 +1,114 @@
+/*
+ * 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 {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
+import {
+  EchartsFunnelChartPlugin,
+  FunnelTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import { dataSource } from './constants';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsFunnelChartPlugin().configure({ key: VizType.Funnel }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  VizType.Funnel,
+  FunnelTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Funnel',
+  decorators: [withResizableChartDemo],
+  args: {
+    orient: 'vertical',
+    sort: 'descending',
+    gap: 0,
+    labelType: 'key',
+    labelLine: true,
+    showLabels: true,
+    showLegend: false,
+  },
+  argTypes: {
+    width: { control: 'number' },
+    height: { control: 'number' },
+    orient: { control: 'select', options: ['horizontal', 'vertical'] },
+    sort: { control: 'select', options: ['descending', 'ascending', 'none'] },
+    gap: { control: 'number' },
+    labelType: {
+      control: 'select',
+      options: [
+        'key',
+        'value',
+        'percent',
+        'key_value',
+        'key_percent',
+        'key_value_percent',
+      ],
+    },
+    labelLine: { control: 'boolean' },
+    showLabels: { control: 'boolean' },
+    showLegend: { control: 'boolean' },
+  },
+};
+
+export const Funnel = ({
+  orient,
+  sort,
+  gap,
+  labelType,
+  labelLine,
+  showLabels,
+  showLegend,
+  width,
+  height,
+}: {
+  orient: string;
+  sort: string;
+  gap: number;
+  labelType: string;
+  labelLine: boolean;
+  showLabels: boolean;
+  showLegend: boolean;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType={VizType.Funnel}
+    width={width}
+    height={height}
+    queriesData={[{ data: dataSource }]}
+    formData={{
+      colorScheme: 'supersetColors',
+      groupby: ['name'],
+      metric: 'value',
+      numberFormat: 'SMART_NUMBER',
+      orient,
+      sort,
+      gap,
+      labelType,
+      labelLine,
+      showLabels,
+      showLegend,
+    }}
+  />
+);

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

@@ -0,0 +1,25 @@
+/*
+ * 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 const dataSource = [
+  { value: 89439, name: 'pv' },
+  { value: 5526, name: 'cart' },
+  { value: 2824, name: 'fav' },
+  { value: 2211, name: 'buy' },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/stories/Gauge.stories.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  EchartsGaugeChartPlugin,
+  GaugeTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import { withResizableChartDemo } from '@storybook-shared';
+import { speed } from './data';
+
+new EchartsGaugeChartPlugin().configure({ key: 'echarts-gauge' }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts-gauge',
+  GaugeTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Gauge',
+  decorators: [withResizableChartDemo],
+  args: {
+    colorScheme: 'supersetColors',
+    showProgress: true,
+    showPointer: true,
+    splitNumber: 10,
+    numberFormat: 'SMART_NUMBER',
+    minVal: 0,
+    maxVal: 100,
+    startAngle: 225,
+    endAngle: -45,
+  },
+  argTypes: {
+    colorScheme: {
+      control: 'select',
+      options: [
+        'supersetColors',
+        'd3Category10',
+        'bnbColors',
+        'googleCategory20c',
+      ],
+    },
+    showProgress: { control: 'boolean' },
+    showPointer: { control: 'boolean' },
+    splitNumber: { control: { type: 'range', min: 2, max: 20, step: 1 } },
+    numberFormat: {
+      control: 'select',
+      options: ['SMART_NUMBER', '.2f', '.0%', '$,.2f', '.3s'],
+    },
+    minVal: { control: 'number' },
+    maxVal: { control: 'number' },
+    startAngle: { control: { type: 'range', min: 0, max: 360, step: 15 } },
+    endAngle: { control: { type: 'range', min: -360, max: 0, step: 15 } },
+  },
+};
+
+export const Gauge = ({
+  width,
+  height,
+  colorScheme,
+  showProgress,
+  showPointer,
+  splitNumber,
+  numberFormat,
+  minVal,
+  maxVal,
+  startAngle,
+  endAngle,
+}: {
+  width: number;
+  height: number;
+  colorScheme: string;
+  showProgress: boolean;
+  showPointer: boolean;
+  splitNumber: number;
+  numberFormat: string;
+  minVal: number;
+  maxVal: number;
+  startAngle: number;
+  endAngle: number;
+}) => (
+  <SuperChart
+    chartType="echarts-gauge"
+    width={width}
+    height={height}
+    queriesData={[{ data: speed }]}
+    formData={{
+      columns: [],
+      groupby: ['name'],
+      metric: 'value',
+      colorScheme,
+      showProgress,
+      showPointer,
+      splitNumber,
+      numberFormat,
+      minVal,
+      maxVal,
+      startAngle,
+      endAngle,
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/stories/data.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 const speed = [
+  {
+    name: 'km/h',
+    value: 70,
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Graph/stories/Graph.stories.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  EchartsGraphChartPlugin,
+  GraphTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import { basic } from './data';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsGraphChartPlugin().configure({ key: 'echarts-graph' }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts-graph',
+  GraphTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Graph',
+  decorators: [withResizableChartDemo],
+  args: {
+    colorScheme: 'supersetColors',
+    layout: 'force',
+    showLegend: true,
+    roam: true,
+    draggable: true,
+    repulsion: 1000,
+    gravity: 0.3,
+    edgeLength: 400,
+    showSymbolThreshold: 0,
+  },
+  argTypes: {
+    colorScheme: {
+      control: 'select',
+      options: [
+        'supersetColors',
+        'd3Category10',
+        'bnbColors',
+        'googleCategory20c',
+      ],
+    },
+    layout: {
+      control: 'select',
+      options: ['force', 'circular'],
+    },
+    showLegend: { control: 'boolean' },
+    roam: {
+      control: 'boolean',
+      description: 'Enable zooming and panning',
+    },
+    draggable: {
+      control: 'boolean',
+      description: 'Enable dragging nodes',
+    },
+    repulsion: {
+      control: { type: 'range', min: 100, max: 5000, step: 100 },
+      description: 'Force repulsion between nodes',
+    },
+    gravity: {
+      control: { type: 'range', min: 0, max: 1, step: 0.1 },
+      description: 'Gravity towards center',
+    },
+    edgeLength: {
+      control: { type: 'range', min: 50, max: 1000, step: 50 },
+      description: 'Expected edge length',
+    },
+    showSymbolThreshold: {
+      control: { type: 'range', min: 0, max: 100, step: 10 },
+      description: 'Hide labels below this threshold',
+    },
+  },
+};
+
+export const Graph = ({
+  width,
+  height,
+  colorScheme,
+  layout,
+  showLegend,
+  roam,
+  draggable,
+  repulsion,
+  gravity,
+  edgeLength,
+  showSymbolThreshold,
+}: {
+  width: number;
+  height: number;
+  colorScheme: string;
+  layout: string;
+  showLegend: boolean;
+  roam: boolean;
+  draggable: boolean;
+  repulsion: number;
+  gravity: number;
+  edgeLength: number;
+  showSymbolThreshold: number;
+}) => (
+  <SuperChart
+    chartType="echarts-graph"
+    width={width}
+    height={height}
+    queriesData={[{ data: basic }]}
+    formData={{
+      source: 'source',
+      target: 'target',
+      sourceCategory: 'sourceCategory',
+      targetCategory: 'targetCategory',
+      metric: 'value',
+      colorScheme,
+      layout,
+      showLegend,
+      roam,
+      draggable,
+      repulsion,
+      gravity,
+      edgeLength,
+      showSymbolThreshold,
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/Graph/stories/data.ts

@@ -0,0 +1,329 @@
+/*
+ * 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 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',
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/stories/MixedSeries.stories.tsx

@@ -0,0 +1,334 @@
+/*
+ * 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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  EchartsTimeseriesChartPlugin,
+  MixedTimeseriesTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from '../../Timeseries/stories/data';
+import negativeNumData from './negativeData';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsTimeseriesChartPlugin()
+  .configure({ key: 'mixed-timeseries' })
+  .register();
+
+getChartTransformPropsRegistry().registerValue(
+  'mixed-timeseries',
+  MixedTimeseriesTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/MixedTimeseries',
+  decorators: [withResizableChartDemo],
+};
+
+export const Timeseries = ({
+  zoomable,
+  logAxis,
+  yAxisFormat,
+  yAxisTitle,
+  yAxisIndexB,
+  minorSplitLine,
+  seriesType,
+  stack,
+  area,
+  markerEnabled,
+  markerSize,
+  opacity,
+  seriesTypeB,
+  stackB,
+  areaB,
+  markerEnabledB,
+  markerSizeB,
+  opacityB,
+  width,
+  height,
+}: {
+  zoomable: boolean;
+  logAxis: boolean;
+  yAxisFormat: string;
+  yAxisTitle: string;
+  yAxisIndexB: number;
+  minorSplitLine: boolean;
+  seriesType: string;
+  stack: boolean;
+  area: boolean;
+  markerEnabled: boolean;
+  markerSize: number;
+  opacity: number;
+  seriesTypeB: string;
+  stackB: boolean;
+  areaB: boolean;
+  markerEnabledB: boolean;
+  markerSizeB: number;
+  opacityB: number;
+  width: number;
+  height: number;
+}) => {
+  const queriesData = [
+    {
+      data: data
+        .map(row => ({
+          // eslint-disable-next-line no-underscore-dangle
+          __timestamp: row.__timestamp,
+          Boston: row.Boston,
+        }))
+        .filter(row => !!row.Boston),
+      colnames: ['__timestamp'],
+      coltypes: [2],
+    },
+    {
+      data: data
+        .map(row => ({
+          // eslint-disable-next-line no-underscore-dangle
+          __timestamp: row.__timestamp,
+          California: row.California,
+          WestTexNewMexico: row.WestTexNewMexico,
+        }))
+        .filter(row => !!row.California),
+    },
+  ];
+  return (
+    <SuperChart
+      chartType="mixed-timeseries"
+      width={width}
+      height={height}
+      queriesData={queriesData}
+      formData={{
+        contributionMode: undefined,
+        colorScheme: 'supersetColors',
+        zoomable,
+        logAxis,
+        xAxisTimeFormat: 'smart_date',
+        tooltipTimeFormat: 'smart_date',
+        yAxisFormat,
+        yAxisTitle,
+        yAxisIndexB,
+        minorSplitLine,
+        seriesType,
+        stack,
+        area,
+        markerEnabled,
+        markerSize,
+        opacity,
+        seriesTypeB,
+        stackB,
+        areaB,
+        markerEnabledB,
+        markerSizeB,
+        opacityB,
+        showValue: true,
+        metrics: [{ label: 'Boston' }],
+        metricsB: [{ label: 'California' }, { label: 'WestTexNewMexico' }],
+      }}
+    />
+  );
+};
+
+Timeseries.args = {
+  zoomable: false,
+  logAxis: false,
+  yAxisFormat: '$,.2f',
+  yAxisTitle: '',
+  yAxisIndexB: 1,
+  minorSplitLine: false,
+  seriesType: 'line',
+  stack: false,
+  area: false,
+  markerSize: 6,
+  opacity: 0.2,
+  seriesTypeB: 'bar',
+  stackB: false,
+  areaB: false,
+  markerEnabledB: false,
+  markerSizeB: 6,
+  opacityB: 0.2,
+};
+
+Timeseries.argTypes = {
+  zoomable: {
+    control: 'boolean',
+    description: 'Zoomable',
+  },
+  logAxis: {
+    control: 'boolean',
+    description: 'Log axis',
+  },
+  yAxisFormat: {
+    control: 'select',
+    description: 'Y Axis format',
+    options: ['$,.2f', 'SMART_NUMBER'],
+  },
+  yAxisTitle: {
+    control: 'text',
+    description: 'Y Axis title',
+  },
+  yAxisIndexB: {
+    control: 'select',
+    description: 'Y Axis index for Query 2',
+    options: [0, 1],
+  },
+  minorSplitLine: {
+    control: 'boolean',
+    description: 'Query 1: Minor splitline',
+  },
+  seriesType: {
+    control: 'select',
+    description: 'Query 1: Line type',
+    options: ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
+  },
+  stack: {
+    control: 'boolean',
+    description: 'Query 1: Stack',
+  },
+  area: {
+    control: 'boolean',
+    description: 'Query 1: Area chart',
+  },
+  markerEnabled: {
+    control: 'boolean',
+    description: 'Query 1: Enable markers',
+  },
+  markerSize: {
+    control: 'number',
+    description: 'Query 1: Marker Size',
+  },
+  opacity: {
+    control: 'number',
+    description: 'Query 1: Opacity',
+  },
+  seriesTypeB: {
+    control: 'select',
+    description: 'Query 2: Line type',
+    options: ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
+  },
+  stackB: {
+    control: 'boolean',
+    description: 'Query 2: Stack',
+  },
+  areaB: {
+    control: 'boolean',
+    description: 'Query 2: Area chart',
+  },
+  markerEnabledB: {
+    control: 'boolean',
+    description: 'Query 2: Enable markers',
+  },
+  markerSizeB: {
+    control: 'number',
+    description: 'Query 2: Marker Size',
+  },
+  opacityB: {
+    control: 'number',
+    description: 'Query 2: Opacity',
+  },
+};
+
+export const WithNegativeNumbers = ({
+  seriesType,
+  yAxisFormat,
+  showValue,
+  showValueB,
+  yAxisIndexB,
+  width,
+  height,
+}: {
+  seriesType: string;
+  yAxisFormat: string;
+  showValue: boolean;
+  showValueB: boolean;
+  yAxisIndexB: number;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="mixed-timeseries"
+    width={width}
+    height={height}
+    queriesData={[
+      {
+        data: negativeNumData,
+        colnames: ['__timestamp'],
+        coltypes: [2],
+      },
+      {
+        data: negativeNumData.map(({ __timestamp, Boston }) => ({
+          __timestamp,
+          avgRate: Boston / 100,
+        })),
+      },
+    ]}
+    formData={{
+      contributionMode: undefined,
+      colorScheme: 'supersetColors',
+      seriesType,
+      xAxisTimeFormat: 'smart_date',
+      yAxisFormat,
+      stack: true,
+      showValue,
+      showValueB,
+      showLegend: true,
+      markerEnabledB: true,
+      yAxisIndexB,
+      metrics: [{ label: 'Boston' }],
+      metricsB: [{ label: 'avgRate' }],
+    }}
+  />
+);
+
+WithNegativeNumbers.args = {
+  seriesType: 'line',
+  yAxisFormat: '$,.2f',
+  showValue: true,
+  showValueB: false,
+  yAxisIndexB: 1,
+};
+
+WithNegativeNumbers.argTypes = {
+  seriesType: {
+    control: 'select',
+    options: ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
+  },
+  yAxisFormat: {
+    control: 'select',
+    options: {
+      'Original value': '~g',
+      'Smart number': 'SMART_NUMBER',
+      '(12345.432 => $12,345.43)': '$,.2f',
+    },
+  },
+  showValue: {
+    control: 'boolean',
+    description: 'Query 1: Show Value',
+  },
+  showValueB: {
+    control: 'boolean',
+    description: 'Query 2: Show Value',
+  },
+  yAxisIndexB: {
+    control: 'select',
+    description: 'Query 2: Y Axis',
+    options: {
+      Primary: 0,
+      Secondary: 1,
+    },
+  },
+};

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

@@ -0,0 +1,45 @@
+/*
+ * 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 [
+  {
+    __timestamp: 1619827200000,
+    Boston: 10.8812312312,
+    Washington: -45.3089432023,
+    JerseyCity: -23.0509234029834,
+  },
+  {
+    __timestamp: 1622505600000,
+    Boston: 80.81029340234,
+    Washington: -10.299023489023,
+    JerseyCity: 53.54239402349,
+  },
+  {
+    __timestamp: 1625097600000,
+    Boston: 30.9129034924,
+    Washington: 100.25234902349,
+    JerseyCity: 27.17239402394,
+  },
+  {
+    __timestamp: 1627776000000,
+    Boston: 42.6129034924,
+    Washington: 90.23234902349,
+    JerseyCity: -32.23239402394,
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Pie/stories/Pie.stories.tsx

@@ -0,0 +1,286 @@
+/*
+ * 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 {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
+import {
+  EchartsPieChartPlugin,
+  PieTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import { weekday, population, sales } from './data';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsPieChartPlugin().configure({ key: VizType.Pie }).register();
+
+getChartTransformPropsRegistry().registerValue(VizType.Pie, PieTransformProps);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Pie',
+  decorators: [withResizableChartDemo],
+};
+
+export const WeekdayPie = ({
+  donut,
+  innerRadius,
+  outerRadius,
+  labelsOutside,
+  labelLine,
+  showLabels,
+  showLegend,
+  labelType,
+  width,
+  height,
+}: {
+  donut: boolean;
+  innerRadius: number;
+  outerRadius: number;
+  labelsOutside: boolean;
+  labelLine: boolean;
+  showLabels: boolean;
+  showLegend: boolean;
+  labelType: string;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType={VizType.Pie}
+    width={width}
+    height={height}
+    queriesData={[{ data: weekday }]}
+    formData={{
+      colorScheme: 'supersetColors',
+      groupby: ['Day'],
+      metric: 'SUM(AIR_TIME)',
+      numberFormat: 'SMART_NUMBER',
+      donut,
+      innerRadius,
+      outerRadius,
+      labelsOutside,
+      labelLine,
+      showLabels,
+      showLegend,
+      labelType,
+    }}
+  />
+);
+
+WeekdayPie.args = {
+  donut: false,
+  innerRadius: 30,
+  outerRadius: 70,
+  labelsOutside: true,
+  labelLine: true,
+  showLabels: true,
+  showLegend: false,
+  labelType: 'key',
+};
+
+WeekdayPie.argTypes = {
+  donut: { control: 'boolean' },
+  innerRadius: { control: 'number' },
+  outerRadius: { control: 'number' },
+  labelsOutside: { control: 'boolean' },
+  labelLine: { control: 'boolean' },
+  showLabels: { control: 'boolean' },
+  showLegend: { control: 'boolean' },
+  labelType: {
+    control: {
+      type: 'select',
+      options: [
+        'key',
+        'value',
+        'percent',
+        'key_value',
+        'key_percent',
+        'key_value_percent',
+      ],
+    },
+  },
+};
+
+export const PopulationPie = ({
+  donut,
+  innerRadius,
+  outerRadius,
+  labelsOutside,
+  labelLine,
+  showLabels,
+  showLegend,
+  labelType,
+  width,
+  height,
+}: {
+  donut: boolean;
+  innerRadius: number;
+  outerRadius: number;
+  labelsOutside: boolean;
+  labelLine: boolean;
+  showLabels: boolean;
+  showLegend: boolean;
+  labelType: string;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType={VizType.Pie}
+    width={width}
+    height={height}
+    queriesData={[{ data: population }]}
+    formData={{
+      colorScheme: 'supersetColors',
+      groupby: ['Country'],
+      metric: 'Population',
+      numberFormat: 'SMART_NUMBER',
+      donut,
+      innerRadius,
+      outerRadius,
+      labelsOutside,
+      labelLine,
+      showLabels,
+      showLegend,
+      labelType,
+    }}
+  />
+);
+
+PopulationPie.args = {
+  donut: false,
+  innerRadius: 30,
+  outerRadius: 70,
+  labelsOutside: false,
+  labelLine: true,
+  showLabels: true,
+  showLegend: false,
+  labelType: 'key',
+};
+
+PopulationPie.argTypes = {
+  donut: { control: 'boolean' },
+  innerRadius: { control: 'number' },
+  outerRadius: { control: 'number' },
+  labelsOutside: { control: 'boolean' },
+  labelLine: { control: 'boolean' },
+  showLabels: { control: 'boolean' },
+  showLegend: { control: 'boolean' },
+  labelType: {
+    control: {
+      type: 'select',
+      options: [
+        'key',
+        'value',
+        'percent',
+        'key_value',
+        'key_percent',
+        'key_value_percent',
+      ],
+    },
+  },
+};
+
+export const SalesPie = ({
+  donut,
+  innerRadius,
+  outerRadius,
+  labelsOutside,
+  labelLine,
+  showLabels,
+  showLegend,
+  labelType,
+  roseType,
+  width,
+  height,
+}: {
+  donut: boolean;
+  innerRadius: number;
+  outerRadius: number;
+  labelsOutside: boolean;
+  labelLine: boolean;
+  showLabels: boolean;
+  showLegend: boolean;
+  labelType: string;
+  roseType: string;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType={VizType.Pie}
+    width={width}
+    height={height}
+    queriesData={[{ data: sales }]}
+    formData={{
+      colorScheme: 'supersetColors',
+      groupby: ['Product'],
+      metric: 'SUM(AMOUNT)',
+      numberFormat: 'SMART_NUMBER',
+      roseType,
+      donut,
+      innerRadius,
+      outerRadius,
+      labelsOutside,
+      labelLine,
+      showLabels,
+      showLegend,
+      labelType,
+    }}
+  />
+);
+
+SalesPie.args = {
+  roseType: 'area',
+  donut: false,
+  innerRadius: 30,
+  outerRadius: 70,
+  labelsOutside: false,
+  labelLine: true,
+  showLabels: true,
+  showLegend: false,
+  labelType: 'key',
+};
+
+SalesPie.argTypes = {
+  roseType: {
+    control: {
+      type: 'select',
+      options: ['area', 'radius'],
+    },
+  },
+  donut: { control: 'boolean' },
+  innerRadius: { control: 'number' },
+  outerRadius: { control: 'number' },
+  labelsOutside: { control: 'boolean' },
+  labelLine: { control: 'boolean' },
+  showLabels: { control: 'boolean' },
+  showLegend: { control: 'boolean' },
+  labelType: {
+    control: {
+      type: 'select',
+      options: [
+        'key',
+        'value',
+        'percent',
+        'key_value',
+        'key_percent',
+        'key_value_percent',
+      ],
+    },
+  },
+};

superset-frontend/plugins/plugin-chart-echarts/src/Pie/stories/data.ts

@@ -0,0 +1,253 @@
+/*
+ * 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 const weekday = [
+  { Day: 'Friday', 'SUM(AIR_TIME)': 1943661 },
+  { Day: 'Saturday', 'SUM(AIR_TIME)': 1798845 },
+  { Day: 'Thursday', 'SUM(AIR_TIME)': 1626157 },
+  { Day: 'Sunday', 'SUM(AIR_TIME)': 1048653 },
+];
+
+export const population = [
+  { Country: 'China', Population: 58345455000 },
+  { Country: 'India', Population: 46023037597 },
+  { Country: 'United States', Population: 13604468357 },
+  { Country: 'Indonesia', Population: 9357861231 },
+  { Country: 'Brazil', Population: 7752058955 },
+  { Country: 'Russian Federation', Population: 7667188460 },
+  { Country: 'Japan', Population: 6454620759 },
+  { Country: 'Pakistan', Population: 5696041480 },
+  { Country: 'Bangladesh', Population: 5549261462 },
+  { Country: 'Nigeria', Population: 5259800493 },
+  { Country: 'Mexico', Population: 4444653964 },
+  { Country: 'Germany', Population: 4361793335 },
+  { Country: 'Vietnam', Population: 3420037000 },
+  { Country: 'Philippines', Population: 3272015554 },
+  { Country: 'United Kingdom', Population: 3169118137 },
+  { Country: 'France', Population: 3151638853 },
+  { Country: 'Italy', Population: 3082869665 },
+  { Country: 'Egypt, Arab Rep.', Population: 2967887581 },
+  { Country: 'Thailand', Population: 2827157965 },
+  { Country: 'Turkey', Population: 2805220683 },
+  { Country: 'Ethiopia', Population: 2750952916 },
+  { Country: 'Iran, Islamic Rep.', Population: 2717528355 },
+  { Country: 'Ukraine', Population: 2657782543 },
+  { Country: 'Korea, Rep.', Population: 2216456927 },
+  { Country: 'Myanmar', Population: 2126848982 },
+  { Country: 'Spain', Population: 2115316751 },
+  { Country: 'Congo, Dem. Rep.', Population: 2015439254 },
+  { Country: 'Poland', Population: 1976772515 },
+  { Country: 'South Africa', Population: 1871083248 },
+  { Country: 'Colombia', Population: 1776189608 },
+  { Country: 'Argentina', Population: 1728332290 },
+  { Country: 'Canada', Population: 1470276931 },
+  { Country: 'Tanzania', Population: 1413734053 },
+  { Country: 'Algeria', Population: 1317290647 },
+  { Country: 'Morocco', Population: 1277441301 },
+  { Country: 'Kenya', Population: 1253201109 },
+  { Country: 'Romania', Population: 1171333228 },
+  { Country: 'Peru', Population: 1121937313 },
+  { Country: 'Sudan', Population: 1118903636 },
+  { Country: 'Uzbekistan', Population: 1053380227 },
+  { Country: 'Korea, Dem. Rep.', Population: 1047335229 },
+  { Country: 'Venezuela, RB', Population: 1036057583 },
+  { Country: 'Nepal', Population: 1007162709 },
+  { Country: 'Uganda', Population: 987376102 },
+  { Country: 'Iraq', Population: 983604177 },
+  { Country: 'Malaysia', Population: 978122682 },
+  { Country: 'Australia', Population: 903260509 },
+  { Country: 'Afghanistan', Population: 887557752 },
+  { Country: 'Sri Lanka', Population: 881137000 },
+  { Country: 'Saudi Arabia', Population: 828451525 },
+  { Country: 'Mozambique', Population: 807229371 },
+  { Country: 'Netherlands', Population: 803013980 },
+  { Country: 'Ghana', Population: 801844889 },
+  { Country: 'Kazakhstan', Population: 797168043 },
+  { Country: 'Chile', Population: 696739897 },
+  { Country: 'Yemen, Rep.', Population: 695646128 },
+  { Country: 'Cameroon', Population: 664127790 },
+  { Country: 'Syrian Arab Republic', Population: 663924524 },
+  { Country: 'Madagascar', Population: 656478313 },
+  { Country: 'Angola', Population: 641906296 },
+  { Country: "Cote d'Ivoire", Population: 634194484 },
+  { Country: 'Hungary', Population: 566995908 },
+  { Country: 'Czech Republic', Population: 559416359 },
+  { Country: 'Belgium', Population: 551921585 },
+  { Country: 'Cuba', Population: 550461345 },
+  { Country: 'Greece', Population: 547065293 },
+  { Country: 'Ecuador', Population: 537148542 },
+  { Country: 'Portugal', Population: 536945679 },
+  { Country: 'Belarus', Population: 524490000 },
+  { Country: 'Cambodia', Population: 523555378 },
+  { Country: 'Zimbabwe', Population: 509866860 },
+  { Country: 'Burkina Faso', Population: 505122912 },
+  { Country: 'Mali', Population: 500758830 },
+  { Country: 'Guatemala', Population: 498361800 },
+  { Country: 'Niger', Population: 471910464 },
+  { Country: 'Malawi', Population: 470725354 },
+  { Country: 'Sweden', Population: 468210684 },
+  { Country: 'Bulgaria', Population: 456247765 },
+  { Country: 'Zambia', Population: 438847085 },
+  { Country: 'Austria', Population: 426785647 },
+  { Country: 'Tunisia', Population: 415992799 },
+  { Country: 'Senegal', Population: 414475224 },
+  { Country: 'Haiti', Population: 377521290 },
+  { Country: 'Azerbaijan', Population: 374210660 },
+  { Country: 'Dominican Republic', Population: 373939753 },
+  { Country: 'Switzerland', Population: 369360744 },
+  { Country: 'Bolivia', Population: 368308373 },
+  { Country: 'Guinea', Population: 362469063 },
+  { Country: 'Chad', Population: 355875809 },
+  { Country: 'Rwanda', Population: 347121852 },
+  { Country: 'Somalia', Population: 332677926 },
+  { Country: 'South Sudan', Population: 319024522 },
+  { Country: 'Burundi', Population: 305731834 },
+  { Country: 'Hong Kong SAR, China', Population: 298353905 },
+  { Country: 'Benin', Population: 290736360 },
+  { Country: 'Denmark', Population: 283435789 },
+  { Country: 'Slovak Republic', Population: 276228375 },
+  { Country: 'Finland', Population: 271585488 },
+  { Country: 'Tajikistan', Population: 267603756 },
+  { Country: 'El Salvador', Population: 266413287 },
+  { Country: 'Israel', Population: 263866720 },
+  { Country: 'Honduras', Population: 257791863 },
+  { Country: 'Croatia', Population: 246197511 },
+  { Country: 'Georgia', Population: 241070850 },
+  { Country: 'Norway', Population: 233337059 },
+  { Country: 'Papua New Guinea', Population: 228299012 },
+  { Country: 'Lao PDR', Population: 227340983 },
+  { Country: 'Kyrgyz Republic', Population: 222809200 },
+  { Country: 'Paraguay', Population: 221768661 },
+  { Country: 'Libya', Population: 217716251 },
+  { Country: 'Bosnia and Herzegovina', Population: 215521543 },
+  { Country: 'Nicaragua', Population: 213048662 },
+  { Country: 'Togo', Population: 204624027 },
+  { Country: 'Sierra Leone', Population: 203443826 },
+  { Country: 'Ireland', Population: 196019322 },
+  { Country: 'Turkmenistan', Population: 189687365 },
+  { Country: 'New Zealand', Population: 187593600 },
+  { Country: 'Serbia', Population: 186596480 },
+  { Country: 'Moldova', Population: 186156257 },
+  { Country: 'Lithuania', Population: 182416949 },
+  { Country: 'Puerto Rico', Population: 181515497 },
+  { Country: 'Jordan', Population: 180850641 },
+  { Country: 'Singapore', Population: 173168000 },
+  { Country: 'Uruguay', Population: 167612670 },
+  { Country: 'Costa Rica', Population: 163515714 },
+  { Country: 'Lebanon', Population: 162031498 },
+  { Country: 'Eritrea', Population: 161125877 },
+  { Country: 'Armenia', Population: 160782905 },
+  { Country: 'Central African Republic', Population: 158650217 },
+  { Country: 'Albania', Population: 148154320 },
+  { Country: 'United Arab Emirates', Population: 134952923 },
+  { Country: 'Panama', Population: 130974461 },
+  { Country: 'Congo, Rep.', Population: 130701144 },
+  { Country: 'Latvia', Population: 130544986 },
+  { Country: 'Liberia', Population: 125666085 },
+  { Country: 'Jamaica', Population: 124779119 },
+  { Country: 'Mauritania', Population: 113489314 },
+  { Country: 'Mongolia', Population: 106717826 },
+  { Country: 'Slovenia', Population: 104119695 },
+  { Country: 'Macedonia, FYR', Population: 104100695 },
+  { Country: 'Oman', Population: 93132249 },
+  { Country: 'Kosovo', Population: 86627232 },
+  { Country: 'Kuwait', Population: 84737006 },
+  { Country: 'Lesotho', Population: 81971241 },
+  { Country: 'West Bank and Gaza', Population: 77390117 },
+  { Country: 'Estonia', Population: 77119567 },
+  { Country: 'Namibia', Population: 75238033 },
+  { Country: 'Botswana', Population: 70510085 },
+  { Country: 'Trinidad and Tobago', Population: 62771502 },
+  { Country: 'Guinea-Bissau', Population: 58400669 },
+  { Country: 'Mauritius', Population: 56066051 },
+  { Country: 'Gabon', Population: 52489952 },
+  { Country: 'Gambia, The', Population: 50232086 },
+  { Country: 'Cyprus', Population: 43711039 },
+  { Country: 'Swaziland', Population: 42858935 },
+  { Country: 'Timor-Leste', Population: 41694123 },
+  { Country: 'Guyana', Population: 39868752 },
+  { Country: 'Fiji', Population: 37505227 },
+  { Country: 'Montenegro', Population: 31652512 },
+  { Country: 'Qatar', Population: 30075210 },
+  { Country: 'Bahrain', Population: 29724096 },
+  { Country: 'Djibouti', Population: 26324244 },
+  { Country: 'Bhutan', Population: 25987074 },
+  { Country: 'Comoros', Population: 22692936 },
+  { Country: 'Suriname', Population: 22687861 },
+  { Country: 'Equatorial Guinea', Population: 22627794 },
+  { Country: 'Luxembourg', Population: 21852156 },
+  { Country: 'Malta', Population: 19363458 },
+  { Country: 'Cabo Verde', Population: 19178461 },
+  { Country: 'Macao SAR, China', Population: 18882494 },
+  { Country: 'Solomon Islands', Population: 16859526 },
+  { Country: 'Barbados', Population: 14146501 },
+  { Country: 'Iceland', Population: 13716537 },
+  { Country: 'Bahamas, The', Population: 13446111 },
+  { Country: 'Brunei Darussalam', Population: 13322318 },
+  { Country: 'Maldives', Population: 11478624 },
+  { Country: 'Belize', Population: 10571460 },
+  { Country: 'French Polynesia', Population: 9974982 },
+  { Country: 'New Caledonia', Population: 9225822 },
+  { Country: 'Samoa', Population: 8770470 },
+  { Country: 'Vanuatu', Population: 7966814 },
+  { Country: 'Curacao', Population: 7898637 },
+  { Country: 'Channel Islands', Population: 7515697 },
+  { Country: 'St. Lucia', Population: 7336842 },
+  { Country: 'Guam', Population: 6647797 },
+  { Country: 'Sao Tome and Principe', Population: 6169644 },
+  { Country: 'St. Vincent and the Grenadines', Population: 5557117 },
+  { Country: 'Grenada', Population: 5366107 },
+  { Country: 'Tonga', Population: 5038574 },
+  { Country: 'Virgin Islands (U.S.)', Population: 5006756 },
+  { Country: 'Micronesia, Fed. Sts.', Population: 4627492 },
+  { Country: 'Aruba', Population: 4048374 },
+  { Country: 'Antigua and Barbuda', Population: 3887170 },
+  { Country: 'Dominica', Population: 3881071 },
+  { Country: 'Kiribati', Population: 3874990 },
+  { Country: 'Seychelles', Population: 3761184 },
+  { Country: 'Isle of Man', Population: 3728525 },
+  { Country: 'Bermuda', Population: 3159267 },
+  { Country: 'Greenland', Population: 2807533 },
+  { Country: 'Andorra', Population: 2704725 },
+  { Country: 'St. Kitts and Nevis', Population: 2535482 },
+  { Country: 'Faeroe Islands', Population: 2399439 },
+  { Country: 'American Samoa', Population: 2294886 },
+  { Country: 'Marshall Islands', Population: 2086174 },
+  { Country: 'Northern Mariana Islands', Population: 2015842 },
+  { Country: 'Monaco', Population: 1595554 },
+  { Country: 'Liechtenstein', Population: 1527171 },
+  { Country: 'Cayman Islands', Population: 1480956 },
+  { Country: 'San Marino', Population: 1298411 },
+  { Country: 'St. Martin (French part)', Population: 1020457 },
+  { Country: 'Palau', Population: 833299 },
+  { Country: 'Turks and Caicos Islands', Population: 775185 },
+  { Country: 'Sint Maarten (Dutch part)', Population: 597781 },
+  { Country: 'Tuvalu', Population: 466709 },
+];
+
+export const sales = [
+  { Product: 'Laptop', 'SUM(AMOUNT)': 30 },
+  { Product: 'Workstation', 'SUM(AMOUNT)': 28 },
+  { Product: 'Phone', 'SUM(AMOUNT)': 26 },
+  { Product: 'Tablet', 'SUM(AMOUNT)': 24 },
+  { Product: 'PDA', 'SUM(AMOUNT)': 22 },
+  { Product: 'Ink Pad', 'SUM(AMOUNT)': 20 },
+  { Product: 'Accessories', 'SUM(AMOUNT)': 18 },
+  { Product: 'Pad', 'SUM(AMOUNT)': 16 },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Radar/stories/Radar.stories.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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 {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
+import {
+  EchartsRadarChartPlugin,
+  RadarTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import { withResizableChartDemo } from '@storybook-shared';
+import { basic } from './data';
+
+new EchartsRadarChartPlugin().configure({ key: VizType.Radar }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  VizType.Radar,
+  RadarTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Radar',
+  decorators: [withResizableChartDemo],
+  args: {
+    colorScheme: 'supersetColors',
+    showLegend: true,
+    isCircle: false,
+    labelType: 'key',
+    showLabels: true,
+    numberFormat: 'SMART_NUMBER',
+  },
+  argTypes: {
+    colorScheme: {
+      control: 'select',
+      options: [
+        'supersetColors',
+        'd3Category10',
+        'bnbColors',
+        'googleCategory20c',
+      ],
+    },
+    showLegend: { control: 'boolean' },
+    isCircle: {
+      control: 'boolean',
+      description: 'If true, radar shape is circle; otherwise polygon',
+    },
+    labelType: {
+      control: 'select',
+      options: ['key', 'value', 'percent', 'key_value', 'key_percent'],
+    },
+    showLabels: { control: 'boolean' },
+    numberFormat: {
+      control: 'select',
+      options: ['SMART_NUMBER', '.2f', '.0%', '$,.2f', '.3s'],
+    },
+  },
+};
+
+export const Radar = ({
+  width,
+  height,
+  colorScheme,
+  showLegend,
+  isCircle,
+  labelType,
+  showLabels,
+  numberFormat,
+}: {
+  width: number;
+  height: number;
+  colorScheme: string;
+  showLegend: boolean;
+  isCircle: boolean;
+  labelType: string;
+  showLabels: boolean;
+  numberFormat: string;
+}) => (
+  <SuperChart
+    chartType={VizType.Radar}
+    width={width}
+    height={height}
+    queriesData={[{ data: basic }]}
+    formData={{
+      columns: [],
+      groupby: ['Sales'],
+      metrics: [
+        'Sales',
+        'Administration',
+        'Information Technology',
+        'Customer Support',
+        'Development',
+        'Marketing',
+      ],
+      column_config: {
+        Sales: { radarMetricMaxValue: 6500 },
+        Administration: { radarMetricMaxValue: 16000 },
+        'Information Technology': { radarMetricMaxValue: 30000 },
+        'Customer Support': { radarMetricMaxValue: 38000 },
+        Development: { radarMetricMaxValue: 52000 },
+        Marketing: { radarMetricMaxValue: 25000 },
+      },
+      color_scheme: colorScheme,
+      show_legend: showLegend,
+      is_circle: isCircle,
+      label_type: labelType,
+      show_labels: showLabels,
+      number_format: numberFormat,
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/Radar/stories/data.ts

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

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/stories/Sunburst.stories.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  EchartsSunburstChartPlugin,
+  SunburstTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import { withResizableChartDemo } from '@storybook-shared';
+import data from './data';
+
+new EchartsSunburstChartPlugin()
+  .configure({ key: 'echarts-sunburst' })
+  .register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts-sunburst',
+  SunburstTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Sunburst',
+  decorators: [withResizableChartDemo],
+};
+
+export const Sunburst = ({
+  showLabels,
+  showTotal,
+  width,
+  height,
+}: {
+  showLabels: boolean;
+  showTotal: boolean;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="echarts-sunburst"
+    width={width}
+    height={height}
+    queriesData={[{ data }]}
+    formData={{
+      columns: ['genre', 'platform'],
+      metric: 'count',
+      showLabels,
+      showTotal,
+    }}
+  />
+);
+Sunburst.args = {
+  showLabels: true,
+  showTotal: true,
+};
+Sunburst.argTypes = {
+  showLabels: { control: 'boolean' },
+  showTotal: { control: 'boolean' },
+};

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/stories/data.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 [
+  { genre: 'Adventure', platform: 'Wii', count: 84 },
+  { genre: 'Adventure', platform: 'N64', count: 14 },
+  { genre: 'Adventure', platform: 'XOne', count: 12 },
+  { genre: 'Adventure', platform: 'PS4', count: 19 },
+  { genre: 'Strategy', platform: 'Wii', count: 25 },
+  { genre: 'Strategy', platform: 'PS4', count: 15 },
+  { genre: 'Strategy', platform: 'N64', count: 29 },
+  { genre: 'Strategy', platform: 'XOne', count: 23 },
+  { genre: 'Simulation', platform: 'PS4', count: 15 },
+  { genre: 'Simulation', platform: 'XOne', count: 36 },
+  { genre: 'Simulation', platform: 'N64', count: 20 },
+  { genre: 'Simulation', platform: 'Wii', count: 50 },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/stories/AreaSeries/AreaSeries.stories.tsx

@@ -0,0 +1,202 @@
+/*
+ * 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 {
+  SuperChart,
+  getChartTransformPropsRegistry,
+  VizType,
+} from '@superset-ui/core';
+import {
+  EchartsAreaChartPlugin,
+  TimeseriesTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from './data';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsAreaChartPlugin().configure({ key: VizType.Area }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  VizType.Area,
+  TimeseriesTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts',
+  decorators: [withResizableChartDemo],
+  component: SuperChart,
+  parameters: {
+    initialSize: { width: 500, height: 300 },
+  },
+  args: {
+    forecastEnabled: true,
+    seriesType: 'line',
+    show_extra_controls: false,
+    logAxis: false,
+    stack: false,
+    showValue: false,
+    onlyTotal: false,
+    percentageThreshold: 0,
+    markerEnabled: false,
+    markerSize: 6,
+    minorSplitLine: false,
+    opacity: 0.2,
+    zoomable: false,
+  },
+  argTypes: {
+    forecastEnabled: {
+      control: 'boolean',
+      description: 'Extra Forecast',
+      defaultValue: false,
+    },
+    seriesType: {
+      control: 'select',
+      description: 'Line type',
+      options: ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
+    },
+    show_extra_controls: {
+      control: 'boolean',
+      description: 'Extra Controls',
+      defaultValue: false,
+    },
+    logAxis: {
+      control: 'boolean',
+      description: 'Log axis',
+      defaultValue: false,
+    },
+    stack: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    showValue: {
+      control: 'boolean',
+      description: 'Show Values',
+      defaultValue: false,
+    },
+    onlyTotal: {
+      control: 'boolean',
+      description: 'Only Total',
+      defaultValue: false,
+    },
+    percentageThreshold: {
+      control: { type: 'number', min: 0, max: 100, step: 1 },
+      description: 'Percentage Threshold',
+      defaultValue: 0,
+    },
+    markerEnabled: {
+      control: 'boolean',
+      description: 'Enable markers',
+      defaultValue: false,
+    },
+    markerSize: {
+      control: { type: 'number', min: 0, max: 100, step: 1 },
+      description: 'Marker Size',
+      defaultValue: 6,
+    },
+    minorSplitLine: {
+      control: 'boolean',
+      description: 'Minor splitline',
+      defaultValue: false,
+    },
+    opacity: {
+      control: { type: 'number', min: 0, max: 1, step: 0.1 },
+      description: 'Opacity',
+      defaultValue: 0.2,
+    },
+    zoomable: {
+      control: 'boolean',
+      description: 'Zoomable',
+      defaultValue: false,
+    },
+  },
+};
+
+export const AreaSeries = ({
+  forecastEnabled,
+  seriesType,
+  show_extra_controls,
+  logAxis,
+  stack,
+  showValue,
+  onlyTotal,
+  percentageThreshold,
+  markerEnabled,
+  markerSize,
+  minorSplitLine,
+  opacity,
+  zoomable,
+  width,
+  height,
+}: {
+  forecastEnabled: boolean;
+  seriesType: string;
+  show_extra_controls: boolean;
+  logAxis: boolean;
+  stack: boolean;
+  showValue: boolean;
+  onlyTotal: boolean;
+  percentageThreshold: number;
+  markerEnabled: boolean;
+  markerSize: number;
+  minorSplitLine: boolean;
+  opacity: number;
+  zoomable: boolean;
+  width: number;
+  height: number;
+}) => {
+  const queryData = data
+    .map(row =>
+      forecastEnabled
+        ? row
+        : {
+            // eslint-disable-next-line no-underscore-dangle
+            __timestamp: row.__timestamp,
+            Boston: row.Boston,
+            California: row.California,
+            WestTexNewMexico: row.WestTexNewMexico,
+          },
+    )
+    .filter(row => forecastEnabled || !!row.Boston);
+  return (
+    <SuperChart
+      chartType={VizType.Area}
+      width={width}
+      height={height}
+      queriesData={[{ data: queryData }]}
+      formData={{
+        area: true,
+        contributionMode: undefined,
+        forecastEnabled,
+        colorScheme: 'supersetColors',
+        seriesType,
+        show_extra_controls,
+        logAxis,
+        yAxisFormat: 'SMART_NUMBER',
+        stack,
+        showValue,
+        onlyTotal,
+        percentageThreshold,
+        markerEnabled,
+        markerSize,
+        minorSplitLine,
+        opacity,
+        zoomable,
+      }}
+    />
+  );
+};

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/stories/AreaSeries/data.ts

@@ -0,0 +1,771 @@
+/*
+ * 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 [
+  {
+    __timestamp: 1419811200000,
+    Boston__yhat: 1.5348466045278903,
+    Boston__yhat_lower: 1.4108696830290821,
+    Boston__yhat_upper: 1.65406759478647,
+    Boston: 1.425,
+    California__yhat: 1.1428578093572317,
+    California__yhat_lower: 0.9954265301846809,
+    California__yhat_upper: 1.285336837473888,
+    California: 1.085,
+    WestTexNewMexico__yhat: 1.2189159706952082,
+    WestTexNewMexico__yhat_lower: 1.04104376708674,
+    WestTexNewMexico__yhat_upper: 1.3729774938431487,
+    WestTexNewMexico: 1.195,
+  },
+  {
+    __timestamp: 1420416000000,
+    Boston__yhat: 1.5183086928032201,
+    Boston__yhat_lower: 1.4051623626305831,
+    Boston__yhat_upper: 1.6373864508998999,
+    Boston: 1.52,
+    California__yhat: 1.1473836815806109,
+    California__yhat_lower: 0.9896908958316125,
+    California__yhat_upper: 1.3074486619072236,
+    California: 1.01,
+    WestTexNewMexico__yhat: 1.2101876636102695,
+    WestTexNewMexico__yhat_lower: 1.0531768381015862,
+    WestTexNewMexico__yhat_upper: 1.3798811980337082,
+    WestTexNewMexico: 1.305,
+  },
+  {
+    __timestamp: 1421020800000,
+    Boston__yhat: 1.5008792239446107,
+    Boston__yhat_lower: 1.3900408734935294,
+    Boston__yhat_upper: 1.6209717523914786,
+    Boston: 1.615,
+    California__yhat: 1.1257411477192287,
+    California__yhat_lower: 0.9647179126679808,
+    California__yhat_upper: 1.2856214776337003,
+    California: 1.13,
+    WestTexNewMexico__yhat: 1.211700721257458,
+    WestTexNewMexico__yhat_lower: 1.0512509758817796,
+    WestTexNewMexico__yhat_upper: 1.3838299538827643,
+    WestTexNewMexico: 1.255,
+  },
+  {
+    __timestamp: 1421625600000,
+    Boston__yhat: 1.493895763520492,
+    Boston__yhat_lower: 1.3819463100452443,
+    Boston__yhat_upper: 1.614560073797367,
+    Boston: 1.59,
+    California__yhat: 1.0914497359848156,
+    California__yhat_lower: 0.9309999613012108,
+    California__yhat_upper: 1.2413000315404008,
+    California: 1.18,
+    WestTexNewMexico__yhat: 1.208627046579019,
+    WestTexNewMexico__yhat_lower: 1.0443728779662684,
+    WestTexNewMexico__yhat_upper: 1.3675637830491076,
+    WestTexNewMexico: 1.215,
+  },
+  {
+    __timestamp: 1422230400000,
+    Boston__yhat: 1.5016078116606606,
+    Boston__yhat_lower: 1.3867245804741557,
+    Boston__yhat_upper: 1.614234955854214,
+    Boston: 1.5,
+    California__yhat: 1.0697859033873383,
+    California__yhat_lower: 0.9250294445931526,
+    California__yhat_upper: 1.227180419756037,
+    California: 0.98,
+    WestTexNewMexico__yhat: 1.1903524073209464,
+    WestTexNewMexico__yhat_lower: 1.0158621722285877,
+    WestTexNewMexico__yhat_upper: 1.3552685059028697,
+    WestTexNewMexico: 1.24,
+  },
+  {
+    __timestamp: 1422835200000,
+    Boston__yhat: 1.5159923617934186,
+    Boston__yhat_lower: 1.3970137282601371,
+    Boston__yhat_upper: 1.6308844178549995,
+    Boston: 1.475,
+    California__yhat: 1.0746946690720922,
+    California__yhat_lower: 0.9113788241318873,
+    California__yhat_upper: 1.2273689220316724,
+    California: 1.13,
+    WestTexNewMexico__yhat: 1.162418169193016,
+    WestTexNewMexico__yhat_lower: 0.984399666972796,
+    WestTexNewMexico__yhat_upper: 1.3286127921414361,
+    WestTexNewMexico: 1.19,
+  },
+  {
+    __timestamp: 1423440000000,
+    Boston__yhat: 1.525604106275286,
+    Boston__yhat_lower: 1.4091552054110317,
+    Boston__yhat_upper: 1.6398544651033324,
+    Boston: 1.555,
+    California__yhat: 1.0983484232374483,
+    California__yhat_lower: 0.9499667479813172,
+    California__yhat_upper: 1.2604622036877084,
+    California: 1.24,
+    WestTexNewMexico__yhat: 1.1407497573494716,
+    WestTexNewMexico__yhat_lower: 0.9682090338277108,
+    WestTexNewMexico__yhat_upper: 1.3110751375528853,
+    WestTexNewMexico: 1.24,
+  },
+  {
+    __timestamp: 1424044800000,
+    Boston__yhat: 1.5285159859188788,
+    Boston__yhat_lower: 1.4151325345500827,
+    Boston__yhat_upper: 1.63898403722097,
+    Boston: 1.485,
+    California__yhat: 1.1215587530856748,
+    California__yhat_lower: 0.9680608180357422,
+    California__yhat_upper: 1.282442960930767,
+    California: 1.185,
+    WestTexNewMexico__yhat: 1.1360040254613264,
+    WestTexNewMexico__yhat_lower: 0.963307750313048,
+    WestTexNewMexico__yhat_upper: 1.2986544671046583,
+    WestTexNewMexico: 1.28,
+  },
+  {
+    __timestamp: 1424649600000,
+    Boston__yhat: 1.5334822003771225,
+    Boston__yhat_lower: 1.4176345632105387,
+    Boston__yhat_upper: 1.6496071238192505,
+    Boston: 1.48,
+    California__yhat: 1.1336412205342397,
+    California__yhat_lower: 0.9743289540694136,
+    California__yhat_upper: 1.2898768461219847,
+    California: 0.995,
+    WestTexNewMexico__yhat: 1.1446754348884136,
+    WestTexNewMexico__yhat_lower: 0.986235125109336,
+    WestTexNewMexico__yhat_upper: 1.307986287217312,
+    WestTexNewMexico: 1.24,
+  },
+  {
+    __timestamp: 1425254400000,
+    Boston__yhat: 1.547848654545939,
+    Boston__yhat_lower: 1.4328177356803633,
+    Boston__yhat_upper: 1.673661661344583,
+    Boston: 1.54,
+    California__yhat: 1.1421270972002817,
+    California__yhat_lower: 0.9880212170643778,
+    California__yhat_upper: 1.298074311825913,
+    California: 1.22,
+    WestTexNewMexico__yhat: 1.1538926041448758,
+    WestTexNewMexico__yhat_lower: 1.0019767923899103,
+    WestTexNewMexico__yhat_upper: 1.3221026377048228,
+    WestTexNewMexico: 1.16,
+  },
+  {
+    __timestamp: 1425859200000,
+    Boston__yhat: 1.5675203083502125,
+    Boston__yhat_lower: 1.4543946077807537,
+    Boston__yhat_upper: 1.6864674764386627,
+    Boston: 1.62,
+    California__yhat: 1.1632572393543539,
+    California__yhat_lower: 0.9970086508003331,
+    California__yhat_upper: 1.3209871054747437,
+    California: 1.29,
+    WestTexNewMexico__yhat: 1.1530029605889838,
+    WestTexNewMexico__yhat_lower: 0.9729319698723828,
+    WestTexNewMexico__yhat_upper: 1.3054475293729533,
+    WestTexNewMexico: 1.285,
+  },
+  {
+    __timestamp: 1426464000000,
+    Boston__yhat: 1.581607931619551,
+    Boston__yhat_lower: 1.4723154031359578,
+    Boston__yhat_upper: 1.7069606387126863,
+    Boston: 1.56,
+    California__yhat: 1.2030769562029524,
+    California__yhat_lower: 1.04933598570031,
+    California__yhat_upper: 1.3591487662881023,
+    California: 1.18,
+    WestTexNewMexico__yhat: 1.1414541767825306,
+    WestTexNewMexico__yhat_lower: 0.9717441065782068,
+    WestTexNewMexico__yhat_upper: 1.312661843170456,
+    WestTexNewMexico: 1.345,
+  },
+  {
+    __timestamp: 1427068800000,
+    Boston__yhat: 1.5853316979769883,
+    Boston__yhat_lower: 1.4708451743058149,
+    Boston__yhat_upper: 1.7117728705026014,
+    Boston: 1.585,
+    California__yhat: 1.2479444775684796,
+    California__yhat_lower: 1.0837411336417548,
+    California__yhat_upper: 1.3998890149965297,
+    California: 1.315,
+    WestTexNewMexico__yhat: 1.1283059431234486,
+    WestTexNewMexico__yhat_lower: 0.9778619797162577,
+    WestTexNewMexico__yhat_upper: 1.2954488963192434,
+    WestTexNewMexico: 1.255,
+  },
+  {
+    __timestamp: 1427673600000,
+    Boston__yhat: 1.5841383828593085,
+    Boston__yhat_lower: 1.4654575751911438,
+    Boston__yhat_upper: 1.6946343035808373,
+    Boston: 1.59,
+    California__yhat: 1.2739437360014318,
+    California__yhat_lower: 1.1100282969104833,
+    California__yhat_upper: 1.428117476226516,
+    California: 1.32,
+    WestTexNewMexico__yhat: 1.1249371539002126,
+    WestTexNewMexico__yhat_lower: 0.9695967792994402,
+    WestTexNewMexico__yhat_upper: 1.287869970682996,
+    WestTexNewMexico: 1.28,
+  },
+  {
+    __timestamp: 1428278400000,
+    Boston__yhat: 1.5839751550296846,
+    Boston__yhat_lower: 1.4658964846078435,
+    Boston__yhat_upper: 1.710402200124056,
+    Boston: 1.56,
+    California__yhat: 1.2665706718822929,
+    California__yhat_lower: 1.1158333765771138,
+    California__yhat_upper: 1.4320483959058965,
+    California: 1.28,
+    WestTexNewMexico__yhat: 1.1355965911503207,
+    WestTexNewMexico__yhat_lower: 0.964066677858961,
+    WestTexNewMexico__yhat_upper: 1.3022575299852956,
+    WestTexNewMexico: 1.21,
+  },
+  {
+    __timestamp: 1428883200000,
+    Boston__yhat: 1.5816178634356794,
+    Boston__yhat_lower: 1.4715929905435854,
+    Boston__yhat_upper: 1.7003122219671367,
+    Boston: 1.545,
+    California__yhat: 1.232881524770783,
+    California__yhat_lower: 1.0767786935430315,
+    California__yhat_upper: 1.3959964303961667,
+    California: 1.285,
+    WestTexNewMexico__yhat: 1.1523828742682716,
+    WestTexNewMexico__yhat_lower: 0.9811195853500172,
+    WestTexNewMexico__yhat_upper: 1.3138046554765905,
+    WestTexNewMexico: 1.15,
+  },
+  {
+    __timestamp: 1429488000000,
+    Boston__yhat: 1.5693505553611033,
+    Boston__yhat_lower: 1.454366551073654,
+    Boston__yhat_upper: 1.672997430777775,
+    Boston: 1.57,
+    California__yhat: 1.1961960021745208,
+    California__yhat_lower: 1.0574856955397094,
+    California__yhat_upper: 1.3527191406913728,
+    California: 1.325,
+    WestTexNewMexico__yhat: 1.1605683040698191,
+    WestTexNewMexico__yhat_lower: 1.0031473604785308,
+    WestTexNewMexico__yhat_upper: 1.3131490159580719,
+    WestTexNewMexico: 1.33,
+  },
+  {
+    __timestamp: 1430092800000,
+    Boston__yhat: 1.548687090028952,
+    Boston__yhat_lower: 1.4345338808929986,
+    Boston__yhat_upper: 1.674291034018414,
+    Boston: 1.495,
+    California__yhat: 1.17944168965866,
+    California__yhat_lower: 1.0208437159576145,
+    California__yhat_upper: 1.3437648164186333,
+    California: 1.18,
+    WestTexNewMexico__yhat: 1.152452251304891,
+    WestTexNewMexico__yhat_lower: 0.9925163021235553,
+    WestTexNewMexico__yhat_upper: 1.33370469389031,
+    WestTexNewMexico: 1.125,
+  },
+  {
+    __timestamp: 1430697600000,
+    Boston__yhat: 1.5339945463021136,
+    Boston__yhat_lower: 1.4131803310322042,
+    Boston__yhat_upper: 1.6534068731295286,
+    Boston: 1.58,
+    California__yhat: 1.1914708975476587,
+    California__yhat_lower: 1.0346943811155895,
+    California__yhat_upper: 1.346918284211045,
+    California: 1.165,
+    WestTexNewMexico__yhat: 1.136951442350726,
+    WestTexNewMexico__yhat_lower: 0.9785853981941628,
+    WestTexNewMexico__yhat_upper: 1.305120499270747,
+    WestTexNewMexico: 1.07,
+  },
+  {
+    __timestamp: 1431302400000,
+    Boston__yhat: 1.538494530655746,
+    Boston__yhat_lower: 1.417157877783077,
+    Boston__yhat_upper: 1.6657402419552576,
+    Boston: 1.585,
+    California__yhat: 1.2250425993396363,
+    California__yhat_lower: 1.0694624006721893,
+    California__yhat_upper: 1.3779793141537178,
+    California: 1.285,
+    WestTexNewMexico__yhat: 1.131850140196041,
+    WestTexNewMexico__yhat_lower: 0.9693152036413223,
+    WestTexNewMexico__yhat_upper: 1.2969371429211514,
+    WestTexNewMexico: 1.06,
+  },
+  {
+    __timestamp: 1431907200000,
+    Boston__yhat: 1.5586586605892516,
+    Boston__yhat_lower: 1.4437718674345732,
+    Boston__yhat_upper: 1.678444300307212,
+    Boston: 1.54,
+    California__yhat: 1.2640228484312774,
+    California__yhat_lower: 1.105695580617842,
+    California__yhat_upper: 1.4262751320209555,
+    California: 1.3,
+    WestTexNewMexico__yhat: 1.14279691969869,
+    WestTexNewMexico__yhat_lower: 0.9744635833347896,
+    WestTexNewMexico__yhat_upper: 1.309843116203469,
+    WestTexNewMexico: 1.065,
+  },
+  {
+    __timestamp: 1432512000000,
+    Boston__yhat: 1.5775197465059267,
+    Boston__yhat_lower: 1.4598708798261923,
+    Boston__yhat_upper: 1.6911276338952719,
+    Boston: 1.6,
+    California__yhat: 1.292475578711032,
+    California__yhat_lower: 1.1228796890918014,
+    California__yhat_upper: 1.4471391733217347,
+    California: 1.24,
+    WestTexNewMexico__yhat: 1.151946670246945,
+    WestTexNewMexico__yhat_lower: 0.9787075088274869,
+    WestTexNewMexico__yhat_upper: 1.3257344034341332,
+    WestTexNewMexico: 1.065,
+  },
+  {
+    __timestamp: 1433116800000,
+    Boston__yhat: 1.5847361491556036,
+    Boston__yhat_lower: 1.469478725883583,
+    Boston__yhat_upper: 1.698200477547973,
+    Boston: 1.625,
+    California__yhat: 1.301640708602741,
+    California__yhat_lower: 1.1448194258091566,
+    California__yhat_upper: 1.4657411831360765,
+    California: 1.325,
+    WestTexNewMexico__yhat: 1.1344270549760207,
+    WestTexNewMexico__yhat_lower: 0.9628949633601395,
+    WestTexNewMexico__yhat_upper: 1.2999364461809975,
+    WestTexNewMexico: 1.08,
+  },
+  {
+    __timestamp: 1433721600000,
+    Boston__yhat: 1.588841301654564,
+    Boston__yhat_lower: 1.4701868286368829,
+    Boston__yhat_upper: 1.708276878629705,
+    Boston: 1.555,
+    California__yhat: 1.2945568932951903,
+    California__yhat_lower: 1.1357913193434988,
+    California__yhat_upper: 1.441658100122194,
+    California: 1.325,
+    WestTexNewMexico__yhat: 1.090609476160724,
+    WestTexNewMexico__yhat_lower: 0.9171628023326979,
+    WestTexNewMexico__yhat_upper: 1.2519104172461586,
+    WestTexNewMexico: 1.125,
+  },
+  {
+    __timestamp: 1434326400000,
+    Boston__yhat: 1.60467809761448,
+    Boston__yhat_lower: 1.4872087156545453,
+    Boston__yhat_upper: 1.7206390174307566,
+    Boston: 1.65,
+    California__yhat: 1.2866911289244536,
+    California__yhat_lower: 1.1223304657283866,
+    California__yhat_upper: 1.4489712765550424,
+    California: 1.38,
+    WestTexNewMexico__yhat: 1.058286202137859,
+    WestTexNewMexico__yhat_lower: 0.8983319008178635,
+    WestTexNewMexico__yhat_upper: 1.2230688588329341,
+    WestTexNewMexico: 1.2,
+  },
+  {
+    __timestamp: 1434931200000,
+    Boston__yhat: 1.6296561292532252,
+    Boston__yhat_lower: 1.5147117985377605,
+    Boston__yhat_upper: 1.7484553862428687,
+    Boston: 1.64,
+    California__yhat: 1.298704180420278,
+    California__yhat_lower: 1.143996831592798,
+    California__yhat_upper: 1.4569530963291766,
+    California: 1.385,
+    WestTexNewMexico__yhat: 1.0837741118769433,
+    WestTexNewMexico__yhat_lower: 0.9165400527844431,
+    WestTexNewMexico__yhat_upper: 1.2633713277285281,
+    WestTexNewMexico: 1.145,
+  },
+  {
+    __timestamp: 1435536000000,
+    Boston__yhat: 1.6387330700540754,
+    Boston__yhat_lower: 1.5214382052884348,
+    Boston__yhat_upper: 1.7593446818133576,
+    Boston: 1.7,
+    California__yhat: 1.3419159537936654,
+    California__yhat_lower: 1.1824389777530346,
+    California__yhat_upper: 1.5077615808876883,
+    California: 1.395,
+    WestTexNewMexico__yhat: 1.1753283438356257,
+    WestTexNewMexico__yhat_lower: 1.0084515427055218,
+    WestTexNewMexico__yhat_upper: 1.3411968014102083,
+    WestTexNewMexico: 1.18,
+  },
+  {
+    __timestamp: 1436140800000,
+    Boston__yhat: 1.6078378110129543,
+    Boston__yhat_lower: 1.4858780410049368,
+    Boston__yhat_upper: 1.7333942938670541,
+    Boston: 1.665,
+    California__yhat: 1.4064610022347392,
+    California__yhat_lower: 1.2518481325894115,
+    California__yhat_upper: 1.5631376401498112,
+    California: 1.465,
+    WestTexNewMexico__yhat: 1.2876812690769497,
+    WestTexNewMexico__yhat_lower: 1.118277996711148,
+    WestTexNewMexico__yhat_upper: 1.453601368173299,
+    WestTexNewMexico: 1.365,
+  },
+  {
+    __timestamp: 1436745600000,
+    Boston__yhat: 1.54126454151401,
+    Boston__yhat_lower: 1.4242640278872807,
+    Boston__yhat_upper: 1.658820938407199,
+    Boston: 1.615,
+    California__yhat: 1.4648637533773619,
+    California__yhat_lower: 1.3165708549095063,
+    California__yhat_upper: 1.6123722518242183,
+    California: 1.535,
+    WestTexNewMexico__yhat: 1.359084635413718,
+    WestTexNewMexico__yhat_lower: 1.1923924916510695,
+    WestTexNewMexico__yhat_upper: 1.5397046826260015,
+    WestTexNewMexico: 1.25,
+  },
+  {
+    __timestamp: 1437350400000,
+    Boston__yhat: 1.4716975989229104,
+    Boston__yhat_lower: 1.3478802335545248,
+    Boston__yhat_upper: 1.5897005348114144,
+    Boston: 1.65,
+    California__yhat: 1.492196708250474,
+    California__yhat_lower: 1.3281011466171584,
+    California__yhat_upper: 1.6482617063876424,
+    California: 1.53,
+    WestTexNewMexico__yhat: 1.3665720856468249,
+    WestTexNewMexico__yhat_lower: 1.1985870084342607,
+    WestTexNewMexico__yhat_upper: 1.540444302838635,
+    WestTexNewMexico: 1.325,
+  },
+  {
+    __timestamp: 1437955200000,
+    Boston__yhat: 1.4316465654883939,
+    Boston__yhat_lower: 1.3151590237205186,
+    Boston__yhat_upper: 1.5502363732881383,
+    Boston: 1.645,
+    California__yhat: 1.486878703643501,
+    California__yhat_lower: 1.3387136764087475,
+    California__yhat_upper: 1.6406538496379224,
+    California: 1.575,
+    WestTexNewMexico__yhat: 1.3430004296140337,
+    WestTexNewMexico__yhat_lower: 1.1696134333274417,
+    WestTexNewMexico__yhat_upper: 1.5143254675484394,
+    WestTexNewMexico: 1.345,
+  },
+  {
+    __timestamp: 1438560000000,
+    Boston__yhat: 1.4271527274427822,
+    Boston__yhat_lower: 1.3009869979033386,
+    Boston__yhat_upper: 1.5444571765505344,
+    Boston: 1.545,
+    California__yhat: 1.4721251850161223,
+    California__yhat_lower: 1.3130424764080704,
+    California__yhat_upper: 1.6322300582937983,
+    California: 1.565,
+    WestTexNewMexico__yhat: 1.3385023304664054,
+    WestTexNewMexico__yhat_lower: 1.169557000507694,
+    WestTexNewMexico__yhat_upper: 1.501423586440048,
+    WestTexNewMexico: 1.3,
+  },
+  {
+    __timestamp: 1439164800000,
+    Boston__yhat: 1.4407299749907534,
+    Boston__yhat_lower: 1.323436292855159,
+    Boston__yhat_upper: 1.5636100946562665,
+    Boston: 1.62,
+    California__yhat: 1.4747274927843579,
+    California__yhat_lower: 1.3090246017944651,
+    California__yhat_upper: 1.6212028571910875,
+    California: 1.535,
+    WestTexNewMexico__yhat: 1.369033029466056,
+    WestTexNewMexico__yhat_lower: 1.2063418855681307,
+    WestTexNewMexico__yhat_upper: 1.5410908830393701,
+    WestTexNewMexico: 1.215,
+  },
+  {
+    __timestamp: 1439769600000,
+    Boston__yhat: 1.4558141240561584,
+    Boston__yhat_lower: 1.3384500860436346,
+    Boston__yhat_upper: 1.5593449899412495,
+    Boston: 1.535,
+    California__yhat: 1.5004588541583503,
+    California__yhat_lower: 1.3525771130800601,
+    California__yhat_upper: 1.6557709189818204,
+    California: 1.515,
+    WestTexNewMexico__yhat: 1.4078705349829708,
+    WestTexNewMexico__yhat_lower: 1.2465576754469605,
+    WestTexNewMexico__yhat_upper: 1.5765990094113416,
+    WestTexNewMexico: 1.205,
+  },
+  {
+    __timestamp: 1440374400000,
+    Boston__yhat: 1.4714837581619955,
+    Boston__yhat_lower: 1.3542849882799493,
+    Boston__yhat_upper: 1.587250053083524,
+    Boston: 1.58,
+    California__yhat: 1.5302322554730527,
+    California__yhat_lower: 1.3712263333300627,
+    California__yhat_upper: 1.6766472256899916,
+    California: 1.53,
+    WestTexNewMexico__yhat: 1.425931627994101,
+    WestTexNewMexico__yhat_lower: 1.2620778981321579,
+    WestTexNewMexico__yhat_upper: 1.5920830784029816,
+    WestTexNewMexico: 1.255,
+  },
+  {
+    __timestamp: 1440979200000,
+    Boston__yhat: 1.491444403016728,
+    Boston__yhat_lower: 1.3719274262306433,
+    Boston__yhat_upper: 1.6081603165448515,
+    Boston: 1.54,
+    California__yhat: 1.5411777460499874,
+    California__yhat_lower: 1.3904365117687372,
+    California__yhat_upper: 1.694546785101698,
+    California: 1.54,
+    WestTexNewMexico__yhat: 1.4320134472163049,
+    WestTexNewMexico__yhat_lower: 1.273365593253299,
+    WestTexNewMexico__yhat_upper: 1.5931974288222444,
+    WestTexNewMexico: 1.29,
+  },
+  {
+    __timestamp: 1441584000000,
+    Boston__yhat: 1.5051820756139245,
+    Boston__yhat_lower: 1.3835553327078385,
+    Boston__yhat_upper: 1.6240589221993718,
+    Boston: 1.515,
+    California__yhat: 1.5313765368007273,
+    California__yhat_lower: 1.3681294180618269,
+    California__yhat_upper: 1.6892153479755334,
+    California: 1.55,
+    WestTexNewMexico__yhat: 1.4638751687570226,
+    WestTexNewMexico__yhat_lower: 1.2864210645323784,
+    WestTexNewMexico__yhat_upper: 1.6187694320540935,
+    WestTexNewMexico: 1.37,
+  },
+  {
+    __timestamp: 1442188800000,
+    Boston__yhat: 1.4894325587299742,
+    Boston__yhat_lower: 1.3727869467332703,
+    Boston__yhat_upper: 1.6084226338870418,
+    Boston: 1.58,
+    California__yhat: 1.522640140138669,
+    California__yhat_lower: 1.3734557489282102,
+    California__yhat_upper: 1.6743091049728624,
+    California: 1.53,
+    WestTexNewMexico__yhat: 1.5400751405380166,
+    WestTexNewMexico__yhat_lower: 1.3774375535282375,
+    WestTexNewMexico__yhat_upper: 1.723050870346822,
+    WestTexNewMexico: 1.485,
+  },
+  {
+    __timestamp: 1442793600000,
+    Boston__yhat: 1.4322083667601824,
+    Boston__yhat_lower: 1.3101390870258312,
+    Boston__yhat_upper: 1.5571183048764867,
+    Boston: 1.535,
+    California__yhat: 1.5378925480202739,
+    California__yhat_lower: 1.3886019658089772,
+    California__yhat_upper: 1.6978496884233474,
+    California: 1.445,
+    WestTexNewMexico__yhat: 1.6287478669084643,
+    WestTexNewMexico__yhat_lower: 1.478287058860101,
+    WestTexNewMexico__yhat_upper: 1.795633152002224,
+    WestTexNewMexico: 1.275,
+  },
+  {
+    __timestamp: 1443398400000,
+    Boston__yhat: 1.351816621968265,
+    Boston__yhat_lower: 1.2376540378452352,
+    Boston__yhat_upper: 1.4729299390946764,
+    Boston: 1.175,
+    California__yhat: 1.5759661525657334,
+    California__yhat_lower: 1.4231456717732236,
+    California__yhat_upper: 1.733586091013307,
+    California: 1.51,
+    WestTexNewMexico__yhat: 1.6721603417638533,
+    WestTexNewMexico__yhat_lower: 1.508503941330916,
+    WestTexNewMexico__yhat_upper: 1.8462459308936394,
+    WestTexNewMexico: 1.43,
+  },
+  {
+    __timestamp: 1444003200000,
+    Boston__yhat: 1.286486461072129,
+    Boston__yhat_lower: 1.1680220690052265,
+    Boston__yhat_upper: 1.4035977590666622,
+    Boston: 1.2,
+    California__yhat: 1.6097139361369517,
+    California__yhat_lower: 1.4449082988736466,
+    California__yhat_upper: 1.7603053272180196,
+    California: 1.575,
+    WestTexNewMexico__yhat: 1.639290251177639,
+    WestTexNewMexico__yhat_lower: 1.473164681029519,
+    WestTexNewMexico__yhat_upper: 1.8064957246654998,
+    WestTexNewMexico: 1.47,
+  },
+  {
+    __timestamp: 1444608000000,
+    Boston__yhat: 1.2630051620190224,
+    Boston__yhat_lower: 1.1467376145041555,
+    Boston__yhat_upper: 1.377446221614078,
+    Boston: 1.1,
+    California__yhat: 1.6098713751752662,
+    California__yhat_lower: 1.4600843147210683,
+    California__yhat_upper: 1.763955521152191,
+    California: 1.54,
+    WestTexNewMexico__yhat: 1.5551952931382806,
+    WestTexNewMexico__yhat_lower: 1.3962129897996904,
+    WestTexNewMexico__yhat_upper: 1.726357454658797,
+    WestTexNewMexico: 1.415,
+  },
+  {
+    __timestamp: 1445212800000,
+    Boston__yhat: 1.276278781347193,
+    Boston__yhat_lower: 1.1580450205542776,
+    Boston__yhat_upper: 1.3920651070329326,
+    Boston: 1.145,
+    California__yhat: 1.571148844853862,
+    California__yhat_lower: 1.4083378535887405,
+    California__yhat_upper: 1.733966017882931,
+    California: 1.38,
+    WestTexNewMexico__yhat: 1.4722932415830279,
+    WestTexNewMexico__yhat_lower: 1.3050378331324088,
+    WestTexNewMexico__yhat_upper: 1.6418924805303612,
+    WestTexNewMexico: 1.41,
+  },
+  {
+    __timestamp: 1445817600000,
+    Boston__yhat: 1.2991073481696098,
+    Boston__yhat_lower: 1.1878452793959065,
+    Boston__yhat_upper: 1.424293199867907,
+    Boston: 1.18,
+    California__yhat: 1.5150187954091354,
+    California__yhat_lower: 1.3476318997481405,
+    California__yhat_upper: 1.677657858675358,
+    California: 1.275,
+    WestTexNewMexico__yhat: 1.4199561158957161,
+    WestTexNewMexico__yhat_lower: 1.263080331712721,
+    WestTexNewMexico__yhat_upper: 1.5718996342613911,
+    WestTexNewMexico: 1.36,
+  },
+  {
+    __timestamp: 1446422400000,
+    Boston__yhat: 1.308880887797368,
+    Boston__yhat_lower: 1.1862924735231104,
+    Boston__yhat_upper: 1.4168025454442827,
+    Boston: 1.13,
+    California__yhat: 1.467196455991084,
+    California__yhat_lower: 1.31469058277437,
+    California__yhat_upper: 1.6266140472626818,
+    California: 1.32,
+    WestTexNewMexico__yhat: 1.385809818488925,
+    WestTexNewMexico__yhat_lower: 1.2178231659097734,
+    WestTexNewMexico__yhat_upper: 1.5529990050614997,
+    WestTexNewMexico: 1.37,
+  },
+  {
+    __timestamp: 1447027200000,
+    Boston__yhat: 1.3030202507313675,
+    Boston__yhat_lower: 1.1871331759675903,
+    Boston__yhat_upper: 1.4220034213332513,
+    Boston: 1.1,
+    California__yhat: 1.432710953584346,
+    California__yhat_lower: 1.2824951329265597,
+    California__yhat_upper: 1.586661603708675,
+    California: 1.21,
+    WestTexNewMexico__yhat: 1.3404954026443072,
+    WestTexNewMexico__yhat_lower: 1.1821733202392815,
+    WestTexNewMexico__yhat_upper: 1.5011656305912942,
+    WestTexNewMexico: 1.315,
+  },
+  {
+    __timestamp: 1447632000000,
+    Boston__yhat: 1.2921088188147662,
+    Boston__yhat_lower: 1.1728345442847379,
+    Boston__yhat_upper: 1.4033407585022522,
+    Boston: 1.17,
+    California__yhat: 1.3931387239731783,
+    California__yhat_lower: 1.2432214745880616,
+    California__yhat_upper: 1.5498822030297323,
+    California: 1.26,
+    WestTexNewMexico__yhat: 1.276766317307663,
+    WestTexNewMexico__yhat_lower: 1.0999844956570386,
+    WestTexNewMexico__yhat_upper: 1.446687228788756,
+    WestTexNewMexico: 1.375,
+  },
+  {
+    __timestamp: 1448236800000,
+    Boston__yhat: 1.2844900175902454,
+    Boston__yhat_lower: 1.1751725419028316,
+    Boston__yhat_upper: 1.4071918419152338,
+    Boston: 1.235,
+    California__yhat: 1.3280733170736323,
+    California__yhat_lower: 1.168686173676362,
+    California__yhat_upper: 1.4828349526176714,
+    California: 1.33,
+    WestTexNewMexico__yhat: 1.2150153206911025,
+    WestTexNewMexico__yhat_lower: 1.0575514264315589,
+    WestTexNewMexico__yhat_upper: 1.3738174939464802,
+    WestTexNewMexico: 1.445,
+  },
+  {
+    __timestamp: 1448841600000,
+    Boston__yhat: 1.2805251906155837,
+    Boston__yhat_lower: 1.1707757707707065,
+    Boston__yhat_upper: 1.3999312395395147,
+    Boston: 1.155,
+    California__yhat: 1.2392981370779044,
+    California__yhat_lower: 1.0733806154601595,
+    California__yhat_upper: 1.4014509402239486,
+    California: 1.13,
+    WestTexNewMexico__yhat: 1.1770436607980383,
+    WestTexNewMexico__yhat_lower: 0.993583553273554,
+    WestTexNewMexico__yhat_upper: 1.333422820891247,
+    WestTexNewMexico: 0.74,
+  },
+  {
+    __timestamp: 1449446400000,
+    Boston__yhat: 1.279267142574869,
+    Boston__yhat_lower: 1.1585705827510129,
+    Boston__yhat_upper: 1.3983536869495787,
+    Boston: 1.28,
+    California__yhat: 1.1539951545645342,
+    California__yhat_lower: 0.9889501465743559,
+    California__yhat_upper: 1.3053289212843744,
+    California: 1.13,
+    WestTexNewMexico__yhat: 1.162380614252356,
+    WestTexNewMexico__yhat_lower: 0.9965272411245537,
+    WestTexNewMexico__yhat_upper: 1.3253180367221955,
+    WestTexNewMexico: 1.29,
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/stories/Timeseries.stories.tsx

@@ -0,0 +1,266 @@
+/*
+ * 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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  EchartsTimeseriesChartPlugin,
+  TimeseriesTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from './data';
+import negativeNumData from './negativeNumData';
+import confbandData from './confbandData';
+import stackWithNullsData from './stackWithNulls';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsTimeseriesChartPlugin()
+  .configure({ key: 'echarts-timeseries' })
+  .register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts-timeseries',
+  TimeseriesTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/SeriesChart',
+  decorators: [withResizableChartDemo],
+};
+
+export const Timeseries = ({
+  forecastEnabled,
+  seriesType,
+  logAxis,
+  stack,
+  showValue,
+  onlyTotal,
+  percentageThreshold,
+  area,
+  markerEnabled,
+  markerSize,
+  minorSplitLine,
+  opacity,
+  zoomable,
+  width,
+  height,
+}: {
+  forecastEnabled: boolean;
+  seriesType: string;
+  logAxis: boolean;
+  stack: boolean;
+  showValue: boolean;
+  onlyTotal: boolean;
+  percentageThreshold: number;
+  area: boolean;
+  markerEnabled: boolean;
+  markerSize: number;
+  minorSplitLine: boolean;
+  opacity: number;
+  zoomable: boolean;
+  width: number;
+  height: number;
+}) => {
+  const queryData = data
+    .map(row =>
+      forecastEnabled
+        ? row
+        : {
+            // eslint-disable-next-line no-underscore-dangle
+            __timestamp: row.__timestamp,
+            Boston: row.Boston,
+            California: row.California,
+            WestTexNewMexico: row.WestTexNewMexico,
+          },
+    )
+    .filter(row => forecastEnabled || !!row.Boston);
+  return (
+    <SuperChart
+      chartType="echarts-timeseries"
+      width={width}
+      height={height}
+      queriesData={[
+        { data: queryData, colnames: ['__timestamp'], coltypes: [2] },
+      ]}
+      formData={{
+        forecastEnabled,
+        color_scheme: 'supersetColors',
+        seriesType,
+        logAxis,
+        y_axis_format: 'SMART_NUMBER',
+        stack,
+        show_value: showValue,
+        only_total: onlyTotal,
+        percentage_threshold: percentageThreshold,
+        area,
+        markerEnabled,
+        markerSize,
+        minorSplitLine,
+        opacity,
+        zoomable,
+        x_axis: '__timestamp',
+      }}
+    />
+  );
+};
+
+Timeseries.args = {
+  forecastEnabled: true,
+  seriesType: 'line',
+  logAxis: false,
+  stack: false,
+  showValue: false,
+  onlyTotal: false,
+  percentageThreshold: 0,
+  area: false,
+  markerEnabled: false,
+  markerSize: 6,
+  minorSplitLine: false,
+  opacity: 0.2,
+  zoomable: false,
+};
+
+Timeseries.argTypes = {
+  forecastEnabled: { control: 'boolean' },
+  seriesType: {
+    control: 'select',
+    options: ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
+  },
+  logAxis: { control: 'boolean' },
+  stack: { control: 'boolean' },
+  showValue: { control: 'boolean' },
+  onlyTotal: { control: 'boolean' },
+  percentageThreshold: { control: 'number' },
+  area: { control: 'boolean' },
+  markerEnabled: { control: 'boolean' },
+  markerSize: { control: 'number' },
+  minorSplitLine: { control: 'boolean' },
+  opacity: { control: 'number' },
+  zoomable: { control: 'boolean' },
+};
+
+export const WithNegativeNumbers = ({
+  seriesType,
+  stack,
+  onlyTotal,
+  orientation,
+  width,
+  height,
+}: {
+  seriesType: string;
+  stack: boolean;
+  onlyTotal: boolean;
+  orientation: string;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="echarts-timeseries"
+    width={width}
+    height={height}
+    queriesData={[
+      { data: negativeNumData, colnames: ['__timestamp'], coltypes: [2] },
+    ]}
+    formData={{
+      color_scheme: 'supersetColors',
+      seriesType,
+      y_axis_format: '$,.2f',
+      stack,
+      show_value: true,
+      show_legend: true,
+      only_total: onlyTotal,
+      orientation,
+      x_axis: '__timestamp',
+    }}
+  />
+);
+
+WithNegativeNumbers.args = {
+  seriesType: 'line',
+  stack: true,
+  onlyTotal: true,
+  orientation: 'vertical',
+};
+WithNegativeNumbers.argTypes = {
+  seriesType: {
+    control: 'select',
+    options: ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
+  },
+  stack: { control: 'boolean' },
+  onlyTotal: { control: 'boolean' },
+  orientation: { control: 'select', options: ['vertical', 'horizontal'] },
+};
+
+export const ConfidenceBand = ({
+  width,
+  height,
+}: {
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="echarts-timeseries"
+    width={width}
+    height={height}
+    queriesData={[
+      {
+        data: confbandData,
+        colnames: [
+          'ds',
+          'SUM(num)',
+          'SUM(num)__yhat_lower',
+          'SUM(num)__yhat_upper',
+        ],
+        coltypes: [2, 0, 0, 0],
+      },
+    ]}
+    formData={{
+      color_scheme: 'supersetColors',
+      series_type: 'line',
+      x_axis_time_format: 'smart_date',
+      x_axis: 'ds',
+    }}
+  />
+);
+
+export const StackWithNulls = ({
+  width,
+  height,
+}: {
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="echarts-timeseries"
+    width={width}
+    height={height}
+    queriesData={[
+      {
+        data: stackWithNullsData,
+        colnames: ['ds', '1', '2'],
+        coltypes: [2, 0, 0],
+      },
+    ]}
+    formData={{
+      color_scheme: 'supersetColors',
+      series_type: 'bar',
+      stack: true,
+      x_axis_time_format: 'smart_date',
+      x_axis: 'ds',
+    }}
+  />
+);

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

@@ -0,0 +1,329 @@
+/*
+ * 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 [
+  {
+    ds: -157766400000,
+    'SUM(num)': 173161,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: -126230400000,
+    'SUM(num)': 173777,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: -94694400000,
+    'SUM(num)': 178221,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: -63158400000,
+    'SUM(num)': 176779,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: -31536000000,
+    'SUM(num)': 184113,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 0,
+    'SUM(num)': 188343,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 31536000000,
+    'SUM(num)': 178441,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 63072000000,
+    'SUM(num)': 169507,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 94694400000,
+    'SUM(num)': 156783,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 126230400000,
+    'SUM(num)': 157434,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 157766400000,
+    'SUM(num)': 153606,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 189302400000,
+    'SUM(num)': 150937,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 220924800000,
+    'SUM(num)': 154361,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 252460800000,
+    'SUM(num)': 154515,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 283996800000,
+    'SUM(num)': 159885,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 315532800000,
+    'SUM(num)': 159087,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 347155200000,
+    'SUM(num)': 159061,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 378691200000,
+    'SUM(num)': 167242,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 410227200000,
+    'SUM(num)': 165944,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 441763200000,
+    'SUM(num)': 165662,
+    'SUM(num)__yhat': null,
+    'SUM(num)__yhat_lower': null,
+    'SUM(num)__yhat_upper': null,
+  },
+  {
+    ds: 473385600000,
+    'SUM(num)': 162578,
+    'SUM(num)__yhat': 162578,
+    'SUM(num)__yhat_lower': 162578,
+    'SUM(num)__yhat_upper': 162578,
+  },
+  {
+    ds: 504921600000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 157613,
+    'SUM(num)__yhat_lower': 147613,
+    'SUM(num)__yhat_upper': 167613,
+  },
+  {
+    ds: 536457600000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 154580,
+    'SUM(num)__yhat_lower': 134580,
+    'SUM(num)__yhat_upper': 174580,
+  },
+  {
+    ds: 567993600000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 152134,
+    'SUM(num)__yhat_lower': 122134,
+    'SUM(num)__yhat_upper': 182134,
+  },
+  {
+    ds: 599616000000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 153577,
+    'SUM(num)__yhat_lower': 113577,
+    'SUM(num)__yhat_upper': 193577,
+  },
+  {
+    ds: 631152000000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 151121,
+    'SUM(num)__yhat_lower': 101121,
+    'SUM(num)__yhat_upper': 201121,
+  },
+  {
+    ds: 662688000000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 138102,
+    'SUM(num)__yhat_lower': 78102,
+    'SUM(num)__yhat_upper': 208102,
+  },
+  {
+    ds: 694224000000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 125030,
+    'SUM(num)__yhat_lower': 45030,
+    'SUM(num)__yhat_upper': 205030,
+  },
+  {
+    ds: 725846400000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 114647,
+    'SUM(num)__yhat_lower': 24647,
+    'SUM(num)__yhat_upper': 204647,
+  },
+  {
+    ds: 757382400000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 103968,
+    'SUM(num)__yhat_lower': 13968,
+    'SUM(num)__yhat_upper': 193968,
+  },
+  {
+    ds: 788918400000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 97006,
+    'SUM(num)__yhat_lower': 7006,
+    'SUM(num)__yhat_upper': 187006,
+  },
+  {
+    ds: 820454400000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 92213,
+    'SUM(num)__yhat_lower': 2213,
+    'SUM(num)__yhat_upper': 182213,
+  },
+  {
+    ds: 852076800000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 88462,
+    'SUM(num)__yhat_lower': -1538,
+    'SUM(num)__yhat_upper': 178462,
+  },
+  {
+    ds: 883612800000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 84424,
+    'SUM(num)__yhat_lower': -5576,
+    'SUM(num)__yhat_upper': 174424,
+  },
+  {
+    ds: 915148800000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 79787,
+    'SUM(num)__yhat_lower': -10213,
+    'SUM(num)__yhat_upper': 169787,
+  },
+  {
+    ds: 946684800000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 76610,
+    'SUM(num)__yhat_lower': -13390,
+    'SUM(num)__yhat_upper': 166610,
+  },
+  {
+    ds: 978307200000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 72073,
+    'SUM(num)__yhat_lower': -17927,
+    'SUM(num)__yhat_upper': 162073,
+  },
+  {
+    ds: 1009843200000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 68487,
+    'SUM(num)__yhat_lower': -21513,
+    'SUM(num)__yhat_upper': 158487,
+  },
+  {
+    ds: 1041379200000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 66381,
+    'SUM(num)__yhat_lower': -23619,
+    'SUM(num)__yhat_upper': 156381,
+  },
+  {
+    ds: 1072915200000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 63472,
+    'SUM(num)__yhat_lower': -26528,
+    'SUM(num)__yhat_upper': 153472,
+  },
+  {
+    ds: 1104537600000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 60885,
+    'SUM(num)__yhat_lower': -29115,
+    'SUM(num)__yhat_upper': 150885,
+  },
+  {
+    ds: 1136073600000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 59682,
+    'SUM(num)__yhat_lower': -30318,
+    'SUM(num)__yhat_upper': 149682,
+  },
+  {
+    ds: 1167609600000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 59191,
+    'SUM(num)__yhat_lower': -30809,
+    'SUM(num)__yhat_upper': 149191,
+  },
+  {
+    ds: 1199145600000,
+    'SUM(num)': null,
+    'SUM(num)__yhat': 54091,
+    'SUM(num)__yhat_lower': -35909,
+    'SUM(num)__yhat_upper': 144091,
+  },
+];

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

@@ -0,0 +1,111 @@
+/*
+ * 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 [
+  {
+    __timestamp: 1619827200000,
+    Boston: -0.88,
+    NewYork: null,
+    Washington: -0.3,
+    JerseyCity: -3.05,
+    Denver: -8.25,
+    SF: -0.13,
+  },
+  {
+    __timestamp: 1622505600000,
+    Boston: -0.81,
+    NewYork: null,
+    Washington: -0.29,
+    JerseyCity: -3.54,
+    Denver: -13.4,
+    SF: -0.12,
+  },
+  {
+    __timestamp: 1625097600000,
+    Boston: 0.91,
+    NewYork: null,
+    Washington: 0.25,
+    JerseyCity: 7.17,
+    Denver: 7.69,
+    SF: 0.05,
+  },
+  {
+    __timestamp: 1627776000000,
+    Boston: -1.05,
+    NewYork: -1.04,
+    Washington: -0.19,
+    JerseyCity: -8.99,
+    Denver: -7.99,
+    SF: -0.01,
+  },
+  {
+    __timestamp: 1630454400000,
+    Boston: -0.92,
+    NewYork: -1.09,
+    Washington: -0.17,
+    JerseyCity: -8.75,
+    Denver: -7.55,
+    SF: -0.01,
+  },
+  {
+    __timestamp: 1633046400000,
+    Boston: 0.79,
+    NewYork: -0.85,
+    Washington: 0.13,
+    JerseyCity: 12.59,
+    Denver: 3.34,
+    SF: -0.05,
+  },
+  {
+    __timestamp: 1635724800000,
+    Boston: 0.72,
+    NewYork: 0.54,
+    Washington: 0.15,
+    JerseyCity: 11.03,
+    Denver: 7.24,
+    SF: -0.14,
+  },
+  {
+    __timestamp: 1638316800000,
+    Boston: 0.61,
+    NewYork: 0.73,
+    Washington: 0.15,
+    JerseyCity: 13.45,
+    Denver: 5.98,
+    SF: -0.22,
+  },
+  {
+    __timestamp: 1640995200000,
+    Boston: 0.51,
+    NewYork: 1.8,
+    Washington: 0.15,
+    JerseyCity: 12.96,
+    Denver: 3.22,
+    SF: -0.02,
+  },
+  {
+    __timestamp: 1643673600000,
+    Boston: -0.47,
+    NewYork: null,
+    Washington: -0.18,
+    JerseyCity: -14.27,
+    Denver: -6.24,
+    SF: -0.04,
+  },
+];

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

@@ -0,0 +1,36 @@
+/*
+ * 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 [
+  {
+    ds: 1293840000000,
+    '1': 2,
+    '2': 1,
+  },
+  {
+    ds: 1325376000000,
+    '1': null,
+    '2': null,
+  },
+  {
+    ds: 1356998400000,
+    '1': null,
+    '2': 1,
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Tree/stories/Tree.stories.tsx

@@ -0,0 +1,129 @@
+/*
+ * 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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  EchartsTreeChartPlugin,
+  TreeTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from './data';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsTreeChartPlugin().configure({ key: 'echarts-tree' }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts-tree',
+  TreeTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Tree',
+  decorators: [withResizableChartDemo],
+  args: {
+    colorScheme: 'bnbColors',
+    layout: 'orthogonal',
+    orient: 'LR',
+    symbol: 'circle',
+    symbolSize: 7,
+    roam: true,
+  },
+  argTypes: {
+    colorScheme: {
+      control: 'select',
+      options: [
+        'supersetColors',
+        'd3Category10',
+        'bnbColors',
+        'googleCategory20c',
+      ],
+    },
+    layout: {
+      control: 'select',
+      options: ['orthogonal', 'radial'],
+      description: 'Layout type: orthogonal (rectangular) or radial (circular)',
+    },
+    orient: {
+      control: 'select',
+      options: ['LR', 'RL', 'TB', 'BT'],
+      description:
+        'Orientation: Left-Right, Right-Left, Top-Bottom, Bottom-Top',
+    },
+    symbol: {
+      control: 'select',
+      options: [
+        'emptyCircle',
+        'circle',
+        'rect',
+        'triangle',
+        'diamond',
+        'pin',
+        'arrow',
+      ],
+    },
+    symbolSize: {
+      control: { type: 'range', min: 5, max: 30, step: 1 },
+    },
+    roam: {
+      control: 'boolean',
+      description: 'Enable zoom and pan',
+    },
+  },
+};
+
+export const Tree = ({
+  colorScheme,
+  layout,
+  orient,
+  symbol,
+  symbolSize,
+  roam,
+  width,
+  height,
+}: {
+  colorScheme: string;
+  layout: string;
+  orient: string;
+  symbol: string;
+  symbolSize: number;
+  roam: boolean;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="echarts-tree"
+    width={width}
+    height={height}
+    queriesData={[{ data }]}
+    formData={{
+      color_scheme: colorScheme,
+      datasource: '3__table',
+      granularity_sqla: 'ds',
+      metric: 'count',
+      id: 'id_column',
+      root_node_id: '1',
+      parent: 'parent_column',
+      name: 'name_column',
+      layout,
+      orient,
+      symbol,
+      symbol_size: symbolSize,
+      roam,
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/Tree/stories/data.ts

@@ -0,0 +1,123 @@
+/*
+ * 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 [
+  {
+    id_column: '1',
+    parent_column: null,
+    name_column: 'root',
+    count: 10,
+  },
+  {
+    id_column: '2',
+    parent_column: '1',
+    name_column: 'software',
+    count: 10,
+  },
+  {
+    id_column: '3',
+    parent_column: '1',
+    name_column: 'hardware',
+    count: 10,
+  },
+  {
+    id_column: '4',
+    parent_column: '2',
+    name_column: 'freeware',
+    count: 10,
+  },
+  {
+    id_column: '5',
+    parent_column: '2',
+    name_column: 'shareware',
+    count: 10,
+  },
+  {
+    id_column: '6',
+    parent_column: '2',
+    name_column: 'opensource',
+    count: 10,
+  },
+  {
+    id_column: '7',
+    parent_column: '3',
+    name_column: 'computer',
+    count: 10,
+  },
+  {
+    id_column: '8',
+    parent_column: '3',
+    name_column: 'cpu',
+    count: 10,
+  },
+  {
+    id_column: '9',
+    parent_column: '3',
+    name_column: 'mouse',
+    count: 10,
+  },
+  {
+    id_column: '10',
+    parent_column: '3',
+    name_column: 'keyboard',
+    count: 10,
+  },
+  {
+    id_column: '11',
+    parent_column: '8',
+    name_column: 'intel',
+    count: 10,
+  },
+  {
+    id_column: '12',
+    parent_column: '8',
+    name_column: 'ryzen',
+    count: 10,
+  },
+  {
+    id_column: '13',
+    parent_column: '9',
+    name_column: 'razor',
+    count: 10,
+  },
+  {
+    id_column: '14',
+    parent_column: '10',
+    name_column: 'Wired',
+    count: 10,
+  },
+  {
+    id_column: '15',
+    parent_column: '10',
+    name_column: 'Wireless',
+    count: 10,
+  },
+  {
+    id_column: '16',
+    parent_column: '10',
+    name_column: 'Ergonomic',
+    count: 10,
+  },
+  {
+    id_column: '17',
+    parent_column: '10',
+    name_column: 'Cherry mx',
+    count: 10,
+  },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/stories/Treemap.stories.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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  EchartsTreemapChartPlugin,
+  TreemapTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from './data';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsTreemapChartPlugin()
+  .configure({ key: 'echarts-treemap' })
+  .register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts-treemap',
+  TreemapTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Treemap',
+  decorators: [withResizableChartDemo],
+};
+
+export const Treemap = ({
+  showLabels,
+  showUpperLabels,
+  labelType,
+  width,
+  height,
+}: {
+  showLabels: boolean;
+  showUpperLabels: boolean;
+  labelType: string;
+  width: number;
+  height: number;
+}) => (
+  <SuperChart
+    chartType="echarts-treemap"
+    width={width}
+    height={height}
+    queriesData={[{ data }]}
+    formData={{
+      colorScheme: 'supersetColors',
+      groupby: ['genre'],
+      metric: 'count',
+      showLabels,
+      showUpperLabels,
+      labelType,
+    }}
+  />
+);
+
+Treemap.args = {
+  showLabels: true,
+  showUpperLabels: true,
+  labelType: 'key_value',
+};
+
+Treemap.argTypes = {
+  showLabels: { control: 'boolean' },
+  showUpperLabels: { control: 'boolean' },
+  labelType: {
+    control: 'select',
+    options: ['key', 'value', 'key_value'],
+  },
+};

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/stories/data.ts

@@ -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.
+ */
+
+export default [
+  {
+    genre: 'Action',
+    count: 3315,
+  },
+  {
+    genre: 'Adventure',
+    count: 1286,
+  },
+  {
+    genre: 'Fighting',
+    count: 848,
+  },
+  {
+    genre: 'Misc',
+    count: 1739,
+  },
+  {
+    genre: 'Platform',
+    count: 886,
+  },
+  {
+    genre: 'Puzzle',
+    count: 582,
+  },
+  {
+    genre: 'Racing',
+    count: 1249,
+  },
+  {
+    genre: 'Role-Playing',
+    count: 1487,
+  },
+  {
+    genre: 'Shooter',
+    count: 1310,
+  },
+  {
+    genre: 'Simulation',
+    count: 866,
+  },
+  {
+    genre: 'Sports',
+    count: 2346,
+  },
+  {
+    genre: 'Strategy',
+    count: 681,
+  },
+];

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

@@ -0,0 +1,111 @@
+/*
+ * 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 {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
+import {
+  EchartsWaterfallChartPlugin,
+  WaterfallTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from './data';
+import { withResizableChartDemo } from '@storybook-shared';
+
+new EchartsWaterfallChartPlugin()
+  .configure({ key: VizType.Waterfall })
+  .register();
+
+getChartTransformPropsRegistry().registerValue(
+  VizType.Waterfall,
+  WaterfallTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Waterfall',
+  decorators: [withResizableChartDemo],
+  args: {
+    xTicksLayout: '45°',
+    showLegend: true,
+    showValue: true,
+    richTooltip: true,
+    yAxisFormat: 'SMART_NUMBER',
+  },
+  argTypes: {
+    xTicksLayout: {
+      control: 'select',
+      options: ['auto', 'flat', '45°', '90°', 'staggered'],
+    },
+    showLegend: { control: 'boolean' },
+    showValue: { control: 'boolean' },
+    richTooltip: { control: 'boolean' },
+    yAxisFormat: {
+      control: 'select',
+      options: ['SMART_NUMBER', '.2f', '.0%', '$,.2f', '.3s', ',d'],
+    },
+  },
+};
+
+export const Waterfall = ({
+  width,
+  height,
+  xTicksLayout,
+  showLegend,
+  showValue,
+  richTooltip,
+  yAxisFormat,
+}: {
+  width: number;
+  height: number;
+  xTicksLayout: string;
+  showLegend: boolean;
+  showValue: boolean;
+  richTooltip: boolean;
+  yAxisFormat: string;
+}) => (
+  <SuperChart
+    chartType={VizType.Waterfall}
+    width={width}
+    height={height}
+    queriesData={[{ data }]}
+    formData={{
+      metric: `SUM(decomp_volume)`,
+      columns: 'due_to_group',
+      series: 'period',
+      x_ticks_layout: xTicksLayout,
+      show_legend: showLegend,
+      show_value: showValue,
+      rich_tooltip: richTooltip,
+      y_axis_format: yAxisFormat,
+      adhocFilters: [
+        {
+          clause: 'WHERE',
+          comparator: '0',
+          expressionType: 'SIMPLE',
+          filterOptionName: 'filter_8ix98su8zu4_t4767ixmbp9',
+          isExtra: false,
+          isNew: false,
+          operator: '!=',
+          sqlExpression: null,
+          subject: 'period',
+        },
+      ],
+    }}
+  />
+);

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/stories/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,
+  },
+];