sid-ui 0.1.3 → 0.2.0

package/src/components/Treemap.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useRef, useState, type CSSProperties, type KeyboardEvent } from "react";
+
+import { segmentShares, squarify } from "./chartMath";
+import {
+  ChartLegend,
+  ChartTable,
+  ChartTip,
+  defaultFormat,
+  toneAt,
+  type ChartTone,
+} from "./chartParts";
+import { useElementWidth } from "./Responsive";
+
+export type TreemapDatum = {
+  label: string;
+  value: number;
+  /** Tiles in the same group share a tone and a legend entry. */
+  group?: string;
+  tone?: ChartTone;
+};
+
+const DEFAULT_HEIGHT = 320;
+/** The 2px surface gap between tiles. */
+const GAP = 2;
+/** A tile needs this much room before it prints its name. */
+const LABEL_MIN = { width: 64, height: 40 };
+
+/**
+ * Part of a whole for many items at once — budget lines, storage by folder. Each tile's area is
+ * its share, laid out squarified so tiles stay readable. Group tiles to color them by category.
+ */
+export function Treemap({
+  data,
+  label,
+  height = DEFAULT_HEIGHT,
+  formatValue = defaultFormat,
+}: {
+  data: TreemapDatum[];
+  /** Accessible name for the chart. */
+  label: string;
+  height?: number;
+  formatValue?: (value: number) => string;
+}) {
+  const frame = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(frame);
+  const [active, setActive] = useState<number | null>(null);
+
+  const sorted = [...data].sort((a, b) => b.value - a.value);
+  const groups = [...new Set(sorted.map((d) => d.group ?? d.label))];
+  const grouped = sorted.some((d) => d.group);
+  const toneOf = (d: TreemapDatum) =>
+    d.tone ?? toneAt(groups.indexOf(d.group ?? d.label) % 4, undefined);
+  const tiles = squarify(
+    sorted.map((d) => d.value),
+    { x: 0, y: 0, width, height },
+  );
+  const shares = segmentShares(sorted.map((d) => d.value));
+  const largest = Math.max(1, ...sorted.map((d) => d.value));
+
+  const onKey = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (sorted.length === 0) return;
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      const step = event.key === "ArrowRight" ? 1 : -1;
+      setActive((current) => ((current ?? -step) + step + sorted.length) % sorted.length);
+    } else if (event.key === "Escape") {
+      setActive(null);
+    }
+  };
+
+  const focusTile = active === null ? null : tiles[active];
+
+  return (
+    <div className="os-chart">
+      {grouped ? (
+        <ChartLegend
+          items={groups.map((g) => ({
+            label: g,
+            tone: toneOf(sorted.find((d) => (d.group ?? d.label) === g) ?? sorted[0]),
+          }))}
+        />
+      ) : null}
+      <div
+        ref={frame}
+        className="os-chart-frame os-treemap"
+        style={{ height }}
+        tabIndex={0}
+        role="group"
+        aria-label={`${label}. Use the arrow keys to read each tile.`}
+        onKeyDown={onKey}
+        onBlur={() => setActive(null)}
+        onPointerLeave={() => setActive(null)}
+      >
+        {width > 0
+          ? sorted.map((d, index) => {
+              const tile = tiles[index];
+              if (tile.width <= 0 || tile.height <= 0) return null;
+              const roomy = tile.width >= LABEL_MIN.width && tile.height >= LABEL_MIN.height;
+              // Larger tiles in a group read stronger.
+              const strength = 62 + Math.round((d.value / largest) * 38);
+              return (
+                <div
+                  key={`${d.label}-${index}`}
+                  className="os-treemap-tile"
+                  data-tone={toneOf(d)}
+                  data-active={active === index || undefined}
+                  data-dim={active !== null && active !== index ? true : undefined}
+                  style={
+                    {
+                      left: tile.x + GAP / 2,
+                      top: tile.y + GAP / 2,
+                      width: Math.max(0, tile.width - GAP),
+                      height: Math.max(0, tile.height - GAP),
+                      "--os-treemap-strength": `${strength}%`,
+                      animationDelay: `${Math.min(500, index * 35)}ms`,
+                    } as CSSProperties
+                  }
+                  onPointerEnter={() => setActive(index)}
+                  aria-hidden
+                >
+                  {roomy ? (
+                    <>
+                      <span className="os-treemap-name">{d.label}</span>
+                      <span className="os-treemap-value">{formatValue(d.value)}</span>
+                    </>
+                  ) : null}
+                </div>
+              );
+            })
+          : null}
+        {active !== null && focusTile ? (
+          <ChartTip
+            title={sorted[active].group ?? undefined}
+            left={focusTile.x + focusTile.width / 2}
+            top={Math.max(0, focusTile.y + 8)}
+            align={
+              focusTile.x + focusTile.width / 2 < width / 4
+                ? "start"
+                : focusTile.x + focusTile.width / 2 > (width * 3) / 4
+                  ? "end"
+                  : "center"
+            }
+            rows={[
+              {
+                label: `${sorted[active].label} · ${Math.round(shares[active])}%`,
+                value: formatValue(sorted[active].value),
+                tone: toneOf(sorted[active]),
+              },
+            ]}
+          />
+        ) : null}
+      </div>
+      <ChartTable
+        caption={label}
+        headers={["", ...(grouped ? ["Group"] : []), "Value", "Share"]}
+        rows={sorted.map((d, index) => [
+          d.label,
+          ...(grouped ? [d.group ?? ""] : []),
+          formatValue(d.value),
+          `${Math.round(shares[index])}%`,
+        ])}
+      />
+    </div>
+  );
+}

package/src/components/TrendChart.tsx

@@ -1,8 +1,16 @@
 "use client";
 
-import { useRef, useState, type KeyboardEvent, type PointerEvent } from "react";
+import { useId, useRef, useState, type KeyboardEvent, type PointerEvent } from "react";
 
-import { areaPath, linePath, linearScale, nearestIndex, niceTicks } from "./chartMath";
+import {
+  areaPath,
+  linePath,
+  linearScale,
+  nearestIndex,
+  niceTicks,
+  smoothAreaPath,
+  smoothPath,
+} from "./chartMath";
 import {
   ChartLegend,
   ChartTable,
@@ -27,8 +35,9 @@ const X_LABEL_ROOM = 64;
 const TIP_GAP = 12;
 
 /**
- * Change over time for up to four series on one axis. Lines are 2px with a 10% wash in
- * `area`; a crosshair snaps to the nearest point and reads out every series at once.
+ * Change over time for up to four series on one axis. Lines are 2px — smooth by default —
+ * with a gradient wash in `area`, and draw themselves in on first paint. A crosshair snaps to
+ * the nearest point and reads out every series at once.
  * Arrow keys move the readout for keyboard users; a hidden table carries every value.
  */
 export function TrendChart({
@@ -36,6 +45,7 @@ export function TrendChart({
   series,
   label,
   variant = "area",
+  curve = "smooth",
   height = DEFAULT_HEIGHT,
   formatValue = defaultFormat,
   hasLegend,
@@ -46,6 +56,8 @@ export function TrendChart({
   /** Accessible name for the chart. */
   label: string;
   variant?: "area" | "line";
+  /** smooth bends through each point without overshooting it; linear joins them straight. */
+  curve?: "smooth" | "linear";
   height?: number;
   formatValue?: (value: number) => string;
   /** Defaults to on for two or more series; one series is named by its card title. */
@@ -53,6 +65,10 @@ export function TrendChart({
 }) {
   const frame = useRef<HTMLDivElement>(null);
   const width = useElementWidth(frame);
+  // useId can contain colons, which url(#…) references do not tolerate.
+  const gradientId = `os-trend-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const line = curve === "smooth" ? smoothPath : linePath;
+  const area = curve === "smooth" ? smoothAreaPath : areaPath;
   const [active, setActive] = useState<number | null>(null);
 
   const plotW = Math.max(0, width - MARGIN.left - MARGIN.right);
@@ -141,14 +157,32 @@ export function TrendChart({
                 </text>
               ) : null,
             )}
-            {toned.map((item) => {
+            {toned.map((item, seriesIndex) => {
               const points = item.values.map((value, index) => ({ x: xs[index], y: y(value) }));
+              const fill = `${gradientId}-${seriesIndex}`;
               return (
                 <g key={item.label} data-tone={item.tone}>
                   {variant === "area" ? (
-                    <path className="os-chart-area" d={areaPath(points, y(0))} />
+                    <>
+                      <defs>
+                        <linearGradient id={fill} x1="0" x2="0" y1="0" y2="1">
+                          <stop className="os-chart-stop-top" offset="0%" />
+                          <stop className="os-chart-stop-bottom" offset="100%" />
+                        </linearGradient>
+                      </defs>
+                      <path
+                        className="os-chart-area"
+                        d={area(points, y(0))}
+                        fill={`url(#${fill})`}
+                      />
+                    </>
                   ) : null}
-                  <path className="os-chart-line" d={linePath(points)} />
+                  <path
+                    className="os-chart-line"
+                    d={line(points)}
+                    pathLength={1}
+                    style={{ animationDelay: `${seriesIndex * 120}ms` }}
+                  />
                 </g>
               );
             })}
@@ -162,14 +196,20 @@ export function TrendChart({
                   y2={MARGIN.top + plotH}
                 />
                 {toned.map((item) => (
-                  <circle
-                    key={item.label}
-                    className="os-chart-dot"
-                    data-tone={item.tone}
-                    cx={activeX}
-                    cy={y(item.values[active] ?? 0)}
-                    r={4}
-                  />
+                  <g key={item.label} data-tone={item.tone}>
+                    <circle
+                      className="os-chart-halo"
+                      cx={activeX}
+                      cy={y(item.values[active] ?? 0)}
+                      r={9}
+                    />
+                    <circle
+                      className="os-chart-dot"
+                      cx={activeX}
+                      cy={y(item.values[active] ?? 0)}
+                      r={4.5}
+                    />
+                  </g>
                 ))}
               </g>
             ) : null}

package/src/components/chartMath.ts

@@ -123,3 +123,154 @@ export function compactNumber(value: number): string {
     value,
   );
 }
+
+/**
+ * A smooth path through the points that never overshoots them — monotone cubic
+ * interpolation (Fritsch–Carlson), the same curve as D3's curveMonotoneX. Points must be
+ * sorted by x.
+ */
+export function smoothPath(points: Point[]): string {
+  const n = points.length;
+  if (n < 3) return linePath(points);
+  const dx: number[] = [];
+  const slope: number[] = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx.push(points[i + 1].x - points[i].x);
+    slope.push(dx[i] === 0 ? 0 : (points[i + 1].y - points[i].y) / dx[i]);
+  }
+  const tangent: number[] = [slope[0]];
+  for (let i = 1; i < n - 1; i++) {
+    tangent.push(slope[i - 1] * slope[i] <= 0 ? 0 : (slope[i - 1] + slope[i]) / 2);
+  }
+  tangent.push(slope[n - 2]);
+  // Fritsch–Carlson: cap the tangents so no segment bulges past its endpoints.
+  for (let i = 0; i < n - 1; i++) {
+    if (slope[i] === 0) {
+      tangent[i] = 0;
+      tangent[i + 1] = 0;
+      continue;
+    }
+    const a = tangent[i] / slope[i];
+    const b = tangent[i + 1] / slope[i];
+    const h = a * a + b * b;
+    if (h > 9) {
+      const t = 3 / Math.sqrt(h);
+      tangent[i] = t * a * slope[i];
+      tangent[i + 1] = t * b * slope[i];
+    }
+  }
+  let d = `M${fmt(points[0].x)},${fmt(points[0].y)}`;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = points[i];
+    const p1 = points[i + 1];
+    const third = dx[i] / 3;
+    d +=
+      `C${fmt(p0.x + third)},${fmt(p0.y + tangent[i] * third)} ` +
+      `${fmt(p1.x - third)},${fmt(p1.y - tangent[i + 1] * third)} ` +
+      `${fmt(p1.x)},${fmt(p1.y)}`;
+  }
+  return d;
+}
+
+/** The smooth line closed down to a baseline. */
+export function smoothAreaPath(points: Point[], baseline: number): string {
+  if (points.length === 0) return "";
+  const first = points[0];
+  const last = points[points.length - 1];
+  return `${smoothPath(points)}L${fmt(last.x)},${fmt(baseline)}L${fmt(first.x)},${fmt(baseline)}Z`;
+}
+
+/**
+ * Clean ticks spanning [min, max] for axes that need not start at zero, such as a scatter
+ * plot's: 20, 40, 60, 80 rather than 17.3 … 83.9.
+ */
+export function niceDomain(min: number, max: number, count = 5): number[] {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];
+  if (min === max) {
+    const pad = min === 0 ? 1 : Math.abs(min) * 0.1;
+    return niceDomain(min - pad, max + pad, count);
+  }
+  const raw = (max - min) / Math.max(1, count);
+  const magnitude = 10 ** Math.floor(Math.log10(raw));
+  const step = (NICE_STEPS.find((nice) => nice * magnitude >= raw) ?? 10) * magnitude;
+  const start = Math.floor(min / step) * step;
+  const end = Math.ceil(max / step) * step;
+  const ticks: number[] = [];
+  for (let tick = start; tick <= end + step / 2; tick += step) ticks.push(round(tick));
+  return ticks;
+}
+
+/** The point at `fraction` of a turn (0 at twelve o'clock, clockwise) on a circle. */
+export function polarPoint(cx: number, cy: number, radius: number, fraction: number): Point {
+  const angle = fraction * 2 * Math.PI - Math.PI / 2;
+  return { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) };
+}
+
+/** A closed polygon through the points, for radar shapes and grids. */
+export function polygonPath(points: Point[]): string {
+  return points.length ? `${linePath(points)}Z` : "";
+}
+
+export type Rect = { x: number; y: number; width: number; height: number };
+
+/**
+ * Squarified treemap layout (Bruls, Huizing, van Wijk): tiles each value into `rect` with
+ * area proportional to it, keeping tiles as close to square as it can. Returns one rect per
+ * value, in input order; values should be sorted largest first for the best shapes.
+ */
+export function squarify(values: number[], rect: Rect): Rect[] {
+  const out: Rect[] = values.map(() => ({ x: rect.x, y: rect.y, width: 0, height: 0 }));
+  const total = values.reduce((sum, v) => sum + Math.max(0, v), 0);
+  if (total <= 0 || rect.width <= 0 || rect.height <= 0) return out;
+  const scale = (rect.width * rect.height) / total;
+  const items = values
+    .map((value, index) => ({ index, area: Math.max(0, value) * scale }))
+    .filter((item) => item.area > 0);
+
+  let free = { ...rect };
+  let row: typeof items = [];
+
+  const worst = (areas: number[], side: number) => {
+    const sum = areas.reduce((a, b) => a + b, 0);
+    const max = Math.max(...areas);
+    const min = Math.min(...areas);
+    return Math.max((side * side * max) / (sum * sum), (sum * sum) / (side * side * min));
+  };
+
+  const layRow = (cells: typeof items) => {
+    const sum = cells.reduce((a, c) => a + c.area, 0);
+    const horizontal = free.width >= free.height;
+    if (horizontal) {
+      const width = sum / free.height;
+      let y = free.y;
+      for (const cell of cells) {
+        const height = cell.area / width;
+        out[cell.index] = { x: free.x, y, width, height };
+        y += height;
+      }
+      free = { x: free.x + width, y: free.y, width: free.width - width, height: free.height };
+    } else {
+      const height = sum / free.width;
+      let x = free.x;
+      for (const cell of cells) {
+        const width = cell.area / height;
+        out[cell.index] = { x, y: free.y, width, height };
+        x += width;
+      }
+      free = { x: free.x, y: free.y + height, width: free.width, height: free.height - height };
+    }
+  };
+
+  for (const item of items) {
+    const side = Math.min(free.width, free.height);
+    const current = row.map((c) => c.area);
+    if (row.length === 0 || worst([...current, item.area], side) <= worst(current, side)) {
+      row.push(item);
+    } else {
+      layRow(row);
+      row = [item];
+    }
+  }
+  if (row.length) layRow(row);
+  return out;
+}

package/src/components/index.ts

@@ -122,12 +122,42 @@ export { useFileDrop, formatBytes, matchesAccept } from "./useFileDrop";
 export type { UseFileDropOptions, FileDropProps } from "./useFileDrop";
 
 export { Rating, RATING_MAX } from "./Rating";
-export type { RatingProps } from "./Rating";
+export type { RatingProps, RatingIcon } from "./Rating";
 
-export { Notification, NotificationList } from "./Notification";
-export type { NotificationProps, NotificationListProps, NotificationTone } from "./Notification";
+export { MotionCard, FlipCard, ExpandableCard } from "./CardEffects";
+export type {
+  MotionCardProps,
+  MotionCardEffect,
+  FlipCardProps,
+  ExpandableCardProps,
+} from "./CardEffects";
+
+export { Chip, ChipGroup } from "./Chip";
+export type { ChipProps, ChipGroupProps, ChipColor, ChipVariant, ChipSize } from "./Chip";
+
+export { StatusIndicator } from "./StatusIndicator";
+export type {
+  StatusIndicatorProps,
+  StatusIndicatorSize,
+  StatusIndicatorAppearance,
+} from "./StatusIndicator";
+
+export {
+  Notification,
+  NotificationGroup,
+  NotificationIcon,
+  NotificationList,
+} from "./Notification";
+export type {
+  NotificationProps,
+  NotificationGroupProps,
+  NotificationIconProps,
+  NotificationListProps,
+  NotificationTone,
+} from "./Notification";
 export { NotificationViewport, useNotification } from "./NotificationTrigger";
 export type {
+  NotificationAction,
   NotificationPosition,
   ShowNotificationOptions,
   NotificationDismiss,
@@ -179,6 +209,14 @@ export { BarChart } from "./BarChart";
 export type { BarDatum } from "./BarChart";
 export { DonutChart } from "./DonutChart";
 export type { DonutSlice } from "./DonutChart";
+export { RadarChart } from "./RadarChart";
+export type { RadarSeries } from "./RadarChart";
+export { ScatterChart } from "./ScatterChart";
+export type { ScatterPoint, ScatterSeries } from "./ScatterChart";
+export { RadialBarChart } from "./RadialBarChart";
+export type { RadialBarDatum } from "./RadialBarChart";
+export { Treemap } from "./Treemap";
+export type { TreemapDatum } from "./Treemap";
 export { Sparkline } from "./Sparkline";
 export { FunnelChart } from "./FunnelChart";
 export type { FunnelStage } from "./FunnelChart";