Updates for billboard.js 1.3.0

.npmignore

@@ -1,12 +1,13 @@
 .idea
+.babelrc
+.eslintrc
+.gitignore
+.npmignore
 .nyc_output
 coverage
 examples
 node_modules
 src
 test
 webpack
-.babelrc
-.eslintrc
-.gitignore
-.npmignore
+*.log

CHANGELOG.md

@@ -1,5 +1,20 @@
 # react-billboardjs CHANGELOG
 
+## 1.3.0
+
+**NEW FEATURES**
+
+* Add support for area-range and area-line-range
+* Add propTypes for `pie.padding`
+* Add propTypes for `pie.innerRadius`
+* Add propTypes for `legend.usePoint`
+* Add propTypes for `axis.x.tick.tooltip`
+* Add [`getInstances`](README.md#getinstances) static method on `BillboardChart` to access the chart objects for all charts rendered
+
+**BUGFIXES**
+
+* Prevent `unloadBeforeLoad` from being passed when false, [due to upstream bug](https://github.com/naver/billboard.js/issues/321)
+
 ## 1.2.0
 
 **NEW FEATURES**

README.md

@@ -23,6 +23,8 @@ _This is based on [react-c3js](https://github.com/bcbcarl/react-c3js), with modi
   * [redraw](#redraw)
   * [unloadData](#unloaddata)
   * [Chart instance](#chart-instance)
+* [Managing all charts](#managing-all-charts)
+  * [getInstances](#getinstances)
 * [Development](#development)
 
 ## Installation
@@ -34,19 +36,19 @@ $ npm install react-billboardjs --save
 ## Usage
 
 ```javascript
-import React, {Component} from 'react';
+import React, { Component } from "react";
 
 // component and styles
-import BillboardChart from 'react-billboardjs';
-import 'react-billboardjs/lib/billboard.css';
+import BillboardChart from "react-billboardjs";
+import "react-billboardjs/lib/billboard.css";
 
 const CHART_DATA = {
   columns: [
-    ['data1', 30, 20, 50, 40, 60, 50],
-    ['data2', 200, 130, 90, 240, 130, 220],
-    ['data3', 300, 200, 160, 400, 250, 250]
+    ["data1", 30, 20, 50, 40, 60, 50],
+    ["data2", 200, 130, 90, 240, 130, 220],
+    ["data3", 300, 200, 160, 400, 250, 250]
   ],
-  type: 'line'
+  type: "line"
 };
 
 class LineChart extends Component {
@@ -148,12 +150,12 @@ class Chart extends PureComponent {
 Exports the chart using the experimental functionality introduced in `1.2.0` of `billboard.js` (equivalent to the native [export](https://naver.github.io/billboard.js/release/latest/doc/Chart.html#export) method).
 
 ```javascript
-this.chartInstance.exportChart('image/png', (dataUrl) => {
-  const link = document.createElement('a');
+this.chartInstance.exportChart("image/png", dataUrl => {
+  const link = document.createElement("a");
 
-  link.download = 'chart.png';
+  link.download = "chart.png";
   link.href = dataUrl;
-  link.textContent = 'Download chart as PNG';
+  link.textContent = "Download chart as PNG";
 
   document.body.appendChild(link);
 });
@@ -165,7 +167,7 @@ Loads new data into the chart (equivalent to the native [Chart.load](https://nav
 
 ```javascript
 this.chartInstance.loadData({
-  columns: [['data1', 100, 50]]
+  columns: [["data1", 100, 50]]
 });
 ```
 
@@ -183,7 +185,7 @@ Loads new data into the chart (equivalent to the native [Chart.unload](https://n
 
 ```javascript
 this.chartInstance.unloadData({
-  ids: ['data1']
+  ids: ["data1"]
 });
 ```
 
@@ -192,7 +194,19 @@ this.chartInstance.unloadData({
 If you want to access the native `billboard.js` chart instance, it is available on the `chart` property of the `ref`.
 
 ```javascript
-this.chartInstance.chart.defocus('data1');
+this.chartInstance.chart.defocus("data1");
+```
+
+## Managing all charts
+
+The `BillboardChart` component itself has some static methods that are used to get information about the global `bb` object.
+
+#### getInstances
+
+Get all chart objects for all charts rendered. This aligns with the `bb.instance` property.
+
+```javascript
+console.log(BillboardChart.getInstances()); // [Chart, Chart]
 ```
 
 ## Development

examples/BarChart.js

@@ -29,6 +29,8 @@ class BarChart extends PureComponent {
       this.element.loadData({
         columns: [['data3', 130, 150, 200, 300, 200, 100]]
       });
+
+      console.log(BillboardChart.getInstances());
     }, 1000);
   }
 

package.json

@@ -3,84 +3,60 @@
   "ava": {
     "babel": "inherit",
     "failFast": true,
-    "files": [
-      "test/*.js"
-    ],
-    "require": [
-      "babel-register",
-      "babel-polyfill",
-      "test/helpers/setup-browser-env.js"
-    ],
-    "source": [
-      "src/*.js"
-    ],
+    "files": ["test/*.js"],
+    "require": ["babel-register", "babel-polyfill", "test/helpers/setup-browser-env.js"],
+    "source": ["src/*.js"],
     "verbose": true
   },
-  "browserslist": [
-    "defaults",
-    "Explorer >= 9",
-    "Safari >= 6",
-    "Opera >= 15",
-    "iOS >= 8",
-    "Android >= 4"
-  ],
+  "browserslist": ["defaults", "Explorer >= 9", "Safari >= 6", "Opera >= 15", "iOS >= 8", "Android >= 4"],
   "bugs": {
     "url": "https://github.com/planttheidea/react-billboardjs/issues"
   },
   "name": "react-billboardjs",
   "dependencies": {
-    "billboard.js": "^1.2.0",
-    "prop-types": "^15.6.0"
+    "billboard.js": "^1.3.0",
+    "prop-types": "^15.6.1"
   },
   "description": "React component for the billboard.js charting library",
   "devDependencies": {
     "ava": "^0.25.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.1",
-    "babel-loader": "^7.1.2",
+    "babel-eslint": "^8.2.2",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.26.0",
     "browser-env": "^3.2.5",
-    "css-loader": "^0.28.9",
+    "css-loader": "^0.28.10",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.1",
-    "eslint": "^4.17.0",
+    "eslint": "^4.18.2",
     "eslint-config-rapid7": "^2.11.1",
     "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.9.0",
-    "html-webpack-plugin": "^2.30.1",
+    "eslint-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.0.6",
     "in-publish": "^2.0.0",
     "mock-require": "^3.0.1",
-    "nyc": "^11.4.1",
+    "nyc": "^11.6.0",
     "optimize-js-plugin": "^0.0.4",
     "raf": "^3.4.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-test-renderer": "^16.2.0",
     "rimraf": "^2.6.2",
-    "sinon": "^4.2.3",
-    "style-loader": "^0.20.2",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.1"
+    "sinon": "^4.4.6",
+    "style-loader": "^0.20.3",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^2.0.12",
+    "webpack-dev-server": "^3.1.1"
   },
   "homepage": "https://github.com/planttheidea/react-billboardjs#readme",
-  "keywords": [
-    "react",
-    "react-component",
-    "component",
-    "billboard",
-    "billboard.js",
-    "d3",
-    "chart",
-    "graph",
-    "svg"
-  ],
+  "keywords": ["react", "react-component", "component", "billboard", "billboard.js", "d3", "chart", "graph", "svg"],
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,14 +66,17 @@
   "repository": "[email protected]:planttheidea/react-billboardjs.git",
   "scripts": {
     "build": "NODE_ENV=development webpack --progress --colors --config=webpack/webpack.config.js",
-    "build:minified": "NODE_ENV=production BABEL_ENV=es webpack --progress --colors --config=webpack/webpack.config.minified.js",
+    "build:minified":
+      "NODE_ENV=production BABEL_ENV=es webpack --progress --colors --config=webpack/webpack.config.minified.js",
     "clean": "rimraf lib && rimraf es && rimraf dist",
-    "copy:css": "cp node_modules/billboard.js/dist/billboard.css src/billboard.css && cp node_modules/billboard.js/dist/billboard.css.map src/billboard.css.map",
+    "copy:css":
+      "cp node_modules/billboard.js/dist/billboard.css src/billboard.css && cp node_modules/billboard.js/dist/billboard.css.map src/billboard.css.map",
     "dev": "NODE_ENV=development webpack-dev-server --progress --colors --config=webpack/webpack.config.dev.js",
     "lint": "eslint --max-warnings 0 src",
     "lint:fix": "npm run lint -- --fix",
     "prepublish": "if in-publish; then npm run prepublish:compile; fi",
-    "prepublish:compile": "npm run lint:fix && npm run test:coverage && npm run clean && npm run copy:css && npm run transpile:lib && npm run transpile:es && npm run build && npm run build:minified",
+    "prepublish:compile":
+      "npm run lint:fix && npm run test:coverage && npm run clean && npm run copy:css && npm run transpile:lib && npm run transpile:es && npm run build && npm run build:minified",
     "start": "npm run dev",
     "test": "NODE_PATH=. NODE_ENV=test ava",
     "test:coverage": "nyc npm test",

src/BillboardChart.js

@@ -223,13 +223,22 @@ export const createUpdateChart = (instance) => {
       instance.chart = instance.generateChart(props);
     }
 
-    instance.loadData({
-      ...data,
-      unload: unloadBeforeLoad
-    });
+    instance.loadData(unloadBeforeLoad ? {...data, unload: true} : data);
   };
 };
 
+/**
+ * @function getInstances
+ *
+ * @description
+ * get all chart instances created by billboard
+ *
+ * @returns {Array<Object>} the array of chart instances
+ */
+export const getInstances = () => {
+  return bb().instance;
+};
+
 class BillboardChart extends Component {
   static displayName = 'BillboardChart';
 
@@ -298,6 +307,9 @@ class BillboardChart extends Component {
   unloadData = createUnloadData(this);
   updateChart = createUpdateChart(this);
 
+  // global methods
+  static getInstances = getInstances;
+
   render() {
     const {className, style} = this.props;
 

src/shapes.js

@@ -63,6 +63,7 @@ export const AXIS_SHAPE = PropTypes.shape({
       multiline: PropTypes.bool,
       outer: PropTypes.bool,
       rotate: PropTypes.number,
+      tooltip: PropTypes.bool,
       values: PropTypes.arrayOf(PropTypes.number),
       width: PropTypes.number
     }),
@@ -123,7 +124,20 @@ export const DATA_SHAPE = PropTypes.shape({
     })
   ]),
   colors: PropTypes.object,
-  columns: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))),
+  columns: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.number),
+        PropTypes.number,
+        PropTypes.shape({
+          height: PropTypes.number,
+          low: PropTypes.number,
+          mid: PropTypes.number
+        }),
+        PropTypes.string
+      ])
+    )
+  ),
   empty: PropTypes.shape({
     label: LABEL_SHAPE
   }),
@@ -173,6 +187,8 @@ export const DATA_SHAPE = PropTypes.shape({
   }),
   type: PropTypes.oneOf([
     'area',
+    'area-line-range',
+    'area-range',
     'area-spline',
     'area-step',
     'bar',
@@ -293,7 +309,8 @@ export const LEGEND_SHAPE = PropTypes.shape({
   }),
   padding: PropTypes.number,
   position: PropTypes.oneOf(['bottom', 'right', 'inset']),
-  show: PropTypes.bool
+  show: PropTypes.bool,
+  usePoint: PropTypes.bool
 });
 
 export const LINE_SHAPE = PropTypes.shape({
@@ -312,13 +329,15 @@ export const PADDING_SHAPE = PropTypes.shape({
 
 export const PIE_SHAPE = PropTypes.shape({
   expand: PropTypes.bool,
+  innerRadius: PropTypes.number,
   label: PropTypes.shape({
     format: PropTypes.func,
     ratio: PropTypes.number,
     show: PropTypes.bool,
     threshold: PropTypes.number
   }),
-  padAngle: PropTypes.number
+  padAngle: PropTypes.number,
+  padding: PropTypes.number
 });
 
 export const POINT_SHAPE = PropTypes.shape({