aurelia-chart - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/amd/attributes/chart-attribute.js

@@ -1,2 +0,2 @@
-define(["exports", "aurelia-framework", "../observers/model-observer", "../shared/numeric-converter", "chartjs"], function (exports, _aureliaFramework, _observersModelObserver, _sharedNumericConverter, _chartjs) {
+define(["exports", "aurelia-framework", "../observers/model-observer", "chartjs"], function (exports, _aureliaFramework, _observersModelObserver, _chartjs) {
   "use strict";
@@ -45,3 +45,5 @@
       decorators: [_aureliaFramework.bindable],
-      initializer: null,
+      initializer: function initializer() {
+        return {};
+      },
       enumerable: true
@@ -68,3 +70,3 @@ }], null, _instanceInitializers);
       this.propertyChanged = function (propertyName, newValue, oldValue) {
-        if (_this._isSetup && _this.shouldUpdate) {
+        if (_this._isSetup && _this.shouldUpdate == true) {
           _this.refreshChart();
@@ -77,6 +79,5 @@ _this._modelObserver.unsubscribe();
       this.refreshChart = function () {
-        _this._activeChart.destroy();
-
-        _this.element.width = _this._canvasWidth;
-        _this.element.height = _this._canvasHeight;
+        _this._chartData.data = _this._clonedData;
+        _this._activeChart.update();
+        _this._activeChart.resize();
       };
@@ -86,3 +87,2 @@
       this._modelObserver = modelObserver;
-      this._numericConverter = new _sharedNumericConverter.NumericConverter();
     }
@@ -93,9 +93,6 @@
       value: function attached() {
-        this._canvasWidth = this.element.width;
-        this._canvasHeight = this.element.height;
-
         this.createChart();
         this._isSetup = true;
 
-        if (this.shouldUpdate) {
+        if (this.shouldUpdate == true) {
           this.subscribeToChanges();
@@ -107,6 +104,8 @@ }
       value: function detached() {
-        if (this.shouldUpdate) {
+        if (this.shouldUpdate == true) {
           this._modelObserver.unsubscribe();
         }
 
+        this._activeChart.destroy();
+
         this._isSetup = false;
@@ -117,5 +116,10 @@ }
       value: function createChart() {
-        var context2d = this.element.getContext("2d");
-        var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data);
-        this._activeChart = new _Chart["default"](context2d)[this.type](sanitisedData, this.nativeOptions);
+        this._chartData = {
+          type: this.type,
+          data: this._clonedData,
+          options: this.nativeOptions
+        };
+
+        this._activeChart = new _Chart["default"](this.element, this._chartData);
+        this.refreshChart();
       }
@@ -126,4 +130,14 @@ }, {
         this._modelObserver.throttle = this.throttle || 100;
-        this._modelObserver.observe(this.data, this.refreshChart);
+        this._modelObserver.observe(this.data.datasets, this.refreshChart);
       }
+    }, {
+      key: "_isObserving",
+      get: function get() {
+        return this.shouldUpdate == true || this.shouldUpdate == "true";
+      }
+    }, {
+      key: "_clonedData",
+      get: function get() {
+        return JSON.parse(JSON.stringify(this.data));
+      }
     }], null, _instanceInitializers);
@@ -130,0 +144,0 @@

dist/amd/elements/chart-element.js

@@ -1,2 +0,2 @@
-define(["exports", "aurelia-framework", "../observers/model-observer", "../shared/numeric-converter", "chartjs"], function (exports, _aureliaFramework, _observersModelObserver, _sharedNumericConverter, _chartjs) {
+define(["exports", "aurelia-framework", "../observers/model-observer", "chartjs"], function (exports, _aureliaFramework, _observersModelObserver, _chartjs) {
   "use strict";
@@ -45,3 +45,5 @@
       decorators: [_aureliaFramework.bindable],
-      initializer: null,
+      initializer: function initializer() {
+        return {};
+      },
       enumerable: true
@@ -75,3 +77,3 @@ }, {
       this.propertyChanged = function (propertyName, newValue, oldValue) {
-        if (_this._isSetup && _this.shouldUpdate) {
+        if (_this._isSetup && _this._isObserving) {
           _this.refreshChart();
@@ -84,11 +86,8 @@ _this._modelObserver.unsubscribe();
       this.refreshChart = function () {
-        _this._activeChart.destroy();
-        _this.createChart();
-
-        _this.canvasElement.width = _this._canvasWidth;
-        _this.canvasElement.height = _this._canvasHeight;
+        _this._chartData.data = _this._clonedData;
+        _this._activeChart.update();
+        _this._activeChart.resize();
       };
 
       this._modelObserver = modelObserver;
-      this._numericConverter = new _sharedNumericConverter.NumericConverter();
     }
@@ -99,9 +98,6 @@
       value: function attached() {
-        this._canvasWidth = this.canvasElement.width;
-        this._canvasHeight = this.canvasElement.height;
-
         this.createChart();
         this._isSetup = true;
 
-        if (this.shouldUpdate) {
+        if (this._isObserving) {
           this.subscribeToChanges();
@@ -113,6 +109,7 @@ }
       value: function detached() {
-        if (this.shouldUpdate) {
+        if (this._isObserving) {
           this._modelObserver.unsubscribe();
         }
 
+        this._activeChart.destroy();
         this._isSetup = false;
@@ -123,5 +120,10 @@ }
       value: function createChart() {
-        var context2d = this.canvasElement.getContext("2d");
-        var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data);
-        this._activeChart = new _Chart["default"](context2d)[this.type](sanitisedData, this.nativeOptions);
+        this._chartData = {
+          type: this.type,
+          data: this._clonedData,
+          options: this.nativeOptions
+        };
+
+        this._activeChart = new _Chart["default"](this.canvasElement, this._chartData);
+        this.refreshChart();
       }
@@ -132,4 +134,14 @@ }, {
         this._modelObserver.throttle = this.throttle || 100;
-        this._modelObserver.observe(this.data, this.refreshChart);
+        this._modelObserver.observe(this.data.datasets, this.refreshChart);
       }
+    }, {
+      key: "_isObserving",
+      get: function get() {
+        return this.shouldUpdate == true || this.shouldUpdate == "true";
+      }
+    }, {
+      key: "_clonedData",
+      get: function get() {
+        return JSON.parse(JSON.stringify(this.data));
+      }
     }], null, _instanceInitializers);
@@ -136,0 +148,0 @@

dist/amd/observers/model-observer.js

@@ -75,3 +75,2 @@ define(["exports", "aurelia-framework"], function (exports, _aureliaFramework) {
                     var typeOfData = this._getObjectType(model[property]);
-
                     switch (typeOfData) {
@@ -78,0 +77,0 @@ case "object":

dist/commonjs/attributes/chart-attribute.js

@@ -19,4 +19,2 @@ "use strict";
 
-var _sharedNumericConverter = require("../shared/numeric-converter");
-
 var _chartjs = require("chartjs");
@@ -53,3 +51,5 @@
     decorators: [_aureliaFramework.bindable],
-    initializer: null,
+    initializer: function initializer() {
+      return {};
+    },
     enumerable: true
@@ -76,3 +76,3 @@ }], null, _instanceInitializers);
     this.propertyChanged = function (propertyName, newValue, oldValue) {
-      if (_this._isSetup && _this.shouldUpdate) {
+      if (_this._isSetup && _this.shouldUpdate == true) {
         _this.refreshChart();
@@ -85,6 +85,5 @@ _this._modelObserver.unsubscribe();
     this.refreshChart = function () {
-      _this._activeChart.destroy();
-
-      _this.element.width = _this._canvasWidth;
-      _this.element.height = _this._canvasHeight;
+      _this._chartData.data = _this._clonedData;
+      _this._activeChart.update();
+      _this._activeChart.resize();
     };
@@ -94,3 +93,2 @@
     this._modelObserver = modelObserver;
-    this._numericConverter = new _sharedNumericConverter.NumericConverter();
   }
@@ -101,9 +99,6 @@
     value: function attached() {
-      this._canvasWidth = this.element.width;
-      this._canvasHeight = this.element.height;
-
       this.createChart();
       this._isSetup = true;
 
-      if (this.shouldUpdate) {
+      if (this.shouldUpdate == true) {
         this.subscribeToChanges();
@@ -115,6 +110,8 @@ }
     value: function detached() {
-      if (this.shouldUpdate) {
+      if (this.shouldUpdate == true) {
         this._modelObserver.unsubscribe();
       }
 
+      this._activeChart.destroy();
+
       this._isSetup = false;
@@ -125,5 +122,10 @@ }
     value: function createChart() {
-      var context2d = this.element.getContext("2d");
-      var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data);
-      this._activeChart = new _chartjs2["default"](context2d)[this.type](sanitisedData, this.nativeOptions);
+      this._chartData = {
+        type: this.type,
+        data: this._clonedData,
+        options: this.nativeOptions
+      };
+
+      this._activeChart = new _chartjs2["default"](this.element, this._chartData);
+      this.refreshChart();
     }
@@ -134,4 +136,14 @@ }, {
       this._modelObserver.throttle = this.throttle || 100;
-      this._modelObserver.observe(this.data, this.refreshChart);
+      this._modelObserver.observe(this.data.datasets, this.refreshChart);
     }
+  }, {
+    key: "_isObserving",
+    get: function get() {
+      return this.shouldUpdate == true || this.shouldUpdate == "true";
+    }
+  }, {
+    key: "_clonedData",
+    get: function get() {
+      return JSON.parse(JSON.stringify(this.data));
+    }
   }], null, _instanceInitializers);
@@ -138,0 +150,0 @@

dist/commonjs/elements/chart-element.js

@@ -19,4 +19,2 @@ "use strict";
 
-var _sharedNumericConverter = require("../shared/numeric-converter");
-
 var _chartjs = require("chartjs");
@@ -53,3 +51,5 @@
     decorators: [_aureliaFramework.bindable],
-    initializer: null,
+    initializer: function initializer() {
+      return {};
+    },
     enumerable: true
@@ -83,3 +83,3 @@ }, {
     this.propertyChanged = function (propertyName, newValue, oldValue) {
-      if (_this._isSetup && _this.shouldUpdate) {
+      if (_this._isSetup && _this._isObserving) {
         _this.refreshChart();
@@ -92,11 +92,8 @@ _this._modelObserver.unsubscribe();
     this.refreshChart = function () {
-      _this._activeChart.destroy();
-      _this.createChart();
-
-      _this.canvasElement.width = _this._canvasWidth;
-      _this.canvasElement.height = _this._canvasHeight;
+      _this._chartData.data = _this._clonedData;
+      _this._activeChart.update();
+      _this._activeChart.resize();
     };
 
     this._modelObserver = modelObserver;
-    this._numericConverter = new _sharedNumericConverter.NumericConverter();
   }
@@ -107,9 +104,6 @@
     value: function attached() {
-      this._canvasWidth = this.canvasElement.width;
-      this._canvasHeight = this.canvasElement.height;
-
       this.createChart();
       this._isSetup = true;
 
-      if (this.shouldUpdate) {
+      if (this._isObserving) {
         this.subscribeToChanges();
@@ -121,6 +115,7 @@ }
     value: function detached() {
-      if (this.shouldUpdate) {
+      if (this._isObserving) {
         this._modelObserver.unsubscribe();
       }
 
+      this._activeChart.destroy();
       this._isSetup = false;
@@ -131,5 +126,10 @@ }
     value: function createChart() {
-      var context2d = this.canvasElement.getContext("2d");
-      var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data);
-      this._activeChart = new _chartjs2["default"](context2d)[this.type](sanitisedData, this.nativeOptions);
+      this._chartData = {
+        type: this.type,
+        data: this._clonedData,
+        options: this.nativeOptions
+      };
+
+      this._activeChart = new _chartjs2["default"](this.canvasElement, this._chartData);
+      this.refreshChart();
     }
@@ -140,4 +140,14 @@ }, {
       this._modelObserver.throttle = this.throttle || 100;
-      this._modelObserver.observe(this.data, this.refreshChart);
+      this._modelObserver.observe(this.data.datasets, this.refreshChart);
     }
+  }, {
+    key: "_isObserving",
+    get: function get() {
+      return this.shouldUpdate == true || this.shouldUpdate == "true";
+    }
+  }, {
+    key: "_clonedData",
+    get: function get() {
+      return JSON.parse(JSON.stringify(this.data));
+    }
   }], null, _instanceInitializers);
@@ -144,0 +154,0 @@

dist/commonjs/observers/model-observer.js

@@ -76,3 +76,2 @@ "use strict";
                 var typeOfData = this._getObjectType(model[property]);
-
                 switch (typeOfData) {
@@ -79,0 +78,0 @@ case "object":

dist/es6/attributes/chart-attribute.js

@@ -1,4 +0,3 @@
-import {inject, customAttribute, useView, bindable} from 'aurelia-framework'
+import {inject, customAttribute, bindable} from 'aurelia-framework'
 import {ModelObserver} from "../observers/model-observer"
-import {NumericConverter} from "../shared/numeric-converter"
 import Chart from "chartjs"
@@ -13,10 +12,8 @@
   @bindable throttle;
-  @bindable nativeOptions;
+  @bindable nativeOptions = {};
 
   _activeChart;
-  _canvasWidth;
-  _canvasHeight;
   _modelObserver;
-  _numericConverter;
   _isSetup = false;
+  _chartData;
 
@@ -26,13 +23,9 @@ constructor(element, modelObserver) {
     this._modelObserver = modelObserver;
-    this._numericConverter = new NumericConverter();
   }
 
   attached() {
-    this._canvasWidth = this.element.width;
-    this._canvasHeight = this.element.height;
-
     this.createChart();
     this._isSetup = true;
 
-    if(this.shouldUpdate)
+    if(this.shouldUpdate == true)
     { this.subscribeToChanges(); }
@@ -42,5 +35,7 @@ }
   detached() {
-    if(this.shouldUpdate)
+    if(this.shouldUpdate == true)
     { this._modelObserver.unsubscribe(); }
 
+    this._activeChart.destroy();
+
     this._isSetup = false;
@@ -50,3 +45,3 @@ }
   propertyChanged = (propertyName, newValue, oldValue) => {
-    if(this._isSetup && this.shouldUpdate)
+    if(this._isSetup && this.shouldUpdate == true)
     {
@@ -59,14 +54,25 @@ this.refreshChart();
 
+  get _isObserving() {
+    return this.shouldUpdate == true || this.shouldUpdate == "true";
+  }
+
+  get _clonedData() {
+    return JSON.parse(JSON.stringify(this.data));
+  }
+
   createChart() {
-    var context2d = this.element.getContext("2d");
-    var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data); // doesnt like string based numerics
-    this._activeChart = new Chart(context2d)[this.type](sanitisedData, this.nativeOptions);
+    this._chartData = {
+      type: this.type,
+      data: this._clonedData,
+      options: this.nativeOptions
+    };
+
+    this._activeChart = new Chart(this.element, this._chartData);
+    this.refreshChart();
   };
 
   refreshChart = () => {
-    this._activeChart.destroy();
-
-    // This stops the chart shrinking into oblivion
-    this.element.width = this._canvasWidth;
-    this.element.height = this._canvasHeight;
+    this._chartData.data = this._clonedData;
+    this._activeChart.update();
+    this._activeChart.resize();
   };
@@ -76,5 +82,4 @@
     this._modelObserver.throttle = this.throttle || 100;
-    this._modelObserver.observe(this.data, this.refreshChart);
+    this._modelObserver.observe(this.data.datasets, this.refreshChart);
   };
-
 }

dist/es6/elements/chart-element.js

 import {inject, customElement, useView, bindable} from 'aurelia-framework'
 import {ModelObserver} from "../observers/model-observer"
-import {NumericConverter} from "../shared/numeric-converter"
 import Chart from "chartjs"
@@ -14,3 +13,3 @@
   @bindable throttle;
-  @bindable nativeOptions;
+  @bindable nativeOptions = {};
 
@@ -20,21 +19,15 @@ @bindable canvasElement;
   _activeChart;
-  _canvasWidth;
-  _canvasHeight;
   _modelObserver;
-  _numericConverter;
   _isSetup = false;
+  _chartData;
 
   constructor(modelObserver) {
     this._modelObserver = modelObserver;
-    this._numericConverter = new NumericConverter();
   }
 
   attached() {
-    this._canvasWidth = this.canvasElement.width;
-    this._canvasHeight = this.canvasElement.height;
-
     this.createChart();
     this._isSetup = true;
 
-    if(this.shouldUpdate)
+    if(this._isObserving)
     { this.subscribeToChanges(); }
@@ -44,5 +37,6 @@ }
   detached() {
-    if(this.shouldUpdate)
+    if(this._isObserving)
     { this._modelObserver.unsubscribe(); }
 
+    this._activeChart.destroy();
     this._isSetup = false;
@@ -52,3 +46,3 @@ }
   propertyChanged = (propertyName, newValue, oldValue) => {
-    if(this._isSetup && this.shouldUpdate)
+    if(this._isSetup && this._isObserving)
     {
@@ -61,15 +55,25 @@ this.refreshChart();
 
+  get _isObserving() {
+    return this.shouldUpdate == true || this.shouldUpdate == "true";
+  }
+
+  get _clonedData() {
+    return JSON.parse(JSON.stringify(this.data));
+  }
+
   createChart() {
-    var context2d = this.canvasElement.getContext("2d");
-    var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data); // doesnt like string based numerics
-    this._activeChart = new Chart(context2d)[this.type](sanitisedData, this.nativeOptions);
+    this._chartData = {
+      type: this.type,
+      data: this._clonedData,
+      options: this.nativeOptions
+    };
+
+    this._activeChart = new Chart(this.canvasElement, this._chartData);
+    this.refreshChart();
   };
 
   refreshChart = () => {
-    this._activeChart.destroy();
-    this.createChart();
-
-    // This stops the chart shrinking into oblivion
-    this.canvasElement.width = this._canvasWidth;
-    this.canvasElement.height = this._canvasHeight;
+    this._chartData.data = this._clonedData;
+    this._activeChart.update();
+    this._activeChart.resize();
   };
@@ -79,4 +83,4 @@
     this._modelObserver.throttle = this.throttle || 100;
-    this._modelObserver.observe(this.data, this.refreshChart);
+    this._modelObserver.observe(this.data.datasets, this.refreshChart);
   };
 }

dist/es6/observers/model-observer.js

@@ -62,3 +62,2 @@ import {BindingEngine, inject} from 'aurelia-framework';
             var typeOfData = this._getObjectType(model[property]);
-
             switch(typeOfData)
@@ -65,0 +64,0 @@ {

dist/system/attributes/chart-attribute.js

@@ -1,5 +0,5 @@
-System.register(["aurelia-framework", "../observers/model-observer", "../shared/numeric-converter", "chartjs"], function (_export) {
+System.register(["aurelia-framework", "../observers/model-observer", "chartjs"], function (_export) {
   "use strict";
 
-  var inject, customAttribute, useView, bindable, ModelObserver, NumericConverter, Chart, ChartAttribute;
+  var inject, customAttribute, bindable, ModelObserver, Chart, ChartAttribute;
 
@@ -16,8 +16,5 @@ var _createDecoratedClass = (function () { function defineProperties(target, descriptors, initializers) { for (var i = 0; i < descriptors.length; i++) { var descriptor = descriptors[i]; var decorators = descriptor.decorators; var key = descriptor.key; delete descriptor.key; delete descriptor.decorators; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor || descriptor.initializer) descriptor.writable = true; if (decorators) { for (var f = 0; f < decorators.length; f++) { var decorator = decorators[f]; if (typeof decorator === "function") { descriptor = decorator(target, key, descriptor) || descriptor; } else { throw new TypeError("The decorator for method " + descriptor.key + " is of the invalid type " + typeof decorator); } } if (descriptor.initializer !== undefined) { initializers[key] = descriptor; continue; } } Object.defineProperty(target, key, descriptor); } } return function (Constructor, protoProps, staticProps, protoInitializers, staticInitializers) { if (protoProps) defineProperties(Constructor.prototype, protoProps, protoInitializers); if (staticProps) defineProperties(Constructor, staticProps, staticInitializers); return Constructor; }; })();
       customAttribute = _aureliaFramework.customAttribute;
-      useView = _aureliaFramework.useView;
       bindable = _aureliaFramework.bindable;
     }, function (_observersModelObserver) {
       ModelObserver = _observersModelObserver.ModelObserver;
-    }, function (_sharedNumericConverter) {
-      NumericConverter = _sharedNumericConverter.NumericConverter;
     }, function (_chartjs) {
@@ -54,3 +51,5 @@ Chart = _chartjs["default"];
           decorators: [bindable],
-          initializer: null,
+          initializer: function initializer() {
+            return {};
+          },
           enumerable: true
@@ -77,3 +76,3 @@ }], null, _instanceInitializers);
           this.propertyChanged = function (propertyName, newValue, oldValue) {
-            if (_this._isSetup && _this.shouldUpdate) {
+            if (_this._isSetup && _this.shouldUpdate == true) {
               _this.refreshChart();
@@ -86,6 +85,5 @@ _this._modelObserver.unsubscribe();
           this.refreshChart = function () {
-            _this._activeChart.destroy();
-
-            _this.element.width = _this._canvasWidth;
-            _this.element.height = _this._canvasHeight;
+            _this._chartData.data = _this._clonedData;
+            _this._activeChart.update();
+            _this._activeChart.resize();
           };
@@ -95,3 +93,2 @@
           this._modelObserver = modelObserver;
-          this._numericConverter = new NumericConverter();
         }
@@ -102,9 +99,6 @@
           value: function attached() {
-            this._canvasWidth = this.element.width;
-            this._canvasHeight = this.element.height;
-
             this.createChart();
             this._isSetup = true;
 
-            if (this.shouldUpdate) {
+            if (this.shouldUpdate == true) {
               this.subscribeToChanges();
@@ -116,6 +110,8 @@ }
           value: function detached() {
-            if (this.shouldUpdate) {
+            if (this.shouldUpdate == true) {
               this._modelObserver.unsubscribe();
             }
 
+            this._activeChart.destroy();
+
             this._isSetup = false;
@@ -126,5 +122,10 @@ }
           value: function createChart() {
-            var context2d = this.element.getContext("2d");
-            var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data);
-            this._activeChart = new Chart(context2d)[this.type](sanitisedData, this.nativeOptions);
+            this._chartData = {
+              type: this.type,
+              data: this._clonedData,
+              options: this.nativeOptions
+            };
+
+            this._activeChart = new Chart(this.element, this._chartData);
+            this.refreshChart();
           }
@@ -135,4 +136,14 @@ }, {
             this._modelObserver.throttle = this.throttle || 100;
-            this._modelObserver.observe(this.data, this.refreshChart);
+            this._modelObserver.observe(this.data.datasets, this.refreshChart);
           }
+        }, {
+          key: "_isObserving",
+          get: function get() {
+            return this.shouldUpdate == true || this.shouldUpdate == "true";
+          }
+        }, {
+          key: "_clonedData",
+          get: function get() {
+            return JSON.parse(JSON.stringify(this.data));
+          }
         }], null, _instanceInitializers);
@@ -139,0 +150,0 @@

dist/system/elements/chart-element.js

@@ -1,5 +0,5 @@
-System.register(["aurelia-framework", "../observers/model-observer", "../shared/numeric-converter", "chartjs"], function (_export) {
+System.register(["aurelia-framework", "../observers/model-observer", "chartjs"], function (_export) {
   "use strict";
 
-  var inject, customElement, useView, bindable, ModelObserver, NumericConverter, Chart, ChartElement;
+  var inject, customElement, useView, bindable, ModelObserver, Chart, ChartElement;
 
@@ -20,4 +20,2 @@ var _createDecoratedClass = (function () { function defineProperties(target, descriptors, initializers) { for (var i = 0; i < descriptors.length; i++) { var descriptor = descriptors[i]; var decorators = descriptor.decorators; var key = descriptor.key; delete descriptor.key; delete descriptor.decorators; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor || descriptor.initializer) descriptor.writable = true; if (decorators) { for (var f = 0; f < decorators.length; f++) { var decorator = decorators[f]; if (typeof decorator === "function") { descriptor = decorator(target, key, descriptor) || descriptor; } else { throw new TypeError("The decorator for method " + descriptor.key + " is of the invalid type " + typeof decorator); } } if (descriptor.initializer !== undefined) { initializers[key] = descriptor; continue; } } Object.defineProperty(target, key, descriptor); } } return function (Constructor, protoProps, staticProps, protoInitializers, staticInitializers) { if (protoProps) defineProperties(Constructor.prototype, protoProps, protoInitializers); if (staticProps) defineProperties(Constructor, staticProps, staticInitializers); return Constructor; }; })();
       ModelObserver = _observersModelObserver.ModelObserver;
-    }, function (_sharedNumericConverter) {
-      NumericConverter = _sharedNumericConverter.NumericConverter;
     }, function (_chartjs) {
@@ -54,3 +52,5 @@ Chart = _chartjs["default"];
           decorators: [bindable],
-          initializer: null,
+          initializer: function initializer() {
+            return {};
+          },
           enumerable: true
@@ -84,3 +84,3 @@ }, {
           this.propertyChanged = function (propertyName, newValue, oldValue) {
-            if (_this._isSetup && _this.shouldUpdate) {
+            if (_this._isSetup && _this._isObserving) {
               _this.refreshChart();
@@ -93,11 +93,8 @@ _this._modelObserver.unsubscribe();
           this.refreshChart = function () {
-            _this._activeChart.destroy();
-            _this.createChart();
-
-            _this.canvasElement.width = _this._canvasWidth;
-            _this.canvasElement.height = _this._canvasHeight;
+            _this._chartData.data = _this._clonedData;
+            _this._activeChart.update();
+            _this._activeChart.resize();
           };
 
           this._modelObserver = modelObserver;
-          this._numericConverter = new NumericConverter();
         }
@@ -108,9 +105,6 @@
           value: function attached() {
-            this._canvasWidth = this.canvasElement.width;
-            this._canvasHeight = this.canvasElement.height;
-
             this.createChart();
             this._isSetup = true;
 
-            if (this.shouldUpdate) {
+            if (this._isObserving) {
               this.subscribeToChanges();
@@ -122,6 +116,7 @@ }
           value: function detached() {
-            if (this.shouldUpdate) {
+            if (this._isObserving) {
               this._modelObserver.unsubscribe();
             }
 
+            this._activeChart.destroy();
             this._isSetup = false;
@@ -132,5 +127,10 @@ }
           value: function createChart() {
-            var context2d = this.canvasElement.getContext("2d");
-            var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data);
-            this._activeChart = new Chart(context2d)[this.type](sanitisedData, this.nativeOptions);
+            this._chartData = {
+              type: this.type,
+              data: this._clonedData,
+              options: this.nativeOptions
+            };
+
+            this._activeChart = new Chart(this.canvasElement, this._chartData);
+            this.refreshChart();
           }
@@ -141,4 +141,14 @@ }, {
             this._modelObserver.throttle = this.throttle || 100;
-            this._modelObserver.observe(this.data, this.refreshChart);
+            this._modelObserver.observe(this.data.datasets, this.refreshChart);
           }
+        }, {
+          key: "_isObserving",
+          get: function get() {
+            return this.shouldUpdate == true || this.shouldUpdate == "true";
+          }
+        }, {
+          key: "_clonedData",
+          get: function get() {
+            return JSON.parse(JSON.stringify(this.data));
+          }
         }], null, _instanceInitializers);
@@ -145,0 +155,0 @@

dist/system/observers/model-observer.js

@@ -79,3 +79,2 @@ System.register(["aurelia-framework"], function (_export) {
                             var typeOfData = this._getObjectType(model[property]);
-
                             switch (typeOfData) {
@@ -82,0 +81,0 @@ case "object":

examples/config.js

 System.config({
-  baseURL: ".",
   defaultJSExtensions: true,
@@ -7,24 +6,21 @@ transpiler: "babel",
     "github:*": "jspm_packages/github/*",
-    "npm:*": "jspm_packages/npm/*",
-    "aurelia-chart": "../dist/commonjs/"
+    "npm:*": "jspm_packages/npm/*"
   },
   packages: {
     "aurelia-chart": {
-      "main": "index.js",
-      "map": {
-        "*": "**/*"
-      }
+      "main": "index.js"
     }
   },
   map: {
-    "aurelia-bootstrapper": "npm:aurelia-bootstrapper@1.0.0-beta.1.1.4",
-    "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.5",
-    "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.1.4",
-    "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.6",
-    "aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1.1.4",
-    "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.1.4",
-    "babel": "npm:babel-core@5.8.35",
-    "babel-runtime": "npm:babel-runtime@5.8.35",
-    "chartjs": "github:nnnick/Chart.js@1.0.2",
-    "core-js": "npm:core-js@1.2.6",
+    "aurelia-bootstrapper": "npm:aurelia-bootstrapper@1.0.0-beta.1.2.0",
+    "aurelia-chart": "../dist/commonjs/",
+    "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.2",
+    "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.2.2",
+    "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+    "aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1.2.0",
+    "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.3",
+    "babel": "npm:babel-core@5.8.38",
+    "babel-runtime": "npm:babel-runtime@5.8.38",
+    "chartjs": "npm:chart.js@2.0.2",
+    "core-js": "npm:core-js@2.3.0",
     "github:jspm/nodelibs-assert@0.1.0": {
@@ -45,124 +41,140 @@ "assert": "npm:assert@1.3.0"
     },
-    "npm:aurelia-binding@1.0.0-beta.1.2.2": {
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.6",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
-      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.1"
+    "npm:aurelia-binding@1.0.0-beta.1.3.2": {
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
+      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-bootstrapper@1.0.0-beta.1.1.4": {
-      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1.1.1",
-      "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.1.4",
-      "aurelia-history": "npm:aurelia-history@1.0.0-beta.1.1.1",
-      "aurelia-history-browser": "npm:aurelia-history-browser@1.0.0-beta.1.1.4",
-      "aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.1.3",
-      "aurelia-logging-console": "npm:aurelia-logging-console@1.0.0-beta.1.1.4",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
-      "aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1.1.4",
-      "aurelia-polyfills": "npm:aurelia-polyfills@1.0.0-beta.1.0.6",
-      "aurelia-router": "npm:aurelia-router@1.0.0-beta.1.1.3",
-      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.1.4",
-      "aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1.1.2",
-      "aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.1.3",
-      "aurelia-templating-router": "npm:aurelia-templating-router@1.0.0-beta.1.1.2"
+    "npm:aurelia-bootstrapper@1.0.0-beta.1.2.0": {
+      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1.2.0",
+      "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.2.2",
+      "aurelia-history": "npm:aurelia-history@1.0.0-beta.1.2.0",
+      "aurelia-history-browser": "npm:aurelia-history-browser@1.0.0-beta.1.2.0",
+      "aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.2.1",
+      "aurelia-logging-console": "npm:aurelia-logging-console@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
+      "aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1.2.0",
+      "aurelia-polyfills": "npm:aurelia-polyfills@1.0.0-beta.1.1.2",
+      "aurelia-router": "npm:aurelia-router@1.0.0-beta.1.2.1",
+      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.3",
+      "aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1.2.1",
+      "aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.2.2",
+      "aurelia-templating-router": "npm:aurelia-templating-router@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-dependency-injection@1.0.0-beta.1.1.5": {
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2",
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.6",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    "npm:aurelia-dependency-injection@1.0.0-beta.1.2.2": {
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-event-aggregator@1.0.0-beta.1.1.1": {
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2"
+    "npm:aurelia-event-aggregator@1.0.0-beta.1.2.0": {
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-framework@1.0.0-beta.1.1.4": {
-      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.2.2",
-      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.5",
-      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.1.1",
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2",
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.6",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.1",
-      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.1",
-      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.1.4"
+    "npm:aurelia-framework@1.0.0-beta.1.2.2": {
+      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.2",
+      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.2",
+      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.2.0",
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
+      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.2.0",
+      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.3"
     },
-    "npm:aurelia-history-browser@1.0.0-beta.1.1.4": {
-      "aurelia-history": "npm:aurelia-history@1.0.0-beta.1.1.1",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    "npm:aurelia-history-browser@1.0.0-beta.1.2.0": {
+      "aurelia-history": "npm:aurelia-history@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-loader-default@1.0.0-beta.1.1.3": {
-      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.1.1",
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.6",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    "npm:aurelia-loader-default@1.0.0-beta.1.2.1": {
+      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.2.0",
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-loader@1.0.0-beta.1.1.1": {
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.6",
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.1"
+    "npm:aurelia-loader@1.0.0-beta.1.2.0": {
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1"
     },
-    "npm:aurelia-logging-console@1.0.0-beta.1.1.4": {
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    "npm:aurelia-logging-console@1.0.0-beta.1.2.0": {
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-metadata@1.0.0-beta.1.1.6": {
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    "npm:aurelia-metadata@1.0.0-beta.1.2.0": {
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-pal-browser@1.0.0-beta.1.1.4": {
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    "npm:aurelia-pal-browser@1.0.0-beta.1.2.0": {
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-polyfills@1.0.0-beta.1.0.6": {
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    "npm:aurelia-polyfills@1.0.0-beta.1.1.2": {
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-route-recognizer@1.0.0-beta.1.1.3": {
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.1"
+    "npm:aurelia-route-recognizer@1.0.0-beta.1.2.0": {
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1"
     },
-    "npm:aurelia-router@1.0.0-beta.1.1.3": {
-      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.5",
-      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1.1.1",
-      "aurelia-history": "npm:aurelia-history@1.0.0-beta.1.1.1",
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2",
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.1",
-      "aurelia-route-recognizer": "npm:aurelia-route-recognizer@1.0.0-beta.1.1.3"
+    "npm:aurelia-router@1.0.0-beta.1.2.1": {
+      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.2",
+      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1.2.0",
+      "aurelia-history": "npm:aurelia-history@1.0.0-beta.1.2.0",
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
+      "aurelia-route-recognizer": "npm:aurelia-route-recognizer@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-task-queue@1.0.0-beta.1.1.1": {
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    "npm:aurelia-task-queue@1.0.0-beta.1.2.0": {
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
     },
-    "npm:aurelia-templating-binding@1.0.0-beta.1.1.2": {
-      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.2.2",
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2",
-      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.1.4"
+    "npm:aurelia-templating-binding@1.0.0-beta.1.2.1": {
+      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.2",
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
+      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.3"
     },
-    "npm:aurelia-templating-resources@1.0.0-beta.1.1.3": {
-      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.2.2",
-      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.5",
-      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.1.1",
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.1",
-      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.1",
-      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.1.4"
+    "npm:aurelia-templating-resources@1.0.0-beta.1.2.2": {
+      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.2",
+      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.2",
+      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.2.0",
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
+      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.2.0",
+      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.3"
     },
-    "npm:aurelia-templating-router@1.0.0-beta.1.1.2": {
-      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.5",
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2",
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.6",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.1",
-      "aurelia-router": "npm:aurelia-router@1.0.0-beta.1.1.3",
-      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.1.4"
+    "npm:aurelia-templating-router@1.0.0-beta.1.2.0": {
+      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.2",
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
+      "aurelia-router": "npm:aurelia-router@1.0.0-beta.1.2.1",
+      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.3"
     },
-    "npm:aurelia-templating@1.0.0-beta.1.1.4": {
-      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.2.2",
-      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.5",
-      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.1.1",
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.2",
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.6",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.1",
-      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.1"
+    "npm:aurelia-templating@1.0.0-beta.1.2.3": {
+      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.2",
+      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.2",
+      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.2.0",
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
+      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.2.0"
     },
-    "npm:babel-runtime@5.8.35": {
+    "npm:babel-runtime@5.8.38": {
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
-    "npm:core-js@1.2.6": {
+    "npm:chart.js@2.0.2": {
+      "chartjs-color": "npm:chartjs-color@1.0.22",
+      "child_process": "github:jspm/nodelibs-child_process@0.1.0",
       "fs": "github:jspm/nodelibs-fs@0.1.2",
+      "moment": "npm:moment@2.13.0",
+      "process": "github:jspm/nodelibs-process@0.1.2",
+      "systemjs-json": "github:systemjs/plugin-json@0.1.2"
+    },
+    "npm:chartjs-color-string@0.4.0": {
+      "color-name": "npm:color-name@1.1.1"
+    },
+    "npm:chartjs-color@1.0.22": {
+      "chartjs-color-string": "npm:chartjs-color-string@0.4.0",
+      "color-convert": "npm:color-convert@0.5.3"
+    },
+    "npm:core-js@2.3.0": {
+      "fs": "github:jspm/nodelibs-fs@0.1.2",
       "path": "github:jspm/nodelibs-path@0.1.0",
       "process": "github:jspm/nodelibs-process@0.1.2",
-      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
+      "systemjs-json": "github:systemjs/plugin-json@0.1.2"
     },
@@ -185,85 +197,136 @@ "npm:inherits@2.0.1": {
     "aurelia-bundle.min.js": [
-      "github:nnnick/[e-mail]",
-      "github:nnnick/Chart.js@1.0.2/Chart.js",
-      "npm:[e-mail]",
-      "npm:aurelia-binding@1.0.0-beta.1.2.2/aurelia-binding.js",
-      "npm:[e-mail]",
-      "npm:aurelia-bootstrapper@1.0.0-beta.1.1.4/aurelia-bootstrapper.js",
-      "npm:[e-mail]",
-      "npm:aurelia-dependency-injection@1.0.0-beta.1.1.5/aurelia-dependency-injection.js",
-      "npm:[e-mail]",
-      "npm:aurelia-event-aggregator@1.0.0-beta.1.1.1/aurelia-event-aggregator.js",
-      "npm:[e-mail]",
-      "npm:aurelia-framework@1.0.0-beta.1.1.4/aurelia-framework.js",
-      "npm:[e-mail]",
-      "npm:aurelia-history-browser@1.0.0-beta.1.1.4/aurelia-history-browser.js",
-      "npm:[e-mail]",
-      "npm:aurelia-history@1.0.0-beta.1.1.1/aurelia-history.js",
-      "npm:[e-mail]",
-      "npm:aurelia-loader-default@1.0.0-beta.1.1.3/aurelia-loader-default.js",
-      "npm:[e-mail]",
-      "npm:aurelia-loader@1.0.0-beta.1.1.1/aurelia-loader.js",
-      "npm:[e-mail]",
-      "npm:aurelia-logging-console@1.0.0-beta.1.1.4/aurelia-logging-console.js",
-      "npm:[e-mail]",
-      "npm:aurelia-logging@1.0.0-beta.1.1.2/aurelia-logging.js",
-      "npm:[e-mail]",
-      "npm:aurelia-metadata@1.0.0-beta.1.1.6/aurelia-metadata.js",
-      "npm:[e-mail]",
-      "npm:aurelia-pal-browser@1.0.0-beta.1.1.4/aurelia-pal-browser.js",
-      "npm:[e-mail]",
-      "npm:aurelia-pal@1.0.0-beta.1.1.1/aurelia-pal.js",
-      "npm:[e-mail]",
-      "npm:aurelia-path@1.0.0-beta.1.1.1/aurelia-path.js",
-      "npm:[e-mail]",
-      "npm:aurelia-polyfills@1.0.0-beta.1.0.6/aurelia-polyfills.js",
-      "npm:[e-mail]",
-      "npm:aurelia-route-recognizer@1.0.0-beta.1.1.3/aurelia-route-recognizer.js",
-      "npm:[e-mail]",
-      "npm:aurelia-router@1.0.0-beta.1.1.3/aurelia-router.js",
-      "npm:[e-mail]",
-      "npm:aurelia-task-queue@1.0.0-beta.1.1.1/aurelia-task-queue.js",
-      "npm:[e-mail]",
-      "npm:aurelia-templating-binding@1.0.0-beta.1.1.2/aurelia-templating-binding.js",
-      "npm:[e-mail]",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/analyze-view-factory.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/array-repeat-strategy.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/aurelia-templating-resources.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/binding-mode-behaviors.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/binding-signaler.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/compile-spy.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/compose.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/css-resource.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/debounce-binding-behavior.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/dynamic-element.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/focus.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/hide.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/html-sanitizer.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/if.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/map-repeat-strategy.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/null-repeat-strategy.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/number-repeat-strategy.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/repeat-strategy-locator.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/repeat-utilities.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/repeat.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/replaceable.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/sanitize-html.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/set-repeat-strategy.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/show.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/signal-binding-behavior.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/throttle-binding-behavior.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/update-trigger-binding-behavior.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/view-spy.js",
-      "npm:aurelia-templating-resources@1.0.0-beta.1.1.3/with.js",
-      "npm:[e-mail]",
-      "npm:aurelia-templating-router@1.0.0-beta.1.1.2/aurelia-templating-router.js",
-      "npm:aurelia-templating-router@1.0.0-beta.1.1.2/route-href.js",
-      "npm:aurelia-templating-router@1.0.0-beta.1.1.2/route-loader.js",
-      "npm:aurelia-templating-router@1.0.0-beta.1.1.2/router-view.js",
-      "npm:[e-mail]",
-      "npm:aurelia-templating@1.0.0-beta.1.1.4/aurelia-templating.js",
-      "npm:[e-mail]",
-      "npm:babel-core@5.8.35/browser.js"
+      "github:jspm/[e-mail]",
+      "github:jspm/nodelibs-process@0.1.2/index.js",
+      "npm:[e-mail]",
+      "npm:aurelia-binding@1.0.0-beta.1.3.2/aurelia-binding.js",
+      "npm:[e-mail]",
+      "npm:aurelia-bootstrapper@1.0.0-beta.1.2.0/aurelia-bootstrapper.js",
+      "npm:[e-mail]",
+      "npm:aurelia-dependency-injection@1.0.0-beta.1.2.2/aurelia-dependency-injection.js",
+      "npm:[e-mail]",
+      "npm:aurelia-event-aggregator@1.0.0-beta.1.2.0/aurelia-event-aggregator.js",
+      "npm:[e-mail]",
+      "npm:aurelia-framework@1.0.0-beta.1.2.2/aurelia-framework.js",
+      "npm:[e-mail]",
+      "npm:aurelia-history-browser@1.0.0-beta.1.2.0/aurelia-history-browser.js",
+      "npm:[e-mail]",
+      "npm:aurelia-history@1.0.0-beta.1.2.0/aurelia-history.js",
+      "npm:[e-mail]",
+      "npm:aurelia-loader-default@1.0.0-beta.1.2.1/aurelia-loader-default.js",
+      "npm:[e-mail]",
+      "npm:aurelia-loader@1.0.0-beta.1.2.0/aurelia-loader.js",
+      "npm:[e-mail]",
+      "npm:aurelia-logging-console@1.0.0-beta.1.2.0/aurelia-logging-console.js",
+      "npm:[e-mail]",
+      "npm:aurelia-logging@1.0.0-beta.1.2.0/aurelia-logging.js",
+      "npm:[e-mail]",
+      "npm:aurelia-metadata@1.0.0-beta.1.2.0/aurelia-metadata.js",
+      "npm:[e-mail]",
+      "npm:aurelia-pal-browser@1.0.0-beta.1.2.0/aurelia-pal-browser.js",
+      "npm:[e-mail]",
+      "npm:aurelia-pal@1.0.0-beta.1.2.0/aurelia-pal.js",
+      "npm:[e-mail]",
+      "npm:aurelia-path@1.0.0-beta.1.2.1/aurelia-path.js",
+      "npm:[e-mail]",
+      "npm:aurelia-polyfills@1.0.0-beta.1.1.2/aurelia-polyfills.js",
+      "npm:[e-mail]",
+      "npm:aurelia-route-recognizer@1.0.0-beta.1.2.0/aurelia-route-recognizer.js",
+      "npm:[e-mail]",
+      "npm:aurelia-router@1.0.0-beta.1.2.1/aurelia-router.js",
+      "npm:[e-mail]",
+      "npm:aurelia-task-queue@1.0.0-beta.1.2.0/aurelia-task-queue.js",
+      "npm:[e-mail]",
+      "npm:aurelia-templating-binding@1.0.0-beta.1.2.1/aurelia-templating-binding.js",
+      "npm:[e-mail]",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/abstract-repeater.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/analyze-view-factory.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/array-repeat-strategy.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/aurelia-templating-resources.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/binding-mode-behaviors.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/binding-signaler.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/compile-spy.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/compose.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/css-resource.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/debounce-binding-behavior.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/dynamic-element.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/focus.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/hide.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/html-resource-plugin.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/html-sanitizer.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/if.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/map-repeat-strategy.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/null-repeat-strategy.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/number-repeat-strategy.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/repeat-strategy-locator.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/repeat-utilities.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/repeat.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/replaceable.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/sanitize-html.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/set-repeat-strategy.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/show.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/signal-binding-behavior.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/throttle-binding-behavior.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/update-trigger-binding-behavior.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/view-spy.js",
+      "npm:aurelia-templating-resources@1.0.0-beta.1.2.2/with.js",
+      "npm:[e-mail]",
+      "npm:aurelia-templating-router@1.0.0-beta.1.2.0/aurelia-templating-router.js",
+      "npm:aurelia-templating-router@1.0.0-beta.1.2.0/route-href.js",
+      "npm:aurelia-templating-router@1.0.0-beta.1.2.0/route-loader.js",
+      "npm:aurelia-templating-router@1.0.0-beta.1.2.0/router-view.js",
+      "npm:[e-mail]",
+      "npm:aurelia-templating@1.0.0-beta.1.2.3/aurelia-templating.js",
+      "npm:[e-mail]",
+      "npm:babel-core@5.8.38/browser.js",
+      "npm:[e-mail]",
+      "npm:chart.js@2.0.2/src/chart.js",
+      "npm:chart.js@2.0.2/src/charts/Chart.Bar.js",
+      "npm:chart.js@2.0.2/src/charts/Chart.Bubble.js",
+      "npm:chart.js@2.0.2/src/charts/Chart.Doughnut.js",
+      "npm:chart.js@2.0.2/src/charts/Chart.Line.js",
+      "npm:chart.js@2.0.2/src/charts/Chart.PolarArea.js",
+      "npm:chart.js@2.0.2/src/charts/Chart.Radar.js",
+      "npm:chart.js@2.0.2/src/charts/Chart.Scatter.js",
+      "npm:chart.js@2.0.2/src/controllers/controller.bar.js",
+      "npm:chart.js@2.0.2/src/controllers/controller.bubble.js",
+      "npm:chart.js@2.0.2/src/controllers/controller.doughnut.js",
+      "npm:chart.js@2.0.2/src/controllers/controller.line.js",
+      "npm:chart.js@2.0.2/src/controllers/controller.polarArea.js",
+      "npm:chart.js@2.0.2/src/controllers/controller.radar.js",
+      "npm:chart.js@2.0.2/src/core/core.animation.js",
+      "npm:chart.js@2.0.2/src/core/core.controller.js",
+      "npm:chart.js@2.0.2/src/core/core.datasetController.js",
+      "npm:chart.js@2.0.2/src/core/core.element.js",
+      "npm:chart.js@2.0.2/src/core/core.helpers.js",
+      "npm:chart.js@2.0.2/src/core/core.js",
+      "npm:chart.js@2.0.2/src/core/core.layoutService.js",
+      "npm:chart.js@2.0.2/src/core/core.legend.js",
+      "npm:chart.js@2.0.2/src/core/core.scale.js",
+      "npm:chart.js@2.0.2/src/core/core.scaleService.js",
+      "npm:chart.js@2.0.2/src/core/core.title.js",
+      "npm:chart.js@2.0.2/src/core/core.tooltip.js",
+      "npm:chart.js@2.0.2/src/elements/element.arc.js",
+      "npm:chart.js@2.0.2/src/elements/element.line.js",
+      "npm:chart.js@2.0.2/src/elements/element.point.js",
+      "npm:chart.js@2.0.2/src/elements/element.rectangle.js",
+      "npm:chart.js@2.0.2/src/scales/scale.category.js",
+      "npm:chart.js@2.0.2/src/scales/scale.linear.js",
+      "npm:chart.js@2.0.2/src/scales/scale.logarithmic.js",
+      "npm:chart.js@2.0.2/src/scales/scale.radialLinear.js",
+      "npm:chart.js@2.0.2/src/scales/scale.time.js",
+      "npm:[e-mail]",
+      "npm:chartjs-color-string@0.4.0/color-string.js",
+      "npm:[e-mail]",
+      "npm:chartjs-color@1.0.22/src/color.js",
+      "npm:[e-mail]",
+      "npm:color-convert@0.5.3/conversions.js",
+      "npm:color-convert@0.5.3/index.js",
+      "npm:[e-mail]",
+      "npm:color-name@1.1.1/index.js",
+      "npm:[e-mail]",
+      "npm:moment@2.13.0/moment.js",
+      "npm:[e-mail]",
+      "npm:process@0.11.2/browser.js"
     ]
   }
 });

examples/package.json

@@ -9,3 +9,3 @@ {
       "aurelia-templating": "npm:aurelia-templating@^1.0.0-beta.1.1.2",
-      "chartjs": "github:nnnick/Chart.js@1.0.2"
+      "chartjs": "npm:chart.js@^2.0.2"
     },
@@ -16,3 +16,10 @@ "devDependencies": {
       "babel-runtime": "npm:babel-runtime@^5.8.24",
-      "core-js": "npm:core-js@^1.1.4"
+      "core-js": "npm:core-js@^2.0.3",
+      "traceur": "github:jmcriffey/bower-traceur@0.0.93",
+      "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.93"
+    },
+    "overrides": {
+      "npm:core-js@2.0.3": {
+        "main": "client/shim.min"
+      }
     }
@@ -19,0 +26,0 @@ },

examples/src/app.js

 export class App
 {
     constructor(){
-        this.DynamicDoughnutData = [];
-        this.SimpleLineData = {}
+        this.DynamicDoughnutData = {};
+        this.SimpleLineData = {};
 
@@ -12,22 +12,19 @@ this.resetPieData();
     resetPieData() {
-        this.DynamicDoughnutData = [
-            {
-                value: 300,
-                color:"#F7464A",
-                highlight: "#FF5A5E",
-                label: "Red"
-            },
-            {
-                value: 100,
-                color: "#46BFBD",
-                highlight: "#5AD3D1",
-                label: "Green"
-            },
-            {
-                value: 20,
-                color: "#FDB45C",
-                highlight: "#FFC870",
-                label: "Yellow"
-            }
-        ]
+        this.DynamicDoughnutData = {
+            labels: ["Red", "Green", "Yellow" ],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: [
+                        "#FF6384",
+                        "#36A2EB",
+                        "#FFCE56"
+                    ],
+                    hoverBackgroundColor: [
+                        "#FF6384",
+                        "#36A2EB",
+                        "#FFCE56"
+                    ]
+                }]
+        };
     }
@@ -40,5 +37,5 @@
                 {
-                    label: "My First dataset",
-                    fillColor: "rgba(220,220,220,0.2)",
-                    strokeColor: "rgba(220,220,220,1)",
+                    label: "Healthy People",
+                    backgroundColor: "rgba(220,220,220,0.2)",
+                    borderColor: "rgba(220,220,220,1)",
                     pointColor: "rgba(220,220,220,1)",
@@ -51,5 +48,5 @@ pointStrokeColor: "#fff",
                 {
-                    label: "My Second dataset",
-                    fillColor: "rgba(151,187,205,0.2)",
-                    strokeColor: "rgba(151,187,205,1)",
+                    label: "Ill People",
+                    backgroundColor: "rgba(151,187,205,0.2)",
+                    borderColor: "rgba(151,187,205,1)",
                     pointColor: "rgba(151,187,205,1)",
@@ -66,10 +63,7 @@ pointStrokeColor: "#fff",
     addEntry() {
-        this.DynamicDoughnutData.push({
-            value: 40,
-            color: "#B4FD5C",
-            highlight: "#FFC870",
-            label: "Other"
-        });
+        this.DynamicDoughnutData.labels.push("New Colour");
+        this.DynamicDoughnutData.datasets[0].data.push(50);
+        this.DynamicDoughnutData.datasets[0].backgroundColor.push("#B4FD5C");
     };
 
 }

package.json

 {
   "name": "aurelia-chart",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "registry": "jspm",
@@ -29,3 +29,3 @@ "description": "A simple element to handle showing charts (uses chart js behind the scenes)",
       "aurelia-templating": "npm:aurelia-templating@^1.0.0-beta.1.1.1",
-      "chartjs": "github:nnnick/Chart.js@1.0.2"
+      "chartjs": "npm:chart.js@^2.0.2"
     },
@@ -32,0 +32,0 @@ "devDependencies": {

readme.md

 # Aurelia-Chart
 
-A simple binding to let aurelia and chartjs come together for the greater good.
+A simple binding to let aurelia and chartjs (2.x) come together for the greater good.
 
 It supports the basic graph types and should work with any custom ones.
 
-One major reason why this is a good idea is because this way you do not need your view model
-knowing about your DOM elements, as the binding takes care of that, so you just expose
-the meaningful stuff.
+## IMPORTANT CHANGES
 
+Since version 0.2.0 of this library it has moved over to use the newer chartjs 2.x, which means schemas
+are now slightly different for certain graphs (like pies) and some of the properties have been renamed. 
+So if you need to stick with the old chartjs (1.x) syntax use versions of this library < 0.2.0. Also in
+the latest chartjs the type syntax is lower case now, so you no longer need to worry about caps.
+
 ## Install
@@ -19,3 +22,3 @@
 
-`aurelia.use.plugin("grofit/aurelia-chart");`
+`aurelia.use.plugin("aurelia-chart");`
 
@@ -36,13 +39,2 @@ ## Example
 
-* If you are going to dynamically update your data, set a width/height on your canvas
-
-This is because ChartJS seems to freak out when its destroyed and recreated and will otherwise shrink
-into oblivion, we manually cache the desired width and height to stop this happening
-
-* Do not use textual data for values
-
-ChartJS can only handle numeric data, and we try to account for this when you receive input via bindings
-as by default input values are a string, ChartJS dislikes this, so we have to go through the generated
-data and manually replace textual instances of numbers to actual numbers.
-
 * It is advised you set a throttle when you use `should-update`, and a graph will only update if `should-update` is true
@@ -54,12 +46,6 @@
 
-* Make sure the type matches the caps of the desired type
-
-If you want a Pie chart make sure you do `type: 'Pie'` not `type: 'pie'` as it will not recognise the method and
-will fall over. There was an initial fix to allow you to put in whatever case you wanted but then we realised
-`PolarArea` would not work as it would end up as `Polararea` so we opted to leave that out for you to manage.
-
 ## Usage
 The element expects a type element describing what type of chart you want and the data you wish to expose:
 ```
-<chart type="Bar" data.bind="myData" }"></chart>
+<chart type="bar" data.bind="myData"></chart>
 ```
@@ -69,3 +55,3 @@
 ```
-<chart type="Pie" data.bind="myData" native-options.bind="{ segmentShowStroke: true, segmentStrokeColor: '#fff', segmentStrokeWidth: 2 } }"></chart>
+<chart type="pie" data.bind="myData" native-options.bind="{ segmentShowStroke: true, segmentStrokeColor: '#fff', segmentStrokeWidth: 2 }"></chart>
 ```
@@ -75,3 +61,3 @@
 ```
-<chart type="Pie" data.bind="myData" should-update="true" throttle="100" }"></chart>
+<chart type="pie" data.bind="myData" should-update="true" throttle="100"></chart>
 ```
@@ -81,3 +67,3 @@
 ```
-<canvas chart="type: Pie; data.bind: myData; should-update: true; throttle: 100;"></canvas>
+<canvas chart="type: pie; data.bind: myData; should-update: true; throttle: 100;"></canvas>
 ```
@@ -84,0 +70,0 @@

src/attributes/chart-attribute.js

@@ -1,4 +0,3 @@
-import {inject, customAttribute, useView, bindable} from 'aurelia-framework'
+import {inject, customAttribute, bindable} from 'aurelia-framework'
 import {ModelObserver} from "../observers/model-observer"
-import {NumericConverter} from "../shared/numeric-converter"
 import Chart from "chartjs"
@@ -13,10 +12,8 @@
   @bindable throttle;
-  @bindable nativeOptions;
+  @bindable nativeOptions = {};
 
   _activeChart;
-  _canvasWidth;
-  _canvasHeight;
   _modelObserver;
-  _numericConverter;
   _isSetup = false;
+  _chartData;
 
@@ -26,13 +23,9 @@ constructor(element, modelObserver) {
     this._modelObserver = modelObserver;
-    this._numericConverter = new NumericConverter();
   }
 
   attached() {
-    this._canvasWidth = this.element.width;
-    this._canvasHeight = this.element.height;
-
     this.createChart();
     this._isSetup = true;
 
-    if(this.shouldUpdate)
+    if(this.shouldUpdate == true)
     { this.subscribeToChanges(); }
@@ -42,5 +35,7 @@ }
   detached() {
-    if(this.shouldUpdate)
+    if(this.shouldUpdate == true)
     { this._modelObserver.unsubscribe(); }
 
+    this._activeChart.destroy();
+
     this._isSetup = false;
@@ -50,3 +45,3 @@ }
   propertyChanged = (propertyName, newValue, oldValue) => {
-    if(this._isSetup && this.shouldUpdate)
+    if(this._isSetup && this.shouldUpdate == true)
     {
@@ -59,14 +54,25 @@ this.refreshChart();
 
+  get _isObserving() {
+    return this.shouldUpdate == true || this.shouldUpdate == "true";
+  }
+
+  get _clonedData() {
+    return JSON.parse(JSON.stringify(this.data));
+  }
+
   createChart() {
-    var context2d = this.element.getContext("2d");
-    var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data); // doesnt like string based numerics
-    this._activeChart = new Chart(context2d)[this.type](sanitisedData, this.nativeOptions);
+    this._chartData = {
+      type: this.type,
+      data: this._clonedData,
+      options: this.nativeOptions
+    };
+
+    this._activeChart = new Chart(this.element, this._chartData);
+    this.refreshChart();
   };
 
   refreshChart = () => {
-    this._activeChart.destroy();
-
-    // This stops the chart shrinking into oblivion
-    this.element.width = this._canvasWidth;
-    this.element.height = this._canvasHeight;
+    this._chartData.data = this._clonedData;
+    this._activeChart.update();
+    this._activeChart.resize();
   };
@@ -76,5 +82,4 @@
     this._modelObserver.throttle = this.throttle || 100;
-    this._modelObserver.observe(this.data, this.refreshChart);
+    this._modelObserver.observe(this.data.datasets, this.refreshChart);
   };
-
 }

src/elements/chart-element.js

 import {inject, customElement, useView, bindable} from 'aurelia-framework'
 import {ModelObserver} from "../observers/model-observer"
-import {NumericConverter} from "../shared/numeric-converter"
 import Chart from "chartjs"
@@ -14,3 +13,3 @@
   @bindable throttle;
-  @bindable nativeOptions;
+  @bindable nativeOptions = {};
 
@@ -20,21 +19,15 @@ @bindable canvasElement;
   _activeChart;
-  _canvasWidth;
-  _canvasHeight;
   _modelObserver;
-  _numericConverter;
   _isSetup = false;
+  _chartData;
 
   constructor(modelObserver) {
     this._modelObserver = modelObserver;
-    this._numericConverter = new NumericConverter();
   }
 
   attached() {
-    this._canvasWidth = this.canvasElement.width;
-    this._canvasHeight = this.canvasElement.height;
-
     this.createChart();
     this._isSetup = true;
 
-    if(this.shouldUpdate)
+    if(this._isObserving)
     { this.subscribeToChanges(); }
@@ -44,5 +37,6 @@ }
   detached() {
-    if(this.shouldUpdate)
+    if(this._isObserving)
     { this._modelObserver.unsubscribe(); }
 
+    this._activeChart.destroy();
     this._isSetup = false;
@@ -52,3 +46,3 @@ }
   propertyChanged = (propertyName, newValue, oldValue) => {
-    if(this._isSetup && this.shouldUpdate)
+    if(this._isSetup && this._isObserving)
     {
@@ -61,15 +55,25 @@ this.refreshChart();
 
+  get _isObserving() {
+    return this.shouldUpdate == true || this.shouldUpdate == "true";
+  }
+
+  get _clonedData() {
+    return JSON.parse(JSON.stringify(this.data));
+  }
+
   createChart() {
-    var context2d = this.canvasElement.getContext("2d");
-    var sanitisedData = this._numericConverter.convertAllDataToNumeric(this.data); // doesnt like string based numerics
-    this._activeChart = new Chart(context2d)[this.type](sanitisedData, this.nativeOptions);
+    this._chartData = {
+      type: this.type,
+      data: this._clonedData,
+      options: this.nativeOptions
+    };
+
+    this._activeChart = new Chart(this.canvasElement, this._chartData);
+    this.refreshChart();
   };
 
   refreshChart = () => {
-    this._activeChart.destroy();
-    this.createChart();
-
-    // This stops the chart shrinking into oblivion
-    this.canvasElement.width = this._canvasWidth;
-    this.canvasElement.height = this._canvasHeight;
+    this._chartData.data = this._clonedData;
+    this._activeChart.update();
+    this._activeChart.resize();
   };
@@ -79,4 +83,4 @@
     this._modelObserver.throttle = this.throttle || 100;
-    this._modelObserver.observe(this.data, this.refreshChart);
+    this._modelObserver.observe(this.data.datasets, this.refreshChart);
   };
 }

src/observers/model-observer.js

@@ -62,3 +62,2 @@ import {BindingEngine, inject} from 'aurelia-framework';
             var typeOfData = this._getObjectType(model[property]);
-
             switch(typeOfData)
@@ -65,0 +64,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

1759906

increased by11.36%

Lines of code

12106

increased by6.46%

Worsened metrics

Number of package files

55

decreased by-8.33%

Number of lines in readme file

86

decreased by-14%

No dependency changes