import { useState, type PointerEvent, type ReactNode } from "react";
import { Pie } from "@visx/shape";
import { Group } from "@visx/group";
import { localPoint } from "@visx/event";
import { ChartTooltip, TooltipRow } from "./ChartTooltip";
export interface DonutBreakdownPart {
key: string;
label: string;
/** Positive magnitude; parts should sum to (or near) the slice's own value. */
value: number;
/** Name of an HSL colour token, e.g. "--chart-green". */
colorVar: string;
}
export interface DonutSlice {
name: string;
value: number;
color: string;
/** What this slice's value is made of, e.g. cost basis vs. gain. Shown as a
* small segmented bar and a value per part in the hover tooltip; omit when
* there's nothing to break the slice down into. */
breakdown?: DonutBreakdownPart[];
}
interface Props {
data: DonutSlice[];
size: number;
thickness?: number;
formatValue: (n: number) => string;
/** Centre readout when nothing is hovered, e.g. the total. */
centerLabel: string;
centerValue: ReactNode;
/** Highlight a slice from outside (e.g. the table row being hovered). When
* given, it takes over from the donut's own hover state. */
active?: string | null;
/** Called when the pointer or focus moves onto / off a slice. */
onActiveChange?: (name: string | null) => void;
}
/** A thin bar split by explicit parts (not auto-assigned identity colours,
* unlike WeightBar) — used for a value's own composition, e.g. principal vs
* gain, where colour means direction rather than "which entity". */
function CompositionBar({ parts, total }: { parts: DonutBreakdownPart[]; total: number }) {
const shown = parts.filter((p) => p.value !== 0);
if (shown.length === 0 || total <= 0) return null;
return (
{shown.map((p) => (
))}
);
}
/**
* A donut whose centre is the readout: hovering or focusing a slice swaps the
* centre from the total to that slice's name, value and share, no floating
* tooltip covering the ring. The active slice lifts slightly; the rest fade.
*
* A slice with `breakdown` also gets a floating tooltip near the pointer
* (the ring is curved, so a fixed-position readout can't sit "on" a slice the
* way a bar or bin can) showing what the value is made of: a small segmented
* bar plus one row per part.
*/
export function DonutChart({ data, size, thickness = 30, formatValue, centerLabel, centerValue, active: activeProp, onActiveChange }: Props) {
const [internalActive, setInternalActive] = useState(null);
const active = activeProp !== undefined ? activeProp : internalActive;
const setActive = (name: string | null) => {
setInternalActive(name);
onActiveChange?.(name);
};
const [pointer, setPointer] = useState<{ x: number; y: number } | null>(null);
const radius = size / 2;
const total = data.reduce((s, d) => s + d.value, 0);
const hovered = data.find((d) => d.name === active);
// The centre readout must fit inside the ring's hole, not a fixed guess at
// padding: a smaller `size` (this component is used at everything from 140
// to 200+) or a thicker ring shrinks the hole, and a fixed px-10 either
// wasted space or let long text spill out past the ring with no guard.
const innerDiameter = Math.max(0, 2 * (radius - 4 - thickness));
const textBoxSize = innerDiameter * 0.86;
const track = (e: PointerEvent) => {
const pt = localPoint(e);
if (pt) setPointer({ x: pt.x, y: pt.y });
};
return (
{hovered?.breakdown && pointer && (() => {
// The parts' own sum is the bar's 100%, not the slice's current
// value: a losing holding's parts are "current value" + "loss",
// which together equal what was originally invested, a larger
// number than the now-smaller current value.
const partsTotal = hovered.breakdown.reduce((s, p) => s + Math.abs(p.value), 0);
return (