EbitdaMetrics

Row of summary metric cards across the top of the EBITDA section (actual, hodl, selling, cost).

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

Prop	Status	Type	Default	Description
`metrics`	Required	`EbitdaDisplayMetrics`	—	—
`currentBTCPrice`	Required	`number`	—	—

Usage

Components for the EBITDA financial reporting section.

Component	Description
`Ebitda`	Top-level EBITDA dashboard combining metrics row, charts, and date picker.
`EbitdaCharts`	Chart panel visualising revenue, cost, and EBITDA over time.
`EbitdaMetrics`	Summary metric cards row: actual, hodl, selling, and production cost.

Ebitda Props

Prop	Type	Description
`metrics`	`EbitdaDisplayMetrics \| null`	Computed EBITDA metrics.
`ebitdaChartInput`	`ToBarChartDataInput \| null`	Data for the EBITDA bar chart.
`btcProducedChartInput`	`ToBarChartDataInput \| null`	Data for the BTC produced chart.
`hasBtcProducedAllZeros`	`boolean`	Whether all BTC produced values are zero.
`showEbitdaBarChart`	`boolean`	Show the EBITDA bar chart.
`currentBTCPrice`	`number`	Current Bitcoin price in USD.
`datePicker`	`ReactElement`	Date picker element.
`isLoading`	`boolean`	Loading state.
`errors`	`string[]`	Error messages to display.

Examples

import { EbitdaCharts } from '@tetherto/mdk-react-devkit'export const EbitdaChartsExample = () => (  <div className="mdk-example-row">    <EbitdaCharts      showEbitdaBarChart={true}      ebitdaChartData={{ labels: [], datasets: [] } as never}      btcDisplayData={{ labels: [], datasets: [] } as never}      isLoading={false}      hasBtcProducedAllZeros={false}    />  </div>)

import { EbitdaMetrics } from '@tetherto/mdk-react-devkit'export const EbitdaMetricsExample = () => (  <div className="mdk-example-row">    <EbitdaMetrics      metrics={{ actual: 125000, hodl: 198000, selling: 175000, cost: 50000 } as never}      currentBTCPrice={65000}    />  </div>)

import { Ebitda } from '@tetherto/mdk-react-devkit'export const EbitdaExample = () => (  <div className="mdk-example-row">    <Ebitda      metrics={null}      ebitdaChartInput={null}      btcProducedChartInput={null}      hasBtcProducedAllZeros={false}      showEbitdaBarChart={true}      currentBTCPrice={65000}      datePicker={<span>Date picker</span>}      hasDateSelection={true}      isLoading={false}    />  </div>)