mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Open Chore: remove graph(NG) from storybook (#43735)
This commit is contained in:
Ryan McKinley
GitHub
parent
7f8daa0eae
commit
964dae9872
@ -1,149 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { TooltipDisplayMode } from '@grafana/schema';
|
|
||||||
import { dateTime, ArrayVector, FieldType, GraphSeriesXY, FieldColorModeId, getDisplayProcessor } from '@grafana/data';
|
|
||||||
import { Story } from '@storybook/react';
|
|
||||||
import { useTheme2 } from '../../themes';
|
|
||||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
|
||||||
import { VizTooltip, VizTooltipContentProps } from '../VizTooltip';
|
|
||||||
import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
|
|
||||||
import { GraphProps, Graph } from './Graph';
|
|
||||||
|
|
||||||
const series: GraphSeriesXY[] = [
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
[1546372800000, 10],
|
|
||||||
[1546376400000, 20],
|
|
||||||
[1546380000000, 10],
|
|
||||||
],
|
|
||||||
color: 'red',
|
|
||||||
isVisible: true,
|
|
||||||
label: 'A-series',
|
|
||||||
seriesIndex: 0,
|
|
||||||
timeField: {
|
|
||||||
type: FieldType.time,
|
|
||||||
name: 'time',
|
|
||||||
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
|
|
||||||
config: {},
|
|
||||||
},
|
|
||||||
valueField: {
|
|
||||||
type: FieldType.number,
|
|
||||||
name: 'a-series',
|
|
||||||
values: new ArrayVector([10, 20, 10]),
|
|
||||||
config: {
|
|
||||||
color: {
|
|
||||||
mode: FieldColorModeId.Fixed,
|
|
||||||
fixedColor: 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
timeStep: 3600000,
|
|
||||||
yAxis: {
|
|
||||||
index: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
[1546372800000, 20],
|
|
||||||
[1546376400000, 30],
|
|
||||||
[1546380000000, 40],
|
|
||||||
],
|
|
||||||
color: 'blue',
|
|
||||||
isVisible: true,
|
|
||||||
label:
|
|
||||||
"B-series with an ultra wide label that probably gonna make the tooltip to overflow window. This situation happens, so let's better make sure it behaves nicely :)",
|
|
||||||
seriesIndex: 1,
|
|
||||||
timeField: {
|
|
||||||
type: FieldType.time,
|
|
||||||
name: 'time',
|
|
||||||
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
|
|
||||||
config: {},
|
|
||||||
},
|
|
||||||
valueField: {
|
|
||||||
type: FieldType.number,
|
|
||||||
name:
|
|
||||||
"B-series with an ultra wide label that is probably going go make the tooltip overflow window. This situation happens, so let's better make sure it behaves nicely :)",
|
|
||||||
values: new ArrayVector([20, 30, 40]),
|
|
||||||
config: {
|
|
||||||
color: {
|
|
||||||
mode: FieldColorModeId.Fixed,
|
|
||||||
fixedColor: 'blue',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
timeStep: 3600000,
|
|
||||||
yAxis: {
|
|
||||||
index: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Visualizations/Graph',
|
|
||||||
component: Graph,
|
|
||||||
decorators: [withCenteredStory],
|
|
||||||
parameters: {
|
|
||||||
controls: {
|
|
||||||
exclude: ['className', 'ariaLabel'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
args: {
|
|
||||||
series: series,
|
|
||||||
height: 300,
|
|
||||||
width: 600,
|
|
||||||
timeRange: {
|
|
||||||
from: dateTime(1546372800000),
|
|
||||||
to: dateTime(1546380000000),
|
|
||||||
raw: {
|
|
||||||
from: dateTime(1546372800000),
|
|
||||||
to: dateTime(1546380000000),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
timeZone: 'browser',
|
|
||||||
tooltipMode: 'single',
|
|
||||||
},
|
|
||||||
argTypes: {
|
|
||||||
tooltipMode: { control: { type: 'radio', options: ['multi', 'single'] } },
|
|
||||||
timeZone: { control: { type: 'radio', options: ['browser', 'utc'] } },
|
|
||||||
width: { control: { type: 'range', min: 200, max: 800 } },
|
|
||||||
height: { control: { type: 'range', min: 200, max: 1700, step: 300 } },
|
|
||||||
lineWidth: { control: { type: 'range', min: 1, max: 10 } },
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithTooltip: Story<GraphProps & { tooltipMode: TooltipDisplayMode }> = ({
|
|
||||||
tooltipMode,
|
|
||||||
series,
|
|
||||||
...args
|
|
||||||
}) => {
|
|
||||||
const theme = useTheme2();
|
|
||||||
const seriesWithDisplay = series.map((data) => ({
|
|
||||||
...data,
|
|
||||||
valueField: { ...data.valueField, display: getDisplayProcessor({ field: data.valueField, theme }) },
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Graph series={seriesWithDisplay} {...args}>
|
|
||||||
<VizTooltip mode={tooltipMode} />
|
|
||||||
</Graph>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const CustomGraphTooltip = ({ activeDimensions }: VizTooltipContentProps) => {
|
|
||||||
return (
|
|
||||||
<div style={{ height: '200px' }}>
|
|
||||||
<div>Showing currently active active dimensions:</div>
|
|
||||||
<JSONFormatter json={activeDimensions || {}} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithCustomTooltip: Story<GraphProps & { tooltipMode: TooltipDisplayMode }> = ({
|
|
||||||
tooltipMode,
|
|
||||||
...args
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<Graph {...args}>
|
|
||||||
<VizTooltip mode={tooltipMode} tooltipComponent={CustomGraphTooltip} />
|
|
||||||
</Graph>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -37,6 +37,13 @@ interface GraphState {
|
|||||||
contextItem?: FlotItem<GraphSeriesXY>;
|
contextItem?: FlotItem<GraphSeriesXY>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is a react wrapper for the angular, flot based graph visualization.
|
||||||
|
* Rather than using this component, you should use the `<PanelRender .../> with
|
||||||
|
* timeseries panel configs.
|
||||||
|
*
|
||||||
|
* @deprecated
|
||||||
|
*/
|
||||||
export class Graph extends PureComponent<GraphProps, GraphState> {
|
export class Graph extends PureComponent<GraphProps, GraphState> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
showLines: true,
|
showLines: true,
|
||||||
|
|||||||
@ -1,84 +0,0 @@
|
|||||||
import { FieldColorModeId, toDataFrame, dateTime } from '@grafana/data';
|
|
||||||
import React from 'react';
|
|
||||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
|
||||||
import { GraphNGProps } from './GraphNG';
|
|
||||||
import { LegendDisplayMode, LegendPlacement } from '@grafana/schema';
|
|
||||||
import { prepDataForStorybook } from '../../utils/storybook/data';
|
|
||||||
import { useTheme2 } from '../../themes';
|
|
||||||
import { Story } from '@storybook/react';
|
|
||||||
import { TimeSeries } from '../TimeSeries/TimeSeries';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Visualizations/GraphNG',
|
|
||||||
component: TimeSeries,
|
|
||||||
decorators: [withCenteredStory],
|
|
||||||
parameters: {
|
|
||||||
controls: {
|
|
||||||
exclude: ['className', 'data', 'legend', 'fields', 'structureRev', 'onLegendClick', 'preparePlotFrame'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
argTypes: {
|
|
||||||
legendDisplayMode: { control: { type: 'radio', options: ['table', 'list', 'hidden'] } },
|
|
||||||
placement: { control: { type: 'radio', options: ['bottom', 'right'] } },
|
|
||||||
timeZone: { control: { type: 'radio', options: ['browser', 'utc'] } },
|
|
||||||
width: { control: { type: 'range', min: 200, max: 800 } },
|
|
||||||
height: { control: { type: 'range', min: 200, max: 800 } },
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
interface StoryProps extends GraphNGProps {
|
|
||||||
legendDisplayMode: string;
|
|
||||||
placement: LegendPlacement;
|
|
||||||
unit: string;
|
|
||||||
}
|
|
||||||
export const Lines: Story<StoryProps> = ({ placement, unit, legendDisplayMode, ...args }) => {
|
|
||||||
const theme = useTheme2();
|
|
||||||
const seriesA = toDataFrame({
|
|
||||||
target: 'SeriesA',
|
|
||||||
datapoints: [
|
|
||||||
[10, 1546372800000],
|
|
||||||
[20, 1546376400000],
|
|
||||||
[10, 1546380000000],
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
seriesA.fields[1].config.custom = { line: { show: true } };
|
|
||||||
seriesA.fields[1].config.color = { mode: FieldColorModeId.PaletteClassic };
|
|
||||||
seriesA.fields[1].config.unit = unit;
|
|
||||||
|
|
||||||
const data = prepDataForStorybook([seriesA], theme);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TimeSeries
|
|
||||||
{...args}
|
|
||||||
frames={data}
|
|
||||||
legend={{
|
|
||||||
displayMode:
|
|
||||||
legendDisplayMode === 'hidden'
|
|
||||||
? LegendDisplayMode.Hidden
|
|
||||||
: legendDisplayMode === 'table'
|
|
||||||
? LegendDisplayMode.Table
|
|
||||||
: LegendDisplayMode.List,
|
|
||||||
placement: placement,
|
|
||||||
calcs: [],
|
|
||||||
}}
|
|
||||||
timeZone="browser"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Lines.args = {
|
|
||||||
width: 600,
|
|
||||||
height: 400,
|
|
||||||
timeRange: {
|
|
||||||
from: dateTime(1546372800000),
|
|
||||||
to: dateTime(1546380000000),
|
|
||||||
raw: {
|
|
||||||
from: dateTime(1546372800000),
|
|
||||||
to: dateTime(1546380000000),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legendDisplayMode: 'list',
|
|
||||||
placement: 'bottom',
|
|
||||||
unit: 'short',
|
|
||||||
timeZone: 'browser',
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user