From debb82e12417e82a0e2bd09e1a450065f884c1bc Mon Sep 17 00:00:00 2001 From: Uchechukwu Obasi Date: Thu, 18 Feb 2021 16:03:56 +0100 Subject: [PATCH] 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 --- .../components/BarGauge/BarGauge.story.tsx | 178 ++++++++++-------- 1 file changed, 98 insertions(+), 80 deletions(-) diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx index 96238b2daec..6349d680fb2 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx +++ b/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) { - return () => { - const theme = useTheme(); - - const { - value, - title, - minValue, - maxValue, - threshold1Color, - threshold2Color, - threshold1Value, - threshold2Value, - } = getKnobs(); - - const field: Partial = { - 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 ; - }; +interface StoryProps extends Partial { + numeric: number; + title: string; + minValue: number; + maxValue: number; + threshold1Color: string; + threshold2Color: string; + threshold1Value: number; + threshold2Value: number; } -export const gradientVertical = addBarGaugeStory({ - displayMode: BarGaugeDisplayMode.Gradient, - orientation: VizOrientation.Vertical, +const AddBarGaugeStory = (storyProps: StoryProps) => { + const theme = useTheme(); + + const field: Partial = { + 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 = { + 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 ; +}; + +export const barGaugeVertical: Story = AddBarGaugeStory.bind({}); +barGaugeVertical.args = { height: 500, width: 100, -}); + orientation: VizOrientation.Vertical, +}; -export const gradientHorizontal = addBarGaugeStory({ - displayMode: BarGaugeDisplayMode.Gradient, - orientation: VizOrientation.Horizontal, +export const barGaugeHorizontal: Story = AddBarGaugeStory.bind({}); +barGaugeHorizontal.args = { height: 100, width: 500, -}); - -export const lcdHorizontal = addBarGaugeStory({ - displayMode: BarGaugeDisplayMode.Lcd, - orientation: VizOrientation.Vertical, - height: 500, - width: 100, -}); + orientation: VizOrientation.Horizontal, +};