Compose Energy balance layouts

The EnergyBalance composite renders a fixed two-tab layout (revenue and cost). To build a custom arrangement, compose it from the building blocks below — each takes pre-shaped data as props and does no fetching.

Building blocks

EnergyBalanceRevenueCharts

Mosaic layout of revenue, downtime, and power charts for the energy balance revenue tab. Building block of the EnergyBalance composite.

import { EnergyBalanceRevenueCharts } from '@tetherto/mdk-react-devkit/foundation'

Renders inside the revenue tab of EnergyBalance.

EnergyBalanceRevenueMetrics

Grid of stat cards summarising energy revenue metrics for the selected period. Building block of the EnergyBalance composite.

import { EnergyBalanceRevenueMetrics } from '@tetherto/mdk-react-devkit/foundation'

Renders inside the revenue tab of EnergyBalance.

EnergyBalanceCostCharts

Layout container for the energy cost tab charts: revenue-vs-cost bar chart and power line chart. Building block of the EnergyBalance composite.

import { EnergyBalanceCostCharts } from '@tetherto/mdk-react-devkit/foundation'

Renders inside the cost tab of EnergyBalance.

EnergyBalanceCostMetrics

Grid of stat cards summarising energy cost metrics for the selected period. Building block of the EnergyBalance composite.

import { EnergyBalanceCostMetrics } from '@tetherto/mdk-react-devkit/foundation'

Renders inside the cost tab of EnergyBalance.

EnergyBalancePowerChart

Line chart visualising power consumption against threshold for the energy balance view. Building block of the EnergyBalance composite.

import { EnergyBalancePowerChart } from '@tetherto/mdk-react-devkit/foundation'

Renders inside both tabs of EnergyBalance.

EnergyRevenueChart

Bar chart showing site energy revenue per MWh, with USD/BTC currency toggle. Building block of the EnergyBalance composite.

import { EnergyRevenueChart } from '@tetherto/mdk-react-devkit/foundation'

Renders inside EnergyBalanceRevenueCharts.

EnergyCostChart

Bar chart comparing site revenue vs cost per MWh, with USD/BTC currency toggle. Building block of the EnergyBalance composite.

import { EnergyCostChart } from '@tetherto/mdk-react-devkit/foundation'

Renders inside EnergyBalanceCostCharts.

EnergyMetricCard

Stat card for a single energy balance metric. Building block of the EnergyBalance composite.

import { EnergyMetricCard } from '@tetherto/mdk-react-devkit/foundation'

Renders inside the energy-balance metric grids.