Merge branch 'pretty-demo'

.travis.yml

@@ -3,7 +3,7 @@ language: node_js
 node_js:
   # we recommend testing addons with the same minimum supported node version as Ember CLI
   # so that your addon works for all apps
-  - "4"
+  - "6"
 
 sudo: false
 dist: trusty

README.md

@@ -5,7 +5,7 @@
 
 > Ember component library for [C3, a D3-based reusable chart library](https://github.com/masayuki0812/c3).
 
-**Live Demo:** http://glavin001.github.io/ember-c3/
+**Forked Demo:** https://maxwondercorn.github.io/ember-c3/
 
 Alternatively take a look at [Ember-NVD3](https://github.com/Glavin001/ember-nvd3) for your charting needs.
 
@@ -19,7 +19,10 @@ ember install ember-c3
 
 ## Usage
 
-For a complete example, see the [dummy test app in `tests/dummy/app/`](https://github.com/Glavin001/ember-c3/tree/master/tests/dummy/app).
+For a complete example, see the [dummy test app in `tests/dummy/app/`]
+(https://github.com/maxwondercorn/ember-c3/tree/master/tests/dummy/app)
+
+<!-- (https://github.com/Glavin001/ember-c3/tree/master/tests/dummy/app). -->
 
 | Combination |
 | --- |
@@ -50,28 +53,168 @@ See http://c3js.org/examples.html for examples of how to use C3.
 
 ```handlebars
 {{c3-chart
+  c3chart=chart
   data=model
   axis=axis
   regions=regions
   bar=bar
   pie=pie
   donut=donut
   gauge=gauge
+  line=line
+  area=area
   grid=grid
   legend=legend
   tooltip=tooltip
   subchart=subchart
   zoom=zoom
   point=point
-  line=line
-  area=area
   size=size
   padding=padding
+  title=title
   color=color
   transition=transition
 }}
 ```
 
+The properties match their corresponding C3 objects found in the [C3 Documentation](https://c3js.org/gettingstarted.html#generate).  As shown in the C3 documentation, most of the objects (i.e. bar, axis, size, etc) can be included in the data object.  The component properties breakout the objects to make it easier to manipulate the chart.  Note: The chart type is always assigned in the chart data object
+
+Property | Description | Example
+---------|-------------|--------
+c3chart | Points to the c3 chart created by the component.  Any C3 api method can be executed using this property | chart.hide("data1")
+  data | C3 data [object](https://c3js.org/gettingstarted.html#generate)
+  axis | C3 axis [object](https://c3js.org/reference.html#axis-rotated). See C3 examples for combining with data object
+  regions | need to test may need to be with data
+  bar | Used to assign or modify bar chart [properties](https://c3js.org/reference.html#bar-width) |
+  pie | Used to assign or modify pie chart [properties](https://c3js.org/reference.html#pie-label-show) |
+  donut | Used to assign or modify donut chart [properties](https://c3js.org/reference.html#donut-label-show) |
+  gauge | Used to assign or modify gauge chart [properties](https://c3js.org/reference.html#gauge-label-show) |
+  line | Used to assign or modify line chart [properties](https://c3js.org/reference.html#line-connectNull) |
+  area | Used to assign or modify area chart [properties](https://c3js.org/reference.html#area-zerobased) |
+  point | Used to assign or modify data point [properties](https://c3js.org/reference.html#point-show) |
+  grid |
+  legend |
+  tooltip |
+  subchart |
+  zoom |
+  size | Chart size [settings](https://c3js.org/reference.html#size-width)
+  padding |
+  title | Set chart title | title: { text: "This is my chart" }
+  color | Used to assign color [properties](https://c3js.org/reference.html#color-pattern) 
+  transition | Equivalent to [transition.duration](https://c3js.org/reference.html#transition-duration).  Default duration is 350ms
+
+
+### C3 Methods
+If you assign a value to the c3chart property, you can use most of the C3 [methods](https://c3js.org/reference.html#api-focus) found in the documentation.  Not all the methods have been tested but all should work as documented.
+
+templates/someroute.hbs
+```
+{{c3-chart data=mydata c3chart=chart}}
+
+<button onclick={{action "loadUS"}}>US Cars</button>
+<button onclikc={{action "loadGerman"}}>German Cars</button>
+<button onclikc={{action "resetData"}}>Reset</button>
+```
+
+controllers/someroute.js
+```js
+import { later } from '@ember/runloop';
+import Controller from '@ember/controller';
+/* eslint ember/avoid-leaking-state-in-ember-objects: "off" */
+
+export default Controller.extend({
+
+ chart: null,
+
+ baseData:   
+    { 
+      columns: [
+        ['US', 64],
+        ['German', 36]
+      ],
+      type: 'donut'
+    },
+
+ modelsGerman: [
+        ['Mercedes', 12],
+        ['Volkswagon', 54],
+        ['BMW', 34]
+      ],
+
+  modelsUS: [
+    ['Ford', 35],
+    ['Chevy', 26],
+    ['Tesla', 2],
+    ['Buick', 10],
+    ['Dodge', 27]
+  ],
+
+  actions: {
+     resetData() {
+      let c = this.get("chart");
+      c.unload();
+      later(this, () => c.load({ columns: this.get("baseData") }), 300);
+    },
+
+    loadUS() {
+      let c = this.get('chart');
+      c.load({ columns: this.get('modelsUS')});
+      c.unload("US", "German");
+    },
+
+    loadGerman() {
+      let c = this.get('chart');
+      c.load({ columns: this.get('modelsGerman')});
+      c.unload("US", "German");
+    }
+  }
+
+});
+```
+
+### Events
+The addon exposes the following C3 [events](https://c3js.org/reference.html#oninit). The events call backs can be assigned to actions as shown in the example below.
+
+* oninit
+* onrendered
+* onmouseover
+* onmouseout
+* onresize
+* onresized
+
+
+```
+import Controller from "@ember/controller";
+import { computed } from "@ember/object";
+import { bind } from "@ember/runloop";
+
+export default Controller.extend({
+ data: computed(function() {
+    // iris data from R
+    return {
+      columns: [
+        ["data1", 30],
+        ["data2", 120],
+        ["data3", 10],
+        ["data4", 45],
+        ["data5", 90]
+      ],
+      type: "pie",
+      onmouseover: bind(this, this.get("actions.myMouseover"))
+    };
+  }),
+
+ actions: {
+     myMouseover(d, /* i */) {
+      this.set("message", `${d.name}, value: ${d.value}`);
+    },
+  }
+});
+```
+
+### Click Events
+Example code here...
+
 ### Helpful Links
 
 - [Extending ember-c3 charts using base-component approach](https://medium.com/nimbo-x-development/extending-ember-c3-charts-using-base-component-approach-78df1d635050#.k8j8gnnqa)
@@ -86,7 +229,6 @@ See http://c3js.org/examples.html for examples of how to use C3.
 
 ## Running Tests
 
-* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
 * `ember test`
 * `ember test --server`
 

addon/components/c3-chart.js

@@ -1,7 +1,6 @@
 import Component from "@ember/component";
 import { getProperties } from "@ember/object";
 import { debounce, later } from "@ember/runloop";
-import { isPresent }  from '@ember/utils';
 import c3 from "c3";
 
 export default Component.extend({
@@ -47,7 +46,7 @@ export default Component.extend({
       "data", "line", "bar", "pie", "donut", "gauge",
       "grid", "legend", "tooltip", "subchart", "zoom",
       "point", "axis", "regions", "area", "size",
-      "padding", "color", "transition"
+      "padding", "color", "transition", "title"
     ];
 
     // get base c3 properties

blueprints/ember-c3/index.js

@@ -4,7 +4,7 @@ module.exports = {
   afterInstall: function() {
     var self = this;
 
-    return this.addBowerPackageToProject('d3', '3.5.17')
+    return this.addBowerPackageToProject('d3', '5.7.0')
       .then(function() {
         return self.addBowerPackageToProject('c3')
           .then(function() {

bower.json

@@ -1,10 +1,9 @@
 {
   "name": "ember-c3",
   "dependencies": {
-    "c3": "~0.4.10",
-    "d3": "^3.5.17"
+    "c3": "~0.6.8",
+    "d3": "^5.0.0"
   },
   "devDependencies": {
-    "jsoneditor": "~5.5.7"
   }
 }

config/ember-try.js

@@ -1,5 +1,28 @@
+/* eslint-env node */
 module.exports = {
   scenarios: [
+    {
+      name: 'ember-lts-2.4',
+      bower: {
+        dependencies: {
+          'ember': 'components/ember#lts-2-4'
+        },
+        resolutions: {
+          'ember': 'lts-2-4'
+        }
+      }
+    },
+    {
+      name: 'ember-lts-2.8',
+      bower: {
+        dependencies: {
+          'ember': 'components/ember#lts-2-8'
+        },
+        resolutions: {
+          'ember': 'lts-2-8'
+        }
+      }
+    },
     {
       name: 'ember-lts-2.12',
       npm: {
@@ -16,6 +39,14 @@ module.exports = {
         }
       }
     },
+    {
+      name: 'ember-lts-2.18',
+      npm: {
+        devDependencies: {
+          'ember-source': '~2.18.0'
+        }
+      }
+    },
     {
       name: 'ember-release',
       bower: {

ember-cli-build.js

@@ -4,6 +4,7 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults, {
+    snippetPaths: ['tests/dummy/app/controllers'],
     // Add options here
   });
 
@@ -15,4 +16,4 @@ module.exports = function(defaults) {
   */
 
   return app.toTree();
-};
+};