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

GraphNG: updates story from knobs to controls (#32294)

Browse Source
This commit is contained in:
Uchechukwu Obasi 2021-03-25 15:32:19 +01:00 committed by GitHub
parent 298ff3ea01
commit 4aff0cee0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 51 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/grafana-ui/src/components/GraphNG/GraphNG.story.tsx
View File

@ -1,38 +1,42 @@
import { FieldColorModeId, toDataFrame, dateTime } from '@grafana/data'; import { FieldColorModeId, toDataFrame, dateTime } from '@grafana/data';
import React from 'react'; import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { GraphNG } from './GraphNG'; import { GraphNG, GraphNGProps } from './GraphNG';
import { LegendDisplayMode } from '../VizLegend/types'; import { LegendDisplayMode, LegendPlacement } from '../VizLegend/types';
import { prepDataForStorybook } from '../../utils/storybook/data'; import { prepDataForStorybook } from '../../utils/storybook/data';
import { useTheme } from '../../themes'; import { useTheme } from '../../themes';
import { text, select } from '@storybook/addon-knobs'; import { Story } from '@storybook/react';
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
export default { export default {
title: 'Visualizations/GraphNG', title: 'Visualizations/GraphNG',
component: GraphNG, component: GraphNG,
decorators: [withCenteredStory], decorators: [withCenteredStory],
parameters: { parameters: {
docs: {}, knobs: {
disable: true,
},
},
argTypes: {
legendDisplayMode: { control: { type: 'radio', options: ['table', 'list', 'hidden'] } },
placement: { control: { type: 'radio', options: ['bottom', 'right'] } },
timeZone: { control: { type: 'radio', options: ['browser', 'utc'] } },
width: { control: { type: 'range', min: 200, max: 800 } },
height: { control: { type: 'range', min: 200, max: 800 } },
className: NOOP_CONTROL,
timeRange: NOOP_CONTROL,
data: NOOP_CONTROL,
legend: NOOP_CONTROL,
fields: NOOP_CONTROL,
}, },
}; };
const getKnobs = () => { interface StoryProps extends GraphNGProps {
return { legendDisplayMode: string;
unit: text('Unit', 'short'), placement: LegendPlacement;
legendPlacement: select( unit: string;
'Legend placement', }
{ export const Lines: Story<StoryProps> = ({ placement, unit, legendDisplayMode, ...args }) => {
bottom: 'bottom',
right: 'right',
},
'bottom'
),
};
};
export const Lines: React.FC = () => {
const { unit, legendPlacement } = getKnobs();
const theme = useTheme(); const theme = useTheme();
const seriesA = toDataFrame({ const seriesA = toDataFrame({
target: 'SeriesA', target: 'SeriesA',
@ -51,19 +55,34 @@ export const Lines: React.FC = () => {
return ( return (
<GraphNG <GraphNG
{...args}
data={data} data={data}
width={600} legend={{
height={400} displayMode:
timeRange={{ legendDisplayMode === 'hidden'
from: dateTime(1546372800000), ? LegendDisplayMode.Hidden
to: dateTime(1546380000000), : legendDisplayMode === 'table'
raw: { ? LegendDisplayMode.Table
from: dateTime(1546372800000), : LegendDisplayMode.List,
to: dateTime(1546380000000), placement: placement,
}, calcs: [],
}} }}
legend={{ displayMode: LegendDisplayMode.List, placement: legendPlacement, calcs: [] }}
timeZone="browser"
/> />
); );
}; };
Lines.args = {
width: 600,
height: 400,
timeRange: {
from: dateTime(1546372800000),
to: dateTime(1546380000000),
raw: {
from: dateTime(1546372800000),
to: dateTime(1546380000000),
},
},
legendDisplayMode: 'list',
placement: 'bottom',
unit: 'short',
timeZone: 'browser',
};