Need help with Wordcloud template node in dashboard-2

Dashboard
1

I have this example code working in dashboard-1....

(Big thanks to @Steve-Mcl for the clear working example).

I've tried wrapping the code in <template> tags as per the example in the template node from Dash-2, but nothing beyond the words "A word cloud for node-red by Steve-Mcl" show up in the new dashboard.

Perhaps the new dashboard is not compatible with the graphics library used in the example?

Thanks for taking a look.

2

The old dashboard uses old (depreciated) angular
New dashboard users Vue

Therefore the scripts in the template wont work

If you see scope or scope.$watch or similar, then its not just a case of wrapping the HTML in a template tag.

chrome_GEhEiLqi0I

[{"id":"163da576e5c69354","type":"ui-template","z":"b6818da1a76c1147","group":"953f3f3b3a6e4b28","page":"","ui":"","name":"","order":1,"width":0,"height":0,"head":"","format":"<template>\n    <div class=\"highcharts-figure\">\n        <div ref=\"chartContainer\" style=\"width:100%; height:400px;\"></div>\n        <p class=\"highcharts-description\">\n            A word cloud for Node-RED (Dashboard 2.0)\n        </p>\n    </div>\n</template>\n\n<script src=\"https://code.highcharts.com/highcharts.js\"></script>\n<script src=\"https://code.highcharts.com/modules/accessibility.js\"></script>\n<script src=\"https://code.highcharts.com/modules/wordcloud.js\"></script>\n<script src=\"https://code.highcharts.com/modules/exporting.js\"></script>\n<script src=\"https://code.highcharts.com/modules/export-data.js\"></script>\n\n<script>\nexport default {\n    data() {\n        return {\n            chart: null\n        }\n    },\n    watch: {\n        // Dashboard 2.0 automatically provides 'msg' to the component\n        msg: function (newMsg) {\n            if (newMsg && !newMsg.clicked) {\n                this.updateCloud(newMsg.payload, newMsg.topic);\n            }\n        }\n    },\n    mounted() {\n        let interval = setInterval(() => {\n            if (window.Highcharts) {\n                // js is loaded, so we can now use it\n                if (this.msg) {\n                    this.updateCloud(this.msg.payload, this.msg.topic);\n                }\n                clearInterval(interval);\n            }\n        }, 200);\n    },\n    methods: {\n        updateCloud(data, topic) {\n            if (typeof Highcharts === 'undefined') return;\n\n            // Use 'this.$refs.chartContainer' to reference the div\n            this.chart = Highcharts.chart(this.$refs.chartContainer, {\n                series: [{\n                    type: 'wordcloud',\n                    data: data,\n                    name: 'Occurrences',\n                    point: {\n                        events: {\n                            click: (event) => {\n                                // In Dashboard 2.0, we use this.send()\n                                this.send({\n                                    topic: event.point.name,\n                                    payload: event.point.options,\n                                    clicked: true\n                                });\n                            }\n                        }\n                    }\n                }],\n                title: {\n                    text: 'Wordcloud of ' + (topic || 'Data')\n                }\n            });\n        }\n    }\n}\n</script>\n\n<style>\n.highcharts-figure {\n    margin: 1em auto;\n}\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":540,"wires":[["6fed214e19c630ce","50e8181ad5c43512"]]},{"id":"6453d9def92cc724","type":"ui-button","z":"b6818da1a76c1147","group":"953f3f3b3a6e4b28","name":"","label":"Encounter at farpoint","order":2,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"PICARD \t\t\tYou will agree, Data, that \t\t\tStarfleet's instructions are \t\t\tdifficult?  \t\t\t\t\tDATA \t\t\tDifficult ... how so? Simply \t\t\tsolve the mystery of Farpoint \t\t\tStation.  \t\t\t\t\tPICARD \t\t\t\t(smiles) \t\t\tAs simple as that.  \t\t\t\t\tTROI \t\t\tFarpoint Station. Even the name \t\t\tsounds mysterious.  \t\t\t\t\tPICARD \t\t\tThe problem, Data, is that another \t\t\tlife form built that base. How \t\t\tdo I negotiate a friendly \t\t\tagreement for Starfleet to use \t\t\tit while at the same time snoop \t\t\taround finding how and why they \t\t\tbuilt it?   DATA \t\t\tInquiry ... the word snoop ... ?  \t\t\t\t\tPICARD \t\t\tData, how can you be programmed \t\t\tas a virtual encyclopedia of human \t\t\tinformation without knowing a \t\t\tsimple word like snoop?  \t\t\t\t\tDATA \t\t\tPossibility ... a kind of human \t\t\tbehavior I was not designed to \t\t\temulate?   PICARD \t\t\tIt means 'to spy, to sneak' ...  \t\t\t\t\tDATA \t\t\t\t(interrupting; \t\t\t\t delighted) \t\t\tAh! To seek covertly, to go \t\t\tstealthily, to slink, slither ...  \t\t\t\t\tPICARD \t\t\t\t(wanting to cut it off) \t\t\tExactly, yes   \t\t\t\t\tDATA \t\t\tto glide, creep, skulk, \t\t\tpussyfoot, gumshoe     TROI \t\t\tCaptain ... I'm sensing a ... a \t\t\tpowerful mind ..    WORF \t\t\tSomething strange on the detector \t\t\tcircuits ..   DATA \t\t\tIt registers as solid, Captain...  \t\t\t\t\tTROI \t\t\tOr an incredibly powerful \t\t\tforcefield. But if we collide \t\t\twith either    PICARD \t\t\t\t(to Conn) \t\t\tGo to Condition Yellow. And shut \t\t\toff that damned noise    WORF \t\t\tShields and deflectors, up, sir","payloadType":"str","topic":"Encounter at farpoint","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":200,"y":520,"wires":[["91ecc1f88f247a0f"]]},{"id":"87e8360e78f10b90","type":"ui-button","z":"b6818da1a76c1147","group":"953f3f3b3a6e4b28","name":"","label":"Lorem ipsum","order":3,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum erat ac justo sollicitudin, quis lacinia ligula fringilla. Pellentesque hendrerit, nisi vitae posuere condimentum, lectus urna accumsan libero, rutrum commodo mi lacus pretium erat. Phasellus pretium ultrices mi sed semper. Praesent ut tristique magna. Donec nisl tellus, sagittis ut tempus sit amet, consectetur eget erat. Sed ornare gravida lacinia. Curabitur iaculis metus purus, eget pretium est laoreet ut. Quisque tristique augue ac eros malesuada, vitae facilisis mauris sollicitudin. Mauris ac molestie nulla, vitae facilisis quam. Curabitur placerat ornare sem, in mattis purus posuere eget. Praesent non condimentum odio. Nunc aliquet, odio nec auctor congue, sapien justo dictum massa, nec fermentum massa sapien non tellus. Praesent luctus eros et nunc pretium hendrerit. In consequat et eros nec interdum. Ut neque dui, maximus id elit ac, consequat pretium tellus. Nullam vel accumsan lorem","payloadType":"str","topic":"Lorem ipsum","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":230,"y":560,"wires":[["91ecc1f88f247a0f"]]},{"id":"91ecc1f88f247a0f","type":"function","z":"b6818da1a76c1147","name":"Word counter","func":"\nfunction wordCounter(string, minLen) {\n    minLen = (!minLen || minLen < 1) ? 1 : minLen;\n    var words = string.replace(/[^a-zA-Z ]/g, \"\").split(/\\s/);\n    var freqMap = {};\n    var data = [];\n    for (var i = 0; i < words.length; i++) {\n        w = words[i].trim();\n        if(w.length < minLen) continue;\n        if (!freqMap[w]) {\n            freqMap[w] = {\n                name: w,\n                weight: 0\n            }\n            data.push(freqMap[w]);\n        }\n        freqMap[w].weight += 1;\n    }\n    return data;\n}\nconst minChars = 3;\nconst caseSensitive = false;\nif(caseSensitive){\n    msg.text = msg.payload();\n} else {\n    msg.text = msg.payload.toLowerCase();\n}\nmsg.payload = wordCounter(msg.text, 3);\nreturn msg;","outputs":1,"noerr":0,"x":420,"y":540,"wires":[["163da576e5c69354"]]},{"id":"6fed214e19c630ce","type":"debug","z":"b6818da1a76c1147","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":750,"y":580,"wires":[]},{"id":"50e8181ad5c43512","type":"ui-text","z":"b6818da1a76c1147","group":"953f3f3b3a6e4b28","order":4,"width":0,"height":0,"name":"","label":"Selected","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"msg.topic & '  ' & msg.weight","valueType":"jsonata","x":760,"y":540,"wires":[]},{"id":"953f3f3b3a6e4b28","type":"ui-group","name":"WordCloud","page":"62dd0283a3804436","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"62dd0283a3804436","type":"ui-page","name":"wordcloud-demo","ui":"f1633f89193de4bc","path":"/wordcloud-demo","icon":"home","layout":"grid","theme":"ad84029195b8d5f1","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":1,"className":"","visible":"true","disabled":"false"},{"id":"f1633f89193de4bc","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"ad84029195b8d5f1","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"4f0157f63be58a66","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.1"}}]
3

Thanks for pointing out what to look for in other template code Steve.

I guess my question becomes more general then....
Has anyone got a #wordcloud working in Dashboard-2?
Has anyone see something like the old Dash-1 node: node-red-node-ui-vega (node) - Node-RED
This node includes a word cloud and a whole lot more.

4

I already posted a solution for dashboard 2 in the post above.

image
image812×448 38.7 KB