Hello everyone, has anyone already found a solution for a StateTrail node in DB2.0?
Kinda, by using echarts in a template node: How to- submit html form using template table - #6 by Steve-Mcl
Here is a different demo where echarts is used in a template node : How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl
If you combine the code from the first pen to the 2nd flow you could make your own.
New Development.
1 Like
3 Likes
Excellent !
Configuration was really easy and intuitive.
Is it possible to have click event ? Yes the docs say, need to find out how..
[{"id":"247b5d3411247210","type":"ui-markdown","z":"7c54d6845755357a","group":"a870a89a79a6be1f","name":"","order":1,"width":"24","height":"1","content":"``` mermaid\n\n---\ndisplayMode: compact\n---\n\ngantt\n\n dateFormat YYYY-MM-DD HH:mm\n axisFormat %H:%M\n tickInterval 1hour\n title Machine Operation Status\n excludes weekends\n %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week (\"sunday\") or \"weekends\", but not the word \"weekdays\".)\n\n section Machine-1\n OFF :crit, des1, 2014-12-15 00:00, 2014-12-15 04:20 \n ON :active, des2, 2014-12-15 04:20, 2014-12-15 05:20 \n OFF :crit, des1, 2014-12-15 05:20, 2014-12-15 09:30\n ON :active, des2, 2014-12-15 09:30, 2014-12-16 00:00\n","className":"","x":350,"y":2360,"wires":[["9060657a40c585d8"]]},{"id":"a870a89a79a6be1f","type":"ui-group","name":"Month-Table","page":"59f7c83cfe44c342","width":"24","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"59f7c83cfe44c342","type":"ui-page","name":"StateTrail","ui":"0aa5ac292a3ec726","path":"/statetrail","icon":"table","layout":"grid","theme":"b7b1935fbb33bbc8","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control","ui-dropdown","ui-form"],"showPathInSidebar":true,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"fixed","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"b7b1935fbb33bbc8","type":"ui-theme","name":"Default theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Yup, Markdown & Mermaid also well supported by UIBUILDER. 
The front-end uibuilder library recognises the use of the Markdown-IT library and also allows the inclusion of Markdown-IT extensions including Mermaid.
Is there a way to feed in dynamic data ..e.g. It shows the ON/OFF states over 24h ? .. shifting automatically 
Yes, you can use {{msg.payload}} for example.
See documentation.
If only I was able to get the on click event working...
Click events require javascript, you can http-in/out nodes where you include the mermaid library and write the javascript to get the click behaviour, or use a normal template node or use uibuilder.
eg in a dashboard template node you can do something like (it probably needs vue bindings somewhere):
<template>
<pre class="mermaid">
gantt
dateFormat YYYY-MM-DD
section Clickable
Visit mermaidjs :active, cl1, 2014-01-07, 3d
Print arguments :cl2, after cl1, 3d
Print task :cl3, after cl2, 3d
click cl1 href "https://mermaidjs.github.io/"
click cl2 call printArguments("test1", "test2", test3)
click cl3 call printTask()
</pre>
</template>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
<script>
const printArguments = function (arg1, arg2, arg3) {
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
};
const printTask = function (taskId) {
alert('taskId: ' + taskId);
};
const config = {
startOnLoad: true,
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
Yeah, I saw the documentation ... but I'm struggling to get the format right 
Does anybody have an example with feeding the msg.payload object ?
Whatever you need to have replaced by the incoming payload can be encapsulated in {{ }}
Not actually done any JavaScript with Mermaid. Will try to find some time to work up a UIBUILDER example this week.
1 Like
[{"id":"f30b49229da9d627","type":"group","z":"7c54d6845755357a","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["247b5d3411247210","9060657a40c585d8","11436b35da33d719","0f3887617dea1c74","9e57c3323b202c66","db12c41ffbf45e27","ee25a2452b2ebceb","bda1ddebeedf5bf6"],"x":94,"y":2419,"w":952,"h":142},{"id":"247b5d3411247210","type":"ui-markdown","z":"7c54d6845755357a","g":"f30b49229da9d627","group":"a870a89a79a6be1f","name":"","order":3,"width":"24","height":"1","content":"```mermaid\n---\ndisplayMode: compact\n---\n\ngantt\n\ndateFormat YYYY-MM-DD HH:mm\naxisFormat %H:%M\ntickInterval 1hour\ntitle Machine Operation Status (HTML) \n\nsection {{msg.machine}}\n\n{{msg.payload}}\n\n\nclick des1 call printArguments(\"test1\", \"test2\", test3)\n</pre>\n\n\n <script>\n const printArguments = function (arg1, arg2, arg3) {\n alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);\n };\n mermaid.initialize(config);\n </script>\n\n```","className":"","x":710,"y":2460,"wires":[["9060657a40c585d8"]]},{"id":"9060657a40c585d8","type":"debug","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"debug 2726","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":930,"y":2460,"wires":[]},{"id":"11436b35da33d719","type":"template","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\nOFF :crit, des1, 2014-12-15 00:00, 2014-12-15 01:10\nON :active, des2, 2014-12-15 01:10, 2014-12-15 02:20\nOFF :crit, des1, 2014-12-15 02:20, 2014-12-15 09:30\nON :active, des2, 2014-12-15 09:30, 2014-12-15 14:00\n","output":"str","x":320,"y":2460,"wires":[["ee25a2452b2ebceb"]]},{"id":"0f3887617dea1c74","type":"template","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\nOFF :active, des1, 2014-12-15 00:00, 2014-12-15 01:10\nON :crit, des2, 2014-12-15 01:10, 2014-12-15 02:20\nOFF :active, des1, 2014-12-15 02:20, 2014-12-15 09:30\nON :crit, des2, 2014-12-15 09:30, 2014-12-15 14:00\n","output":"str","x":320,"y":2520,"wires":[["bda1ddebeedf5bf6"]]},{"id":"9e57c3323b202c66","type":"ui-button","z":"7c54d6845755357a","g":"f30b49229da9d627","group":"a870a89a79a6be1f","name":"","label":"Data-1","order":1,"width":"4","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":170,"y":2460,"wires":[["11436b35da33d719"]]},{"id":"db12c41ffbf45e27","type":"ui-button","z":"7c54d6845755357a","g":"f30b49229da9d627","group":"a870a89a79a6be1f","name":"","label":"Data-2","order":2,"width":"4","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":170,"y":2520,"wires":[["0f3887617dea1c74"]]},{"id":"ee25a2452b2ebceb","type":"template","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"","field":"machine","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Machine-1","output":"str","x":460,"y":2460,"wires":[["247b5d3411247210"]]},{"id":"bda1ddebeedf5bf6","type":"template","z":"7c54d6845755357a","g":"f30b49229da9d627","name":"","field":"machine","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Machine-2","output":"str","x":460,"y":2520,"wires":[["247b5d3411247210"]]},{"id":"a870a89a79a6be1f","type":"ui-group","name":"Month-Table","page":"59f7c83cfe44c342","width":"24","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"59f7c83cfe44c342","type":"ui-page","name":"StateTrail","ui":"0aa5ac292a3ec726","path":"/statetrail","icon":"table","layout":"grid","theme":"b7b1935fbb33bbc8","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control","ui-dropdown","ui-form"],"showPathInSidebar":true,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"fixed","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"b7b1935fbb33bbc8","type":"ui-theme","name":"Default theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
It May not be the best example, as i am still learning!
I managed to use MermaidJS directly (without the need for markdown) in a uibuilder node - I won't pollute this thread with anything though. I'll probably create a new thread.
Seems to be easier to call the API directly and return an SVG image of the rendered chart, you can then more easily add click and other events.
thx .. now I need to feed dynamic data from variables .. but should not be a problem
Sounds interesting 
