@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/RadarChart/RadarChart.js

@@ -0,0 +1,299 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  PolarAngleAxis as RechartsPolarAngleAxis,
+  PolarGrid as RechartsPolarGrid,
+  PolarRadiusAxis as RechartsPolarRadiusAxis,
+  Radar as RechartsRadar,
+  RadarChart as RechartsRadarChart
+} from "recharts";
+import { useReducedMotion } from "motion/react";
+import { ChartContainer, colorStops } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartDot } from "../lib/dot.js";
+import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
+import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
+import { LoadingIndicator } from "../lib/loading.js";
+import { ColorStops, GlowFilter, SeriesGradient } from "../lib/paint.js";
+const STROKE_WIDTH = 1;
+const FILL_STRENGTH = 2.2;
+const LOADING_POINTS = 6;
+const LOADING_CYCLE = 1500;
+const RadarChartContext = createContext(null);
+function useRadarChart() {
+  const context = useContext(RadarChartContext);
+  if (!context) throw new Error("A radar chart part must be rendered inside <RadarChart>");
+  return context;
+}
+function RadarChart({
+  config,
+  data,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  defaultSelectedDataKey = null,
+  onSelectionChange,
+  isLoading = false,
+  loadingPoints,
+  angleDataKey,
+  hideDataTable = false
+}) {
+  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 context = useMemo(
+    () => ({ config, isLoading, selectedDataKey, selectDataKey }),
+    [config, isLoading, selectDataKey, selectedDataKey]
+  );
+  return /* @__PURE__ */ jsx(RadarChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : {
+        rows: data,
+        rowKey: angleDataKey,
+        columns: Object.entries(config).map(([key, series]) => ({
+          key,
+          label: series.label
+        }))
+      },
+      children: [
+        /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(RechartsRadarChart, { id: chartId, data: isLoading ? loadingData : data, ...chartProps, children: [
+          children,
+          isLoading && /* @__PURE__ */ jsx(LoadingRadar, {})
+        ] }) }),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+function Radar({
+  dataKey,
+  variant = "filled",
+  fillOpacity,
+  glowing = false,
+  isClickable = false,
+  children,
+  radarProps
+}) {
+  const { config, isLoading, selectedDataKey, selectDataKey } = useRadarChart();
+  const id = useId().replace(/:/g, "");
+  if (isLoading) return null;
+  const isSelected = selectedDataKey === null || selectedDataKey === dataKey;
+  const dimmed = isClickable && !isSelected;
+  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 stops = colorStops(config[dataKey]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsRadar,
+      {
+        dataKey,
+        stroke: `url(#${id}-stroke-${dataKey})`,
+        strokeOpacity: opacity.stroke,
+        strokeWidth: STROKE_WIDTH,
+        fill: isFilled ? `url(#${id}-fill-${dataKey})` : "none",
+        fillOpacity: isFilled ? (fillOpacity ?? filledStrength) * opacity.fill : 0,
+        dot,
+        activeDot,
+        filter: glowing ? `url(#${id}-glow-${dataKey})` : void 0,
+        className: "transition-opacity duration-(--duration-base)",
+        style: isClickable ? { cursor: "pointer" } : void 0,
+        onClick: () => {
+          if (!isClickable) return;
+          selectDataKey(selectedDataKey === dataKey ? null : dataKey);
+        },
+        ...radarProps
+      }
+    ),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx(SeriesGradient, { id, dataKey, config }),
+      /* @__PURE__ */ jsx("linearGradient", { id: `${id}-stroke-${dataKey}`, x1: "0", y1: "0", x2: "1", y2: "1", children: /* @__PURE__ */ jsx(ColorStops, { dataKey, stops }) }),
+      isFilled && // Radial, and fading outward: a flat fill makes the outer ring — the
+      // part carrying the shape — the least readable part of the mark.
+      /* @__PURE__ */ jsx("radialGradient", { id: `${id}-fill-${dataKey}`, cx: "50%", cy: "50%", r: "50%", children: /* @__PURE__ */ jsx(
+        ColorStops,
+        {
+          dataKey,
+          stops,
+          opacities: stops === 1 ? [0.8, 0.3] : Array.from({ length: stops }, (_, i) => i === 0 ? 0.8 : 0.3)
+        }
+      ) }),
+      glowing && /* @__PURE__ */ jsx(GlowFilter, { id, dataKey, spread: 4, intensity: 0.6 })
+    ] })
+  ] });
+}
+const Dot = () => null;
+const ActiveDot = () => null;
+function resolveDots(children, id, dataKey, dotOpacity) {
+  let dot = false;
+  let activeDot = false;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const { variant } = child.props;
+    if (child.type === Dot) {
+      dot = /* @__PURE__ */ jsx(ChartDot, { variant, dataKey, chartId: id, fillOpacity: dotOpacity });
+    }
+    if (child.type === ActiveDot) {
+      activeDot = /* @__PURE__ */ jsx(ChartDot, { variant, dataKey, chartId: id, fillOpacity: dotOpacity });
+    }
+  });
+  return { dot, activeDot };
+}
+function PolarGrid({
+  gridType = "polygon",
+  stroke = "var(--chart-grid)",
+  strokeDasharray = "3 4",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    RechartsPolarGrid,
+    {
+      gridType,
+      stroke,
+      strokeDasharray,
+      ...rest
+    }
+  );
+}
+function PolarAngleAxis({
+  tick = { fill: "var(--chart-axis)", fontSize: 12 },
+  tickLine = false,
+  ...rest
+}) {
+  const { isLoading } = useRadarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(RechartsPolarAngleAxis, { tick, tickLine, ...rest });
+}
+function PolarRadiusAxis({
+  tick = { fill: "var(--chart-axis)", fontSize: 10 },
+  tickLine = false,
+  axisLine = false,
+  ...rest
+}) {
+  const { isLoading } = useRadarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(RechartsPolarRadiusAxis, { tick, tickLine, axisLine, ...rest });
+}
+function Tooltip({ variant, roundness, defaultIndex }) {
+  const { isLoading, selectedDataKey } = useRadarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      defaultIndex,
+      cursor: false,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { selected: selectedDataKey, roundness, variant })
+    }
+  );
+}
+function Legend({
+  variant,
+  align = "center",
+  verticalAlign = "bottom",
+  isClickable = false
+}) {
+  const { isLoading, selectedDataKey, selectDataKey } = useRadarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedDataKey,
+          onSelectChange: selectDataKey,
+          isClickable,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant = "dots" }) {
+  const { isLoading } = useRadarChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+function shape(index, cycle) {
+  const x = Math.sin(index * 91.7 + cycle * 47.3) * 21942.7;
+  return 30 + (x - Math.floor(x)) * 70;
+}
+function useLoadingShape(isLoading, points = LOADING_POINTS) {
+  const [cycle, setCycle] = useState(0);
+  useEffect(() => {
+    if (!isLoading) return;
+    const timer = setInterval(() => setCycle((previous) => previous + 1), LOADING_CYCLE);
+    return () => clearInterval(timer);
+  }, [isLoading]);
+  return useMemo(
+    () => Array.from({ length: points }, (_, index) => ({
+      spoke: String.fromCharCode(65 + index),
+      value: shape(index, cycle)
+    })),
+    [cycle, points]
+  );
+}
+function LoadingRadar() {
+  const reduceMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    RechartsRadar,
+    {
+      dataKey: "value",
+      stroke: "currentColor",
+      strokeOpacity: 0.3,
+      strokeWidth: 2,
+      fill: "currentColor",
+      fillOpacity: 0.1,
+      dot: false,
+      className: "text-(--ink)",
+      isAnimationActive: !reduceMotion,
+      animationDuration: LOADING_CYCLE,
+      animationEasing: "ease-in-out"
+    }
+  );
+}
+RadarChart.Radar = Radar;
+RadarChart.Dot = Dot;
+RadarChart.ActiveDot = ActiveDot;
+RadarChart.PolarGrid = PolarGrid;
+RadarChart.PolarAngleAxis = PolarAngleAxis;
+RadarChart.PolarRadiusAxis = PolarRadiusAxis;
+RadarChart.Tooltip = Tooltip;
+RadarChart.Legend = Legend;
+RadarChart.Background = Background;
+var RadarChart_default = RadarChart;
+export {
+  RadarChart,
+  RadarChart_default as default
+};
+//# sourceMappingURL=RadarChart.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,124 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { RadialBar, RadialBarChart } from 'recharts';
+import { ChartConfig } from '../lib/chart.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';
+import '../lib/brush.js';
+import '../lib/toolbar.js';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+import '../lib/paint.js';
+import '../lib/dot.js';
+import '../lib/legend.js';
+import '../lib/tooltip.js';
+import 'recharts/types/component/DefaultTooltipContent';
+import '../lib/annotations.js';
+
+/**
+ * The arc the bars are drawn on.
+ *
+ * `full` is a ring; `semi` is the half-circle a gauge wants, with the centre
+ * dropped so the arc sits in the middle of its own box rather than at the top.
+ */
+type RadialVariant = 'full' | 'semi';
+interface RadialChartProps<TData extends Record<string, unknown>> {
+    /** Bar names → their label and paint. Keys must match the `nameKey` values. */
+    config: ChartConfig;
+    /** The rows the chart draws. One entry per point, bar or category. */
+    data: TData[];
+    /** The row field naming each bar. */
+    nameKey: keyof TData & string;
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /**
+     * The composed parts — axes, grid, tooltip, legend, and the marks
+     * themselves.
+     */
+    children: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Escape hatch onto the raw Recharts chart element. */
+    chartProps?: ComponentProps<typeof RadialBarChart>;
+    /** The arc shape — a full ring, or the half circle a gauge wants. */
+    variant?: RadialVariant;
+    /**
+     * What a full sweep is worth.
+     *
+     * Without it the scale comes from the data, so the largest bar always fills
+     * the arc — which is right for a comparison and wrong for a gauge. Set it
+     * (typically 100) whenever a single value has to read against a fixed total,
+     * or "62%" and "98%" will look identical.
+     */
+    max?: number;
+    /** Where the arc starts, from the centre. */
+    innerRadius?: number | string;
+    /** Where the arc ends. */
+    outerRadius?: number | string;
+    /** The bar lit on first render. */
+    defaultSelectedBar?: string | null;
+    /** Fires when the selection changes, and with null when it is cleared. */
+    onSelectionChange?: (selection: {
+        name: string;
+        value: number;
+    } | null) => void;
+    /**
+     * Swaps the marks for an animated skeleton, keeping the measured height so
+     * the page does not jump when the data lands.
+     */
+    isLoading?: boolean;
+    /** The row field holding each bar's number. Used by the table view. */
+    valueKey?: keyof TData & string;
+    /**
+     * Drops the hidden table view. Only correct when the page prints the data
+     * itself.
+     */
+    hideDataTable?: boolean;
+}
+/**
+ * Values on an arc — a gauge, or a small set of totals against one scale.
+ *
+ * The caveat worth knowing before reaching for it: a radial bar's LENGTH is its
+ * value, but its RADIUS is not, so an inner bar and an outer bar of the same
+ * value are drawn different lengths. That makes it a poor comparison and a good
+ * single-value gauge; past about four bars, a `<BarChart>` is the honest choice.
+ *
+ * @example
+ * <RadialChart title="Storage used" config={config} data={data} nameKey="tier" max={100}>
+ *   <RadialChart.RadialBar dataKey="used" />
+ *   <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 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;
+    var Legend: ({ variant, align, verticalAlign, isClickable, }: ChartLegendSlotProps) => react.JSX.Element | null;
+    var Background: ({ variant }: {
+        variant?: ChartBackgroundVariant;
+    }) => react.JSX.Element | null;
+}
+interface RadialBarProps {
+    /** The row field holding each bar's number. */
+    dataKey: string;
+    cornerRadius?: number;
+    /** How thick each arc is, in pixels. */
+    barSize?: number;
+    /** Draws the unfilled remainder behind each bar. Required reading for a gauge. */
+    showTrack?: boolean;
+    isClickable?: boolean;
+    radialBarProps?: Omit<ComponentProps<typeof RadialBar>, 'dataKey'>;
+}
+
+export { type RadialBarProps, RadialChart, type RadialChartProps, type RadialVariant, RadialChart as default };