Graph: updates story from knobs to controls (#32264)

* Graph: updates story from knobs to controls

* added type to story

packages/grafana-ui/src/components/Graph/Graph.story.tsx

@@ -2,29 +2,12 @@ import React from 'react';
 import { Graph } from '@grafana/ui';
 import Chart from '../Chart';
 import { dateTime, ArrayVector, FieldType, GraphSeriesXY, FieldColorModeId } from '@grafana/data';
-import { select } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { TooltipContentProps } from '../Chart/Tooltip';
+import { TooltipContentProps, TooltipMode } from '../Chart/Tooltip';
 import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
-
-export default {
-  title: 'Visualizations/Graph',
-  component: Graph,
-  decorators: [withCenteredStory],
-};
-
-const getKnobs = () => {
-  return {
-    tooltipMode: select(
-      'Tooltip mode',
-      {
-        multi: 'multi',
-        single: 'single',
-      },
-      'single'
-    ),
-  };
-};
+import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
+import { GraphProps } from './Graph';
 
 const series: GraphSeriesXY[] = [
   {
@@ -95,23 +78,46 @@ const series: GraphSeriesXY[] = [
   },
 ];
 
-export const withTooltip = () => {
-  const { tooltipMode } = getKnobs();
-  return (
-    <Graph
-      height={300}
-      width={600}
-      series={series}
-      timeRange={{
+export default {
+  title: 'Visualizations/Graph',
+  component: Graph,
+  decorators: [withCenteredStory],
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+  args: {
+    series: series,
+    height: 300,
+    width: 600,
+    timeRange: {
+      from: dateTime(1546372800000),
+      to: dateTime(1546380000000),
+      raw: {
         from: dateTime(1546372800000),
         to: dateTime(1546380000000),
-        raw: {
-          from: dateTime(1546372800000),
-          to: dateTime(1546380000000),
-        },
-      }}
-      timeZone="browser"
-    >
+      },
+    },
+    timeZone: 'browser',
+    tooltipMode: 'single',
+  },
+  argTypes: {
+    tooltipMode: { control: { type: 'radio', options: ['multi', 'single'] } },
+    timeZone: { control: { type: 'radio', options: ['browser', 'utc'] } },
+    width: { control: { type: 'range', min: 200, max: 800 } },
+    height: { control: { type: 'range', min: 200, max: 800 } },
+    lineWidth: { control: { type: 'range', min: 1, max: 10 } },
+    className: NOOP_CONTROL,
+    series: NOOP_CONTROL,
+    timeRange: NOOP_CONTROL,
+    ariaLabel: NOOP_CONTROL,
+  },
+};
+
+export const WithTooltip: Story<GraphProps & { tooltipMode: TooltipMode }> = ({ tooltipMode, ...args }) => {
+  return (
+    <Graph {...args}>
       <Chart.Tooltip mode={tooltipMode} />
     </Graph>
   );
@@ -126,23 +132,9 @@ const CustomGraphTooltip = ({ activeDimensions }: TooltipContentProps) => {
   );
 };
 
-export const withCustomTooltip = () => {
-  const { tooltipMode } = getKnobs();
+export const WithCustomTooltip: Story<GraphProps & { tooltipMode: TooltipMode }> = ({ tooltipMode, ...args }) => {
   return (
-    <Graph
-      height={300}
-      width={600}
-      series={series}
-      timeRange={{
-        from: dateTime(1546372800000),
-        to: dateTime(1546380000000),
-        raw: {
-          from: dateTime(1546372800000),
-          to: dateTime(1546380000000),
-        },
-      }}
-      timeZone="browser"
-    >
+    <Graph {...args}>
       <Chart.Tooltip mode={tooltipMode} tooltipComponent={CustomGraphTooltip} />
     </Graph>
   );