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

How-to connect SVG object attributes to data source? #14

Closed jfisherith closed 5 years ago

jfisherith commented 6 years ago

How do I connect the datasource with parameters of the SVG objects? For instance, suppose I have three squares. with the simplest type of datasource, I have a binary decision: a = on/pff b = on/off c = on/off if ON then color red, else color green Just to start, thats what I am asking

MarcusCalidus commented 6 years ago

Hi John and thank you for the question. I am sorry I haven't put on more demos by now. But at the moment I am quite busy with other projects at work. But I will try to give you the basic idea:

You have two JavaScript events. One is onInit, only executed once when the page is loaded and onHandleMetric executed upon every data refresh. What you'd want with your example can be done in onHandleMetric. Some reduntant code, like creation of the Snap() object should better be done in onInit for performance reasons. But since this is only a simple example, I'll try to cover that:

onHandleMetric

var s = Snap(svgnode);  // transform HTMLDomElement to Snap object http://snapsvg.io/docs/
var b = s.select("#coloredbox1"); // select a named object inside your SVG 

switch (ctrl.series[0].stats.current) {
  case 0:
    b.attr('fill', 'red');  break;
  case 1:
    b.attr('fill', 'green'); break;
}
// how to color Snap SVG? http://svg.dabbles.info/snaptut-color.html

I hope this helps a little. Also it would be good to inspect your ctrl.series[] array with console.log(ctrl.series); This gives you useful information about the available values that you can use.

jfisherith commented 6 years ago

Thanks very much, I'll dig into this.

I have high hopes for your plugin - I've done an SVG animation a long time ago with a different library, and I am a long-time user of Inkscape. I hope to be able to create complex graphics in Inkscape, and do some simple animation/data-display in your plugin.

John Fisher Sr Build Engineer 7402 Hollister Avenue | Santa Barbara CA 93117 805.562.8686 x221

From: MarcusCalidus notifications@github.com Sent: Wednesday, June 27, 2018 9:35:19 PM To: MarcusCalidus/marcuscalidus-svg-panel Cc: John Fisher; Author Subject: Re: [MarcusCalidus/marcuscalidus-svg-panel] How-to connect SVG object attributes to data source? (#14)

Hi John and thank you for the question. I am sorry I haven't put on more demos by now. But at the moment I am quite busy with other projects at work. But I will try to give you the basic idea:

You have two JavaScript events. One is onInit, only executed once when the page is loaded and onHandleMetric executed upon every data refresh. What you'd want with your example can be done in onHandleMetric. Some reduntant code, like creation of the Snap() object should better be done in onInit for performance reasons. But since this is only a simple example, I'll try to cover that:

onHandleMetric

var s = Snap(svgnode); // transform HTMLDomElement to Snap object http://snapsvg.io/docs/ var b = s.select("#coloredbox1"); // select a named object inside your SVG

switch (ctrl.series[0].stats.current) { case 0: b.attr('fill', 'red'); break; case 1: b.attr('fill', 'green'); break; } // how to color Snap SVG? http://svg.dabbles.info/snaptut-color.html

I hope this helps a little. Also it would be good to inspect your ctrl.series[] array with console.log(ctrl.series); This gives you useful information about the available values that you can use.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/MarcusCalidus/marcuscalidus-svg-panel/issues/14#issuecomment-400908077, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AYOF_R6PEpeAGSRCXH2uNOYXxPy2FM9Bks5uBF0HgaJpZM4U6iQZ.

karnamonkster commented 6 years ago

May be i should start a new thread, but could you please help me with an example of getting the metrics for ES datasource. I am trying to use a tank svg with Level indicator based on the query. Newbie to JavaScript hence a little heads up will be so helpful.

MarcusCalidus commented 6 years ago

Hi,

I'm not accustomed to Elastic search data sources. Could you please send me the output of console.log(ctrl.series) as JSON please? Maybe also your SVG file. Thx

Best regards Marco

karnamonkster commented 6 years ago

Here are the details: console.log(ctrl.series) ctrlseries_log

Events Tab:

var s = Snap(svgnode);  // transform HTMLDomElement to Snap object http://snapsvg.io/docs/
var tank = s.select("#tank"); // select a named object inside your SVG 
var colors = ["#008000", "#FF6600", "#FF0000"];
console.log(ctrl.series);
tank.attr({"y": tank.getBBox().height * (100-ctrl.series[0].stats.current)/100});

var color = colors[2];

switch (ctrl.series[0].stats.current) {
  case 0:
    status_text = "ready"; color=colors[0]; break;
  case 1:
    status_text = "full"; color=colors[1]; break;
  case 2:
    status_text = "complete"; color=colors[2]; break;
}
tank.attr({"fill" : color});

SVG code This was generated by the SVG builder - Tank vertical

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="10 10 1000 1000"><g id="tank" transform="translate(200 200) rotate(0 0 0) scale(3)"><g id="tank-vertical_1" transform="translate(0,0)">
        <svg height="214" viewBox="0 0 687 999" width="184" preserveAspectRatio="none">
            <path style="fill:#ccc" d="M0,139 l687,0 0,860 -687,0 0,-860z">
            </path>
            <path style="fill:#d1d1d1" d="M29,139 l630,0 0,860 -630,0 0,-860z">
            </path>
            <path style="fill:#d6d6d6" d="M57,139 l572,0 0,860 -572,0 0,-860z">
            </path>
            <path style="fill:#d9d9d9" d="M87,139 l512,0 0,860 -512,0 0,-860z">
            </path>
            <path style="fill:#dedede" d="M117,139 l454,0 0,860 -454,0 0,-860z">
            </path>
            <path style="fill:#e3e3e3" d="M145,139 l396,0 0,860 -396,0 0,-860z">
            </path>
            <path style="fill:#e8e8e8" d="M175,139 l336,0 0,860 -336,0 0,-860z">
            </path>
            <path style="fill:#ededed" d="M205,139 l276,0 0,860 -276,0 0,-860z">
            </path>
            <path style="fill:#f2f2f2" d="M233,139 l220,0 0,860 -220,0 0,-860z">
            </path>
            <path style="fill:#f5f5f5" d="M263,139 l160,0 0,860 -160,0 0,-860z">
            </path>
            <path style="fill:#fafafa" d="M293,139 l100,0 0,860 -100,0 0,-860z">
            </path>
            <path style="fill:#fff" d="M321,139 l44,0 0,860 -44,0 0,-860z">
            </path>
            <path style="fill:none;stroke:#000;stroke-width:2" d="M0,139 l687,0 0,860 -687,0 0,-860">
            </path>
            <path style="fill:#ccc" d="M41,913 l66,0 0,86 -66,0 0,-86z">
            </path>
            <path style="fill:#bfbfbf" d="M41,913 l66,0 -43,21 -23,65 0,-86z">
            </path>
            <path style="fill:#ccc" d="M579,913 l64,0 0,86 -64,0 0,-86z">
            </path>
            <path style="fill:#bfbfbf" d="M579,913 l64,0 -42,21 -22,65 0,-86z">
            </path>
            <path style="fill:#7f7f7f" d="M85,139 l11,0 0,42 -11,0 0,-42z">
            </path>
            <path style="fill:#7f7f7f" d="M139,139 l10,0 0,42 -10,0 0,-42z">
            </path>
            <path style="fill:#7f7f7f" d="M537,139 l10,0 0,42 -10,0 0,-42z">
            </path>
            <path style="fill:#7f7f7f" d="M591,139 l10,0 0,42 -10,0 0,-42z">
            </path>
            <path style="fill:#ccc" d="M54,139 l0,-11 19,-23 38,-20 54,-16 66,-10 74,-5 76,0 74,5 66,10 54,16 38,20 20,23 0,11 -579,0z">
            </path>
            <path style="fill:#d1d1d1" d="M87,139 l0,-11 18,-23 34,-20 48,-16 58,-10 64,-5 68,0 64,5 60,10 46,16 34,20 18,23 0,11 -512,0z">
            </path>
            <path style="fill:#d9d9d9" d="M123,139 l0,-11 14,-23 30,-20 40,-16 50,-10 58,-5 58,0 56,5 50,10 40,16 30,20 14,23 0,11 -440,0z">
            </path>
            <path style="fill:#dedede" d="M157,139 l0,-11 14,-23 24,-20 34,-16 42,-10 48,-5 48,0 48,5 42,10 34,16 24,20 14,23 0,11 -372,0z">
            </path>
            <path style="fill:#e5e5e5" d="M193,139 l0,-11 10,-23 20,-20 28,-16 34,-10 38,-5 40,0 38,5 34,10 28,16 20,20 10,23 0,11 -300,0z">
            </path>
            <path style="fill:#ebebeb" d="M227,139 l0,-11 8,-23 16,-20 22,-16 26,-10 30,-5 30,0 28,5 28,10 20,16 16,20 8,23 0,11 -232,0z">
            </path>
            <path style="fill:#f2f2f2" d="M263,139 l0,-11 6,-23 10,-20 14,-16 18,-10 22,-5 20,0 22,5 18,10 14,16 12,20 4,23 0,11 -160,0z">
            </path>
            <path style="fill:#f7f7f7" d="M297,139 l0,-11 4,-23 6,-20 8,-16 10,-10 12,-5 12,0 12,5 10,10 8,16 6,20 4,23 0,11 -92,0z">
            </path>
            <path style="fill:#fff" d="M333,139 l0,-11 0,-23 2,-20 2,-16 2,-10 2,-5 4,0 2,5 2,10 2,16 2,20 0,23 0,11 -20,0z">
            </path>
            <path style="fill:none;stroke:#000;stroke-width:2" d="M54,139 l0,-11 19,-23 38,-20 54,-16 66,-10 74,-5 76,0 74,5 66,10 54,16 38,20 20,23 0,11 -579,0">
            </path>
            <path style="fill:#e5e5e5;stroke:#000;stroke-width:2" d="M247,32 l192,0 12,107 -216,0 12,-107z">
            </path>
            <path style="fill:#e5e5e5;stroke:#000;stroke-width:2" d="M257,22 l172,0 0,10 -172,0 0,-10z">
            </path>
            <path style="fill:#e5e5e5;stroke:#000;stroke-width:2" d="M279,22 l128,0 0,-13 -128,0 0,13z">
            </path>
            <path style="fill:#4c4c4c;stroke:#000;stroke-width:2" d="M333,0 l20,0 32,9 -86,0 34,-9z">
            </path>
        </svg>
    </g></g></svg>
MarcusCalidus commented 6 years ago

the first thing that strikes my eye is that you handle that ctrl.series[0].stats.current value in two different ways:

tank.attr({"y": tank.getBBox().height * (100-ctrl.series[0].stats.current)/100}); calculates the height of the object where the current value is a percentage value (0-100)

switch (ctrl.series[0].stats.current) uses that value as integer status value. that will not work since the value currently is 8.3 something.

karnamonkster commented 6 years ago

I was using a sample config you shared for a tank svg in one of the other issues . I am sure this needs to be corrected . I need to see the level to change vertically in the tank basis the stats

On Wed, Oct 24, 2018 at 12:31 PM MarcusCalidus notifications@github.com wrote:

the first thing that strikes my eye is that you handle that ctrl.series[0].stats.current value in two different ways:

tank.attr({"y": tank.getBBox().height * (100-ctrl.series[0].stats.current)/100}); calculates the height of the object where the current value is a percentage value (0-100)

switch (ctrl.series[0].stats.current) uses that value as integer status value. that will not work since the value currently is 8.3 something.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/MarcusCalidus/marcuscalidus-svg-panel/issues/14#issuecomment-432563288, or mute the thread https://github.com/notifications/unsubscribe-auth/AFRNovgmPtiMH8OOJIkYYRzyFXBdxXGCks5uoCV6gaJpZM4U6iQZ .

-- /Br Karan

binyanma commented 3 years ago

Is there an svg Demo that can be used as a reference?

MarcusCalidus commented 3 years ago

@binyanma ... it's difficult to define a reference demo. I can build something for you if you like. do you already have some svg to display data in?

binyanma commented 3 years ago

@MarcusCalidus
If I take the picture on the Grafana official website as an example, how do I set the display value?

124378675-3c2aee00-dce5-11eb-956f-5516e9035da6
MarcusCalidus commented 3 years ago

This depends a little on the structure of the SVG. It would be best to give all the text nodes in the SVG an ID. Then you can address them separately in your javascript code and set the text value. Another option is to use the Snap text() function to insert a text node at the coordinates I hope this helps.

binyanma commented 3 years ago

@MarcusCalidus Understand, I will try it. Thank you