Chart Donut Halftone

1"use client";
2 
3import { useEffect, useId, useMemo, useState } from "react";
4 
5// ---------------------------------------------------------------------------
6// ChartDonutHalftone — the dithered-chart family's part-to-whole chart. The
7// backlog flags pie/donut as a form to build "only with a real reason": the
8// dataviz heuristic says bar beats pie for almost every job, and a donut
9// whose slice DENSITY re-encoded its own share would be the textbook
10// anti-pattern (a value-ramp on a channel that already shows the value via
11// angle). The reason here is that the segments are ORDINAL — a small, fixed
12// size-tier scale — not nominal categories. Angle still carries the only
13// magnitude channel (share of the whole); density carries the tier's
14// POSITION in the size scale (S sparsest -> XL densest), the same "one hue,
15// monotone lightness steps" idea the dataviz skill prescribes for an ordinal
16// ramp, translated into ink density instead of lightness. The two channels
17// encode two different facts, so nothing is double-encoded.
18//
19// Same shared constant as chart-bar-halftone: the 4x4 Bayer matrix already
20// used by background-ascii-dither and ascii-engraving-contour, stamped into
21// 17 discrete ink-level patterns (0 empty, 16 solid) and duplicated verbatim
22// here so both chart-family members produce byte-identical density at the
23// same level. Pure var(--foreground) ink on var(--background) paper, no
24// --accent in the data channel, --accent reserved for keyboard focus only —
25// the family's colour decision, matching heatmap-year-stipple's precedent.
26// ---------------------------------------------------------------------------
27 
28export interface ChartDonutHalftoneDatum {
29  label: string;
30  value: number;
31}
32 
33export interface ChartDonutHalftoneProps {
34  /** ordinal, low -> high tier order (e.g. size tiers, funnel stages) */
35  data?: ChartDonutHalftoneDatum[];
36  title?: string;
37  /** unit suffix appended to the center readout, e.g. "orders" */
38  unit?: string;
39  className?: string;
40}
41 
42const BAYER = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5];
43const LEVELS = 16;
44const CELL = 4;
45 
46const SIZE = 240;
47const CX = SIZE / 2;
48const CY = SIZE / 2;
49const R_OUTER = 96;
50const R_INNER = 56;
51const GAP_RAD = 0.035;
52const EXPLODE_PX = 6;
53 
54function ordinalLevel(rank: number, total: number): number {
55  if (total <= 1) return LEVELS;
56  return Math.round((rank / (total - 1)) * LEVELS);
57}
58 
59// … truncated