Flowcharting 0.8.0 in progress

[algenty]

Here, you can found adding and fix for the next version :
Try it and reply issues and suggestions,

[0.8.0 SNAPSHOT] - 2020-04-13

Add

• Add Identify by Value in field 'what' in rules
• Add option to disable regex for best perf
• Add 2 new color modes in Color mapping section : "Label background" and "Label borber"
• Add perf stat on rule title
• TODO : icons : DONE
• New custom variables for fiels (Text Mapping 'with', Link Mapping 'Url' and Event Mapping 'Value')
• TODO : Fix inspect
• TODO : Remove
• TODO : FIX Mapping id/value
• TODO : Restore default style in event not work : DONE
• TODO : Verify replace var grafana
• TODO : Verify substring text mapping

Fix

• Log scale, thanks Dennis (issue #68)
• shape stills select when deleting map.
• select list (typeahead) in fields 'whats' and map values for string type in rules
• Level State with range or value mapping.
• Lock always true in flowchart option (issue #68)
• TODO : Scale in graph not correct
• Fix Remove link
• Fix range value Min and Max range when 'from' or 'to' is empty
• Fix 'With' field in text mapping, empty after clone or save/reload

[algenty]

Hi,
Progress bar seems to work

[algenty]

new snapshot builded
https://algenty.github.io/flowcharting-repository/ARCHIVES.html

[algenty]

Event Expand/Collapse implemented

[algenty]

Event resize width/height implemented

width positive: size width to the right
width negative : size width to the left
height positive : size to top
height negative : size to bottom

[algenty]

Another example

[algenty]

You can use custom valariables, see
https://algenty.github.io/flowcharting-repository/VARIABLES.html

Variables

Grafana Variables

You can use variables in xml définition or url in link.
Be carreful, at this time, only uncompressed xml supports variables.
Syntax : ${myVariable}
Supported field with variables :

• Source Content in flowchart section
• URL in flowchart section when download source is active
• Link mapping Url in Mapping section

Custom variables

Custom variables and eval are availables on fields :

• Text/Label Mapping, field 'With'
• Event Mapping, field 'value'
• Link Mapping, field 'Url'

List of custom variables :

• ${_level} : Current level
• ${_color} : Current color
• ${_rule} : Name of rule
• ${_value} : Raw value according to the aggregation
• ${_formated} : Formated value according to the type and unit

Javascript code supports like it :

// Percent for 10 levels
${_level} * 100

// Boolean like
${_value} > 50 ? 1 : 0

and more

[algenty]

New snapshot available

[paregupt]

Just tried it.

Worked one time. But did not work next time. Just to be sure, the width of the shape will be 13804585666.133333 when Value is set to {$_value} and 13.80 when Value is set to ${_formated}. My shape is just a simple rectangle

What am I missing? Any logs that I can inspect?

[algenty]

Hi @paregupt,
Thx for tried 0.8.0
I don't see values in your color table, normal ?
Don't use ${_formated} because in you case, Flowcharting try to convert "13.80 Gps" to a number of pixel and ${_value} is too big for the width. the fied value must be a number of pixels for width and height

You can try :
Math.round(${_value}/10000000000) with more or less 0
Other solution, define more level in thresholds like it :

A little animation to explain, thx for your feedback, i need to doc more

BR
Arnaud

[paregupt]

Thanks Arnaud. It works for me now. Looks like setting up the Thresholds correctly was mandatory.

Anything you want me to test while this is running in my environment?

Overall, you and the team of the contributors are making it into a killer panel. Great work and than you.

[algenty]

Hi,
THANKS A LOT !!
I'm alone with a little help from grafana or other users like xkilian and Dennis, for me it's a game, not a job. But I spent some personal money on this project, that's why I opened the "sponsor" section to hope that it will bring me some money.

Draw.io is also an amazing tool, for me, better than visio

BR,
Arnaud

[algenty]

Animation of events implemented :

[algenty]

@paregupt,
Since your test, i modified input help, you can seeen example here

[algenty]

New snapshot pushed
https://algenty.github.io/flowcharting-repository/ARCHIVES.html

[xkilian]

Just nuts. Bravo! I will definitely setup 8.0 next week. The latest flowcharts, I set up at work were well received. Can't wait for new requirements to come in to get this up and running. We have a DCIM projet with industrial controls for ventilation and cooling, so the timing is great. I will see if I can get a sponsored feature. :-) If I haven't said enough, great work and I wish there wasn't this virus crazyness, because I could see us presenting something smashing at a conference.
Cheers!
X

[algenty]

Another example created within one hour

[paregupt]

Super cool. Wondering what was your approach to make this?

1. Progress bar: Did you use two rectangles, one as base and another on top of that with solid color?

2. The VMware topology on right: Is that a static diagram or is it dynamic?

What data source did you use and what was the query?

[algenty]

1. Yes, You can found template in draw.io
   In sidebar, "add shapes" and choose Section Ohers, infographic
   .
   You need a percent for you query.
   For my test, i use Grafana DB with Min : 0 max : 100

For the first, 2 rectangles, one solide in back, the width never changes (note the size, here 120px)
The second on front , with event width, field When : All, field value : ${_value} * 1.2
why 1.2? because, size must be 120px (100*1,2) when value is 100%

For the 3d progress bar, it's more difficult, i have 2 shapes for each.
For the base = ${_value} * ratio
For the transparent shape on top = -(100 - ${_value}) * ratio
minus to invert it.

2. it's a static, found in template draw.io, it's just for the example
   At this time, i test with TestDb from grafana, influxdb and prometheus.

NB : To test, i often use a random value with this formule :
Math.floor(Math.random() * 101);
// returns a random integer from 0 to 100

Link to the draw.io template progress bar
https://app.diagrams.net/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Untitled%20Diagram.drawio#R7Vxbk6I4GP01Pu4USbjII6I9u1vdNVPVtTuPU7RETS0SC9Orzq8f0AQ1YBunTYJOW%2F0AuXD5zsmXkwN0D8Xz9eciWcyeaIqzHnTSdQ8NexACF8Je9eekm11JELq7gmlBUt5oX%2FBMfmBe6PDSV5Li5VFDRmnGyOK4cEzzHI%2FZUVlSFHR13GxCs%2BOzLpIpbhQ8j5OsWfqNpGy2K%2B3DYF%2F%2BJybTmTgz8MNdzTwRjfmdLGdJSlcHRWjUQ3FBKdttzdcxzqrgibjs%2Bj2cqK0vrMA5U%2Bkwp5vN06P%2F%2FZ8fn%2F%2F6%2B99vDNP%2Blz%2F4Uf5Psld%2Bw6g8isevmG1EGMqLX1SbS4YXPTRY4ILMMcMFL%2Fq63x%2BsZoTh50UyrtqvSlaUZTM2z8o9UG5OyBoLnKv9Jd90tnVZFtOMFtuTIjfyAr9ftWEF%2FQ%2BLmpzmuGpMcyaO4%2FP9g86T7U%2B043dSnbCgr3mKq6BUp%2BT3jwuG1ycDC2q4Sp5jWt5psSmb8A4uB5gzHHh8f7Xni8%2BLZgdUEd0SztBpfeA9iOUGx%2FECTGED0wac18NoAIbDB%2BcURleILgBSeP1meJHTEl%2BoK77IZHyBE6BwdCq%2BdU65EpVVgh2ajLXbiHXgfeSnd%2BUn6FjOT57J8fMQj4J4aDA%2F1crFWn7yjcYXhghYy09twYYiPRgJdtAIdvghoN6ZoGwLqL7RARQNw6FnMkFZF1ChyfhGIxcgaC1BtQQbBiaDLS7oINrwQ0K9L0Mh2xIKNNftGofQIIr7Q2QwRSHrGgoYXUSX48D1TopU3TmqLdqBSQ0Fmivqx%2BSlMhKliFe3TcZJtq39SpeEEZqXVS%2BUMTovoyMaRBmZVhWMSqCIJDdfTyu%2F8hPJJ3S7RcafxpuMlGmjSnBkSaN8ussn3qWLcjkbSVmr7nyY3aAGnD1HmotQE2e3ZVD1teHcXM13G%2Be3FzdncK47a8fZO78oasMZONqAbi7xuw302yLxDNB1Z91A%2B%2FKAhmpAh9pwbloN3cb57Yn2DM51Z%2B04ywO6ZRHRhrOnDeemy9FtnAGMosHJRfW5CVp01o1zII9nVw3nQBvOCs7HKYh3SMr41sBfHeJ4%2B9OqwRJ%2BExmelJEf0FLqE1ZhFWhSaCBUI4CvjQAK1sxdEEBNnOkngPdrBND37LjpFt0nAdREm3YCyJJOlQDapnqo4CzdBQHU1Jx%2BAvxiBtCm6QXed08ANZmnnQCyCFQlgDYRCLvhxlUo4DR%2BfcH36se5ij6NNj8OdsOPuwTp23TkkOKY1ufIwW44cpdAfZuenNvyaNDs%2FN0NT%2B4SpG%2FTlXMV3Rp9Ur0brtxFE%2FVN%2BnKuos%2BuT5JZ9%2BUuAfkenTkUqFFAmzMHrTtzxijwAMIIhPYpIIs4RQpo8%2BbE4%2FvfgALDPowgsk4BWdypUkDblI%2Bsu3PGKFC%2FGdgtf06VAtr0PbLuz5nTAl4Uhb51CshyUJUC2uQgUvgC7VY0%2F7W1e%2F1OjACrDyyD1TTZOgyW4TdRQ%2B8ILFe8CWptflX4Nq07YBn%2BtCGQR5ZneSZU%2BNCtO2AZ%2FlDO9SSwAiWw9DnQqOlWdRgtw59dS5OWK97Duf6ToXJ3%2Fy8ntnUH%2F7gDjX4C

[CrashLaker]

Awesome demos @algenty
Wonder if it's possible to dinamically alter the layout.

[algenty]

@xkilian,
Be carefull 0.8.0 is an alpha, not stable, with many trace in console.
Not ready for the production. But i need you to test and return a feedback.
eval in fields is not secure at this time :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

[algenty]

@CrashLaker
Not in this version, because here, it's not a modification of an existant shape nut new shapes.
You need to generate dynamically your xml by calling an api and download it in flowchart section :
Check download case, and enter your api url or full path of xml repo.

[paregupt]

Agree. I had a prototype of XML fetched from a local http server. Every box had its own XML block. I had a template block and replicating the xml code based on the number of items. Worked like a charm but haven’t productized it yet.

[CrashLaker]

@paregupt
Can you elaborate more on the 'Every box had its own XML block' part?
From what I saw the steps would be to programatically arrange the "new" shapes in Draw.io to then convert it to XML.
Any helpful documentation on that first part?
It would be a sick view to have something like kubeopsview

in flowcharting

[paregupt]

@CrashLaker this is cool view. My guess is this should be possible. Here is what I am thinking:

Make the outer container and keep it static in size and numbers.
The number of inner containers can be dynamic. See this draw.io XML code

<mxGraphModel dx="1422" dy="769" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-1" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
      <mxGeometry x="360" y="280" width="130" height="140" as="geometry" />
    </mxCell>
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-2" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="370" y="390" width="20" height="20" as="geometry" />
    </mxCell>
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-3" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="400" y="390" width="20" height="20" as="geometry" />
    </mxCell>
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-4" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="430" y="390" width="20" height="20" as="geometry" />
    </mxCell>
    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-5" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="460" y="390" width="20" height="20" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

You can copy this and throw it into https://app.diagrams.net > Extras > Edit Diagram.

The inner container code is

    <mxCell id="2XeZK5cxxPYDBJWcH2Gj-5" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="460" y="390" width="20" height="20" as="geometry" />
    </mxCell>

Make this code a template and add more as more inner-containers are required, with different coordinates and different id.

When I was trying before, I had this logic sitting outside Grafana. The flowcharting panel was fetching it a local http server. There may be better ways though.

[CrashLaker]

@paregupt but one'd still need to bind the new metric labels to the shapes.

[paregupt]

That’s right. The way I did this is via pre-defining the patterns of shape ID and Query ID and sync up these values in the injected XML and the flow charting panel. There can be better ways though...

[CrashLaker]

@paregupt @algenty
Is there a way to bind the Alias (or metric target from QueryInspector) received from the Query to the shapeIDs in the diagram with a single rule?

this way I could dynamically generate the layout and also the rules.

[algenty]

@CrashLaker
I can't, if i add an eval on each field, the the performances are less good

[algenty]

New snapshot available :

• eval are secure
• no tracelog
• Hide/show event works
  @xkilian You can try it in production

[algenty]

I close the list of events for this version maybe in next version.
Now i need to spend time to stable it and write doc.

[CrashLaker]

ok. thank you for the active development :)
awesome project

[xkilian]

1 - Small issue I noticed, if an object, a square for example has a transparent fill of 0%. If I assign a rule That will change the color to red, then the value becomes null, the color defaults back to white instead of transparent. It seems that the transparency is lost when the threshold fill color is released. With 8.0 latest, though this probably applies to all of them.
2 - The blinking event does not seem to work well. Works inconsistently, I will have to do more testing, in some flowcharts it works (so-so) in others not. Will do more digging.
ps. Did some new designs using the prometheus ALERT metrics, works well, to aggregate alarms related to a service or host.

[algenty]

@xkilian
Thanks for this feedback.
For the blink, when the tab lost focus, it didnt work any more.
I use setTimeout, i search a solution

[algenty]

New snapshot available

[algenty]

Another demo

[CrashLaker]

@algenty
Will you publish those demos somewhere?
couldn't find them here https://play.grafana.org/d/Unu5JcjWk/flowcharting-index?orgId=1

[algenty]

I can't on play, only grafana team can.
Can you try https://flowcharting.grafana.net/?orgId=1 ?

BR
Arnaud

[CrashLaker]

Not enough permissions i guess

[algenty]

Events Documentation available
https://algenty.github.io/flowcharting-repository/EVENTS

[algenty]

New snapshot available

[xkilian]

What changed? i am running the one from 3 days ago. You have a list of items at the top of this issue, maybe you could detail the changes between snapshots there.

[algenty]

only technical changes like link to doc and some optimization. Not visible
I forget, new engine and new version for draw.io

[xkilian]

From your example:

You need a percent for you query.
For my test, i use Grafana DB with Min : 0 max : 100

For the first, 2 rectangles, one solide in back, the width never changes (note the size, here 120px)
The second on front , with event width, field When : All, field value : ${_value} * 1.2
why 1.2? because, size must be 120px (100*1,2) when value is 100%

Ok, if I take the same example you prepared with the horizontal status bar. Rotate the shape 90 degrees (to vertical). Try to modify the width, it causes an X axis offset in addition to growing the shape in an unexpected way.
Rotating shapes seems to break the height/width changing logic. Can this be a supported use case, or should the documentation reflecting that rotating shapes is a no no.

[algenty]

Hi @xkilian
Can u open a new issue for it, i close this chain because 0.8.0 is published

[bijwaard]

Cool animation stuff Arnaud!

I'll try it when I have some time on my hands. Is it hard to add additional shapes such as a clock/dial with multiple arms? Then it would be possible to show the power phasor (i.e. (re)active power) that I now do with the SVG plugin.

Update: ah, I see there is already a rotating shape, I'll give it a try;-)

Kind regards,
Dennis

[bijwaard]

Hi Arnaud,
I see you can set a fixed number of degrees for the rotation, would it be possible to use a formula with the actual value of metrics P and Q ? E.g. phi = Math.acos(P /Math.sqrt(P^2+Q^2))/Math.PI*180 ?
Kind regards,
Dennis

[CrashLaker]

@bijwaard
I think for that to work you'd need to create an invisible rectangle with only the arrow visible.

something like

[CrashLaker]

U'd have something like this:

would need to properly scale the degrees to match the arrow's initial position

[bijwaard]

Hi CrashLaker,
Nice work this looks doable, my arrow indeed grows and schrinks and goes 360 degrees. Main problem is the formula with two measurements, since the phasor is a complex number. I may be able to do the calculation of the angle in influxdb as some kind of pseudomeasurement.
On the other hand if I could give both X and Y of the arrow instead of the angle, I could directly use the complex number.
Kind regards,
Dennis

[algenty]

Hi @bijwaard
The field value in event mapping section accepts some javascript code
See https://algenty.github.io/flowcharting-repository/VARIABLES.html
you can enter an expression like (${_value}/MAX) *360 where MAX is the max of counter like 12 for hours, 60 for minuts and seconds, add 90 if 0 like a clock is on the top.
0 = left, 90 = top, 180 = right, 270 = botton

[bijwaard]

Hi Arnaud,

The formulas work great with a single metric value.

Would it be possible to add an Arrow shape (and possibly other shapes) that accept 2 metric values X and Y? These X and Y could then be used to update the end-point of the arrow, the origin can stay fixed, actual arrow end-point would become origin+(X,Y).

Supporting two values could also be used to change height and width of a bar/ellipse/etc. in one rule. Also the position of shapes could be changed this way to move them around the drawing.

Kind regards,
Dennis