Ui-chart sorting by "group", disappears when data is replaced

Dashboard
,
1

This is not a bug, but I need help with something.

I have a set of data in an influxdb. I feed the ui-chart with this data.
The timeframe is chosen in the influx query.

eg.

[
   {
      "series": "Air",
      "time": "21:12:02"
      "value": "15.2"
   },
   {
      "series": "Cabinet",
      "time": "21:12:30",
      "value": "14.1"
   }
   ...
]

The ui-chart then in the ui groups this in "Air" and "Cabinet".
If i press "Cabinet" the ui sorts the "Cabinet" away. Thats nice.

The ui-chart is set to "replace" the data that comes in.
And the new data comes in at an interval of 5seconds.

This means that when the new data comes in, the sorting I have done gets reset.

Anyone with a good idea on how to maintain the sorting?

Best regards
Steffen

2

When you say "sort", do you mean "hide/show"? I noticed this recently too, you click on the line in the Legend, and that hides the line, but new data arriving re-draws the chart and clears any filtering you'd applied

3

Can be fixed by doing follwing:

Add custom click handler for legend plugin

  plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                                labels:{
                                    boxHeight:1,
                                    boxWidth:10,
                                },
                                onClick: function (evt, item) {                                   
                                    if(this.chart.isDatasetVisible(item.datasetIndex)){
                                        //store dataset visibility 
                                        root.visibility[item.datasetIndex] = false
                                    }
                                    else{
                                        root.visibility[item.datasetIndex] = true
                                    } 
                                   // call default click handler                                   
                                    Chart.defaults.plugins.legend.onClick.call(this, evt, item, this);
                                }, ....

And when upating (probalby needed for replace only)
set the visibility of dataset

this.chart.data.datasets = this.datasets
                    this.chart.data.datasets.forEach((dataSet, i) => {
                        let meta = this.chart.getDatasetMeta(i);
                        meta.hidden = this.visibility[i] == false
                    });                   
                    
                    this.chart.update()

Needs of course decision how and where to save and should it survive sessions and such things..

4

Yes, I mean "hide/show".

Will look in to your answer in a few days hotNipi.

Best regards
Steffen

5

My answer was targeted rather how the core chart widget can be improved. But same strategy fits if you do chart using the ui_template.