added c3 event handling

addon/components/c3-chart.js

@@ -21,7 +21,7 @@ export default Component.extend({
       // t/f data must by loaded after unload animation (400)
       // or chart will not properly render
 
-      later(this, function () {
+      later(() => {
         chart.load(
           // data, axis, color are only mutable elements
           get(this, 'data'),

tests/dummy/app/controllers/events.js

@@ -0,0 +1,38 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import { bind } from '@ember/runloop';
+
+export default Controller.extend({
+  message: null,
+  hover: null,
+
+  data: computed('model', function () {
+    return {
+      columns: this.get('model'),
+      type: 'bar',
+      types: {
+        data3: 'spline',
+        data4: 'line',
+      },
+      groups: [
+        ['data1', 'data2']
+      ],
+
+      // https://balinterdi.com/blog/ember-dot-run-dot-bind/
+      onclick: bind(this, this.get('actions.myClick')),
+      onmouseover: bind(this, this.get('actions.myMouseover'))
+    }
+  }),
+
+  actions: {
+    myClick(d, i) {
+      this.set('message', `${d.name}, value: ${d.value}`);
+      if (d.name == 'data5')
+        alert(`Data 5 - you're a winner`);
+    },
+
+    myMouseover(d, i) {
+      this.set('hover', `${d.name}, value: ${d.value}`);
+    }
+  }
+});

tests/dummy/app/routes/events.js

@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model() {
+    return [
+      ['data1', 30, 20, 50, 40, 60, 50],
+      ['data2', 200, 130, 90, 240, 130, 220],
+      ['data3', 130, 100, 140, 200, 150, 50],
+      ['data4', 300, 200, 160, 400, 250, 250],
+      ['data5', 200, 130, 90, 240, 130, 220],
+      ['data6', 130, 120, 150, 140, 160, 150],
+      ['data7', 90, 70, 20, 50, 60, 120],
+    ]
+  }
+});

tests/dummy/app/templates/events.hbs

@@ -0,0 +1,30 @@
+<div class="">
+
+  <h2>Generated Chart</h2>
+  <p>See the <strong>data</strong> in the JSON editor below.</p>
+
+  <p>Mouseover: {{hover}}</p>
+  <p>Mouse Click: {{message}}</p>
+  {{c3-chart data=data}}
+
+  <h3>Usage In Ember</h3>
+  <p>See <a href="https://github.com/Glavin001/ember-c3/tree/master/tests/dummy/app" target="_blank">example app source code on GitHub</a>.</p>
+  <div class="well">
+        \{{c3-chart data=data}}
+  </div>
+  <p>You can edit the data for this chart in the editor below.</p>
+
+  <hr/>
+
+  <h2>Chart Data Editor</h2>
+  <p>
+    Edit the <strong>data</strong> below, powered by
+    <a href="https://github.com/Glavin001/ember-jsoneditor" target="_blank">Ember JSONEditor</a>,
+    to see the changes thanks to two-way data binding support.
+    The <strong>data</strong> below is from the
+    <a href="http://c3js.org/samples/chart_combination.html" target="_blank">Combination Chart</a>
+    in the <a href="http://c3js.org/examples.html" target="_blank">C3 examples</a>.
+   </p>
+  {{json-editor json=model}}
+
+</div>