react-c3js - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

lib/index.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -32,3 +30,3 @@
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(C3Chart).apply(this, arguments));
+    return _possibleConstructorReturn(this, (C3Chart.__proto__ || Object.getPrototypeOf(C3Chart)).apply(this, arguments));
   }
@@ -54,6 +52,8 @@
     value: function generateChart(mountNode, config) {
+
       var c3 = require('c3');
-      return c3.generate(_extends({
-        bindto: mountNode
-      }, config));
+
+      var newConfig = Object.assign({ bindto: mountNode }, config);
+
+      return c3.generate(newConfig);
     }
@@ -73,4 +73,7 @@ }, {
 
+      var emptyFunc = function emptyFunc() {};
+
       var newConfig = {
         data: config.data,
+        title: config.title || {},
         size: config.size || {},
@@ -81,8 +84,8 @@ padding: config.padding || {},
         transition: config.transition || {},
-        oninit: config.oninit || function () {},
-        onrendered: config.onrendered || function () {},
-        onmouseover: config.onmouseover || function () {},
-        onmouseout: config.onmouseout || function () {},
-        onresize: config.onresize || function () {},
-        onresized: config.onresized || function () {},
+        oninit: config.oninit || emptyFunc,
+        onrendered: config.onrendered || emptyFunc,
+        onmouseover: config.onmouseover || emptyFunc,
+        onmouseout: config.onmouseout || emptyFunc,
+        onresize: config.onresize || emptyFunc,
+        onresized: config.onresized || emptyFunc,
         axis: config.axis || {},
@@ -123,1 +126,36 @@ grid: config.grid || {},
 exports.default = C3Chart;
+
+
+C3Chart.displayName = 'C3Chart';
+
+C3Chart.propTypes = {
+  data: _react2.default.PropTypes.object.isRequired,
+  title: _react2.default.PropTypes.object,
+  size: _react2.default.PropTypes.object,
+  padding: _react2.default.PropTypes.object,
+  color: _react2.default.PropTypes.object,
+  interaction: _react2.default.PropTypes.object,
+  transition: _react2.default.PropTypes.object,
+  oninit: _react2.default.PropTypes.func,
+  onrendered: _react2.default.PropTypes.func,
+  onmouseover: _react2.default.PropTypes.func,
+  onmouseout: _react2.default.PropTypes.func,
+  onresize: _react2.default.PropTypes.func,
+  onresized: _react2.default.PropTypes.func,
+  axis: _react2.default.PropTypes.object,
+  grid: _react2.default.PropTypes.object,
+  regions: _react2.default.PropTypes.array,
+  legend: _react2.default.PropTypes.object,
+  tooltip: _react2.default.PropTypes.object,
+  subchart: _react2.default.PropTypes.object,
+  zoom: _react2.default.PropTypes.object,
+  point: _react2.default.PropTypes.object,
+  line: _react2.default.PropTypes.object,
+  area: _react2.default.PropTypes.object,
+  bar: _react2.default.PropTypes.object,
+  pie: _react2.default.PropTypes.object,
+  donut: _react2.default.PropTypes.object,
+  gauge: _react2.default.PropTypes.object,
+  className: _react2.default.PropTypes.string,
+  style: _react2.default.PropTypes.object
+};

package.json

 {
   "name": "react-c3js",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "React component for C3.js",
@@ -12,3 +12,5 @@ "main": "lib/index.js",
   "scripts": {
-    "build": "mkdir -p lib && babel src/index.js -o lib/index.js"
+    "clean": "rm -rf lib",
+    "build": "npm run clean && mkdir -p lib && babel src/index.js -o lib/index.js",
+    "prepublish": "npm run build"
   },
@@ -44,4 +46,5 @@ "repository": {
     "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0"
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
   }
 }

README.md

@@ -7,4 +7,2 @@ # react-c3js
 
-Note: `c3.css` is not included.
-
 ## Installation
@@ -19,42 +17,28 @@
 ```JavaScript
-'use strict';
-
-import React from 'react';
-import ReactDOM from 'react-dom';
 import C3Chart from 'react-c3js';
+import 'c3/c3.css';
 
-class DataLineChart extends React.Component {
-  render() {
+const data = {
+  columns: [
+    ['data1', 30, 200, 100, 400, 150, 250],
+    ['data2', 50, 20, 10, 40, 15, 25]
+  ]
+};
 
-    const data = {
-      url: this.props.src,
-      names: this.props.names,
-      mimeType: 'json'
-    };
+const mountNode = document.getElementById('react-c3js');
 
-    return (
-      <C3Chart data={data} />
-    );
-  }
-}
+ReactDOM.render(<C3Chart data={data} />, mountNode);
+```
 
-const src = 'c3_test.json';
+You can also see the example using [Docker](https://www.docker.com/):
 
-const names = {
-  data1: 'Name 1',
-  data2: 'Name 2',
-  data3: 'Name 3'
-};
+```bash
+docker build -t react-c3js .
+docker run -p 8000:8000 react-c3js
+```
 
-const mountNode = document.getElementById('react-c3js');
+## Contributing
 
-ReactDOM.render((
-  <DataLineChart
-    src={src}
-    names={names}
-  />
-), mountNode);
+See the [Dockerfile](https://github.com/bcbcarl/react-c3js/blob/master/Dockerfile).
 
-```
-
 ## Properties
@@ -65,2 +49,3 @@
 * data
+* title
 * size
@@ -67,0 +52,0 @@ * padding

src/index.js

@@ -1,3 +0,1 @@
-'use strict';
-
 import React from 'react';
@@ -8,35 +6,2 @@ import { findDOMNode } from 'react-dom';
 
-  displayName: 'C3Chart';
-
-  propTypes: {
-    data: React.PropTypes.object.isRequired,
-    size: React.PropTypes.object,
-    padding: React.PropTypes.object,
-    color: React.PropTypes.object,
-    interaction: React.PropTypes.object,
-    transition: React.PropTypes.object,
-    oninit: React.PropTypes.func,
-    onrendered: React.PropTypes.func,
-    onmouseover: React.PropTypes.func,
-    onmouseout: React.PropTypes.func,
-    onresize: React.PropTypes.func,
-    onresized: React.PropTypes.func,
-    axis: React.PropTypes.object,
-    grid: React.PropTypes.object,
-    regions: React.PropTypes.array,
-    legend: React.PropTypes.object,
-    tooltip: React.PropTypes.object,
-    subchart: React.PropTypes.object,
-    zoom: React.PropTypes.object,
-    point: React.PropTypes.object,
-    line: React.PropTypes.object,
-    area: React.PropTypes.object,
-    bar: React.PropTypes.object,
-    pie: React.PropTypes.object,
-    donut: React.PropTypes.object,
-    gauge: React.PropTypes.object,
-    className: React.PropTypes.string,
-    style: React.PropTypes.object
-  };
-
   componentWillReceiveProps(newProps) {
@@ -55,7 +20,8 @@ this.updateChart(newProps);
   generateChart(mountNode, config) {
+
     const c3 = require('c3');
-    return c3.generate({
-      bindto: mountNode,
-      ...config
-    });
+
+    const newConfig = Object.assign({ bindto: mountNode }, config);
+
+    return c3.generate(newConfig);
   }
@@ -73,4 +39,7 @@
 
+    const emptyFunc = () => {};
+
     const newConfig = {
       data: config.data,
+      title: config.title || {},
       size: config.size || {},
@@ -81,8 +50,8 @@ padding: config.padding || {},
       transition: config.transition || {},
-      oninit: config.oninit || (() => {}),
-      onrendered: config.onrendered || (() => {}),
-      onmouseover: config.onmouseover || (() => {}),
-      onmouseout: config.onmouseout || (() => {}),
-      onresize: config.onresize || (() => {}),
-      onresized: config.onresized || (() => {}),
+      oninit: config.oninit || emptyFunc,
+      onrendered: config.onrendered || emptyFunc,
+      onmouseover: config.onmouseover || emptyFunc,
+      onmouseout: config.onmouseout || emptyFunc,
+      onresize: config.onresize || emptyFunc,
+      onresized: config.onresized || emptyFunc,
       axis: config.axis || {},
@@ -117,1 +86,35 @@ grid: config.grid || {},
 }
+
+C3Chart.displayName = 'C3Chart';
+
+C3Chart.propTypes = {
+  data: React.PropTypes.object.isRequired,
+  title: React.PropTypes.object,
+  size: React.PropTypes.object,
+  padding: React.PropTypes.object,
+  color: React.PropTypes.object,
+  interaction: React.PropTypes.object,
+  transition: React.PropTypes.object,
+  oninit: React.PropTypes.func,
+  onrendered: React.PropTypes.func,
+  onmouseover: React.PropTypes.func,
+  onmouseout: React.PropTypes.func,
+  onresize: React.PropTypes.func,
+  onresized: React.PropTypes.func,
+  axis: React.PropTypes.object,
+  grid: React.PropTypes.object,
+  regions: React.PropTypes.array,
+  legend: React.PropTypes.object,
+  tooltip: React.PropTypes.object,
+  subchart: React.PropTypes.object,
+  zoom: React.PropTypes.object,
+  point: React.PropTypes.object,
+  line: React.PropTypes.object,
+  area: React.PropTypes.object,
+  bar: React.PropTypes.object,
+  pie: React.PropTypes.object,
+  donut: React.PropTypes.object,
+  gauge: React.PropTypes.object,
+  className: React.PropTypes.string,
+  style: React.PropTypes.object
+};

No alert changes

Improved metrics

Total package byte prevSize

12432

11.36%

Lines of code

230

16.16%

Worsened metrics

Dev dependency count

5

25%

Number of lines in readme file

81

-15.62%

No dependency changes