Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 4x 8x 4x 8x 8x 12x 4x 8x 4x 8x 4x 4x 8x 4x 4x 4x 4x 8x 16x 12x 12x | import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
import { ChartContainer, ChartTooltip } from "@/ahuora-design-system/ui/chart";
import type { DrillbackHandler, ParsedChartDataset } from "../model/types";
import { chartTitle } from "./chartData";
import {
formatCompactAxisTick,
rankedBreakdownAxisUnit,
} from "./chartFormatters";
import { breakdownChartConfig } from "./constants";
import { EconomicsChartTooltip } from "./EconomicsChartTooltip";
export function RankedBreakdownChart({
dataset,
onDrillback,
}: {
dataset: ParsedChartDataset;
onDrillback: DrillbackHandler;
}) {
const axisUnit = rankedBreakdownAxisUnit(dataset);
const rows =
dataset.series[0]?.points.map((point) => ({
label: point.label,
value: point.value,
sourceRowId: point.source_row?.id,
sourceRowKey: point.source_row?.row_key,
unit: point.unit,
assumptions: point.assumptions,
warningRefs: point.warning_refs,
})) ?? [];
return (
<div className="flex h-full flex-col">
<div
className="sr-only"
aria-label={`${chartTitle(dataset)} x-axis label`}
>
Amount ({axisUnit})
</div>
<ChartContainer
config={breakdownChartConfig}
className="min-h-0 w-full flex-1"
aria-label={`Graph ${chartTitle(dataset)}`}
>
<BarChart
data={rows}
layout="vertical"
margin={{ left: 16, right: 16, top: 8, bottom: 30 }}
>
<CartesianGrid horizontal={false} />
<XAxis
type="number"
tickLine={false}
axisLine={false}
tickFormatter={formatCompactAxisTick}
label={{
value: `Amount (${axisUnit})`,
position: "insideBottom",
offset: -18,
}}
/>
<YAxis
type="category"
dataKey="label"
width={120}
tickLine={false}
axisLine={false}
/>
<ChartTooltip content={<EconomicsChartTooltip />} />
<Bar
dataKey="value"
fill="var(--color-value)"
onClick={(data) => onDrillback(data?.sourceRowId)}
/>
</BarChart>
</ChartContainer>
</div>
);
}
|