insomni-plot 0.1.0-alpha.0

package/src/grammar/geoms/area.d.ts

@@ -0,0 +1,32 @@
+import { type Color } from "insomni";
+import { type StackOrder } from "../../marks.ts";
+import type { Aes } from "../aes.ts";
+import type { Geom } from "./types.ts";
+export type AreaPosition = "identity" | "stack" | "fill";
+export interface AreaChannels<T> {
+    x: Aes<T, number | Date>;
+    /**
+     * Single column → simple area from y=0 to y. Array of column keys → stacked
+     * area, with the implicit `__series` color channel keyed by column name.
+     */
+    y: Aes<T, number | Date> | readonly (keyof T & string)[];
+    color?: Aes<T, unknown>;
+}
+export interface AreaOptions {
+    fill?: Color;
+    stroke?: Color;
+    strokeWidth?: number;
+    /** "identity" (default), "stack" (offset zero), or "fill" (offset expand). */
+    position?: AreaPosition;
+    /** Stack ordering — only meaningful with stacked positions. */
+    order?: StackOrder;
+    label?: string;
+    /**
+     * When true, hover hit-tests resolve to the nearest vertex *by x* — the
+     * cursor's vertical position doesn't influence which datum (or stacked
+     * segment) is picked, so the user can hover anywhere along the area.
+     * Default `false` (per-vertex Euclidean pick within `pickRadius`).
+     */
+    nearestX?: boolean;
+}
+export declare function area<T>(channels: AreaChannels<T>, options?: AreaOptions): Geom<T>;

package/src/grammar/geoms/area.test.ts

@@ -0,0 +1,165 @@
+import { createFrame } from "insomni";
+import { describe, expect, test } from "vite-plus/test";
+
+import { resolveAes } from "../aes.ts";
+import { buildPositionScale, type ScaleBundle } from "../scales.ts";
+import { themeDefault } from "../theme.ts";
+import { area } from "./area.ts";
+import type { CompileContext } from "./types.ts";
+
+interface Row {
+  x: number;
+  y: number;
+  a: number;
+  b: number;
+}
+
+const data: Row[] = [
+  { x: 0, y: 0, a: 1, b: 2 },
+  { x: 5, y: 10, a: 2, b: 3 },
+  { x: 10, y: 20, a: 3, b: 4 },
+];
+
+function makeCtx(rows: readonly Row[]): CompileContext<Row> {
+  const xAes = resolveAes<Row, unknown>("x");
+  const yAes = resolveAes<Row, unknown>("y");
+  const xScale = buildPositionScale(xAes, rows, [0, 100]);
+  const yScale = buildPositionScale(yAes, rows, [200, 0], { domain: [0, 20] });
+  const scales: ScaleBundle = { x: xScale, y: yScale };
+  return {
+    data: rows,
+    scales,
+    plot: createFrame({ x: 50, y: 30, width: 100, height: 200 }),
+    theme: themeDefault,
+    atlas: undefined,
+  };
+}
+
+function fakePolygonLayer(): {
+  polygons: Array<{ points: Array<{ x: number; y: number }> }>;
+  layer: { pushPolygon: (shape: { points: Array<{ x: number; y: number }> }) => void };
+} {
+  const polygons: Array<{ points: Array<{ x: number; y: number }> }> = [];
+  return {
+    polygons,
+    layer: {
+      pushPolygon(shape) {
+        polygons.push(shape);
+      },
+    },
+  };
+}
+
+describe("area geom — compileHitTest", () => {
+  test("emits one hit per vertex at top-edge (x, y1) absolute px", () => {
+    const geom = area<Row>({ x: "x", y: "y" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.geomKind).toBe("area");
+    expect(hits.dataIndex.length).toBe(3);
+    expect(hits.positions[0]).toBeCloseTo(50, 3);
+    expect(hits.positions[1]).toBeCloseTo(230, 3);
+    expect(hits.positions[5]).toBeCloseTo(30, 3);
+  });
+
+  test("filters non-finite positions", () => {
+    const dirty: Row[] = [
+      { x: 0, y: 0, a: 0, b: 0 },
+      { x: NaN, y: 5, a: 0, b: 0 },
+      { x: 10, y: 20, a: 0, b: 0 },
+    ];
+    const geom = area<Row>({ x: "x", y: "y" });
+    const hits = geom.compileHitTest!(makeCtx(dirty))!;
+    expect(Array.from(hits.dataIndex)).toEqual([0, 2]);
+  });
+
+  test("emits one hit per stacked-area segment top vertex", () => {
+    const geom = area<Row>({ x: "x", y: ["a", "b"] });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(Array.from(hits.dataIndex)).toEqual([0, 0, 1, 1, 2, 2]);
+    expect(hits.seriesKey).toEqual(["a", "b", "a", "b", "a", "b"]);
+  });
+
+  test("captures one frame entry per visible stacked-area segment", () => {
+    const geom = area<Row>({ x: "x", y: ["a", "b"] });
+    const frame = geom.captureFrame!(makeCtx(data))!;
+    expect(frame.count).toBe(6);
+    expect(frame.r).toBeDefined();
+  });
+
+  test("stacked area compile lerps polygon vertices during activeTransition", () => {
+    const fromRows: Row[] = [
+      { x: 0, y: 0, a: 2, b: 2 },
+      { x: 10, y: 0, a: 2, b: 2 },
+    ];
+    const toRows: Row[] = [
+      { x: 0, y: 0, a: 6, b: 6 },
+      { x: 10, y: 0, a: 6, b: 6 },
+    ];
+    const geom = area<Row>({ x: "x", y: ["a", "b"] });
+    const from = geom.captureFrame!(makeCtx(fromRows))!;
+    const builders = geom.compile({
+      ...makeCtx(toRows),
+      activeTransition: {
+        t: 0.5,
+        from,
+        matchIndex: (_key, fallbackIndex) => fallbackIndex,
+      },
+    });
+    const { polygons, layer } = fakePolygonLayer();
+    for (const builder of builders) builder.addTo(layer as never);
+    expect(polygons).toHaveLength(2);
+    expect(polygons[0]!.points[0]!.y).toBeCloseTo(190, 3);
+    expect(polygons[1]!.points[0]!.y).toBeCloseTo(150, 3);
+  });
+
+  test("returns null for empty data", () => {
+    const geom = area<Row>({ x: "x", y: "y" });
+    expect(geom.compileHitTest!(makeCtx([]))).toBeNull();
+  });
+});
+
+describe("area geom — stacked halos & selection rings", () => {
+  function countStrokedCircles(
+    builders: ReturnType<ReturnType<typeof area<Row>>["compile"]>,
+  ): number {
+    let stroked = 0;
+    const layer = {
+      pushPolygon() {},
+      pushCircle(shape: { stroke?: unknown }) {
+        if (shape.stroke !== undefined) stroked++;
+      },
+    };
+    for (const builder of builders) builder.addTo(layer as never);
+    return stroked;
+  }
+
+  test("hover halo on stacked area draws a stroked circle on the hovered segment top", () => {
+    const geom = area<Row>({ x: "x", y: ["a", "b"] });
+    const builders = geom.compile({
+      ...makeCtx(data),
+      hovered: { geomKind: "area", dataIndex: 1, seriesKey: "b", data, x: 0, y: 0 },
+    });
+    expect(countStrokedCircles(builders)).toBe(1);
+  });
+
+  test("selection rings on stacked area: one ring per selected segment", () => {
+    const geom = area<Row>({ x: "x", y: ["a", "b"] });
+    const builders = geom.compile({
+      ...makeCtx(data),
+      selected: [
+        { geomKind: "area", dataIndex: 0, seriesKey: "a", data, x: 0, y: 0 },
+        { geomKind: "area", dataIndex: 2, seriesKey: "b", data, x: 0, y: 0 },
+      ],
+    });
+    expect(countStrokedCircles(builders)).toBe(2);
+  });
+
+  test("stacked area halo skipped when hovered.seriesKey is missing", () => {
+    const geom = area<Row>({ x: "x", y: ["a", "b"] });
+    const builders = geom.compile({
+      ...makeCtx(data),
+      hovered: { geomKind: "area", dataIndex: 0, data, x: 0, y: 0 },
+    });
+    expect(countStrokedCircles(builders)).toBe(0);
+  });
+});