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

VizLayout: refactored story from knobs to controls (#33043)

Browse Source 
* VizLayout: refactored storys from knobs to controls

* abstracted the array logic to a separate function
This commit is contained in:
Uchechukwu Obasi 2021-04-16 10:13:24 +01:00 committed by GitHub
parent 19c6a02f49
commit 41b704716f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { number } from '@storybook/addon-knobs'; import { Story } from '@storybook/react';
import { VizLayout } from './VizLayout'; import { VizLayout } from './VizLayout';
export default { export default {
@ -9,19 +9,31 @@ export default {
decorators: [withCenteredStory], decorators: [withCenteredStory],
parameters: { parameters: {
docs: {}, docs: {},
knobs: {
disable: true,
},
controls: {
exclude: ['legend'],
},
},
argTypes: {
width: { control: { type: 'range', min: 100, max: 1000 } },
height: { control: { type: 'range', min: 100, max: 1000 } },
legendWidth: { control: { type: 'range', min: 100, max: 280 } },
legendItems: { control: { type: 'number', min: 1 } },
}, },
}; };
const getKnobs = () => { const createArray = (legendItems: number) => {
return { const newArray = Array.from({ length: legendItems }, (_, i) => i + 1);
legendWidth: number('legendWidth', 100), return newArray;
legendItems: number('legendItems', 2),
};
}; };
export const BottomLegend = () => { export const BottomLegend: Story = ({ height, width, legendItems }) => {
const { legendItems } = getKnobs(); const [items, setItems] = useState(createArray(legendItems));
const items = Array.from({ length: legendItems }, (_, i) => i + 1); useEffect(() => {
setItems(createArray(legendItems));
}, [legendItems]);
const legend = ( const legend = (
<VizLayout.Legend placement="bottom" maxHeight="30%"> <VizLayout.Legend placement="bottom" maxHeight="30%">
@ -34,17 +46,24 @@ export const BottomLegend = () => {
); );
return ( return (
<VizLayout width={600} height={500} legend={legend}> <VizLayout width={width} height={height} legend={legend}>
{(vizWidth: number, vizHeight: number) => { {(vizWidth: number, vizHeight: number) => {
return <div style={{ width: vizWidth, height: vizHeight, background: 'red' }} />; return <div style={{ width: vizWidth, height: vizHeight, background: 'red' }} />;
}} }}
</VizLayout> </VizLayout>
); );
}; };
BottomLegend.args = {
height: 600,
width: 500,
legendItems: 2,
};
export const RightLegend = () => { export const RightLegend: Story = ({ height, width, legendItems, legendWidth }) => {
const { legendItems, legendWidth } = getKnobs(); const [items, setItems] = useState(createArray(legendItems));
const items = Array.from({ length: legendItems }, (_, i) => i + 1); useEffect(() => {
setItems(createArray(legendItems));
}, [legendItems]);
const legend = ( const legend = (
<VizLayout.Legend placement="right" maxWidth="50%"> <VizLayout.Legend placement="right" maxWidth="50%">
@ -57,10 +76,16 @@ export const RightLegend = () => {
); );
return ( return (
<VizLayout width={810} height={400} legend={legend}> <VizLayout width={width} height={height} legend={legend}>
{(vizWidth: number, vizHeight: number) => { {(vizWidth: number, vizHeight: number) => {
return <div style={{ width: vizWidth, height: vizHeight, background: 'red' }} />; return <div style={{ width: vizWidth, height: vizHeight, background: 'red' }} />;
}} }}
</VizLayout> </VizLayout>
); );
}; };
RightLegend.args = {
height: 400,
width: 810,
legendWidth: 100,
legendItems: 2,
};