AverageDowntimeChart
Stacked bar chart of average downtime (curtailment vs operational issues). Wraps `ChartContainer` and `BarChart`; pass period labels and rate arrays via `data`.
Stacked bar chart of average downtime (curtailment vs operational issues). Wraps ChartContainer and BarChart; pass period labels and rate arrays via data.
import { AverageDowntimeChart } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
title | Optional | string | — | — |
unit | Optional | string | — | — |
height | Optional | number | — | — |
barWidth | Optional | number | — | — |
className | Optional | string | — | — |
isLoading | Optional | boolean | — | — |
emptyMessage | Optional | string | — | — |
data | Optional | AverageDowntimeChartData | — | — |
yTicksFormatter | Optional | (value: number) => string | — | Formats Y-axis ticks, tooltips, and bar data labels (values are 0–1 rates). |
showDataLabels | Optional | boolean | — | — |
Usage
Stacked bar chart of Curtailment vs Op. Issues downtime rates. Includes
ChartContainer chrome: title, unit subtitle, loading, and empty state.
Example
import { AverageDowntimeChart } from '@tetherto/mdk-react-devkit/core'export const AverageDowntimeChartExample = () => ( <div className="mdk-example-row"> <AverageDowntimeChart data={{ labels: ['Mon', 'Tue', 'Wed'], curtailment: [0.02, 0.01, 0.03], operationalIssues: [0.05, 0.04, 0.06], }} /> </div>)