Angular (2), Chart.JS and Redux freeze exceptions

[philjones88]

When trying to combine Angular (2) Redux and Chart.JS you end up with an exception as the arrays of data / labels are frozen.

i.e. https://github.com/buunguyen/redux-freeze

I traced it back to an error in zone.js Cannot read property 'toString' of null

    at Function.Object.defineProperty (http://localhost:8080/static/ng2/js/polyfills.bundle.js:17391:16)
    at listenArrayEvents (http://localhost:8080/static/ng2/js/vendor.bundle.js:109092:10)
    at ChartElement.buildOrUpdateElements (http://localhost:8080/static/ng2/js/vendor.bundle.js:109272:5)
    at Chart.Controller.<anonymous> (http://localhost:8080/static/ng2/js/vendor.bundle.js:108638:48)
    at Object.helpers.each (http://localhost:8080/static/ng2/js/vendor.bundle.js:109514:15)
    at Chart.Controller.update (http://localhost:8080/static/ng2/js/vendor.bundle.js:108637:12)
    at new Chart.Controller (http://localhost:8080/static/ng2/js/vendor.bundle.js:108418:6)
    at new Chart (http://localhost:8080/static/ng2/js/vendor.bundle.js:110793:21)

Stepping through the methods:

buildOrUpdateElements -> listenArrayEvents

which tries to do add listeners and it blows up

Expected Behavior

It should handle failing to add listeners to a frozen array

Current Behavior

Exception

Possible Solution

Detect frozen arrays

Steps to Reproduce (for bugs)

Context

I can't use Chart.JS in my Angular (2.4.10) application on pages with Redux data.

Environment

• Chart.js version: 2.5.0
• Browser name and version: Chrome latest
• Link to your project: commercial

[etimberg]

I think we could support this. It just means that live data updates will not work.

[etimberg]

@simonbrunel thoughts?

[simonbrunel]

@philjones88 can you provide a live test case that reproduce this issue?

[philjones88]

A NG (2) + NG2-Charts + Chart.js example

http://plnkr.co/edit/WFpWrrD7FPtl1dmUuuVS?p=preview

I used the demo from:

http://valor-software.com/ng2-charts/

and simply wrapped one of the datasets in Object.freeze

See custom-chart.component.ts line 12:

 public lineChartData:Array<any> = [
    {data: Object.freeze([65, 59, 80, 81, 56, 55, 40]), label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
  ];

And boom. Same trace.

[simonbrunel]

Checking that Object.isFrozen in the dataset controller may workaround this issue?

    // ...
    if (me._data !== data) {
        if (me._data) {
            // This case happens when the user replaced the data array instance.
            unlistenArrayEvents(me._data, me);
        }
        if (data && !Object.isFrozen(data)) {
            listenArrayEvents(data, me);
        }
        me._data = data;
    }
    // ...

[etimberg]

Good idea! I like that, keeps it nice and simple 😄

[Ant59]

This is still an issue with Angular 5.0, Chart.js 2.7.1, Ngrx 4.1.1.

The above fix suggested by @simonbrunel works.