SVG Panel with Colour Status

Grafana Configuration
1

I am using the SVG Panel to try to re-create the “Status Dot” panel I had before the Version 8 upgrade that hosed it in the upgrade as it no longer exists in the Panel library.

But I cant seem to be able to change the colour attributes of the SVG circles as defined by the SVG builder.

I am trying to map the state of our CRAC units at my work - on/off/standby/unknown
There are 6 units arranged in 2 rows with the colours representing the states.

CRAC-Status

I have defined my SVG as below

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 400 500"><g id="crac1" transform="translate(0 0) rotate(0 0 0) scale(1)"><g id="circle_1" transform="translate(0,0)">
		<svg height="123" viewBox="0 0 250 250" width="132" preserveAspectRatio="none">
			<circle cx="124" cy="125" r="104" style="fill:#c0c0c0;stroke:#000;stroke-width:2">
			</circle>
		</svg>
	</g></g><g id="crac2" transform="translate(150 0) rotate(0 0 0) scale(1)"><g id="circle_1" transform="translate(0,0)">
		<svg height="123" viewBox="0 0 250 250" width="132" preserveAspectRatio="none">
			<circle cx="124" cy="125" r="104" style="fill:#c0c0c0;stroke:#000;stroke-width:2">
			</circle>
		</svg>
	</g></g><g id="crac3" transform="translate(300 0) rotate(0 0 0) scale(1)"><g id="circle_1" transform="translate(0,0)">
		<svg height="123" viewBox="0 0 250 250" width="132" preserveAspectRatio="none">
			<circle cx="124" cy="125" r="104" style="fill:#c0c0c0;stroke:#000;stroke-width:2">
			</circle>
		</svg>
	</g></g><g id="crac4" transform="translate(0 150) rotate(0 0 0) scale(1)"><g id="circle_1" transform="translate(0,0)">
		<svg height="123" viewBox="0 0 250 250" width="132" preserveAspectRatio="none">
			<circle cx="124" cy="125" r="104" style="fill:#c0c0c0;stroke:#000;stroke-width:2">
			</circle>
		</svg>
	</g></g><g id="crac5" transform="translate(150 150) rotate(0 0 0) scale(1)"><g id="circle_1" transform="translate(0,0)">
		<svg height="123" viewBox="0 0 250 250" width="132" preserveAspectRatio="none">
			<circle cx="124" cy="125" r="104" style="fill:#c0c0c0;stroke:#000;stroke-width:2">
			</circle>
		</svg>
	</g></g><g id="crac6" transform="translate(300 150) rotate(0 0 0) scale(1)"><g id="circle_1" transform="translate(0,0)">
		<svg height="123" viewBox="0 0 250 250" width="132" preserveAspectRatio="none">
			<circle cx="124" cy="125" r="104" style="fill:#c0c0c0;stroke:#000;stroke-width:2">
			</circle>
		</svg>
	</g></g></svg>

In the Javascript section I have the following:

var S = Snap(svgnode);
var cmap = { "on": "#008d00", "standby": "#ff8000", "off": "#ff0000", "unknown": "#c0c0c0" };
var c1 = S.select("#crac1");
var c2 = S.select("#crac2");
var c3 = S.select("#crac3");
var c4 = S.select("#crac4");
var c5 = S.select("#crac5");
var c6 = S.select("#crac6");
// Extract latest status of Crac 1 unit from series a text string "on" "standby" "off" or "unknown"
c1val = ctrl.data[0].datapoints[0][0];
c1col = cmap[c1val];
c2val = ctrl.data[0].datapoints[5][0];
c2col = cmap[c2val];
// Set Crac 1 and Crac 6 circles manually to RED colour 
c1.attr( { fill: "#ff0000" } );
c6.attr( { fill: "#ff0000" } );

I try the above but it never works - all I get is the default Grey colour from the default SVG builder.

image

But when you inspect the rendered web page the SVG attributes for CRAC1 and CRAC6 have been coloured RED but they are not showing on the browser as red (as seen above in my sreeenshot).

Here is the inspected code and highlighted effected attributes after they were changed by the javascript code “c1.attr and c2.attr” assignments.

image
image1211×639 87.1 KB

Once I can manually set the colour in the test code above I can then replace the fixed argument with a mapped colour using the assoc array.

Can anyone assist me?

2

I have solved the problem after many days.

One thing I would ask of Grafana. Get developers to write WAY BETTER documentation when they make Panels!

Some panels the documentation is next to non existent.

I think Grafana should not allow panels to be signed and added to the Panel Library unless they pass a documentation review first.

If you use the SVG Builder in my example it wraps the original shape with SVG group elements.

In the example I highlighted the S.select(“#crac1”) code selects the SVG GROUP element not the Circle which is what I wanted. It successfully adds the fill colour attribute but it applies it to the GROUP not the circle definition. And I suspect you cannot FILL a group element you can only FILL a SHAPE (box, circle etc).

Unfortunately the SVG builder option does NOT rename element IDs that it creates by default and offers to the user. If you just add 6 circles it names all of them with circle_1 IDs. But when you come to rename those default IDs it wraps more SVG group “” elements around them that are then renamed to the IDs that you enter in the SVG builder panel.

I have no idea why it does this, its crazy. Why not just rename the ID on the SHAPE you added?

In the above example it explains why there are many repeated ‘circle_1’ IDs as these are the defaults every time you add a circle shape.

To select the circle in order to change its appearance you need to append an additional select call to find the child circle element within the parent group element with ID=crac1.

This is done as follows:

c1 = S.select(“#crac1”).select(“circle”);

This now selects the circle element to change thats a child element of the parent group with ID ‘crac1’.

Then to change the colour of the attribute just use an attr call against that selected element as follows:

c1.attr(“fill”, “red”);

In my final solution I used a loop for the Update Metric as shown below

var S = Snap(svgnode);
var cmap = { "on": "#008d00", "standby": "#ff8000", "off": "#ff0000", "unknown": "#c0c0c0" };

for ( let i=0; i < ctrl.data.length ; i++) {
      cnum = i + 1;
      circ = S.select("#crac"+cnum).select("circle");
      crac_state = ctrl.data[i].datapoints[0][0];
      circ_col = cmap[crac_state];
      //console.log("Crac "+cnum+" State = "+crac_state);
      //console.log("Crac "+cnum+" Colour = "+circ_col);
      circ.attr("fill",circ_col);
}

I have also added numbers to the circles using the INIT Metric:

var S = Snap(svgnode);
c1 = S.select("#crac1");
c2 = S.select("#crac2");
c3 = S.select("#crac3");
c4 = S.select("#crac4");
c5 = S.select("#crac5");
c6 = S.select("#crac6");
cfill='lightgray'; cstroke='lightgray'; swidth=1; ff='Arial'; fsize='6em';
c1.text(40,90,"1").attr({ 'fill': cfill, 'stroke': cstroke, 'stroke-width': swidth, 'fontFamily': ff, 'fontSize': fsize});
c2.text(40,90,"2").attr({ 'fill': cfill, 'stroke': cstroke, 'stroke-width': swidth, 'fontFamily': ff, 'fontSize': fsize});
c3.text(40,90,"3").attr({ 'fill': cfill, 'stroke': cstroke, 'stroke-width': swidth, 'fontFamily': ff, 'fontSize': fsize});
c4.text(40,90,"4").attr({ 'fill': cfill, 'stroke': cstroke, 'stroke-width': swidth, 'fontFamily': ff, 'fontSize': fsize});
c5.text(40,90,"5").attr({ 'fill': cfill, 'stroke': cstroke, 'stroke-width': swidth, 'fontFamily': ff, 'fontSize': fsize});
c6.text(40,90,"6").attr({ 'fill': cfill, 'stroke': cstroke, 'stroke-width': swidth, 'fontFamily': ff, 'fontSize': fsize});

The end result:

CRAC-Status-Lights

3

I guess it maybe not SVG Panel’s fault.
Even you have changed the fill attribute of group, but you also defined “fill” attribute for its child element such #crac1/#crac2/#crac3, as a result, it seems the change doesn’t work. You may delete the attribute definition for elements.