MinMaxAvg

Min / Max / Avg summary row with consistent MDK label and value styling.

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

Prop	Status	Type	Default	Description
`min`	Required	`string \| undefined`	—	—
`max`	Required	`string \| undefined`	—	—
`avg`	Required	`string \| undefined`	—	—
`className`	Optional	`string \| undefined`	—	—

Usage

Displays Min, Max, and Avg labels with MDK chart footer styling (orange labels, grey values).

Usage

import { MinMaxAvg } from "@tetherto/mdk-react-devkit/primitives"

<MinMaxAvg min="10 TH/s" max="100 TH/s" avg="55 TH/s" />

Use with ChartContainer via the minMaxAvg prop (pre-formatted strings) or the footer slot.

With numeric data, pair computeStats and formatMinMaxAvg from chart utils:

import { computeStats, formatMinMaxAvg } from "@tetherto/mdk-react-devkit/primitives"

const stats = computeStats(values)
const minMaxAvg = formatMinMaxAvg(stats, (v, key) =>
  key === "avg" ? `${v.toFixed(1)} TH/s` : `${v} TH/s`,
)

Example

/** * Runnable example for MinMaxAvg. */import { MinMaxAvg } from './index'export const MinMaxAvgExample = () => (  <MinMaxAvg min="65 TH/s" max="80 TH/s" avg="72.6 TH/s" />)