Graph class

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.

Signature

  1. export declare class Graph extends PureComponent<GraphProps, GraphState>

Import

  1. import { Graph } from '@grafana/ui';

Properties

PropertyModifiersTypeDescription
$elementany
defaultPropsstatic{
showLines: boolean;
showPoints: boolean;
showBars: boolean;
isStacked: boolean;
lineWidth: number;
}
elementHTMLElement | null
getBarWidth() => number
onPlotClick(event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void
onPlotHover(event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void
onPlotSelected(event: JQueryEventObject, ranges: {
xaxis: {
from: number;
to: number;
};
}) => void
renderContextMenu() => JSX.Element | null
renderTooltip() => React.ReactElement<VizTooltipProps, string | React.JSXElementConstructor<any>> | null
stateGraphState

Methods

MethodModifiersDescription
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
draw()
getYAxes(series)
render()

$element property

Signature

  1. $element: any;

defaultProps property

Signature

  1. static defaultProps: {
  2.         showLines: boolean;
  3.         showPoints: boolean;
  4.         showBars: boolean;
  5.         isStacked: boolean;
  6.         lineWidth: number;
  7.     };

element property

Signature

  1. element: HTMLElement | null;

getBarWidth property

Signature

  1. getBarWidth: () => number;

onPlotClick property

Signature

  1. onPlotClick: (event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;

onPlotHover property

Signature

  1. onPlotHover: (event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;

onPlotSelected property

Signature

  1. onPlotSelected: (event: JQueryEventObject, ranges: {
  2.         xaxis: {
  3.             from: number;
  4.             to: number;
  5.         };
  6.     }) => void;

renderContextMenu property

Signature

  1. renderContextMenu: () => JSX.Element | null;

renderTooltip property

Signature

  1. renderTooltip: () => React.ReactElement<VizTooltipProps, string | React.JSXElementConstructor<any>> | null;

state property

Signature

  1. state: GraphState;

componentDidMount method

Signature

  1. componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

  1. componentDidUpdate(prevProps: GraphProps, prevState: GraphState): void;

Parameters

ParameterTypeDescription
prevPropsGraphProps
prevStateGraphState

Returns:

void

componentWillUnmount method

Signature

  1. componentWillUnmount(): void;

Returns:

void

draw method

Signature

  1. draw(): void;

Returns:

void

getYAxes method

Signature

  1. getYAxes(series: GraphSeriesXY[]): {
  2.         show: boolean;
  3.         index: number;
  4.         position: string;
  5.         min: number | null | undefined;
  6.         tickDecimals: number | null | undefined;
  7.     }[] | {
  8.         show: boolean;
  9.         min: number;
  10.         max: number;
  11.     }[];

Parameters

ParameterTypeDescription
seriesGraphSeriesXY[]

Returns:

{ show: boolean; index: number; position: string; min: number | null | undefined; tickDecimals: number | null | undefined; }[] | { show: boolean; min: number; max: number; }[]

render method

Signature

  1. render(): JSX.Element;

Returns:

JSX.Element