# monochron

> Monochron is a React library for visualizing arbitrary timeseries data in real time

Latest version **1.0.0** (published 2021-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install monochron
pnpm add monochron
yarn add monochron
bun add monochron
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-04-26 |
| First published | 2021-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 50.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Sang-gon Lee |
| Maintainers | sanggonlee |
| Keywords | realtime, timeseries, data, visualization, chart, react |

## Links

- npm: https://www.npmjs.com/package/monochron
- Repository: https://github.com/sanggonlee/monochron
- Homepage: https://github.com/sanggonlee/monochron#readme
- Issues: https://github.com/sanggonlee/monochron/issues
- npm.io page: https://npm.io/package/monochron

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@types/jest](https://npm.io/package/@types/jest.md) ^26.0.20
- [@types/node](https://npm.io/package/@types/node.md) ^12.20.5
- [@craco/craco](https://npm.io/package/@craco/craco.md) ^6.1.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-04-26

## README

# monochron

[![NPM version](https://badge.fury.io/js/esta.svg)](http://badge.fury.io/js/esta)

monochron is a lightweight React component library for visualizing arbitrary timeseries data in realtime.

It was initially created to power [plum](https://github.com/sanggonlee/plum) project (along with [pogo](https://github.com/sanggonlee/pogo)).

![Screenshot-1](/screenshots/2.gif?raw=true)

## Installation

```sh
npm install monochron
```

## Usage

You can find examples in the [examples](https://github.com/sanggonlee/monochron/examples) folder.

### TimeseriesChart

Realtime timeseries visualization (when you are receiving a bucketed timeseries data at a time) using `TimeseriesChart` component:

```js
<TimeseriesChart
    newBucket={newBucket}
    options={{
        frameCycle: 20000,
    }}
    renderRow={(bucket, Row) => (
        <Row
            key={bucket.key}
            start={bucket.start}
            end={bucket.end}
            containerClassName="whitespace-nowrap overflow-hidden"
        >
            <img
                src={bucket.data.url}
                style={{
                    height: 120,
                    objectFit: "cover",
                }}
            />
        </Row>
    )}
/>
```
The chart gets an update every time you pass new data to the `newBucket` prop.

### RealtimeChart

When you have more generic, per data entry (as opposed to per timeseries bucket), use `RealtimeChart` component (`TimeseriesChart` uses `RealtimeChart` under the hood):

```js
<RealtimeChart
    width={1000}
    currentTime={time}
    rows={buckets}
    renderRow={(bucket, Row) => {
        return (
            <Row key={bucket.key} start={bucket.start} end={bucket.end}>
                {bucket.data}
            </Row>
        );
    }}
/>
```
The chart gets an update every time you pass new data to the `rows` prop.

---
_Source: https://npm.io/package/monochron · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._