ember-cli-chartist - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3-beta1

package.json

 {
   "name": "ember-cli-chartist",
-  "version": "0.2.2",
+  "version": "0.2.3-beta1",
   "description": "Ember Addon for Chartist.js",
@@ -5,0 +5,0 @@ "directories": {

README.md

@@ -153,2 +153,59 @@ # Chartist.js for Ember-CLI Projects
 
+## Extending `chartist-chart`
+
+If you need to get fancier than the options allow, or if you need to create a
+component of your own that uses this as a base, you're in luck. Say you want
+to create a chart that shows Fish eaten over time. You don't want this chart
+tied to a specific controller, route, or model in your app. You can create a
+new component that extends `chartist-chart` like so:
+
+*/app/components/chart-fish-over-time.js*
+```javascript
+import ChartistChart from './chartist-chart';
+
+export default ChartistChart.extend({
+  init: function () {
+    getAsyncDataThatReturnsPromise().then(function (data) {
+      this.set('data', data);
+    });
+
+    this._super();
+  },
+
+  updateChart: function () {
+    this.get('chart').update(this.get('data'));
+  }.observes('data'),
+
+  ratio: 'ct-minor-seventh',
+  options: {
+    showPoint: false,
+    axisY: {
+      offset: 0,
+      showGrid: true,
+    },
+    axisX: {
+      showGrid: false,
+    }
+  },
+
+  responsiveOptions: [
+    ['screen and (min-width: 640px)', {
+      showPoint: true,
+      axisY: {
+        offset: 50,
+        showLabel: true
+      }
+    }]
+  ]
+});
+```
+
+With that, you can display the Fish chart in any template. For example,
+
+*/app/templates/all-about-fish.js*
+```
+{{chart-fish-over-time}}
+```
+
+
 ## Development
@@ -155,0 +212,0 @@

No alert changes

Improved metrics

Total package byte prevSize

148027

0.41%

Lines of code

2891

0.07%

Number of lines in readme file

229

33.14%

No dependency changes