TimelineChart

Discrete-event timeline chart (e.g. miner state over time) with a category legend. Supports streaming updates via `newData`.

Discrete-event timeline chart (e.g. miner state over time) with a category legend. Supports streaming updates via newData.

import { TimelineChart } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`initialData`	Required	`TimelineChartData`	—	—
`newData`	Optional	`TimelineChartData \| undefined`	—	—
`skipUpdates`	Optional	`boolean \| undefined`	—	—
`range`	Optional	`ChartRange \| undefined`	—	—
`axisTitleText`	Optional	`AxisTitleText \| undefined`	—	—
`isLoading`	Optional	`boolean \| undefined`	—	—
`title`	Optional	`string \| undefined`	—	—
`height`	Optional	`number \| undefined`	—	—

Usage

Discrete-event timeline chart (e.g. miner state over time) with a category legend. Supports streaming updates via newData.

Data contracts

TimelineChartData lives in timeline-chart.types.ts. Each dataset has a label plus a list of { x: [startMs, endMs], y, mode } items where mode maps to a category color in the legend.

Example

/** * Runnable example for TimelineChart. */import { TimelineChart } from '@tetherto/mdk-react-devkit'const NOW = Date.now()const HOUR = 60 * 60 * 1000const mockTimelineData = {  labels: ['miner-01', 'miner-02', 'miner-03'],  datasets: [    {      label: 'miner-01',      data: [        { x: [NOW - 6 * HOUR, NOW - 4 * HOUR], y: 'miner-01', mode: 'normal' },        { x: [NOW - 4 * HOUR, NOW - HOUR], y: 'miner-01', mode: 'boost' },      ],    },    {      label: 'miner-02',      data: [{ x: [NOW - 6 * HOUR, NOW], y: 'miner-02', mode: 'normal' }],    },  ],}export const TimelineChartExample = () => {  return (    <TimelineChart      initialData={mockTimelineData as never}      range={{ min: NOW - 6 * HOUR, max: NOW }}      title="Miner activity"      height={240}    />  )}