apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Storybook: Add MDX PanelChrome documentation (#64916)

Browse Source
pull/65017/head
Alexa V 2 years ago committed by GitHub
parent 8438716bf5
commit 5bbdc62044
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 489 additions and 4 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      .betterer.results
  2. 484
      packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
  3. 6
      packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx

3
.betterer.results
Unescape View File

@ -6825,9 +6825,6 @@ exports[`no undocumented stories`] = {
"packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx:5381": [ "packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx:5381": [
[0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"] [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
], ],
"packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx:5381": [
[0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
],
"packages/grafana-ui/src/components/QueryField/QueryField.story.tsx:5381": [ "packages/grafana-ui/src/components/QueryField/QueryField.story.tsx:5381": [
[0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"] [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
], ],

484
packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
Unescape View File

@ -0,0 +1,484 @@
import { Meta, Canvas, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { PanelChrome } from './PanelChrome';
import { LoadingIndicator } from './LoadingIndicator';
import { action } from '@storybook/addon-actions';
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
import { HorizontalGroup } from '../Layout/Layout';
import { LoadingState } from '@grafana/data';
import { Button } from '../Button/Button.tsx';
import { Menu } from '../Menu/Menu';
<Meta title="MDX|PanelChrome" component={PanelChrome} />
# PanelChrome
Component used for rendering content wrapped in the same style as grafana panels
### Basic Usage: Title, Description and Content
```tsx
<PanelChrome
title="My awesome panel title"
description="Here I will put a description that explains a bit more this panel"
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
New panel with old API
</div>
);
}}
</PanelChrome>
```
<Canvas>
<PanelChrome
title="My awesome panel title"
description="Here I will put a description that explains a bit more this panel"
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Content
</div>
);
}}
</PanelChrome>
</Canvas>
### Menu: Standard & Hover
```tsx
<PanelChrome
title="My awesome panel title"
hoverHeader={<true || false>}
menu={() => (
<Menu>
<Menu.Item label="View" icon="eye" />
<Menu.Item label="Edit" icon="edit" />
<Menu.Item label="Share" icon="share-alt" />
<Menu.Divider />
<Menu.Item label="Remove" icon="trash-alt" />
</Menu>
)}
description="Here I will put a description that explains a bit more this panel"
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
New panel with old API
</div>
);
}}
</PanelChrome>
```
<Canvas>
<HorizontalGroup spacing="md" align="flex-start" wrap>
<PanelChrome
title="My awesome panel title"
menu={() => (
<Menu>
<Menu.Item label="View" icon="eye" />
<Menu.Item label="Edit" icon="edit" />
<Menu.Item label="Share" icon="share-alt" />
<Menu.Divider />
<Menu.Item label="Remove" icon="trash-alt" />
</Menu>
)}
description="Here I will put a description that explains a bit more this panel"
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Content with fixed header
</div>
);
}}
</PanelChrome>
<PanelChrome
title="My awesome panel title"
menu={() => (
<Menu>
<Menu.Item label="View" icon="eye" />
<Menu.Item label="Edit" icon="edit" />
<Menu.Item label="Share" icon="share-alt" />
<Menu.Divider />
<Menu.Item label="Remove" icon="trash-alt" />
</Menu>
)}
hoverHeader={true}
description="Here I will put a description that explains a bit more this panel"
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Content with hoverHeader=true
</div>
);
}}
</PanelChrome>
</HorizontalGroup>
</Canvas>
### States: Loading , Streaming, Error
```tsx
<PanelChrome
title="My awesome panel title"
loadingState={<Loading.Loading || Loading.Streaming>}
statusMessage='Error text'
statusMessageOnClick={action('ErrorIndicator: onClick fired')}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
New panel with old API
</div>
);
}}
</PanelChrome>
```
<Canvas>
<HorizontalGroup spacing="md" align="flex-start" wrap>
<PanelChrome
title="My awesome panel title"
loadingState={LoadingState.Loading}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Data is loading
</div>
);
}}
</PanelChrome>
<PanelChrome
title="My awesome panel title"
loadingState={LoadingState.Streaming}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Data is Streaming
</div>
);
}}
</PanelChrome>
<PanelChrome
title="My awesome panel title"
statusMessage='Error text'
statusMessageOnClick={action('ErrorIndicator: onClick fired')}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
There is an error
</div>
);
}}
</PanelChrome>
</HorizontalGroup>
</Canvas>
### Extra options? Title Items
```tsx
<PanelChrome
title="My awesome panel title"
titleItems={
<div>
<Button fill="text" icon="github" variant="secondary" tooltip="extra content to render" />
<Button fill="text" icon="sliders-v-alt" variant="secondary" tooltip="extra content2 to render" />
</div>
}
description="Here I will put a description that explains a bit more this panel"
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
New panel with old API
</div>
);
}}
</PanelChrome>
```
<Canvas>
<PanelChrome
title="My awesome panel title"
description="Here I will put a description that explains a bit more this panel"
titleItems={
<div>
<Button fill="text" icon="github" variant="secondary" tooltip="extra content to render" />
<Button fill="text" icon="sliders-v-alt" variant="secondary" tooltip="extra content2 to render" />
</div>
}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Content
</div>
);
}}
</PanelChrome>
</Canvas>
### Migration from old PanelChrome (before v9.4.0)
#### Before
```tsx
<PanelChrome
title="My awesome panel title"
leftItems={[<PanelChrome.LoadingIndicator loading={isRefreshing} onCancel={onCancelQuery} key="loading-indicator" />]}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
New panel with old API
</div>
);
}}
</PanelChrome>
```
<Canvas>
<PanelChrome
title="My awesome panel title"
leftItems={[
<PanelChrome.LoadingIndicator
loading={true}
onCancel={action('CancelQuery: onClick fired')}
key="loading-indicator"
/>,
]}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Content
</div>
);
}}
</PanelChrome>
</Canvas>
#### After
```tsx
<PanelChrome
title="My awesome panel title"
loadingState={LoadingState.Loading}
onCancelQuery={onCancelQuery}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
New panel with old API
</div>
);
}}
</PanelChrome>
```
<Canvas>
<PanelChrome
title="My awesome panel title"
loadingState={LoadingState.Loading}
onCancelQuery={action('CancelQuery: onClick fired')}
width={400}
height={200}
>
{(innerwidth, innerheight) => {
return (
<div
style={{
width: innerwidth,
height: innerheight,
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
Content
</div>
);
}}
</PanelChrome>
</Canvas>

6
packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
Unescape View File

@ -12,6 +12,8 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { HorizontalGroup } from '../Layout/Layout'; import { HorizontalGroup } from '../Layout/Layout';
import { Menu } from '../Menu/Menu'; import { Menu } from '../Menu/Menu';
import mdx from './PanelChrome.mdx';
const meta: ComponentMeta<typeof PanelChrome> = { const meta: ComponentMeta<typeof PanelChrome> = {
title: 'Visualizations/PanelChrome', title: 'Visualizations/PanelChrome',
component: PanelChrome, component: PanelChrome,
@ -20,7 +22,9 @@ const meta: ComponentMeta<typeof PanelChrome> = {
controls: { controls: {
exclude: ['children'], exclude: ['children'],
}, },
docs: {}, docs: {
page: mdx,
},
}, },
}; };

Write Preview
Loading…
Cancel
Save