BarGuage: updates story from knobs to controls (#31223)

* BarGuage: updated story from knobs to controls

* fixes type errors and disables unused controls

* update controls to support some BarGauge props

* changed addBarGaugeStory to component and removed closure

* cleaned up to be more readable

* more refactoring to be readable

* final touches...

* fixed disabled controls issue

* moved NOOP_CONTROL declaration to a seperate PR

* made some tweaks to the story names

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

@@ -1,25 +1,13 @@
 import React from 'react';
-import { number, text } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
+import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
 import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
 import { Props } from './BarGauge';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './BarGauge.mdx';
 import { useTheme } from '../../themes';
 
-const getKnobs = () => {
-  return {
-    value: number('value', 70),
-    title: text('title', 'Title'),
-    minValue: number('minValue', 0),
-    maxValue: number('maxValue', 100),
-    threshold1Value: number('threshold1Value', 40),
-    threshold1Color: text('threshold1Color', 'orange'),
-    threshold2Value: number('threshold2Value', 60),
-    threshold2Color: text('threshold2Color', 'red'),
-  };
-};
-
 export default {
   title: 'Visualizations/BarGauge',
   component: BarGauge,
@@ -28,79 +16,109 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disabled: true,
+    },
+  },
+  args: {
+    numeric: 70,
+    title: 'Title',
+    minValue: 0,
+    maxValue: 100,
+    threshold1Value: 40,
+    threshold1Color: 'orange',
+    threshold2Value: 60,
+    threshold2Color: 'red',
+    displayMode: BarGaugeDisplayMode.Gradient,
+    lcdCellWidth: 12,
+    itemSpacing: 8,
+    showUnfilled: true,
+  },
+  argTypes: {
+    displayMode: {
+      control: {
+        type: 'select',
+        options: [BarGaugeDisplayMode.Lcd, BarGaugeDisplayMode.Gradient, BarGaugeDisplayMode.Basic],
+      },
+    },
+    width: { control: { type: 'range', min: 200, max: 800 } },
+    height: { control: { type: 'range', min: 200, max: 800 } },
+    threshold1Color: { control: 'color' },
+    threshold2Color: { control: 'color' },
+    theme: NOOP_CONTROL,
+    field: NOOP_CONTROL,
+    value: NOOP_CONTROL,
+    display: NOOP_CONTROL,
+    orientation: NOOP_CONTROL,
+    text: NOOP_CONTROL,
+    onClick: NOOP_CONTROL,
+    className: NOOP_CONTROL,
+    alignmentFactors: NOOP_CONTROL,
   },
 };
 
-function addBarGaugeStory(overrides: Partial<Props>) {
+interface StoryProps extends Partial<Props> {
-  return () => {
+  numeric: number;
-    const theme = useTheme();
+  title: string;
-
+  minValue: number;
-    const {
+  maxValue: number;
-      value,
+  threshold1Color: string;
-      title,
+  threshold2Color: string;
-      minValue,
+  threshold1Value: number;
-      maxValue,
+  threshold2Value: number;
-      threshold1Color,
-      threshold2Color,
-      threshold1Value,
-      threshold2Value,
-    } = getKnobs();
-
-    const field: Partial<Field> = {
-      type: FieldType.number,
-      config: {
-        min: minValue,
-        max: maxValue,
-        thresholds: {
-          mode: ThresholdsMode.Absolute,
-          steps: [
-            { value: -Infinity, color: 'green' },
-            { value: threshold1Value, color: threshold1Color },
-            { value: threshold2Value, color: threshold2Color },
-          ],
-        },
-      },
-    };
-    field.display = getDisplayProcessor({ field });
-
-    const props: Props = {
-      theme,
-      width: 300,
-      height: 300,
-      value: {
-        text: value.toString(),
-        title: title,
-        numeric: value,
-      },
-      orientation: VizOrientation.Vertical,
-      displayMode: BarGaugeDisplayMode.Basic,
-      field: field.config!,
-      display: field.display!,
-    };
-
-    Object.assign(props, overrides);
-
-    return <BarGauge {...props} />;
-  };
 }
 
-export const gradientVertical = addBarGaugeStory({
+const AddBarGaugeStory = (storyProps: StoryProps) => {
-  displayMode: BarGaugeDisplayMode.Gradient,
+  const theme = useTheme();
-  orientation: VizOrientation.Vertical,
+
+  const field: Partial<Field> = {
+    type: FieldType.number,
+    config: {
+      min: storyProps.minValue,
+      max: storyProps.maxValue,
+      thresholds: {
+        mode: ThresholdsMode.Absolute,
+        steps: [
+          { value: -Infinity, color: 'green' },
+          { value: storyProps.threshold1Value, color: storyProps.threshold1Color },
+          { value: storyProps.threshold2Value, color: storyProps.threshold2Color },
+        ],
+      },
+    },
+  };
+  field.display = getDisplayProcessor({ field });
+
+  const props: Partial<Props> = {
+    theme,
+    lcdCellWidth: storyProps.lcdCellWidth,
+    itemSpacing: storyProps.itemSpacing,
+    showUnfilled: storyProps.showUnfilled,
+    width: storyProps.width,
+    height: storyProps.height,
+    value: {
+      text: storyProps.numeric.toString(),
+      title: storyProps.title,
+      numeric: storyProps.numeric,
+    },
+    displayMode: storyProps.displayMode,
+    orientation: storyProps.orientation,
+    field: field.config!,
+    display: field.display!,
+  };
+
+  return <BarGauge {...props} />;
+};
+
+export const barGaugeVertical: Story<StoryProps> = AddBarGaugeStory.bind({});
+barGaugeVertical.args = {
   height: 500,
   width: 100,
-});
+  orientation: VizOrientation.Vertical,
+};
 
-export const gradientHorizontal = addBarGaugeStory({
+export const barGaugeHorizontal: Story<StoryProps> = AddBarGaugeStory.bind({});
-  displayMode: BarGaugeDisplayMode.Gradient,
+barGaugeHorizontal.args = {
-  orientation: VizOrientation.Horizontal,
   height: 100,
   width: 500,
-});
+  orientation: VizOrientation.Horizontal,
-
+};
-export const lcdHorizontal = addBarGaugeStory({
-  displayMode: BarGaugeDisplayMode.Lcd,
-  orientation: VizOrientation.Vertical,
-  height: 500,
-  width: 100,
-});