mip-billboardjs
v1.1.2
Published
MIP React component for the billboard.js charting library
Downloads
8
Maintainers
Readme
mip-billboardjs
MIP React component for the billboard.js charting library
This is based on react-c3js, with modifications for billboard.js
and enhancements for rendering
Table of contents
Installation
$ npm install react-billboardjs --save
Usage
import React, {Component} from 'react';
// component and styles
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]
],
type: 'line'
};
class LineChart extends Component {
render() {
return (
<BillboardChart data={CHART_DATA}/>
);
}
}
Make sure to include the provided CSS file to ensure that all appropriate styles for billboard are included as well (this is the same CSS file provided by billboard.js
, so if you are already including that then no need to include this as well). The example above is if you are using webpack
or a similar bundler, but the styles are global so bring them in however is best for your application.
Props
All top-level properties available on the billboard.js
options are passable as props, so for more detail about each of those props please check their documentation site. There are also a few additional props specific to the component:
- className
{string}
- isPure
{boolean}
- style
{Object}
- unloadBeforeLoad
{boolean}
className
An additional className
that is passed to the element that the chart is rendered into.
<BillboardChart
className="fancy"
...
/>
isPure
Are the prop values passed based on a shallow-equal comparison of props and context. This can prevent unnecessary re-renders when set to true
, but expects any prop changes to be new objects (meaning arrays / objects that are mutated will not trigger a render).
<BillboardChart
isPure
...
/>
style
An additional style
object that is passed to the element that the chart is rendered into.
const STYLE = {
display: 'inline-block'
};
<BillboardChart
style={STYLE}
...
/>
One caveat to keep in mind is that there are two styles that will always be applied from billboard.js
even if the properties are included in the style
object:
max-height
(dynamically calculated based on the height of the container)position
(set torelative
)
If you want either of these to apply to the chart, the easiest way to accomplish this is to have a standard <div>
that wraps the chart that you can apply these styles to.
unloadBeforeLoad
Should the current data be unloaded before the new data will be loaded.
<BillboardChart
unloadBeforeLoad
...
/>
Managing the internal chart
If you capture the ref
of the chart, you will gain access to the instance, which allows you to use both the component methods and the billboard.js
native chart.
class Chart extends PureComponent {
getRef = (ChartInstance) => {
this.chartInstance = ChartInstance;
};
render() {
return (
<BillboardChart
data={...}
ref={this.getRef}
/>
);
}
}
loadData
Loads new data into the chart (equivalent to the native Chart.load method).
this.chartInstance.loadData({
columns: [
['data1', 100, 50]
]
});
redraw
Forces a redraw of the chart.
this.chartInstance.redraw();
unloadData
Loads new data into the chart (equivalent to the native Chart.unload method).
this.chartInstance.unloadData({
ids: ['data1']
});
Chart instance
If you want to access the native billboard.js
chart instance, it is available on the chart
property of the ref
.
this.chartInstance.chart.defocus('data1');
Development
Standard stuff, clone the repo and npm install
dependencies. The npm scripts available:
build
=> run webpack to build developmentdist
file with NODE_ENV=developmentbuild:minifed
=> run webpack to build productiondist
file with NODE_ENV=productioncopy:css
=> copy thebillboard.css
file frombillboard.js
package tosrc
dev
=> run webpack dev server to run example app (playground!)lint
=> run ESLint against all files in thesrc
folderlint:fix
=> runlint
with--fix
appliedprepublish
=> runscompile-for-publish
prepublish:compile
=> runlint
,test
,transpile:es
,transpile:lib
,build
, andbuild:minified
scriptstest
=> run AVA test functions withNODE_ENV=test
test:coverage
=> runtest
but withnyc
for coverage checkertest:watch
=> runtest
, but with persistent watchertranspile:lib
=> run babel against all files insrc
to create files inlib
transpile:es
=> run babel against all files insrc
to create files ines
, preserving ES2015 modules (forpkg.module
)