apertureless / vue-chartjs

📊 Vue.js wrapper for Chart.js
https://vue-chartjs.org
MIT License
5.56k stars 838 forks source link

Add destroyDelay prop #1085

Closed doutatsu closed 7 months ago

doutatsu commented 8 months ago

Fixes https://github.com/apertureless/vue-chartjs/issues/579

The original issue was marked as completed, but it was not fixed. To address this issue, I've added a new prop that delays calling destroy on unMount. No matter how long your transition is, you can adjust the charts as a result

Before

https://github.com/apertureless/vue-chartjs/assets/4270980/e79527aa-9b3f-44a0-9e09-44bff5411a9d

With delay

https://github.com/apertureless/vue-chartjs/assets/4270980/c469443e-b656-46e3-89c3-17e151dcb85e

apertureless commented 8 months ago

Hey! Thanks for the PR. Honestly I thought this was fixed a while ago. Reading the initial issue, as far as I understand the problem is, that if you are using vue-router and have transitions for the page changes, the charts get destroyed too early.

It would be good to have a reproduction for this. However, I do not think that adding a setTimeout is the proper way here.

I think it would be easier and cleaner to destroy the chart on the onUnmounted hook instead of onBeforeUnmount https://github.com/doutatsu/vue-chartjs/blob/allow-destroy-delay/src/chart.ts#L70

But this needs some testing if it is really solving the issue.

doutatsu commented 8 months ago

@apertureless That's a good point, thank you for a quick response. I'll see if simply using a different lifecycle hook will do the trick and if so, update this PR to reflect the changes

doutatsu commented 8 months ago

@apertureless It doesn't seem to do the trick unfortunately - it still gets destroyed too quickly, unlike when I use a simple delay. I've added videos to demonstrate the problem and fix

doutatsu commented 7 months ago

@apertureless Any updates on this?