Grafana SVG

README.md

Grafana SVG

• use the SVG Plugin
• leave the svg field empty

init.js

const target = svgnode;

target.panelOptions = {
    0 : { // is not
        icon: `<svg class="svg-inlet" x="0px" y="0px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M12,6.36c2,2.58,4,5.87,4,7.64a4,4,0,0,1-8,0c0-1.77,2-5.06,4-7.64M12,3.2S6,10,6,14a6,6,0,0,0,12,0c0-4-6-10.8-6-10.8Z"/></svg>`,
        backgroundColor: 'transparent',
        fill: 'rgb(58, 82, 55)'
    },
    1 : {
        icon: `<svg class="svg-inlet" x="0px" y="0px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M12,20a6,6,0,0,1-6-6c0-4,6-10.8,6-10.8S18,10,18,14A6,6,0,0,1,12,20Z"/></svg>`,
        backgroundColor: 'transparent',
        fill: 'rgb(196, 22, 42)'
    }
};

Object.defineProperty(target, "value", {
  get() {
      if(ctrl.series)
        return ctrl.series[0].datapoints[ctrl.series[0].datapoints.length-1][0];
        
      return false;
  },
  set(val) {
    // nothing
  },
  enumerable: true,
  configurable: true
});

Object.defineProperty(target, "panelOption", {
  get() {
    return target.panelOptions[target.value];
  },
  set(val) {
    // nothing
  },
  enumerable: true,
  configurable: true
});


target._fix = function() {
    // height
    document.querySelectorAll('.svg-panel .plot-canvas tbody').forEach(i => i.style.height = '100%');
}

target._draw = function() {
    if(!target.panelOptions)
        return;

    if(!target.panelOption)
        return;
    
    const elm =  document.createElement("div");
    elm.innerHTML = target.panelOption.icon;
    target.replaceChildren(elm.firstChild);
    target._appendStyles();
}

target._appendStyles = function() {
    document.querySelectorAll('.svg-panel .plot-canvas .svg-inlet').forEach(i => {
        i.style.transform = 'scale(1.4)';
        i.style.transformOrigin = 'center';
        i.closest(".panel-content").style.backgroundColor = target.panelOption.backgroundColor;
        i.querySelector('path').setAttribute('fill', target.panelOption.fill);
    });
}

target._fix();
target._draw();

loop.js

if(!svgnode._draw)
    return;

svgnode._draw();