Chart Components

Components for data visualization and charting.

Prerequisites

Complete the installation
Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

`ActualEbitdaCard`

Stat card summarising the realised EBITDA for the selected reporting window vs the prior period.

agent-ready

Props

Prop	Type	Required	Default	Description
`value`	`number`	✓	-	-

`AreaChart`

Presentational Chart.js area chart (Line with fill). Data must be provided via props; this component does no fetching of its own.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`ChartData<"line", (number \| Point \| null)[], unknown>`	✓	-	Chart data - required, provided by parent
`options`	`_DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<"line"> & LineControllerChartOptions> \| undefined`		-	Chart.js options - merged with defaults
`tooltip`	`ChartTooltipConfig \| undefined`		-	Custom HTML tooltip configuration. When provided, replaces the default Chart.js tooltip.
`height`	`number \| undefined`		-	Chart height in pixels
`className`	`string \| undefined`		-	-

Stacked bar chart of average downtime (curtailment vs operational issues). Wraps [**ChartContainer**](/reference/ui/components/charts/#chartcontainer) and [**BarChart**](/reference/ui/components/charts/#barchart); pass period labels and rate arrays via data.

agent-ready

Props

Prop	Type	Default	Description
`title`	`string`	-	-
`unit`	`string`	-	-
`height`	`number`	-	-
`barWidth`	`number`	-	-
`className`	`string`	-	-
`isLoading`	`boolean`	-	-
`emptyMessage`	`string`	-	-
`data`	`AverageDowntimeChartData`	-	-
`yTicksFormatter`	`(value: number) => string`	-	Formats Y-axis ticks, tooltips, and bar data labels (values are 0–1 rates).
`showDataLabels`	`boolean`	-	-

`AvgAllInCostChart`

Avg All-in Cost - revenue vs cost ($/MWh) bar chart over time.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`readonly AvgAllInCostDataPoint[] \| undefined`		-	-
`dateRange`	`FinancialDateRange \| null`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-

`BarChart`

Presentational Chart.js bar chart. Data must be pre-aggregated; use grouped or stacked categories via datasets.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`any`	✓	-	Chart data - required, provided by parent. Use `as any` for mixed bar+line datasets.
`options`	`_DeepPartialObject<CoreChartOptions<"bar"> & ElementChartOptions<"bar"> & PluginChartOptions<"bar"> & DatasetChartOptions<"bar"> & ScaleChartOptions<"bar"> & BarControllerChartOptions> \| undefined`		-	Chart.js options - merged with defaults
`isStacked`	`boolean \| undefined`		-	Stack bars on top of each other
`isHorizontal`	`boolean \| undefined`		-	Render bars horizontally (indexAxis: 'y')
`formatYLabel`	`((value: number) => string) \| undefined`		-	Format Y-axis tick labels
`showLegend`	`boolean \| undefined`		-	Show built-in Chart.js legend (default: true)
`legendPosition`	`Position \| undefined`		-	Position of the legend (default: 'top')
`legendAlign`	`FlexAlign \| undefined`		-	Alignment of the legend labels within their position (default: 'start')
`showDataLabels`	`boolean \| undefined`		-	Show values above each bar
`formatDataLabel`	`((value: number) => string) \| undefined`		-	Format data label values (default: round to nearest integer)
`tooltip`	`ChartTooltipConfig \| undefined`		-	Custom HTML tooltip configuration. When provided, replaces the default Chart.js tooltip.
`height`	`number \| undefined`		-	Chart height in pixels
`className`	`string \| undefined`		-	-

`BitcoinPriceCard`

Stat card showing the BTC reference price used by the reporting view with currency and timestamp.

agent-ready

Props

Prop	Type	Required	Default	Description
`value`	`number`	✓	-	-

`BitcoinProducedCard`

Stat card summarising the bitcoin produced during the reporting window with delta to prior period.

agent-ready

Props

Prop	Type	Required	Default	Description
`value`	`number`	✓	-	-

`BitcoinProducedChart`

Time-series chart of bitcoin produced per day across the selected reporting window.

agent-ready

Props

Prop	Type	Required	Default	Description
`chartData`	`BarChartDataResult`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-
`hasAllZeros`	`boolean \| undefined`		-	-
`height`	`number \| undefined`		-	-

`BitcoinProductionCostCard`

Stat card showing the average cost in USD to produce one bitcoin during the reporting window.

agent-ready

Props

Prop	Type	Required	Default	Description
`value`	`number`	✓	-	-

`ChartContainer`

Standard chrome for charts: title, optional highlighted value, legend with toggle, range selector (radio cards), loading / empty states, and a footer for min/max/avg stats.

agent-ready

Props

Prop	Type	Required	Default	Description
`title`	`string \| undefined`		-	-
`titleExtra`	`React.ReactNode`		-	Optional node rendered immediately after the title text (e.g. an info tooltip). Only shown when `title` is set and `hea…
`header`	`React.ReactNode`		-	-
`headerAction`	`React.ReactNode`		-	Optional action rendered on the right side of the header row (e.g. an expand/fullscreen toggle). Sits alongside the ran…
`legendData`	`LegendItem[] \| undefined`		-	-
`highlightedValue`	`HighlightedValueProps \| undefined`		-	-
`rangeSelector`	`RangeSelectorProps \| undefined`		-	-
`loading`	`boolean \| undefined`		-	-
`empty`	`boolean \| undefined`		-	-
`emptyMessage`	`string \| undefined`		-	-
`minMaxAvg`	`Partial<{ min: string; max: string; avg: string; }> \| undefined`		-	-
`timeRange`	`string \| undefined`		-	-
`footer`	`React.ReactNode`		-	-
`footerClassName`	`string \| undefined`		-	-
`className`	`string \| undefined`		-	-
`children`	`React.ReactNode`	✓	-	-
`onToggleDataset`	`((index: number) => void) \| undefined`		-	-

`ChartExpandAction`

Expand / collapse toggle rendered in a dashboard chart card's header. Swaps between a maximize and a minimize glyph based on isExpanded.

advanced

Props

Prop	Type	Required	Default	Description
`isExpanded`	`boolean`	✓	-	Whether the parent chart is currently expanded to full width.
`onToggle`	`VoidFunction \| undefined`		-	Toggles the expanded state.

`ChartStatsFooter`

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

agent-ready

Props

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

`CostCharts`

Convenience wrapper that renders the three cost-page charts in declaration order. Pages that need bespoke layouts (e.g. [**CostContent**](/reference/ui/components/dashboards/#costcontent)'s 2x2 Mosaic) compose the individual chart components directly in…

agent-ready

Props

Prop	Type	Required	Default	Description
`costLog`	`readonly CostTimeSeriesEntry[]`	✓	-	-
`btcPriceLog`	`readonly BtcPriceTimeSeriesEntry[]`	✓	-	-
`totals`	`CostSummaryMonetaryTotals \| null`	✓	-	-
`dateRange`	`FinancialDateRange \| null`	✓	-	-
`avgAllInCostData`	`readonly AvgAllInCostDataPoint[] \| undefined`		-	-
`isLoading`	`boolean \| undefined`		-	-

`DetailLegend`

DetailLegend - Enhanced chart legend with current values and percentage change indicators

agent-ready

Props

Prop	Type	Required	Default	Description
`items`	`DetailLegendItem[]`	✓	-	Legend items to display
`onToggle`	`((label: string, index: number) => void) \| undefined`		-	Callback when a legend item is toggled
`className`	`string \| undefined`		-	Custom class name

`DoughnutChart`

DoughnutChart – Presentational Chart.js doughnut chart with custom HTML legend matching the MDK design.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`DoughnutChartDataset[]`	✓	-	Array of labelled slices
`unit`	`string \| undefined`		-	Unit suffix shown in tooltips
`options`	`_DeepPartialObject<CoreChartOptions<"doughnut"> & ElementChartOptions<"doughnut"> & PluginChartOptions<"doughnut"> & DatasetChartOptions<"doughnut"> & ScaleChartOptions<"doughnut"> & DoughnutControllerChartOptions> \| undefined`		-	Chart.js options – merged with defaults
`cutout`	`string \| undefined`		-	Doughnut cutout percentage (default: '75%')
`borderWidth`	`number \| undefined`		-	Border width between segments (default: 4)
`height`	`number \| undefined`		-	Chart height in pixels
`legendPosition`	`Position \| undefined`		-	Where to place the legend relative to the chart (default: 'top')
`tooltip`	`ChartTooltipConfig \| undefined`		-	Custom HTML tooltip configuration. When provided, replaces the default doughnut tooltip (which shows label, value with…
`formatValue`	`((value: number) => string) \| undefined`		-	Formats slice values in the built-in legend and default tooltip (default: raw number).
`className`	`string \| undefined`		-	-

`Ebitda`

Top-level EBITDA section of the reporting view — pulls together metric cards, charts, and tables.

agent-ready

Props

Prop	Type	Required	Default	Description
`metrics`	`EbitdaDisplayMetrics \| null`	✓	-	-
`ebitdaChartInput`	`ToBarChartDataInput \| null`	✓	-	-
`btcProducedChartInput`	`ToBarChartDataInput \| null`	✓	-	-
`hasBtcProducedAllZeros`	`boolean`	✓	-	-
`showEbitdaBarChart`	`boolean`	✓	-	-
`currentBTCPrice`	`number`	✓	-	-
`datePicker`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-
`errors`	`string[] \| undefined`		-	-
`hasDateSelection`	`boolean`	✓	-	When false, show the "select a period" hint instead of empty data.
`setCostHref`	`string \| undefined`		-	Optional URL for the "Set Monthly `Cost`" control (hidden when omitted).

`EbitdaCharts`

Chart panel inside the EBITDA section visualising revenue, cost, and EBITDA over time.

agent-ready

Props

Prop	Type	Required	Default	Description
`showEbitdaBarChart`	`boolean`	✓	-	-
`ebitdaChartData`	`BarChartDataResult`	✓	-	-
`btcDisplayData`	`BarChartDataResult`	✓	-	-
`isLoading`	`boolean`	✓	-	-
`hasBtcProducedAllZeros`	`boolean`	✓	-	-

`EbitdaHodlCard`

Stat card projecting EBITDA assuming all produced bitcoin is held instead of sold.

agent-ready

Props

Prop	Type	Required	Default	Description
`value`	`number`	✓	-	-
`currentBTCPrice`	`number`	✓	-	-

`EbitdaMetrics`

Row of summary metric cards across the top of the EBITDA section (actual, hodl, selling, cost).

agent-ready

Props

Prop	Type	Required	Default	Description
`metrics`	`EbitdaDisplayMetrics`	✓	-	-
`currentBTCPrice`	`number`	✓	-	-

`EbitdaSellingCard`

Stat card projecting EBITDA assuming all produced bitcoin is sold at the daily reference price.

agent-ready

Props

Prop	Type	Required	Default	Description
`value`	`number`	✓	-	-

`EnergyBalance`

Full energy balance view with tabbed revenue and cost sections, charts, and metric cards.

agent-ready

Props

Prop	Type	Required	Default	Description
`viewModel`	`EnergyBalanceViewModel`	✓	-	-
`onTabChange`	`(tab: EnergyBalanceTab) => void`	✓	-	-
`onRevenueDisplayModeChange`	`(mode: DisplayMode) => void`	✓	-	-
`onCostDisplayModeChange`	`(mode: DisplayMode) => void`	✓	-	-
`isDemoMode`	`boolean \| undefined`		-	-
`timeframeControls`	`React.ReactNode`		-	Slot for timeframe / date-range controls rendered by the host app.
`setCostHref`	`string \| undefined`		-	Optional URL for the "Set Monthly `Cost`" control (hidden when omitted).

`EnergyBalanceCostCharts`

Layout container for the energy cost tab charts: revenue-vs-cost bar chart and power line chart.

agent-ready

Props

Prop	Type	Required	Default	Description
`costChartData`	`BarChartDataResult`	✓	-	-
`btcUnit`	`string \| null`	✓	-	-
`powerChartInput`	`ThresholdLineChartInput`	✓	-	-
`displayMode`	`DisplayMode`	✓	-	-
`barLabelFormatter`	`(v: number) => string`	✓	-	-
`onDisplayModeChange`	`(mode: DisplayMode) => void`	✓	-	-
`showCostBarChart`	`boolean`	✓	-	Show the revenue-vs-cost bar chart only for non-daily periods.
`periodType`	`PeriodType`	✓	-	-

`EnergyBalanceCostMetrics`

Grid of stat cards summarising energy cost metrics for the selected period.

agent-ready

Props

Prop	Type	Required	Default	Description
`metrics`	`EnergyCostMetrics`	✓	-	-

`EnergyBalancePowerChart`

Line chart visualising power consumption against threshold for the energy balance view.

agent-ready

Props

Prop	Type	Required	Default	Description
`height`	`number \| undefined`		-	-
`fillHeight`	`boolean \| undefined`		-	-
`periodType`	`PeriodType`	✓	-	-
`chartInput`	`ThresholdLineChartInput`	✓	-	-

`EnergyBalanceRevenueCharts`

Mosaic layout of revenue, downtime, and power charts for the energy balance revenue tab.

agent-ready

Props

Prop	Type	Required	Default	Description
`revenueChartData`	`BarChartDataResult`	✓	-	-
`averageDowntimeData`	`AverageDowntimeChartData`	✓	-	-
`powerChartInput`	`ThresholdLineChartInput`	✓	-	-
`displayMode`	`DisplayMode`	✓	-	-
`barLabelFormatter`	`(v: number) => string`	✓	-	-
`onDisplayModeChange`	`(mode: DisplayMode) => void`	✓	-	-
`periodType`	`PeriodType`	✓	-	-
`revenueMetrics`	`EnergyRevenueMetrics`	✓	-	-

`EnergyBalanceRevenueMetrics`

Grid of stat cards summarising energy revenue metrics for the selected period.

agent-ready

Props

Prop	Type	Required	Default	Description
`metrics`	`EnergyRevenueMetrics`	✓	-	-

`EnergyCostChart`

Bar chart comparing site revenue vs cost per MWh, with USD/BTC currency toggle.

agent-ready

Props

Prop	Type	Required	Default	Description
`chartData`	`BarChartDataResult`	✓	-	-
`btcUnit`	`string \| null`	✓	-	-
`displayMode`	`DisplayMode`	✓	-	-
`barLabelFormatter`	`(v: number) => string`	✓	-	-
`onDisplayModeChange`	`(mode: DisplayMode) => void`	✓	-	-
`height`	`number \| undefined`		-	-

`EnergyMetricCard`

Stat card for a single energy balance metric.

agent-ready

Props

Prop	Type	Required	Default	Description
`name`	`string`	✓	-	-
`value`	`number`	✓	-	-
`unit`	`string`	✓	-	-
`fallback`	`string \| undefined`		-	-

`EnergyReportMinerTypeView`

Energy report — power consumption grouped by miner model (latest day in range).

advanced

Props

Prop	Type	Default	Description
`isLoading`	`boolean \| undefined`	-	-
`containers`	`Container[] \| undefined`	-	-
`groupedConsumption`	`MetricsConsumptionGroupedResponse \| undefined`	-	-
`onTimeFrameChange`	`((start: Date, end: Date) => void) \| undefined`	-	-

`EnergyReportMinerUnitView`

Energy report — power consumption grouped by mining unit / container.

advanced

Props

Prop	Type	Default	Description
`isLoading`	`boolean \| undefined`	-	-
`containers`	`Container[] \| undefined`	-	-
`groupedConsumption`	`MetricsConsumptionGroupedResponse \| undefined`	-	-
`onTimeFrameChange`	`((start: Date, end: Date) => void) \| undefined`	-	-

`EnergyReportSiteView`

Energy report site tab — power trend, power-mode table, and per–mining-unit activity cards.

advanced

Props

Prop	Type	Required	Default	Description
`consumptionError`	`unknown`		-	-
`tailLogLoading`	`boolean \| undefined`		-	-
`containersLoading`	`boolean \| undefined`		-	-
`consumptionLoading`	`boolean \| undefined`		-	-
`consumptionFetching`	`boolean \| undefined`		-	-
`nominalConfigLoading`	`boolean \| undefined`		-	-
`containers`	`EnergyReportContainer[] \| undefined`		-	-
`tailLog`	`EnergyReportTailLogItem[][] \| undefined`		-	-
`nominalPowerAvailabilityMw`	`number \| null \| undefined`		-	-
`consumptionLog`	`MetricsConsumptionLogEntry[] \| undefined`		-	-
`snapshotLoading`	`boolean \| undefined`		-	-
`onRefetchSnapshot`	`VoidFunction \| undefined`		-	-
`dateRange`	`EnergyReportDateRange`	✓	-	-
`onDateRangeChange`	`((range: EnergyReportDateRange) => void) \| undefined`		-	-

`EnergyRevenueChart`

Bar chart showing site energy revenue per MWh, with USD/BTC currency toggle.

agent-ready

Props

Prop	Type	Required	Default	Description
`chartData`	`BarChartDataResult`	✓	-	-
`displayMode`	`DisplayMode`	✓	-	-
`barLabelFormatter`	`(v: number) => string`	✓	-	-
`onDisplayModeChange`	`(mode: DisplayMode) => void`	✓	-	-
`height`	`number \| undefined`		-	-

`GaugeChart`

GaugeChart - Presentational gauge / speedometer chart.

agent-ready

Props

Prop	Type	Required	Default	Description
`percent`	`number`	✓	-	Value between 0 and 1 (e.g. 0.75 = 75%). Values outside the range are clamped.
`colors`	`string[] \| undefined`		-	Arc colours in HEX format.
`arcWidth`	`number \| undefined`		-	Arc thickness as a fraction of the gauge radius (0–1).
`nrOfLevels`	`number \| undefined`		-	Number of arc segments. Ignored when `arcsLength` is provided.
`arcsLength`	`number[] \| undefined`		-	Custom arc-segment proportions (auto-normalised), overriding `nrOfLevels`. e.g. `[0.7, 0.3]` for a progress-style gauge…
`needleColor`	`string \| undefined`		-	Needle + hub colour.
`hideNeedle`	`boolean \| undefined`		-	Hide the needle + hub (e.g. for a progress-style gauge).
`formatTextValue`	`((percent: number) => string) \| undefined`		-	Format the centre label from the clamped fraction (0–1).
`hideText`	`boolean \| undefined`		-	Hide the percentage text rendered inside the gauge.
`id`	`string \| undefined`		-	Stable id used for the gauge's accessibility labels.
`height`	`string \| number \| undefined`		-	Chart height in pixels or any CSS length (e.g. `'200px'` or `'50%'`).
`maxWidth`	`number \| undefined`		-	Maximum width in pixels.
`className`	`string \| undefined`		-	-

`Hashrate`

Top-level hashrate reporting section - composes the site / miner-type / mining-unit drilldowns into a tabbed shell. Each tab fetches independently because the three views use different groupBy axes…

agent-ready

Props

Prop	Type	Default	Description
`defaultTab`	`HashrateTabValue \| undefined`	-	Tab selected on first render. Defaults to the Site View.
`siteView`	`HashrateSiteViewProps \| undefined`	-	Props forwarded to the Site View tab.
`minerTypeView`	`HashrateMinerTypeViewProps \| undefined`	-	Props forwarded to the Miner Type View tab.
`miningUnitView`	`HashrateMiningUnitViewProps \| undefined`	-	Props forwarded to the Mining Unit View tab.

`HashrateMinerTypeView`

Hashrate drilldown grouped by miner model - bar chart of the latest hashrate per miner type, with an optional multi-select filter.

agent-ready

Props

Prop	Type	Default	Description
`log`	`HashrateGroupedLog \| undefined`	-	`Hashrate` log grouped by miner type (groupBy=miner).
`isLoading`	`boolean \| undefined`	-	-
`dateRange`	`HashrateDateRange \| undefined`	-	-
`onDateRangeChange`	`((range: HashrateDateRange) => void) \| undefined`	-	-
`onReset`	`VoidFunction \| undefined`	-	-

`HashrateMiningUnitView`

Hashrate drilldown grouped by mining unit / container - bar chart of the latest hashrate per container with an optional multi-select filter. Drops BE-leaked rollup keys (group-N, maintenance) via…

agent-ready

Props

Prop	Type	Default	Description
`log`	`HashrateGroupedLog \| undefined`	-	`Hashrate` log grouped by container / mining unit (groupBy=container).
`isLoading`	`boolean \| undefined`	-	-
`dateRange`	`HashrateDateRange \| undefined`	-	-
`onDateRangeChange`	`((range: HashrateDateRange) => void) \| undefined`	-	-
`onReset`	`VoidFunction \| undefined`	-	-

`HashrateSiteView`

Site-level hashrate trend - aggregates hashrate across the whole site for the selected date range, with an optional miner-type filter that scopes the sum to a subset.

agent-ready

Props

Prop	Type	Default	Description
`log`	`HashrateGroupedLog \| undefined`	-	`Hashrate` log grouped by miner type.
`isLoading`	`boolean \| undefined`	-	Loading state - drives the chart spinner.
`dateRange`	`HashrateDateRange \| undefined`	-	Selected date range used by the host to drive the query.
`onDateRangeChange`	`((range: HashrateDateRange) => void) \| undefined`	-	Fires when the user picks a new range from the `DateRangePicker`.
`onReset`	`VoidFunction \| undefined`	-	Optional reset handler shown as a "Reset" button next to the date picker.

`Heatmap`

Heatmap — a generic grid of value-coloured cells on a low→high gradient.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`HeatmapCell[][]`	✓	-	Rows of cells (row-major). Rows may be ragged.
`min`	`number \| undefined`		-	Range floor; auto-derived from the finite values when omitted.
`max`	`number \| undefined`		-	Range ceiling; auto-derived from the finite values when omitted.
`colors`	`readonly string[] \| undefined`		-	Gradient stops low→high. Defaults to the cold→hot `HEATMAP_GRADIENT`.
`emptyColor`	`string \| undefined`		-	Colour used for `null` cells.
`showValues`	`boolean \| undefined`		-	Render each cell's value/label as text.
`renderCell`	`((cell: HeatmapCell, context: HeatmapCellContext) => React.ReactNode) \| undefined`		-	Override the cell's inner content — e.g. to overlay socket borders, selection, or tooltips for a PDU grid. The primitiv…
`ariaLabel`	`string \| undefined`		-	Accessible label for the grid.
`className`	`string \| undefined`		-	-

`HeatmapLegend`

HeatmapLegend — a gradient bar with low/high scale labels, matching the gradient used by [**Heatmap**](/reference/ui/components/charts/#heatmap).

agent-ready

Props

Prop	Type	Required	Default	Description
`min`	`string \| number`	✓	-	Value (or pre-formatted label) at the low end of the scale.
`max`	`string \| number`	✓	-	Value (or pre-formatted label) at the high end of the scale.
`unit`	`string \| undefined`		-	Unit suffix appended to `min`/`max`.
`label`	`string \| undefined`		-	Heading above the gradient bar (e.g. "Temperature").
`colors`	`readonly string[] \| undefined`		-	Gradient stops low→high. Defaults to `HEATMAP_GRADIENT`.
`className`	`string \| undefined`		-	-

`LineChart`

Customisable Chart.js line chart with built-in zoom, tooltip, and legend. Data is passed via props; the component does no fetching.

agent-ready

Props

Prop	Type	Required	Default	Description
`chartRef`	`React.MutableRefObject<IChartApi \| null> \| undefined`		-	Mutable ref to hold the LightWeightCharts reference
`data`	`LineChartData`	✓	-	Data of the chart
`yTicksFormatter`	`((value: number) => string) \| undefined`		-	Callback to format ticks on y axis. If `priceFormatter` is given. It would be used instead.
`customLabel`	`string \| undefined`		-	TODO: Doc
`priceFormatter`	`((value: number) => string) \| undefined`		-	Callback to format ticks on y axis.
`roundPrecision`	`number \| undefined`		-	The number of decimals to show
`timeline`	`string \| undefined`		-	TODO: DOC
`fixedTimezone`	`string \| undefined`		-	Applies offset if provided, otherwise timestamps are assumed to already be in local time. Otherwise, use browser's curr…
`shouldResetZoom`	`boolean \| undefined`		-	Wether to Reset Zoom
`skipRound`	`boolean \| undefined`		-	Prevent rounding of values
`skipMinWidth`	`boolean \| undefined`		-	Do not enforce a min width
`fadedBackground`	`boolean \| undefined`		-	Use a faded background
`backgroundColor`	`string \| undefined`		-	Background color of the chart
`customDateFormat`	`string \| undefined`		-	Custom date format
`verticalLineLabelVisible`	`boolean \| undefined`		-	Show vertical line at mouse position
`horizontalLineLabelVisible`	`boolean \| undefined`		-	Show horizontal line at mouse position
`showDateInTooltip`	`boolean \| undefined`		-	Show date line in tooltip
`disableAutoRange`	`boolean \| undefined`		-	Disable automatically determining range
`uniformDistribution`	`boolean \| undefined`		-	Changes horizontal scale marks generation. With this flag equal to true, marks of the same weight are either all drawn…
`unit`	`string \| undefined`		-	The unit to display with values
`beginAtZero`	`boolean \| undefined`		-	Starts the value axis at 0
`showPointMarkers`	`boolean \| undefined`		-	Show a marker on the line
`height`	`number \| undefined`		-	Controls the height of the chart. Default: 240

`LineChartCard`

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

agent-ready

Props

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

`MinMaxAvg`

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

agent-ready

Props

Prop	Type	Required	Default	Description
`min`	`string \| undefined`	✓	-	-
`max`	`string \| undefined`	✓	-	-
`avg`	`string \| undefined`	✓	-	-
`className`	`string \| undefined`		-	-

`MonthlyEbitdaChart`

Bar chart comparing EBITDA across the most recent months for trend visualisation.

agent-ready

Props

Prop	Type	Required	Default	Description
`chartData`	`BarChartDataResult`	✓	-	-
`height`	`number \| undefined`		-	-

`OperationalHashrateChart`

Hashrate trend card for the operational dashboard. Renders the site hashrate over time (TH/s) with an optional nominal reference line, plus an expand toggle. Purely presentational - pass pre-shaped d…

advanced

Props

Prop	Type	Default	Description
`data`	`LineChartCardData`	-	-
`isLoading`	`boolean`	-	-
`isExpanded`	`boolean`	-	-
`onToggleExpand`	`VoidFunction`	-	-

`OperationalMinersStatusChart`

Miners-status card for the operational dashboard. Renders a stacked daily breakdown of miner states (online / error / offline / sleep / maintenance) with an expand toggle. Purely presentational - pas…

advanced

Props

Prop	Type	Default	Description
`data`	`MinersStatusChartData`	-	-
`isLoading`	`boolean`	-	-
`isExpanded`	`boolean`	-	-
`onToggleExpand`	`VoidFunction`	-	-

`OperationalPowerConsumptionChart`

Power-consumption trend card for the operational dashboard. Renders site power draw over time (MW) with an optional power-availability reference line, plus an expand toggle. Purely presentational - p…

advanced

Props

Prop	Type	Default	Description
`data`	`LineChartCardData`	-	-
`isLoading`	`boolean`	-	-
`isExpanded`	`boolean`	-	-
`onToggleExpand`	`VoidFunction`	-	-

`OperationalSiteEfficiencyChart`

Site-efficiency trend card for the operational dashboard. Renders measured site efficiency over time (W/TH/s) with an optional nominal reference line, an info tooltip, and an expand toggle. Purely pr…

advanced

Props

Prop	Type	Default	Description
`data`	`LineChartCardData`	-	-
`isLoading`	`boolean`	-	-
`isExpanded`	`boolean`	-	-
`onToggleExpand`	`VoidFunction`	-	-

`OperationsEnergyChart`

Doughnut breakdown of Operations vs Energy cost (in USD totals).

agent-ready

Props

Prop	Type	Required	Default	Description
`totals`	`CostSummaryMonetaryTotals \| null`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-

`OperationsEnergyCostChart`

Doughnut breakdown of Operations vs Energy cost (USD per MWh). Wraps [**ChartContainer**](/reference/ui/components/charts/#chartcontainer) and [**DoughnutChart**](/reference/ui/components/charts/#doughnutchart); pass operationalCostsUSD and energyCostsUSD via data.

agent-ready

Props

Prop	Type	Default	Description
`title`	`string`	-	-
`unit`	`string`	-	-
`height`	`number`	-	-
`className`	`string`	-	-
`isLoading`	`boolean`	-	-
`emptyMessage`	`string`	-	-
`data`	`Partial<{ energyCostsUSD: number; operationalCostsUSD: number; }>`	-	-

`PowerModeTimelineChart`

Timeline chart for power-mode state changes over time. Wraps [**TimelineChart**](/reference/ui/components/charts/#timelinechart) with mining-specific data shaping.

agent-ready

Props

Prop	Type	Default	Description
`data`	`PowerModeTimelineEntry[]`	-	Initial power-mode entries (each with start/end ts + mode).
`dataUpdates`	`PowerModeTimelineEntry[]`	-	Streaming updates appended to the initial data.
`isLoading`	`boolean`	-	Show a loading skeleton instead of the chart.
`timezone`	`string`	-	IANA timezone string for x-axis tick formatting.
`title`	`string`	-	Chart title.

`ProductionCostChart`

Production cost over time, overlaid with BTC price.

agent-ready

Props

Prop	Type	Required	Default	Description
`costLog`	`readonly CostTimeSeriesEntry[]`	✓	-	-
`btcPriceLog`	`readonly BtcPriceTimeSeriesEntry[]`	✓	-	-
`dateRange`	`FinancialDateRange \| null`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-

`RevenueChart`

Stacked bar chart displaying monthly revenue per site. Automatically switches between BTC and Sats display based on value scale. Receives pre-fetched data as props — no internal data fetching.

agent-ready

Props

Prop	Type	Default	Description
`data`	`RevenueDataItem[]`	-	-
`isLoading`	`boolean`	-	-
`siteList`	`(string \| SiteItem)[]`	-	-
`legendPosition`	`Position`	-	-
`legendAlign`	`"center" \| "start" \| "end"`	-	-

`ThresholdLineChart`

Line chart with optional horizontal threshold lines. Wraps [**ChartContainer**](/reference/ui/components/charts/#chartcontainer) and [**LineChart**](/reference/ui/components/charts/#linechart); pass series and optional thresholds via data.

agent-ready

Props

Prop	Type	Default	Description
`title`	`string`	-	-
`unit`	`string`	-	-
`height`	`number`	-	-
`isTall`	`boolean`	-	When true, uses a taller default height (360px).
`className`	`string`	-	-
`emptyMessage`	`string`	-	-
`isLegendVisible`	`boolean`	-	-
`data`	`ThresholdLineChartData`	-	-
`yTicksFormatter`	`(value: number) => string`	-	-

`TimelineChart`

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

agent-ready

Props

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

Chart Components

On this page