IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-02 12:17:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Uchechukwu Obasi 2021-02-18 16:03:56 +01:00 committed by GitHub
parent 82933353d6
commit debb82e124
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 98 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
View File

@ -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>) {
return () => {
const theme = useTheme();
const {
value,
title,
minValue,
maxValue,
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} />;
};
interface StoryProps extends Partial<Props> {
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<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({
displayMode: BarGaugeDisplayMode.Gradient,
orientation: VizOrientation.Horizontal,
export const barGaugeHorizontal: Story<StoryProps> = 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,
};