How can i link a prometheus query result to my svg objects ?

[yanisbinks]

Hello I am using Prometheus to monitor the switches on my network. I can set SVG IDs for my switches, but I’m having trouble figuring out how to make them change color (green if they’re up, red if they’re down).

How can I link the SVG IDs with a Prometheus query to achieve this?

Thanks in advance for your help!

[andymchugh]

Cut down your svg and yaml to a minimal example. Use test data in your yaml. See if the debugging mappings explains the problem. If not post the minimal svg and yaml here and I can have a look

[mvadim85]

Hello. I have same question. It's not clear how to associate the data from the request with the SVG ID.

[mvadim85]

Sorry. I haven't finished reading the instructions. there is a description of how to do it, but when I added a time series panel called "test-flow" as a query and then changed 'db_transactions: dataRef: "test-data-large-sin"' to 'db_transactions: dataRef: "test-flow"' in the file "panel config" , nothing changed in the panel. How do I make it work? SVG file: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg Panel Config : https://raw.githubusercontent.com/mvadim85/grafana/refs/heads/master/panelConfig1.yaml

[NielsGangster]

@yanisbinks Did u find the problem because i have the exact same problem.

[yanisbinks]

@yanisbinks Did u find the problem because i have the exact same problem.

Hello no i still havnt found the solution

[andymchugh]

I'm happy to fix problems with the plugin or help people get going where they are finding it hard to follow the docs. But the starting point has to be a minimal coherent example. In this issue people are having trouble getting a data source to drive a cell. So a usable example would be the example1 svg and yaml with one of the yaml dataRefs changed over to your data source and a paste of what the Mappings and Data buttons dump to the console. If you want to speed up help more, then cut down the example1 svg and yaml to something minimal, i.e. just one widget in the svg and one cell in the yaml, that works with test data, but doesn't when changed to your data source. That way the Mappings and Data console dumps will be small and readable.

With what you've each posted so far, there is no way to help.

[yanisbinks]

Hello here is my svg : dsd.txt And here's my YAML yamlrules.txt Here's what i get when i click on mapping : Debugging Mappings: abstract: Array [ "id=test, svgCellId=cell-test, dataRef=probe_success{instance='192.168.210.37'}" ] ​ 0: "id=test, svgCellId=cell-test, dataRef=probe_success{instance='192.168.210.37'}" ​ length: 1 ​

: Array [] [module.js:22:6840](http://1.1.20.143:3000/public/plugins/andrewbmchugh-flow-panel/module.js?_cache=1.12.0) Debugging Mappings: verbose: Object { width: 177.5, height: 84.5, scaleDrive: true, cells: Map(1), elementAttribs: Map(1), variableValues: Map(0), highlightFactors: {…} } ​ cells: Map { test → {…} } ​ elementAttribs: Map { "cell-test@flowrpt0" → {…} } ​ height: 84.5 ​ highlightFactors: Object { highlightRgbFactor: 5, lowlightAlphaFactor: 0.3 } ​ scaleDrive: true ​ variableValues: Map(0) ​ width: 177.5 ​ : Object { … } [module.js:22:6887](http://1.1.20.143:3000/public/plugins/andrewbmchugh-flow-panel/module.js?_cache=1.12.0) Debugging Mappings: unmapped config ids: Set [] ​ size: 0 ​ ​ : Set.prototype { … } [module.js:22:6941](http://1.1.20.143:3000/public/plugins/andrewbmchugh-flow-panel/module.js?_cache=1.12.0) Debugging Mappings: unmapped svg ids: Set [ "cell-ndzKUcg4R7CAdZtcRgKq-2" ] ​ size: 1 ​ ​ : Set.prototype { … } And here is data : Debugging Data enriched: Object { timeMin: 1729583907780, timeMax: 1729605528858, timeRange: 21621078, ts: Map(1) } ​ timeMax: 1729605528858 ​ timeMin: 1729583907780 ​ timeRange: 21621078 ​ ts: Map { '{__name__="probe_success", instance="192.168.210.37", job="blackbox"}' → {…} } ​​ size: 1 ​​ ​​ : Map.prototype { … } ​ : Object { … } [module.js:22:7193](http://1.1.20.143:3000/public/plugins/andrewbmchugh-flow-panel/module.js?_cache=1.12.0) Debugging Data raw: Array [ {…} ] ​ 0: Object { refId: "210.37", meta: {…}, length: 1, … } ​ length: 1 ​ : Array [] Thanks

[andymchugh]

ok, there's a few things that are wrong with your set of data but what really stands out is you must be changing many things at a time and expecting to be able to make it work. In this panel you've got to tie together svg -> yaml -> data-source and you'll only be able to do that if you just change one thing at a time . The moment you start changing many things you'll get lost.

As I understand it you are trying to get your data-source to feed into your picture. So you should be starting with the example-svg and the example-yaml and getting your data-source driving one of the cells in that working example using the Data and Mappings to understand how your datasource is named in the grafana dataframe that's given to the plugin. Once you understand how your queries feed into the panel you can start changing out the picture and yaml, one piece at a time.

Given what you've attached the following problems jump out:

• I can't load the svg into draw.io v 24.7.17. Don't know why. Maybe you are on a later version?
• When I format your svg in vscode to have a look at it, the element cell-test contains a rect but no text element. As such you could drive the fillColor or the strokeColor of that inner rect but not the label or labelColor that you have in your yaml as they don't exist inside that cell in your svg.
• the threshold set for the labelColor that you have defined is defined as a 'thresholdRef'. i.e. somewhere in your yaml you need to associate a threshold set with that reference. But you haven't. Maybe you've defined that 'queuedepth' reference in site yaml, but you haven't included that above so I have to assume its just undefined.
• Looking at how the text is presented it's multiline. This plugin doesn't support driving multiline labels. Also looking at where in the svg that label is defined, it's not part of the cell-test element tree so even if it was a single line it still wouldn't be drivable under cell-test.
• I get that you've tried to produce a minimal svg, appreciate that. If you look in it using a beautifier you'll see there's a big old image embedded in it and removing that would make it easier for you to troubleshoot, understand what's going on.

Put all those things together and this adjusted yaml, driven off of test-data correctly drives the fillColor of the rect.

---

gradientMode: "hue"
cellIdPreamble: "cell-"
cells: 
  test:
    dataRef: "test-data-small-cos"
    label:
      separator: "cr"
      units: "none"
      decimalPoints: 0
    fillColor:
      thresholds:
      - {color: "green", level: 50}
      - {color: "orange", level: 100}
      - {color: "red", level: 200}

Does that give you enough to explore further? Can we close this out?

[yanisbinks]

Thanks a lot for your help and work on that plugin I know where to look now, we can close the issue