mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
GraphNG: updates story from knobs to controls (#32294)
This commit is contained in:
parent
298ff3ea01
commit
4aff0cee0d
@ -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'
|
||||||
|
? LegendDisplayMode.Hidden
|
||||||
|
: legendDisplayMode === 'table'
|
||||||
|
? LegendDisplayMode.Table
|
||||||
|
: LegendDisplayMode.List,
|
||||||
|
placement: placement,
|
||||||
|
calcs: [],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
Lines.args = {
|
||||||
|
width: 600,
|
||||||
|
height: 400,
|
||||||
|
timeRange: {
|
||||||
from: dateTime(1546372800000),
|
from: dateTime(1546372800000),
|
||||||
to: dateTime(1546380000000),
|
to: dateTime(1546380000000),
|
||||||
raw: {
|
raw: {
|
||||||
from: dateTime(1546372800000),
|
from: dateTime(1546372800000),
|
||||||
to: dateTime(1546380000000),
|
to: dateTime(1546380000000),
|
||||||
},
|
},
|
||||||
}}
|
},
|
||||||
legend={{ displayMode: LegendDisplayMode.List, placement: legendPlacement, calcs: [] }}
|
legendDisplayMode: 'list',
|
||||||
timeZone="browser"
|
placement: 'bottom',
|
||||||
/>
|
unit: 'short',
|
||||||
);
|
timeZone: 'browser',
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user