IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

BigValue: updates story from knobs to controls (#31240)

Browse Source 
* BigValue: updates story from knobs to controls

* some refactoring to make code more readable

* made some changes
This commit is contained in:
Uchechukwu Obasi 2021-02-17 15:05:40 +01:00 committed by GitHub
parent ea6a8eacbf
commit 14afa167f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/.storybook/preview.ts
View File

@ -59,3 +59,5 @@ export const parameters = {
escapeHTML: false,
},
};
export const NOOP_CONTROL = { control: { disable: true } };

95
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
View File

@ -1,29 +1,19 @@
import React from 'react';
import { color, number, select, text } from '@storybook/addon-knobs';
import { BigValue, BigValueColorMode, BigValueGraphMode, BigValueJustifyMode, BigValueTextMode } from './BigValue';
import { Story } from '@storybook/react';
import {
BigValue,
BigValueColorMode,
BigValueGraphMode,
BigValueJustifyMode,
BigValueTextMode,
Props,
} from './BigValue';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './BigValue.mdx';
import { useTheme } from '../../themes';
import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
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 {
title: 'Visualizations/BigValue',
component: BigValue,
@ -32,11 +22,58 @@ export default {
docs: {
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 = () => {
const { value, title, colorMode, graphMode, height, width, color, textMode, justifyMode } = getKnobs();
interface StoryProps extends Partial<Props> {
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 sparkline: FieldSparkline = {
y: {
@ -57,7 +94,7 @@ export const Basic = () => {
textMode={textMode}
justifyMode={justifyMode}
value={{
text: value,
text: valueText,
numeric: 5022,
color: color,
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,
};