@epoch32/visage 0.0.0-stage → 0.0.0

package/src/charts/Pie.tsx

@@ -0,0 +1,88 @@
+import type { Child } from "../dom";
+import { useChartContext } from "./context";
+import { pathArc } from "./path";
+
+export interface PieProps {
+  dataKey: string;
+  nameKey?: string;
+  innerRadius?: number;
+  outerRadius?: number;
+  colors?: string[];
+  cx?: number;
+  cy?: number;
+  padAngle?: number; // radians
+}
+
+const DEFAULT_PALETTE = [
+  "#8b5cf6", // Purple
+  "#ec4899", // Pink
+  "#3b82f6", // Blue
+  "#10b981", // Emerald
+  "#f59e0b", // Amber
+  "#6366f1", // Indigo
+  "#14b8a6", // Teal
+  "#ef4444" // Red
+];
+
+export function Pie(props: PieProps): Child {
+  return () => {
+    const ctx = useChartContext();
+
+    const innerRadius = props.innerRadius ?? 0;
+    const outerRadius = props.outerRadius ?? 80;
+    const colors = props.colors ?? DEFAULT_PALETTE;
+    const padAngle = props.padAngle ?? 0.02;
+
+    return (
+      <g class="visage-pie">
+        {() => {
+          const dataArr = ctx.data();
+          if (dataArr.length === 0) return null;
+
+          const w = ctx.innerWidth();
+          const h = ctx.innerHeight();
+          const centerX = props.cx ?? w / 2;
+          const centerY = props.cy ?? h / 2;
+
+          let total = 0;
+          for (const item of dataArr) {
+            const val = Number(item[props.dataKey]) || 0;
+            total += val;
+          }
+
+          if (total === 0) return null;
+
+          const slices: Child[] = [];
+          let currentAngle = -Math.PI / 2; // start from 12 o'clock
+
+          for (let i = 0; i < dataArr.length; i++) {
+            const item = dataArr[i];
+            const val = Number(item[props.dataKey]) || 0;
+            const sliceAngle = (val / total) * (2 * Math.PI);
+            const startAngle = currentAngle + (val > 0 ? padAngle / 2 : 0);
+            const endAngle = currentAngle + sliceAngle - (val > 0 ? padAngle / 2 : 0);
+
+            currentAngle += sliceAngle;
+
+            if (val <= 0 || endAngle <= startAngle) continue;
+
+            const d = pathArc({
+              cx: centerX,
+              cy: centerY,
+              innerRadius,
+              outerRadius,
+              startAngle,
+              endAngle
+            });
+
+            const fill = colors[i % colors.length];
+
+            slices.push(<path d={d} fill={fill} stroke="#ffffff" stroke-width={1.5} />);
+          }
+
+          return slices;
+        }}
+      </g>
+    );
+  };
+}

package/src/charts/Tooltip.tsx

@@ -0,0 +1,127 @@
+import type { Child } from "../dom";
+import type { ClassProp } from "../jsx-runtime/jsx";
+import { useChartContext } from "./context";
+import type { SeriesMeta } from "./types";
+
+export interface TooltipProps {
+  format?: (val: any, name: string) => string;
+  labelFormat?: (label: any) => string;
+  content?: (datum: any, series: SeriesMeta[]) => Child;
+  class?: ClassProp;
+  className?: ClassProp;
+}
+
+export function ChartTooltip(props: TooltipProps): Child {
+  const render = () => {
+    const ctx = useChartContext();
+    const hover = ctx.hoverState();
+    if (!hover.active || !hover.datum) return null;
+
+    const w = ctx.width();
+    const datum = hover.datum;
+    const series = ctx.series();
+    const xKey = ctx.xDataKey();
+
+    // Avoid tooltip escaping the right edge
+    const cardWidth = 160;
+    let left = hover.x + 14;
+    if (left + cardWidth > w) {
+      left = Math.max(10, hover.x - cardWidth - 14);
+    }
+    const top = Math.max(10, hover.y - 30);
+
+    if (props.content) {
+      return (
+        <div
+          style={{
+            position: "absolute",
+            left: `${left}px`,
+            top: `${top}px`,
+            pointerEvents: "none",
+            zIndex: 50
+          }}
+        >
+          {props.content(datum, series)}
+        </div>
+      );
+    }
+
+    const label = xKey && datum[xKey] !== undefined ? datum[xKey] : `#${hover.index + 1}`;
+    const formattedLabel = props.labelFormat ? props.labelFormat(label) : String(label);
+
+    return (
+      <div
+        class={props.class || props.className}
+        style={{
+          position: "absolute",
+          left: `${left}px`,
+          top: `${top}px`,
+          pointerEvents: "none",
+          zIndex: 50,
+          minWidth: `${cardWidth}px`,
+          padding: "8px 12px",
+          borderRadius: "10px",
+          background: "rgba(255, 255, 255, 0.92)",
+          backdropFilter: "blur(12px)",
+          WebkitBackdropFilter: "blur(12px)",
+          border: "1px solid rgba(226, 232, 240, 0.8)",
+          boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05)",
+          fontSize: "12px",
+          color: "#1e293b",
+          lineHeight: "1.4"
+        }}
+      >
+        <div
+          style={{
+            fontWeight: "600",
+            color: "#475569",
+            marginBottom: "6px",
+            borderBottom: "1px solid #f1f5f9",
+            paddingBottom: "4px"
+          }}
+        >
+          {formattedLabel}
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+          {series.map((s) => {
+            const rawVal = datum[s.dataKey];
+            if (rawVal === undefined || rawVal === null) return null;
+
+            const valStr = props.format
+              ? props.format(rawVal, s.name ?? s.dataKey)
+              : String(rawVal);
+
+            return (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: "8px"
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                  <span
+                    style={{
+                      width: "8px",
+                      height: "8px",
+                      borderRadius: "50%",
+                      background: s.color ?? "#8b5cf6"
+                    }}
+                  />
+                  <span style={{ color: "#64748b" }}>{s.name ?? s.dataKey}</span>
+                </div>
+                <span style={{ fontWeight: "600", color: "#0f172a" }}>{valStr}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+  (render as any).__visage_overlay = true;
+  return render;
+}
+
+export const Tooltip = ChartTooltip;

package/src/charts/context.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from "../signals";
+import type { AnyScale, HoverState, LinearScale, Margin, SeriesMeta } from "./types";
+
+export interface ChartContextValue {
+  data: () => any[];
+  width: () => number;
+  height: () => number;
+  margin: Margin;
+  innerWidth: () => number;
+  innerHeight: () => number;
+  xScale: () => AnyScale;
+  yScale: () => LinearScale;
+  hoverState: () => HoverState;
+  setHoverState: (state: HoverState) => void;
+  xDataKey: () => string | undefined;
+  setXDataKey: (key: string) => void;
+  series: () => SeriesMeta[];
+  registerSeries: (meta: SeriesMeta) => void;
+  unregisterSeries: (id: string) => void;
+}
+
+export const ChartContext = createContext<ChartContextValue | undefined>(undefined);
+
+export function useChartContext(): ChartContextValue {
+  const ctx = useContext(ChartContext);
+  if (!ctx) {
+    throw new Error("Visage Chart child component must be rendered within a <Chart> container.");
+  }
+  return ctx;
+}

package/src/charts/index.ts

@@ -0,0 +1,14 @@
+export * from "./Area";
+export * from "./Axis";
+export * from "./Bar";
+export * from "./CartesianGrid";
+export * from "./Chart";
+export * from "./Cursor";
+export * from "./context";
+export * from "./Legend";
+export * from "./Line";
+export * from "./Pie";
+export * from "./path";
+export * from "./scale";
+export * from "./Tooltip";
+export * from "./types";

package/src/charts/path.ts

@@ -0,0 +1,155 @@
+import type { CurveType, Point } from "./types";
+
+export interface PathLineOptions {
+  curve?: CurveType;
+}
+
+/**
+ * Generates an SVG path `d` string representing a polyline or smooth spline curve.
+ */
+export function pathLine(points: Point[], options: PathLineOptions = {}): string {
+  if (points.length === 0) return "";
+  if (points.length === 1) {
+    const p = points[0]!;
+    return `M ${p.x.toFixed(2)},${p.y.toFixed(2)}`;
+  }
+
+  const curve = options.curve ?? "linear";
+
+  if (curve === "smooth" && points.length >= 2) {
+    if (points.length === 2) {
+      const p0 = points[0]!;
+      const p1 = points[1]!;
+      return `M ${p0.x.toFixed(2)},${p0.y.toFixed(2)} L ${p1.x.toFixed(2)},${p1.y.toFixed(2)}`;
+    }
+
+    const n = points.length;
+    const dx: number[] = [];
+    const dy: number[] = [];
+    const slopes: number[] = [];
+
+    for (let i = 0; i < n - 1; i++) {
+      const pA = points[i]!;
+      const pB = points[i + 1]!;
+      const deltaX = pB.x - pA.x;
+      const deltaY = pB.y - pA.y;
+      dx.push(deltaX);
+      dy.push(deltaY);
+      slopes.push(deltaX === 0 ? 0 : deltaY / deltaX);
+    }
+
+    const m: number[] = new Array(n).fill(0);
+    m[0] = slopes[0]!;
+    m[n - 1] = slopes[n - 2]!;
+
+    for (let i = 1; i < n - 1; i++) {
+      const sPrev = slopes[i - 1]!;
+      const sNext = slopes[i]!;
+      if (sPrev * sNext <= 0) {
+        m[i] = 0;
+      } else {
+        const dxPrev = dx[i - 1]!;
+        const dxNext = dx[i]!;
+        const common = dxPrev + dxNext;
+        m[i] =
+          common === 0 ? 0 : (3 * common) / ((common + dxNext) / sPrev + (common + dxPrev) / sNext);
+      }
+    }
+
+    let d = `M ${points[0]!.x.toFixed(2)},${points[0]!.y.toFixed(2)}`;
+    for (let i = 0; i < n - 1; i++) {
+      const p1 = points[i]!;
+      const p2 = points[i + 1]!;
+      const deltaX = dx[i]!;
+      const cp1x = p1.x + deltaX / 3;
+      const cp1y = p1.y + (m[i]! * deltaX) / 3;
+      const cp2x = p2.x - deltaX / 3;
+      const cp2y = p2.y - (m[i + 1]! * deltaX) / 3;
+
+      d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+    }
+    return d;
+  }
+
+  if (curve === "step") {
+    let d = `M ${points[0]!.x.toFixed(2)},${points[0]!.y.toFixed(2)}`;
+    for (let i = 0; i < points.length - 1; i++) {
+      const p1 = points[i]!;
+      const p2 = points[i + 1]!;
+      const midX = (p1.x + p2.x) / 2;
+      d += ` L ${midX.toFixed(2)},${p1.y.toFixed(2)} L ${midX.toFixed(2)},${p2.y.toFixed(2)} L ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+    }
+    return d;
+  }
+
+  // Linear
+  let d = `M ${points[0]!.x.toFixed(2)},${points[0]!.y.toFixed(2)}`;
+  for (let i = 1; i < points.length; i++) {
+    d += ` L ${points[i]!.x.toFixed(2)},${points[i]!.y.toFixed(2)}`;
+  }
+  return d;
+}
+
+export interface PathAreaOptions {
+  curve?: CurveType;
+}
+
+/**
+ * Generates an SVG path `d` string for a closed area polygon, anchored to a baseline Y coordinate.
+ */
+export function pathArea(
+  points: Point[],
+  baselineY: number,
+  options: PathAreaOptions = {}
+): string {
+  if (points.length === 0) return "";
+
+  const lineD = pathLine(points, options);
+  if (!lineD) return "";
+
+  const first = points[0]!;
+  const last = points[points.length - 1]!;
+
+  return `${lineD} L ${last.x.toFixed(2)},${baselineY.toFixed(2)} L ${first.x.toFixed(2)},${baselineY.toFixed(2)} Z`;
+}
+
+export interface ArcOptions {
+  cx: number;
+  cy: number;
+  innerRadius: number;
+  outerRadius: number;
+  startAngle: number; // in radians
+  endAngle: number; // in radians
+}
+
+/**
+ * Generates an SVG arc path string for a pie or donut slice.
+ */
+export function pathArc(options: ArcOptions): string {
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle } = options;
+
+  const cosStart = Math.cos(startAngle);
+  const sinStart = Math.sin(startAngle);
+  const cosEnd = Math.cos(endAngle);
+  const sinEnd = Math.sin(endAngle);
+
+  const x0 = cx + outerRadius * cosStart;
+  const y0 = cy + outerRadius * sinStart;
+  const x1 = cx + outerRadius * cosEnd;
+  const y1 = cy + outerRadius * sinEnd;
+
+  const largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1;
+
+  if (innerRadius <= 0) {
+    // Pie slice (wedge down to center)
+    return `M ${cx.toFixed(2)},${cy.toFixed(2)} L ${x0.toFixed(2)},${y0.toFixed(2)} A ${outerRadius.toFixed(2)},${outerRadius.toFixed(2)} 0 ${largeArcFlag} 1 ${x1.toFixed(2)},${y1.toFixed(2)} Z`;
+  }
+
+  // Donut slice (arc from outer down to inner arc and back)
+  const x2 = cx + innerRadius * cosEnd;
+  const y2 = cy + innerRadius * sinEnd;
+  const x3 = cx + innerRadius * cosStart;
+  const y3 = cy + innerRadius * sinStart;
+
+  return `M ${x0.toFixed(2)},${y0.toFixed(2)} A ${outerRadius.toFixed(2)},${outerRadius.toFixed(2)} 0 ${largeArcFlag} 1 ${x1.toFixed(2)},${y1.toFixed(2)} L ${x2.toFixed(2)},${y2.toFixed(2)} A ${innerRadius.toFixed(2)},${innerRadius.toFixed(2)} 0 ${largeArcFlag} 0 ${x3.toFixed(2)},${y3.toFixed(2)} Z`;
+}

package/src/charts/scale.ts

@@ -0,0 +1,133 @@
+import type { BandScale, LinearScale } from "./types";
+
+/**
+ * Calculates human-friendly rounded tick marks across a numerical interval.
+ * Uses the standard Wilkinson-style step rounding algorithm.
+ */
+export function generateNiceTicks(min: number, max: number, count = 5): number[] {
+  if (min === max) return [min];
+  if (count <= 0) return [];
+
+  const span = max - min;
+  const rawStep = span / count;
+  const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+  const err = rawStep / magnitude;
+
+  let step: number;
+  if (err >= 7.5) {
+    step = 10 * magnitude;
+  } else if (err >= 3.5) {
+    step = 5 * magnitude;
+  } else if (err >= 1.5) {
+    step = 2 * magnitude;
+  } else {
+    step = 1 * magnitude;
+  }
+
+  const start = Math.floor(min / step) * step;
+  const end = Math.ceil(max / step) * step;
+  const ticks: number[] = [];
+
+  for (let current = start; current <= end + step * 0.5; current += step) {
+    // Avoid IEEE 754 precision noise (e.g. 0.30000000000000004)
+    const rounded = Number(current.toPrecision(12));
+    ticks.push(rounded);
+  }
+
+  return ticks;
+}
+
+export interface LinearScaleOptions {
+  clamp?: boolean;
+  nice?: boolean;
+}
+
+/**
+ * Creates a continuous linear mathematical scale mapping input domain to SVG pixel range.
+ */
+export function createLinearScale(
+  domain: [number, number],
+  range: [number, number],
+  options: LinearScaleOptions = {}
+): LinearScale {
+  let [d0, d1] = domain;
+  const [r0, r1] = range;
+
+  if (options.nice && d0 !== d1) {
+    const ticks = generateNiceTicks(d0, d1, 5);
+    if (ticks.length > 0) {
+      d0 = Math.min(d0, ticks[0]!);
+      d1 = Math.max(d1, ticks[ticks.length - 1]!);
+    }
+  }
+
+  const fn = ((val: number): number => {
+    let v = val;
+    if (options.clamp) {
+      const minD = Math.min(d0, d1);
+      const maxD = Math.max(d0, d1);
+      v = Math.max(minD, Math.min(maxD, v));
+    }
+    const ratio = d1 === d0 ? 0 : (v - d0) / (d1 - d0);
+    return r0 + ratio * (r1 - r0);
+  }) as LinearScale;
+
+  fn.type = "linear";
+  fn.domain = [d0, d1];
+  fn.range = [r0, r1];
+
+  fn.invert = (pixel: number): number => {
+    const ratio = r1 === r0 ? 0 : (pixel - r0) / (r1 - r0);
+    return d0 + ratio * (d1 - d0);
+  };
+
+  fn.ticks = (count = 5): number[] => {
+    return generateNiceTicks(d0, d1, count);
+  };
+
+  return fn;
+}
+
+export interface BandScaleOptions {
+  paddingInner?: number;
+  paddingOuter?: number;
+}
+
+/**
+ * Creates an ordinal band scale mapping categorical strings (e.g. months, labels)
+ * to partitioned SVG pixel bands (used by Bar and column charts).
+ */
+export function createBandScale(
+  domain: any[],
+  range: [number, number],
+  options: BandScaleOptions = {}
+): BandScale {
+  const paddingInner = options.paddingInner ?? 0.2;
+  const paddingOuter = options.paddingOuter ?? 0.1;
+
+  const n = domain.length;
+  const totalSteps = Math.max(1, n - paddingInner + 2 * paddingOuter);
+  const step = (range[1] - range[0]) / totalSteps;
+  const bandwidth = step * (1 - paddingInner);
+
+  const fn = ((val: any): number => {
+    let idx = -1;
+    if (typeof val === "number" && Number.isInteger(val) && val >= 0 && val < domain.length) {
+      idx = val;
+    } else {
+      idx = domain.indexOf(val);
+    }
+    if (idx === -1) return range[0];
+    return range[0] + (idx + paddingOuter) * step;
+  }) as BandScale;
+
+  fn.type = "band";
+  fn.domain = [...domain];
+  fn.range = [range[0], range[1]];
+
+  fn.bandwidth = () => bandwidth;
+  fn.step = () => step;
+  fn.ticks = () => [...domain];
+
+  return fn;
+}

package/src/charts/types.ts

@@ -0,0 +1,50 @@
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export type CurveType = "linear" | "smooth" | "step";
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface LinearScale {
+  type: "linear";
+  (val: number): number;
+  domain: [number, number];
+  range: [number, number];
+  invert: (pixel: number) => number;
+  ticks: (count?: number) => number[];
+}
+
+export interface BandScale {
+  type: "band";
+  (val: any): number;
+  domain: any[];
+  range: [number, number];
+  bandwidth: () => number;
+  step: () => number;
+  ticks: () => any[];
+}
+
+export type AnyScale = LinearScale | BandScale;
+
+export interface HoverState {
+  active: boolean;
+  x: number;
+  y: number;
+  index: number;
+  datum?: any;
+}
+
+export interface SeriesMeta {
+  id: string;
+  dataKey: string;
+  type: "line" | "area" | "bar";
+  color?: string;
+  name?: string;
+}