@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/PieChart/PieChart.d.ts

@@ -0,0 +1,128 @@
+import * as react from 'react';
+import { ReactNode, ComponentProps, FC } from 'react';
+import { PieChart as PieChart$1, Pie, LabelList } 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';
+
+/**
+ * How a sector is painted.
+ *
+ * One variant, and the honesty is deliberate: a wedge is a small, awkwardly
+ * shaped area, and a texture inside one reads as noise rather than as identity.
+ * Where a bar chart differentiates by fill, a pie differentiates by the gap
+ * between sectors — which is what `paddingAngle` is for — and by its legend.
+ */
+type PieVariant = 'gradient';
+interface PieChartProps<TData extends Record<string, unknown>> {
+    /** Sector 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 holding each sector's number. */
+    dataKey: keyof TData & string;
+    /** The row field holding each sector's name. */
+    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 PieChart$1>;
+    /** The sector lit on first render. */
+    defaultSelectedSector?: 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;
+    /**
+     * Drops the hidden table view. Only correct when the page prints the data
+     * itself.
+     */
+    hideDataTable?: boolean;
+}
+/**
+ * Parts of one whole.
+ *
+ * Worth saying plainly: a pie answers "roughly what share" and nothing more
+ * precise. Comparing two adjacent wedges by eye is unreliable past about five
+ * of them, and comparing a wedge across two pies is worse. When the reader
+ * needs to rank or compare, a `<BarChart>` answers the same question better.
+ *
+ * @example
+ * <PieChart title="Visitors by browser" config={config} data={data} dataKey="visitors" nameKey="browser">
+ *   <PieChart.Pie innerRadius="55%" />
+ *   <PieChart.Tooltip />
+ *   <PieChart.Legend />
+ * </PieChart>
+ */
+declare function PieChart<TData extends Record<string, unknown>>({ config, data, dataKey, nameKey, title, showTitle, description, children, className, chartProps, defaultSelectedSector, onSelectionChange, isLoading, hideDataTable, }: PieChartProps<TData>): react.JSX.Element;
+declare namespace PieChart {
+    var Pie: ({ variant, innerRadius, outerRadius, cornerRadius, paddingAngle, startAngle, endAngle, isClickable, glowingSectors, children, pieProps, }: PieProps) => react.JSX.Element;
+    var Label: FC<PieLabelProps>;
+    var Tooltip: ({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) => react.JSX.Element | null;
+    var Legend: ({ variant, align, verticalAlign, isClickable, }: ChartLegendSlotProps) => react.JSX.Element;
+    var Background: ({ variant }: {
+        variant?: ChartBackgroundVariant;
+    }) => react.JSX.Element;
+}
+interface PieProps {
+    variant?: PieVariant;
+    /** Above zero makes it a donut, which is easier to read than a full pie. */
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    /** Rounds each wedge's corners. */
+    cornerRadius?: number;
+    /**
+     * Degrees between wedges. Negative overlaps them, which the sector's own
+     * surface-coloured stroke then separates — the "stacked cards" look.
+     */
+    paddingAngle?: number;
+    startAngle?: number;
+    endAngle?: number;
+    isClickable?: boolean;
+    /** Sector names drawn with a halo — for the one wedge that is the point. */
+    glowingSectors?: string[];
+    /** `<PieChart.Label>`. */
+    children?: ReactNode;
+    pieProps?: Omit<ComponentProps<typeof Pie>, 'data' | 'dataKey' | 'nameKey'>;
+}
+interface PieLabelProps {
+    /** The field printed on each wedge. Defaults to the pie's value key. */
+    dataKey?: string;
+    labelListProps?: Omit<ComponentProps<typeof LabelList>, 'dataKey'>;
+}
+
+export { PieChart, type PieChartProps, type PieLabelProps, type PieProps, type PieVariant, PieChart as default };

package/dist/charts/PieChart/PieChart.js

@@ -0,0 +1,309 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  LabelList as RechartsLabelList,
+  Pie as RechartsPie,
+  PieChart as RechartsPieChart,
+  Sector
+} from "recharts";
+import { motion, useReducedMotion } from "motion/react";
+import { ChartContainer, colorStops, cssName } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
+import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
+import { LoadingIndicator } from "../lib/loading.js";
+import { ColorStops } from "../lib/paint.js";
+const LOADING_SECTORS = 5;
+const LOADING_PULSE = 2;
+const PieChartContext = createContext(null);
+function usePieChart() {
+  const context = useContext(PieChartContext);
+  if (!context) throw new Error("A pie chart part must be rendered inside <PieChart>");
+  return context;
+}
+function PieChart({
+  config,
+  data,
+  dataKey,
+  nameKey,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  defaultSelectedSector = null,
+  onSelectionChange,
+  isLoading = false,
+  hideDataTable = false
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [selectedSector, setSelectedSector] = useState(defaultSelectedSector);
+  const selectSector = useCallback(
+    (name) => {
+      setSelectedSector(name);
+      if (name === null) {
+        onSelectionChange?.(null);
+        return;
+      }
+      const row = data.find((item) => item[nameKey] === name);
+      if (row) onSelectionChange?.({ name, value: row[dataKey] });
+    },
+    [data, dataKey, nameKey, onSelectionChange]
+  );
+  const context = useMemo(
+    () => ({ config, data, dataKey, nameKey, isLoading, selectedSector, selectSector }),
+    [config, data, dataKey, isLoading, nameKey, selectSector, selectedSector]
+  );
+  return /* @__PURE__ */ jsx(PieChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : {
+        rows: data,
+        rowKey: nameKey,
+        columns: [{ key: dataKey, label: "Value" }]
+      },
+      children: [
+        /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(RechartsPieChart, { id: chartId, accessibilityLayer: true, ...chartProps, children }) }),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+const NO_GLOW = [];
+function Pie({
+  variant = "gradient",
+  innerRadius = 0,
+  outerRadius = "80%",
+  cornerRadius = 0,
+  paddingAngle = 0,
+  startAngle = 0,
+  endAngle = 360,
+  isClickable = false,
+  glowingSectors = NO_GLOW,
+  children,
+  pieProps
+}) {
+  const { config, data, dataKey, nameKey, isLoading, selectedSector, selectSector } = usePieChart();
+  const id = useId().replace(/:/g, "");
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      RechartsPie,
+      {
+        data: LOADING_DATA,
+        dataKey: "value",
+        nameKey: "name",
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        paddingAngle,
+        startAngle,
+        endAngle,
+        strokeWidth: 0,
+        isAnimationActive: false,
+        shape: (props) => /* @__PURE__ */ jsx(LoadingSector, { ...props })
+      }
+    );
+  }
+  const label = resolveLabel(children, dataKey);
+  const painted = data.map((row) => ({
+    ...row,
+    fill: `url(#${id}-colors-${cssName(String(row[nameKey]))})`
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsPie,
+      {
+        data: painted,
+        dataKey,
+        nameKey,
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        paddingAngle,
+        startAngle,
+        endAngle,
+        strokeWidth: 0,
+        style: isClickable ? { cursor: "pointer" } : void 0,
+        onClick: (_, index) => {
+          if (!isClickable) return;
+          const name = data[index]?.[nameKey];
+          selectSector(selectedSector === name ? null : name);
+        },
+        shape: (props) => {
+          const name = String(data[props.index ?? 0]?.[nameKey] ?? "");
+          const isGlowing = glowingSectors.includes(name);
+          const dimmed = isClickable && selectedSector !== null && selectedSector !== name;
+          return /* @__PURE__ */ jsx(
+            Sector,
+            {
+              ...props,
+              fill: `url(#${id}-colors-${cssName(name)})`,
+              filter: isGlowing ? `url(#${id}-glow-${cssName(name)})` : void 0,
+              stroke: paddingAngle < 0 ? "var(--chart-surface)" : "none",
+              strokeWidth: paddingAngle < 0 ? 5 : 0,
+              opacity: dimmed ? 0.15 : 1,
+              className: "transition-opacity duration-(--duration-base)"
+            }
+          );
+        },
+        ...pieProps,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx(SectorGradients, { id, config, variant }),
+      glowingSectors.map((name) => /* @__PURE__ */ jsxs(
+        "filter",
+        {
+          id: `${id}-glow-${cssName(name)}`,
+          x: "-100%",
+          y: "-100%",
+          width: "300%",
+          height: "300%",
+          children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "8", result: "blur" }),
+            /* @__PURE__ */ jsx(
+              "feColorMatrix",
+              {
+                in: "blur",
+                type: "matrix",
+                values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0",
+                result: "glow"
+              }
+            ),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "glow" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ]
+        },
+        name
+      ))
+    ] })
+  ] });
+}
+const Label = () => null;
+function resolveLabel(children, valueKey) {
+  let label = null;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child) || child.type !== Label) return;
+    const { dataKey, labelListProps } = child.props;
+    label = /* @__PURE__ */ jsx(
+      RechartsLabelList,
+      {
+        dataKey: dataKey ?? valueKey,
+        stroke: "none",
+        fontSize: 12,
+        fontWeight: 500,
+        className: "fill-(--chart-surface)",
+        ...labelListProps
+      }
+    );
+  });
+  return label;
+}
+function SectorGradients({
+  id,
+  config
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(config).map(([key, series]) => /* @__PURE__ */ jsx(
+    "linearGradient",
+    {
+      id: `${id}-colors-${cssName(key)}`,
+      x1: "0",
+      y1: "0",
+      x2: "1",
+      y2: "1",
+      children: /* @__PURE__ */ jsx(ColorStops, { dataKey: cssName(key), stops: colorStops(series) })
+    },
+    key
+  )) });
+}
+function Tooltip({ variant, roundness, defaultIndex }) {
+  const { isLoading, nameKey } = usePieChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      defaultIndex,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { nameKey, hideLabel: true, roundness, variant })
+    }
+  );
+}
+function Legend({
+  variant,
+  align = "center",
+  verticalAlign = "bottom",
+  isClickable = false
+}) {
+  const { nameKey, selectedSector, selectSector } = usePieChart();
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedSector,
+          onSelectChange: selectSector,
+          isClickable,
+          nameKey,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant = "dots" }) {
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+const LOADING_DATA = Array.from({ length: LOADING_SECTORS }, (_, index) => ({
+  name: `loading-${index}`,
+  value: 100 / LOADING_SECTORS
+}));
+function LoadingSector(props) {
+  const { index = 0, ...sector } = props;
+  const reduceMotion = useReducedMotion();
+  const delay = index / LOADING_SECTORS * LOADING_PULSE;
+  if (reduceMotion) {
+    return /* @__PURE__ */ jsx("g", { opacity: 0.3, className: "text-(--ink)", children: /* @__PURE__ */ jsx(Sector, { ...sector, fill: "currentColor" }) });
+  }
+  return /* @__PURE__ */ jsx(
+    motion.g,
+    {
+      className: "text-(--ink)",
+      initial: { opacity: 0.15 },
+      animate: { opacity: [0.15, 0.5, 0.15] },
+      transition: { duration: LOADING_PULSE, delay, repeat: Infinity, ease: "easeInOut" },
+      children: /* @__PURE__ */ jsx(Sector, { ...sector, fill: "currentColor" })
+    }
+  );
+}
+PieChart.Pie = Pie;
+PieChart.Label = Label;
+PieChart.Tooltip = Tooltip;
+PieChart.Legend = Legend;
+PieChart.Background = Background;
+var PieChart_default = PieChart;
+export {
+  PieChart,
+  PieChart_default as default
+};
+//# sourceMappingURL=PieChart.js.map

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

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

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

@@ -0,0 +1,123 @@
+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 { 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';
+import '../lib/brush.js';
+import '../lib/toolbar.js';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+import '../lib/paint.js';
+import '../lib/legend.js';
+import '../lib/tooltip.js';
+import 'recharts/types/component/DefaultTooltipContent';
+import '../lib/annotations.js';
+
+/**
+ * Whether a radar is filled or left as an outline.
+ *
+ * `lines` is the honest default above two series: filled polygons overlap, and
+ * the reader is then judging areas through two layers of translucency, which is
+ * the one thing a radar is worst at.
+ */
+type RadarVariant = 'filled' | 'lines';
+type ValidateKeys<TData, TConfig> = {
+    [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never;
+};
+interface RadarChartProps<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>> {
+    config: TConfig & ValidateKeys<TData, TConfig>;
+    /** The rows the chart draws. One entry per point, bar or category. */
+    data: TData[];
+    /**
+     * 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 RadarChart$1>;
+    /** The series lit on first render. Selection dims every other series. */
+    defaultSelectedDataKey?: string | null;
+    /** Fires when the selection changes, and with null when it is cleared. */
+    onSelectionChange?: (selectedDataKey: string | 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;
+    /** How many points the skeleton draws. */
+    loadingPoints?: number;
+    /** The row field naming each spoke. Used by the table view. */
+    angleDataKey?: keyof TData & string;
+    /**
+     * Drops the hidden table view. Only correct when the page prints the data
+     * itself.
+     */
+    hideDataTable?: boolean;
+}
+/**
+ * A profile across several named dimensions — the shape for "what is this thing
+ * strong and weak at".
+ *
+ * It reads a SHAPE, not a set of values: the area a radar encloses depends on
+ * the order the spokes happen to be in, so it is the wrong chart for comparing
+ * magnitudes and the right one for recognising a silhouette. Two or three
+ * series at most.
+ *
+ * @example
+ * <RadarChart title="Team skills" config={config} data={data} angleDataKey="skill">
+ *   <RadarChart.PolarGrid />
+ *   <RadarChart.PolarAngleAxis dataKey="skill" />
+ *   <RadarChart.Tooltip />
+ *   <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 namespace RadarChart {
+    var Radar: ({ dataKey, variant, fillOpacity, glowing, isClickable, children, radarProps, }: RadarProps) => react.JSX.Element | null;
+    var Dot: FC<DotProps>;
+    var ActiveDot: FC<DotProps>;
+    var PolarGrid: ({ gridType, stroke, strokeDasharray, ...rest }: ComponentProps<typeof PolarGrid>) => react.JSX.Element;
+    var PolarAngleAxis: ({ tick, tickLine, ...rest }: ComponentProps<typeof PolarAngleAxis>) => react.JSX.Element | null;
+    var PolarRadiusAxis: ({ tick, tickLine, axisLine, ...rest }: ComponentProps<typeof PolarRadiusAxis>) => 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 RadarProps {
+    dataKey: string;
+    variant?: RadarVariant;
+    /**
+     * How solid the filled area is, 0–1. Left unset it follows `--chart-fill`,
+     * which is what keeps it readable on both grounds.
+     */
+    fillOpacity?: number;
+    /** A halo around the outline — for the one series that is the point. */
+    glowing?: boolean;
+    isClickable?: boolean;
+    children?: ReactNode;
+    radarProps?: Omit<ComponentProps<typeof Radar>, 'dataKey'>;
+}
+interface DotProps {
+    variant?: ChartDotVariant;
+}
+
+export { type DotProps, RadarChart, type RadarChartProps, type RadarProps, type RadarVariant, RadarChart as default };