diff --git a/packages/grafana-ui/src/components/Graph/Graph.story.internal.tsx b/packages/grafana-ui/src/components/Graph/Graph.story.internal.tsx deleted file mode 100644 index 08b1451d6c1..00000000000 --- a/packages/grafana-ui/src/components/Graph/Graph.story.internal.tsx +++ /dev/null @@ -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 = ({ - tooltipMode, - series, - ...args -}) => { - const theme = useTheme2(); - const seriesWithDisplay = series.map((data) => ({ - ...data, - valueField: { ...data.valueField, display: getDisplayProcessor({ field: data.valueField, theme }) }, - })); - - return ( - - - - ); -}; - -const CustomGraphTooltip = ({ activeDimensions }: VizTooltipContentProps) => { - return ( -
-
Showing currently active active dimensions:
- -
- ); -}; - -export const WithCustomTooltip: Story = ({ - tooltipMode, - ...args -}) => { - return ( - - - - ); -}; diff --git a/packages/grafana-ui/src/components/Graph/Graph.tsx b/packages/grafana-ui/src/components/Graph/Graph.tsx index 9ab60ab6b61..9938e158cf8 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.tsx +++ b/packages/grafana-ui/src/components/Graph/Graph.tsx @@ -37,6 +37,13 @@ interface GraphState { contextItem?: FlotItem; } +/** + * This is a react wrapper for the angular, flot based graph visualization. + * Rather than using this component, you should use the ` with + * timeseries panel configs. + * + * @deprecated + */ export class Graph extends PureComponent { static defaultProps = { showLines: true, diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.story.internal.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.story.internal.tsx deleted file mode 100644 index ae37418ac46..00000000000 --- a/packages/grafana-ui/src/components/GraphNG/GraphNG.story.internal.tsx +++ /dev/null @@ -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 = ({ 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 ( - - ); -}; -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', -};