@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/src/Radial/RadialChart.tsx

@@ -0,0 +1,219 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialChart.tsx
+ * @output Root radial chart container — spider, pie, donut
+ * @position Parent component; all radial marks read from its context
+ *
+ * Owns the radial coordinate space: center, radius, angle/radius scales.
+ * Same Tier 1 guarantee as Chart — all children map through the same context.
+ */
+
+import {
+  type ReactNode,
+  useMemo,
+  useRef,
+  useState,
+  useLayoutEffect,
+} from 'react';
+import {RadialProvider} from './RadialContext';
+import type {RadialMode} from './types';
+
+export interface RadialChartProps {
+  /** The dataset */
+  data: Record<string, unknown>[];
+  /** Chart height in pixels. Width is responsive. */
+  height?: number;
+  /**
+   * Spider mode: array of axis keys (each key is a dimension).
+   * When provided, the chart operates in spider mode.
+   */
+  axes?: string[];
+  /**
+   * Pie/donut mode: data key containing the numeric value for each slice.
+   * When provided (without axes), the chart operates in pie mode.
+   */
+  valueKey?: string;
+  /**
+   * Pie/donut mode: data key for the slice label.
+   */
+  labelKey?: string;
+  /**
+   * Inner radius as a fraction of outer radius (0-1).
+   * 0 = full pie/spider, 0.6 = donut. Default: 0.
+   */
+  innerRadius?: number;
+  /**
+   * Padding between pie slices in radians. Default: 0.02.
+   */
+  padAngle?: number;
+  /** Chart contents */
+  /**
+   * Enable touch interaction mode — blocks scroll on mobile.
+   */
+  interactive?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * Root radial chart container. Computes angular/radial scales and provides
+ * them to children via context.
+ *
+ * @example
+ * ```
+ * // Spider
+ * <RadialChart data={data} axes={['speed', 'handling', 'comfort']} height={400}>
+ *   <RadialGrid rings={5} />
+ *   <RadialArea dataKey="modelA" color={colors[0]} />
+ *   <RadialAxis />
+ * </RadialChart>
+ *
+ * // Pie
+ * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
+ *   <RadialSlice />
+ * </RadialChart>
+ *
+ * // Donut
+ * <RadialChart data={data} valueKey="revenue" labelKey="region" innerRadius={0.6} height={400}>
+ *   <RadialSlice />
+ * </RadialChart>
+ * ```
+ */
+export function RadialChart({
+  data,
+  height = 400,
+  axes,
+  valueKey,
+  labelKey,
+  innerRadius: innerRadiusFraction = 0,
+  padAngle = 0.02,
+  children,
+}: RadialChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const size = Math.min(containerWidth, height);
+  const cx = containerWidth / 2;
+  const cy = height / 2;
+  const outerRadius = size / 2 - 40; // leave room for labels
+  const innerRadiusPx = outerRadius * innerRadiusFraction;
+
+  const mode: RadialMode = axes ? 'spider' : 'pie';
+
+  // Spider: compute axis angles and domains
+  const spiderCtx = useMemo(() => {
+    if (!axes || axes.length === 0) {
+      return {};
+    }
+
+    const angleByAxis = new Map<string, number>();
+    const step = (2 * Math.PI) / axes.length;
+    axes.forEach((key, i) => {
+      // Start from top (-PI/2) and go clockwise
+      angleByAxis.set(key, -Math.PI / 2 + step * i);
+    });
+
+    // Compute domain per axis
+    const axisDomains = new Map<string, [number, number]>();
+    for (const key of axes) {
+      let min = Infinity;
+      let max = -Infinity;
+      for (const d of data) {
+        const v = d[key];
+        if (typeof v === 'number') {
+          if (v < min) {
+            min = v;
+          }
+          if (v > max) {
+            max = v;
+          }
+        }
+      }
+      // Include 0 as floor
+      if (min > 0) {
+        min = 0;
+      }
+      axisDomains.set(key, [min, max]);
+    }
+
+    const radiusScale = (t: number) =>
+      innerRadiusPx + t * (outerRadius - innerRadiusPx);
+
+    return {axes, angleByAxis, radiusScale, axisDomains};
+  }, [axes, data, outerRadius, innerRadiusPx]);
+
+  // Pie: compute slices
+  const pieCtx = useMemo(() => {
+    if (!valueKey) {
+      return {};
+    }
+
+    const total = data.reduce((sum, d) => {
+      const v = d[valueKey];
+      return sum + (typeof v === 'number' ? v : 0);
+    }, 0);
+
+    if (total === 0) {
+      return {slices: []};
+    }
+
+    const totalPad = padAngle * data.length;
+    const available = 2 * Math.PI - totalPad;
+    let currentAngle = -Math.PI / 2; // start from top
+
+    const slices = data.map(d => {
+      const v = typeof d[valueKey] === 'number' ? (d[valueKey] as number) : 0;
+      const percentage = v / total;
+      const sweep = percentage * available;
+      const slice = {
+        key: labelKey ? String(d[labelKey]) : String(v),
+        value: v,
+        startAngle: currentAngle,
+        endAngle: currentAngle + sweep,
+        percentage,
+      };
+      currentAngle += sweep + padAngle;
+      return slice;
+    });
+
+    return {slices};
+  }, [data, valueKey, labelKey, padAngle]);
+
+  const ctx = useMemo(
+    () => ({
+      cx,
+      cy,
+      radius: outerRadius,
+      innerRadius: innerRadiusPx,
+      data,
+      mode,
+      ...spiderCtx,
+      ...pieCtx,
+    }),
+    [cx, cy, outerRadius, innerRadiusPx, data, mode, spiderCtx, pieCtx],
+  );
+
+  return (
+    <div ref={containerRef} style={{width: '100%'}}>
+      {containerWidth > 0 && (
+        <svg width={containerWidth} height={height}>
+          <RadialProvider value={ctx}>{children}</RadialProvider>
+        </svg>
+      )}
+    </div>
+  );
+}

package/src/Radial/RadialContext.ts

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialContext.ts
+ * @output React context for radial chart components
+ */
+
+import {createContext, useContext} from 'react';
+import type {RadialContext} from './types';
+
+const RadialCtx = createContext<RadialContext | null>(null);
+
+export const RadialProvider = RadialCtx.Provider;
+
+/** Access the radial chart context. Throws if used outside RadialChart. */
+export function useRadial(): RadialContext {
+  const ctx = useContext(RadialCtx);
+  if (!ctx) {
+    throw new Error('Radial components must be used inside <RadialChart>');
+  }
+  return ctx;
+}

package/src/Radial/RadialGrid.tsx

@@ -0,0 +1,81 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialGrid.tsx
+ * @output Renders concentric grid rings and axis lines for spider charts
+ */
+
+import {useRadial} from './RadialContext';
+
+export interface RadialGridProps {
+  /** Number of concentric rings (default: 5) */
+  rings?: number;
+}
+
+/**
+ * Concentric grid rings and axis lines for spider charts.
+ *
+ * @example
+ * ```
+ * <RadialGrid rings={5} />
+ * ```
+ */
+export function RadialGrid({rings = 5}: RadialGridProps) {
+  const {cx, cy, radius, innerRadius, axes, angleByAxis, radiusScale} =
+    useRadial();
+
+  if (!axes || !angleByAxis || !radiusScale) {
+    return null;
+  }
+
+  return (
+    <g>
+      {/* Concentric rings */}
+      {Array.from({length: rings}, (_, i) => {
+        const t = (i + 1) / rings;
+        const r = radiusScale(t);
+        // Draw polygon ring connecting points at this radius
+        const points = axes
+          .map(key => {
+            const angle = angleByAxis.get(key);
+            if (angle == null) {
+              return '';
+            }
+            return `${cx + Math.cos(angle) * r},${cy + Math.sin(angle) * r}`;
+          })
+          .filter(Boolean)
+          .join(' ');
+        return (
+          <polygon
+            key={i}
+            points={points}
+            fill="none"
+            stroke="var(--color-border)"
+            strokeOpacity={0.3}
+            strokeWidth={1}
+          />
+        );
+      })}
+
+      {/* Axis lines from center to each vertex */}
+      {axes.map(key => {
+        const angle = angleByAxis.get(key);
+        if (angle == null) {
+          return null;
+        }
+        return (
+          <line
+            key={key}
+            x1={cx + Math.cos(angle) * innerRadius}
+            y1={cy + Math.sin(angle) * innerRadius}
+            x2={cx + Math.cos(angle) * radius}
+            y2={cy + Math.sin(angle) * radius}
+            stroke="var(--color-border)"
+            strokeOpacity={0.3}
+            strokeWidth={1}
+          />
+        );
+      })}
+    </g>
+  );
+}

package/src/Radial/RadialSlice.tsx

@@ -0,0 +1,130 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialSlice.tsx
+ * @output Renders pie/donut slices from radial context
+ */
+
+import {useRadial} from './RadialContext';
+
+export interface RadialSliceProps {
+  /**
+   * Colors for each slice. Array of hex strings.
+   * Use useChartColors().categorical(n).
+   */
+  colors: string[];
+  /** Corner radius on slice edges (default: 2) */
+  cornerRadius?: number;
+  /** Show percentage labels (default: true) */
+  labels?: boolean;
+  /** Minimum percentage to show a label (default: 5) */
+  labelThreshold?: number;
+}
+
+/** SVG arc path from angles and radii */
+function arcPath(
+  cx: number,
+  cy: number,
+  innerR: number,
+  outerR: number,
+  startAngle: number,
+  endAngle: number,
+): string {
+  const x1 = cx + Math.cos(startAngle) * outerR;
+  const y1 = cy + Math.sin(startAngle) * outerR;
+  const x2 = cx + Math.cos(endAngle) * outerR;
+  const y2 = cy + Math.sin(endAngle) * outerR;
+  const x3 = cx + Math.cos(endAngle) * innerR;
+  const y3 = cy + Math.sin(endAngle) * innerR;
+  const x4 = cx + Math.cos(startAngle) * innerR;
+  const y4 = cy + Math.sin(startAngle) * innerR;
+
+  const sweep = endAngle - startAngle;
+  const largeArc = sweep > Math.PI ? 1 : 0;
+
+  if (innerR === 0) {
+    // Pie slice (triangle-ish)
+    return [
+      `M ${cx} ${cy}`,
+      `L ${x1} ${y1}`,
+      `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}`,
+      'Z',
+    ].join(' ');
+  }
+
+  // Donut slice (annular sector)
+  return [
+    `M ${x1} ${y1}`,
+    `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}`,
+    `L ${x3} ${y3}`,
+    `A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4}`,
+    'Z',
+  ].join(' ');
+}
+
+/**
+ * Pie/donut slices. Reads slice geometry from radial context.
+ *
+ * @example
+ * ```
+ * <RadialSlice colors={colors.categorical(5)} />
+ * ```
+ */
+export function RadialSlice({
+  colors,
+  cornerRadius = 0,
+  labels = true,
+  labelThreshold = 5,
+}: RadialSliceProps) {
+  const {cx, cy, radius, innerRadius, slices} = useRadial();
+
+  if (!slices || slices.length === 0) {
+    return null;
+  }
+
+  return (
+    <g>
+      {slices.map((slice, i) => {
+        const color = colors[i % colors.length];
+        const d = arcPath(
+          cx,
+          cy,
+          innerRadius,
+          radius,
+          slice.startAngle,
+          slice.endAngle,
+        );
+
+        // Label position at midpoint of arc, between inner and outer radius
+        const midAngle = (slice.startAngle + slice.endAngle) / 2;
+        const labelR = innerRadius + (radius - innerRadius) * 0.6;
+        const lx = cx + Math.cos(midAngle) * labelR;
+        const ly = cy + Math.sin(midAngle) * labelR;
+        const showLabel = labels && slice.percentage * 100 >= labelThreshold;
+
+        return (
+          <g key={slice.key}>
+            <path
+              d={d}
+              fill={color}
+              stroke="var(--color-background-surface)"
+              strokeWidth={cornerRadius > 0 ? 0 : 1}
+            />
+            {showLabel && (
+              <text
+                x={lx}
+                y={ly}
+                textAnchor="middle"
+                dominantBaseline="central"
+                fill="var(--color-text-primary)"
+                fontSize={12}
+                fontWeight={500}>
+                {Math.round(slice.percentage * 100)}%
+              </text>
+            )}
+          </g>
+        );
+      })}
+    </g>
+  );
+}