Ui-template with chart.js/eCharts - vue lifecycle hooks

Dashboard
,
1

Hello:

I recently updated my flows from Dashboard1 to Dashboard2. In the process I migrated all my charts to chart.js (I already had some in DB1 but had others that were native DB1 charts). And because I’m a sucker for punishment, after getting all the chart.js charts working, I also converted them to eCharts! All this was with a lot of trial and error and help from ChartGPT/Gemini AI as I have no knowledge of vue/limited html and CSS (just enough to meet my needs).

All charts are working as expected, but I am now seeing MaxListenersExceededWarning (s) in the Node-RED log and I’m wondering if this is related to my ui-template code. Below is the section of the code that is pretty much the same for all the charts (total of 10-12) of them on different ui-pages.

export default {
        data() {
            return {
                myChart: null,
                resizeHandler: null,
            };
        },
        //---Watch Section---
        watch: {
            msg: function () {
                if (this.msg && this.msg.topic === "data" && this.myChart && this.msg.payload && this.msg.payload.labels) {
                    const p = this.msg.payload;
                    this.update(p.labels, p, this.msg.title,this.msg.legend); // remember to add back this.msg.colors
                }
            }
        },
        //---Mounted Section---
        mounted() {
        this.$nextTick(() => {
            const ready = setInterval(() => {
                const container = this.$refs.charttpw33;
                if (window.echarts && container && container.offsetWidth > 0 && container.offsetHeight > 0) {
                    clearInterval(ready);
                    this.init();
                    if (this.msg && this.msg.topic === "data" && this.msg.payload) {
                        const p = this.msg.payload;this.update(p.labels, p, this.msg.title,this.msg.legend); /*remember to add back this.msg.colors*/
                    }
                    this.resizeHandler = () => { if (this.myChart) this.myChart.resize(); };
                    window.addEventListener('resize', this.resizeHandler);
                    setTimeout(() => { if (this.myChart) this.myChart.resize(); }, 300);
                    }
                }, 100);
            });
        },
        //---Before Destroy Section---
        beforeDestroy() {
            if (this.myChart) {
                this.myChart.dispose();
            }
            if (this.resizeHandler) {
                window.removeEventListener('resize', this.resizeHandler);
            }
        },

In reading the Flowfuse documentation, it appears that beforeDestroy() is not one of the supported VueJS API and may be causing the listeners to remain open? Should this be replaced by unmounted()? Any other suggestions for improvement would also be really appreciated. Thanks for your help.

2

Easiest way to understand what is happening is to litter your code with console.log('...') etc.

I've not tried but you could likely also watch the route:

export default {
  mounted() {

  },
  unmounted() {
    this.cleanup()
  },
  watch: {
    $route(to, from) {
      this.cleanup()
    }
  },
  methods: {
    cleanup() {
      // do clean up
    }
  }
}

But, i would just try unmounted - if it works great, if not, look/ask for alternatives.

1 Like
3

Thanks - I changed it to “unmounted” and threw in a the console.log statements. It looks like it is going through and doing the clean up. Will make the change to all and see if the warning goes away.

4

Well… I’m still seeing the warning but it comes almost as soon as I launch the dashboard (localhost:1880/dashboard) and it goes to the first tab. Based on some googling, I added the following to my settings.js file require('events').EventEmitter.defaultMaxListeners = 12; and now I don’t see the warning.

Am I just masking the issue? I have no clue as to what may be causing this…

5

Perhaps relevant: MaxEventListener Warning · Issue #1620 · FlowFuse/node-red-dashboard · GitHub

1 Like
6

Is that after a node-red restart?

7

Yes.. restarted multiple times. After adding that last line to increase the max listeners (to 12), I ‘m not seeing it any more.

8

Thanks for adding this thread to the issue. I will track it as well.. hopefully it gets addressed down the line :crossed_fingers:t3: