+
(this.element = e)}
+ style={{ height, width }}
+ onMouseLeave={() => {
+ this.setState({ isTooltipVisible: false });
+ }}
+ />
+ {noDataToBeDisplayed &&
No data
}
+ {tooltip}
+ {context}
+
+ );
+ }
+}
+
+export default Graph;
diff --git a/public/app/angular/components/legacy_graph_panel/GraphContextMenu.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphContextMenu.tsx
similarity index 86%
rename from public/app/angular/components/legacy_graph_panel/GraphContextMenu.tsx
rename to packages/grafana-ui/src/graveyard/Graph/GraphContextMenu.tsx
index 8d828e6bdf2..5b3da31708a 100644
--- a/public/app/angular/components/legacy_graph_panel/GraphContextMenu.tsx
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphContextMenu.tsx
@@ -9,29 +9,21 @@ import {
TimeZone,
FormattedValue,
GrafanaTheme2,
- Dimension,
} from '@grafana/data';
-import {
- ContextMenu,
- ContextMenuProps,
- FormattedValueDisplay,
- HorizontalGroup,
- MenuGroup,
- MenuGroupProps,
- MenuItem,
- SeriesIcon,
- useStyles2,
-} from '@grafana/ui';
+
+import { ContextMenu, ContextMenuProps } from '../../components/ContextMenu/ContextMenu';
+import { FormattedValueDisplay } from '../../components/FormattedValueDisplay/FormattedValueDisplay';
+import { HorizontalGroup } from '../../components/Layout/Layout';
+import { MenuGroup, MenuGroupProps } from '../../components/Menu/MenuGroup';
+import { MenuItem } from '../../components/Menu/MenuItem';
+import { SeriesIcon } from '../../components/VizLegend/SeriesIcon';
+import { useStyles2 } from '../../themes';
+
+import { GraphDimensions } from './GraphTooltip/types';
/** @deprecated */
export type ContextDimensions
= { [key in keyof T]: [number, number | undefined] | null };
-/** @deprecated */
-export interface GraphDimensions extends Dimensions {
- xAxis: Dimension;
- yAxis: Dimension;
-}
-
/** @deprecated */
export type GraphContextMenuProps = ContextMenuProps & {
getContextMenuSource: () => FlotDataPoint | null;
diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx
new file mode 100644
index 00000000000..fc960695a68
--- /dev/null
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx
@@ -0,0 +1,89 @@
+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
new file mode 100644
index 00000000000..d58c0816dfe
--- /dev/null
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/GraphTooltip.tsx
@@ -0,0 +1,41 @@
+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
new file mode 100644
index 00000000000..1af501183a6
--- /dev/null
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx
@@ -0,0 +1,106 @@
+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
new file mode 100644
index 00000000000..bfe2856c700
--- /dev/null
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.tsx
@@ -0,0 +1,49 @@
+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
new file mode 100644
index 00000000000..7eb4d61872c
--- /dev/null
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/SingleModeGraphTooltip.tsx
@@ -0,0 +1,48 @@
+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
new file mode 100644
index 00000000000..d4d68b729c1
--- /dev/null
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphTooltip/types.ts
@@ -0,0 +1,16 @@
+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
new file mode 100644
index 00000000000..0830b44f198
--- /dev/null
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.internal.story.tsx
@@ -0,0 +1,141 @@
+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
new file mode 100644
index 00000000000..a590d5d1ed1
--- /dev/null
+++ b/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.tsx
@@ -0,0 +1,132 @@
+// 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}
+ />
+
+
+ )}
+