@acronis-platform/ui-react 5.2.0 → 5.3.0

package/dist/components/ui/radial-bar-chart/radial-bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"radial-bar-chart.js","names":[],"sources":["../../../../src/components/ui/radial-bar-chart/radial-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Cell,\n  Label,\n  LabelList,\n  PolarAngleAxis,\n  PolarGrid,\n  RadialBar,\n  RadialBarChart as RechartsRadialBarChart,\n} from 'recharts';\n\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveChartColors,\n  resolveLabelFillClass,\n  CHART_DEFAULT_PALETTE,\n  CHART_LABEL_FONT_SIZE,\n  type ChartConfig,\n  type ChartPalette,\n  type ChartAnimationProps,\n  type ChartDataLabelProps,\n  type ChartTooltipContentProps,\n  type PolarLabelPosition,\n  type ResolvedAnimation,\n  type TickFormatter,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives (a polar/radial\n// type). Rows become concentric arcs sized by `dataKey`, each colored from its\n// `--color-<name>` var; `dataKeys` switches to one arc per metric instead. Like\n// ScatterChart/ComposedChart there's no CVA variant: a radial bar's\n// expressiveness is geometry (angles/radii, plain props) and the data mapping,\n// not a visual \"mode\". The angular sweep is exposed as startAngle/endAngle props\n// so a caller can build a gauge or a full ring.\n\n/** Row-per-arc datum: the `nameKey` label plus each metric's numeric value. */\ntype RadialBarChartDatum = Record<string, string | number>;\n\n/** What an arc's data label reads. */\nexport type RadialBarChartLabelFormat = 'value' | 'name-value';\n\nexport interface RadialBarChartCenterLabel {\n  // Rendered as SVG <text>, which only lays out text — hence string | number,\n  // not ReactNode.\n  /** Headline metric rendered large in the hole (e.g. the gauge's value). */\n  value?: string | number;\n  /** Caption rendered under the value. */\n  label?: string | number;\n}\n\n/**\n * The readout in the hole at the centre of the arcs — a headline value over a\n * caption. Rendered as a recharts `<Label>`, which is what supplies the polar\n * viewBox the text centres itself on.\n *\n * There is one readout for the whole chart, so it hangs off the first series\n * drawn — every series shares the same viewBox.\n */\nfunction RadialBarChartCenterLabelContent({\n  centerLabel,\n}: {\n  centerLabel: RadialBarChartCenterLabel;\n}) {\n  return (\n    <Label\n      content={({ viewBox }) => {\n        if (!viewBox || !('cx' in viewBox)) return null;\n        const { cx: centerX = 0, cy: centerY = 0 } = viewBox as {\n          cx?: number;\n          cy?: number;\n        };\n        const hasValue = centerLabel.value != null;\n        const hasLabel = centerLabel.label != null;\n        // Straddle the centre when both lines show, so the value + label block\n        // is centered as a whole (not just the value).\n        const both = hasValue && hasLabel;\n        return (\n          <g>\n            {hasValue && (\n              <text\n                x={centerX}\n                y={both ? centerY - 10 : centerY}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                className=\"fill-foreground text-2xl font-semibold\"\n              >\n                {centerLabel.value}\n              </text>\n            )}\n            {hasLabel && (\n              <text\n                x={centerX}\n                y={both ? centerY + 13 : centerY}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                className=\"fill-muted-foreground text-sm\"\n              >\n                {centerLabel.label}\n              </text>\n            )}\n          </g>\n        );\n      }}\n    />\n  );\n}\n\n/**\n * Compose one arc's data-label text. Exported for unit tests; not part of the\n * package's public API.\n *\n * `labelFormatter` only ever formats the numeric part, so a chart's labels and\n * its tooltip stay in the same units under either format. A nullish value yields\n * an empty label, which recharts renders as no `<text>` at all.\n */\nexport function radialBarChartLabelText(options: {\n  format: RadialBarChartLabelFormat;\n  name: string | number | undefined;\n  value: string | number | undefined;\n  formatter?: TickFormatter;\n}): string {\n  const { format, name, value, formatter } = options;\n  if (value == null) return '';\n  const valueText = formatter ? formatter(value) : String(value);\n  return format === 'name-value' && name != null\n    ? `${name}: ${valueText}`\n    : valueText;\n}\n\n/** One piece of a segmented gauge's ring: a length in degrees and what it is. */\nexport interface RadialBarChartSegment {\n  /** Synthetic series key — stable for a given (index, kind). */\n  key: string;\n  /** Angular length of the piece, in degrees. */\n  degrees: number;\n  /** `value` is the metric, `track` the unreached remainder, `gap` the notch. */\n  kind: 'value' | 'track' | 'gap';\n}\n\n/** Fallback gap between a segmented gauge's segments, in degrees. */\nconst SEGMENT_GAP = 3;\n\n/**\n * Cut a gauge's sweep into equal segments separated by gaps, and split the\n * segment the value ends inside into its reached and unreached parts. Exported\n * for unit tests; not part of the package's public API.\n *\n * Lengths come back in **degrees**, which is what lets the ring be built as one\n * stack of synthetic series over a `[0, sweep]` angular scale: recharts lays\n * stacked radial bars out sequentially along the angle, so a transparent series\n * between two colored ones reads as a real notch in the ring. A `gap` that\n * would leave no room for the segments themselves is clamped.\n */\nexport function radialBarChartSegments(options: {\n  value: number;\n  domain: [number, number];\n  segments: number;\n  gap: number;\n  /** Absolute sweep of the chart, in degrees. */\n  sweep: number;\n  /** A full-circle sweep also needs a gap between the last segment and the first. */\n  closed: boolean;\n}): RadialBarChartSegment[] {\n  const { value, domain, segments, sweep, closed } = options;\n  const gapCount = closed ? segments : segments - 1;\n  // Leave at least half the sweep for the segments, however wide a gap is asked\n  // for — an all-gap ring would render as nothing at all. A negative gap would\n  // stretch the pieces past the sweep and overlap them, so it floors at zero.\n  const gap =\n    gapCount > 0\n      ? Math.min(Math.max(options.gap, 0), sweep / (2 * gapCount))\n      : 0;\n  const segmentDegrees = (sweep - gap * gapCount) / segments;\n  const [min, max] = domain;\n  const span = max - min;\n  // A domain with no span (`[n, n]`) or an inverted one (`[max, min]`) cannot\n  // place a value on the ring at all, so there is no fraction to draw and the\n  // ring stays empty. It deliberately does not fall back to comparing the value\n  // against zero: that reported a *full* ring for `{ value: 5, domain: [100,\n  // 100] }`, i.e. claimed completion the data never supported. For a gauge,\n  // under-reading a domain that says nothing is the safe direction.\n  const fraction =\n    span > 0 ? Math.min(Math.max((value - min) / span, 0), 1) : 0;\n  // The value maps onto the *drawn* ring, so the gaps never eat into it.\n  let remainingValue = fraction * segmentDegrees * segments;\n\n  const pieces: RadialBarChartSegment[] = [];\n  for (let index = 0; index < segments; index++) {\n    const reached = Math.min(Math.max(remainingValue, 0), segmentDegrees);\n    remainingValue -= reached;\n    // Both halves are always emitted, including at zero length: a stable key set\n    // keeps recharts' series identities steady as the value changes.\n    pieces.push({ key: `seg-${index}-value`, degrees: reached, kind: 'value' });\n    pieces.push({\n      key: `seg-${index}-track`,\n      degrees: segmentDegrees - reached,\n      kind: 'track',\n    });\n    if (gap > 0 && (closed || index < segments - 1)) {\n      pieces.push({ key: `seg-${index}-gap`, degrees: gap, kind: 'gap' });\n    }\n  }\n  return pieces;\n}\n\n/**\n * Fill for one piece of a segmented gauge's ring. Exported for unit tests and so\n * the forced-open tooltip story can build a ring from the real implementation\n * rather than a copy of it; not part of the package's public API.\n */\nexport function radialBarChartSegmentFill(\n  kind: RadialBarChartSegment['kind'],\n  colorName: string | number\n): string {\n  if (kind === 'gap') return 'transparent';\n  // The unreached remainder plays the part `showBackground`'s track plays on a\n  // continuous arc, so it takes the same muted surface.\n  return kind === 'track'\n    ? 'var(--ui-border-on-status-neutral)'\n    : `var(--color-${colorName})`;\n}\n\n/**\n * What a segmented gauge's tooltip reads. Exported for unit tests; not part of\n * the package's public API.\n *\n * A segmented ring's series are pieces of geometry, so recharts would offer the\n * hovered piece's own name and length (\"seg-3-value\", 41.2°). Hovering anywhere\n * on the ring should read the metric instead, so the reading is rebuilt from the\n * data row.\n */\nexport function radialBarChartSegmentedReading(options: {\n  config: ChartConfig;\n  row: RadialBarChartDatum;\n  nameKey: string;\n  dataKey: string;\n  /** The `valueDomain` maximum, when the gauge has one. */\n  domainMax?: number;\n}): { colorName: string; label: React.ReactNode; valueText: string } {\n  const { config, row, nameKey, dataKey, domainMax } = options;\n  const colorName = String(row[nameKey]);\n  const value = row[dataKey];\n  const valueText =\n    typeof value === 'number' ? value.toLocaleString() : String(value ?? '');\n  return {\n    colorName,\n    label: config[colorName]?.label ?? colorName,\n    // The gauge's scale is the other half of the reading, so a known maximum\n    // comes along: \"29 / 38\", not a bare \"29\".\n    valueText:\n      domainMax == null\n        ? valueText\n        : `${valueText} / ${domainMax.toLocaleString()}`,\n  };\n}\n\n/**\n * The tooltip a segmented gauge shows — the same swatch/name/value layout the\n * default `ChartTooltipContent` row uses, dot included, over the reading from\n * `radialBarChartSegmentedReading`. Exported for the forced-open\n * visual-regression story; not part of the package's public API.\n *\n * `payload` is trimmed to one row: a radial tooltip is axis-shared and collects a\n * row from every series — two dozen identical rows for one metric.\n * (`tooltipType=\"none\"` only tags them, and scoping the tooltip to the hovered\n * item instead would drop it in the corner — unlike Pie/Bar sectors, a RadialBar\n * sector carries no tooltip coordinate.)\n *\n * A real component rather than a closure so it can be handed to `ChartTooltip`\n * as an *element*: recharts `cloneElement`s an element but `createElement`s a\n * function, and a closure rebuilt each render is a new element *type* — which\n * remounts the tooltip on every parent render instead of updating it.\n */\nexport function RadialBarChartSegmentedTooltipContent({\n  active,\n  payload,\n  ...reading\n}: {\n  active?: boolean;\n  // Loosely typed on purpose: recharts' own payload generics are wider than the\n  // shared `ChartTooltipContentProps` accepts, and only the row count matters.\n  payload?: readonly unknown[];\n  config: ChartConfig;\n  row: RadialBarChartDatum;\n  nameKey: string;\n  dataKey: string;\n  domainMax?: number;\n}) {\n  const { colorName, label, valueText } =\n    radialBarChartSegmentedReading(reading);\n\n  return (\n    <ChartTooltipContent\n      active={active}\n      payload={payload?.slice(0, 1) as ChartTooltipContentProps['payload']}\n      hideLabel\n      formatter={() => (\n        <>\n          <div\n            className=\"h-2.5 w-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: `var(--color-${colorName})` }}\n          />\n          <div className=\"flex flex-1 items-center justify-between gap-2 leading-none\">\n            <span className=\"text-muted-foreground\">{label}</span>\n            <span className=\"font-medium tabular-nums text-foreground\">\n              {valueText}\n            </span>\n          </div>\n        </>\n      )}\n    />\n  );\n}\n\n/**\n * The band a multi-metric tooltip's header names. Exported for unit tests; not\n * part of the package's public API.\n *\n * Each tooltip row is one metric, so the header names the band the hovered arc\n * belongs to. recharts' own label is the radius-axis index, which reads as a\n * bare number.\n */\nexport function radialBarChartBandName(\n  row: RadialBarChartDatum | undefined,\n  nameKey: string\n): string {\n  const name = row?.[nameKey];\n  return name == null ? '' : String(name);\n}\n\n/**\n * What an arc's data label calls the arc: the row's own `nameKey` value, or — in\n * multi-metric mode, where one arc *is* one metric — that metric's `config` label.\n */\nfunction radialBarChartArcName(options: {\n  key: string;\n  row: RadialBarChartDatum | undefined;\n  isMultiMetric: boolean;\n  nameKey: string;\n  config: ChartConfig;\n}): string | number | undefined {\n  const { key, row, isMultiMetric, nameKey, config } = options;\n  if (!isMultiMetric) return row?.[nameKey];\n  // ChartConfig labels are ReactNode; only a plain string/number can go into an\n  // SVG <text>.\n  const label = config[key]?.label;\n  return typeof label === 'string' || typeof label === 'number' ? label : key;\n}\n\n/**\n * The default mapping's arcs: one `RadialBar` per series — one for the single\n * `dataKey`, or one per `dataKeys` entry in multi-metric mode — drawn\n * concentrically.\n *\n * recharts collects its graphical items from the store (each `RadialBar`\n * registers itself on render) rather than by scanning the chart's children for\n * their types, so grouping them inside a component of our own is invisible to it.\n * The `Cell`s stay direct children of their `RadialBar`, which *does* read its own\n * children by type.\n */\nfunction RadialBarChartSeries({\n  seriesKeys,\n  seriesData,\n  isMultiMetric,\n  config,\n  nameKey,\n  showBackground,\n  cornerRadius,\n  minPointSize,\n  animation,\n  centerLabel,\n  showLabels,\n  labelPosition,\n  labelFormat,\n  labelFormatter,\n}: {\n  seriesKeys: string[];\n  seriesData: RadialBarChartDatum[];\n  isMultiMetric: boolean;\n  config: ChartConfig;\n  nameKey: string;\n  showBackground: boolean;\n  cornerRadius: number;\n  minPointSize: number | undefined;\n  animation: ResolvedAnimation;\n  centerLabel: RadialBarChartCenterLabel | undefined;\n  showLabels: boolean;\n  labelPosition: PolarLabelPosition;\n  labelFormat: RadialBarChartLabelFormat;\n  labelFormatter?: TickFormatter;\n}) {\n  return seriesKeys.map((key, seriesIndex) => (\n    <RadialBar\n      key={key}\n      dataKey={key}\n      fill={isMultiMetric ? `var(--color-${key})` : undefined}\n      background={showBackground ? { fill: 'var(--ui-border-on-status-neutral)' } : false}\n      cornerRadius={cornerRadius}\n      minPointSize={minPointSize}\n      {...animation}\n    >\n      {!isMultiMetric &&\n        seriesData.map((entry, index) => (\n          // Keyed by index, not the name: two arcs could share a nameKey\n          // value, which would collide as a React key. Same-named arcs\n          // intentionally share a color/config entry via `--color-<name>`.\n          <Cell key={index} fill={`var(--color-${entry[nameKey]})`} />\n        ))}\n      {seriesIndex === 0 && centerLabel && (\n        <RadialBarChartCenterLabelContent centerLabel={centerLabel} />\n      )}\n      {showLabels && (\n        <LabelList\n          // `valueAccessor` rather than `dataKey`: the label text can\n          // carry the arc's name, which only the whole row (single\n          // metric) or the metric's config entry can supply. recharts\n          // ignores the accessor when a dataKey is set, so the two\n          // can't be combined.\n          valueAccessor={(entry) =>\n            radialBarChartLabelText({\n              format: labelFormat,\n              name: radialBarChartArcName({\n                key,\n                row: entry.payload as RadialBarChartDatum | undefined,\n                isMultiMetric,\n                nameKey,\n                config,\n              }),\n              value: entry.value as string | number | undefined,\n              formatter: labelFormatter,\n            })\n          }\n          position={labelPosition}\n          className={resolveLabelFillClass(labelPosition)}\n          fontSize={CHART_LABEL_FONT_SIZE}\n        />\n      )}\n    </RadialBar>\n  ));\n}\n\n/**\n * A segmented gauge's ring: the pieces from `radialBarChartSegments` as one stack\n * of synthetic series, so they lay out sequentially around the ring instead of\n * concentrically and the `gap` pieces read as notches.\n */\nfunction RadialBarChartSegmentedSeries({\n  ringSegments,\n  row,\n  nameKey,\n  cornerRadius,\n  animation,\n  centerLabel,\n}: {\n  ringSegments: RadialBarChartSegment[];\n  row: RadialBarChartDatum;\n  nameKey: string;\n  cornerRadius: number;\n  animation: ResolvedAnimation;\n  centerLabel: RadialBarChartCenterLabel | undefined;\n}) {\n  return ringSegments.map((segment, index) => (\n    <RadialBar\n      key={segment.key}\n      dataKey={segment.key}\n      stackId=\"segments\"\n      // The metric's name, so the hover has a row to key off at all\n      // (`ChartTooltipContent` keys its row off `name`).\n      name={String(row[nameKey])}\n      fill={radialBarChartSegmentFill(segment.kind, row[nameKey])}\n      cornerRadius={cornerRadius}\n      {...animation}\n    >\n      {index === 0 && centerLabel && (\n        <RadialBarChartCenterLabelContent centerLabel={centerLabel} />\n      )}\n    </RadialBar>\n  ));\n}\n\nexport interface RadialBarChartProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    ChartAnimationProps,\n    ChartDataLabelProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. */\n  data: ReadonlyArray<RadialBarChartDatum>;\n  /**\n   * Per-arc map of `label` / `icon` / `tone`, keyed by the arc's `nameKey` value\n   * — or, in multi-metric mode, by each `dataKeys` entry (imported from the\n   * shared `Chart` primitives). Turned into `--color-<name>` custom properties.\n   * Series take their colour from the container's `palette`; each entry maps a\n   * key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each arc. Ignored when `dataKeys` is set. */\n  dataKey: string;\n  /**\n   * Plot several metrics instead of one arc per row: one arc per key, colored and\n   * named from `config` keyed by the **key** (not by `nameKey`) — the same\n   * convention as the cartesian charts. Every metric shares one angular scale, so\n   * pair it with `valueDomain` when the metrics are measured against a known\n   * maximum. `nameKey` still names the band each metric's arc sits in.\n   */\n  dataKeys?: string[];\n  /**\n   * Label field that names each arc (drives the legend, tooltip, and\n   * `--color-<name>` lookup). Values should be unique per chart (arcs sharing a\n   * name share one `config`/color entry) and CSS-safe — they become part of a\n   * custom-property name. In multi-metric mode it names the band rather than the\n   * arc, so the legend and colors come from `dataKeys` instead.\n   */\n  nameKey: string;\n  /** Inner radius of the innermost arc. */\n  innerRadius?: number;\n  /** Outer radius of the outermost arc. */\n  outerRadius?: number;\n  /** Angle (degrees) the arcs sweep from. */\n  startAngle?: number;\n  /** Angle (degrees) the arcs sweep to (default is a full clockwise circle). */\n  endAngle?: number;\n  /**\n   * The value range the sweep represents, as `[min, max]`. Without it every arc\n   * is drawn relative to the largest value in the data — so a **single** value\n   * always fills the whole sweep, which is never what a gauge means. Set it to\n   * the metric's own scale (e.g. `[0, 100]` for a percentage) and each arc\n   * becomes that fraction of the sweep, over the `showBackground` track.\n   */\n  valueDomain?: [number, number];\n  /** Corner radius on each arc's ends. */\n  cornerRadius?: number;\n  /**\n   * Horizontal center of the arcs, in px or a percentage of the width.\n   * Defaults to the middle (`50%`).\n   */\n  cx?: number | string;\n  /**\n   * Vertical center of the arcs, in px or a percentage of the height. Defaults to\n   * the middle (`50%`) — worth moving for a half-circle gauge, whose drawn half\n   * otherwise sits in the upper half of the surface.\n   */\n  cy?: number | string;\n  /** Thickness of each arc, in px. Omit to let the radii and the gaps size it. */\n  barSize?: number;\n  /** Gap between the arcs of different metrics in one band, in px. */\n  barGap?: number | string;\n  /** Gap between bands, in px or a percentage string. */\n  barCategoryGap?: number | string;\n  /**\n   * Smallest angle a non-zero arc may occupy, in degrees, so a tiny value stays\n   * visible (and hoverable). recharts applies the floor to a `0` as well, which\n   * reads as a small positive value — leave this unset when a metric can\n   * legitimately be zero.\n   */\n  minAngle?: number;\n  /** Plot-area margin, in px. Omit to use recharts' default (5 on every side). */\n  margin?: { top?: number; right?: number; bottom?: number; left?: number };\n  /**\n   * Draw the gauge's ring as this many equal segments, notched apart — the\n   * segmented-gauge look. Applies to a **single-value gauge** only and needs\n   * `valueDomain` to know what a full ring means. Anything that isn't one — more\n   * than one row, `dataKeys` set, fewer than two segments, or a `dataKey` value\n   * that isn't a number (a stringified `\"29\"` off an API) — falls back to the\n   * normal concentric arcs, legend included, rather than erroring.\n   *\n   * The ring is then synthetic geometry rather than data rows, so the arc labels\n   * and the legend are suppressed: put the readout in `centerLabel`. The tooltip\n   * stays, and reads the metric (with the `valueDomain` maximum when there is\n   * one) wherever on the ring it is hovered. `showBackground` is redundant too —\n   * the unreached segments *are* the track.\n   */\n  segments?: number;\n  /** Gap between a segmented gauge's segments, in degrees. Defaults to `3`. */\n  segmentGap?: number;\n  /** Render a muted background track behind each arc. */\n  showBackground?: boolean;\n  /** Draw the concentric polar grid behind the arcs. */\n  showPolarGrid?: boolean;\n  /**\n   * Custom content for the hole at the center — a headline `value` and/or a\n   * `label` caption, stacked and centered. Needs an `innerRadius` big enough to\n   * hold the text; it is not clipped to the hole.\n   */\n  centerLabel?: RadialBarChartCenterLabel;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Format each arc's value in the list legend. In single-metric mode each arc\n   * row gets its formatted value next to its label; in multi-metric mode values\n   * are per-row (not per-series) so this is ignored.\n   */\n  legendValueFormatter?: (value: string | number) => string;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-arc rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   *\n   * On a segmented gauge it takes over from the built-in reading, and the payload\n   * it receives is the ring's synthetic pieces (`seg-2-track`, a length in\n   * degrees) rather than data rows — read the metric off `payload[0].payload`.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n  /**\n   * Position of the value labels when `showLabels` is on. Defaults to\n   * `insideStart` — the labels sit inside each arc, and therefore render in the\n   * on-fill label token so they stay legible over the arc colour.\n   */\n  labelPosition?: PolarLabelPosition;\n  /**\n   * What each data label reads when `showLabels` is on — the value alone (the\n   * default), or the arc's name and its value. The name is the row's `nameKey`\n   * value, or the metric's `config` label in multi-metric mode.\n   */\n  labelFormat?: RadialBarChartLabelFormat;\n}\n\nconst RadialBarChart = React.forwardRef<HTMLDivElement, RadialBarChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      dataKey,\n      dataKeys,\n      nameKey,\n      innerRadius = 20,\n      outerRadius = 60,\n      startAngle = 90,\n      endAngle = -270,\n      valueDomain,\n      cornerRadius = 4,\n      cx,\n      cy,\n      barSize,\n      barGap,\n      barCategoryGap,\n      minAngle,\n      margin,\n      segments,\n      segmentGap = SEGMENT_GAP,\n      showBackground = true,\n      showPolarGrid = false,\n      centerLabel,\n      showTooltip = true,\n      showLegend = true,\n      legendValueFormatter,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      showLabels = false,\n      labelPosition,\n      labelFormat = 'value',\n      labelFormatter,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    const arcLabelPosition = labelPosition ?? 'insideStart';\n    const isMultiMetric = !!dataKeys?.length;\n    // A segmented ring is one metric cut into pieces, so it only means anything\n    // for a single-row, single-metric chart.\n    const isSegmented =\n      segments != null &&\n      segments > 1 &&\n      !isMultiMetric &&\n      data.length === 1 &&\n      typeof data[0][dataKey] === 'number';\n    const seriesKeys = isMultiMetric ? dataKeys! : [dataKey];\n    // Stable across renders so the memoized legend content below keeps its\n    // identity; `seriesKeys` itself is a fresh array every render.\n    const legendKeys = React.useMemo(\n      () => (dataKeys?.length ? dataKeys : [dataKey]),\n      [dataKeys, dataKey]\n    );\n    const sweep = Math.abs(endAngle - startAngle);\n    const ringSegments = isSegmented\n      ? radialBarChartSegments({\n          value: data[0][dataKey] as number,\n          // Without a domain a lone value is its own maximum, so the ring fills.\n          domain: valueDomain ?? [0, data[0][dataKey] as number],\n          segments: segments!,\n          gap: segmentGap,\n          sweep,\n          closed: sweep >= 360,\n        })\n      : [];\n\n    // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n    // hover resolves the arc color in the tooltip — recharts' RadialBar, like\n    // Funnel, carries no per-arc color on the tooltip payload item. Only in\n    // single-metric mode: with one color per *metric*, a row-level fill would\n    // paint every tooltip swatch the same.\n    const seriesData: RadialBarChartDatum[] = isMultiMetric\n      ? (data as RadialBarChartDatum[])\n      : data.map((row) => ({\n          ...row,\n          fill: `var(--color-${row[nameKey]})`,\n        }));\n\n    // Each piece of the ring becomes a synthetic series on the one row, measured\n    // in degrees — see `radialBarChartSegments`. Built from the raw row, *not*\n    // from `seriesData`: a row-level `fill` wins over a series' own `fill` in\n    // recharts, which would paint the track and the notches the arc's color.\n    const plotData: RadialBarChartDatum[] = isSegmented\n      ? [\n          {\n            ...data[0],\n            ...Object.fromEntries(ringSegments.map((s) => [s.key, s.degrees])),\n          },\n        ]\n      : seriesData;\n\n    // recharts measures the radial floor in degrees, then extends the arc by\n    // `mathSign(deltaAngle || minPointSize)`, where `deltaAngle` is the *arc's*\n    // own angular length (RadialBar.js). So for a non-zero arc the floor already\n    // grows along the arc's direction whatever sign it carries; the sign only\n    // decides which way an arc of exactly zero degrees grows. Carry the sweep's\n    // sign so that one grows forwards on a counter-clockwise chart too.\n    const minPointSize =\n      minAngle === undefined\n        ? undefined\n        : endAngle < startAngle\n          ? -minAngle\n          : minAngle;\n\n    // Resolve colors so the external list legend has the same values as the chart\n    // plot without needing to be inside ChartContainer's context.\n    const resolvedConfigForLegend = React.useMemo(\n      () => (showLegend ? resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE) : null),\n      [showLegend, config, palette]\n    );\n    const rightLegendPayload: LegendPayload[] = React.useMemo(() => {\n      if (!resolvedConfigForLegend) return [];\n      if (isMultiMetric) {\n        // Multi-metric: one entry per dataKey. No per-series row value is\n        // meaningful (each metric spans multiple rows), so values are omitted.\n        return legendKeys.map((key) => ({\n          value: key,\n          dataKey: key,\n          color: resolvedConfigForLegend[key]?.color ?? `var(--color-${key})`,\n          type: 'rect' as const,\n          payload: {} as Record<string, unknown>,\n        }));\n      }\n      // Single-metric: one entry per data row.\n      return data.map((row) => ({\n        value: String(row[nameKey]),\n        dataKey: nameKey,\n        color:\n          resolvedConfigForLegend[String(row[nameKey])]?.color ??\n          `var(--color-${String(row[nameKey])})`,\n        type: 'rect' as const,\n        payload: row as Record<string, unknown>,\n      }));\n    }, [resolvedConfigForLegend, isMultiMetric, legendKeys, data, nameKey]);\n\n    const hasLegend = showLegend && !isSegmented && !!resolvedConfigForLegend;\n\n    // The built-in tooltip reading, which each mapping composes differently: a\n    // segmented ring rebuilds it from the data row, multi-metric renames the\n    // header after the band, and the default mapping reads the hovered arc.\n    const getDefaultTooltipContent = () => {\n      if (isSegmented) {\n        return (\n          <RadialBarChartSegmentedTooltipContent\n            config={config}\n            row={data[0]}\n            nameKey={nameKey}\n            dataKey={dataKey}\n            domainMax={valueDomain?.[1]}\n          />\n        );\n      }\n\n      if (isMultiMetric) {\n        return (\n          <ChartTooltipContent\n            labelFormatter={(_, payload) =>\n              radialBarChartBandName(\n                payload?.[0]?.payload as RadialBarChartDatum | undefined,\n                nameKey\n              )\n            }\n          />\n        );\n      }\n\n      return <ChartTooltipContent nameKey={nameKey} hideLabel />;\n    };\n\n    // Shared recharts chart composition (used in both layout modes).\n    const radialChartContent = (\n      <RechartsRadialBarChart\n        data={plotData}\n        // Only meaningful for the single-metric mapping; in multi-metric and\n        // segmented mode each <RadialBar> carries its own key and the scale\n        // spans them all.\n        dataKey={isMultiMetric || isSegmented ? undefined : dataKey}\n        cx={cx}\n        cy={cy}\n        innerRadius={innerRadius}\n        outerRadius={outerRadius}\n        startAngle={startAngle}\n        endAngle={endAngle}\n        barSize={barSize}\n        barGap={barGap}\n        barCategoryGap={barCategoryGap}\n        margin={margin ?? { top: 0, right: 0, bottom: 0, left: 0 }}\n      >\n        {showPolarGrid && (\n          <PolarGrid gridType=\"circle\" radialLines={false} />\n        )}\n        {(valueDomain || isSegmented) && (\n          // The angular scale itself, not chrome: it maps a value onto a\n          // fraction of the sweep. Ticks/axis line stay off — the arcs and\n          // the optional center readout are the readout. A segmented ring is\n          // already measured in degrees, so its scale *is* the sweep.\n          <PolarAngleAxis\n            type=\"number\"\n            domain={isSegmented ? [0, sweep] : valueDomain}\n            tick={false}\n            axisLine={false}\n          />\n        )}\n        {showTooltip && (\n          <ChartTooltip\n            // The hover cursor marks which band of the angular axis is\n            // active, which on a segmented ring is one metric either way —\n            // it just draws a hairline across the gauge.\n            cursor={isSegmented ? false : undefined}\n            content={tooltipContent ?? getDefaultTooltipContent()}\n          />\n        )}\n        {isSegmented ? (\n          <RadialBarChartSegmentedSeries\n            ringSegments={ringSegments}\n            row={data[0]}\n            nameKey={nameKey}\n            cornerRadius={cornerRadius}\n            animation={animation}\n            centerLabel={centerLabel}\n          />\n        ) : (\n          <RadialBarChartSeries\n            seriesKeys={seriesKeys}\n            seriesData={seriesData}\n            isMultiMetric={isMultiMetric}\n            config={config}\n            nameKey={nameKey}\n            showBackground={showBackground}\n            cornerRadius={cornerRadius}\n            minPointSize={minPointSize}\n            animation={animation}\n            centerLabel={centerLabel}\n            showLabels={showLabels}\n            labelPosition={arcLabelPosition}\n            labelFormat={labelFormat}\n            labelFormatter={labelFormatter}\n          />\n        )}\n      </RechartsRadialBarChart>\n    );\n\n    const chartDivSize =\n      showLabels && (arcLabelPosition === 'outside' || arcLabelPosition === 'end')\n        ? 'size-[200px]'\n        : 'size-[120px]';\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-row items-center gap-4', !hasLegend && 'justify-center', className)}\n        {...props}\n      >\n        <div className={cn(chartDivSize, 'shrink-0')}>\n          <ChartContainer config={config} palette={palette} className=\"size-full\">\n            {radialChartContent}\n          </ChartContainer>\n        </div>\n        {showLegend && !isSegmented && resolvedConfigForLegend && (\n          <ChartLegendContent\n            variant=\"list\"\n            payload={rightLegendPayload}\n            config={resolvedConfigForLegend}\n            nameKey={isMultiMetric ? undefined : nameKey}\n            valueKey={isMultiMetric ? undefined : dataKey}\n            valueFormatter={isMultiMetric ? undefined : legendValueFormatter}\n            className=\"min-w-0 flex-1\"\n          />\n        )}\n      </div>\n    );\n  }\n);\nRadialBarChart.displayName = 'RadialBarChart';\n\nexport { RadialBarChart };\n"],"mappings":"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"}
+{"version":3,"file":"radial-bar-chart.js","names":[],"sources":["../../../../src/components/ui/radial-bar-chart/radial-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Cell,\n  Label,\n  LabelList,\n  PolarAngleAxis,\n  PolarGrid,\n  RadialBar,\n  RadialBarChart as RechartsRadialBarChart,\n} from 'recharts';\n\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveChartColors,\n  resolveLabelFillClass,\n  CHART_DEFAULT_PALETTE,\n  CHART_LABEL_FONT_SIZE,\n  type ChartConfig,\n  type ChartPalette,\n  type ChartAnimationProps,\n  type ChartDataLabelProps,\n  type ChartTooltipContentProps,\n  type PolarLabelPosition,\n  toCssKey,\n  type ResolvedAnimation,\n  type TickFormatter,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives (a polar/radial\n// type). Rows become concentric arcs sized by `dataKey`, each colored from its\n// `--color-<name>` var; `dataKeys` switches to one arc per metric instead. Like\n// ScatterChart/ComposedChart there's no CVA variant: a radial bar's\n// expressiveness is geometry (angles/radii, plain props) and the data mapping,\n// not a visual \"mode\". The angular sweep is exposed as startAngle/endAngle props\n// so a caller can build a gauge or a full ring.\n\n/** Row-per-arc datum: the `nameKey` label plus each metric's numeric value. */\ntype RadialBarChartDatum = Record<string, string | number>;\n\n/** What an arc's data label reads. */\nexport type RadialBarChartLabelFormat = 'value' | 'name-value';\n\nexport interface RadialBarChartCenterLabel {\n  // Rendered as SVG <text>, which only lays out text — hence string | number,\n  // not ReactNode.\n  /** Headline metric rendered large in the hole (e.g. the gauge's value). */\n  value?: string | number;\n  /** Caption rendered under the value. */\n  label?: string | number;\n}\n\n/**\n * The readout in the hole at the centre of the arcs — a headline value over a\n * caption. Rendered as a recharts `<Label>`, which is what supplies the polar\n * viewBox the text centres itself on.\n *\n * There is one readout for the whole chart, so it hangs off the first series\n * drawn — every series shares the same viewBox.\n */\nfunction RadialBarChartCenterLabelContent({\n  centerLabel,\n}: {\n  centerLabel: RadialBarChartCenterLabel;\n}) {\n  return (\n    <Label\n      content={({ viewBox }) => {\n        if (!viewBox || !('cx' in viewBox)) return null;\n        const { cx: centerX = 0, cy: centerY = 0 } = viewBox as {\n          cx?: number;\n          cy?: number;\n        };\n        const hasValue = centerLabel.value != null;\n        const hasLabel = centerLabel.label != null;\n        // Straddle the centre when both lines show, so the value + label block\n        // is centered as a whole (not just the value).\n        const both = hasValue && hasLabel;\n        return (\n          <g>\n            {hasValue && (\n              <text\n                x={centerX}\n                y={both ? centerY - 10 : centerY}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                className=\"fill-foreground text-2xl font-semibold\"\n              >\n                {centerLabel.value}\n              </text>\n            )}\n            {hasLabel && (\n              <text\n                x={centerX}\n                y={both ? centerY + 13 : centerY}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                className=\"fill-muted-foreground text-sm\"\n              >\n                {centerLabel.label}\n              </text>\n            )}\n          </g>\n        );\n      }}\n    />\n  );\n}\n\n/**\n * Compose one arc's data-label text. Exported for unit tests; not part of the\n * package's public API.\n *\n * `labelFormatter` only ever formats the numeric part, so a chart's labels and\n * its tooltip stay in the same units under either format. A nullish value yields\n * an empty label, which recharts renders as no `<text>` at all.\n */\nexport function radialBarChartLabelText(options: {\n  format: RadialBarChartLabelFormat;\n  name: string | number | undefined;\n  value: string | number | undefined;\n  formatter?: TickFormatter;\n}): string {\n  const { format, name, value, formatter } = options;\n  if (value == null) return '';\n  const valueText = formatter ? formatter(value) : String(value);\n  return format === 'name-value' && name != null\n    ? `${name}: ${valueText}`\n    : valueText;\n}\n\n/** One piece of a segmented gauge's ring: a length in degrees and what it is. */\nexport interface RadialBarChartSegment {\n  /** Synthetic series key — stable for a given (index, kind). */\n  key: string;\n  /** Angular length of the piece, in degrees. */\n  degrees: number;\n  /** `value` is the metric, `track` the unreached remainder, `gap` the notch. */\n  kind: 'value' | 'track' | 'gap';\n}\n\n/** Fallback gap between a segmented gauge's segments, in degrees. */\nconst SEGMENT_GAP = 3;\n\n/**\n * Cut a gauge's sweep into equal segments separated by gaps, and split the\n * segment the value ends inside into its reached and unreached parts. Exported\n * for unit tests; not part of the package's public API.\n *\n * Lengths come back in **degrees**, which is what lets the ring be built as one\n * stack of synthetic series over a `[0, sweep]` angular scale: recharts lays\n * stacked radial bars out sequentially along the angle, so a transparent series\n * between two colored ones reads as a real notch in the ring. A `gap` that\n * would leave no room for the segments themselves is clamped.\n */\nexport function radialBarChartSegments(options: {\n  value: number;\n  domain: [number, number];\n  segments: number;\n  gap: number;\n  /** Absolute sweep of the chart, in degrees. */\n  sweep: number;\n  /** A full-circle sweep also needs a gap between the last segment and the first. */\n  closed: boolean;\n}): RadialBarChartSegment[] {\n  const { value, domain, segments, sweep, closed } = options;\n  const gapCount = closed ? segments : segments - 1;\n  // Leave at least half the sweep for the segments, however wide a gap is asked\n  // for — an all-gap ring would render as nothing at all. A negative gap would\n  // stretch the pieces past the sweep and overlap them, so it floors at zero.\n  const gap =\n    gapCount > 0\n      ? Math.min(Math.max(options.gap, 0), sweep / (2 * gapCount))\n      : 0;\n  const segmentDegrees = (sweep - gap * gapCount) / segments;\n  const [min, max] = domain;\n  const span = max - min;\n  // A domain with no span (`[n, n]`) or an inverted one (`[max, min]`) cannot\n  // place a value on the ring at all, so there is no fraction to draw and the\n  // ring stays empty. It deliberately does not fall back to comparing the value\n  // against zero: that reported a *full* ring for `{ value: 5, domain: [100,\n  // 100] }`, i.e. claimed completion the data never supported. For a gauge,\n  // under-reading a domain that says nothing is the safe direction.\n  const fraction =\n    span > 0 ? Math.min(Math.max((value - min) / span, 0), 1) : 0;\n  // The value maps onto the *drawn* ring, so the gaps never eat into it.\n  let remainingValue = fraction * segmentDegrees * segments;\n\n  const pieces: RadialBarChartSegment[] = [];\n  for (let index = 0; index < segments; index++) {\n    const reached = Math.min(Math.max(remainingValue, 0), segmentDegrees);\n    remainingValue -= reached;\n    // Both halves are always emitted, including at zero length: a stable key set\n    // keeps recharts' series identities steady as the value changes.\n    pieces.push({ key: `seg-${index}-value`, degrees: reached, kind: 'value' });\n    pieces.push({\n      key: `seg-${index}-track`,\n      degrees: segmentDegrees - reached,\n      kind: 'track',\n    });\n    if (gap > 0 && (closed || index < segments - 1)) {\n      pieces.push({ key: `seg-${index}-gap`, degrees: gap, kind: 'gap' });\n    }\n  }\n  return pieces;\n}\n\n/**\n * Fill for one piece of a segmented gauge's ring. Exported for unit tests and so\n * the forced-open tooltip story can build a ring from the real implementation\n * rather than a copy of it; not part of the package's public API.\n */\nexport function radialBarChartSegmentFill(\n  kind: RadialBarChartSegment['kind'],\n  colorName: string | number\n): string {\n  if (kind === 'gap') return 'transparent';\n  // The unreached remainder plays the part `showBackground`'s track plays on a\n  // continuous arc, so it takes the same muted surface.\n  return kind === 'track'\n    ? 'var(--ui-border-on-status-neutral)'\n    : `var(--color-${toCssKey(String(colorName))})`;\n}\n\n/**\n * What a segmented gauge's tooltip reads. Exported for unit tests; not part of\n * the package's public API.\n *\n * A segmented ring's series are pieces of geometry, so recharts would offer the\n * hovered piece's own name and length (\"seg-3-value\", 41.2°). Hovering anywhere\n * on the ring should read the metric instead, so the reading is rebuilt from the\n * data row.\n */\nexport function radialBarChartSegmentedReading(options: {\n  config: ChartConfig;\n  row: RadialBarChartDatum;\n  nameKey: string;\n  dataKey: string;\n  /** The `valueDomain` maximum, when the gauge has one. */\n  domainMax?: number;\n}): { colorName: string; label: React.ReactNode; valueText: string } {\n  const { config, row, nameKey, dataKey, domainMax } = options;\n  const colorName = String(row[nameKey]);\n  const value = row[dataKey];\n  const valueText =\n    typeof value === 'number' ? value.toLocaleString() : String(value ?? '');\n  return {\n    colorName,\n    label: config[colorName]?.label ?? colorName,\n    // The gauge's scale is the other half of the reading, so a known maximum\n    // comes along: \"29 / 38\", not a bare \"29\".\n    valueText:\n      domainMax == null\n        ? valueText\n        : `${valueText} / ${domainMax.toLocaleString()}`,\n  };\n}\n\n/**\n * The tooltip a segmented gauge shows — the same swatch/name/value layout the\n * default `ChartTooltipContent` row uses, dot included, over the reading from\n * `radialBarChartSegmentedReading`. Exported for the forced-open\n * visual-regression story; not part of the package's public API.\n *\n * `payload` is trimmed to one row: a radial tooltip is axis-shared and collects a\n * row from every series — two dozen identical rows for one metric.\n * (`tooltipType=\"none\"` only tags them, and scoping the tooltip to the hovered\n * item instead would drop it in the corner — unlike Pie/Bar sectors, a RadialBar\n * sector carries no tooltip coordinate.)\n *\n * A real component rather than a closure so it can be handed to `ChartTooltip`\n * as an *element*: recharts `cloneElement`s an element but `createElement`s a\n * function, and a closure rebuilt each render is a new element *type* — which\n * remounts the tooltip on every parent render instead of updating it.\n */\nexport function RadialBarChartSegmentedTooltipContent({\n  active,\n  payload,\n  ...reading\n}: {\n  active?: boolean;\n  // Loosely typed on purpose: recharts' own payload generics are wider than the\n  // shared `ChartTooltipContentProps` accepts, and only the row count matters.\n  payload?: readonly unknown[];\n  config: ChartConfig;\n  row: RadialBarChartDatum;\n  nameKey: string;\n  dataKey: string;\n  domainMax?: number;\n}) {\n  const { colorName, label, valueText } =\n    radialBarChartSegmentedReading(reading);\n\n  return (\n    <ChartTooltipContent\n      active={active}\n      payload={payload?.slice(0, 1) as ChartTooltipContentProps['payload']}\n      hideLabel\n      formatter={() => (\n        <>\n          <div\n            className=\"h-2.5 w-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: `var(--color-${toCssKey(colorName)})` }}\n          />\n          <div className=\"flex flex-1 items-center justify-between gap-2 leading-none\">\n            <span className=\"text-muted-foreground\">{label}</span>\n            <span className=\"font-medium tabular-nums text-foreground\">\n              {valueText}\n            </span>\n          </div>\n        </>\n      )}\n    />\n  );\n}\n\n/**\n * The band a multi-metric tooltip's header names. Exported for unit tests; not\n * part of the package's public API.\n *\n * Each tooltip row is one metric, so the header names the band the hovered arc\n * belongs to. recharts' own label is the radius-axis index, which reads as a\n * bare number.\n */\nexport function radialBarChartBandName(\n  row: RadialBarChartDatum | undefined,\n  nameKey: string\n): string {\n  const name = row?.[nameKey];\n  return name == null ? '' : String(name);\n}\n\n/**\n * What an arc's data label calls the arc: the row's own `nameKey` value, or — in\n * multi-metric mode, where one arc *is* one metric — that metric's `config` label.\n */\nfunction radialBarChartArcName(options: {\n  key: string;\n  row: RadialBarChartDatum | undefined;\n  isMultiMetric: boolean;\n  nameKey: string;\n  config: ChartConfig;\n}): string | number | undefined {\n  const { key, row, isMultiMetric, nameKey, config } = options;\n  if (!isMultiMetric) return row?.[nameKey];\n  // ChartConfig labels are ReactNode; only a plain string/number can go into an\n  // SVG <text>.\n  const label = config[key]?.label;\n  return typeof label === 'string' || typeof label === 'number' ? label : key;\n}\n\n/**\n * The default mapping's arcs: one `RadialBar` per series — one for the single\n * `dataKey`, or one per `dataKeys` entry in multi-metric mode — drawn\n * concentrically.\n *\n * recharts collects its graphical items from the store (each `RadialBar`\n * registers itself on render) rather than by scanning the chart's children for\n * their types, so grouping them inside a component of our own is invisible to it.\n * The `Cell`s stay direct children of their `RadialBar`, which *does* read its own\n * children by type.\n */\nfunction RadialBarChartSeries({\n  seriesKeys,\n  seriesData,\n  isMultiMetric,\n  config,\n  nameKey,\n  showBackground,\n  cornerRadius,\n  minPointSize,\n  animation,\n  centerLabel,\n  showLabels,\n  labelPosition,\n  labelFormat,\n  labelFormatter,\n}: {\n  seriesKeys: string[];\n  seriesData: RadialBarChartDatum[];\n  isMultiMetric: boolean;\n  config: ChartConfig;\n  nameKey: string;\n  showBackground: boolean;\n  cornerRadius: number;\n  minPointSize: number | undefined;\n  animation: ResolvedAnimation;\n  centerLabel: RadialBarChartCenterLabel | undefined;\n  showLabels: boolean;\n  labelPosition: PolarLabelPosition;\n  labelFormat: RadialBarChartLabelFormat;\n  labelFormatter?: TickFormatter;\n}) {\n  return seriesKeys.map((key, seriesIndex) => (\n    <RadialBar\n      key={key}\n      dataKey={key}\n      fill={isMultiMetric ? `var(--color-${toCssKey(key)})` : undefined}\n      background={showBackground ? { fill: 'var(--ui-border-on-status-neutral)' } : false}\n      cornerRadius={cornerRadius}\n      minPointSize={minPointSize}\n      {...animation}\n    >\n      {!isMultiMetric &&\n        seriesData.map((entry, index) => (\n          // Keyed by index, not the name: two arcs could share a nameKey\n          // value, which would collide as a React key. Same-named arcs\n          // intentionally share a color/config entry via `--color-<name>`.\n          <Cell key={index} fill={`var(--color-${toCssKey(String(entry[nameKey]))})`} />\n        ))}\n      {seriesIndex === 0 && centerLabel && (\n        <RadialBarChartCenterLabelContent centerLabel={centerLabel} />\n      )}\n      {showLabels && (\n        <LabelList\n          // `valueAccessor` rather than `dataKey`: the label text can\n          // carry the arc's name, which only the whole row (single\n          // metric) or the metric's config entry can supply. recharts\n          // ignores the accessor when a dataKey is set, so the two\n          // can't be combined.\n          valueAccessor={(entry) =>\n            radialBarChartLabelText({\n              format: labelFormat,\n              name: radialBarChartArcName({\n                key,\n                row: entry.payload as RadialBarChartDatum | undefined,\n                isMultiMetric,\n                nameKey,\n                config,\n              }),\n              value: entry.value as string | number | undefined,\n              formatter: labelFormatter,\n            })\n          }\n          position={labelPosition}\n          className={resolveLabelFillClass(labelPosition)}\n          fontSize={CHART_LABEL_FONT_SIZE}\n        />\n      )}\n    </RadialBar>\n  ));\n}\n\n/**\n * A segmented gauge's ring: the pieces from `radialBarChartSegments` as one stack\n * of synthetic series, so they lay out sequentially around the ring instead of\n * concentrically and the `gap` pieces read as notches.\n */\nfunction RadialBarChartSegmentedSeries({\n  ringSegments,\n  row,\n  nameKey,\n  cornerRadius,\n  animation,\n  centerLabel,\n}: {\n  ringSegments: RadialBarChartSegment[];\n  row: RadialBarChartDatum;\n  nameKey: string;\n  cornerRadius: number;\n  animation: ResolvedAnimation;\n  centerLabel: RadialBarChartCenterLabel | undefined;\n}) {\n  return ringSegments.map((segment, index) => (\n    <RadialBar\n      key={segment.key}\n      dataKey={segment.key}\n      stackId=\"segments\"\n      // The metric's name, so the hover has a row to key off at all\n      // (`ChartTooltipContent` keys its row off `name`).\n      name={String(row[nameKey])}\n      fill={radialBarChartSegmentFill(segment.kind, row[nameKey])}\n      cornerRadius={cornerRadius}\n      {...animation}\n    >\n      {index === 0 && centerLabel && (\n        <RadialBarChartCenterLabelContent centerLabel={centerLabel} />\n      )}\n    </RadialBar>\n  ));\n}\n\nexport interface RadialBarChartProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    ChartAnimationProps,\n    ChartDataLabelProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. */\n  data: ReadonlyArray<RadialBarChartDatum>;\n  /**\n   * Per-arc map of `label` / `icon` / `tone`, keyed by the arc's `nameKey` value\n   * — or, in multi-metric mode, by each `dataKeys` entry (imported from the\n   * shared `Chart` primitives). Turned into `--color-<name>` custom properties.\n   * Series take their colour from the container's `palette`; each entry maps a\n   * key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each arc. Ignored when `dataKeys` is set. */\n  dataKey: string;\n  /**\n   * Plot several metrics instead of one arc per row: one arc per key, colored and\n   * named from `config` keyed by the **key** (not by `nameKey`) — the same\n   * convention as the cartesian charts. Every metric shares one angular scale, so\n   * pair it with `valueDomain` when the metrics are measured against a known\n   * maximum. `nameKey` still names the band each metric's arc sits in.\n   */\n  dataKeys?: string[];\n  /**\n   * Label field that names each arc (drives the legend, tooltip, and\n   * `--color-<name>` lookup). Values should be unique per chart (arcs sharing a\n   * name share one `config`/color entry); they are sanitized automatically to a\n   * valid CSS custom-property fragment (CSS-safe values are preferred to avoid\n   * dev-mode warnings). In multi-metric mode it names the band rather than the\n   * arc, so the legend and colors come from `dataKeys` instead.\n   */\n  nameKey: string;\n  /** Inner radius of the innermost arc. */\n  innerRadius?: number;\n  /** Outer radius of the outermost arc. */\n  outerRadius?: number;\n  /** Angle (degrees) the arcs sweep from. */\n  startAngle?: number;\n  /** Angle (degrees) the arcs sweep to (default is a full clockwise circle). */\n  endAngle?: number;\n  /**\n   * The value range the sweep represents, as `[min, max]`. Without it every arc\n   * is drawn relative to the largest value in the data — so a **single** value\n   * always fills the whole sweep, which is never what a gauge means. Set it to\n   * the metric's own scale (e.g. `[0, 100]` for a percentage) and each arc\n   * becomes that fraction of the sweep, over the `showBackground` track.\n   */\n  valueDomain?: [number, number];\n  /** Corner radius on each arc's ends. */\n  cornerRadius?: number;\n  /**\n   * Horizontal center of the arcs, in px or a percentage of the width.\n   * Defaults to the middle (`50%`).\n   */\n  cx?: number | string;\n  /**\n   * Vertical center of the arcs, in px or a percentage of the height. Defaults to\n   * the middle (`50%`) — worth moving for a half-circle gauge, whose drawn half\n   * otherwise sits in the upper half of the surface.\n   */\n  cy?: number | string;\n  /** Thickness of each arc, in px. Omit to let the radii and the gaps size it. */\n  barSize?: number;\n  /** Gap between the arcs of different metrics in one band, in px. */\n  barGap?: number | string;\n  /** Gap between bands, in px or a percentage string. */\n  barCategoryGap?: number | string;\n  /**\n   * Smallest angle a non-zero arc may occupy, in degrees, so a tiny value stays\n   * visible (and hoverable). recharts applies the floor to a `0` as well, which\n   * reads as a small positive value — leave this unset when a metric can\n   * legitimately be zero.\n   */\n  minAngle?: number;\n  /** Plot-area margin, in px. Omit to use recharts' default (5 on every side). */\n  margin?: { top?: number; right?: number; bottom?: number; left?: number };\n  /**\n   * Draw the gauge's ring as this many equal segments, notched apart — the\n   * segmented-gauge look. Applies to a **single-value gauge** only and needs\n   * `valueDomain` to know what a full ring means. Anything that isn't one — more\n   * than one row, `dataKeys` set, fewer than two segments, or a `dataKey` value\n   * that isn't a number (a stringified `\"29\"` off an API) — falls back to the\n   * normal concentric arcs, legend included, rather than erroring.\n   *\n   * The ring is then synthetic geometry rather than data rows, so the arc labels\n   * and the legend are suppressed: put the readout in `centerLabel`. The tooltip\n   * stays, and reads the metric (with the `valueDomain` maximum when there is\n   * one) wherever on the ring it is hovered. `showBackground` is redundant too —\n   * the unreached segments *are* the track.\n   */\n  segments?: number;\n  /** Gap between a segmented gauge's segments, in degrees. Defaults to `3`. */\n  segmentGap?: number;\n  /** Render a muted background track behind each arc. */\n  showBackground?: boolean;\n  /** Draw the concentric polar grid behind the arcs. */\n  showPolarGrid?: boolean;\n  /**\n   * Custom content for the hole at the center — a headline `value` and/or a\n   * `label` caption, stacked and centered. Needs an `innerRadius` big enough to\n   * hold the text; it is not clipped to the hole.\n   */\n  centerLabel?: RadialBarChartCenterLabel;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Format each arc's value in the list legend. In single-metric mode each arc\n   * row gets its formatted value next to its label; in multi-metric mode values\n   * are per-row (not per-series) so this is ignored.\n   */\n  legendValueFormatter?: (value: string | number) => string;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-arc rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   *\n   * On a segmented gauge it takes over from the built-in reading, and the payload\n   * it receives is the ring's synthetic pieces (`seg-2-track`, a length in\n   * degrees) rather than data rows — read the metric off `payload[0].payload`.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n  /**\n   * Position of the value labels when `showLabels` is on. Defaults to\n   * `insideStart` — the labels sit inside each arc, and therefore render in the\n   * on-fill label token so they stay legible over the arc colour.\n   */\n  labelPosition?: PolarLabelPosition;\n  /**\n   * What each data label reads when `showLabels` is on — the value alone (the\n   * default), or the arc's name and its value. The name is the row's `nameKey`\n   * value, or the metric's `config` label in multi-metric mode.\n   */\n  labelFormat?: RadialBarChartLabelFormat;\n}\n\nconst RadialBarChart = React.forwardRef<HTMLDivElement, RadialBarChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      dataKey,\n      dataKeys,\n      nameKey,\n      innerRadius = 20,\n      outerRadius = 60,\n      startAngle = 90,\n      endAngle = -270,\n      valueDomain,\n      cornerRadius = 4,\n      cx,\n      cy,\n      barSize,\n      barGap,\n      barCategoryGap,\n      minAngle,\n      margin,\n      segments,\n      segmentGap = SEGMENT_GAP,\n      showBackground = true,\n      showPolarGrid = false,\n      centerLabel,\n      showTooltip = true,\n      showLegend = true,\n      legendValueFormatter,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      showLabels = false,\n      labelPosition,\n      labelFormat = 'value',\n      labelFormatter,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    const arcLabelPosition = labelPosition ?? 'insideStart';\n    const isMultiMetric = !!dataKeys?.length;\n    // A segmented ring is one metric cut into pieces, so it only means anything\n    // for a single-row, single-metric chart.\n    const isSegmented =\n      segments != null &&\n      segments > 1 &&\n      !isMultiMetric &&\n      data.length === 1 &&\n      typeof data[0][dataKey] === 'number';\n    const seriesKeys = isMultiMetric ? dataKeys! : [dataKey];\n    // Stable across renders so the memoized legend content below keeps its\n    // identity; `seriesKeys` itself is a fresh array every render.\n    const legendKeys = React.useMemo(\n      () => (dataKeys?.length ? dataKeys : [dataKey]),\n      [dataKeys, dataKey]\n    );\n    const sweep = Math.abs(endAngle - startAngle);\n    const ringSegments = isSegmented\n      ? radialBarChartSegments({\n          value: data[0][dataKey] as number,\n          // Without a domain a lone value is its own maximum, so the ring fills.\n          domain: valueDomain ?? [0, data[0][dataKey] as number],\n          segments: segments!,\n          gap: segmentGap,\n          sweep,\n          closed: sweep >= 360,\n        })\n      : [];\n\n    // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n    // hover resolves the arc color in the tooltip — recharts' RadialBar, like\n    // Funnel, carries no per-arc color on the tooltip payload item. Only in\n    // single-metric mode: with one color per *metric*, a row-level fill would\n    // paint every tooltip swatch the same.\n    const seriesData: RadialBarChartDatum[] = isMultiMetric\n      ? (data as RadialBarChartDatum[])\n      : data.map((row) => ({\n          ...row,\n          fill: `var(--color-${toCssKey(String(row[nameKey]))})`,\n        }));\n\n    // Each piece of the ring becomes a synthetic series on the one row, measured\n    // in degrees — see `radialBarChartSegments`. Built from the raw row, *not*\n    // from `seriesData`: a row-level `fill` wins over a series' own `fill` in\n    // recharts, which would paint the track and the notches the arc's color.\n    const plotData: RadialBarChartDatum[] = isSegmented\n      ? [\n          {\n            ...data[0],\n            ...Object.fromEntries(ringSegments.map((s) => [s.key, s.degrees])),\n          },\n        ]\n      : seriesData;\n\n    // recharts measures the radial floor in degrees, then extends the arc by\n    // `mathSign(deltaAngle || minPointSize)`, where `deltaAngle` is the *arc's*\n    // own angular length (RadialBar.js). So for a non-zero arc the floor already\n    // grows along the arc's direction whatever sign it carries; the sign only\n    // decides which way an arc of exactly zero degrees grows. Carry the sweep's\n    // sign so that one grows forwards on a counter-clockwise chart too.\n    const minPointSize =\n      minAngle === undefined\n        ? undefined\n        : endAngle < startAngle\n          ? -minAngle\n          : minAngle;\n\n    // Resolve colors so the external list legend has the same values as the chart\n    // plot without needing to be inside ChartContainer's context.\n    const resolvedConfigForLegend = React.useMemo(\n      () => (showLegend ? resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE) : null),\n      [showLegend, config, palette]\n    );\n    const rightLegendPayload: LegendPayload[] = React.useMemo(() => {\n      if (!resolvedConfigForLegend) return [];\n      if (isMultiMetric) {\n        // Multi-metric: one entry per dataKey. No per-series row value is\n        // meaningful (each metric spans multiple rows), so values are omitted.\n        return legendKeys.map((key) => ({\n          value: key,\n          dataKey: key,\n          color: resolvedConfigForLegend[key]?.color ?? `var(--color-${toCssKey(key)})`,\n          type: 'rect' as const,\n          payload: {} as Record<string, unknown>,\n        }));\n      }\n      // Single-metric: one entry per data row.\n      return data.map((row) => ({\n        value: String(row[nameKey]),\n        dataKey: nameKey,\n        color:\n          resolvedConfigForLegend[String(row[nameKey])]?.color ??\n          `var(--color-${toCssKey(String(row[nameKey]))})`,\n        type: 'rect' as const,\n        payload: row as Record<string, unknown>,\n      }));\n    }, [resolvedConfigForLegend, isMultiMetric, legendKeys, data, nameKey]);\n\n    const hasLegend = showLegend && !isSegmented && !!resolvedConfigForLegend;\n\n    // The built-in tooltip reading, which each mapping composes differently: a\n    // segmented ring rebuilds it from the data row, multi-metric renames the\n    // header after the band, and the default mapping reads the hovered arc.\n    const getDefaultTooltipContent = () => {\n      if (isSegmented) {\n        return (\n          <RadialBarChartSegmentedTooltipContent\n            config={config}\n            row={data[0]}\n            nameKey={nameKey}\n            dataKey={dataKey}\n            domainMax={valueDomain?.[1]}\n          />\n        );\n      }\n\n      if (isMultiMetric) {\n        return (\n          <ChartTooltipContent\n            labelFormatter={(_, payload) =>\n              radialBarChartBandName(\n                payload?.[0]?.payload as RadialBarChartDatum | undefined,\n                nameKey\n              )\n            }\n          />\n        );\n      }\n\n      return <ChartTooltipContent nameKey={nameKey} hideLabel />;\n    };\n\n    // Shared recharts chart composition (used in both layout modes).\n    const radialChartContent = (\n      <RechartsRadialBarChart\n        data={plotData}\n        // Only meaningful for the single-metric mapping; in multi-metric and\n        // segmented mode each <RadialBar> carries its own key and the scale\n        // spans them all.\n        dataKey={isMultiMetric || isSegmented ? undefined : dataKey}\n        cx={cx}\n        cy={cy}\n        innerRadius={innerRadius}\n        outerRadius={outerRadius}\n        startAngle={startAngle}\n        endAngle={endAngle}\n        barSize={barSize}\n        barGap={barGap}\n        barCategoryGap={barCategoryGap}\n        margin={margin ?? { top: 0, right: 0, bottom: 0, left: 0 }}\n      >\n        {showPolarGrid && (\n          <PolarGrid gridType=\"circle\" radialLines={false} />\n        )}\n        {(valueDomain || isSegmented) && (\n          // The angular scale itself, not chrome: it maps a value onto a\n          // fraction of the sweep. Ticks/axis line stay off — the arcs and\n          // the optional center readout are the readout. A segmented ring is\n          // already measured in degrees, so its scale *is* the sweep.\n          <PolarAngleAxis\n            type=\"number\"\n            domain={isSegmented ? [0, sweep] : valueDomain}\n            tick={false}\n            axisLine={false}\n          />\n        )}\n        {showTooltip && (\n          <ChartTooltip\n            // The hover cursor marks which band of the angular axis is\n            // active, which on a segmented ring is one metric either way —\n            // it just draws a hairline across the gauge.\n            cursor={isSegmented ? false : undefined}\n            content={tooltipContent ?? getDefaultTooltipContent()}\n          />\n        )}\n        {isSegmented ? (\n          <RadialBarChartSegmentedSeries\n            ringSegments={ringSegments}\n            row={data[0]}\n            nameKey={nameKey}\n            cornerRadius={cornerRadius}\n            animation={animation}\n            centerLabel={centerLabel}\n          />\n        ) : (\n          <RadialBarChartSeries\n            seriesKeys={seriesKeys}\n            seriesData={seriesData}\n            isMultiMetric={isMultiMetric}\n            config={config}\n            nameKey={nameKey}\n            showBackground={showBackground}\n            cornerRadius={cornerRadius}\n            minPointSize={minPointSize}\n            animation={animation}\n            centerLabel={centerLabel}\n            showLabels={showLabels}\n            labelPosition={arcLabelPosition}\n            labelFormat={labelFormat}\n            labelFormatter={labelFormatter}\n          />\n        )}\n      </RechartsRadialBarChart>\n    );\n\n    const chartDivSize =\n      showLabels && (arcLabelPosition === 'outside' || arcLabelPosition === 'end')\n        ? 'size-[200px]'\n        : 'size-[120px]';\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-row items-center gap-4', !hasLegend && 'justify-center', className)}\n        {...props}\n      >\n        <div className={cn(chartDivSize, 'shrink-0')}>\n          <ChartContainer config={config} palette={palette} className=\"size-full\">\n            {radialChartContent}\n          </ChartContainer>\n        </div>\n        {showLegend && !isSegmented && resolvedConfigForLegend && (\n          <ChartLegendContent\n            variant=\"list\"\n            payload={rightLegendPayload}\n            config={resolvedConfigForLegend}\n            nameKey={isMultiMetric ? undefined : nameKey}\n            valueKey={isMultiMetric ? undefined : dataKey}\n            valueFormatter={isMultiMetric ? undefined : legendValueFormatter}\n            className=\"min-w-0 flex-1\"\n          />\n        )}\n      </div>\n    );\n  }\n);\nRadialBarChart.displayName = 'RadialBarChart';\n\nexport { RadialBarChart };\n"],"mappings":"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"}

package/dist/components/ui/sankey-chart/sankey-chart.js

@@ -1,119 +1,119 @@
 "use client";
 import { cn as e } from "../../../lib/utils.js";
 import { CHART_DEFAULT_PALETTE as t } from "../chart/chart-palette.js";
-import { ChartContainer as n, ChartStyle as r, ChartTooltip as i, resolveChartColors as a } from "../chart/chart.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Rectangle as l, Sankey as u } from "recharts";
+import { ChartContainer as n, ChartStyle as r, ChartTooltip as i, resolveChartColors as a, toCssKey as o } from "../chart/chart.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Rectangle as u, Sankey as d } from "recharts";
 //#region src/components/ui/sankey-chart/sankey-chart.tsx
-function d(e, t, n) {
-	return function({ x: r, y: i, width: a, height: o, index: u, payload: d }) {
-		let f = String(d.name), p = e[f]?.label ?? f, m = t.has(u);
-		return /* @__PURE__ */ c("g", { children: [/* @__PURE__ */ s(l, {
+function f(e, t, n) {
+	return function({ x: r, y: i, width: a, height: s, index: d, payload: f }) {
+		let p = String(f.name), m = e[p]?.label ?? p, h = t.has(d);
+		return /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c(u, {
 			x: r,
 			y: i,
 			width: a,
-			height: o,
-			fill: `var(--color-${f})`,
+			height: s,
+			fill: `var(--color-${o(p)})`,
 			radius: 2
-		}), n && /* @__PURE__ */ s("text", {
-			x: m ? r + a + 6 : r - 6,
-			y: i + o / 2,
-			textAnchor: m ? "start" : "end",
+		}), n && /* @__PURE__ */ c("text", {
+			x: h ? r + a + 6 : r - 6,
+			y: i + s / 2,
+			textAnchor: h ? "start" : "end",
 			dominantBaseline: "middle",
 			className: "fill-foreground text-xs",
-			children: p
+			children: m
 		})] });
 	};
 }
-function f({ sourceX: e, targetX: t, sourceY: n, targetY: r, sourceControlX: i, targetControlX: a, linkWidth: o, payload: c }) {
-	let l = String(c.target.name), u = c.color ?? `var(--color-${l})`;
-	return /* @__PURE__ */ s("path", {
+function p({ sourceX: e, targetX: t, sourceY: n, targetY: r, sourceControlX: i, targetControlX: a, linkWidth: s, payload: l }) {
+	let u = String(l.target.name), d = l.color ?? `var(--color-${o(u)})`;
+	return /* @__PURE__ */ c("path", {
 		d: `M${e},${n}C${i},${n} ${a},${r} ${t},${r}`,
 		fill: "none",
-		stroke: u,
-		strokeWidth: Math.max(1, o),
-		strokeOpacity: c.color ? 1 : .35
+		stroke: d,
+		strokeWidth: Math.max(1, s),
+		strokeOpacity: l.color ? 1 : .35
 	});
 }
-function p(e, t, n) {
+function m(e, t, n) {
 	let r = (t) => e[t]?.label ?? t, i = /* @__PURE__ */ new Map();
 	for (let e of t) {
 		let t = n[e.source]?.name ?? "", r = n[e.target]?.name ?? "";
 		i.set(t + " - " + r, {
-			color: e.color ?? `var(--color-${r})`,
+			color: e.color ?? `var(--color-${o(r)})`,
 			opacity: e.color ? 1 : .35
 		});
 	}
 	return function({ active: e, payload: t }) {
 		if (!e || !t?.length) return null;
-		let n = t[0], a = String(n?.name ?? "").split(" - "), l = a[a.length - 1], u = i.get(String(n?.name ?? "")), d = u?.color ?? `var(--color-${l})`, f = u?.opacity ?? 1, p = n?.value;
-		return /* @__PURE__ */ c("div", {
+		let n = t[0], a = String(n?.name ?? "").split(" - "), u = a[a.length - 1], d = i.get(String(n?.name ?? "")), f = d?.color ?? `var(--color-${o(u)})`, p = d?.opacity ?? 1, m = n?.value;
+		return /* @__PURE__ */ l("div", {
 			className: "flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md",
 			children: [
-				/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ c("span", {
 					className: "h-2.5 w-2.5 shrink-0 rounded-[2px]",
 					style: {
-						backgroundColor: d,
-						opacity: f
+						backgroundColor: f,
+						opacity: p
 					}
 				}),
-				/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ c("span", {
 					className: "text-muted-foreground",
-					children: a.map((e, t) => /* @__PURE__ */ c(o.Fragment, { children: [t > 0 && " → ", r(e)] }, `${e}-${t}`))
+					children: a.map((e, t) => /* @__PURE__ */ l(s.Fragment, { children: [t > 0 && " → ", r(e)] }, `${e}-${t}`))
 				}),
-				p != null && /* @__PURE__ */ s("span", {
+				m != null && /* @__PURE__ */ c("span", {
 					className: "ms-2 font-medium tabular-nums",
-					children: m(p)
+					children: h(m)
 				})
 			]
 		});
 	};
 }
-function m(e) {
-	return Array.isArray(e) ? e.map((e) => m(e)).join(" – ") : typeof e == "number" ? e.toLocaleString() : String(e);
+function h(e) {
+	return Array.isArray(e) ? e.map((e) => h(e)).join(" – ") : typeof e == "number" ? e.toLocaleString() : String(e);
 }
-var h = o.forwardRef(({ className: l, config: m, palette: h, data: g, nodePadding: _ = 24, nodeWidth: v = 12, linkCurvature: y = .5, sort: b = !1, showLabels: x = !0, showLegend: S = !1, showTooltip: C = !0, tooltipContent: w, ...T }, E) => {
-	let D = `chart-${o.useId().replace(/:/g, "")}`, O = o.useMemo(() => new Set(g.links.map((e) => e.source)), [g.links]), k = o.useMemo(() => d(m, O, x), [
-		m,
-		O,
-		x
-	]), A = o.useMemo(() => p(m, g.links, g.nodes), [
-		m,
-		g.links,
-		g.nodes
-	]), j = o.useMemo(() => {
+var g = s.forwardRef(({ className: u, config: h, palette: g, data: _, nodePadding: v = 24, nodeWidth: y = 12, linkCurvature: b = .5, sort: x = !1, showLabels: S = !0, showLegend: C = !1, showTooltip: w = !0, tooltipContent: T, ...E }, D) => {
+	let O = `chart-${s.useId().replace(/:/g, "")}`, k = s.useMemo(() => new Set(_.links.map((e) => e.source)), [_.links]), A = s.useMemo(() => f(h, k, S), [
+		h,
+		k,
+		S
+	]), j = s.useMemo(() => m(h, _.links, _.nodes), [
+		h,
+		_.links,
+		_.nodes
+	]), M = s.useMemo(() => {
 		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
-		for (let n of g.links) t.set(n.source, (t.get(n.source) ?? 0) + n.value), e.set(n.target, (e.get(n.target) ?? 0) + n.value);
-		let n = g.nodes.map((n, r) => e.get(r) ?? t.get(r) ?? 0), r = n.length ? Math.max(...n) : 0;
-		return g.nodes.map((e, t) => ({
+		for (let n of _.links) t.set(n.source, (t.get(n.source) ?? 0) + n.value), e.set(n.target, (e.get(n.target) ?? 0) + n.value);
+		let n = _.nodes.map((n, r) => e.get(r) ?? t.get(r) ?? 0), r = n.length ? Math.max(...n) : 0;
+		return _.nodes.map((e, t) => ({
 			name: e.name,
 			value: n[t],
 			pct: r > 0 ? Math.round(n[t] / r * 100) : 0
 		}));
-	}, [g]);
-	return /* @__PURE__ */ c("div", {
-		ref: E,
-		"data-chart": D,
-		className: e("flex flex-col", l),
-		...T,
+	}, [_]);
+	return /* @__PURE__ */ l("div", {
+		ref: D,
+		"data-chart": O,
+		className: e("flex flex-col", u),
+		...E,
 		children: [
-			/* @__PURE__ */ s(r, {
-				id: D,
-				config: a(m, h ?? t)
+			/* @__PURE__ */ c(r, {
+				id: O,
+				config: a(h, g ?? t)
 			}),
-			/* @__PURE__ */ s(n, {
-				config: m,
-				palette: h,
+			/* @__PURE__ */ c(n, {
+				config: h,
+				palette: g,
 				className: "min-h-0 flex-1",
-				children: /* @__PURE__ */ s(u, {
-					data: g,
-					node: k,
-					link: f,
-					nodePadding: _,
-					nodeWidth: v,
-					linkCurvature: y,
-					sort: b,
+				children: /* @__PURE__ */ c(d, {
+					data: _,
+					node: A,
+					link: p,
+					nodePadding: v,
+					nodeWidth: y,
+					linkCurvature: b,
+					sort: x,
 					align: "left",
 					margin: {
 						top: 8,
@@ -121,28 +121,28 @@ var h = o.forwardRef(({ className: l, config: m, palette: h, data: g, nodePaddin
 						bottom: 8,
 						left: 24
 					},
-					children: C && /* @__PURE__ */ s(i, { content: w ?? A })
+					children: w && /* @__PURE__ */ c(i, { content: T ?? j })
 				})
 			}),
-			S && /* @__PURE__ */ s("div", {
+			C && /* @__PURE__ */ c("div", {
 				"data-slot": "sankey-chart-legend",
 				className: "mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs",
-				children: j.map(({ name: e, value: t, pct: n }) => /* @__PURE__ */ c("div", {
+				children: M.map(({ name: e, value: t, pct: n }) => /* @__PURE__ */ l("div", {
 					className: "flex items-center gap-2",
 					children: [
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "size-2.5 shrink-0 rounded-sm",
-							style: { backgroundColor: `var(--color-${e})` }
+							style: { backgroundColor: `var(--color-${o(e)})` }
 						}),
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "truncate text-muted-foreground",
-							children: m[e]?.label ?? e
+							children: h[e]?.label ?? e
 						}),
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "ms-auto font-semibold tabular-nums",
 							children: t.toLocaleString()
 						}),
-						/* @__PURE__ */ c("span", {
+						/* @__PURE__ */ l("span", {
 							className: "w-9 shrink-0 text-end tabular-nums text-muted-foreground",
 							children: [n, "%"]
 						})
@@ -152,8 +152,8 @@ var h = o.forwardRef(({ className: l, config: m, palette: h, data: g, nodePaddin
 		]
 	});
 });
-h.displayName = "SankeyChart";
+g.displayName = "SankeyChart";
 //#endregion
-export { h as SankeyChart, p as makeSankeyTooltip };
+export { g as SankeyChart, m as makeSankeyTooltip };
 
 //# sourceMappingURL=sankey-chart.js.map

package/dist/components/ui/sankey-chart/sankey-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../../../src/components/ui/sankey-chart/sankey-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Sankey as RechartsSankey, Rectangle } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartStyle,\n  resolveChartColors,\n  CHART_DEFAULT_PALETTE,\n  ChartTooltip,\n  type ChartConfig,\n  type ChartPalette,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives — a flow\n// diagram where link width is proportional to the value flowing between nodes.\n// Like Treemap/Funnel it's a single recharts element (`<Sankey>`) themed through\n// custom `node` / `link` renderers (recharts' defaults paint one flat grey and\n// carry no token hooks). No CVA variant: a Sankey's expressiveness is the\n// nodes/links graph + geometry (plain props), not a visual \"mode\".\n//\n// Node `name`s are the color keys: each must match a `config` entry, so they\n// must be CSS-safe (they become part of a `--color-<name>` custom property).\n// The human-readable text comes from `config[name].label`.\n\n/** A node in the flow — `name` is its color/config key (CSS-safe, unique). */\nexport interface SankeyChartNode {\n  name: string;\n}\n\n/** A directed flow between two nodes, referenced by their index in `nodes`. */\nexport interface SankeyChartLink {\n  /** Index of the source node in `data.nodes`. */\n  source: number;\n  /** Index of the target node in `data.nodes`. */\n  target: number;\n  /** Flow magnitude — drives the link's width. */\n  value: number;\n  /**\n   * Ribbon color (any CSS color, e.g. a `var(--ui-*)` token), rendered at **full\n   * opacity** so it matches its node bar. Omit to use the target node's color at\n   * 35% (the default tinted ribbon).\n   */\n  color?: string;\n}\n\nexport interface SankeyChartProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children'\n> {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** The graph: `nodes` (color keys) + `links` (source/target indices + value). */\n  data: {\n    nodes: ReadonlyArray<SankeyChartNode>;\n    links: ReadonlyArray<SankeyChartLink>;\n  };\n  /**\n   * Per-node map of `label` / `icon` / `tone`, keyed by the node's `name`\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Series take their colour from the container's `palette`;\n   * each entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Vertical gap between nodes in the same column. */\n  nodePadding?: number;\n  /** Thickness of each node bar. */\n  nodeWidth?: number;\n  /** Curviness of the links (0 = straight, 1 = fully curved). */\n  linkCurvature?: number;\n  /**\n   * Sort nodes vertically to minimize link crossings (recharts' relaxation).\n   * Defaults to `false` — nodes render in the order given by `data.nodes` within\n   * each column, which keeps curated flows tidy; set `true` to auto-order.\n   */\n  sort?: boolean;\n  /** Render each node's label (from `config[name].label`) beside its bar. */\n  showLabels?: boolean;\n  /** Render a legend (color dot + label + value + % per node) below the chart. */\n  showLegend?: boolean;\n  /** Show a hover tooltip on nodes and links (dot + `source → target` + value). */\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting without composing recharts yourself. Ignored when\n   * `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\n// recharts injects these into the `node` / `link` render functions but doesn't\n// export their prop types from the package root, so we type the fields we use\n// (structurally compatible with recharts' internal NodeProps / LinkProps).\ninterface SankeyNodeShapeProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  index: number;\n  payload: { name: string; value: number };\n}\n\ninterface SankeyLinkShapeProps {\n  sourceX: number;\n  targetX: number;\n  sourceY: number;\n  targetY: number;\n  sourceControlX: number;\n  targetControlX: number;\n  linkWidth: number;\n  // recharts spreads the original link onto `payload` (then overrides\n  // source/target with node objects), so a custom `color` survives here.\n  payload: {\n    source: { name: string };\n    target: { name: string };\n    value: number;\n    color?: string;\n  };\n}\n\n// Node bar: a rect filled from `--color-<name>`, with the config label placed on\n// whichever side keeps it inside the plot — to the right for nodes that have\n// outgoing links (sources), to the left for terminal nodes (sinks).\nfunction makeNodeRenderer(\n  config: ChartConfig,\n  sourceIndices: ReadonlySet<number>,\n  showLabels: boolean\n) {\n  return function SankeyNodeShape({\n    x,\n    y,\n    width,\n    height,\n    index,\n    payload,\n  }: SankeyNodeShapeProps) {\n    const name = String(payload.name);\n    const label = config[name]?.label ?? name;\n    const isSource = sourceIndices.has(index);\n    return (\n      <g>\n        <Rectangle\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          fill={`var(--color-${name})`}\n          radius={2}\n        />\n        {showLabels && (\n          <text\n            x={isSource ? x + width + 6 : x - 6}\n            y={y + height / 2}\n            textAnchor={isSource ? 'start' : 'end'}\n            dominantBaseline=\"middle\"\n            className=\"fill-foreground text-xs\"\n          >\n            {label}\n          </text>\n        )}\n      </g>\n    );\n  };\n}\n\n// Link ribbon: a bezier stroked at 35% opacity in the link's own `color` if\n// given (recharts preserves custom link fields on the render `payload`), else\n// the **target** node's color (so a flow reads as \"where it goes\"). Drawn as a\n// stroke, not a fill, so the ribbon width comes from `linkWidth`.\nfunction SankeyLinkShape({\n  sourceX,\n  targetX,\n  sourceY,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  payload,\n}: SankeyLinkShapeProps) {\n  const targetName = String(payload.target.name);\n  const stroke = payload.color ?? `var(--color-${targetName})`;\n  return (\n    <path\n      d={`M${sourceX},${sourceY}C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n      fill=\"none\"\n      stroke={stroke}\n      strokeWidth={Math.max(1, linkWidth)}\n      // An explicit per-link color is the caller's exact choice — render it at\n      // full opacity (so it matches its node bar); the default target-tint is\n      // dimmed to 35% so ribbons don't overwhelm the nodes.\n      strokeOpacity={payload.color ? 1 : 0.35}\n    />\n  );\n}\n\n// Default tooltip: recharts' Sankey payload carries no config color, and labels\n// a hovered link \"source - target\" using the node keys (a node is a single key).\n// Parse that name to a color dot (the target node's color) + the mapped config\n// labels joined with an arrow + the value — driven by `config`, so it's reliable\n// where the shared ChartTooltipContent can't resolve the Sankey payload.\n//\n// Exported (module-only, not from the package barrel) so its branches can be\n// unit-tested directly: recharts can't lay out a Sankey in happy-dom, and its\n// hover tooltip has no statically-open form the component exposes, so rendering\n// `<SankeyChart>` never reaches this code.\nexport function makeSankeyTooltip(\n  config: ChartConfig,\n  links: ReadonlyArray<SankeyChartLink>,\n  nodes: ReadonlyArray<SankeyChartNode>\n) {\n  const labelFor = (key: string): React.ReactNode => config[key]?.label ?? key;\n  // Resolve each link's dot color by its \"source - target\" name (which is the\n  // tooltip item's name): the link's own color if set, else the target's, via\n  // the `--color-<name>` bridge.\n  const styleByName = new Map<string, { color: string; opacity: number }>();\n  for (const link of links) {\n    const source = nodes[link.source]?.name ?? '';\n    const target = nodes[link.target]?.name ?? '';\n    // Mirror the ribbon: an explicit color renders full-opacity; the default\n    // target tint renders at 35%.\n    styleByName.set(source + ' - ' + target, {\n      color: link.color ?? `var(--color-${target})`,\n      opacity: link.color ? 1 : 0.35,\n    });\n  }\n\n  return function SankeyTooltipContent({\n    active,\n    payload,\n  }: {\n    active?: boolean;\n    payload?: ReadonlyArray<{\n      name?: string | number;\n      value?: number | string | ReadonlyArray<number | string>;\n    }>;\n  }) {\n    if (!active || !payload?.length) return null;\n    const item = payload[0];\n    const parts = String(item?.name ?? '').split(' - ');\n    const targetKey = parts[parts.length - 1];\n    const linkStyle = styleByName.get(String(item?.name ?? ''));\n    const dotColor = linkStyle?.color ?? `var(--color-${targetKey})`;\n    const dotOpacity = linkStyle?.opacity ?? 1;\n    const value = item?.value;\n    return (\n      <div className=\"flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md\">\n        <span\n          className=\"h-2.5 w-2.5 shrink-0 rounded-[2px]\"\n          style={{ backgroundColor: dotColor, opacity: dotOpacity }}\n        />\n        <span className=\"text-muted-foreground\">\n          {/* A config label can be any ReactNode, so the arrow-joined label is\n              built as nodes rather than stringified. */}\n          {parts.map((key, index) => (\n            <React.Fragment key={`${key}-${index}`}>\n              {index > 0 && ' → '}\n              {labelFor(key)}\n            </React.Fragment>\n          ))}\n        </span>\n        {value != null && (\n          <span className=\"ms-2 font-medium tabular-nums\">\n            {formatTooltipValue(value)}\n          </span>\n        )}\n      </div>\n    );\n  };\n}\n\n// recharts types a tooltip item's value as a scalar *or* a range tuple; a plain\n// `String()` would print \"1,2\" for the tuple, so format each part and join.\nfunction formatTooltipValue(\n  value: number | string | ReadonlyArray<number | string>\n): string {\n  if (Array.isArray(value)) {\n    return value.map((part) => formatTooltipValue(part)).join(' – ');\n  }\n  return typeof value === 'number'\n    ? value.toLocaleString()\n    : String(value as string);\n}\n\nconst SankeyChart = React.forwardRef<HTMLDivElement, SankeyChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      nodePadding = 24,\n      nodeWidth = 12,\n      linkCurvature = 0.5,\n      sort = false,\n      showLabels = true,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n\n    // Node indices that appear as a link `source` have outgoing flow — used by\n    // the node renderer to place the label on the readable side.\n    const sourceIndices = React.useMemo(\n      () => new Set(data.links.map((link) => link.source)),\n      [data.links]\n    );\n\n    const nodeRenderer = React.useMemo(\n      () => makeNodeRenderer(config, sourceIndices, showLabels),\n      [config, sourceIndices, showLabels]\n    );\n\n    const defaultTooltip = React.useMemo(\n      () => makeSankeyTooltip(config, data.links, data.nodes),\n      [config, data.links, data.nodes]\n    );\n\n    // Per-node value (incoming flow, or outgoing for a source with no incoming)\n    // and its share of the largest node — drives the legend's count + %.\n    const nodeStats = React.useMemo(() => {\n      const incoming = new Map<number, number>();\n      const outgoing = new Map<number, number>();\n      for (const link of data.links) {\n        outgoing.set(\n          link.source,\n          (outgoing.get(link.source) ?? 0) + link.value\n        );\n        incoming.set(\n          link.target,\n          (incoming.get(link.target) ?? 0) + link.value\n        );\n      }\n      const values = data.nodes.map(\n        (_, i) => incoming.get(i) ?? outgoing.get(i) ?? 0\n      );\n      const total = values.length ? Math.max(...values) : 0;\n      return data.nodes.map((node, i) => ({\n        name: node.name,\n        value: values[i],\n        pct: total > 0 ? Math.round((values[i] / total) * 100) : 0,\n      }));\n    }, [data]);\n\n    return (\n      <div\n        ref={ref}\n        // The legend sits outside `ChartContainer`, so the root carries its own\n        // `--color-<name>` scope for it (the plot and the recharts-portaled\n        // tooltip resolve theirs from ChartContainer's).\n        data-chart={chartId}\n        className={cn('flex flex-col', className)}\n        {...props}\n      >\n        <ChartStyle\n          id={chartId}\n          config={resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE)}\n        />\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"min-h-0 flex-1\"\n        >\n          <RechartsSankey\n            data={\n              data as { nodes: SankeyChartNode[]; links: SankeyChartLink[] }\n            }\n            node={nodeRenderer}\n            link={SankeyLinkShape}\n            nodePadding={nodePadding}\n            nodeWidth={nodeWidth}\n            linkCurvature={linkCurvature}\n            sort={sort}\n            // recharts defaults to `justify`, which right-aligns sink nodes to\n            // the last column — so a terminal node like \"No certification\" would\n            // jump to the far right instead of staying at its real depth. `left`\n            // positions every node by its distance from the source, keeping the\n            // flow's columns intact.\n            align=\"left\"\n            // Node labels never extend past the plot's right edge: a node in the\n            // last column has no outgoing links, so its label is drawn to the\n            // LEFT of its bar (see the node renderer). Only a small gutter is\n            // needed here — a wide reserve would just shrink the diagram.\n            margin={{ top: 8, right: 24, bottom: 8, left: 24 }}\n          >\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? defaultTooltip} />\n            )}\n          </RechartsSankey>\n        </ChartContainer>\n        {showLegend && (\n          <div\n            data-slot=\"sankey-chart-legend\"\n            className=\"mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs\"\n          >\n            {nodeStats.map(({ name, value, pct }) => (\n              <div key={name} className=\"flex items-center gap-2\">\n                <span\n                  className=\"size-2.5 shrink-0 rounded-sm\"\n                  style={{ backgroundColor: `var(--color-${name})` }}\n                />\n                <span className=\"truncate text-muted-foreground\">\n                  {config[name]?.label ?? name}\n                </span>\n                <span className=\"ms-auto font-semibold tabular-nums\">\n                  {value.toLocaleString()}\n                </span>\n                <span className=\"w-9 shrink-0 text-end tabular-nums text-muted-foreground\">\n                  {pct}%\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\nSankeyChart.displayName = 'SankeyChart';\n\nexport { SankeyChart };\n"],"mappings":"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"}
+{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../../../src/components/ui/sankey-chart/sankey-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Sankey as RechartsSankey, Rectangle } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartStyle,\n  resolveChartColors,\n  CHART_DEFAULT_PALETTE,\n  ChartTooltip,\n  toCssKey,\n  type ChartConfig,\n  type ChartPalette,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives — a flow\n// diagram where link width is proportional to the value flowing between nodes.\n// Like Treemap/Funnel it's a single recharts element (`<Sankey>`) themed through\n// custom `node` / `link` renderers (recharts' defaults paint one flat grey and\n// carry no token hooks). No CVA variant: a Sankey's expressiveness is the\n// nodes/links graph + geometry (plain props), not a visual \"mode\".\n//\n// Node `name`s are the color keys: each must match a `config` entry. They are\n// sanitized automatically to a valid CSS custom-property fragment; CSS-safe\n// names are preferred to avoid dev-mode warnings.\n// The human-readable text comes from `config[name].label`.\n\n/** A node in the flow — `name` is its color/config key (unique; sanitized automatically to a CSS-safe fragment). */\nexport interface SankeyChartNode {\n  name: string;\n}\n\n/** A directed flow between two nodes, referenced by their index in `nodes`. */\nexport interface SankeyChartLink {\n  /** Index of the source node in `data.nodes`. */\n  source: number;\n  /** Index of the target node in `data.nodes`. */\n  target: number;\n  /** Flow magnitude — drives the link's width. */\n  value: number;\n  /**\n   * Ribbon color (any CSS color, e.g. a `var(--ui-*)` token), rendered at **full\n   * opacity** so it matches its node bar. Omit to use the target node's color at\n   * 35% (the default tinted ribbon).\n   */\n  color?: string;\n}\n\nexport interface SankeyChartProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children'\n> {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** The graph: `nodes` (color keys) + `links` (source/target indices + value). */\n  data: {\n    nodes: ReadonlyArray<SankeyChartNode>;\n    links: ReadonlyArray<SankeyChartLink>;\n  };\n  /**\n   * Per-node map of `label` / `icon` / `tone`, keyed by the node's `name`\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Series take their colour from the container's `palette`;\n   * each entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Vertical gap between nodes in the same column. */\n  nodePadding?: number;\n  /** Thickness of each node bar. */\n  nodeWidth?: number;\n  /** Curviness of the links (0 = straight, 1 = fully curved). */\n  linkCurvature?: number;\n  /**\n   * Sort nodes vertically to minimize link crossings (recharts' relaxation).\n   * Defaults to `false` — nodes render in the order given by `data.nodes` within\n   * each column, which keeps curated flows tidy; set `true` to auto-order.\n   */\n  sort?: boolean;\n  /** Render each node's label (from `config[name].label`) beside its bar. */\n  showLabels?: boolean;\n  /** Render a legend (color dot + label + value + % per node) below the chart. */\n  showLegend?: boolean;\n  /** Show a hover tooltip on nodes and links (dot + `source → target` + value). */\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting without composing recharts yourself. Ignored when\n   * `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\n// recharts injects these into the `node` / `link` render functions but doesn't\n// export their prop types from the package root, so we type the fields we use\n// (structurally compatible with recharts' internal NodeProps / LinkProps).\ninterface SankeyNodeShapeProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  index: number;\n  payload: { name: string; value: number };\n}\n\ninterface SankeyLinkShapeProps {\n  sourceX: number;\n  targetX: number;\n  sourceY: number;\n  targetY: number;\n  sourceControlX: number;\n  targetControlX: number;\n  linkWidth: number;\n  // recharts spreads the original link onto `payload` (then overrides\n  // source/target with node objects), so a custom `color` survives here.\n  payload: {\n    source: { name: string };\n    target: { name: string };\n    value: number;\n    color?: string;\n  };\n}\n\n// Node bar: a rect filled from `--color-<name>`, with the config label placed on\n// whichever side keeps it inside the plot — to the right for nodes that have\n// outgoing links (sources), to the left for terminal nodes (sinks).\nfunction makeNodeRenderer(\n  config: ChartConfig,\n  sourceIndices: ReadonlySet<number>,\n  showLabels: boolean\n) {\n  return function SankeyNodeShape({\n    x,\n    y,\n    width,\n    height,\n    index,\n    payload,\n  }: SankeyNodeShapeProps) {\n    const name = String(payload.name);\n    const label = config[name]?.label ?? name;\n    const isSource = sourceIndices.has(index);\n    return (\n      <g>\n        <Rectangle\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          fill={`var(--color-${toCssKey(name)})`}\n          radius={2}\n        />\n        {showLabels && (\n          <text\n            x={isSource ? x + width + 6 : x - 6}\n            y={y + height / 2}\n            textAnchor={isSource ? 'start' : 'end'}\n            dominantBaseline=\"middle\"\n            className=\"fill-foreground text-xs\"\n          >\n            {label}\n          </text>\n        )}\n      </g>\n    );\n  };\n}\n\n// Link ribbon: a bezier stroked at 35% opacity in the link's own `color` if\n// given (recharts preserves custom link fields on the render `payload`), else\n// the **target** node's color (so a flow reads as \"where it goes\"). Drawn as a\n// stroke, not a fill, so the ribbon width comes from `linkWidth`.\nfunction SankeyLinkShape({\n  sourceX,\n  targetX,\n  sourceY,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  payload,\n}: SankeyLinkShapeProps) {\n  const targetName = String(payload.target.name);\n  const stroke = payload.color ?? `var(--color-${toCssKey(targetName)})`;\n  return (\n    <path\n      d={`M${sourceX},${sourceY}C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n      fill=\"none\"\n      stroke={stroke}\n      strokeWidth={Math.max(1, linkWidth)}\n      // An explicit per-link color is the caller's exact choice — render it at\n      // full opacity (so it matches its node bar); the default target-tint is\n      // dimmed to 35% so ribbons don't overwhelm the nodes.\n      strokeOpacity={payload.color ? 1 : 0.35}\n    />\n  );\n}\n\n// Default tooltip: recharts' Sankey payload carries no config color, and labels\n// a hovered link \"source - target\" using the node keys (a node is a single key).\n// Parse that name to a color dot (the target node's color) + the mapped config\n// labels joined with an arrow + the value — driven by `config`, so it's reliable\n// where the shared ChartTooltipContent can't resolve the Sankey payload.\n//\n// Exported (module-only, not from the package barrel) so its branches can be\n// unit-tested directly: recharts can't lay out a Sankey in happy-dom, and its\n// hover tooltip has no statically-open form the component exposes, so rendering\n// `<SankeyChart>` never reaches this code.\nexport function makeSankeyTooltip(\n  config: ChartConfig,\n  links: ReadonlyArray<SankeyChartLink>,\n  nodes: ReadonlyArray<SankeyChartNode>\n) {\n  const labelFor = (key: string): React.ReactNode => config[key]?.label ?? key;\n  // Resolve each link's dot color by its \"source - target\" name (which is the\n  // tooltip item's name): the link's own color if set, else the target's, via\n  // the `--color-<name>` bridge.\n  const styleByName = new Map<string, { color: string; opacity: number }>();\n  for (const link of links) {\n    const source = nodes[link.source]?.name ?? '';\n    const target = nodes[link.target]?.name ?? '';\n    // Mirror the ribbon: an explicit color renders full-opacity; the default\n    // target tint renders at 35%.\n    styleByName.set(source + ' - ' + target, {\n      color: link.color ?? `var(--color-${toCssKey(target)})`,\n      opacity: link.color ? 1 : 0.35,\n    });\n  }\n\n  return function SankeyTooltipContent({\n    active,\n    payload,\n  }: {\n    active?: boolean;\n    payload?: ReadonlyArray<{\n      name?: string | number;\n      value?: number | string | ReadonlyArray<number | string>;\n    }>;\n  }) {\n    if (!active || !payload?.length) return null;\n    const item = payload[0];\n    const parts = String(item?.name ?? '').split(' - ');\n    const targetKey = parts[parts.length - 1];\n    const linkStyle = styleByName.get(String(item?.name ?? ''));\n    const dotColor = linkStyle?.color ?? `var(--color-${toCssKey(targetKey)})`;\n    const dotOpacity = linkStyle?.opacity ?? 1;\n    const value = item?.value;\n    return (\n      <div className=\"flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md\">\n        <span\n          className=\"h-2.5 w-2.5 shrink-0 rounded-[2px]\"\n          style={{ backgroundColor: dotColor, opacity: dotOpacity }}\n        />\n        <span className=\"text-muted-foreground\">\n          {/* A config label can be any ReactNode, so the arrow-joined label is\n              built as nodes rather than stringified. */}\n          {parts.map((key, index) => (\n            <React.Fragment key={`${key}-${index}`}>\n              {index > 0 && ' → '}\n              {labelFor(key)}\n            </React.Fragment>\n          ))}\n        </span>\n        {value != null && (\n          <span className=\"ms-2 font-medium tabular-nums\">\n            {formatTooltipValue(value)}\n          </span>\n        )}\n      </div>\n    );\n  };\n}\n\n// recharts types a tooltip item's value as a scalar *or* a range tuple; a plain\n// `String()` would print \"1,2\" for the tuple, so format each part and join.\nfunction formatTooltipValue(\n  value: number | string | ReadonlyArray<number | string>\n): string {\n  if (Array.isArray(value)) {\n    return value.map((part) => formatTooltipValue(part)).join(' – ');\n  }\n  return typeof value === 'number'\n    ? value.toLocaleString()\n    : String(value as string);\n}\n\nconst SankeyChart = React.forwardRef<HTMLDivElement, SankeyChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      nodePadding = 24,\n      nodeWidth = 12,\n      linkCurvature = 0.5,\n      sort = false,\n      showLabels = true,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n\n    // Node indices that appear as a link `source` have outgoing flow — used by\n    // the node renderer to place the label on the readable side.\n    const sourceIndices = React.useMemo(\n      () => new Set(data.links.map((link) => link.source)),\n      [data.links]\n    );\n\n    const nodeRenderer = React.useMemo(\n      () => makeNodeRenderer(config, sourceIndices, showLabels),\n      [config, sourceIndices, showLabels]\n    );\n\n    const defaultTooltip = React.useMemo(\n      () => makeSankeyTooltip(config, data.links, data.nodes),\n      [config, data.links, data.nodes]\n    );\n\n    // Per-node value (incoming flow, or outgoing for a source with no incoming)\n    // and its share of the largest node — drives the legend's count + %.\n    const nodeStats = React.useMemo(() => {\n      const incoming = new Map<number, number>();\n      const outgoing = new Map<number, number>();\n      for (const link of data.links) {\n        outgoing.set(\n          link.source,\n          (outgoing.get(link.source) ?? 0) + link.value\n        );\n        incoming.set(\n          link.target,\n          (incoming.get(link.target) ?? 0) + link.value\n        );\n      }\n      const values = data.nodes.map(\n        (_, i) => incoming.get(i) ?? outgoing.get(i) ?? 0\n      );\n      const total = values.length ? Math.max(...values) : 0;\n      return data.nodes.map((node, i) => ({\n        name: node.name,\n        value: values[i],\n        pct: total > 0 ? Math.round((values[i] / total) * 100) : 0,\n      }));\n    }, [data]);\n\n    return (\n      <div\n        ref={ref}\n        // The legend sits outside `ChartContainer`, so the root carries its own\n        // `--color-<name>` scope for it (the plot and the recharts-portaled\n        // tooltip resolve theirs from ChartContainer's).\n        data-chart={chartId}\n        className={cn('flex flex-col', className)}\n        {...props}\n      >\n        <ChartStyle\n          id={chartId}\n          config={resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE)}\n        />\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"min-h-0 flex-1\"\n        >\n          <RechartsSankey\n            data={\n              data as { nodes: SankeyChartNode[]; links: SankeyChartLink[] }\n            }\n            node={nodeRenderer}\n            link={SankeyLinkShape}\n            nodePadding={nodePadding}\n            nodeWidth={nodeWidth}\n            linkCurvature={linkCurvature}\n            sort={sort}\n            // recharts defaults to `justify`, which right-aligns sink nodes to\n            // the last column — so a terminal node like \"No certification\" would\n            // jump to the far right instead of staying at its real depth. `left`\n            // positions every node by its distance from the source, keeping the\n            // flow's columns intact.\n            align=\"left\"\n            // Node labels never extend past the plot's right edge: a node in the\n            // last column has no outgoing links, so its label is drawn to the\n            // LEFT of its bar (see the node renderer). Only a small gutter is\n            // needed here — a wide reserve would just shrink the diagram.\n            margin={{ top: 8, right: 24, bottom: 8, left: 24 }}\n          >\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? defaultTooltip} />\n            )}\n          </RechartsSankey>\n        </ChartContainer>\n        {showLegend && (\n          <div\n            data-slot=\"sankey-chart-legend\"\n            className=\"mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs\"\n          >\n            {nodeStats.map(({ name, value, pct }) => (\n              <div key={name} className=\"flex items-center gap-2\">\n                <span\n                  className=\"size-2.5 shrink-0 rounded-sm\"\n                  style={{ backgroundColor: `var(--color-${toCssKey(name)})` }}\n                />\n                <span className=\"truncate text-muted-foreground\">\n                  {config[name]?.label ?? name}\n                </span>\n                <span className=\"ms-auto font-semibold tabular-nums\">\n                  {value.toLocaleString()}\n                </span>\n                <span className=\"w-9 shrink-0 text-end tabular-nums text-muted-foreground\">\n                  {pct}%\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\nSankeyChart.displayName = 'SankeyChart';\n\nexport { SankeyChart };\n"],"mappings":"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"}