-
(this.element = e)}
- style={{ height, width }}
- onMouseLeave={() => {
- this.setState({ isTooltipVisible: false });
- }}
- />
- {noDataToBeDisplayed &&
No data
}
- {tooltip}
- {context}
-
- );
- }
-}
-
-export default Graph;
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx
deleted file mode 100644
index fc960695a68..00000000000
--- a/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { difference, isEqual } from 'lodash';
-import React, { Component } from 'react';
-
-import { GraphSeriesXY } from '@grafana/data';
-
-/** @deprecated */
-export interface GraphSeriesTogglerAPI {
- onSeriesToggle: (label: string, event: React.MouseEvent
) => void;
- toggledSeries: GraphSeriesXY[];
-}
-
-/** @deprecated */
-export interface GraphSeriesTogglerProps {
- children: (api: GraphSeriesTogglerAPI) => JSX.Element;
- series: GraphSeriesXY[];
- onHiddenSeriesChanged?: (hiddenSeries: string[]) => void;
-}
-
-/** @deprecated */
-export interface GraphSeriesTogglerState {
- hiddenSeries: string[];
- toggledSeries: GraphSeriesXY[];
-}
-
-/** @deprecated */
-export class GraphSeriesToggler extends Component {
- constructor(props: GraphSeriesTogglerProps) {
- super(props);
-
- this.onSeriesToggle = this.onSeriesToggle.bind(this);
-
- this.state = {
- hiddenSeries: [],
- toggledSeries: props.series,
- };
- }
-
- componentDidUpdate(prevProps: Readonly) {
- const { series } = this.props;
- if (!isEqual(prevProps.series, series)) {
- this.setState({ hiddenSeries: [], toggledSeries: series });
- }
- }
-
- onSeriesToggle(label: string, event: React.MouseEvent) {
- const { series, onHiddenSeriesChanged } = this.props;
- const { hiddenSeries } = this.state;
-
- if (event.ctrlKey || event.metaKey || event.shiftKey) {
- // Toggling series with key makes the series itself to toggle
- const newHiddenSeries =
- hiddenSeries.indexOf(label) > -1
- ? hiddenSeries.filter((series) => series !== label)
- : hiddenSeries.concat([label]);
-
- const toggledSeries = series.map((series) => ({
- ...series,
- isVisible: newHiddenSeries.indexOf(series.label) === -1,
- }));
- this.setState({ hiddenSeries: newHiddenSeries, toggledSeries }, () =>
- onHiddenSeriesChanged ? onHiddenSeriesChanged(newHiddenSeries) : undefined
- );
- return;
- }
-
- // Toggling series with out key toggles all the series but the clicked one
- const allSeriesLabels = series.map((series) => series.label);
- const newHiddenSeries =
- hiddenSeries.length + 1 === allSeriesLabels.length ? [] : difference(allSeriesLabels, [label]);
- const toggledSeries = series.map((series) => ({
- ...series,
- isVisible: newHiddenSeries.indexOf(series.label) === -1,
- }));
-
- this.setState({ hiddenSeries: newHiddenSeries, toggledSeries }, () =>
- onHiddenSeriesChanged ? onHiddenSeriesChanged(newHiddenSeries) : undefined
- );
- }
-
- render() {
- const { children } = this.props;
- const { toggledSeries } = this.state;
-
- return children({
- onSeriesToggle: this.onSeriesToggle,
- toggledSeries,
- });
- }
-}
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/GraphTooltip.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/GraphTooltip.tsx
deleted file mode 100644
index d58c0816dfe..00000000000
--- a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/GraphTooltip.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { TooltipDisplayMode } from '@grafana/schema';
-
-import { VizTooltipContentProps } from '../../../components/VizTooltip';
-
-import { MultiModeGraphTooltip } from './MultiModeGraphTooltip';
-import { SingleModeGraphTooltip } from './SingleModeGraphTooltip';
-import { GraphDimensions } from './types';
-
-/** @deprecated */
-export const GraphTooltip = ({
- mode = TooltipDisplayMode.Single,
- dimensions,
- activeDimensions,
- pos,
- timeZone,
-}: VizTooltipContentProps) => {
- // When
- // [1] no active dimension or
- // [2] no xAxis position
- // we assume no tooltip should be rendered
- if (!activeDimensions || !activeDimensions.xAxis) {
- return null;
- }
-
- if (mode === 'single') {
- return ;
- } else {
- return (
-
- );
- }
-};
-
-GraphTooltip.displayName = 'GraphTooltip';
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx
deleted file mode 100644
index 1af501183a6..00000000000
--- a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { createDimension, createTheme, FieldType, DisplayProcessor } from '@grafana/data';
-
-import { ActiveDimensions } from '../../../components/VizTooltip';
-
-import { MultiModeGraphTooltip } from './MultiModeGraphTooltip';
-import { GraphDimensions } from './types';
-
-let dimensions: GraphDimensions;
-
-describe('MultiModeGraphTooltip', () => {
- const display: DisplayProcessor = (v) => ({ numeric: Number(v), text: String(v), color: 'red' });
- const theme = createTheme();
-
- describe('when shown when hovering over a datapoint', () => {
- beforeEach(() => {
- dimensions = {
- xAxis: createDimension('xAxis', [
- {
- config: {},
- values: [0, 100, 200],
- name: 'A-series time',
- type: FieldType.time,
- display,
- },
- {
- config: {},
- values: [0, 100, 200],
- name: 'B-series time',
- type: FieldType.time,
- display,
- },
- ]),
- yAxis: createDimension('yAxis', [
- {
- config: {},
- values: [10, 20, 10],
- name: 'A-series values',
- type: FieldType.number,
- display,
- },
- {
- config: {},
- values: [20, 30, 40],
- name: 'B-series values',
- type: FieldType.number,
- display,
- },
- ]),
- };
- });
-
- it('highlights series of the datapoint', () => {
- // We are simulating hover over A-series, middle point
- const activeDimensions: ActiveDimensions = {
- xAxis: [0, 1], // column, row
- yAxis: [0, 1], // column, row
- };
- render(
-
- );
-
- // We rendered two series rows
- const rows = screen.getAllByTestId('SeriesTableRow');
- expect(rows.length).toEqual(2);
-
- // We expect A-series(1st row) not to be highlighted
- expect(rows[0]).toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`);
- // We expect B-series(2nd row) not to be highlighted
- expect(rows[1]).not.toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`);
- });
-
- it("doesn't highlight series when not hovering over datapoint", () => {
- // We are simulating hover over graph, but not datapoint
- const activeDimensions: ActiveDimensions = {
- xAxis: [0, undefined], // no active point in time
- yAxis: null, // no active series
- };
-
- render(
-
- );
-
- // We rendered two series rows
- const rows = screen.getAllByTestId('SeriesTableRow');
- expect(rows.length).toEqual(2);
-
- // We expect A-series(1st row) not to be highlighted
- expect(rows[0]).not.toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`);
- // We expect B-series(2nd row) not to be highlighted
- expect(rows[1]).not.toHaveStyle(`font-weight: ${theme.typography.fontWeightMedium}`);
- });
- });
-});
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.tsx
deleted file mode 100644
index bfe2856c700..00000000000
--- a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { getValueFromDimension } from '@grafana/data';
-
-import { SeriesTable } from '../../../components/VizTooltip';
-import { FlotPosition } from '../../../components/VizTooltip/VizTooltip';
-import { getMultiSeriesGraphHoverInfo } from '../utils';
-
-import { GraphTooltipContentProps } from './types';
-
-/** @deprecated */
-type Props = GraphTooltipContentProps & {
- // We expect position to figure out correct values when not hovering over a datapoint
- pos: FlotPosition;
-};
-
-/** @deprecated */
-export const MultiModeGraphTooltip = ({ dimensions, activeDimensions, pos, timeZone }: Props) => {
- let activeSeriesIndex: number | null = null;
- // when no x-axis provided, skip rendering
- if (activeDimensions.xAxis === null) {
- return null;
- }
-
- if (activeDimensions.yAxis) {
- activeSeriesIndex = activeDimensions.yAxis[0];
- }
-
- // when not hovering over a point, time is undefined, and we use pos.x as time
- const time = activeDimensions.xAxis[1]
- ? getValueFromDimension(dimensions.xAxis, activeDimensions.xAxis[0], activeDimensions.xAxis[1])
- : pos.x;
-
- const hoverInfo = getMultiSeriesGraphHoverInfo(dimensions.yAxis.columns, dimensions.xAxis.columns, time, timeZone);
- const timestamp = hoverInfo.time;
-
- const series = hoverInfo.results.map((s, i) => {
- return {
- color: s.color,
- label: s.label,
- value: s.value,
- isActive: activeSeriesIndex === i,
- };
- });
-
- return ;
-};
-
-MultiModeGraphTooltip.displayName = 'MultiModeGraphTooltip';
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/SingleModeGraphTooltip.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/SingleModeGraphTooltip.tsx
deleted file mode 100644
index 7eb4d61872c..00000000000
--- a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/SingleModeGraphTooltip.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-
-import {
- getValueFromDimension,
- getColumnFromDimension,
- formattedValueToString,
- getFieldDisplayName,
-} from '@grafana/data';
-
-import { SeriesTable } from '../../../components/VizTooltip';
-
-import { GraphTooltipContentProps } from './types';
-
-/** @deprecated */
-export const SingleModeGraphTooltip = ({ dimensions, activeDimensions, timeZone }: GraphTooltipContentProps) => {
- // not hovering over a point, skip rendering
- if (
- activeDimensions.yAxis === null ||
- activeDimensions.yAxis[1] === undefined ||
- activeDimensions.xAxis === null ||
- activeDimensions.xAxis[1] === undefined
- ) {
- return null;
- }
- const time = getValueFromDimension(dimensions.xAxis, activeDimensions.xAxis[0], activeDimensions.xAxis[1]);
- const timeField = getColumnFromDimension(dimensions.xAxis, activeDimensions.xAxis[0]);
- const processedTime = timeField.display ? formattedValueToString(timeField.display(time)) : time;
-
- const valueField = getColumnFromDimension(dimensions.yAxis, activeDimensions.yAxis[0]);
- const value = getValueFromDimension(dimensions.yAxis, activeDimensions.yAxis[0], activeDimensions.yAxis[1]);
- const display = valueField.display!;
- const disp = display(value);
-
- return (
-
- );
-};
-
-SingleModeGraphTooltip.displayName = 'SingleModeGraphTooltip';
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/types.ts b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/types.ts
deleted file mode 100644
index d4d68b729c1..00000000000
--- a/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Dimension, Dimensions, TimeZone } from '@grafana/data';
-
-import { ActiveDimensions } from '../../../components/VizTooltip';
-
-/** @deprecated */
-export interface GraphDimensions extends Dimensions {
- xAxis: Dimension;
- yAxis: Dimension;
-}
-
-/** @deprecated */
-export interface GraphTooltipContentProps {
- dimensions: GraphDimensions; // Dimension[]
- activeDimensions: ActiveDimensions;
- timeZone?: TimeZone;
-}
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.internal.story.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.internal.story.tsx
deleted file mode 100644
index 0830b44f198..00000000000
--- a/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.internal.story.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-
-import { GraphSeriesXY, FieldType, dateTime, FieldColorModeId } from '@grafana/data';
-import { LegendDisplayMode } from '@grafana/schema';
-
-import { GraphWithLegend, GraphWithLegendProps } from './GraphWithLegend';
-
-export default {
- title: 'Visualizations/Graph/GraphWithLegend',
- component: GraphWithLegend,
- parameters: {
- controls: {
- exclude: ['className', 'ariaLabel', 'legendDisplayMode', 'series'],
- },
- },
- argTypes: {
- displayMode: { control: { type: 'radio' }, options: ['table', 'list', 'hidden'] },
- placement: { control: { type: 'radio' }, options: ['bottom', 'right'] },
- rightAxisSeries: { name: 'Right y-axis series, i.e. A,C' },
- timeZone: { control: { type: 'radio' }, options: ['browser', 'utc'] },
- width: { control: { type: 'range', min: 200, max: 800 } },
- height: { control: { type: 'range', min: 1700, step: 300 } },
- lineWidth: { control: { type: 'range', min: 1, max: 10 } },
- },
-};
-
-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: [1546372800000, 1546376400000, 1546380000000],
- config: {},
- },
- valueField: {
- type: FieldType.number,
- name: 'a-series',
- values: [10, 20, 10],
- config: {
- color: {
- mode: FieldColorModeId.Fixed,
- fixedColor: 'red',
- },
- },
- },
- timeStep: 3600000,
- yAxis: {
- index: 1,
- },
- },
- {
- data: [
- [1546372800000, 20],
- [1546376400000, 30],
- [1546380000000, 40],
- ],
- color: 'blue',
- isVisible: true,
- label: 'B-series',
- seriesIndex: 1,
- timeField: {
- type: FieldType.time,
- name: 'time',
- values: [1546372800000, 1546376400000, 1546380000000],
- config: {},
- },
- valueField: {
- type: FieldType.number,
- name: 'b-series',
- values: [20, 30, 40],
- config: {
- color: {
- mode: FieldColorModeId.Fixed,
- fixedColor: 'blue',
- },
- },
- },
- timeStep: 3600000,
- yAxis: {
- index: 1,
- },
- },
-];
-
-interface StoryProps extends GraphWithLegendProps {
- rightAxisSeries: string;
- displayMode: string;
-}
-
-export const WithLegend: Story = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
- const props: Partial = {
- series: series.map((s) => {
- if (
- rightAxisSeries
- .split(',')
- .map((s) => s.trim())
- .indexOf(s.label.split('-')[0]) > -1
- ) {
- s.yAxis = { index: 2 };
- } else {
- s.yAxis = { index: 1 };
- }
- return s;
- }),
- };
-
- return (
-
- );
-};
-WithLegend.args = {
- rightAxisSeries: '',
- displayMode: 'list',
- onToggleSort: () => {},
- timeRange: {
- from: dateTime(1546372800000),
- to: dateTime(1546380000000),
- raw: {
- from: dateTime(1546372800000),
- to: dateTime(1546380000000),
- },
- },
- timeZone: 'browser',
- width: 600,
- height: 300,
- placement: 'bottom',
-};
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.tsx
deleted file mode 100644
index a590d5d1ed1..00000000000
--- a/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-// Libraries
-
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2, GraphSeriesValue } from '@grafana/data';
-import { LegendDisplayMode, LegendPlacement } from '@grafana/schema';
-
-import { CustomScrollbar } from '../../components/CustomScrollbar/CustomScrollbar';
-import { VizLegend } from '../../components/VizLegend/VizLegend';
-import { VizLegendItem } from '../../components/VizLegend/types';
-import { useStyles2 } from '../../themes';
-
-import { Graph, GraphProps } from './Graph';
-
-export interface GraphWithLegendProps extends GraphProps {
- legendDisplayMode: LegendDisplayMode;
- legendVisibility: boolean;
- placement: LegendPlacement;
- hideEmpty?: boolean;
- hideZero?: boolean;
- sortLegendBy?: string;
- sortLegendDesc?: boolean;
- onSeriesToggle?: (label: string, event: React.MouseEvent) => void;
- onToggleSort: (sortBy: string) => void;
-}
-
-const shouldHideLegendItem = (data: GraphSeriesValue[][], hideEmpty = false, hideZero = false) => {
- const isZeroOnlySeries = data.reduce((acc, current) => acc + (current[1] || 0), 0) === 0;
- const isNullOnlySeries = !data.reduce((acc, current) => acc && current[1] !== null, true);
-
- return (hideEmpty && isNullOnlySeries) || (hideZero && isZeroOnlySeries);
-};
-
-export const GraphWithLegend = (props: GraphWithLegendProps) => {
- const {
- series,
- timeRange,
- width,
- height,
- showBars,
- showLines,
- showPoints,
- sortLegendBy,
- sortLegendDesc,
- legendDisplayMode,
- legendVisibility,
- placement,
- onSeriesToggle,
- onToggleSort,
- hideEmpty,
- hideZero,
- isStacked,
- lineWidth,
- onHorizontalRegionSelected,
- timeZone,
- children,
- ariaLabel,
- } = props;
- const { graphContainer, wrapper, legendContainer } = useStyles2(getGraphWithLegendStyles, props.placement);
-
- const legendItems = series.reduce((acc, s) => {
- return shouldHideLegendItem(s.data, hideEmpty, hideZero)
- ? acc
- : acc.concat([
- {
- label: s.label,
- color: s.color || '',
- disabled: !s.isVisible,
- yAxis: s.yAxis.index,
- getDisplayValues: () => s.info || [],
- },
- ]);
- }, []);
-
- return (
-
-
-
- {children}
-
-
-
- {legendVisibility && (
-
-
- {
- if (onSeriesToggle) {
- onSeriesToggle(item.label, event);
- }
- }}
- onToggleSort={onToggleSort}
- />
-
-
- )}
-