LineChartCard

Composable line-chart card with title, timeline range selector, legend (basic or detailed), error boundary, and an optional min/max/avg footer. Accepts eithe…

Composable line-chart card with title, timeline range selector, legend (basic or detailed), error boundary, and an optional min/max/avg footer.

Accepts either pre-shaped data or rawData + a dataAdapter callback so upstream domain components can keep their data wrangling local.

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

Prop	Status	Type	Default	Description
`data`	Optional	`LineChartCardData`	—	Pre-adapted chart data (use this OR rawData+dataAdapter)
`rawData`	Optional	`unknown`	—	Raw data to be transformed by dataAdapter
`dataAdapter`	Optional	`(data: unknown) => LineChartCardData`	—	Adapter to transform rawData into LineChartCardData
`timelineOptions`	Optional	`TimelineOption[]`	—	Timeline range selector options
`timeline`	Optional	`string`	—	Controlled timeline value
`defaultTimeline`	Optional	`string`	—	Default timeline when uncontrolled
`onTimelineChange`	Optional	`(timeline: string) => void`	—	Callback when timeline changes
`title`	Optional	`string`	—	Chart title
`detailLegends`	Optional	`boolean`	—	Show detail legends with current values
`isLoading`	Optional	`boolean`	—	Loading state
`shouldResetZoom`	Optional	`boolean`	—	Whether to reset zoom on timeline change (default: true)
`chartProps`	Optional	`Partial<LightWeightLineChartProps>`	—	Pass-through props to the core LineChart
`chartRef`	Optional	`React.MutableRefObject<IChartApi \| null>`	—	Ref to the lightweight-charts IChartApi
`minHeight`	Optional	`string \| number`	—	—
`className`	Optional	`string`	—	Custom class name
`headerAction`	Optional	`React.ReactNode`	—	Optional action rendered on the right of the card header (e.g. an expand toggle). Passed straight through to `ChartContainer`. Additive - omit it and the card header is unchanged.
`titleExtra`	Optional	`React.ReactNode`	—	Optional node rendered next to the title (e.g. an info tooltip). Passed straight through to `ChartContainer`. Additive.

Usage

Composable line-chart card with title, timeline range selector, legend (basic or detailed), error boundary, and an optional min/max/avg footer.

Accepts either pre-shaped data or rawData + a dataAdapter callback so upstream domain components can keep their data wrangling local.

Data contracts

LineChartCardData exposes datasets, minMaxAvg, highlightedValue, footerStats, yTicksFormatter, and priceFormatter. See types.ts in the same directory for the full shape.

Notes

Wrapped in withErrorBoundary — chart-level crashes won't blow up the page.
For mining-domain charts, pair <LineChartCard> with adapter chart hooks (useHashrateChartData, useSiteConsumptionChartData) — the hooks return the ChartCardData payload pre-shaped.

Example

/** * Runnable example for LineChartCard. */import { LineChartCard, type LineChartCardData } from '@tetherto/mdk-react-devkit'const NOW = Date.now()const MS_PER_MIN = 60 * 1000const points = Array.from({ length: 90 }, (_, i) => ({  x: Math.floor((NOW - (90 - i) * MS_PER_MIN) / 1000),  y: 50 + Math.sin(i / 8) * 6 + Math.random() * 1.2,}))const chartData: LineChartCardData = {  datasets: [    {      label: 'Pool A',      borderColor: '#4f9ef5',      data: points,    },  ],  minMaxAvg: { min: '44', max: '58', avg: '51' },  highlightedValue: { value: 52.3, unit: 'TH/s' },}const timelineOptions = [  { label: '5m', value: '5m' },  { label: '1h', value: '1h' },  { label: '1d', value: '1D' },]export const LineChartCardExample = () => {  return (    <LineChartCard      title="Hashrate"      data={chartData}      timelineOptions={timelineOptions}      defaultTimeline="5m"      minHeight={320}    />  )}