IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 05:29:42 -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 { number } from '@storybook/addon-knobs';
import { Story } from '@storybook/react';
import { VizLayout } from './VizLayout';
export default {
@ -9,19 +9,31 @@ export default {
decorators: [withCenteredStory],
parameters: {
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 = () => {
return {
legendWidth: number('legendWidth', 100),
legendItems: number('legendItems', 2),
};
const createArray = (legendItems: number) => {
const newArray = Array.from({ length: legendItems }, (_, i) => i + 1);
return newArray;
};
export const BottomLegend = () => {
const { legendItems } = getKnobs();
const items = Array.from({ length: legendItems }, (_, i) => i + 1);
export const BottomLegend: Story = ({ height, width, legendItems }) => {
const [items, setItems] = useState(createArray(legendItems));
useEffect(() => {
setItems(createArray(legendItems));
}, [legendItems]);
const legend = (
<VizLayout.Legend placement="bottom" maxHeight="30%">
@ -34,17 +46,24 @@ export const BottomLegend = () => {
);
return (
<VizLayout width={600} height={500} legend={legend}>
<VizLayout width={width} height={height} legend={legend}>
{(vizWidth: number, vizHeight: number) => {
return <div style={{ width: vizWidth, height: vizHeight, background: 'red' }} />;
}}
</VizLayout>
);
};
BottomLegend.args = {
height: 600,
width: 500,
legendItems: 2,
};
export const RightLegend = () => {
const { legendItems, legendWidth } = getKnobs();
const items = Array.from({ length: legendItems }, (_, i) => i + 1);
export const RightLegend: Story = ({ height, width, legendItems, legendWidth }) => {
const [items, setItems] = useState(createArray(legendItems));
useEffect(() => {
setItems(createArray(legendItems));
}, [legendItems]);
const legend = (
<VizLayout.Legend placement="right" maxWidth="50%">
@ -57,10 +76,16 @@ export const RightLegend = () => {
);
return (
<VizLayout width={810} height={400} legend={legend}>
<VizLayout width={width} height={height} legend={legend}>
{(vizWidth: number, vizHeight: number) => {
return <div style={{ width: vizWidth, height: vizHeight, background: 'red' }} />;
}}
</VizLayout>
);
};
RightLegend.args = {
height: 400,
width: 810,
legendWidth: 100,
legendItems: 2,
};