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

Table: updates story from knobs to control (#34193)

Browse Source 
* Tables: updates story from knobs to control

* removes the Descending and sortByDisplayName controls since they have no effect on component

Co-authored-by: Hugo Häggmark <hugo.haggmark@gmail.com>
This commit is contained in:
Uchechukwu Obasi 2021-05-17 14:27:05 +01:00 committed by GitHub
parent 3e48fe9475
commit 21f0509f8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/grafana-ui/src/components/Table/Table.story.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { merge } from 'lodash';
import { Table } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { number } from '@storybook/addon-knobs';
import { Meta, Story } from '@storybook/react';
import { useTheme2 } from '../../themes';
import mdx from './Table.mdx';
import {
@ -21,11 +21,22 @@ export default {
component: Table,
decorators: [withCenteredStory],
parameters: {
controls: {
exclude: ['onColumnResize', 'onSortByChange', 'onCellFilterAdded', 'ariaLabel', 'data', 'initialSortBy'],
},
docs: {
page: mdx,
},
knobs: {
disable: true,
},
};
},
args: {
width: 700,
height: 500,
columnMinWidth: 150,
},
} as Meta;
function buildData(theme: GrafanaTheme2, config: Record<string, FieldConfig>): DataFrame {
const data = new MutableDataFrame({
@ -99,21 +110,19 @@ const defaultThresholds: ThresholdsConfig = {
mode: ThresholdsMode.Absolute,
};
export const Simple = () => {
export const Basic: Story = (args) => {
const theme = useTheme2();
const width = number('width', 700, {}, 'Props');
const data = buildData(theme, {});
return (
<div className="panel-container" style={{ width: 'auto' }}>
<Table data={data} height={500} width={width} />
<Table data={data} height={args.height} width={args.width} {...args} />
</div>
);
};
export const BarGaugeCell = () => {
export const BarGaugeCell: Story = (args) => {
const theme = useTheme2();
const width = number('width', 700, {}, 'Props');
const data = buildData(theme, {
Progress: {
custom: {
@ -126,14 +135,13 @@ export const BarGaugeCell = () => {
return (
<div className="panel-container" style={{ width: 'auto' }}>
<Table data={data} height={500} width={width} />
<Table data={data} height={args.height} width={args.width} {...args} />
</div>
);
};
export const ColoredCells = () => {
export const ColoredCells: Story = (args) => {
const theme = useTheme2();
const width = number('width', 750, {}, 'Props');
const data = buildData(theme, {
Progress: {
custom: {
@ -146,7 +154,7 @@ export const ColoredCells = () => {
return (
<div className="panel-container" style={{ width: 'auto' }}>
<Table data={data} height={500} width={width} />
<Table data={data} height={args.height} width={args.width} {...args} />
</div>
);
};