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

VizLegend: updates story from knobs to controls (#32801)

Browse Source 
* VizLegend: updates story from knobs to controls

* refactored story to be small and concise

* reverted stories to be WithValues and WithNoValues

* fixes the seriesCount control not having effects to the story by using the Effect hook
This commit is contained in:
Uchechukwu Obasi 2021-04-12 12:18:23 +01:00 committed by GitHub
parent 5efffba234
commit 44b6c896ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
View File

@ -1,35 +1,34 @@
import React, { FC, useState } from 'react';
import React, { FC, useEffect, useState } from 'react';
import { useTheme, VizLegend } from '@grafana/ui';
import { number, select } from '@storybook/addon-knobs';
import { Story, Meta } from '@storybook/react';
import {} from './VizLegendListItem';
import { DisplayValue, getColorForTheme, GrafanaTheme } from '@grafana/data';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { VizLegendItem } from './types';
import { LegendDisplayMode, LegendPlacement } from './models.gen';
const getStoriesKnobs = (table = false) => {
const seriesCount = number('Number of series', 5);
const containerWidth = select(
'Container width',
{
Small: '200px',
Medium: '500px',
'Full width': '100%',
},
'100%'
);
return {
seriesCount,
containerWidth,
};
};
export default {
title: 'Visualizations/VizLegend',
component: VizLegend,
decorators: [withCenteredStory],
};
parameters: {
knobs: {
disable: true,
},
},
args: {
containerWidth: '100%',
seriesCount: 5,
},
argTypes: {
containerWidth: {
control: {
type: 'select',
options: ['200px', '500px', '100%'],
},
},
},
} as Meta;
interface LegendStoryDemoProps {
name: string;
@ -43,6 +42,10 @@ const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, n
const theme = useTheme();
const [items, setItems] = useState<VizLegendItem[]>(generateLegendItems(seriesCount, theme, stats));
useEffect(() => {
setItems(generateLegendItems(seriesCount, theme, stats));
}, [seriesCount, theme, stats]);
const onSeriesColorChange = (label: string, color: string) => {
setItems(
items.map((item) => {
@ -90,9 +93,7 @@ const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, n
);
};
export const WithNoValues = () => {
const { seriesCount, containerWidth } = getStoriesKnobs();
export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
return (
<div style={{ width: containerWidth }}>
<LegendStoryDemo
@ -117,8 +118,7 @@ export const WithNoValues = () => {
);
};
export const WithValues = () => {
const { seriesCount, containerWidth } = getStoriesKnobs();
export const WithValues: Story = ({ containerWidth, seriesCount }) => {
const stats: DisplayValue[] = [
{
title: 'Min',