ChartStatsFooter

ChartStatsFooter - Displays Min/Max/Avg values and optional stats grid below a chart

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

Prop	Status	Type	Default	Description
`minMaxAvg`	Optional	`Partial<{ min: string; max: string; avg: string; }>`	—	Min/Max/Avg values row
`stats`	Optional	`ChartStatsFooterItem[]`	—	Additional stats displayed in a columnar grid
`statsPerColumn`	Optional	`number`	—	Number of stat items per column (default: 1)
`secondaryLabel`	Optional	`SecondaryLabel`	—	Secondary label displayed below stats
`className`	Optional	`string`	—	Custom class name

Usage

Displays Min/Max/Avg values and an optional grid of additional stat items below a chart.

Notes

Returns null when none of minMaxAvg, stats, or secondaryLabel are provided.
If minMaxAvg.avg is '-', all three values display as '-'.

Example

/** * Runnable example for ChartStatsFooter. */import { ChartStatsFooter } from '@tetherto/mdk-react-devkit'export const ChartStatsFooterExample = () => (  <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>    {/* Min/Max/Avg only */}    <ChartStatsFooter minMaxAvg={{ min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }} />    {/* Stats grid alongside min/max/avg */}    <ChartStatsFooter      minMaxAvg={{ min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }}      stats={[        { label: 'Uptime', value: '99.5%' },        { label: 'Rejected', value: '0.2%' },      ]}    />    {/* Multiple stats per column */}    <ChartStatsFooter      stats={[        { label: 'Pool A', value: '60 TH/s' },        { label: 'Pool B', value: '42 TH/s' },        { label: 'Pool C', value: '38 TH/s' },        { label: 'Pool D', value: '27 TH/s' },      ]}      statsPerColumn={2}    />    {/* Secondary label row */}    <ChartStatsFooter      minMaxAvg={{ min: '800 W', avg: '1 100 W', max: '1 400 W' }}      secondaryLabel={{ title: 'Time range', value: 'Last 24 hours' }}    />    {/* Average placeholder when no data */}    <ChartStatsFooter minMaxAvg={{ min: '-', avg: '-', max: '-' }} />  </div>)