monochron

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

It was initially created to power plum project (along with pogo).

Installation

npm install monochron

Usage

You can find examples in the examples folder.

TimeseriesChart

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

<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):

<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.