Skip to content

N
nexpie-grafana-theme
Commit a2363f4d by Tobias Skarhed Committed by GitHub
Options

Storybook: Convert final CSF stories (#24283) 

* Convert BigValue and GraphLegend

* Convert last stories
parent 428b4ae5
Showing with 91 additions and 89 deletions
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
import { storiesOf } from '@storybook/react'; import { text, select, number, color } from '@storybook/addon-knobs';
import { text } from '@storybook/addon-knobs';
import { BigValue, BigValueColorMode, BigValueGraphMode } from './BigValue'; import { BigValue, BigValueColorMode, BigValueGraphMode } from './BigValue';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
...@@ -8,51 +7,45 @@ const getKnobs = () => { ...@@ -8,51 +7,45 @@ const getKnobs = () => {
return { return {
value: text('value', '$5022'), value: text('value', '$5022'),
title: text('title', 'Total Earnings'), title: text('title', 'Total Earnings'),
colorMode: select('Color mode', [BigValueColorMode.Value, BigValueColorMode.Background], BigValueColorMode.Value),
graphMode: select('Graph mode', [BigValueGraphMode.Area, BigValueGraphMode.Line], BigValueGraphMode.Area),
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'),
}; };
}; };
const BigValueStories = storiesOf('Visualizations/BigValue', module); export default {
title: 'Visualizations/BigValue',
BigValueStories.addDecorator(withCenteredStory); component: BigValue,
decorators: [withCenteredStory],
interface StoryOptions { };
colorMode: BigValueColorMode;
graphMode: BigValueGraphMode;
width?: number;
height?: number;
noSparkline?: boolean;
}
function addStoryForMode(options: StoryOptions) { export const basic = () => {
BigValueStories.add(`Color: ${options.colorMode}`, () => { const { value, title, colorMode, graphMode, height, width, color } = getKnobs();
const { value, title } = getKnobs();
return renderComponentWithTheme(BigValue, { return renderComponentWithTheme(BigValue, {
width: options.width || 400, width: width,
height: options.height || 300, height: height,
colorMode: options.colorMode, colorMode: colorMode,
graphMode: options.graphMode, graphMode: graphMode,
value: { value: {
text: value, text: value,
numeric: 5022, numeric: 5022,
color: 'red', color: color,
title, title,
}, },
sparkline: { sparkline: {
minX: 0, minX: 0,
maxX: 5, maxX: 5,
data: [ data: [
[0, 10], [0, 10],
[1, 20], [1, 20],
[2, 15], [2, 15],
[3, 25], [3, 25],
[4, 5], [4, 5],
[5, 10], [5, 10],
], ],
}, },
});
}); });
} };
addStoryForMode({ colorMode: BigValueColorMode.Value, graphMode: BigValueGraphMode.Area });
addStoryForMode({ colorMode: BigValueColorMode.Background, graphMode: BigValueGraphMode.Line });
packages/grafana-ui/src/components/Graph/GraphLegend.story.tsx
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { GraphLegend } from './GraphLegend'; import { GraphLegend } from './GraphLegend';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { select, number } from '@storybook/addon-knobs'; import { select, number } from '@storybook/addon-knobs';
import { withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
import { generateLegendItems } from '../Legend/Legend.story'; import { generateLegendItems } from '../Legend/Legend';
import { LegendPlacement, LegendDisplayMode } from '../Legend/Legend'; import { LegendPlacement, LegendDisplayMode } from '../Legend/Legend';
const GraphLegendStories = storiesOf('Visualizations/Graph/GraphLegend', module); export default {
GraphLegendStories.addDecorator(withHorizontallyCenteredStory); title: 'Visualizations/Graph/GraphLegend',
component: GraphLegend,
decororators: [withHorizontallyCenteredStory],
};
const getStoriesKnobs = (isList = false) => { const getStoriesKnobs = (isList = false) => {
const statsToDisplay = select<any>( const statsToDisplay = select<any>(
...@@ -54,7 +55,7 @@ const getStoriesKnobs = (isList = false) => { ...@@ -54,7 +55,7 @@ const getStoriesKnobs = (isList = false) => {
}; };
}; };
GraphLegendStories.add('list', () => { export const list = () => {
const { statsToDisplay, numberOfSeries, containerWidth, legendPlacement } = getStoriesKnobs(true); const { statsToDisplay, numberOfSeries, containerWidth, legendPlacement } = getStoriesKnobs(true);
return ( return (
<div style={{ width: containerWidth }}> <div style={{ width: containerWidth }}>
...@@ -77,9 +78,9 @@ GraphLegendStories.add('list', () => { ...@@ -77,9 +78,9 @@ GraphLegendStories.add('list', () => {
/> />
</div> </div>
); );
}); };
GraphLegendStories.add('table', () => { export const table = () => {
const { statsToDisplay, numberOfSeries, containerWidth, legendPlacement } = getStoriesKnobs(); const { statsToDisplay, numberOfSeries, containerWidth, legendPlacement } = getStoriesKnobs();
return ( return (
<div style={{ width: containerWidth }}> <div style={{ width: containerWidth }}>
...@@ -102,4 +103,4 @@ GraphLegendStories.add('table', () => { ...@@ -102,4 +103,4 @@ GraphLegendStories.add('table', () => {
/> />
</div> </div>
); );
}); };
packages/grafana-ui/src/components/Graph/GraphLegend.tsx
...@@ -10,7 +10,7 @@ import { ThemeContext } from '../../themes/ThemeContext'; ...@@ -10,7 +10,7 @@ import { ThemeContext } from '../../themes/ThemeContext';
import { css } from 'emotion'; import { css } from 'emotion';
import { selectThemeVariant } from '../../themes/index'; import { selectThemeVariant } from '../../themes/index';
interface GraphLegendProps extends LegendProps { export interface GraphLegendProps extends LegendProps {
displayMode: LegendDisplayMode; displayMode: LegendDisplayMode;
sortBy?: string; sortBy?: string;
sortDesc?: boolean; sortDesc?: boolean;
......
packages/grafana-ui/src/components/Graph/GraphWithLegend.story.tsx
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { select, text } from '@storybook/addon-knobs'; import { select, text } from '@storybook/addon-knobs';
import { withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { GraphWithLegend, GraphWithLegendProps } from './GraphWithLegend'; import { GraphWithLegend, GraphWithLegendProps } from './GraphWithLegend';
import { LegendPlacement, LegendDisplayMode } from '../Legend/Legend'; import { LegendPlacement, LegendDisplayMode } from '../Legend/Legend';
import { GraphSeriesXY, FieldType, ArrayVector, dateTime, FieldColorMode } from '@grafana/data'; import { GraphSeriesXY, FieldType, ArrayVector, dateTime, FieldColorMode } from '@grafana/data';
const GraphWithLegendStories = storiesOf('Visualizations/Graph/GraphWithLegend', module);
GraphWithLegendStories.addDecorator(withHorizontallyCenteredStory); export default {
title: 'Visualizations/Graph',
component: GraphWithLegend,
decorator: [withCenteredStory],
};
const series: GraphSeriesXY[] = [ const series: GraphSeriesXY[] = [
{ {
...@@ -104,7 +107,7 @@ const getStoriesKnobs = () => { ...@@ -104,7 +107,7 @@ const getStoriesKnobs = () => {
}; };
}; };
GraphWithLegendStories.add('default', () => { export const graphWithLegend = () => {
const { legendPlacement, rightAxisSeries, renderLegendAsTable } = getStoriesKnobs(); const { legendPlacement, rightAxisSeries, renderLegendAsTable } = getStoriesKnobs();
const props: GraphWithLegendProps = { const props: GraphWithLegendProps = {
series: series.map(s => { series: series.map(s => {
...@@ -138,4 +141,4 @@ GraphWithLegendStories.add('default', () => { ...@@ -138,4 +141,4 @@ GraphWithLegendStories.add('default', () => {
}; };
return <GraphWithLegend {...props} />; return <GraphWithLegend {...props} />;
}); };
packages/grafana-ui/src/components/Legend/Legend.story.tsx
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react'; import { LegendList, LegendPlacement, LegendItem, LegendTable, generateLegendItems } from './Legend';
import { LegendList, LegendPlacement, LegendItem, LegendTable } from './Legend';
import tinycolor from 'tinycolor2';
import { DisplayValue } from '@grafana/data';
import { number, select, text } from '@storybook/addon-knobs'; import { number, select, text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { GraphLegendListItem, GraphLegendTableRow, GraphLegendItemProps } from '../Graph/GraphLegendItem'; import { GraphLegendListItem, GraphLegendTableRow, GraphLegendItemProps } from '../Graph/GraphLegendItem';
export const generateLegendItems = (numberOfSeries: number, statsToDisplay?: DisplayValue[]): LegendItem[] => {
const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
return [...new Array(numberOfSeries)].map((item, i) => {
return {
label: `${alphabet[i].toUpperCase()}-series`,
color: tinycolor.fromRatio({ h: i / alphabet.length, s: 1, v: 1 }).toHexString(),
isVisible: true,
yAxis: 1,
displayValues: statsToDisplay || [],
};
});
};
const getStoriesKnobs = (table = false) => { const getStoriesKnobs = (table = false) => {
const numberOfSeries = number('Number of series', 3); const numberOfSeries = number('Number of series', 3);
const containerWidth = select( const containerWidth = select(
...@@ -87,9 +70,13 @@ const getStoriesKnobs = (table = false) => { ...@@ -87,9 +70,13 @@ const getStoriesKnobs = (table = false) => {
}; };
}; };
const LegendStories = storiesOf('Visualizations/Legend', module); export default {
title: 'Visualizations/Legend',
component: LegendList,
subcomponents: { LegendTable },
};
LegendStories.add('list', () => { export const list = () => {
const { numberOfSeries, itemRenderer, containerWidth, rightAxisSeries, legendPlacement } = getStoriesKnobs(); const { numberOfSeries, itemRenderer, containerWidth, rightAxisSeries, legendPlacement } = getStoriesKnobs();
let items = generateLegendItems(numberOfSeries); let items = generateLegendItems(numberOfSeries);
...@@ -110,9 +97,9 @@ LegendStories.add('list', () => { ...@@ -110,9 +97,9 @@ LegendStories.add('list', () => {
<LegendList itemRenderer={itemRenderer} items={items} placement={legendPlacement} /> <LegendList itemRenderer={itemRenderer} items={items} placement={legendPlacement} />
</div> </div>
); );
}); };
LegendStories.add('table', () => { export const table = () => {
const { numberOfSeries, itemRenderer, containerWidth, rightAxisSeries, legendPlacement } = getStoriesKnobs(true); const { numberOfSeries, itemRenderer, containerWidth, rightAxisSeries, legendPlacement } = getStoriesKnobs(true);
let items = generateLegendItems(numberOfSeries); let items = generateLegendItems(numberOfSeries);
...@@ -139,4 +126,4 @@ LegendStories.add('table', () => { ...@@ -139,4 +126,4 @@ LegendStories.add('table', () => {
<LegendTable itemRenderer={itemRenderer} items={items} columns={['', 'min', 'max']} placement={legendPlacement} /> <LegendTable itemRenderer={itemRenderer} items={items} columns={['', 'min', 'max']} placement={legendPlacement} />
</div> </div>
); );
}); };
packages/grafana-ui/src/components/Legend/Legend.tsx
...@@ -2,6 +2,21 @@ import { DisplayValue } from '@grafana/data'; ...@@ -2,6 +2,21 @@ import { DisplayValue } from '@grafana/data';
import { LegendList } from './LegendList'; import { LegendList } from './LegendList';
import { LegendTable } from './LegendTable'; import { LegendTable } from './LegendTable';
import tinycolor from 'tinycolor2';
export const generateLegendItems = (numberOfSeries: number, statsToDisplay?: DisplayValue[]): LegendItem[] => {
const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
return [...new Array(numberOfSeries)].map((item, i) => {
return {
label: `${alphabet[i].toUpperCase()}-series`,
color: tinycolor.fromRatio({ h: i / alphabet.length, s: 1, v: 1 }).toHexString(),
isVisible: true,
yAxis: 1,
displayValues: statsToDisplay || [],
};
});
};
export enum LegendDisplayMode { export enum LegendDisplayMode {
List = 'list', List = 'list',
......
packages/grafana-ui/src/components/Legend/LegendTable.tsx
...@@ -4,7 +4,7 @@ import { LegendComponentProps } from './Legend'; ...@@ -4,7 +4,7 @@ import { LegendComponentProps } from './Legend';
import { Icon } from '../Icon/Icon'; import { Icon } from '../Icon/Icon';
import { ThemeContext } from '../../themes/ThemeContext'; import { ThemeContext } from '../../themes/ThemeContext';
interface LegendTableProps extends LegendComponentProps { export interface LegendTableProps extends LegendComponentProps {
columns: string[]; columns: string[];
sortBy?: string; sortBy?: string;
sortDesc?: boolean; sortDesc?: boolean;
......
packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { StatsPicker } from './StatsPicker'; import { StatsPicker } from './StatsPicker';
...@@ -61,9 +60,13 @@ export class WrapperWithState extends PureComponent<any, State> { ...@@ -61,9 +60,13 @@ export class WrapperWithState extends PureComponent<any, State> {
} }
} }
const story = storiesOf('Pickers and Editors/StatsPicker', module); export default {
story.addDecorator(withCenteredStory); title: 'Pickers and Editors/StatsPicker',
story.add('picker', () => { component: StatsPicker,
decorators: [withCenteredStory],
};
export const picker = () => {
const { placeholder, defaultStat, allowMultiple, initialStats } = getKnobs(); const { placeholder, defaultStat, allowMultiple, initialStats } = getKnobs();
return ( return (
...@@ -76,4 +79,4 @@ story.add('picker', () => { ...@@ -76,4 +79,4 @@ story.add('picker', () => {
/> />
</div> </div>
); );
}); };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment