prettified

addon/components/c3-chart.js

@@ -1,20 +1,20 @@
-import Component from '@ember/component';
-import { getProperties } from '@ember/object';
-import { debounce, later } from '@ember/runloop';
-import c3 from 'c3';
+import Component from "@ember/component";
+import { getProperties } from "@ember/object";
+import { debounce, later } from "@ember/runloop";
+import c3 from "c3";
 
 export default Component.extend({
-  tagName: 'div',
-  classNames: ['c3-chart-component'],
-  transition: 350,
+  tagName: "div",
+  classNames: ["c3-chart-component"],
+  _transition: this.get("transition") || 350,
 
   // triggered when data is updated by didUpdateAttrs
   _reload() {
-    const chart = this.get('c3chart');
+    const chart = this.get("c3chart");
 
     // if data should not be appended
     // e.g. when using a pie or donut chart
-    if (this.get('unloadDataBeforeChange')) {
+    if (this.get("unloadDataBeforeChange")) {
       chart.unload();
 
       // default animation is 350ms
@@ -24,28 +24,24 @@ export default Component.extend({
       later(() => {
         chart.load(
           // data, axis, color are only mutable elements
-          this.get('data'),
-          this.get('axis'),
-          this.get('color')
+          this.get("data"),
+          this.get("axis"),
+          this.get("color")
         );
-      }, this.get('transition'));
-
+      }, this.get("_transition"));
     } else {
-      chart.load(
-        this.get('data'),
-        this.get('axis'),
-        this.get('color')
-      );
+      chart.load(this.get("data"), this.get("axis"), this.get("color"));
     }
   },
 
   // triggered when component added by didInsertElement
   _setupc3() {
-
-    // assign here to make it easier to add more in the future
-    let properties = ['data', 'axis', 'regions', 'bar', 'pie', 'donut', 'gauge',
-      'grid', 'legend', 'tooltip', 'subchart', 'zoom', 'point',
-      'line', 'area', 'size', 'padding', 'color', 'transition']
+    let properties = [
+      "data", "line", "bar", "pie", "donut", "gauge",
+      "grid", "legend", "tooltip", "subchart", "zoom",
+      "point", "axis", "regions", "area", "size",
+      "padding", "color", "transition"
+    ];
 
     // get base c3 properties
     const chartConfig = getProperties(this, properties);
@@ -57,27 +53,26 @@ export default Component.extend({
     callbacks.call(this);
 
     function callbacks() {
-
       const that = this;
 
       const c3events = [
-        'oninit',
-        'onrendered',
-        'onmouseover',
-        'onmouseout',
-        'onresize',
-        'onresized'
+        "oninit",
+        "onrendered",
+        "onmouseover",
+        "onmouseout",
+        "onresize",
+        "onresized"
       ];
 
-      c3events.forEach((event) => {
-        chartConfig[event] = function () {
+      c3events.forEach(event => {
+        chartConfig[event] = function() {
           that.sendAction(event, that);
         };
       });
     }
 
     // render the initial chart
-    this.set('c3chart', c3.generate(chartConfig));
+    this.set("c3chart", c3.generate(chartConfig));
   },
 
   /***
@@ -99,6 +94,6 @@ export default Component.extend({
   // execute teardown method
   willDestroyElement() {
     this._super(...arguments);
-    this.get('c3chart').destroy();
+    this.get("c3chart").destroy();
   }
 });