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

package/dist/Radial/RadialChart.js

@@ -0,0 +1,174 @@
+// 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 { useMemo, useRef, useState, useLayoutEffect } from 'react';
+import { RadialProvider } from "./RadialContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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
+}) {
+  const containerRef = useRef(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 = axes ? 'spider' : 'pie';
+
+  // Spider: compute axis angles and domains
+  const spiderCtx = useMemo(() => {
+    if (!axes || axes.length === 0) {
+      return {};
+    }
+    const angleByAxis = new Map();
+    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();
+    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 => 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] : 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 /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    style: {
+      width: '100%'
+    },
+    children: containerWidth > 0 && /*#__PURE__*/_jsx("svg", {
+      width: containerWidth,
+      height: height,
+      children: /*#__PURE__*/_jsx(RadialProvider, {
+        value: ctx,
+        children: children
+      })
+    })
+  });
+}

package/dist/Radial/RadialContext.d.ts

@@ -0,0 +1,5 @@
+import type { RadialContext } from './types';
+export declare const RadialProvider: import("react").Provider<RadialContext | null>;
+/** Access the radial chart context. Throws if used outside RadialChart. */
+export declare function useRadial(): RadialContext;
+//# sourceMappingURL=RadialContext.d.ts.map

package/dist/Radial/RadialContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialContext.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialContext.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,cAAc,gDAAqB,CAAC;AAEjD,2EAA2E;AAC3E,wBAAgB,SAAS,IAAI,aAAa,CAMzC"}

package/dist/Radial/RadialContext.js

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

package/dist/Radial/RadialGrid.d.ts

@@ -0,0 +1,14 @@
+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 declare function RadialGrid({ rings }: RadialGridProps): import("react").JSX.Element | null;
+//# sourceMappingURL=RadialGrid.d.ts.map

package/dist/Radial/RadialGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGrid.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialGrid.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EAAC,KAAS,EAAC,EAAE,eAAe,sCA0DtD"}

package/dist/Radial/RadialGrid.js

@@ -0,0 +1,70 @@
+// 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.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Concentric grid rings and axis lines for spider charts.
+ *
+ * @example
+ * ```
+ * <RadialGrid rings={5} />
+ * ```
+ */
+export function RadialGrid({
+  rings = 5
+}) {
+  const {
+    cx,
+    cy,
+    radius,
+    innerRadius,
+    axes,
+    angleByAxis,
+    radiusScale
+  } = useRadial();
+  if (!axes || !angleByAxis || !radiusScale) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("g", {
+    children: [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 /*#__PURE__*/_jsx("polygon", {
+        points: points,
+        fill: "none",
+        stroke: "var(--color-border)",
+        strokeOpacity: 0.3,
+        strokeWidth: 1
+      }, i);
+    }), axes.map(key => {
+      const angle = angleByAxis.get(key);
+      if (angle == null) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("line", {
+        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
+      }, key);
+    })]
+  });
+}

package/dist/Radial/RadialSlice.d.ts

@@ -0,0 +1,23 @@
+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;
+}
+/**
+ * Pie/donut slices. Reads slice geometry from radial context.
+ *
+ * @example
+ * ```
+ * <RadialSlice colors={colors.categorical(5)} />
+ * ```
+ */
+export declare function RadialSlice({ colors, cornerRadius, labels, labelThreshold, }: RadialSliceProps): import("react").JSX.Element | null;
+//# sourceMappingURL=RadialSlice.d.ts.map

package/dist/Radial/RadialSlice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialSlice.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialSlice.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA2CD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,YAAgB,EAChB,MAAa,EACb,cAAkB,GACnB,EAAE,gBAAgB,sCAoDlB"}

package/dist/Radial/RadialSlice.js

@@ -0,0 +1,85 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialSlice.tsx
+ * @output Renders pie/donut slices from radial context
+ */
+
+import { useRadial } from "./RadialContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** SVG arc path from angles and radii */
+function arcPath(cx, cy, innerR, outerR, startAngle, endAngle) {
+  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
+}) {
+  const {
+    cx,
+    cy,
+    radius,
+    innerRadius,
+    slices
+  } = useRadial();
+  if (!slices || slices.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    children: 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 /*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx("path", {
+          d: d,
+          fill: color,
+          stroke: "var(--color-background-surface)",
+          strokeWidth: cornerRadius > 0 ? 0 : 1
+        }), showLabel && /*#__PURE__*/_jsxs("text", {
+          x: lx,
+          y: ly,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          fill: "var(--color-text-primary)",
+          fontSize: 12,
+          fontWeight: 500,
+          children: [Math.round(slice.percentage * 100), "%"]
+        })]
+      }, slice.key);
+    })
+  });
+}

package/dist/Radial/RadialTooltip.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+export interface RadialTooltipDatum {
+    /** The slice key or axis name */
+    label: string;
+    /** The numeric value */
+    value: number;
+    /** For pie/donut: the percentage of total */
+    percentage?: number;
+    /** Index in the dataset */
+    index: number;
+}
+export interface RadialTooltipProps {
+    /**
+     * Custom render function for tooltip content.
+     * Receives the hovered slice/point info.
+     *
+     * @default Renders label, value, and percentage
+     */
+    render?: (datum: RadialTooltipDatum) => ReactNode;
+    /**
+     * Whether to highlight the hovered slice by scaling it outward.
+     * @default true
+     */
+    highlight?: boolean;
+    /**
+     * Highlight offset in pixels (how far the slice pushes out).
+     * @default 6
+     */
+    highlightOffset?: number;
+}
+/**
+ * Tooltip for radial charts. Detects which slice the pointer is over
+ * using polar coordinate math and renders a tooltip in the top layer.
+ *
+ * @example
+ * ```tsx
+ * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
+ *   <RadialSlice colors={colors} />
+ *   <RadialTooltip />
+ * </RadialChart>
+ * ```
+ */
+export declare function RadialTooltip({ render, highlight, highlightOffset, }: RadialTooltipProps): import("react").JSX.Element;
+//# sourceMappingURL=RadialTooltip.d.ts.map

package/dist/Radial/RadialTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialTooltip.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAKpE,MAAM,WAAW,kBAAkB;IACjC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAgB,EAChB,eAAmB,GACpB,EAAE,kBAAkB,+BAsRpB"}