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