Add ability to access D3 in applications

CHANGELOG.md

@@ -1,6 +1,16 @@
 # Change Log
 
-## v3.1 (December 18, 2018)
+## v1.3.0 (December 18, 2018)
+
+* Added import statement for D3 so it can be used in applications
+* Added D3 usage example to dummy application
+* Added D3 update to README
+* Updated ember and broccoli deps
+* Bumped c3 to 0.6.13
+* Bumped d3 to 5.9.1
+
+
+## v1.2.4 (December 18, 2018)
 
 * Refactored dummy app templates for easier reading on demo site
 * Bugfix - broken element in gauge demo

README.md

@@ -52,7 +52,7 @@ Where `model` is your C3 data:
 
 See http://c3js.org/examples.html for examples of how to use C3.
 
-```hbs
+```handlebars
 {{c3-chart
   c3chart=chart
   data=model
@@ -92,7 +92,7 @@ The properties match the corresponding C3 objects found in the [C3 Documentation
 
 The component properties break out the settings to simplify chart configuration.  Note: The chart type is **always** assigned in the chart data object.
 
-The properties with an asterisk are the only ones that are updated on the chart when a property change is triggered when `notifyPropertyChange` is called.  See examples in the dummy app.
+The properties with an asterisk are the only ones updated on the chart when a property change is triggered when `notifyPropertyChange` is called.  See examples in the dummy app.
 
 Property | Description | Example
 ---------|-------------|--------
@@ -132,15 +132,15 @@ The `dtitle` property is used to dynamically change a chart's title.  C3 doesn't
 
 The title can be set using the `.c3-title` class but that doesn't provide abstraction from c3 internals.
 
-`dtitle` gives some control over side effects using a parameter to control how the graph is refreshed.  An object is passed into `dtitle` and the second parameter `refresh` indicates whether all properties should be refreshed or only the chart title.  Setting `refresh` to false will only refresh the title and ignore changes to the data, colors and axis properties.  A short example is below.  See the drill down example to see `dttile` is used and potential side effects.
+`dtitle` gives you some control over side effects using a parameter to control how the graph is refreshed.  An object is passed into `dtitle` and the second parameter `refresh` indicates whether all properties should be refreshed or only the chart title.  Setting `refresh` to false will only refresh the title and ignore changes to the data, colors and axis properties.  A short example is below.  See the drill down example to see how `dttile` is used and potential side effects.
 
-The chart's initial title is still using the title parameter.  
+The chart's initial title is set using the `title` parameter.  
 
-```hbs
+```handlebars
 {{c3-chart data=data title=title dtitle=dtitle}}
 ```
 
-```js
+```javascript
 import Controller from "@ember/controller";
 /* eslint ember/avoid-leaking-state-in-ember-objects: "off" */
 
@@ -157,19 +157,19 @@ export default Controller.extend({
 ```
 
 ### C3 Methods
-If you assign a controller property to the c3chart property, you can use most of the C3 api [methods](https://c3js.org/reference.html#api-focus).  Not all the methods have been tested.
+If you assign a controller property to the c3chart property, you can use most of C3's api [methods](https://c3js.org/reference.html#api-focus).  Not all the methods have been tested.
 
-templates/someroute.hbs
-```
+templates/my-route.hbs
+```handlebars
 {{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
+controllers/my-route.js
+```javascript
 import { later } from "@ember/runloop";
 import Controller from "@ember/controller";
 /* eslint ember/avoid-leaking-state-in-ember-objects: "off" */
@@ -202,21 +202,19 @@ export default Controller.extend({
 
   actions: {
      resetData() {
-      let c = this.chart;
-      c.load({ columns: this.baseData });
-      c.unload("Mercedes", "Volkswagon", "BMW", "Ford", "Chevy", "Tesla", "Buick", "Dodge");
+      this.chart.load({ columns: this.baseData });
+      this.chart.unload("Mercedes", "Volkswagon", 
+      "BMW", "Ford", "Chevy", "Tesla", "Buick", "Dodge");
     },
 
     loadUS() {
-      let c = this.chart;
-      c.load({ columns: this.modelsUS});
-      c.unload("US", "German");
+      this.chart.load({ columns: this.modelsUS});
+      this.chart.unload("US", "German");
     },
 
     loadGerman() {
-      let c = this.chart;
-      c.load({ columns: this.modelsGerman});
-      c.unload("US", "German");
+      this.chart.load({ columns: this.modelsGerman});
+      this.chart.unload("US", "German");
     }
   }
 });
@@ -228,14 +226,14 @@ C3 emits two types of events - [chart](https://c3js.org/reference.html#oninit) a
 For connivence, the chart object is passed, with the exception of _oninit_ to chart events.  An example of a chart and data event is shown below.  Note the use of `bind` for tying actions to data events. See the dummy app for more examples
 
 templates/application.hbs
-```hbs
+```handlebars
 {{c3-chart 
   data=data
   oninit=(action 'init')
   }}
 ```
 controllers/application.js
-```js
+```javascript
 import Controller from "@ember/controller";
 import { computed } from "@ember/object";
 import { bind } from "@ember/runloop";
@@ -269,6 +267,13 @@ export default Controller.extend({
   }
 });
 ```
+### Accessing D3
+
+You can use the D3 library in your application by importing it where needed
+
+```javascript
+import d3 from "d3";
+```
 
 ### Helpful Links
 

addon/components/c3-chart.js

@@ -3,6 +3,7 @@ import { getProperties } from "@ember/object";
 import { debounce, later } from "@ember/runloop";
 import { isEmpty, isPresent } from "@ember/utils";
 import c3 from "c3";
+import d3 from "d3"; // eslint-disable-line no-unused-vars
 
 export default Component.extend({
   tagName: "div",