OperationsEnergyCostChart
Doughnut breakdown of Operations vs Energy cost (USD per MWh). Wraps `ChartContainer` and `DoughnutChart`; pass `operationalCostsUSD` and `energyCostsUSD` vi…
Doughnut breakdown of Operations vs Energy cost (USD per MWh). Wraps ChartContainer and DoughnutChart; pass operationalCostsUSD and energyCostsUSD via data.
import { OperationsEnergyCostChart } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
title | Optional | string | — | — |
unit | Optional | string | — | — |
height | Optional | number | — | — |
className | Optional | string | — | — |
isLoading | Optional | boolean | — | — |
emptyMessage | Optional | string | — | — |
data | Optional | Partial<{ energyCostsUSD: number; operationalCostsUSD: number; }> | — | — |
Usage
Doughnut chart comparing Operations and Energy cost (USD/MWh). Includes
ChartContainer chrome: title, unit subtitle, loading, and empty state.
Example
import { OperationsEnergyCostChart } from '@tetherto/mdk-react-devkit/core'export const OperationsEnergyCostChartExample = () => ( <div className="mdk-example-row"> <OperationsEnergyCostChart data={{ energyCostsUSD: 500, operationalCostsUSD: 1000, }} /> </div>)