@grafana/ui – render a Graph within react app

Grafana Plugin Development
1

Hey guys,

I am trying to use the @grafana/ui package to render a Graph within a small internal React application. I am not sure if I am missing something, here is a sample code:

import * as React from "react";
import { Graph, Chart } from "@grafana/ui";

import {
  GraphSeriesXY,
  FieldType,
  ArrayVector,
  dateTime,
  FieldColorMode
} from "@grafana/data";

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: FieldColorMode.Fixed, fixedColor: "red" } }
    },
    timeStep: 3600000,
    yAxis: {
      index: 0
    }
  },
  {
    data: [
      [1546372800000, 20],
      [1546376400000, 30],
      [1546380000000, 40]
    ],
    color: "blue",
    isVisible: true,
    label: "B-series",
    seriesIndex: 0,
    timeField: {
      type: FieldType.time,
      name: "time",
      values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
      config: {}
    },
    valueField: {
      type: FieldType.number,
      name: "b-series",
      values: new ArrayVector([20, 30, 40]),
      config: { color: { mode: FieldColorMode.Fixed, fixedColor: "blue" } }
    },
    timeStep: 3600000,
    yAxis: {
      index: 0
    }
  }
];

class App extends React.Component {
  render() {
    return (
      <div>
        <Graph
          height={300}
          width={600}
          series={series}
          timeRange={{
            from: dateTime(1546372800000),
            to: dateTime(1546380000000),
            raw: {
              from: dateTime(1546372800000),
              to: dateTime(1546380000000)
            }
          }}
          timeZone="browser"
        >
          <Chart.Tooltip mode={"single"} />
        </Graph>
      </div>
    );
  }
}

export default App;

So the component currently throws an exception:

Graph rendering error TypeError: jquery.plot is not a function
    at Graph../node_modules/@grafana/ui/index.development.js.Graph.draw (Graph.js:259)
    at Graph../node_modules/@grafana/ui/index.development.js.Graph.componentDidMount (Graph.js:160)
    at commitLifeCycles (react-dom.development.js:22101)
    at commitLayoutEffects (react-dom.development.js:25344)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at commitRootImpl (react-dom.development.js:25082)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)

Does anyone have an idea what I’ve might be missing?
Thanks

2

Anyone that might have an idea?

3

I think the presumption is that you will be using this within Grafana, not as a charting library. Usually React projects will not include jquery, and since it’s not used in most of them it’s not going to be standard how to include it (so it might be called $, or jq, or jQuery). Plot is a plugin to jQuery that you would also probably need to install and get running yourself. IANE, but you’re probably going to create a lot of problems for yourself trying to use pieces of the Grafana open-source code this way.

4

Hi @honeybadger,

Including dependencies into your package.json may help. E.g.:

"devDependencies": {
"@grafana/data": "next",
"@grafana/toolkit": "next",
"@grafana/ui": "next",
"jquery": "next",
"jquery.flot": "next"
...

}

jquery.plot located in Flot https://www.npmjs.com/package/jquery.flot

And it looks @amyatbroadcom has a point.

Regards,

V.