Compose Cost layouts

The Cost composite renders a fixed 2x2 cost-summary layout. 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

CostContent

Renders the data-driven portion of the Cost page in a 2x2 Mosaic grid (production cost chart, operations energy chart, avg all-in cost chart, and cost metric tiles). Building block of the Cost composite.

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

Renders inside the Cost composite.

CostMetrics

Three $/MWh tiles that summarise the cost-summary period. Order mirrors the OSS Cost page: All-in (highlighted), Energy, Operations. Building block of the Cost composite.

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

Renders inside the Cost composite.

AvgAllInCostChart

Avg All-in Cost - revenue vs cost ($/MWh) bar chart over time. Building block of the Cost composite.

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

Renders inside the Cost composite.

ProductionCostChart

Production cost over time, overlaid with BTC price. Building block of the Cost composite.

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

Renders inside the Cost composite.

OperationsEnergyChart

Doughnut breakdown of Operations vs Energy cost (in USD totals). Building block of the Cost composite.

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

Renders inside the Cost composite.