mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
BigValue: updates story from knobs to controls (#31240)
* BigValue: updates story from knobs to controls * some refactoring to make code more readable * made some changes
This commit is contained in:
parent
ea6a8eacbf
commit
14afa167f4
@ -59,3 +59,5 @@ export const parameters = {
|
|||||||
escapeHTML: false,
|
escapeHTML: false,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const NOOP_CONTROL = { control: { disable: true } };
|
||||||
|
@ -1,29 +1,19 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { color, number, select, text } from '@storybook/addon-knobs';
|
import { Story } from '@storybook/react';
|
||||||
import { BigValue, BigValueColorMode, BigValueGraphMode, BigValueJustifyMode, BigValueTextMode } from './BigValue';
|
import {
|
||||||
|
BigValue,
|
||||||
|
BigValueColorMode,
|
||||||
|
BigValueGraphMode,
|
||||||
|
BigValueJustifyMode,
|
||||||
|
BigValueTextMode,
|
||||||
|
Props,
|
||||||
|
} from './BigValue';
|
||||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||||
import mdx from './BigValue.mdx';
|
import mdx from './BigValue.mdx';
|
||||||
import { useTheme } from '../../themes';
|
import { useTheme } from '../../themes';
|
||||||
|
import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
|
||||||
import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
|
import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
|
||||||
|
|
||||||
const getKnobs = () => {
|
|
||||||
return {
|
|
||||||
value: text('value', '$5022'),
|
|
||||||
title: text('title', 'Total Earnings'),
|
|
||||||
colorMode: select('Color mode', [BigValueColorMode.Value, BigValueColorMode.Background], BigValueColorMode.Value),
|
|
||||||
graphMode: select('Graph mode', [BigValueGraphMode.Area, BigValueGraphMode.None], BigValueGraphMode.Area),
|
|
||||||
justifyMode: select('Justify', [BigValueJustifyMode.Auto, BigValueJustifyMode.Center], BigValueJustifyMode.Auto),
|
|
||||||
width: number('Width', 400, { range: true, max: 800, min: 200 }),
|
|
||||||
height: number('Height', 300, { range: true, max: 800, min: 200 }),
|
|
||||||
color: color('Value color', 'red'),
|
|
||||||
textMode: select(
|
|
||||||
'Text mode',
|
|
||||||
[BigValueTextMode.Auto, BigValueTextMode.Name, BigValueTextMode.ValueAndName, BigValueTextMode.None],
|
|
||||||
BigValueTextMode.Auto
|
|
||||||
),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'Visualizations/BigValue',
|
title: 'Visualizations/BigValue',
|
||||||
component: BigValue,
|
component: BigValue,
|
||||||
@ -32,11 +22,58 @@ export default {
|
|||||||
docs: {
|
docs: {
|
||||||
page: mdx,
|
page: mdx,
|
||||||
},
|
},
|
||||||
|
knobs: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
width: { control: { type: 'range', min: 200, max: 800 } },
|
||||||
|
height: { control: { type: 'range', min: 200, max: 800 } },
|
||||||
|
colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
|
||||||
|
graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
|
||||||
|
justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
|
||||||
|
textMode: {
|
||||||
|
control: {
|
||||||
|
type: 'radio',
|
||||||
|
options: [
|
||||||
|
BigValueTextMode.Auto,
|
||||||
|
BigValueTextMode.Name,
|
||||||
|
BigValueTextMode.ValueAndName,
|
||||||
|
BigValueTextMode.None,
|
||||||
|
BigValueTextMode.Value,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: { control: 'color' },
|
||||||
|
value: NOOP_CONTROL,
|
||||||
|
sparkline: NOOP_CONTROL,
|
||||||
|
onClick: NOOP_CONTROL,
|
||||||
|
className: NOOP_CONTROL,
|
||||||
|
alignmentFactors: NOOP_CONTROL,
|
||||||
|
text: NOOP_CONTROL,
|
||||||
|
count: NOOP_CONTROL,
|
||||||
|
theme: NOOP_CONTROL,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Basic = () => {
|
interface StoryProps extends Partial<Props> {
|
||||||
const { value, title, colorMode, graphMode, height, width, color, textMode, justifyMode } = getKnobs();
|
numeric: number;
|
||||||
|
title: string;
|
||||||
|
color: string;
|
||||||
|
valueText: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Basic: Story<StoryProps> = ({
|
||||||
|
valueText,
|
||||||
|
title,
|
||||||
|
colorMode,
|
||||||
|
graphMode,
|
||||||
|
height,
|
||||||
|
width,
|
||||||
|
color,
|
||||||
|
textMode,
|
||||||
|
justifyMode,
|
||||||
|
}) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const sparkline: FieldSparkline = {
|
const sparkline: FieldSparkline = {
|
||||||
y: {
|
y: {
|
||||||
@ -57,7 +94,7 @@ export const Basic = () => {
|
|||||||
textMode={textMode}
|
textMode={textMode}
|
||||||
justifyMode={justifyMode}
|
justifyMode={justifyMode}
|
||||||
value={{
|
value={{
|
||||||
text: value,
|
text: valueText,
|
||||||
numeric: 5022,
|
numeric: 5022,
|
||||||
color: color,
|
color: color,
|
||||||
title,
|
title,
|
||||||
@ -66,3 +103,15 @@ export const Basic = () => {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Basic.args = {
|
||||||
|
valueText: '$5022',
|
||||||
|
title: 'Total Earnings',
|
||||||
|
colorMode: BigValueColorMode.Value,
|
||||||
|
graphMode: BigValueGraphMode.Area,
|
||||||
|
justifyMode: BigValueJustifyMode.Auto,
|
||||||
|
width: 400,
|
||||||
|
height: 300,
|
||||||
|
color: 'red',
|
||||||
|
textMode: BigValueTextMode.Auto,
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user