react-smoothie
React wrapper for Smoothie Charts.
Install
With Yarn:
yarn add react-smoothie
With NPM:
npm install react-smoothie --save
Install from GitHub
npm i cinderblock/react-smoothie
Usage
There are 2 main ways to populate data.
- Original
refbasedaddTimeSeries() - New (added in
0.4.0) props based with reference to TimeSeries
Import / Require
Both import or require work
const { default: SmoothieComponent, TimeSeries } = require('react-smoothie');
import SmoothieComponent, { TimeSeries } from 'react-smoothie';
New prop based API
const ts1 = new TimeSeries({});
const ts2 = new TimeSeries({
resetBounds: true,
resetBoundsInterval: 3000,
});
setInterval(() => {
var time = new Date().getTime();
ts1.append(time, Math.random());
ts2.append(time, Math.random());
}, 500);
var TestComponent = React.createClass({
render() {
return (
<SmoothieComponent
responsive
height={300}
series={[
{
data: ts1,
strokeStyle: { g: 255 },
fillStyle: { g: 255 },
lineWidth: 4,
},
{
data: ts2,
strokeStyle: { r: 255 },
fillStyle: { r: 255 },
lineWidth: 4,
},
]}
/>
);
},
});
Old reference based API
; }, componentDidMount() { // Initialize TimeSeries yourself var ts1 = new TimeSeries({}); this.refs.chart.addTimeSeries(ts1, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4, }); // Or let addTimeSeries create a new instance of TimeSeries for us var ts2 = this.refs.chart.addTimeSeries( { resetBounds: true, resetBoundsInterval: 3000, }, { strokeStyle: { r: 255 }, fillStyle: { r: 255 }, lineWidth: 4, } ); this.dataGenerator = setInterval(() => { var time = new Date().getTime(); ts1.append(time, Math.random()); ts2.append(time, Math.random()); }, 500); }, componentWillUnmount() { clearInterval(this.dataGenerator); }, }); ">var TestComponent = React.createClass({ render() { return <SmoothieComponent ref="chart" responsive height={300} />; }, componentDidMount() { // Initialize TimeSeries yourself var ts1 = new TimeSeries({}); this.refs.chart.addTimeSeries(ts1, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4, }); // Or let addTimeSeries create a new instance of TimeSeries for us var ts2 = this.refs.chart.addTimeSeries( { resetBounds: true, resetBoundsInterval: 3000, }, { strokeStyle: { r: 255 }, fillStyle: { r: 255 }, lineWidth: 4, } ); this.dataGenerator = setInterval(() => { var time = new Date().getTime(); ts1.append(time, Math.random()); ts2.append(time, Math.random()); }, 500); }, componentWillUnmount() { clearInterval(this.dataGenerator); }, });
More Examples
See example.tsx for a relatively standalone and complete example.
Props
SmoothieComponent's props are all passed as the options object to the Smoothie Charts constructor.
<SmoothieComponent ref="chart" width={1000} height={300} interpolation="step" />
Extra props
There are some extra props that control other behaviors.
tooltip
Generate a tooltip on mouseover
falsedoes not enable tooltiptrueenables a default tooltip (generated byreact-smoothie)functionthat returns a stateless React component
default: false
responsive
Enabling responsive mode automatically sets the width to 100%.
default: false
width
Control the width of the
used.
default: 800
height
Control the height of the
used.
default: 200
streamDelay
default: 0 (ms)
Delay the displayed chart. This value is passed after the component mounts as the second argument to SmoothieChart.streamTo.
Responsive charts
Experimental support for responsive charts was added in 0.3.0. Simply set the responsive prop to true and canvas will use the full width of the parent container. Height is still a controlled prop.
TimeSeries
TimeSeries is the main class that Smoothie Charts uses internally for each series of data. There are two ways to access and use these objects, corresponding to the two API versions.
New API
TimeSeries is available as an import.
const ts1 = new TimeSeries();
ts1.append(time, Math.random());
Old API
TimeSeries is exposed via the addTimeSeries() function.
The optional first argument of addTimeSeries() gets passed as the options to the TimeSeries constructor. The last argument of addTimeSeries() gets passed as the options argument of SmoothieChart.addTimeSeries().
As of 0.4.0, an instance of TimeSeries can be passed as an argument to addTimeSeries().
var ts = this.refs.chart.addTimeSeries(
{
/* Optional TimeSeries opts */
},
{
/* Chart.addTimeSeries opts */
}
);
ts.append(new Date().getTime(), Math.random());
Test / Example
Run yarn dev or npm run dev to start the Webpack Dev Server and open the page on your browser. Don't forget to run yarn or npm install first to install dependencies.
Change Log
v0.14.0
- Improve Types for Canvas drawing (setting gradients)
- Rewrite of options processing
- New modern React (with hooks) example
- Switch to Npm
v0.13.0
- Remove Yarn restrictions
v0.12.x
- Update dep to latest
- Publish to GitHub Packages
v0.11.0
- Use
preparescript to allow installing from GitHub
v0.10.0
- Export prop type
v0.9.0
- TypeScript
v0.8.0
- Fix tooltip positioning relative
- Allow setting class via
classNameCanvas
v0.7.0
- Allow setting canvas css class
v0.6.0
- Tooltip support
v0.5.0
- Single option to set both style colors to be the same
v0.4.0
TimeSeriescan be passed as an argument toaddTimeSeries()- Use object to set style colors
v0.3.0
- Export as Module
v0.2.0
- Allow setting
streamDelayoption
v0.1.0
- Fix passing args to Smoothie Charts
1.4k Jan 6, 2023
341 Dec 14, 2022
685 Jan 1, 2023
338 Dec 26, 2022
1.8k Oct 27, 2022
443 Jan 1, 2023
6 Oct 19, 2022
530 Dec 26, 2022
2.3k Jan 6, 2023
214 Nov 18, 2022
4 Jan 19, 2021
124 Nov 12, 2022
1.2k Dec 28, 2022
208 Dec 28, 2022
2 Dec 28, 2021
1 Jan 22, 2022