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 ref based addTimeSeries()
• 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

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

• false does not enable tooltip
• true enables a default tooltip (generated by react-smoothie)
• function that 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 <canvas> used.

default: 800

height

Control the height of the <canvas> 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 prepare script 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

• TimeSeries can be passed as an argument to addTimeSeries()
• Use object to set style colors

v0.3.0

• Export as Module

v0.2.0

• Allow setting streamDelay option

v0.1.0

• Fix passing args to Smoothie Charts