search

MarcusCalidus / marcuscalidus-svg-panel

Grafana panel for displaying metric sensitive SVG images using the snap svg library
MIT License
63 stars 28 forks source link

Source of the tank example? #23

Closed paskalare closed 6 years ago

paskalare commented 6 years ago

Dear Markus, is it possible to share the code of the tank example? these parts of code you have as pictures?

It would be very useful

Best Regards

paskalare

MarcusCalidus commented 6 years ago

Hi Paskal,

I think there is nothing secret about these things. So here you go:

The Datasets

image

The SVG Code

<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 362.14257 152.15235">
 <defs id="defs4211">
  <mask id="mask4789" maskUnits="userSpaceOnUse">
   <path id="path4791" d="m77.468 0.24543v0.001979a76.075 76.075 0 0 0 -76.076 76.075 76.075 76.075 0 0 0 76.076 76.078v-0.002h209.99a76.075 76.075 0 0 0 76.07 -76.078 76.075 76.075 0 0 0 -76.07 -76.076h-209.99z" fill="#ffffff"/>
  </mask>
 </defs>
 <g id="layer1" transform="translate(-1.3916 -.24543)">
  <g id="tank_und_fuellstand" mask="url(#mask4789)">
   <rect id="tank" height="152.15" width="362.14" y=".24543" x="1.3916" fill="#ff6600"/>
   <rect id="fuellstand" stroke-opacity=".58360" fill-opacity=".41009" height="147.1" width="362.14" stroke="#ffffff" stroke-miterlimit="1" y="5.2978" x="1.3916" stroke-width="1.3" fill="#ffffff"/>
  </g>
 </g>
 <g id="layer2">
  <text id="inhalt" style="text-anchor:middle;text-align:center" font-weight="bold" xml:space="preserve" font-size="25px" line-height="100%" onclick="test()" y="60.27441" x="238.92258" font-family="sans-serif" fill="#ffffff"><tspan id="tspan4281" style="text-anchor:middle;text-align:center" font-weight="bold" font-size="25px" line-height="100%" y="60.27441" x="238.92258" font-family="sans-serif" fill="#ffffff">25t</tspan></text>
  <text id="status" style="text-anchor:middle;text-align:center" font-weight="bold" font-size="25px" xml:space="preserve" line-height="100%" y="104.64369" x="234.25996" font-family="sans-serif" fill="#ffffff"><tspan id="tspan4989" x="234.25996" y="104.64369">Entnahme aktiv</tspan></text>
  <g clip-rule="evenodd">
   <g id="bdgStatus0" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0078125 0 0 .0078125 48.083 36.076)">
    <path id="curve0-3" fill="#ffffff" d="m5120 640c2474 0 4480 2006 4480 4480s-2006 4480-4480 4480-4480-2006-4480-4480 2006-4480 4480-4480zm-2654 4574c-124 124-124 328 0 452l1788 1788c124 124 328 124 452 0l3388-3388c124-124 124-328 0-452l-508-508c-124-124-328-124-452 0l-2654 2654-1054-1054c-124-124-328-124-452 0l-508 508z"/>
   </g>
   <g id="bdgStatus1" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.010938 0 0 .010938 33.71 20.076)" fill="#ffffff">
    <path id="curve1" d="m6539 4082-1186-1186c-124-124-328-124-452 0l-1187 1186c-124 125-186 277-187 453l-7 839c-1 65 38 122 99 147 61 26 127 12 174-34l687-687v4160h1280v-4160l687 687c47 46 113 60 174 34 61-25 98-81 99-147l7-839c1-176-63-328-188-453z"/>
    <path id="curve0" d="m1920 1280h6400v1280h-6400z"/>
   </g>
   <g id="bdgStatus2" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(-.0091146 0 0 .0091146 143.44 23.576)" fill="#ffffff">
    <path id="curve1-2" d="m1280 7680h2934l454 453c249 249 655 249 905 0l453-453h2934v1280h-7680v-1280z"/>
    <path id="curve0-5" d="m3707 6721 1187 1186c124 124 328 124 452 0l1187-1186c124-125 186-277 187-453l7-839c1-142-172-214-273-113l-692 692-2-1208c-1-538 426-960 963-960h2237v-1280h-2237c-1234 0-2246 1005-2243 2240l2 1208-682-692c-101-101-272-30-273 113l-7 839c-1 176 63 328 187 453z"/>
   </g>
   <g id="bdgStatus3" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 42.045 26.493)" fill="#ffffff">
    <path id="curve1-5" d="m4160 3840v640h-1600c-353 0-640 287-640 640v3200h6400v-3200c0-353-287-640-640-640h-1600v-640h1600c705 0 1280 575 1280 1280v4480h-7680v-4480c0-705 575-1280 1280-1280h1600z"/>
    <path id="curve0-38" d="m3114 2240h1366v2880h-1920v1280h5120v-1280h-1920v-2880h1366c110 191 317 320 554 320 353 0 640-287 640-640s-287-640-640-640c-237 0-444 129-554 320h-1366c0-176-144-320-320-320h-640c-176 0-320 144-320 320h-1366c-110-191-317-320-554-320-353 0-640 287-640 640s287 640 640 640c237 0 444-129 554-320z"/>
   </g>
   <g id="bdgStatus4" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 36.719 25.035)" fill="#ffffff">
    <path id="curve1-1" d="m1280 7680h4160v320c0 176 144 320 320 320h1280c176 0 320-144 320-320v-320h1600v1280h-7680v-1280z"/>
    <path id="curve0-8" d="m3604 3200h1196c1235-3 2240 1006 2240 2240v2560h-1280v-2560c0-536-422-962-960-960l-1203 7 687 687c46 47 60 113 35 174-26 61-83 99-148 99l-839-7c-176-1-328-63-453-187l-1186-1187c-124-124-124-328 0-452l1186-1187c125-124 277-188 453-187l839 7c66 0 122 38 147 99 26 61 12 127-34 174l-680 680z"/>
   </g>
   <g id="bdgStatus6" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0089286 0 0 .0089286 37.523 25.987)" fill="#ffffff">
    <rect id="rect4199" height="3256.2" width="1146.4" y="2240" x="234.21"/>
    <path id="curve1-12" d="m1280 7680h4160v320c0 176 144 320 320 320h1280c176 0 320-144 320-320v-320h1600v1280h-7680v-1280z"/>
    <path id="curve0-0" d="m3604 3200h1196c1235-3 2240 1006 2240 2240v2560h-1280v-2560c0-536-422-962-960-960l-1203 7 687 687c46 47 60 113 35 174-26 61-83 99-148 99l-839-7c-176-1-328-63-453-187l-1186-1187c-124-124-124-328 0-452l1186-1187c125-124 277-188 453-187l839 7c66 0 122 38 147 99 26 61 12 127-34 174l-680 680z"/>
   </g>
   <g id="bdgStatus5" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 32.73 29.41)" fill="#ffffff">
    <path id="curve1-8" d="m7040 5120v320h-1280v-320h-320v-320h1920v320h-320zm0 2240v1280h726c110-191 317-320 554-320 353 0 640 287 640 640s-287 640-640 640c-237 0-444-129-554-320h-726c0 176-144 320-320 320h-640c-176 0-320-144-320-320h-726c-110 191-317 320-554 320-353 0-640-287-640-640s287-640 640-640c237 0 444 129 554 320h726v-1280h1280z"/>
    <path id="curve0-4" d="m2560 640h4480c555 0 1030 357 1206 853 36 101 22 204-40 291-61 88-154 136-261 136h-4105c-352 0-640 288-640 640v2560c0 352 288 640 640 640h4105c107 0 200 48 261 136 62 87 76 190 40 291-176 496-651 853-1206 853h-4480c-705 0-1280-575-1280-1280v-3840c0-705 575-1280 1280-1280z"/>
   </g>
   <g id="bdgStatus10" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 38.005 29.355)" fill="#ffffff">
    <path id="curve1-17" d="m5120 652c1767 0 3200 1433 3200 3200v948h-1280v-948c0-1060-860-1920-1920-1920s-1920 860-1920 1920v948h-1280v-948c0-1767 1433-3200 3200-3200z"/>
    <path id="curve0-1" d="m1920 5120h6400c353 0 640 287 640 640v3200c0 353-287 640-640 640h-6400c-353 0-640-287-640-640v-3200c0-353 287-640 640-640zm3200 960c-353 0-640 287-640 640 0 201 92 380 237 497l-237 1423h1280l-237-1423c145-117 237-296 237-497 0-353-287-640-640-640z"/>
   </g>
   <g id="bdgStatus11" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 32.73 28.302)" fill="#ffffff">
    <path id="curve1-0" d="m4480 9600v-6720l-687 687c-47 46-113 60-174 34-61-25-100-82-99-147l7-839c1-176 63-328 187-453l1187-1186c124-124 328-124 452 0l1186 1186c125 125 189 277 188 453l-7 839c-1 66-38 122-99 147-61 26-127 12-174-34l-687-687v6720h-1280z"/>
    <path id="curve0-49" d="m1280 5120h2880v1280h-2880v-1280zm4800 0h2880v1280h-2880v-1280z"/>
   </g>
   <g id="bdgStatus12" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.012153 0 0 .012153 25.86 13.854)">
    <path id="curve0-47" fill="#ffffff" d="m4480 7680h1280v1280h-1280v-1280zm-2240-3840v-320c0-1235 1005-2240 2240-2240h1280c1235 0 2240 1005 2240 2240 0 976-641 1843-1571 2137-412 129-669 485-669 916v467h-1280v-467c0-989 626-1839 1569-2136 400-126 671-498 671-917 0-528-432-960-960-960h-1280c-528 0-960 432-960 960v320h-1280z"/>
   </g>
   <g id="bdgStatus20" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.010938 0 0 -.010938 32.7 132.08)" fill="#ffffff">
    <path id="path4187" d="m6539 4082-1186-1186c-124-124-328-124-452 0l-1187 1186c-124 125-186 277-187 453l-7 839c-1 65 38 122 99 147 61 26 127 12 174-34l687-687v4160h1280v-4160l687 687c47 46 113 60 174 34 61-25 98-81 99-147l7-839c1-176-63-328-188-453z"/>
    <path id="path4189" d="m1920 1280h6400v1280h-6400z"/>
   </g>
  </g>
 </g>
</svg>

OnHandleMetric Code

var s = Snap(svgnode);
var inhalt = s.select("#inhalt");
var fuellstand = s.select("#fuellstand");
var tank = s.select("#tank");
var status = s.select("#status");
var status_text = "";

var colors = ["#008000", "#FF6600", "#FF0000"];

fuellstand.attr({"y": tank.getBBox().height * (100-ctrl.series[0].stats.current)/100});
inhalt.attr({"text": ctrl.series[1].stats.current.toFixed(1) + " t"});

var all_badges = s.selectAll("[id^=bdgStatus]");
for (var idx = 0; idx < all_badges.length; idx++) {  
  all_badges[idx].attr({"display" : "none"});
}

var badge = s.select("#bdgStatus" + ctrl.series[2].stats.current.toFixed(0));
badge.attr({"display" : "initial"});

var color = colors[2];

switch (ctrl.series[2].stats.current) {
  case 0:
    status_text = "bereit"; color=colors[1]; break;
  case 1:
    status_text = "voll"; color=colors[1]; break;
  case 2:
    status_text = "wird befüllt"; color=colors[1]; break;
  case 3:
    status_text = "wird belüftet"; color=colors[1]; break;
  case 4:
    status_text = "Entnahme aktiv"; color=colors[0]; break;
  case 5:
    status_text = "wird entlüftet"; color=colors[1]; break;
  case 6:
    status_text = "entnahmebereit"; color=colors[1]; break;
  case 10:
    status_text = "gesperrt"; color=colors[1]; break;
  case 11:
    status_text = "überfüllt"; color=colors[2]; break;  
  case 12:
    status_text = "unbekannt"; color=colors[2]; break;
  case 20:
    status_text = "leer"; color=colors[2]; break;
}

status.attr({"text": status_text});
tank.attr({"fill" : color});
paskalare commented 6 years ago

thanks!!!

paskalare commented 6 years ago

Do you know how is possible to read boolean value from MetricsPanelCtrl? I have the follow if statement but i cannot fix it

    var s = Snap(svgnode);
    var name

    if (ctrl.series[0].stats.current === true) {
        name = s.select("#booleanStatus");
        name.attr({"display" : "initial"});
    }
    else{
        name = s.select("#booleanStatus");
        name.attr({"display" : "none"});
    }

You refer previously to console.log(ctrl.series). Can you explain a bit more?

MarcusCalidus commented 6 years ago

Not sure if ctrl.series[0].stats.current really contains a Boolean value or just the string 'true' you might want to console.log this value or compare via == instead of ===

paskalare commented 6 years ago

It contains null

How console.log(ctrl.series)? I can't find ctrlon console log inside Can you show a screenshot where to look?

MarcusCalidus commented 6 years ago

Here is an example of what I mean: image

MarcusCalidus commented 6 years ago

If you don't have stats values you may access the values via the datapoints array

paskalare commented 6 years ago

thanks, it works