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

Revert "StoryBook: Introduces Grafana Controls (#31351)" (#31388)

Browse Source 
This reverts commit c5797cc274.
This commit is contained in:
Hugo Häggmark 2021-02-22 11:04:27 +01:00 committed by GitHub
parent f36601cdbd
commit 9967f193c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/.storybook/main.ts
View File

@ -14,7 +14,6 @@ module.exports = {
addons: [
'@storybook/addon-docs',
'@storybook/addon-controls',
'../src/addons/grafana-controls/preset.ts',
'@storybook/addon-knobs',
'@storybook/addon-actions',
'storybook-dark-mode/register',

5
packages/grafana-ui/src/addons/grafana-controls/preset.ts
View File

@ -1,5 +0,0 @@
module.exports = {
managerEntries(entry = []) {
return [...entry, require.resolve('./register')];
},
};

43
packages/grafana-ui/src/addons/grafana-controls/register.tsx
View File

@ -1,43 +0,0 @@
import React from 'react';
import { ArgTypes } from '@storybook/react';
import { addons, types } from '@storybook/addons';
import { AddonPanel, ArgsTable } from '@storybook/components';
import { useArgs, useArgTypes, useParameter } from '@storybook/api';
const ADDON_ID = 'storybook/grafana-controls';
const PANEL_ID = `${ADDON_ID}/controls`;
const PARAM_KEY = 'grafanaControls';
const GrafanaControlsPanel = () => {
const [args, updateArgs, resetArgs] = useArgs();
const rows = useArgTypes();
const argTypes = useParameter<ArgTypes>(PARAM_KEY, {});
const newRows: ArgTypes = {};
for (const key in argTypes) {
if (!Object.hasOwnProperty.call(argTypes, key)) {
continue;
}
if (Object.hasOwnProperty.call(rows, key)) {
newRows[key] = { ...rows[key], ...argTypes[key] };
}
}
return (
<ArgsTable rows={newRows} args={args} updateArgs={updateArgs} resetArgs={resetArgs as any} inAddonPanel compact />
);
};
addons.register(ADDON_ID, (api) => {
addons.add(PANEL_ID, {
type: types.PANEL,
title: 'Grafana Controls',
// eslint-disable-next-line react/display-name
render: ({ active, key }) => (
<AddonPanel active={Boolean(active)} key={key}>
<GrafanaControlsPanel />
</AddonPanel>
),
});
});

50
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
View File

@ -11,6 +11,7 @@ import {
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './BigValue.mdx';
import { useTheme } from '../../themes';
import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
export default {
@ -22,31 +23,36 @@ export default {
page: mdx,
},
knobs: {
disable: true,
disabled: true,
},
controls: {
disable: true,
},
grafanaControls: {
width: { control: { type: 'range', min: 200, max: 800 } },
height: { control: { type: 'range', min: 200, max: 800 } },
colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
textMode: {
control: {
type: 'radio',
options: [
BigValueTextMode.Auto,
BigValueTextMode.Name,
BigValueTextMode.ValueAndName,
BigValueTextMode.None,
BigValueTextMode.Value,
],
},
},
argTypes: {
width: { control: { type: 'range', min: 200, max: 800 } },
height: { control: { type: 'range', min: 200, max: 800 } },
colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
textMode: {
control: {
type: 'radio',
options: [
BigValueTextMode.Auto,
BigValueTextMode.Name,
BigValueTextMode.ValueAndName,
BigValueTextMode.None,
BigValueTextMode.Value,
],
},
color: { control: { type: 'color' } },
},
color: { control: 'color' },
value: NOOP_CONTROL,
sparkline: NOOP_CONTROL,
onClick: NOOP_CONTROL,
className: NOOP_CONTROL,
alignmentFactors: NOOP_CONTROL,
text: NOOP_CONTROL,
count: NOOP_CONTROL,
theme: NOOP_CONTROL,
},
};