EnergyBalanceCostMetrics

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

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

Prop	Status	Type	Default	Description
`metrics`	Required	`EnergyCostMetrics`	—	—

Usage

Components for the Energy Balance financial reporting section.

Component	Description
`EnergyBalance`	Top-level energy balance dashboard with tabbed revenue and cost views.
`EnergyBalanceCostCharts`	Layout container for the energy cost tab: revenue-vs-cost bar chart and power line chart.
`EnergyBalanceCostMetrics`	Grid of stat cards summarising cost metrics for the selected period.
`EnergyBalanceRevenueCharts`	Mosaic layout of revenue, downtime, and power charts for the revenue tab.
`EnergyBalanceRevenueMetrics`	Grid of stat cards summarising revenue metrics for the selected period.

EnergyBalance Props

Prop	Type	Description
`viewModel`	`EnergyBalanceViewModel`	All display state: chart inputs, metrics, active tab, display modes, loading/error flags. Returned directly by `useEnergyBalanceViewModel`.
`onTabChange`	`(tab: EnergyBalanceTab) => void`	Called when the user switches between Revenue and Cost tabs.
`onRevenueDisplayModeChange`	`(mode: DisplayMode) => void`	Called when the user toggles USD / BTC on the revenue tab.
`onCostDisplayModeChange`	`(mode: DisplayMode) => void`	Called when the user toggles USD / BTC on the cost tab.
`timeframeControls`	`ReactNode`	Optional slot for date-range controls rendered by the host app.
`setCostHref`	`string`	Optional URL for the "Set Monthly Cost" action (hidden when omitted).
`isDemoMode`	`boolean`	Suppresses error banners in demo/mock environments.

Typical usage with `useEnergyBalanceViewModel`

import { EnergyBalance, useEnergyBalanceViewModel } from '@tetherto/mdk-react-devkit'

const MyPage = ({ data, isLoading, errors, dateRange, availablePowerMW }) => {
  const { queryParams, ...componentProps } = useEnergyBalanceViewModel({
    data,
    isLoading,
    fetchErrors: errors,
    dateRange,
    availablePowerMW,
  })

  return (
    <EnergyBalance
      {...componentProps}
      timeframeControls={<MyDateRangePicker />}
      setCostHref="/settings/energy-cost"
    />
  )
}

queryParams contains the { start, end, period } values to pass to your API call. Everything else from the hook maps directly onto EnergyBalance.

Examples

import { EnergyBalanceCostCharts } from '@tetherto/mdk-react-devkit'export const EnergyBalanceCostChartsExample = () => (  <div className="mdk-example-row">    <EnergyBalanceCostCharts      costChartData={{ labels: [], datasets: [] } as never}      btcUnit="BTC"      powerChartInput={{ datasets: [], threshold: null } as never}      displayMode="USD"      barLabelFormatter={(value) => String(value)}      onDisplayModeChange={() => undefined}      showCostBarChart={true}      periodType="month"    />  </div>)

import { EnergyBalanceCostMetrics } from '@tetherto/mdk-react-devkit'export const EnergyBalanceCostMetricsExample = () => (  <div className="mdk-example-row">    <EnergyBalanceCostMetrics      metrics={{        avgPowerConsumption: 11.8,        avgEnergyCost: 38.2,        avgAllInCost: 42.5,        avgPowerAvailability: 12.5,        avgOperationsCost: 4.3,        avgEnergyRevenue: 55.0,      }}    />  </div>)

import { EnergyBalanceRevenueCharts } from '@tetherto/mdk-react-devkit'export const EnergyBalanceRevenueChartsExample = () => (  <div className="mdk-example-row">    <EnergyBalanceRevenueCharts      revenueChartData={{ labels: [], datasets: [] } as never}      averageDowntimeData={{ labels: [], curtailment: [], operationalIssues: [] }}      powerChartInput={{ datasets: [], threshold: null } as never}      displayMode="USD"      barLabelFormatter={(value) => String(value)}      onDisplayModeChange={() => undefined}      periodType="month"      revenueMetrics={{ curtailmentRate: 3.2, operationalIssuesRate: 1.5 }}    />  </div>)

import { EnergyBalanceRevenueMetrics } from '@tetherto/mdk-react-devkit'export const EnergyBalanceRevenueMetricsExample = () => (  <div className="mdk-example-row">    <EnergyBalanceRevenueMetrics metrics={{ curtailmentRate: 3.2, operationalIssuesRate: 1.5 }} />  </div>)

import { EnergyBalance } from '@tetherto/mdk-react-devkit'export const EnergyBalanceExample = () => (  <div className="mdk-example-row">    <EnergyBalance      viewModel={{        revenueMetrics: null,        costMetrics: null,        energyRevenueChartInput: { datasets: [], threshold: null } as never,        averageDowntimeData: { labels: [], curtailment: [], operationalIssues: [] },        powerChartInput: { datasets: [], threshold: null } as never,        powerChartCostInput: { datasets: [], threshold: null } as never,        energyCostChartInput: { datasets: [], btcUnit: 'BTC', threshold: null } as never,        activeTab: 'revenue',        revenueDisplayMode: 'USD',        costDisplayMode: 'USD',        revenueBarLabelFormatter: (v) => String(v),        costBarLabelFormatter: (v) => String(v),        period: 'monthly',        periodType: 'month',        hasData: false,        isLoading: false,        errors: [],        hasDateSelection: false,      }}      onTabChange={() => undefined}      onRevenueDisplayModeChange={() => undefined}      onCostDisplayModeChange={() => undefined}    />  </div>)

EnergyBalanceCostMetrics

Usage

EnergyBalance Props

Typical usage with useEnergyBalanceViewModel

Examples

Typical usage with `useEnergyBalanceViewModel`