FlowFuse
UI Chart - Ensure consistency in mapping chart series to colours
Description
When assigning colours to bars/lines on a chart, we assign the first message to the first colour, etc...
Sometimes though, users want a topic to be a specific colour, even though it is not known in which order they arrive. We should provide a way of defining colour:series mapping
Have you provided an initial effort estimate for this issue?
I have provided an initial effort estimate
In a scatter-chart (X: time series) I would like to choose the colour of the dots based on their 'category'. The colour needs to be set dynamically (from a function node before the chart node).
Is it possible do this with @flowfuse/node-red-dashboard 1.19.1
Referring to this:
https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html#scatter-charts
@jenskastensson not currently, but this is something that has been requested before and is on the to-do list.
I guess this may be more or less the same issue: Some of my charts HAVE TO have consistent colors so I made a bit of initialisation that run on restart:
The result is this:
This works well until chart is filled up with data (4 days in this example) but some time later the topic order is messed up:
The "new order" is not consistent, every time the order changes, it seems quite random...
And the topics changed order again.
Are those two charts supposed to be showing the same data? For example the Batt SOC on the two charts does not appear to be showing the same data.
"Batt SOC" is the same topic all the time but since it changes value over time the line in the chart obviously is not equal between the 3 chart examples here.
If you look at the pattern: When "Bat current" is positive, the "Batt SOC" also increases and with "Bat current-" going negative, the "Batt SOC" decreases. This is data for my 54kWh battery pack in my solar plant.
The initial topic order gives me very logical colors for each topic and these colors seems to stick until the chart is filled up after 96 hours but then the topic order is mixed up in a random order. I NEVER experienced this with Dashboard 1.0...
Yes, the first at 30. june, the second 4. july and the third less that 1 hour ago.
Yes, the flow may be deployed every now and then. I do deploy "Modified Nodes" only so unless the chart is modified, a deploy shouldnt make this mess...
It would be helpful if you could determine the circumstance that triggers the change.
Yes, of course. So far I only have seen that the 96 hours it takes to fill the chart, it seems ok and some times later it is messed up...
My Node-RED system consists of about 5700 nodes and is being worked on more or less every day so it is a bit hard to connect my work and this behaviour...
Can you screenshot it once a day and see what happens when the colours change? I would like to see the same data on two screenshots.
I got 2 screenshots from slightly before and slightly after the chart is filled up with 4 days of data:
On this one, you can see that all topics starts off with the value of "0" which means that there still is not a full set of 4 days with data.
This one starts with real values which means it have been live for more that 4 days (96 hours) and the topics is mixed up...
Now that the colours are wrong, if you view the dashboard on a different machine are the colours the original or the new ones?
Yes. This picture show my laptop and 2 other machines via VNC. A refresh of browser gives a new random order...
OK, I have got my system to show the problem. It's late now, but tomorrow I will see if I can work out more about how to make it happen.
@joepavitt there is definitely an issue here. The attached flow defines a chart with three lines (One, Two and Three). The chart has a span of two minutes. The colours are initialised by an inject which sends zero values to the chart in the order One, Two Three and the colours are allocated as expected.
After deploying, examine the chart and it can be seen that the lines are ordered as expected. Refreshing the page at this time has no effect on the line colours. Wait until the chart is full and the initial zero values are flushed off the chart. Now refreshing the chart re-orders the lines so the colours are messed up. It is as if the colours are being allocated in the client instead of in the server so that they can change when the chart is refreshed.
[{"id":"580dae94847eb335","type":"ui-chart","z":"997da33a0beedade","group":"f445af788da0bddf","name":"","label":"chart","order":1,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"2","removeOlderUnit":"60","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"6","height":"8","className":"","interpolation":"linear","x":550,"y":7780,"wires":[[]]},{"id":"7d601c205a98e562","type":"function","z":"997da33a0beedade","name":"Initialise colours","func":"msg.payload = 0\nconst topics = [\"one\",\"two\",\"three\"]\ntopics.forEach((topic) => {\n msg.topic = topic\n node.send(msg)\n})\nreturn null;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":7740,"wires":[["580dae94847eb335"]]},{"id":"fc4013e37bd60c25","type":"inject","z":"997da33a0beedade","name":"Initialise colours","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":7740,"wires":[["7d601c205a98e562"]]},{"id":"7ec5aa0f2ce8b118","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"7","crontab":"","once":false,"onceDelay":0.1,"topic":"one","payload":"","payloadType":"date","x":180,"y":7800,"wires":[["d10be41ddcdd4ad7"]]},{"id":"d10be41ddcdd4ad7","type":"function","z":"997da33a0beedade","name":"One","func":"msg.payload = Math.sin(msg.payload/20000)\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":7800,"wires":[["580dae94847eb335"]]},{"id":"f05ce0c005a574b1","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"three","payload":"","payloadType":"date","x":190,"y":7880,"wires":[["2f569cfc84be03d3"]]},{"id":"2f569cfc84be03d3","type":"function","z":"997da33a0beedade","name":"Three","func":"msg.payload = Math.sin(msg.payload/20000 + 1)\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":7880,"wires":[["580dae94847eb335"]]},{"id":"febfe8b6491d6303","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"two","payload":"","payloadType":"date","x":180,"y":7840,"wires":[["b9f375ecad857c31"]]},{"id":"b9f375ecad857c31","type":"function","z":"997da33a0beedade","name":"Two","func":"msg.payload = Math.cos(msg.payload/20000)\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":7840,"wires":[["580dae94847eb335"]]},{"id":"f445af788da0bddf","type":"ui-group","name":"Test group 1","page":"c6ff182a4185f2f2","width":"6","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"33622591401a2c6e","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":5,"className":"","visible":true,"disabled":false},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"33622591401a2c6e","type":"ui-theme","name":"Compact","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"0px"}},{"id":"2e8b710fe3bb6f5a","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.25.0"}}]