Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix reactive mixins animation re-rendering issue. #109

Merged
merged 5 commits into from
Jun 4, 2017
Merged

Fix reactive mixins animation re-rendering issue. #109

merged 5 commits into from
Jun 4, 2017

Commits on May 19, 2017

  1. Resolve reactive props animation issue. 

    A small consequence of replacing the entire dataset in the mixins files is that it causes certain charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart.

You can see the issue in this fiddle (note the constant re-rendering):
https://jsfiddle.net/sg0c82ev/11/

To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data,  and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes).

A fiddle with my changes:
https://jsfiddle.net/sg0c82ev/12/

Perhaps this is too specific of a scenario to warrant a complexity increase like this (and better suited for a custom watcher) but I figured it would be better to dump it here and make it available for review. Let me know what you think.
    Spencer Dellis committed May 19, 2017
    Configuration menu
    Copy the full SHA
    ceb5988 View commit details
    Browse the repository at this point in the history

  2. Removing unnecessary line

    Spencer Dellis committed May 19, 2017
    Configuration menu
    Copy the full SHA
    b762d40 View commit details
    Browse the repository at this point in the history

  3. Resolve reactivity mixin animation issue. 

    A small consequence of replacing the entire dataset in the [reactive mixins files](https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/reactiveData.js) is that it causes charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart.

You can see the issue in this fiddle (the problem remains even when changing chart type):
https://jsfiddle.net/sg0c82ev/11/

To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data,  and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes).

A fiddle with my changes:
https://jsfiddle.net/sg0c82ev/12/

Perhaps this is too specific of a scenario to warrant a complexity increase (and better suited for a custom handler) but I figured it would be better to dump it here and make it available for review. Let me know what you think.
    Spencer Dellis committed May 19, 2017
    Configuration menu
    Copy the full SHA
    5cc8f0a View commit details
    Browse the repository at this point in the history

  4. Fixing eslint issues.

    Spencer Dellis committed May 19, 2017
    Configuration menu
    Copy the full SHA
    d49b06f View commit details
    Browse the repository at this point in the history

  5. Fixing eslint issues.

    Spencer Dellis committed May 19, 2017
    Configuration menu
    Copy the full SHA
    dbce4d7 View commit details
    Browse the repository at this point in the history