D3.js Panel Plugin - why none?

Grafana Plugin Development
21

Thank you for the update @davidharris . Good news.

Is it useful to consider these two functions of Grafana separately?

  1. Authoring of charts
  2. Dashboard for charts

If we want to allow Authoring of charts, then this requires extensive PanelPlugin development. On the other hand, to elegantly support d3 as a chart inside the Grafana Dashboard, seems to me to be far less effort.

I am not sure how much work it will take to update the tutorial that you reference so that it includes the steps for a D3 Dynamic Panel as described here: Build a panel plugin | Grafana Plugin Tools

Adding the step of connecting to the data source and data frame would quickly give us a Dynamic D3 Panel and this could then serve as a nice POC as proposed by @yosiasz
The community would then be free to develop their own ad-hoc D3 outside of Grafana and plug these charts into their Grafana Dashboard.

Such a feature could attract more D3 interest to Grafana which could then give more resources to work on 1. Authoring of charts and the required panel development.
For me this also represents an interesting paradigm.
Bring your own IDE/Editor/Whatever and work interchangeably on the same code. So we have the best of both worlds.

Is such a step of a dynamic d3 Panel Plugin much work and could it be seen as a promising way to bring d3 interest to the great Grafana project?

1 Like
22

d3 heat map using dynamic text

image
image835×827 26.8 KB

1 Like
23

Building incrementally, as you suggested, allows for a solid foundation with minimal functionality in v1.0 and then expanding into additional features and plugins like D3 time series and bars.

24

I hope you succeed with your project.

25

We published a new blog post on how to incorporate D3js and Flow.io chart in Grafana:

2 Likes
27

Hail Mikhail!

Are you able to share whether this approach support global and template vars?

Any gotchas that we could/should know about?

Would absolutely love to see a working example in the playground and then tool up an implementation from there.

:blush:

28

@allomorphy There are multiple ways to support variables:

Documentation includes a lot of use cases and examples:

1 Like
29

Hi again folks,

We have no problem using the dynamic text panel with the Plotly library, however after much effort, have been unable to make a working example with the Observable Plot Library here: Observable Plot | The JavaScript library for exploratory data visualization

Has anyone achieved this? Then please let us have an example/solution.

Many thanks for any help!
E

The last attempt gave the error:
Plot is not defined

The following source was defined in scripts in the editor panel:
https://cdn.skypack.dev/@observablehq/plot@0.6

This js in the Javascript Editor:

const datas = [
  { x: 1, y: 5 },
  { x: 2, y: 7 },
  { x: 3, y: 3 },
  { x: 4, y: 8 },
  { x: 5, y: 6 }
];

const plot = Plot.plot({
  marks: [
    Plot.lineX(datas, { x: "x", y: "y", stroke: "steelblue" })
  ],
  x: {
    label: "X-axis"
  },
  y: {
    label: "Y-axis"
  },
  width: 600,
  height: 400
});

const plotDiv = document.getElementById("plot");
plotDiv.appendChild(plot);

Here is the full panel json:

{
  "datasource": {
    "type": "datasource",
    "uid": "grafana"
  },
  "fieldConfig": {
    "defaults": {
      "thresholds": {
        "mode": "absolute",
        "steps": [
          {
            "color": "green",
            "value": null
          }
        ]
      }
    },
    "overrides": []
  },
  "gridPos": {
    "h": 12,
    "w": 13,
    "x": 0,
    "y": 0
  },
  "id": 2,
  "options": {
    "renderMode": "data",
    "editors": [
      "helpers",
      "afterRender"
    ],
    "externalStyles": [],
    "externalScripts": [
      {
        "id": "bac9c920-66c8-450c-9492-3ad6e0365a06",
        "url": "https://cdn.skypack.dev/@observablehq/plot@0.6"
      }
    ],
    "editor": {
      "language": "html",
      "format": "auto",
      "height": 254
    },
    "wrap": true,
    "content": "<!DOCTYPE html>\n<html>\n\n  <h1>Observable Plot Example</h1>\n  <div id=\"plot\"></div>\n\n</html>",
    "defaultContent": "The query didn't return any results. Sorrry!",
    "helpers": "const datas = [\n  { x: 1, y: 5 },\n  { x: 2, y: 7 },\n  { x: 3, y: 3 },\n  { x: 4, y: 8 },\n  { x: 5, y: 6 }\n];\n\nconst plot = Plot.plot({\n  marks: [\n    Plot.lineX(datas, { x: \"x\", y: \"y\", stroke: \"steelblue\" })\n  ],\n  x: {\n    label: \"X-axis\"\n  },\n  y: {\n    label: \"Y-axis\"\n  },\n  width: 600,\n  height: 400\n});\n\nconst plotDiv = document.getElementById(\"plot\");\nplotDiv.appendChild(plot);",
    "afterRender": "const datas = [\n  { x: 1, y: 5 },\n  { x: 2, y: 7 },\n  { x: 3, y: 3 },\n  { x: 4, y: 8 },\n  { x: 5, y: 6 }\n];\n\nconst plot = Plot.plot({\n  marks: [\n    Plot.lineX(datas, { x: \"x\", y: \"y\", stroke: \"steelblue\" })\n  ],\n  x: {\n    label: \"X-axis\"\n  },\n  y: {\n    label: \"Y-axis\"\n  },\n  width: 600,\n  height: 400\n});\n\nconst plotDiv = document.getElementById(\"plot\");\nplotDiv.appendChild(plot);",
    "styles": "",
    "status": "A-series"
  },
  "pluginVersion": "4.5.0",
  "targets": [
    {
      "datasource": {
        "type": "datasource",
        "uid": "grafana"
      },
      "queryType": "randomWalk",
      "refId": "A"
    }
  ],
  "title": "all in one Plot ATTEMPT",
  "type": "marcusolsson-dynamictext-panel",
  "description": ""
}
30

look at your external resource, manually go to it

https://cdn.skypack.dev/@observablehq/plot@0.6

31

looks like you have another thread open

will close this one.