Open Chore: remove graph(NG) from storybook (#43735)

packages/grafana-ui/src/components/Graph/Graph.story.internal.tsx

@@ -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>
-  );
-};

packages/grafana-ui/src/components/Graph/Graph.tsx

@@ -37,6 +37,13 @@ interface GraphState {
   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> {
   static defaultProps = {
     showLines: true,

packages/grafana-ui/src/components/GraphNG/GraphNG.story.internal.tsx

@@ -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',
-};