@misoto22/design 0.7.0 → 0.9.0

package/dist/charts/PieChart/PieChart.js

@@ -7,8 +7,7 @@ import {
   useCallback,
   useContext,
   useId,
-  useMemo,
-  useState
+  useMemo
 } from "react";
 import {
   LabelList as RechartsLabelList,
@@ -19,6 +18,8 @@ import {
 import { motion, useReducedMotion } from "motion/react";
 import { ChartContainer, colorStops, cssName } from "../lib/chart.js";
 import { ChartFigure } from "../lib/figure.js";
+import {} from "../lib/empty.js";
+import { useChartSelection } from "../lib/selection.js";
 import { ChartBackground } from "../lib/background.js";
 import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
 import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
@@ -44,15 +45,15 @@ function PieChart({
   className,
   chartProps,
   defaultSelectedSector = null,
+  selectedSector: controlledSector,
   onSelectionChange,
   isLoading = false,
-  hideDataTable = false
+  hideDataTable = false,
+  empty
 }) {
   const chartId = useId().replace(/:/g, "");
-  const [selectedSector, setSelectedSector] = useState(defaultSelectedSector);
-  const selectSector = useCallback(
+  const report = useCallback(
     (name) => {
-      setSelectedSector(name);
       if (name === null) {
         onSelectionChange?.(null);
         return;
@@ -62,6 +63,11 @@ function PieChart({
     },
     [data, dataKey, nameKey, onSelectionChange]
   );
+  const [selectedSector, selectSector] = useChartSelection(
+    controlledSector,
+    defaultSelectedSector,
+    report
+  );
   const context = useMemo(
     () => ({ config, data, dataKey, nameKey, isLoading, selectedSector, selectSector }),
     [config, data, dataKey, isLoading, nameKey, selectSector, selectedSector]
@@ -78,6 +84,8 @@ function PieChart({
         rowKey: nameKey,
         columns: [{ key: dataKey, label: "Value" }]
       },
+      isEmpty: !isLoading && data.length === 0,
+      empty,
       children: [
         /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(RechartsPieChart, { id: chartId, accessibilityLayer: true, ...chartProps, children }) }),
         /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })

package/dist/charts/PieChart/PieChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/charts/PieChart/PieChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport {\n  LabelList as RechartsLabelList,\n  Pie as RechartsPie,\n  PieChart as RechartsPieChart,\n  Sector,\n  type PieSectorShapeProps,\n} from 'recharts'\nimport { motion, useReducedMotion } from 'motion/react'\nimport { ChartContainer, colorStops, cssName, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartLegend, ChartLegendContent } from '../lib/legend'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { LoadingIndicator } from '../lib/loading'\nimport { ColorStops } from '../lib/paint'\nimport type { ChartLegendSlotProps, ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/** Equal wedges the skeleton is built from. */\nconst LOADING_SECTORS = 5\n\n/** One full pulse of the loading wave, in seconds. */\nconst LOADING_PULSE = 2\n\n/**\n * How a sector is painted.\n *\n * One variant, and the honesty is deliberate: a wedge is a small, awkwardly\n * shaped area, and a texture inside one reads as noise rather than as identity.\n * Where a bar chart differentiates by fill, a pie differentiates by the gap\n * between sectors — which is what `paddingAngle` is for — and by its legend.\n */\nexport type PieVariant = 'gradient'\n\ninterface PieChartContextValue {\n  config: ChartConfig\n  data: Record<string, unknown>[]\n  dataKey: string\n  nameKey: string\n  isLoading: boolean\n  selectedSector: string | null\n  selectSector: (sector: string | null) => void\n}\n\nconst PieChartContext = createContext<PieChartContextValue | null>(null)\n\nfunction usePieChart(): PieChartContextValue {\n  const context = useContext(PieChartContext)\n  if (!context) throw new Error('A pie chart part must be rendered inside <PieChart>')\n  return context\n}\n\nexport interface PieChartProps<TData extends Record<string, unknown>> {\n  /** Sector names → their label and paint. Keys must match the `nameKey` values. */\n  config: ChartConfig\n  /** The rows the chart draws. One entry per point, bar or category. */\n  data: TData[]\n  /** The row field holding each sector's number. */\n  dataKey: keyof TData & string\n  /** The row field holding each sector's name. */\n  nameKey: keyof TData & string\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsPieChart>\n  /** The sector lit on first render. */\n  defaultSelectedSector?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selection: { name: string; value: number } | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n}\n\n/**\n * Parts of one whole.\n *\n * Worth saying plainly: a pie answers \"roughly what share\" and nothing more\n * precise. Comparing two adjacent wedges by eye is unreliable past about five\n * of them, and comparing a wedge across two pies is worse. When the reader\n * needs to rank or compare, a `<BarChart>` answers the same question better.\n *\n * @example\n * <PieChart title=\"Visitors by browser\" config={config} data={data} dataKey=\"visitors\" nameKey=\"browser\">\n *   <PieChart.Pie innerRadius=\"55%\" />\n *   <PieChart.Tooltip />\n *   <PieChart.Legend />\n * </PieChart>\n */\nexport function PieChart<TData extends Record<string, unknown>>({\n  config,\n  data,\n  dataKey,\n  nameKey,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  defaultSelectedSector = null,\n  onSelectionChange,\n  isLoading = false,\n  hideDataTable = false,\n}: PieChartProps<TData>) {\n  // Not a literal. Two pies on one page shared a hard-coded id in the shape\n  // this was ported from, so the second one inherited the first one's paint.\n  const chartId = useId().replace(/:/g, '')\n  const [selectedSector, setSelectedSector] = useState<string | null>(defaultSelectedSector)\n\n  const selectSector = useCallback(\n    (name: string | null) => {\n      setSelectedSector(name)\n\n      if (name === null) {\n        onSelectionChange?.(null)\n        return\n      }\n      const row = data.find((item) => item[nameKey] === name)\n      if (row) onSelectionChange?.({ name, value: row[dataKey] as number })\n    },\n    [data, dataKey, nameKey, onSelectionChange],\n  )\n\n  const context = useMemo<PieChartContextValue>(\n    () => ({ config, data, dataKey, nameKey, isLoading, selectedSector, selectSector }),\n    [config, data, dataKey, isLoading, nameKey, selectSector, selectedSector],\n  )\n\n  return (\n    <PieChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: data,\n                rowKey: nameKey,\n                columns: [{ key: dataKey, label: 'Value' }],\n              }\n        }\n      >\n        <ChartContainer config={config}>\n          <RechartsPieChart id={chartId} accessibilityLayer {...chartProps}>\n            {children}\n          </RechartsPieChart>\n        </ChartContainer>\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </PieChartContext.Provider>\n  )\n}\n\nexport interface PieProps {\n  variant?: PieVariant\n  /** Above zero makes it a donut, which is easier to read than a full pie. */\n  innerRadius?: number | string\n  outerRadius?: number | string\n  /** Rounds each wedge's corners. */\n  cornerRadius?: number\n  /**\n   * Degrees between wedges. Negative overlaps them, which the sector's own\n   * surface-coloured stroke then separates — the \"stacked cards\" look.\n   */\n  paddingAngle?: number\n  startAngle?: number\n  endAngle?: number\n  isClickable?: boolean\n  /** Sector names drawn with a halo — for the one wedge that is the point. */\n  glowingSectors?: string[]\n  /** `<PieChart.Label>`. */\n  children?: ReactNode\n  pieProps?: Omit<ComponentProps<typeof RechartsPie>, 'data' | 'dataKey' | 'nameKey'>\n}\n\n/** Stable identity, so the default never re-triggers the memo below. */\nconst NO_GLOW: string[] = []\n\n/** The wedges themselves, with their gradients scoped to this pie's id. */\nfunction Pie({\n  variant = 'gradient',\n  innerRadius = 0,\n  outerRadius = '80%',\n  cornerRadius = 0,\n  paddingAngle = 0,\n  startAngle = 0,\n  endAngle = 360,\n  isClickable = false,\n  glowingSectors = NO_GLOW,\n  children,\n  pieProps,\n}: PieProps) {\n  const { config, data, dataKey, nameKey, isLoading, selectedSector, selectSector } = usePieChart()\n  const id = useId().replace(/:/g, '')\n\n  if (isLoading) {\n    return (\n      <RechartsPie\n        data={LOADING_DATA}\n        dataKey=\"value\"\n        nameKey=\"name\"\n        innerRadius={innerRadius}\n        outerRadius={outerRadius}\n        cornerRadius={cornerRadius}\n        paddingAngle={paddingAngle}\n        startAngle={startAngle}\n        endAngle={endAngle}\n        strokeWidth={0}\n        isAnimationActive={false}\n        shape={(props) => <LoadingSector {...props} />}\n      />\n    )\n  }\n\n  const label = resolveLabel(children, dataKey)\n  const painted = data.map((row) => ({\n    ...row,\n    fill: `url(#${id}-colors-${cssName(String(row[nameKey]))})`,\n  }))\n\n  return (\n    <>\n      <RechartsPie\n        data={painted}\n        dataKey={dataKey}\n        nameKey={nameKey}\n        innerRadius={innerRadius}\n        outerRadius={outerRadius}\n        cornerRadius={cornerRadius}\n        paddingAngle={paddingAngle}\n        startAngle={startAngle}\n        endAngle={endAngle}\n        strokeWidth={0}\n        style={isClickable ? { cursor: 'pointer' } : undefined}\n        onClick={(_, index) => {\n          if (!isClickable) return\n          const name = data[index]?.[nameKey] as string\n          selectSector(selectedSector === name ? null : name)\n        }}\n        shape={(props: PieSectorShapeProps) => {\n          const name = String(data[props.index ?? 0]?.[nameKey] ?? '')\n          const isGlowing = glowingSectors.includes(name)\n          const dimmed = isClickable && selectedSector !== null && selectedSector !== name\n\n          return (\n            <Sector\n              {...props}\n              fill={`url(#${id}-colors-${cssName(name)})`}\n              filter={isGlowing ? `url(#${id}-glow-${cssName(name)})` : undefined}\n              // A negative padding angle overlaps the wedges; the surface-\n              // coloured stroke is what re-separates them into stacked cards.\n              stroke={paddingAngle < 0 ? 'var(--chart-surface)' : 'none'}\n              strokeWidth={paddingAngle < 0 ? 5 : 0}\n              opacity={dimmed ? 0.15 : 1}\n              className=\"transition-opacity duration-(--duration-base)\"\n            />\n          )\n        }}\n        {...pieProps}\n      >\n        {label}\n      </RechartsPie>\n      <defs>\n        <SectorGradients id={id} config={config} variant={variant} />\n        {glowingSectors.map((name) => (\n          <filter\n            key={name}\n            id={`${id}-glow-${cssName(name)}`}\n            x=\"-100%\"\n            y=\"-100%\"\n            width=\"300%\"\n            height=\"300%\"\n          >\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"8\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              type=\"matrix\"\n              values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0\"\n              result=\"glow\"\n            />\n            <feMerge>\n              <feMergeNode in=\"glow\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n        ))}\n      </defs>\n    </>\n  )\n}\n\nexport interface PieLabelProps {\n  /** The field printed on each wedge. Defaults to the pie's value key. */\n  dataKey?: string\n  labelListProps?: Omit<ComponentProps<typeof RechartsLabelList>, 'dataKey'>\n}\n\n/**\n * Numbers printed on the wedges. A slot — the parent reads it.\n *\n * Worth reaching for: a pie's whole weakness is that a wedge's angle is hard to\n * read, and a printed number removes the guess entirely.\n */\nconst Label: FC<PieLabelProps> = () => null\n\n/** Lifts a `<Label>` out of the pie's children into a Recharts label list. */\nfunction resolveLabel(children: ReactNode, valueKey: string): ReactNode {\n  let label: ReactNode = null\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child) || child.type !== Label) return\n    const { dataKey, labelListProps } = (child as ReactElement<PieLabelProps>).props\n\n    label = (\n      <RechartsLabelList\n        dataKey={dataKey ?? valueKey}\n        stroke=\"none\"\n        fontSize={12}\n        fontWeight={500}\n        // Reversed out of the wedge, which is the only ground it ever sits on.\n        className=\"fill-(--chart-surface)\"\n        {...labelListProps}\n      />\n    )\n  })\n\n  return label\n}\n\n/**\n * One diagonal gradient per sector.\n *\n * Diagonal rather than horizontal: a wedge is a radial shape, and a gradient\n * running corner to corner reads as light across the whole pie rather than as\n * a seam through each slice.\n */\nfunction SectorGradients({\n  id,\n  config,\n}: {\n  id: string\n  config: ChartConfig\n  /** Reserved: the pie has one fill variant. See `PieVariant`. */\n  variant: PieVariant\n}) {\n  return (\n    <>\n      {Object.entries(config).map(([key, series]) => (\n        <linearGradient\n          key={key}\n          id={`${id}-colors-${cssName(key)}`}\n          x1=\"0\"\n          y1=\"0\"\n          x2=\"1\"\n          y2=\"1\"\n        >\n          <ColorStops dataKey={cssName(key)} stops={colorStops(series)} />\n        </linearGradient>\n      ))}\n    </>\n  )\n}\n\n/** The hover panel. No heading: the wedge's own name is the row label. */\nfunction Tooltip({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) {\n  const { isLoading, nameKey } = usePieChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      content={\n        <ChartTooltipContent nameKey={nameKey} hideLabel roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\n/**\n * The key. Under the pie and centred by default, because a pie's sectors are\n * named nowhere else — unlike a bar chart, which has a category axis.\n */\nfunction Legend({\n  variant,\n  align = 'center',\n  verticalAlign = 'bottom',\n  isClickable = false,\n}: ChartLegendSlotProps) {\n  const { nameKey, selectedSector, selectSector } = usePieChart()\n\n  return (\n    <ChartLegend\n      verticalAlign={verticalAlign}\n      align={align}\n      content={\n        <ChartLegendContent\n          selected={selectedSector}\n          onSelectChange={selectSector}\n          isClickable={isClickable}\n          nameKey={nameKey}\n          variant={variant}\n        />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the pie. Compose it before `<Pie>`. */\nfunction Background({ variant = 'dots' }: { variant?: ChartBackgroundVariant }) {\n  return <ChartBackground variant={variant} />\n}\n\n/** Equal wedges for the skeleton. */\nconst LOADING_DATA = Array.from({ length: LOADING_SECTORS }, (_, index) => ({\n  name: `loading-${index}`,\n  value: 100 / LOADING_SECTORS,\n}))\n\n/**\n * One skeleton wedge, pulsing on a stagger so the wave travels round the pie.\n * Under `prefers-reduced-motion` it holds at a flat mid-opacity instead.\n */\nfunction LoadingSector(props: ComponentProps<typeof Sector> & { index?: number }) {\n  const { index = 0, ...sector } = props\n  const reduceMotion = useReducedMotion()\n  const delay = (index / LOADING_SECTORS) * LOADING_PULSE\n\n  if (reduceMotion) {\n    return (\n      <g opacity={0.3} className=\"text-(--ink)\">\n        <Sector {...sector} fill=\"currentColor\" />\n      </g>\n    )\n  }\n\n  return (\n    <motion.g\n      className=\"text-(--ink)\"\n      initial={{ opacity: 0.15 }}\n      animate={{ opacity: [0.15, 0.5, 0.15] }}\n      transition={{ duration: LOADING_PULSE, delay, repeat: Infinity, ease: 'easeInOut' }}\n    >\n      <Sector {...sector} fill=\"currentColor\" />\n    </motion.g>\n  )\n}\n\nPieChart.Pie = Pie\nPieChart.Label = Label\nPieChart.Tooltip = Tooltip\nPieChart.Legend = Legend\nPieChart.Background = Background\n\nexport default PieChart\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/charts/PieChart/PieChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  type ComponentProps,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport {\n  LabelList as RechartsLabelList,\n  Pie as RechartsPie,\n  PieChart as RechartsPieChart,\n  Sector,\n  type PieSectorShapeProps,\n} from 'recharts'\nimport { motion, useReducedMotion } from 'motion/react'\nimport { ChartContainer, colorStops, cssName, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { type ChartEmptyProps } from '../lib/empty'\nimport { useChartSelection } from '../lib/selection'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartLegend, ChartLegendContent } from '../lib/legend'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { LoadingIndicator } from '../lib/loading'\nimport { ColorStops } from '../lib/paint'\nimport type { ChartLegendSlotProps, ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/** Equal wedges the skeleton is built from. */\nconst LOADING_SECTORS = 5\n\n/** One full pulse of the loading wave, in seconds. */\nconst LOADING_PULSE = 2\n\n/**\n * How a sector is painted.\n *\n * One variant, and the honesty is deliberate: a wedge is a small, awkwardly\n * shaped area, and a texture inside one reads as noise rather than as identity.\n * Where a bar chart differentiates by fill, a pie differentiates by the gap\n * between sectors — which is what `paddingAngle` is for — and by its legend.\n */\nexport type PieVariant = 'gradient'\n\ninterface PieChartContextValue {\n  config: ChartConfig\n  data: Record<string, unknown>[]\n  dataKey: string\n  nameKey: string\n  isLoading: boolean\n  selectedSector: string | null\n  selectSector: (sector: string | null) => void\n}\n\nconst PieChartContext = createContext<PieChartContextValue | null>(null)\n\nfunction usePieChart(): PieChartContextValue {\n  const context = useContext(PieChartContext)\n  if (!context) throw new Error('A pie chart part must be rendered inside <PieChart>')\n  return context\n}\n\nexport interface PieChartProps<TData extends Record<string, unknown>> {\n  /** Sector names → their label and paint. Keys must match the `nameKey` values. */\n  config: ChartConfig\n  /** The rows the chart draws. One entry per point, bar or category. */\n  data: TData[]\n  /** The row field holding each sector's number. */\n  dataKey: keyof TData & string\n  /** The row field holding each sector's name. */\n  nameKey: keyof TData & string\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsPieChart>\n  /** The sector lit on first render, when the chart keeps its own selection. */\n  defaultSelectedSector?: string | null\n  /**\n   * The selected sector, driven from outside.\n   *\n   * Give this and the chart follows it; leave it undefined and the chart keeps\n   * its own, starting from `defaultSelectedSector`.\n   */\n  selectedSector?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selection: { name: string; value: number } | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw. `false` keeps the empty\n   * plot, for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * Parts of one whole.\n *\n * Worth saying plainly: a pie answers \"roughly what share\" and nothing more\n * precise. Comparing two adjacent wedges by eye is unreliable past about five\n * of them, and comparing a wedge across two pies is worse. When the reader\n * needs to rank or compare, a `<BarChart>` answers the same question better.\n *\n * @example\n * <PieChart title=\"Visitors by browser\" config={config} data={data} dataKey=\"visitors\" nameKey=\"browser\">\n *   <PieChart.Pie innerRadius=\"55%\" />\n *   <PieChart.Tooltip />\n *   <PieChart.Legend />\n * </PieChart>\n */\nexport function PieChart<TData extends Record<string, unknown>>({\n  config,\n  data,\n  dataKey,\n  nameKey,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  defaultSelectedSector = null,\n  selectedSector: controlledSector,\n  onSelectionChange,\n  isLoading = false,\n  hideDataTable = false,\n  empty,\n}: PieChartProps<TData>) {\n  // Not a literal. Two pies on one page shared a hard-coded id in the shape\n  // this was ported from, so the second one inherited the first one's paint.\n  const chartId = useId().replace(/:/g, '')\n\n  const report = useCallback(\n    (name: string | null) => {\n      if (name === null) {\n        onSelectionChange?.(null)\n        return\n      }\n      const row = data.find((item) => item[nameKey] === name)\n      if (row) onSelectionChange?.({ name, value: row[dataKey] as number })\n    },\n    [data, dataKey, nameKey, onSelectionChange],\n  )\n\n  const [selectedSector, selectSector] = useChartSelection(\n    controlledSector,\n    defaultSelectedSector,\n    report,\n  )\n\n  const context = useMemo<PieChartContextValue>(\n    () => ({ config, data, dataKey, nameKey, isLoading, selectedSector, selectSector }),\n    [config, data, dataKey, isLoading, nameKey, selectSector, selectedSector],\n  )\n\n  return (\n    <PieChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: data,\n                rowKey: nameKey,\n                columns: [{ key: dataKey, label: 'Value' }],\n              }\n        }\n        isEmpty={!isLoading && data.length === 0}\n        empty={empty}\n      >\n        <ChartContainer config={config}>\n          <RechartsPieChart id={chartId} accessibilityLayer {...chartProps}>\n            {children}\n          </RechartsPieChart>\n        </ChartContainer>\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </PieChartContext.Provider>\n  )\n}\n\nexport interface PieProps {\n  variant?: PieVariant\n  /** Above zero makes it a donut, which is easier to read than a full pie. */\n  innerRadius?: number | string\n  outerRadius?: number | string\n  /** Rounds each wedge's corners. */\n  cornerRadius?: number\n  /**\n   * Degrees between wedges. Negative overlaps them, which the sector's own\n   * surface-coloured stroke then separates — the \"stacked cards\" look.\n   */\n  paddingAngle?: number\n  startAngle?: number\n  endAngle?: number\n  isClickable?: boolean\n  /** Sector names drawn with a halo — for the one wedge that is the point. */\n  glowingSectors?: string[]\n  /** `<PieChart.Label>`. */\n  children?: ReactNode\n  pieProps?: Omit<ComponentProps<typeof RechartsPie>, 'data' | 'dataKey' | 'nameKey'>\n}\n\n/** Stable identity, so the default never re-triggers the memo below. */\nconst NO_GLOW: string[] = []\n\n/** The wedges themselves, with their gradients scoped to this pie's id. */\nfunction Pie({\n  variant = 'gradient',\n  innerRadius = 0,\n  outerRadius = '80%',\n  cornerRadius = 0,\n  paddingAngle = 0,\n  startAngle = 0,\n  endAngle = 360,\n  isClickable = false,\n  glowingSectors = NO_GLOW,\n  children,\n  pieProps,\n}: PieProps) {\n  const { config, data, dataKey, nameKey, isLoading, selectedSector, selectSector } = usePieChart()\n  const id = useId().replace(/:/g, '')\n\n  if (isLoading) {\n    return (\n      <RechartsPie\n        data={LOADING_DATA}\n        dataKey=\"value\"\n        nameKey=\"name\"\n        innerRadius={innerRadius}\n        outerRadius={outerRadius}\n        cornerRadius={cornerRadius}\n        paddingAngle={paddingAngle}\n        startAngle={startAngle}\n        endAngle={endAngle}\n        strokeWidth={0}\n        isAnimationActive={false}\n        shape={(props) => <LoadingSector {...props} />}\n      />\n    )\n  }\n\n  const label = resolveLabel(children, dataKey)\n  const painted = data.map((row) => ({\n    ...row,\n    fill: `url(#${id}-colors-${cssName(String(row[nameKey]))})`,\n  }))\n\n  return (\n    <>\n      <RechartsPie\n        data={painted}\n        dataKey={dataKey}\n        nameKey={nameKey}\n        innerRadius={innerRadius}\n        outerRadius={outerRadius}\n        cornerRadius={cornerRadius}\n        paddingAngle={paddingAngle}\n        startAngle={startAngle}\n        endAngle={endAngle}\n        strokeWidth={0}\n        style={isClickable ? { cursor: 'pointer' } : undefined}\n        onClick={(_, index) => {\n          if (!isClickable) return\n          const name = data[index]?.[nameKey] as string\n          selectSector(selectedSector === name ? null : name)\n        }}\n        shape={(props: PieSectorShapeProps) => {\n          const name = String(data[props.index ?? 0]?.[nameKey] ?? '')\n          const isGlowing = glowingSectors.includes(name)\n          const dimmed = isClickable && selectedSector !== null && selectedSector !== name\n\n          return (\n            <Sector\n              {...props}\n              fill={`url(#${id}-colors-${cssName(name)})`}\n              filter={isGlowing ? `url(#${id}-glow-${cssName(name)})` : undefined}\n              // A negative padding angle overlaps the wedges; the surface-\n              // coloured stroke is what re-separates them into stacked cards.\n              stroke={paddingAngle < 0 ? 'var(--chart-surface)' : 'none'}\n              strokeWidth={paddingAngle < 0 ? 5 : 0}\n              opacity={dimmed ? 0.15 : 1}\n              className=\"transition-opacity duration-(--duration-base)\"\n            />\n          )\n        }}\n        {...pieProps}\n      >\n        {label}\n      </RechartsPie>\n      <defs>\n        <SectorGradients id={id} config={config} variant={variant} />\n        {glowingSectors.map((name) => (\n          <filter\n            key={name}\n            id={`${id}-glow-${cssName(name)}`}\n            x=\"-100%\"\n            y=\"-100%\"\n            width=\"300%\"\n            height=\"300%\"\n          >\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"8\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              type=\"matrix\"\n              values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0\"\n              result=\"glow\"\n            />\n            <feMerge>\n              <feMergeNode in=\"glow\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n        ))}\n      </defs>\n    </>\n  )\n}\n\nexport interface PieLabelProps {\n  /** The field printed on each wedge. Defaults to the pie's value key. */\n  dataKey?: string\n  labelListProps?: Omit<ComponentProps<typeof RechartsLabelList>, 'dataKey'>\n}\n\n/**\n * Numbers printed on the wedges. A slot — the parent reads it.\n *\n * Worth reaching for: a pie's whole weakness is that a wedge's angle is hard to\n * read, and a printed number removes the guess entirely.\n */\nconst Label: FC<PieLabelProps> = () => null\n\n/** Lifts a `<Label>` out of the pie's children into a Recharts label list. */\nfunction resolveLabel(children: ReactNode, valueKey: string): ReactNode {\n  let label: ReactNode = null\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child) || child.type !== Label) return\n    const { dataKey, labelListProps } = (child as ReactElement<PieLabelProps>).props\n\n    label = (\n      <RechartsLabelList\n        dataKey={dataKey ?? valueKey}\n        stroke=\"none\"\n        fontSize={12}\n        fontWeight={500}\n        // Reversed out of the wedge, which is the only ground it ever sits on.\n        className=\"fill-(--chart-surface)\"\n        {...labelListProps}\n      />\n    )\n  })\n\n  return label\n}\n\n/**\n * One diagonal gradient per sector.\n *\n * Diagonal rather than horizontal: a wedge is a radial shape, and a gradient\n * running corner to corner reads as light across the whole pie rather than as\n * a seam through each slice.\n */\nfunction SectorGradients({\n  id,\n  config,\n}: {\n  id: string\n  config: ChartConfig\n  /** Reserved: the pie has one fill variant. See `PieVariant`. */\n  variant: PieVariant\n}) {\n  return (\n    <>\n      {Object.entries(config).map(([key, series]) => (\n        <linearGradient\n          key={key}\n          id={`${id}-colors-${cssName(key)}`}\n          x1=\"0\"\n          y1=\"0\"\n          x2=\"1\"\n          y2=\"1\"\n        >\n          <ColorStops dataKey={cssName(key)} stops={colorStops(series)} />\n        </linearGradient>\n      ))}\n    </>\n  )\n}\n\n/** The hover panel. No heading: the wedge's own name is the row label. */\nfunction Tooltip({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) {\n  const { isLoading, nameKey } = usePieChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      content={\n        <ChartTooltipContent nameKey={nameKey} hideLabel roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\n/**\n * The key. Under the pie and centred by default, because a pie's sectors are\n * named nowhere else — unlike a bar chart, which has a category axis.\n */\nfunction Legend({\n  variant,\n  align = 'center',\n  verticalAlign = 'bottom',\n  isClickable = false,\n}: ChartLegendSlotProps) {\n  const { nameKey, selectedSector, selectSector } = usePieChart()\n\n  return (\n    <ChartLegend\n      verticalAlign={verticalAlign}\n      align={align}\n      content={\n        <ChartLegendContent\n          selected={selectedSector}\n          onSelectChange={selectSector}\n          isClickable={isClickable}\n          nameKey={nameKey}\n          variant={variant}\n        />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the pie. Compose it before `<Pie>`. */\nfunction Background({ variant = 'dots' }: { variant?: ChartBackgroundVariant }) {\n  return <ChartBackground variant={variant} />\n}\n\n/** Equal wedges for the skeleton. */\nconst LOADING_DATA = Array.from({ length: LOADING_SECTORS }, (_, index) => ({\n  name: `loading-${index}`,\n  value: 100 / LOADING_SECTORS,\n}))\n\n/**\n * One skeleton wedge, pulsing on a stagger so the wave travels round the pie.\n * Under `prefers-reduced-motion` it holds at a flat mid-opacity instead.\n */\nfunction LoadingSector(props: ComponentProps<typeof Sector> & { index?: number }) {\n  const { index = 0, ...sector } = props\n  const reduceMotion = useReducedMotion()\n  const delay = (index / LOADING_SECTORS) * LOADING_PULSE\n\n  if (reduceMotion) {\n    return (\n      <g opacity={0.3} className=\"text-(--ink)\">\n        <Sector {...sector} fill=\"currentColor\" />\n      </g>\n    )\n  }\n\n  return (\n    <motion.g\n      className=\"text-(--ink)\"\n      initial={{ opacity: 0.15 }}\n      animate={{ opacity: [0.15, 0.5, 0.15] }}\n      transition={{ duration: LOADING_PULSE, delay, repeat: Infinity, ease: 'easeInOut' }}\n    >\n      <Sector {...sector} fill=\"currentColor\" />\n    </motion.g>\n  )\n}\n\nPieChart.Pie = Pie\nPieChart.Label = Label\nPieChart.Tooltip = Tooltip\nPieChart.Legend = Legend\nPieChart.Background = Background\n\nexport default PieChart\n"],"mappings":";AAyLM,SAgGF,UA9EM,KAlBJ;AAvLN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP;AAAA,EACE,aAAa;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,OAEK;AACP,SAAS,QAAQ,wBAAwB;AACzC,SAAS,gBAAgB,YAAY,eAAiC;AACtE,SAAS,mBAAmB;AAC5B,eAAqC;AACrC,SAAS,yBAAyB;AAClC,SAAS,uBAAoD;AAC7D,SAAS,aAAa,0BAA0B;AAChD,SAAS,cAAc,2BAA2B;AAClD,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAI3B,MAAM,kBAAkB;AAGxB,MAAM,gBAAgB;AAsBtB,MAAM,kBAAkB,cAA2C,IAAI;AAEvE,SAAS,cAAoC;AAC3C,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,qDAAqD;AACnF,SAAO;AACT;AAwEO,SAAS,SAAgD;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AACF,GAAyB;AAGvB,QAAM,UAAU,MAAM,EAAE,QAAQ,MAAM,EAAE;AAExC,QAAM,SAAS;AAAA,IACb,CAAC,SAAwB;AACvB,UAAI,SAAS,MAAM;AACjB,4BAAoB,IAAI;AACxB;AAAA,MACF;AACA,YAAM,MAAM,KAAK,KAAK,CAAC,SAAS,KAAK,OAAO,MAAM,IAAI;AACtD,UAAI,IAAK,qBAAoB,EAAE,MAAM,OAAO,IAAI,OAAO,EAAY,CAAC;AAAA,IACtE;AAAA,IACA,CAAC,MAAM,SAAS,SAAS,iBAAiB;AAAA,EAC5C;AAEA,QAAM,CAAC,gBAAgB,YAAY,IAAI;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,UAAU;AAAA,IACd,OAAO,EAAE,QAAQ,MAAM,SAAS,SAAS,WAAW,gBAAgB,aAAa;AAAA,IACjF,CAAC,QAAQ,MAAM,SAAS,WAAW,SAAS,cAAc,cAAc;AAAA,EAC1E;AAEA,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,SAC/B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OACE,gBACI,QACA;AAAA,QACE,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS,CAAC,EAAE,KAAK,SAAS,OAAO,QAAQ,CAAC;AAAA,MAC5C;AAAA,MAEN,SAAS,CAAC,aAAa,KAAK,WAAW;AAAA,MACvC;AAAA,MAEA;AAAA,4BAAC,kBAAe,QACd,8BAAC,oBAAiB,IAAI,SAAS,oBAAkB,MAAE,GAAG,YACnD,UACH,GACF;AAAA,QACA,oBAAC,oBAAiB,WAAsB;AAAA;AAAA;AAAA,EAC1C,GACF;AAEJ;AAyBA,MAAM,UAAoB,CAAC;AAG3B,SAAS,IAAI;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AAAA,EACb,WAAW;AAAA,EACX,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,GAAa;AACX,QAAM,EAAE,QAAQ,MAAM,SAAS,SAAS,WAAW,gBAAgB,aAAa,IAAI,YAAY;AAChG,QAAM,KAAK,MAAM,EAAE,QAAQ,MAAM,EAAE;AAEnC,MAAI,WAAW;AACb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAQ;AAAA,QACR,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb,mBAAmB;AAAA,QACnB,OAAO,CAAC,UAAU,oBAAC,iBAAe,GAAG,OAAO;AAAA;AAAA,IAC9C;AAAA,EAEJ;AAEA,QAAM,QAAQ,aAAa,UAAU,OAAO;AAC5C,QAAM,UAAU,KAAK,IAAI,CAAC,SAAS;AAAA,IACjC,GAAG;AAAA,IACH,MAAM,QAAQ,EAAE,WAAW,QAAQ,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC;AAAA,EAC1D,EAAE;AAEF,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb,OAAO,cAAc,EAAE,QAAQ,UAAU,IAAI;AAAA,QAC7C,SAAS,CAAC,GAAG,UAAU;AACrB,cAAI,CAAC,YAAa;AAClB,gBAAM,OAAO,KAAK,KAAK,IAAI,OAAO;AAClC,uBAAa,mBAAmB,OAAO,OAAO,IAAI;AAAA,QACpD;AAAA,QACA,OAAO,CAAC,UAA+B;AACrC,gBAAM,OAAO,OAAO,KAAK,MAAM,SAAS,CAAC,IAAI,OAAO,KAAK,EAAE;AAC3D,gBAAM,YAAY,eAAe,SAAS,IAAI;AAC9C,gBAAM,SAAS,eAAe,mBAAmB,QAAQ,mBAAmB;AAE5E,iBACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,MAAM,QAAQ,EAAE,WAAW,QAAQ,IAAI,CAAC;AAAA,cACxC,QAAQ,YAAY,QAAQ,EAAE,SAAS,QAAQ,IAAI,CAAC,MAAM;AAAA,cAG1D,QAAQ,eAAe,IAAI,yBAAyB;AAAA,cACpD,aAAa,eAAe,IAAI,IAAI;AAAA,cACpC,SAAS,SAAS,OAAO;AAAA,cACzB,WAAU;AAAA;AAAA,UACZ;AAAA,QAEJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IACA,qBAAC,UACC;AAAA,0BAAC,mBAAgB,IAAQ,QAAgB,SAAkB;AAAA,MAC1D,eAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,IAAI,GAAG,EAAE,SAAS,QAAQ,IAAI,CAAC;AAAA,UAC/B,GAAE;AAAA,UACF,GAAE;AAAA,UACF,OAAM;AAAA,UACN,QAAO;AAAA,UAEP;AAAA,gCAAC,oBAAe,IAAG,iBAAgB,cAAa,KAAI,QAAO,QAAO;AAAA,YAClE;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,QAAO;AAAA;AAAA,YACT;AAAA,YACA,qBAAC,aACC;AAAA,kCAAC,iBAAY,IAAG,QAAO;AAAA,cACvB,oBAAC,iBAAY,IAAG,iBAAgB;AAAA,eAClC;AAAA;AAAA;AAAA,QAjBK;AAAA,MAkBP,CACD;AAAA,OACH;AAAA,KACF;AAEJ;AAcA,MAAM,QAA2B,MAAM;AAGvC,SAAS,aAAa,UAAqB,UAA6B;AACtE,MAAI,QAAmB;AAEvB,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,eAAe,KAAK,KAAK,MAAM,SAAS,MAAO;AACpD,UAAM,EAAE,SAAS,eAAe,IAAK,MAAsC;AAE3E,YACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,WAAW;AAAA,QACpB,QAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QAEZ,WAAU;AAAA,QACT,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ,CAAC;AAED,SAAO;AACT;AASA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAKG;AACD,SACE,gCACG,iBAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,MAAM,MACvC;AAAA,IAAC;AAAA;AAAA,MAEC,IAAI,GAAG,EAAE,WAAW,QAAQ,GAAG,CAAC;AAAA,MAChC,IAAG;AAAA,MACH,IAAG;AAAA,MACH,IAAG;AAAA,MACH,IAAG;AAAA,MAEH,8BAAC,cAAW,SAAS,QAAQ,GAAG,GAAG,OAAO,WAAW,MAAM,GAAG;AAAA;AAAA,IAPzD;AAAA,EAQP,CACD,GACH;AAEJ;AAGA,SAAS,QAAQ,EAAE,SAAS,WAAW,aAAa,GAA0B;AAC5E,QAAM,EAAE,WAAW,QAAQ,IAAI,YAAY;AAC3C,MAAI,UAAW,QAAO;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SACE,oBAAC,uBAAoB,SAAkB,WAAS,MAAC,WAAsB,SAAkB;AAAA;AAAA,EAE7F;AAEJ;AAMA,SAAS,OAAO;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,cAAc;AAChB,GAAyB;AACvB,QAAM,EAAE,SAAS,gBAAgB,aAAa,IAAI,YAAY;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAGA,SAAS,WAAW,EAAE,UAAU,OAAO,GAAyC;AAC9E,SAAO,oBAAC,mBAAgB,SAAkB;AAC5C;AAGA,MAAM,eAAe,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,CAAC,GAAG,WAAW;AAAA,EAC1E,MAAM,WAAW,KAAK;AAAA,EACtB,OAAO,MAAM;AACf,EAAE;AAMF,SAAS,cAAc,OAA2D;AAChF,QAAM,EAAE,QAAQ,GAAG,GAAG,OAAO,IAAI;AACjC,QAAM,eAAe,iBAAiB;AACtC,QAAM,QAAS,QAAQ,kBAAmB;AAE1C,MAAI,cAAc;AAChB,WACE,oBAAC,OAAE,SAAS,KAAK,WAAU,gBACzB,8BAAC,UAAQ,GAAG,QAAQ,MAAK,gBAAe,GAC1C;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,WAAU;AAAA,MACV,SAAS,EAAE,SAAS,KAAK;AAAA,MACzB,SAAS,EAAE,SAAS,CAAC,MAAM,KAAK,IAAI,EAAE;AAAA,MACtC,YAAY,EAAE,UAAU,eAAe,OAAO,QAAQ,UAAU,MAAM,YAAY;AAAA,MAElF,8BAAC,UAAQ,GAAG,QAAQ,MAAK,gBAAe;AAAA;AAAA,EAC1C;AAEJ;AAEA,SAAS,MAAM;AACf,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,aAAa;AAEtB,IAAO,mBAAQ;","names":[]}

package/dist/charts/RadarChart/RadarChart.d.ts

@@ -2,10 +2,10 @@ import * as react from 'react';
 import { ReactNode, ComponentProps, FC } from 'react';
 import { RadarChart as RadarChart$1, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts';
 import { ChartConfig } from '../lib/chart.js';
+import { ChartEmptyProps } from '../lib/empty.js';
 import { ChartBackgroundVariant } from '../lib/background.js';
 import { ChartDotVariant } from '../lib/dot.js';
 import { ChartTooltipSlotProps, ChartLegendSlotProps } from '../AreaChart/AreaChart.js';
-import '../lib/empty.js';
 import '../lib/values.js';
 import '../lib/sonify-control.js';
 import '../lib/sonify.js';
@@ -52,8 +52,15 @@ interface RadarChartProps<TData extends Record<string, unknown>, TConfig extends
     className?: string;
     /** Escape hatch onto the raw Recharts chart element. */
     chartProps?: ComponentProps<typeof RadarChart$1>;
-    /** The series lit on first render. Selection dims every other series. */
+    /** The series lit on first render, when the chart keeps its own selection. */
     defaultSelectedDataKey?: string | null;
+    /**
+     * The selected series, driven from outside.
+     *
+     * Give this and the chart follows it; leave it undefined and the chart keeps
+     * its own, starting from `defaultSelectedDataKey`.
+     */
+    selectedDataKey?: string | null;
     /** Fires when the selection changes, and with null when it is cleared. */
     onSelectionChange?: (selectedDataKey: string | null) => void;
     /**
@@ -70,6 +77,11 @@ interface RadarChartProps<TData extends Record<string, unknown>, TConfig extends
      * itself.
      */
     hideDataTable?: boolean;
+    /**
+     * What the chart shows when it has nothing to draw. `false` keeps the empty
+     * plot, for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
 }
 /**
  * A profile across several named dimensions — the shape for "what is this thing
@@ -88,7 +100,7 @@ interface RadarChartProps<TData extends Record<string, unknown>, TConfig extends
  *   <RadarChart.Radar dataKey="current" />
  * </RadarChart>
  */
-declare function RadarChart<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>>({ config, data, title, showTitle, description, children, className, chartProps, defaultSelectedDataKey, onSelectionChange, isLoading, loadingPoints, angleDataKey, hideDataTable, }: RadarChartProps<TData, TConfig>): react.JSX.Element;
+declare function RadarChart<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>>({ config, data, title, showTitle, description, children, className, chartProps, defaultSelectedDataKey, selectedDataKey: controlledDataKey, onSelectionChange, isLoading, loadingPoints, angleDataKey, hideDataTable, empty, }: RadarChartProps<TData, TConfig>): react.JSX.Element;
 declare namespace RadarChart {
     var Radar: ({ dataKey, variant, fillOpacity, glowing, isClickable, children, radarProps, }: RadarProps) => react.JSX.Element | null;
     var Dot: FC<DotProps>;

package/dist/charts/RadarChart/RadarChart.js

@@ -4,7 +4,6 @@ import {
   Children,
   createContext,
   isValidElement,
-  useCallback,
   useContext,
   useEffect,
   useId,
@@ -21,6 +20,8 @@ import {
 import { useReducedMotion } from "motion/react";
 import { ChartContainer, colorStops } from "../lib/chart.js";
 import { ChartFigure } from "../lib/figure.js";
+import {} from "../lib/empty.js";
+import { useChartSelection } from "../lib/selection.js";
 import { ChartBackground } from "../lib/background.js";
 import { ChartDot } from "../lib/dot.js";
 import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
@@ -47,21 +48,20 @@ function RadarChart({
   className,
   chartProps,
   defaultSelectedDataKey = null,
+  selectedDataKey: controlledDataKey,
   onSelectionChange,
   isLoading = false,
   loadingPoints,
   angleDataKey,
-  hideDataTable = false
+  hideDataTable = false,
+  empty
 }) {
   const chartId = useId().replace(/:/g, "");
-  const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey);
   const loadingData = useLoadingShape(isLoading, loadingPoints);
-  const selectDataKey = useCallback(
-    (next) => {
-      setSelectedDataKey(next);
-      onSelectionChange?.(next);
-    },
-    [onSelectionChange]
+  const [selectedDataKey, selectDataKey] = useChartSelection(
+    controlledDataKey,
+    defaultSelectedDataKey,
+    onSelectionChange
   );
   const context = useMemo(
     () => ({ config, isLoading, selectedDataKey, selectDataKey }),
@@ -82,6 +82,8 @@ function RadarChart({
           label: series.label
         }))
       },
+      isEmpty: !isLoading && data.length === 0,
+      empty,
       children: [
         /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(RechartsRadarChart, { id: chartId, data: isLoading ? loadingData : data, ...chartProps, children: [
           children,
@@ -109,7 +111,9 @@ function Radar({
   const opacity = { stroke: dimmed ? 0.2 : 1, fill: dimmed ? 0.1 : 1, dot: dimmed ? 0.2 : 1 };
   const isFilled = variant === "filled";
   const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot);
-  const filledStrength = `calc(var(--chart-fill) * ${FILL_STRENGTH})`;
+  const dimFill = dimmed ? ` * ${opacity.fill}` : "";
+  const filledStrength = `calc(var(--chart-fill) * ${FILL_STRENGTH}${dimFill})`;
+  const filledOpacity = fillOpacity === void 0 ? filledStrength : fillOpacity * opacity.fill;
   const stops = colorStops(config[dataKey]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -120,7 +124,7 @@ function Radar({
         strokeOpacity: opacity.stroke,
         strokeWidth: STROKE_WIDTH,
         fill: isFilled ? `url(#${id}-fill-${dataKey})` : "none",
-        fillOpacity: isFilled ? (fillOpacity ?? filledStrength) * opacity.fill : 0,
+        fillOpacity: isFilled ? filledOpacity : 0,
         dot,
         activeDot,
         filter: glowing ? `url(#${id}-glow-${dataKey})` : void 0,

package/dist/charts/RadarChart/RadarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/charts/RadarChart/RadarChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport {\n  PolarAngleAxis as RechartsPolarAngleAxis,\n  PolarGrid as RechartsPolarGrid,\n  PolarRadiusAxis as RechartsPolarRadiusAxis,\n  Radar as RechartsRadar,\n  RadarChart as RechartsRadarChart,\n} from 'recharts'\nimport { useReducedMotion } from 'motion/react'\nimport { ChartContainer, colorStops, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartDot, type ChartDotVariant } from '../lib/dot'\nimport { ChartLegend, ChartLegendContent } from '../lib/legend'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { LoadingIndicator } from '../lib/loading'\nimport { ColorStops, GlowFilter, SeriesGradient } from '../lib/paint'\nimport type { ChartLegendSlotProps, ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\nconst STROKE_WIDTH = 1\n/**\n * How solid a filled radar is, as a multiplier on `--chart-fill`.\n *\n * Above 1 because a radar's fill is the mark itself rather than a wash under a\n * line — it has to hold its shape where two of them overlap.\n */\nconst FILL_STRENGTH = 2.2\nconst LOADING_POINTS = 6\n\n/** One skeleton morph, in milliseconds. */\nconst LOADING_CYCLE = 1500\n\n/**\n * Whether a radar is filled or left as an outline.\n *\n * `lines` is the honest default above two series: filled polygons overlap, and\n * the reader is then judging areas through two layers of translucency, which is\n * the one thing a radar is worst at.\n */\nexport type RadarVariant = 'filled' | 'lines'\n\ninterface RadarChartContextValue {\n  config: ChartConfig\n  isLoading: boolean\n  selectedDataKey: string | null\n  selectDataKey: (dataKey: string | null) => void\n}\n\nconst RadarChartContext = createContext<RadarChartContextValue | null>(null)\n\nfunction useRadarChart(): RadarChartContextValue {\n  const context = useContext(RadarChartContext)\n  if (!context) throw new Error('A radar chart part must be rendered inside <RadarChart>')\n  return context\n}\n\ntype ValidateKeys<TData, TConfig> = {\n  [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never\n}\n\nexport interface RadarChartProps<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n> {\n  config: TConfig & ValidateKeys<TData, TConfig>\n  /** The rows the chart draws. One entry per point, bar or category. */\n  data: TData[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsRadarChart>\n  /** The series lit on first render. Selection dims every other series. */\n  defaultSelectedDataKey?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selectedDataKey: string | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /** How many points the skeleton draws. */\n  loadingPoints?: number\n  /** The row field naming each spoke. Used by the table view. */\n  angleDataKey?: keyof TData & string\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n}\n\n/**\n * A profile across several named dimensions — the shape for \"what is this thing\n * strong and weak at\".\n *\n * It reads a SHAPE, not a set of values: the area a radar encloses depends on\n * the order the spokes happen to be in, so it is the wrong chart for comparing\n * magnitudes and the right one for recognising a silhouette. Two or three\n * series at most.\n *\n * @example\n * <RadarChart title=\"Team skills\" config={config} data={data} angleDataKey=\"skill\">\n *   <RadarChart.PolarGrid />\n *   <RadarChart.PolarAngleAxis dataKey=\"skill\" />\n *   <RadarChart.Tooltip />\n *   <RadarChart.Radar dataKey=\"current\" />\n * </RadarChart>\n */\nexport function RadarChart<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n>({\n  config,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  defaultSelectedDataKey = null,\n  onSelectionChange,\n  isLoading = false,\n  loadingPoints,\n  angleDataKey,\n  hideDataTable = false,\n}: RadarChartProps<TData, TConfig>) {\n  const chartId = useId().replace(/:/g, '')\n  const [selectedDataKey, setSelectedDataKey] = useState<string | null>(defaultSelectedDataKey)\n  const loadingData = useLoadingShape(isLoading, loadingPoints)\n\n  const selectDataKey = useCallback(\n    (next: string | null) => {\n      setSelectedDataKey(next)\n      onSelectionChange?.(next)\n    },\n    [onSelectionChange],\n  )\n\n  const context = useMemo<RadarChartContextValue>(\n    () => ({ config, isLoading, selectedDataKey, selectDataKey }),\n    [config, isLoading, selectDataKey, selectedDataKey],\n  )\n\n  return (\n    <RadarChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: data,\n                rowKey: angleDataKey,\n                columns: Object.entries(config).map(([key, series]) => ({\n                  key,\n                  label: series.label,\n                })),\n              }\n        }\n      >\n        <ChartContainer config={config}>\n          <RechartsRadarChart id={chartId} data={isLoading ? loadingData : data} {...chartProps}>\n            {children}\n            {isLoading && <LoadingRadar />}\n          </RechartsRadarChart>\n        </ChartContainer>\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </RadarChartContext.Provider>\n  )\n}\n\nexport interface RadarProps {\n  dataKey: string\n  variant?: RadarVariant\n  /**\n   * How solid the filled area is, 0–1. Left unset it follows `--chart-fill`,\n   * which is what keeps it readable on both grounds.\n   */\n  fillOpacity?: number\n  /** A halo around the outline — for the one series that is the point. */\n  glowing?: boolean\n  isClickable?: boolean\n  children?: ReactNode\n  radarProps?: Omit<ComponentProps<typeof RechartsRadar>, 'dataKey'>\n}\n\n/** One radar series, with its stroke, fill and glow scoped to its own id. */\nfunction Radar({\n  dataKey,\n  variant = 'filled',\n  fillOpacity,\n  glowing = false,\n  isClickable = false,\n  children,\n  radarProps,\n}: RadarProps) {\n  const { config, isLoading, selectedDataKey, selectDataKey } = useRadarChart()\n  const id = useId().replace(/:/g, '')\n\n  if (isLoading) return null\n\n  const isSelected = selectedDataKey === null || selectedDataKey === dataKey\n  const dimmed = isClickable && !isSelected\n  // The fill recedes twice as far as the stroke. A dimmed outline still traces\n  // its shape, which is what a radar is read by; a dimmed fill just muddies the\n  // one that was picked.\n  const opacity = { stroke: dimmed ? 0.2 : 1, fill: dimmed ? 0.1 : 1, dot: dimmed ? 0.2 : 1 }\n  const isFilled = variant === 'filled'\n\n  const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot)\n  // `--chart-fill` is a number, not a length, so it can be read into a\n  // calc() the SVG attribute accepts — which is how the default follows the\n  // ground without the component knowing which ground it is on.\n  const filledStrength = `calc(var(--chart-fill) * ${FILL_STRENGTH})` as unknown as number\n  const stops = colorStops(config[dataKey])\n\n  return (\n    <>\n      <RechartsRadar\n        dataKey={dataKey}\n        stroke={`url(#${id}-stroke-${dataKey})`}\n        strokeOpacity={opacity.stroke}\n        strokeWidth={STROKE_WIDTH}\n        fill={isFilled ? `url(#${id}-fill-${dataKey})` : 'none'}\n        fillOpacity={isFilled ? (fillOpacity ?? filledStrength) * opacity.fill : 0}\n        dot={dot}\n        activeDot={activeDot}\n        filter={glowing ? `url(#${id}-glow-${dataKey})` : undefined}\n        className=\"transition-opacity duration-(--duration-base)\"\n        style={isClickable ? { cursor: 'pointer' } : undefined}\n        onClick={() => {\n          if (!isClickable) return\n          selectDataKey(selectedDataKey === dataKey ? null : dataKey)\n        }}\n        {...radarProps}\n      />\n      <defs>\n        {/* The dots read this one; the stroke and fill get their own below. */}\n        <SeriesGradient id={id} dataKey={dataKey} config={config} />\n        <linearGradient id={`${id}-stroke-${dataKey}`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <ColorStops dataKey={dataKey} stops={stops} />\n        </linearGradient>\n        {isFilled && (\n          // Radial, and fading outward: a flat fill makes the outer ring — the\n          // part carrying the shape — the least readable part of the mark.\n          <radialGradient id={`${id}-fill-${dataKey}`} cx=\"50%\" cy=\"50%\" r=\"50%\">\n            <ColorStops\n              dataKey={dataKey}\n              stops={stops}\n              opacities={\n                stops === 1 ? [0.8, 0.3] : Array.from({ length: stops }, (_, i) => (i === 0 ? 0.8 : 0.3))\n              }\n            />\n          </radialGradient>\n        )}\n        {glowing && <GlowFilter id={id} dataKey={dataKey} spread={4} intensity={0.6} />}\n      </defs>\n    </>\n  )\n}\n\nexport interface DotProps {\n  variant?: ChartDotVariant\n}\n\n/** The resting point marker for the radar it is composed inside. A slot. */\nconst Dot: FC<DotProps> = () => null\n\n/** The marker under the pointer. */\nconst ActiveDot: FC<DotProps> = () => null\n\nfunction resolveDots(children: ReactNode, id: string, dataKey: string, dotOpacity: number) {\n  let dot: ComponentProps<typeof RechartsRadar>['dot'] = false\n  let activeDot: ComponentProps<typeof RechartsRadar>['activeDot'] = false\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return\n    const { variant } = (child as ReactElement<DotProps>).props\n\n    if (child.type === Dot) {\n      dot = <ChartDot variant={variant} dataKey={dataKey} chartId={id} fillOpacity={dotOpacity} />\n    }\n    if (child.type === ActiveDot) {\n      activeDot = (\n        <ChartDot variant={variant} dataKey={dataKey} chartId={id} fillOpacity={dotOpacity} />\n      )\n    }\n  })\n\n  return { dot, activeDot }\n}\n\n/**\n * The web behind the marks. `gridType=\"circle\"` swaps the polygon for rings,\n * which reads as a scale rather than as a shape and suits a single series.\n */\nfunction PolarGrid({\n  gridType = 'polygon',\n  stroke = 'var(--chart-grid)',\n  strokeDasharray = '3 4',\n  ...rest\n}: ComponentProps<typeof RechartsPolarGrid>) {\n  return (\n    <RechartsPolarGrid\n      gridType={gridType}\n      stroke={stroke}\n      strokeDasharray={strokeDasharray}\n      {...rest}\n    />\n  )\n}\n\n/** The spoke labels around the perimeter. */\nfunction PolarAngleAxis({\n  tick = { fill: 'var(--chart-axis)', fontSize: 12 },\n  tickLine = false,\n  ...rest\n}: ComponentProps<typeof RechartsPolarAngleAxis>) {\n  const { isLoading } = useRadarChart()\n  if (isLoading) return null\n  return <RechartsPolarAngleAxis tick={tick} tickLine={tickLine} {...rest} />\n}\n\n/** The scale running out from the centre. */\nfunction PolarRadiusAxis({\n  tick = { fill: 'var(--chart-axis)', fontSize: 10 },\n  tickLine = false,\n  axisLine = false,\n  ...rest\n}: ComponentProps<typeof RechartsPolarRadiusAxis>) {\n  const { isLoading } = useRadarChart()\n  if (isLoading) return null\n  return (\n    <RechartsPolarRadiusAxis tick={tick} tickLine={tickLine} axisLine={axisLine} {...rest} />\n  )\n}\n\n/** The hover panel. No crosshair: there is no straight axis to run one along. */\nfunction Tooltip({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) {\n  const { isLoading, selectedDataKey } = useRadarChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      cursor={false}\n      content={\n        <ChartTooltipContent selected={selectedDataKey} roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\n/** The key. Under the web and centred, since the spokes name dimensions, not series. */\nfunction Legend({\n  variant,\n  align = 'center',\n  verticalAlign = 'bottom',\n  isClickable = false,\n}: ChartLegendSlotProps) {\n  const { isLoading, selectedDataKey, selectDataKey } = useRadarChart()\n  if (isLoading) return null\n\n  return (\n    <ChartLegend\n      verticalAlign={verticalAlign}\n      align={align}\n      content={\n        <ChartLegendContent\n          selected={selectedDataKey}\n          onSelectChange={selectDataKey}\n          isClickable={isClickable}\n          variant={variant}\n        />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the web. */\nfunction Background({ variant = 'dots' }: { variant?: ChartBackgroundVariant }) {\n  const { isLoading } = useRadarChart()\n  if (isLoading) return null\n  return <ChartBackground variant={variant} />\n}\n\n/** A deterministic spoke value, so the server and the client agree. */\nfunction shape(index: number, cycle: number): number {\n  const x = Math.sin(index * 91.7 + cycle * 47.3) * 21_942.7\n  return 30 + (x - Math.floor(x)) * 70\n}\n\n/**\n * The skeleton's spokes, re-rolled once per cycle.\n *\n * An interval rather than the shimmer's exit callback: a radar's skeleton\n * animates by MORPHING between shapes, which is Recharts' own transition, so\n * there is no travelling highlight to synchronise against.\n */\nfunction useLoadingShape(isLoading: boolean, points = LOADING_POINTS) {\n  const [cycle, setCycle] = useState(0)\n\n  useEffect(() => {\n    if (!isLoading) return\n    const timer = setInterval(() => setCycle((previous) => previous + 1), LOADING_CYCLE)\n    return () => clearInterval(timer)\n  }, [isLoading])\n\n  return useMemo(\n    () =>\n      Array.from({ length: points }, (_, index) => ({\n        spoke: String.fromCharCode(65 + index),\n        value: shape(index, cycle),\n      })),\n    [cycle, points],\n  )\n}\n\n/** The skeleton radar, morphing between shapes while the data is in flight. */\nfunction LoadingRadar() {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <RechartsRadar\n      dataKey=\"value\"\n      stroke=\"currentColor\"\n      strokeOpacity={0.3}\n      strokeWidth={2}\n      fill=\"currentColor\"\n      fillOpacity={0.1}\n      dot={false}\n      className=\"text-(--ink)\"\n      isAnimationActive={!reduceMotion}\n      animationDuration={LOADING_CYCLE}\n      animationEasing=\"ease-in-out\"\n    />\n  )\n}\n\nRadarChart.Radar = Radar\nRadarChart.Dot = Dot\nRadarChart.ActiveDot = ActiveDot\nRadarChart.PolarGrid = PolarGrid\nRadarChart.PolarAngleAxis = PolarAngleAxis\nRadarChart.PolarRadiusAxis = PolarRadiusAxis\nRadarChart.Tooltip = Tooltip\nRadarChart.Legend = Legend\nRadarChart.Background = Background\n\nexport default RadarChart\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/charts/RadarChart/RadarChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport {\n  PolarAngleAxis as RechartsPolarAngleAxis,\n  PolarGrid as RechartsPolarGrid,\n  PolarRadiusAxis as RechartsPolarRadiusAxis,\n  Radar as RechartsRadar,\n  RadarChart as RechartsRadarChart,\n} from 'recharts'\nimport { useReducedMotion } from 'motion/react'\nimport { ChartContainer, colorStops, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { type ChartEmptyProps } from '../lib/empty'\nimport { useChartSelection } from '../lib/selection'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartDot, type ChartDotVariant } from '../lib/dot'\nimport { ChartLegend, ChartLegendContent } from '../lib/legend'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { LoadingIndicator } from '../lib/loading'\nimport { ColorStops, GlowFilter, SeriesGradient } from '../lib/paint'\nimport type { ChartLegendSlotProps, ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\nconst STROKE_WIDTH = 1\n/**\n * How solid a filled radar is, as a multiplier on `--chart-fill`.\n *\n * Above 1 because a radar's fill is the mark itself rather than a wash under a\n * line — it has to hold its shape where two of them overlap.\n */\nconst FILL_STRENGTH = 2.2\nconst LOADING_POINTS = 6\n\n/** One skeleton morph, in milliseconds. */\nconst LOADING_CYCLE = 1500\n\n/**\n * Whether a radar is filled or left as an outline.\n *\n * `lines` is the honest default above two series: filled polygons overlap, and\n * the reader is then judging areas through two layers of translucency, which is\n * the one thing a radar is worst at.\n */\nexport type RadarVariant = 'filled' | 'lines'\n\ninterface RadarChartContextValue {\n  config: ChartConfig\n  isLoading: boolean\n  selectedDataKey: string | null\n  selectDataKey: (dataKey: string | null) => void\n}\n\nconst RadarChartContext = createContext<RadarChartContextValue | null>(null)\n\nfunction useRadarChart(): RadarChartContextValue {\n  const context = useContext(RadarChartContext)\n  if (!context) throw new Error('A radar chart part must be rendered inside <RadarChart>')\n  return context\n}\n\ntype ValidateKeys<TData, TConfig> = {\n  [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never\n}\n\nexport interface RadarChartProps<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n> {\n  config: TConfig & ValidateKeys<TData, TConfig>\n  /** The rows the chart draws. One entry per point, bar or category. */\n  data: TData[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsRadarChart>\n  /** The series lit on first render, when the chart keeps its own selection. */\n  defaultSelectedDataKey?: string | null\n  /**\n   * The selected series, driven from outside.\n   *\n   * Give this and the chart follows it; leave it undefined and the chart keeps\n   * its own, starting from `defaultSelectedDataKey`.\n   */\n  selectedDataKey?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selectedDataKey: string | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /** How many points the skeleton draws. */\n  loadingPoints?: number\n  /** The row field naming each spoke. Used by the table view. */\n  angleDataKey?: keyof TData & string\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw. `false` keeps the empty\n   * plot, for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * A profile across several named dimensions — the shape for \"what is this thing\n * strong and weak at\".\n *\n * It reads a SHAPE, not a set of values: the area a radar encloses depends on\n * the order the spokes happen to be in, so it is the wrong chart for comparing\n * magnitudes and the right one for recognising a silhouette. Two or three\n * series at most.\n *\n * @example\n * <RadarChart title=\"Team skills\" config={config} data={data} angleDataKey=\"skill\">\n *   <RadarChart.PolarGrid />\n *   <RadarChart.PolarAngleAxis dataKey=\"skill\" />\n *   <RadarChart.Tooltip />\n *   <RadarChart.Radar dataKey=\"current\" />\n * </RadarChart>\n */\nexport function RadarChart<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n>({\n  config,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  defaultSelectedDataKey = null,\n  selectedDataKey: controlledDataKey,\n  onSelectionChange,\n  isLoading = false,\n  loadingPoints,\n  angleDataKey,\n  hideDataTable = false,\n  empty,\n}: RadarChartProps<TData, TConfig>) {\n  const chartId = useId().replace(/:/g, '')\n  const loadingData = useLoadingShape(isLoading, loadingPoints)\n  const [selectedDataKey, selectDataKey] = useChartSelection(\n    controlledDataKey,\n    defaultSelectedDataKey,\n    onSelectionChange,\n  )\n\n  const context = useMemo<RadarChartContextValue>(\n    () => ({ config, isLoading, selectedDataKey, selectDataKey }),\n    [config, isLoading, selectDataKey, selectedDataKey],\n  )\n\n  return (\n    <RadarChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: data,\n                rowKey: angleDataKey,\n                columns: Object.entries(config).map(([key, series]) => ({\n                  key,\n                  label: series.label,\n                })),\n              }\n        }\n        isEmpty={!isLoading && data.length === 0}\n        empty={empty}\n      >\n        <ChartContainer config={config}>\n          <RechartsRadarChart id={chartId} data={isLoading ? loadingData : data} {...chartProps}>\n            {children}\n            {isLoading && <LoadingRadar />}\n          </RechartsRadarChart>\n        </ChartContainer>\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </RadarChartContext.Provider>\n  )\n}\n\nexport interface RadarProps {\n  dataKey: string\n  variant?: RadarVariant\n  /**\n   * How solid the filled area is, 0–1. Left unset it follows `--chart-fill`,\n   * which is what keeps it readable on both grounds.\n   */\n  fillOpacity?: number\n  /** A halo around the outline — for the one series that is the point. */\n  glowing?: boolean\n  isClickable?: boolean\n  children?: ReactNode\n  radarProps?: Omit<ComponentProps<typeof RechartsRadar>, 'dataKey'>\n}\n\n/** One radar series, with its stroke, fill and glow scoped to its own id. */\nfunction Radar({\n  dataKey,\n  variant = 'filled',\n  fillOpacity,\n  glowing = false,\n  isClickable = false,\n  children,\n  radarProps,\n}: RadarProps) {\n  const { config, isLoading, selectedDataKey, selectDataKey } = useRadarChart()\n  const id = useId().replace(/:/g, '')\n\n  if (isLoading) return null\n\n  const isSelected = selectedDataKey === null || selectedDataKey === dataKey\n  const dimmed = isClickable && !isSelected\n  // The fill recedes twice as far as the stroke. A dimmed outline still traces\n  // its shape, which is what a radar is read by; a dimmed fill just muddies the\n  // one that was picked.\n  const opacity = { stroke: dimmed ? 0.2 : 1, fill: dimmed ? 0.1 : 1, dot: dimmed ? 0.2 : 1 }\n  const isFilled = variant === 'filled'\n\n  const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot)\n  // `--chart-fill` is a number, not a length, so it can be read into a\n  // calc() the SVG attribute accepts — which is how the default follows the\n  // ground without the component knowing which ground it is on. Dimming has\n  // to multiply inside the calc() rather than scale the result: the value is\n  // a string, and multiplying it in JS hands the attribute NaN.\n  const dimFill = dimmed ? ` * ${opacity.fill}` : ''\n  const filledStrength = `calc(var(--chart-fill) * ${FILL_STRENGTH}${dimFill})` as unknown as number\n  const filledOpacity = fillOpacity === undefined ? filledStrength : fillOpacity * opacity.fill\n  const stops = colorStops(config[dataKey])\n\n  return (\n    <>\n      <RechartsRadar\n        dataKey={dataKey}\n        stroke={`url(#${id}-stroke-${dataKey})`}\n        strokeOpacity={opacity.stroke}\n        strokeWidth={STROKE_WIDTH}\n        fill={isFilled ? `url(#${id}-fill-${dataKey})` : 'none'}\n        fillOpacity={isFilled ? filledOpacity : 0}\n        dot={dot}\n        activeDot={activeDot}\n        filter={glowing ? `url(#${id}-glow-${dataKey})` : undefined}\n        className=\"transition-opacity duration-(--duration-base)\"\n        style={isClickable ? { cursor: 'pointer' } : undefined}\n        onClick={() => {\n          if (!isClickable) return\n          selectDataKey(selectedDataKey === dataKey ? null : dataKey)\n        }}\n        {...radarProps}\n      />\n      <defs>\n        {/* The dots read this one; the stroke and fill get their own below. */}\n        <SeriesGradient id={id} dataKey={dataKey} config={config} />\n        <linearGradient id={`${id}-stroke-${dataKey}`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <ColorStops dataKey={dataKey} stops={stops} />\n        </linearGradient>\n        {isFilled && (\n          // Radial, and fading outward: a flat fill makes the outer ring — the\n          // part carrying the shape — the least readable part of the mark.\n          <radialGradient id={`${id}-fill-${dataKey}`} cx=\"50%\" cy=\"50%\" r=\"50%\">\n            <ColorStops\n              dataKey={dataKey}\n              stops={stops}\n              opacities={\n                stops === 1 ? [0.8, 0.3] : Array.from({ length: stops }, (_, i) => (i === 0 ? 0.8 : 0.3))\n              }\n            />\n          </radialGradient>\n        )}\n        {glowing && <GlowFilter id={id} dataKey={dataKey} spread={4} intensity={0.6} />}\n      </defs>\n    </>\n  )\n}\n\nexport interface DotProps {\n  variant?: ChartDotVariant\n}\n\n/** The resting point marker for the radar it is composed inside. A slot. */\nconst Dot: FC<DotProps> = () => null\n\n/** The marker under the pointer. */\nconst ActiveDot: FC<DotProps> = () => null\n\nfunction resolveDots(children: ReactNode, id: string, dataKey: string, dotOpacity: number) {\n  let dot: ComponentProps<typeof RechartsRadar>['dot'] = false\n  let activeDot: ComponentProps<typeof RechartsRadar>['activeDot'] = false\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return\n    const { variant } = (child as ReactElement<DotProps>).props\n\n    if (child.type === Dot) {\n      dot = <ChartDot variant={variant} dataKey={dataKey} chartId={id} fillOpacity={dotOpacity} />\n    }\n    if (child.type === ActiveDot) {\n      activeDot = (\n        <ChartDot variant={variant} dataKey={dataKey} chartId={id} fillOpacity={dotOpacity} />\n      )\n    }\n  })\n\n  return { dot, activeDot }\n}\n\n/**\n * The web behind the marks. `gridType=\"circle\"` swaps the polygon for rings,\n * which reads as a scale rather than as a shape and suits a single series.\n */\nfunction PolarGrid({\n  gridType = 'polygon',\n  stroke = 'var(--chart-grid)',\n  strokeDasharray = '3 4',\n  ...rest\n}: ComponentProps<typeof RechartsPolarGrid>) {\n  return (\n    <RechartsPolarGrid\n      gridType={gridType}\n      stroke={stroke}\n      strokeDasharray={strokeDasharray}\n      {...rest}\n    />\n  )\n}\n\n/** The spoke labels around the perimeter. */\nfunction PolarAngleAxis({\n  tick = { fill: 'var(--chart-axis)', fontSize: 12 },\n  tickLine = false,\n  ...rest\n}: ComponentProps<typeof RechartsPolarAngleAxis>) {\n  const { isLoading } = useRadarChart()\n  if (isLoading) return null\n  return <RechartsPolarAngleAxis tick={tick} tickLine={tickLine} {...rest} />\n}\n\n/** The scale running out from the centre. */\nfunction PolarRadiusAxis({\n  tick = { fill: 'var(--chart-axis)', fontSize: 10 },\n  tickLine = false,\n  axisLine = false,\n  ...rest\n}: ComponentProps<typeof RechartsPolarRadiusAxis>) {\n  const { isLoading } = useRadarChart()\n  if (isLoading) return null\n  return (\n    <RechartsPolarRadiusAxis tick={tick} tickLine={tickLine} axisLine={axisLine} {...rest} />\n  )\n}\n\n/** The hover panel. No crosshair: there is no straight axis to run one along. */\nfunction Tooltip({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) {\n  const { isLoading, selectedDataKey } = useRadarChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      cursor={false}\n      content={\n        <ChartTooltipContent selected={selectedDataKey} roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\n/** The key. Under the web and centred, since the spokes name dimensions, not series. */\nfunction Legend({\n  variant,\n  align = 'center',\n  verticalAlign = 'bottom',\n  isClickable = false,\n}: ChartLegendSlotProps) {\n  const { isLoading, selectedDataKey, selectDataKey } = useRadarChart()\n  if (isLoading) return null\n\n  return (\n    <ChartLegend\n      verticalAlign={verticalAlign}\n      align={align}\n      content={\n        <ChartLegendContent\n          selected={selectedDataKey}\n          onSelectChange={selectDataKey}\n          isClickable={isClickable}\n          variant={variant}\n        />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the web. */\nfunction Background({ variant = 'dots' }: { variant?: ChartBackgroundVariant }) {\n  const { isLoading } = useRadarChart()\n  if (isLoading) return null\n  return <ChartBackground variant={variant} />\n}\n\n/** A deterministic spoke value, so the server and the client agree. */\nfunction shape(index: number, cycle: number): number {\n  const x = Math.sin(index * 91.7 + cycle * 47.3) * 21_942.7\n  return 30 + (x - Math.floor(x)) * 70\n}\n\n/**\n * The skeleton's spokes, re-rolled once per cycle.\n *\n * An interval rather than the shimmer's exit callback: a radar's skeleton\n * animates by MORPHING between shapes, which is Recharts' own transition, so\n * there is no travelling highlight to synchronise against.\n */\nfunction useLoadingShape(isLoading: boolean, points = LOADING_POINTS) {\n  const [cycle, setCycle] = useState(0)\n\n  useEffect(() => {\n    if (!isLoading) return\n    const timer = setInterval(() => setCycle((previous) => previous + 1), LOADING_CYCLE)\n    return () => clearInterval(timer)\n  }, [isLoading])\n\n  return useMemo(\n    () =>\n      Array.from({ length: points }, (_, index) => ({\n        spoke: String.fromCharCode(65 + index),\n        value: shape(index, cycle),\n      })),\n    [cycle, points],\n  )\n}\n\n/** The skeleton radar, morphing between shapes while the data is in flight. */\nfunction LoadingRadar() {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <RechartsRadar\n      dataKey=\"value\"\n      stroke=\"currentColor\"\n      strokeOpacity={0.3}\n      strokeWidth={2}\n      fill=\"currentColor\"\n      fillOpacity={0.1}\n      dot={false}\n      className=\"text-(--ink)\"\n      isAnimationActive={!reduceMotion}\n      animationDuration={LOADING_CYCLE}\n      animationEasing=\"ease-in-out\"\n    />\n  )\n}\n\nRadarChart.Radar = Radar\nRadarChart.Dot = Dot\nRadarChart.ActiveDot = ActiveDot\nRadarChart.PolarGrid = PolarGrid\nRadarChart.PolarAngleAxis = PolarAngleAxis\nRadarChart.PolarRadiusAxis = PolarRadiusAxis\nRadarChart.Tooltip = Tooltip\nRadarChart.Legend = Legend\nRadarChart.Background = Background\n\nexport default RadarChart\n"],"mappings":"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","names":[]}

package/dist/charts/RadialChart/RadialChart.d.ts

@@ -2,9 +2,9 @@ import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import { RadialBar, RadialBarChart } from 'recharts';
 import { ChartConfig } from '../lib/chart.js';
+import { ChartEmptyProps } from '../lib/empty.js';
 import { ChartBackgroundVariant } from '../lib/background.js';
 import { ChartTooltipSlotProps, ChartLegendSlotProps } from '../AreaChart/AreaChart.js';
-import '../lib/empty.js';
 import '../lib/values.js';
 import '../lib/sonify-control.js';
 import '../lib/sonify.js';
@@ -66,8 +66,15 @@ interface RadialChartProps<TData extends Record<string, unknown>> {
     innerRadius?: number | string;
     /** Where the arc ends. */
     outerRadius?: number | string;
-    /** The bar lit on first render. */
+    /** The bar lit on first render, when the chart keeps its own selection. */
     defaultSelectedBar?: string | null;
+    /**
+     * The selected bar, driven from outside.
+     *
+     * Give this and the chart follows it; leave it undefined and the chart keeps
+     * its own, starting from `defaultSelectedBar`.
+     */
+    selectedBar?: string | null;
     /** Fires when the selection changes, and with null when it is cleared. */
     onSelectionChange?: (selection: {
         name: string;
@@ -78,13 +85,24 @@ interface RadialChartProps<TData extends Record<string, unknown>> {
      * the page does not jump when the data lands.
      */
     isLoading?: boolean;
-    /** The row field holding each bar's number. Used by the table view. */
+    /**
+     * The row field holding each bar's number, for the table view and for the
+     * selection the legend reports.
+     *
+     * Falls back to the `dataKey` of the composed `<RadialChart.RadialBar>`, so
+     * the usual call site needs neither.
+     */
     valueKey?: keyof TData & string;
     /**
      * Drops the hidden table view. Only correct when the page prints the data
      * itself.
      */
     hideDataTable?: boolean;
+    /**
+     * What the chart shows when it has nothing to draw. `false` keeps the empty
+     * plot, for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
 }
 /**
  * Values on an arc — a gauge, or a small set of totals against one scale.
@@ -100,7 +118,7 @@ interface RadialChartProps<TData extends Record<string, unknown>> {
  *   <RadialChart.Tooltip />
  * </RadialChart>
  */
-declare function RadialChart<TData extends Record<string, unknown>>({ config, data, nameKey, title, showTitle, description, children, className, chartProps, variant, max, innerRadius, outerRadius, defaultSelectedBar, onSelectionChange, isLoading, valueKey, hideDataTable, }: RadialChartProps<TData>): react.JSX.Element;
+declare function RadialChart<TData extends Record<string, unknown>>({ config, data, nameKey, title, showTitle, description, children, className, chartProps, variant, max, innerRadius, outerRadius, defaultSelectedBar, selectedBar: controlledBar, onSelectionChange, isLoading, valueKey, hideDataTable, empty, }: RadialChartProps<TData>): react.JSX.Element;
 declare namespace RadialChart {
     var RadialBar: ({ dataKey, cornerRadius, barSize, showTrack, isClickable, radialBarProps, }: RadialBarProps) => react.JSX.Element | null;
     var Tooltip: ({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) => react.JSX.Element | null;

package/dist/charts/RadialChart/RadialChart.js

@@ -17,7 +17,10 @@ import {
 } from "recharts";
 import { useReducedMotion } from "motion/react";
 import { ChartContainer, colorStops, cssName } from "../lib/chart.js";
+import { findSlot } from "../lib/values.js";
 import { ChartFigure } from "../lib/figure.js";
+import {} from "../lib/empty.js";
+import { useChartSelection } from "../lib/selection.js";
 import { ChartBackground } from "../lib/background.js";
 import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
 import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
@@ -33,6 +36,9 @@ const ARC = {
   full: { startAngle: 90, endAngle: -270, cx: "50%", cy: "50%" },
   semi: { startAngle: 180, endAngle: 0, cx: "50%", cy: "70%" }
 };
+function valueField(valueKey, children) {
+  return valueKey ?? findSlot(children, RadialBar)?.dataKey ?? null;
+}
 const RadialChartContext = createContext(null);
 function useRadialChart() {
   const context = useContext(RadialChartContext);
@@ -54,21 +60,35 @@ function RadialChart({
   innerRadius = "30%",
   outerRadius = "100%",
   defaultSelectedBar = null,
+  selectedBar: controlledBar,
   onSelectionChange,
   isLoading = false,
   valueKey,
-  hideDataTable = false
+  hideDataTable = false,
+  empty
 }) {
   const chartId = useId().replace(/:/g, "");
-  const [selectedBar, setSelectedBar] = useState(defaultSelectedBar);
   const loadingData = useLoadingBars(isLoading);
   const arc = ARC[variant];
+  const valueSource = valueField(valueKey, children);
+  const [selectedBar, setSelection] = useChartSelection(
+    controlledBar,
+    defaultSelectedBar,
+    void 0
+  );
   const selectBar = useCallback(
     (name, value) => {
-      setSelectedBar(name);
-      onSelectionChange?.(name === null ? null : { name, value: value ?? 0 });
+      setSelection(name);
+      if (!onSelectionChange) return;
+      if (name === null) {
+        onSelectionChange(null);
+        return;
+      }
+      const row = valueSource ? data.find((entry) => String(entry[nameKey]) === name) : void 0;
+      const resolved = value ?? (row && valueSource ? Number(row[valueSource]) : Number.NaN);
+      onSelectionChange({ name, value: Number.isFinite(resolved) ? resolved : 0 });
     },
-    [onSelectionChange]
+    [data, nameKey, onSelectionChange, setSelection, valueSource]
   );
   const painted = useMemo(
     () => data.map((row) => ({
@@ -88,7 +108,9 @@ function RadialChart({
       showTitle,
       description,
       className,
-      table: hideDataTable || !valueKey ? false : { rows: data, rowKey: nameKey, columns: [{ key: valueKey, label: "Value" }] },
+      table: hideDataTable || !valueSource ? false : { rows: data, rowKey: nameKey, columns: [{ key: valueSource, label: "Value" }] },
+      isEmpty: !isLoading && data.length === 0,
+      empty,
       children: [
         /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(
           RechartsRadialBarChart,