https://github.com/cinderblock/react-smoothie
React wrapper for Smoothie Charts
https://github.com/cinderblock/react-smoothie
Last synced: 11 months ago
JSON representation
React wrapper for Smoothie Charts
- Host: GitHub
- URL: https://github.com/cinderblock/react-smoothie
- Owner: cinderblock
- Created: 2015-11-10T05:58:19.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T06:39:55.000Z (over 3 years ago)
- Last Synced: 2024-11-17T09:06:37.981Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 930 KB
- Stars: 43
- Watchers: 3
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-smoothie
React wrapper for [Smoothie Charts](http://smoothiecharts.org/).
## Install
With Yarn:
```bash
yarn add react-smoothie
```
With NPM:
```bash
npm install react-smoothie --save
```
### Install from GitHub
```bash
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
```javascript
const { default: SmoothieComponent, TimeSeries } = require('react-smoothie');
import SmoothieComponent, { TimeSeries } from 'react-smoothie';
```
### New prop based API
```tsx
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 (
);
},
});
```
### Old reference based API
```tsx
var TestComponent = React.createClass({
render() {
return ;
},
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`](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.
```tsx
```
### 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 `` 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.
```tsx
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()`.
```tsx
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`](https://docs.npmjs.com/misc/scripts#prepublish-and-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