@epoch32/visage 0.0.0-stage → 0.0.0

package/src/charts/Bar.tsx

@@ -0,0 +1,86 @@
+import type { Child } from "../dom";
+import { onCleanup } from "../signals";
+import { useChartContext } from "./context";
+
+export interface BarProps {
+  dataKey: string;
+  fill?: string;
+  radius?: number;
+  maxWidth?: number;
+  name?: string;
+  opacity?: number | string;
+}
+
+export function Bar(props: BarProps): Child {
+  return () => {
+    const ctx = useChartContext();
+
+    const fill = props.fill ?? "#6366f1";
+    const radius = props.radius ?? 4;
+    const id = `bar-${props.dataKey}-${Math.random().toString(36).slice(2, 7)}`;
+
+    ctx.registerSeries({
+      id,
+      dataKey: props.dataKey,
+      type: "bar",
+      color: fill,
+      name: props.name ?? props.dataKey
+    });
+
+    onCleanup(() => {
+      ctx.unregisterSeries(id);
+    });
+
+    return (
+      <g class={`visage-bar-${props.dataKey}`} opacity={props.opacity ?? 1}>
+        {() => {
+          const dataArr = ctx.data();
+          if (dataArr.length === 0) return null;
+
+          const xScale = ctx.xScale();
+          const yScale = ctx.yScale();
+          const baselineY = ctx.innerHeight();
+
+          // Check if there are other Bar series to calculate grouped offsets
+          const allBars = ctx.series().filter((s) => s.type === "bar");
+          const barIndex = allBars.findIndex((s) => s.id === id);
+          const totalBars = Math.max(1, allBars.length);
+
+          const bars: Child[] = [];
+
+          for (let i = 0; i < dataArr.length; i++) {
+            const item = dataArr[i];
+            const val = item[props.dataKey];
+            if (typeof val !== "number" || Number.isNaN(val)) continue;
+
+            let slotX = 0;
+            let slotW = 20;
+
+            if (xScale.type === "band") {
+              slotX = xScale(i);
+              slotW = xScale.bandwidth();
+            } else {
+              const stepW = ctx.innerWidth() / Math.max(1, dataArr.length);
+              slotX = xScale(i) - stepW / 2;
+              slotW = stepW * 0.8;
+            }
+
+            // Grouped bar width
+            const subBarW = slotW / totalBars;
+            const barW = props.maxWidth ? Math.min(props.maxWidth, subBarW) : subBarW;
+            const barX = slotX + (barIndex >= 0 ? barIndex * subBarW : 0) + (subBarW - barW) / 2;
+
+            const y = yScale(val);
+            const h = Math.max(0, baselineY - y);
+
+            bars.push(
+              <rect x={barX} y={y} width={barW} height={h} rx={radius} ry={radius} fill={fill} />
+            );
+          }
+
+          return bars;
+        }}
+      </g>
+    );
+  };
+}

package/src/charts/CartesianGrid.tsx

@@ -0,0 +1,72 @@
+import type { Child } from "../dom";
+import { useChartContext } from "./context";
+
+export interface CartesianGridProps {
+  horizontal?: boolean;
+  vertical?: boolean;
+  stroke?: string;
+  strokeWidth?: number | string;
+  strokeDasharray?: string;
+  opacity?: number | string;
+}
+
+export function CartesianGrid(props: CartesianGridProps): Child {
+  return () => {
+    const ctx = useChartContext();
+
+    const horizontal = props.horizontal ?? true;
+    const vertical = props.vertical ?? false;
+    const stroke = props.stroke ?? "#e2e8f0";
+    const strokeWidth = props.strokeWidth ?? 1;
+    const strokeDasharray = props.strokeDasharray;
+    const opacity = props.opacity ?? 0.8;
+
+    const lines: Child[] = [];
+    const w = ctx.innerWidth();
+    const h = ctx.innerHeight();
+    const yScale = ctx.yScale();
+    const xScale = ctx.xScale();
+
+    if (horizontal) {
+      const ticks = yScale.ticks(5);
+      for (const t of ticks) {
+        const y = yScale(t);
+        lines.push(
+          <line
+            x1={0}
+            y1={y}
+            x2={w}
+            y2={y}
+            stroke={stroke}
+            stroke-width={strokeWidth}
+            stroke-dasharray={strokeDasharray}
+          />
+        );
+      }
+    }
+
+    if (vertical) {
+      const ticks = xScale.ticks(5);
+      for (const t of ticks) {
+        const x = xScale(t);
+        lines.push(
+          <line
+            x1={x}
+            y1={0}
+            x2={x}
+            y2={h}
+            stroke={stroke}
+            stroke-width={strokeWidth}
+            stroke-dasharray={strokeDasharray}
+          />
+        );
+      }
+    }
+
+    return (
+      <g class="visage-cartesian-grid" opacity={opacity}>
+        {lines}
+      </g>
+    );
+  };
+}

package/src/charts/Chart.tsx

@@ -0,0 +1,269 @@
+import { type Child, resolveValue } from "../dom";
+import type { ClassProp, ReactiveProp } from "../jsx-runtime/jsx";
+import { computed, onCleanup, signal, untrack } from "../signals";
+import { ChartContext, type ChartContextValue } from "./context";
+import { createBandScale, createLinearScale } from "./scale";
+import type { AnyScale, HoverState, Margin, SeriesMeta } from "./types";
+
+export interface ChartProps {
+  data: ReactiveProp<any[]>;
+  width?: number | string;
+  height?: number | string;
+  margin?: Partial<Margin>;
+  yDomain?: [number, number];
+  class?: ClassProp;
+  className?: ClassProp;
+  style?: any;
+  children?: Child;
+  [key: string]: any;
+}
+
+const DEFAULT_MARGIN: Margin = {
+  top: 16,
+  right: 16,
+  bottom: 24,
+  left: 36
+};
+
+export function Chart(props: ChartProps): Child {
+  const margin: Margin = {
+    ...DEFAULT_MARGIN,
+    ...props.margin
+  };
+
+  const initialW = typeof props.width === "number" ? props.width : 500;
+  const initialH = typeof props.height === "number" ? props.height : 300;
+
+  const measuredWidth = signal<number>(initialW);
+  const measuredHeight = signal<number>(initialH);
+
+  let containerEl: HTMLElement | null = null;
+
+  const handleRef = (el: HTMLElement) => {
+    containerEl = el;
+    if (typeof ResizeObserver !== "undefined") {
+      const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const cr = entry.contentRect;
+          if (cr.width > 0) measuredWidth.set(cr.width);
+          if (cr.height > 0) measuredHeight.set(cr.height);
+        }
+      });
+      ro.observe(el);
+      onCleanup(() => ro.disconnect());
+    } else {
+      if (el.clientWidth > 0) measuredWidth.set(el.clientWidth);
+      if (el.clientHeight > 0) measuredHeight.set(el.clientHeight);
+    }
+  };
+
+  const innerWidth = computed(() => Math.max(10, measuredWidth() - margin.left - margin.right));
+  const innerHeight = computed(() => Math.max(10, measuredHeight() - margin.top - margin.bottom));
+
+  const rawData = () => resolveValue(props.data) || [];
+
+  const seriesList = signal<SeriesMeta[]>([]);
+  const xDataKey = signal<string | undefined>(undefined);
+
+  const registerSeries = (meta: SeriesMeta) => {
+    untrack(() => {
+      seriesList.update((prev) => {
+        if (prev.some((s) => s.id === meta.id)) return prev;
+        return [...prev, meta];
+      });
+    });
+  };
+
+  const unregisterSeries = (id: string) => {
+    untrack(() => {
+      seriesList.update((prev) => prev.filter((s) => s.id !== id));
+    });
+  };
+
+  const hoverState = signal<HoverState>({
+    active: false,
+    x: 0,
+    y: 0,
+    index: -1
+  });
+
+  const xScale = computed<AnyScale>(() => {
+    const dataArr = rawData();
+    const w = innerWidth();
+    const key = xDataKey();
+
+    const hasBarSeries = untrack(() => seriesList().some((s) => s.type === "bar"));
+
+    if (hasBarSeries && key && dataArr.length > 0) {
+      const categories = dataArr.map((d: any) => String(d[key]));
+      return createBandScale(categories, [0, w], {
+        paddingInner: 0.1,
+        paddingOuter: 0.05
+      });
+    }
+
+    const maxIdx = Math.max(1, dataArr.length - 1);
+    return createLinearScale([0, maxIdx], [0, w]);
+  });
+
+  const yScale = computed(() => {
+    const h = innerHeight();
+    const dataArr = rawData();
+    const currentSeries = seriesList();
+
+    let minY = 0;
+    let maxY = 10;
+
+    if (props.yDomain) {
+      minY = props.yDomain[0];
+      maxY = props.yDomain[1];
+    } else if (dataArr.length > 0 && currentSeries.length > 0) {
+      let foundMin = Infinity;
+      let foundMax = -Infinity;
+
+      for (const item of dataArr) {
+        for (const s of currentSeries) {
+          const val = item[s.dataKey];
+          if (typeof val === "number" && !Number.isNaN(val)) {
+            if (val < foundMin) foundMin = val;
+            if (val > foundMax) foundMax = val;
+          }
+        }
+      }
+
+      if (foundMax > -Infinity) {
+        minY = Math.min(0, foundMin);
+        maxY = foundMax === 0 ? 1 : foundMax * 1.1; // 10% headroom
+      }
+    }
+
+    // SVG coordinate space: 0 is top, innerHeight is bottom
+    return createLinearScale([minY, maxY], [h, 0], { nice: true });
+  });
+
+  const handlePointer = (clientX: number, clientY: number) => {
+    if (!containerEl) return;
+    const rect = containerEl.getBoundingClientRect();
+    const relX = clientX - rect.left - margin.left;
+    const relY = clientY - rect.top - margin.top;
+
+    const w = innerWidth();
+    const h = innerHeight();
+
+    if (relX < 0 || relX > w || relY < 0 || relY > h) {
+      hoverState.set({ active: false, x: 0, y: 0, index: -1 });
+      return;
+    }
+
+    const dataArr = rawData();
+    if (dataArr.length === 0) return;
+
+    const count = dataArr.length;
+    const stepW = w / Math.max(1, count - 1);
+    const rawIdx = Math.round(relX / stepW);
+    const clampedIdx = Math.max(0, Math.min(count - 1, rawIdx));
+
+    hoverState.set({
+      active: true,
+      x: relX + margin.left,
+      y: relY + margin.top,
+      index: clampedIdx,
+      datum: dataArr[clampedIdx]
+    });
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    handlePointer(e.clientX, e.clientY);
+  };
+
+  const handleMouseLeave = () => {
+    hoverState.set({ active: false, x: 0, y: 0, index: -1 });
+  };
+
+  const handleTouchMove = (e: TouchEvent) => {
+    const touch = e.touches[0];
+    if (touch) handlePointer(touch.clientX, touch.clientY);
+  };
+
+  const handleTouchEnd = () => {
+    hoverState.set({ active: false, x: 0, y: 0, index: -1 });
+  };
+
+  const ctxValue: ChartContextValue = {
+    data: rawData,
+    width: () => measuredWidth(),
+    height: () => measuredHeight(),
+    margin,
+    innerWidth: () => innerWidth(),
+    innerHeight: () => innerHeight(),
+    xScale: () => xScale(),
+    yScale: () => yScale(),
+    hoverState: () => hoverState(),
+    setHoverState: (s) => hoverState.set(s),
+    xDataKey: () => xDataKey(),
+    setXDataKey: (k) => xDataKey.set(k),
+    series: () => seriesList(),
+    registerSeries,
+    unregisterSeries
+  };
+
+  const containerStyle = {
+    position: "relative",
+    width: typeof props.width === "number" ? `${props.width}px` : (props.width ?? "100%"),
+    height: typeof props.height === "number" ? `${props.height}px` : (props.height ?? "300px"),
+    touchAction: "none",
+    userSelect: "none",
+    ...props.style
+  };
+
+  const rawChildren = Array.isArray(props.children) ? props.children : [props.children];
+  const childrenList: any[] = [];
+  const stack = [...rawChildren];
+  while (stack.length > 0) {
+    const item = stack.shift();
+    if (Array.isArray(item)) {
+      stack.unshift(...item);
+    } else if (item !== null && item !== undefined && item !== false) {
+      childrenList.push(item);
+    }
+  }
+
+  const svgChildren: Child[] = [];
+  const overlayChildren: Child[] = [];
+
+  for (const child of childrenList) {
+    if (typeof child === "function" && (child as any).__visage_overlay) {
+      overlayChildren.push(child);
+    } else {
+      svgChildren.push(child);
+    }
+  }
+
+  return ChartContext.Provider({
+    value: ctxValue,
+    children: () => (
+      <div
+        ref={handleRef}
+        class={props.class || props.className}
+        style={containerStyle}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        <svg
+          role="img"
+          aria-label={props["aria-label"] ?? "Data visualization chart"}
+          viewBox={() => `0 0 ${measuredWidth()} ${measuredHeight()}`}
+          width="100%"
+          height="100%"
+          style={{ overflow: "visible", display: "block" }}
+        >
+          <title>{props.title ?? "Data Visualization Chart"}</title>
+          <g transform={`translate(${margin.left}, ${margin.top})`}>{svgChildren}</g>
+        </svg>
+        {overlayChildren}
+      </div>
+    )
+  });
+}

package/src/charts/Cursor.tsx

@@ -0,0 +1,42 @@
+import type { Child } from "../dom";
+import { useChartContext } from "./context";
+
+export interface ChartCursorProps {
+  stroke?: string;
+  strokeWidth?: number | string;
+  strokeDasharray?: string;
+  opacity?: number | string;
+}
+
+export function ChartCursor(props: ChartCursorProps): Child {
+  return () => {
+    const ctx = useChartContext();
+
+    const stroke = props.stroke ?? "#94a3b8";
+    const strokeWidth = props.strokeWidth ?? 1;
+    const strokeDasharray = props.strokeDasharray ?? "4 4";
+    const opacity = props.opacity ?? 0.8;
+
+    const hover = ctx.hoverState();
+    if (!hover.active) return null;
+
+    const h = ctx.innerHeight();
+    // hover.x is relative to container, subtract margin.left for group coordinate space
+    const x = hover.x - ctx.margin.left;
+
+    return (
+      <g class="visage-chart-cursor">
+        <line
+          x1={x}
+          y1={0}
+          x2={x}
+          y2={h}
+          stroke={stroke}
+          stroke-width={strokeWidth}
+          stroke-dasharray={strokeDasharray}
+          opacity={opacity}
+        />
+      </g>
+    );
+  };
+}

package/src/charts/Legend.tsx

@@ -0,0 +1,56 @@
+import type { Child } from "../dom";
+import type { ClassProp } from "../jsx-runtime/jsx";
+import { useChartContext } from "./context";
+
+export interface LegendProps {
+  align?: "left" | "center" | "right";
+  class?: ClassProp;
+  className?: ClassProp;
+}
+
+export function ChartLegend(props: LegendProps): Child {
+  const render = () => {
+    const ctx = useChartContext();
+    const align = props.align ?? "center";
+
+    const justifyMap = {
+      left: "flex-start",
+      center: "center",
+      right: "flex-end"
+    };
+
+    const series = ctx.series();
+    return (
+      <div
+        class={props.class || props.className}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: justifyMap[align],
+          gap: "16px",
+          paddingTop: "8px",
+          fontSize: "12px",
+          color: "#475569"
+        }}
+      >
+        {series.map((s) => (
+          <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+            <span
+              style={{
+                width: "10px",
+                height: "10px",
+                borderRadius: "3px",
+                background: s.color ?? "#8b5cf6"
+              }}
+            />
+            <span>{s.name ?? s.dataKey}</span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+  (render as any).__visage_overlay = true;
+  return render;
+}
+
+export const Legend = ChartLegend;

package/src/charts/Line.tsx

@@ -0,0 +1,106 @@
+import type { Child } from "../dom";
+import { onCleanup } from "../signals";
+import { useChartContext } from "./context";
+import { pathLine } from "./path";
+import type { CurveType, Point } from "./types";
+
+export interface LineProps {
+  dataKey: string;
+  stroke?: string;
+  strokeWidth?: number | string;
+  strokeDasharray?: string;
+  curve?: CurveType;
+  dot?: boolean | { r?: number; fill?: string; stroke?: string; strokeWidth?: number };
+  name?: string;
+  opacity?: number | string;
+}
+
+export function Line(props: LineProps): Child {
+  return () => {
+    const ctx = useChartContext();
+
+    const stroke = props.stroke ?? "#8b5cf6";
+    const strokeWidth = props.strokeWidth ?? 2;
+    const curve = props.curve ?? "linear";
+    const id = `line-${props.dataKey}-${Math.random().toString(36).slice(2, 7)}`;
+
+    ctx.registerSeries({
+      id,
+      dataKey: props.dataKey,
+      type: "line",
+      color: stroke,
+      name: props.name ?? props.dataKey
+    });
+
+    onCleanup(() => {
+      ctx.unregisterSeries(id);
+    });
+
+    return (
+      <g class={`visage-line-${props.dataKey}`} opacity={props.opacity ?? 1}>
+        {() => {
+          const dataArr = ctx.data();
+          if (dataArr.length === 0) return null;
+
+          const xScale = ctx.xScale();
+          const yScale = ctx.yScale();
+
+          const points: Point[] = [];
+          for (let i = 0; i < dataArr.length; i++) {
+            const item = dataArr[i];
+            const val = item[props.dataKey];
+            if (typeof val !== "number" || Number.isNaN(val)) continue;
+
+            let x = 0;
+            if (xScale.type === "band") {
+              x = xScale(i) + xScale.bandwidth() / 2;
+            } else {
+              x = xScale(i);
+            }
+
+            const y = yScale(val);
+            points.push({ x, y });
+          }
+
+          const d = pathLine(points, { curve });
+
+          const dots: Child[] = [];
+          if (props.dot && points.length > 0) {
+            const dotCfg = typeof props.dot === "object" ? props.dot : {};
+            const r = dotCfg.r ?? 3.5;
+            const fill = dotCfg.fill ?? "#ffffff";
+            const dotStroke = dotCfg.stroke ?? stroke;
+            const dotSw = dotCfg.strokeWidth ?? 2;
+
+            for (let i = 0; i < points.length; i++) {
+              const p = points[i]!;
+              dots.push(
+                <circle
+                  cx={p.x}
+                  cy={p.y}
+                  r={r}
+                  fill={fill}
+                  stroke={dotStroke}
+                  stroke-width={dotSw}
+                />
+              );
+            }
+          }
+
+          return [
+            <path
+              d={d}
+              fill="none"
+              stroke={stroke}
+              stroke-width={strokeWidth}
+              stroke-dasharray={props.strokeDasharray}
+              stroke-linejoin="round"
+              stroke-linecap="round"
+            />,
+            ...dots
+          ];
+        }}
+      </g>
+    );
+  };
+}