lots of story tweaks... these might not work ¯\_(ツ)_/¯

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

@@ -16,32 +16,28 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import React from 'react';
 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
-import { select, withKnobs } from '@storybook/addon-knobs';
-import {
-  EchartsBoxPlotChartPlugin,
-  BoxPlotTransformProps,
-} from '@superset-ui/plugin-chart-echarts';
+import { EchartsBoxPlotChartPlugin, BoxPlotTransformProps } from '@superset-ui/plugin-chart-echarts';
 import data from './data';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
-new EchartsBoxPlotChartPlugin()
-  .configure({ key: 'echarts-boxplot' })
-  .register();
-
-getChartTransformPropsRegistry().registerValue(
-  'echarts-boxplot',
-  BoxPlotTransformProps,
-);
+new EchartsBoxPlotChartPlugin().configure({ key: 'echarts-boxplot' }).register();
+getChartTransformPropsRegistry().registerValue('echarts-boxplot', BoxPlotTransformProps);
 
 export default {
   title: 'Chart Plugins/plugin-chart-echarts/BoxPlot',
-  decorators: [withKnobs, withResizableChartDemo],
+  decorators: [withResizableChartDemo],
+  argTypes: {
+    xTicksLayout: {
+      control: 'select',
+      options: ['auto', 'flat', '45°', '90°', 'staggered'],
+      defaultValue: '45°',
+    },
+  },
 };
 
-export const BoxPlot = ({ width, height }) => (
+const BoxPlotTemplate = ({ xTicksLayout, width, height }) => (
   <SuperChart
     chartType="echarts-boxplot"
     width={width}
@@ -52,12 +48,10 @@ export const BoxPlot = ({ width, height }) => (
       groupby: ['type', 'region'],
       metrics: ['AVG(averageprice)'],
       whiskerOptions: 'Tukey',
-      xTicksLayout: select(
-        'X Tick Layout',
-        ['auto', 'flat', '45°', '90°', 'staggered'],
-        '45°',
-      ),
+      xTicksLayout,
       yAxisFormat: 'SMART_NUMBER',
     }}
   />
 );
+
+export const BoxPlot = BoxPlotTemplate.bind({});

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

@@ -18,33 +18,42 @@
  */
 import React from 'react';
 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
-import {
-  boolean,
-  number,
-  select,
-  text,
-  withKnobs,
-} from '@storybook/addon-knobs';
-import {
-  EchartsBubbleChartPlugin,
-  BubbleTransformProps,
-} from '@superset-ui/plugin-chart-echarts';
+import { EchartsBubbleChartPlugin, BubbleTransformProps } from '@superset-ui/plugin-chart-echarts';
 import { simpleBubbleData } from './data';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
 new EchartsBubbleChartPlugin().configure({ key: 'bubble_v2' }).register();
-
-getChartTransformPropsRegistry().registerValue(
-  'bubble_v2',
-  BubbleTransformProps,
-);
+getChartTransformPropsRegistry().registerValue('bubble_v2', BubbleTransformProps);
 
 export default {
   title: 'Chart Plugins/plugin-chart-echarts/Bubble',
-  decorators: [withKnobs, withResizableChartDemo],
+  decorators: [withResizableChartDemo],
+  argTypes: {
+    maxBubbleSize: {
+      control: 'select',
+      options: [5, 10, 25, 50, 100, 125],
+      defaultValue: 10,
+    },
+    xAxisTitle: { control: 'text', defaultValue: '' },
+    xAxisTitleMargin: { control: 'number', defaultValue: 30 },
+    yAxisTitle: { control: 'text', defaultValue: '' },
+    yAxisTitleMargin: { control: 'number', defaultValue: 30 },
+    logYAxis: { control: 'boolean', defaultValue: false },
+    logXAxis: { control: 'boolean', defaultValue: false },
+  },
 };
 
-export const SimpleBubble = ({ width, height }) => (
+const SimpleBubbleTemplate = ({
+  maxBubbleSize,
+  xAxisTitle,
+  xAxisTitleMargin,
+  yAxisTitle,
+  yAxisTitleMargin,
+  logYAxis,
+  logXAxis,
+  width,
+  height
+}) => (
   <SuperChart
     chartType="bubble_v2"
     width={width}
@@ -110,19 +119,21 @@ export const SimpleBubble = ({ width, height }) => (
       },
       limit: 10,
       colorScheme: 'supersetColors',
-      maxBubbleSize: select('Max bubble size', [5, 10, 25, 50, 100, 125], 10),
-      xAxisTitle: text('X axis title', ''),
-      xAxisTitleMargin: number('X axis title margin', 30),
-      yAxisTitle: text('Y axis title', ''),
-      yAxisTitleMargin: number('Y axis title margin', 30),
+      maxBubbleSize,
+      xAxisTitle,
+      xAxisTitleMargin,
+      yAxisTitle,
+      yAxisTitleMargin,
       yAxisTitlePosition: 'Left',
       xAxisFormat: null,
-      logYAxis: boolean('Log Y axis', false),
+      logYAxis,
       yAxisFormat: null,
-      logXAxis: boolean('Log X axis', false),
+      logXAxis,
       truncateYAxis: false,
       yAxisBounds: [],
       extraFormData: {},
     }}
   />
 );
+
+export const SimpleBubble = SimpleBubbleTemplate.bind({});

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

@@ -1,45 +1,39 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
 import React from 'react';
 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
-import { boolean, number, select, withKnobs } from '@storybook/addon-knobs';
-import {
-  EchartsFunnelChartPlugin,
-  FunnelTransformProps,
-} from '@superset-ui/plugin-chart-echarts';
+import { EchartsFunnelChartPlugin, FunnelTransformProps } from '@superset-ui/plugin-chart-echarts';
 import { dataSource } from './constants';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
 new EchartsFunnelChartPlugin().configure({ key: 'echarts-funnel' }).register();
-
-getChartTransformPropsRegistry().registerValue(
-  'echarts-funnel',
-  FunnelTransformProps,
-);
+getChartTransformPropsRegistry().registerValue('echarts-funnel', FunnelTransformProps);
 
 export default {
   title: 'Chart Plugins/plugin-chart-echarts/Funnel',
-  decorators: [withKnobs, withResizableChartDemo],
+  decorators: [withResizableChartDemo],
+  argTypes: {
+    orient: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      defaultValue: 'vertical',
+    },
+    sort: {
+      control: 'select',
+      options: ['descending', 'ascending', 'none'],
+      defaultValue: 'descending',
+    },
+    gap: { control: 'number', defaultValue: 0 },
+    labelType: {
+      control: 'select',
+      options: ['key', 'value', 'percent', 'key_value', 'key_percent', 'key_value_percent'],
+      defaultValue: 'key',
+    },
+    labelLine: { control: 'boolean', defaultValue: true },
+    showLabels: { control: 'boolean', defaultValue: true },
+    showLegend: { control: 'boolean', defaultValue: false },
+  },
 };
 
-export const Funnel = ({ width, height }) => (
+const FunnelTemplate = ({ orient, sort, gap, labelType, labelLine, showLabels, showLegend, width, height }) => (
   <SuperChart
     chartType="echarts-funnel"
     width={width}
@@ -50,24 +44,15 @@ export const Funnel = ({ width, height }) => (
       groupby: ['name'],
       metric: 'value',
       numberFormat: 'SMART_NUMBER',
-      orient: select('orient', ['horizontal', 'vertical'], 'vertical'),
-      sort: select('sort', ['descending', 'ascending', 'none'], 'descending'),
-      gap: number('gap', 0),
-      labelType: select(
-        'label type',
-        [
-          'key',
-          'value',
-          'percent',
-          'key_value',
-          'key_percent',
-          'key_value_percent',
-        ],
-        'key',
-      ),
-      labelLine: boolean('Label line', true),
-      showLabels: boolean('Show labels', true),
-      showLegend: boolean('Show legend', false),
+      orient,
+      sort,
+      gap,
+      labelType,
+      labelLine,
+      showLabels,
+      showLegend,
     }}
   />
 );
+
+export const Funnel = FunnelTemplate.bind({});

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

@@ -19,7 +19,6 @@
 
 import React from 'react';
 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
-import { withKnobs } from '@storybook/addon-knobs';
 import {
   EchartsGaugeChartPlugin,
   GaugeTransformProps,
@@ -36,7 +35,7 @@ getChartTransformPropsRegistry().registerValue(
 
 export default {
   title: 'Chart Plugins/plugin-chart-echarts/Gauge',
-  decorators: [withKnobs, withResizableChartDemo],
+  decorators: [withResizableChartDemo],
 };
 
 export const Gauge = ({ width, height }) => (

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

@@ -19,7 +19,6 @@
 
 import React from 'react';
 import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
-import { withKnobs } from '@storybook/addon-knobs';
 import {
   EchartsGraphChartPlugin,
   GraphTransformProps,
@@ -36,7 +35,7 @@ getChartTransformPropsRegistry().registerValue(
 
 export default {
   title: 'Chart Plugins/plugin-chart-echarts/Graph',
-  decorators: [withKnobs, withResizableChartDemo],
+  decorators: [withResizableChartDemo],
 };
 
 export const Graph = ({ width, height }) => (