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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 12x 20x 10x 10x 20x 30x 10x 10x 10x 20x 10x 10x 10x 10x 20x 10x 10x 20x 10x 10x 10x 10x 10x 10x 20x 10x 220x 60x 100x 60x 40x | import { Bar, BarChart, CartesianGrid, Cell, 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,
operatingTimelineColors,
RESULT_CHART_BOTTOM_MARGIN,
RESULT_CHART_X_AXIS_LABEL_OFFSET,
} 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: RESULT_CHART_BOTTOM_MARGIN,
}}
>
<CartesianGrid horizontal={false} />
<XAxis
type="number"
tickLine={false}
axisLine={false}
tickFormatter={formatCompactAxisTick}
label={{
value: `Amount (${axisUnit})`,
position: "insideBottom",
offset: RESULT_CHART_X_AXIS_LABEL_OFFSET,
}}
/>
<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)}
>
{rows.map((row, index) => (
<Cell
key={row.sourceRowKey ?? row.label}
fill={
operatingTimelineColors[
index % operatingTimelineColors.length
]
}
/>
))}
</Bar>
</BarChart>
</ChartContainer>
</div>
);
}
|