avoid not needed updates for the chart, when dom element changes

[dirk-ecker]

When using animation like in this example

<pie-chart :title="'Anteile an den Gesamtausgaben'" :data="openAccessBarometer.costsPublisher" thousands="." decimal="," legend="right" :suffix="openAccessBarometer.relative ? '%' : '€'" :library="{animation: {duration: 1000}}" download="true" :messages="{empty: 'Keine Daten verfügbar.'}"></pie-chart>

you will see that every change in the dom creates a repaint of the chart. This is done in the updated method of the chart. Change it to a watcher on the data and everything is fine.

[ankane]

Thanks @dirk-ecker 👍 I'm able to reproduce the issue, but the PR isn't fixing it. Here's the code I'm using to reproduce.

<div id="app">
  <pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]" :library="{animation: {duration: 1000}}"></pie-chart>

  {{count}}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      count: 0
    },
    mounted: function() {
      setInterval(() => {
        this.count += 1
      }, 2000)
    }
  })
</script>

Also, I think we'll need the same for chartOptions.

[dirk-ecker]

Yes sure we should also implement this for the chartOptions and all other props.

It is working if you do not inline the data in the pie chart:

<template>
  <v-container>
    <pie-chart :data="pie" :library="{animation: {duration: 1000}}"></pie-chart>
    {{count}}
  </v-container>
</template>
<script>
export default {
  data () {
    return {
      pie: [['Blueberry', 44], ['Strawberry', 23]],
      count: 0
    }
  },
  mounted: function() {
    setInterval(() => {
      this.count += 1
    }, 2000)
  }
}
</script>

So far I do not know the reason for this behaviour.

[ankane]

Cool, happy to merge once chart options are fixed.

[dirk-ecker]

okay, chart options are also fixed, have a look ;-)

[ankane]

When I run it on test/index.html, I get TypeError: Cannot read property 'concat' of undefined.

[dirk-ecker]

Oh the automatic insertion of semicola fails at this point.
I have created a temporary variable to fix this.

[ankane]

Hey @dirk-ecker, when I run this against test/index.html, there are still a lot of updates.

I also created a branch with a different solution that's working for me: https://github.com/ankane/vue-chartkick/compare/less_updates

[ankane]

I've narrowed down the problem. It only happens when you pass a JavaScript object as an inline prop. If you use data for the library option, the problem goes away.

[ankane]

The issue is described here: vuejs/vue#4060

Think a deep equal on data and chartOptions should solve it.

[ankane]

Alright, think the less_updates branch has a solid fix. Please give it a shot when you have some time. Sorry for the noise.

[dirk-ecker]

Yes it works as expected.
No problem with the noise, makes it clear.
Thank you.

[ankane]

Awesome, merged in d3b0e42, and will push out a new release shortly. Thanks for reporting and helping solve this.

[dirk-ecker]

Hi, the actual version gives a TypeError if a chart is destroyed. I think you have to nest your destroy one layer deeper or add a destroy on the chart level. Thanks in advance Dirk

…

On 30 May 2018 at 10:41, Andrew Kane ***@***.***> wrote: Closed #52 <#52>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AhY_FvS4-a68M2xTz8_LwWoBXv-6J-9gks5t3lsdgaJpZM4UCdLq> .

[ankane]

This should be solved in 0.3.3, as destroy was added at the chart level. Are you still seeing issues with the latest version?

[dirk-ecker]

Okay, you are right. I was missing the update. Thank you.