EnergyBalancePowerChart

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

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

Prop	Status	Type	Default	Description
`height`	Optional	`number \| undefined`	—	—
`fillHeight`	Optional	`boolean \| undefined`	—	—
`periodType`	Required	`PeriodType`	—	—
`chartInput`	Required	`ThresholdLineChartInput`	—	—

Usage

Individual stat cards and charts used inside the Energy Balance section.

Component	Description
`AvgAllInCostCard`	Average all-in cost per MWh for the selected period.
`AvgEnergyCostCard`	Average energy cost per MWh for the selected period.
`AvgEnergyRevenueCard`	Average energy revenue per MWh for the selected period.
`AvgOperationsCostCard`	Average operations cost per MWh for the selected period.
`AvgPowerAvailabilityCard`	Average power availability in MW for the selected period.
`AvgPowerConsumptionCard`	Average power consumption in MW for the selected period.
`CurtailmentRateCard`	Curtailment rate percentage for the selected period.
`OpIssuesRateCard`	Operational issues rate percentage for the selected period.
`EnergyCostChart`	Bar chart comparing site revenue vs cost per MWh with USD/BTC toggle.
`EnergyRevenueChart`	Bar chart of site energy revenue per MWh with USD/BTC toggle.
`EnergyBalancePowerChart`	Line chart of power consumption against threshold.

Downtime in the revenue mosaic uses core AverageDowntimeChart (see mdk-ui docs AverageDowntimeChart).

Stat card props

All stat cards accept a single value: number prop.

EnergyBalancePowerChart props

Prop	Type	Required	Default	Description
`chartInput`	`ThresholdLineChartInput`	yes	—	Series and optional threshold line for power vs availability.
`periodType`	`PeriodType`	yes	—	Controls x-axis date formatting (`month` uses `MM-yy`).
`height`	`number`	no	`280`	Chart height when `fillHeight` is false.
`fillHeight`	`boolean`	no	`false`	Stretch the panel and chart to fill a mosaic cell (uses height `320` and `mdk-energy-balance__panel--fill`). Used on the revenue tab power column in `EnergyBalanceRevenueCharts`.

Notes

The revenue tab left column wraps AverageDowntimeChart in mdk-energy-balance__panel--fill inside EnergyBalanceRevenueCharts. Parent layout should use mdk-energy-balance__revenue-mosaic (or equivalent flex column with min-height: 0) so --fill panels can grow.
Set fillHeight on EnergyBalancePowerChart in the same mosaic when it should stretch with the layout.
Other charts in this folder (EnergyCostChart, EnergyRevenueChart) do not expose fillHeight; they use a fixed default height.

Examples

import { EnergyBalancePowerChart, type ThresholdLineChartInput } from '@tetherto/mdk-react-devkit'const exampleChartInput: ThresholdLineChartInput = {  series: [],}export const EnergyBalancePowerChartExample = () => (  <div className="mdk-example-col">    <div className="mdk-example-row">      <EnergyBalancePowerChart chartInput={exampleChartInput} periodType="month" />    </div>    <div className="mdk-example-row mdk-example-mosaic-cell mdk-energy-balance__revenue-mosaic-power">      <EnergyBalancePowerChart chartInput={exampleChartInput} periodType="month" fillHeight />    </div>  </div>)

import { EnergyCostChart } from '@tetherto/mdk-react-devkit'export const EnergyCostChartExample = () => (  <div className="mdk-example-row">    <EnergyCostChart      btcUnit="BTC"      displayMode="USD"      onDisplayModeChange={() => undefined}      barLabelFormatter={(value) => String(value)}      chartData={{ labels: [], datasets: [] } as never}    />  </div>)

import { CURRENCY, UNITS } from '@primitives'import { EnergyMetricCard } from '@tetherto/mdk-react-devkit'export const EnergyMetricCardExample = () => (  <div className="mdk-example-row">    <EnergyMetricCard      name="Avg Energy Cost"      value={38.2}      unit={`${CURRENCY.USD}/${UNITS.ENERGY_MWH}`}    />    <EnergyMetricCard name="Avg Power Consumption" value={11.8} unit={UNITS.ENERGY_MW} />    <EnergyMetricCard name="Curtailment Rate" value={3.2} unit={UNITS.PERCENT} fallback="0" />  </div>)

import { EnergyRevenueChart } from '@tetherto/mdk-react-devkit'export const EnergyRevenueChartExample = () => (  <div className="mdk-example-row">    <EnergyRevenueChart      chartData={{ labels: [], datasets: [] } as never}      displayMode="USD"      barLabelFormatter={(value) => String(value)}      onDisplayModeChange={() => undefined}    />  </div>)