insomni-plot 0.1.0-alpha.0

package/src/grammar/attach-presets.ts

@@ -0,0 +1,215 @@
+// ---------------------------------------------------------------------------
+// attachRangePresets — high-level helper on top of createRangePresets
+// ---------------------------------------------------------------------------
+// Wraps the headless `createRangePresets` controller with an optional DOM
+// chip strip. Lets a consumer go from "I have a MountedPlot and want 1M/3M/…
+// buttons" to a single call site, while still preserving the headless flow
+// for charts that render their own UI (Svelte/React/Solid components,
+// existing toolbars, etc.) — omit the `ui` field and you get the same
+// controller `createRangePresets` would have returned.
+
+import type { Color } from "insomni";
+import type { Theme } from "./theme.ts";
+import {
+  createRangePresets,
+  timePreset,
+  type RangePreset,
+  type RangePresetDataDomain,
+  type RangePresetsController,
+  type RangePresetsSubscriber,
+  type TimePresetKey,
+} from "../range-presets.ts";
+import type { DataViewport } from "../viewport.ts";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** Where the chip strip sits inside its mount element. */
+export type AttachRangePresetsPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
+export interface AttachRangePresetsUi {
+  /** Element to append the chip strip into (typically the chart's stage). */
+  mount: HTMLElement;
+  /** Corner placement inside `mount`. Defaults to `"top-left"`. */
+  position?: AttachRangePresetsPosition;
+  /** Inset (px) from the chosen corner. Defaults to `12`. */
+  inset?: number;
+}
+
+export interface AttachRangePresetsOptions {
+  axis: "x" | "y";
+  /**
+   * Presets to expose. A `TimePresetKey` string is expanded to `timePreset(key)`;
+   * pass a full `RangePreset` for custom presets (label override, linear/log
+   * presets, etc.).
+   */
+  presets: readonly (TimePresetKey | RangePreset)[];
+  dataDomain?: RangePresetDataDomain;
+  now?: () => number;
+  /** Omit to skip DOM construction — returns the same controller, headless. */
+  ui?: AttachRangePresetsUi;
+}
+
+export interface AttachedRangePresets {
+  setActive(key: string | null): void;
+  getActive(): string | null;
+  subscribe(fn: RangePresetsSubscriber): () => void;
+  dispose(): void;
+}
+
+// ---------------------------------------------------------------------------
+// Public entry — used by MountedPlot.attachRangePresets and exported directly
+// for tests / advanced consumers that don't go through mount.
+// ---------------------------------------------------------------------------
+
+export function attachRangePresets(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  viewport: DataViewport<any, any>,
+  theme: Theme,
+  opts: AttachRangePresetsOptions,
+): AttachedRangePresets {
+  const presets = opts.presets.map((p) => (typeof p === "string" ? timePreset(p) : p));
+  const controller: RangePresetsController = createRangePresets({
+    viewport,
+    axis: opts.axis,
+    presets,
+    dataDomain: opts.dataDomain,
+    now: opts.now,
+  });
+
+  const strip = opts.ui ? buildChipStrip(opts.ui, theme, presets, controller) : null;
+
+  return {
+    setActive(key) {
+      controller.setActive(key);
+    },
+    getActive() {
+      return controller.getActive();
+    },
+    subscribe(fn) {
+      return controller.subscribe(fn);
+    },
+    dispose() {
+      strip?.dispose();
+      controller.dispose();
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// DOM helpers — all in one place so consumers can read the styling pattern
+// when they want to roll their own UI.
+// ---------------------------------------------------------------------------
+
+interface ChipStripHandle {
+  dispose(): void;
+}
+
+const POSITION_STYLES: Record<AttachRangePresetsPosition, (inset: number) => string> = {
+  "top-left": (i) => `top:${i}px;left:${i}px`,
+  "top-right": (i) => `top:${i}px;right:${i}px`,
+  "bottom-left": (i) => `bottom:${i}px;left:${i}px`,
+  "bottom-right": (i) => `bottom:${i}px;right:${i}px`,
+};
+
+function buildChipStrip(
+  ui: AttachRangePresetsUi,
+  theme: Theme,
+  presets: readonly RangePreset[],
+  controller: RangePresetsController,
+): ChipStripHandle {
+  const doc = ui.mount.ownerDocument;
+  const inset = ui.inset ?? 12;
+  const position = ui.position ?? "top-left";
+  const tokens = chipTokens(theme);
+
+  const strip = doc.createElement("div");
+  strip.style.cssText = [
+    "position:absolute",
+    POSITION_STYLES[position](inset),
+    "display:flex",
+    "gap:4px",
+    "z-index:60",
+    "pointer-events:auto",
+  ].join(";");
+
+  const buttons = new Map<string, HTMLButtonElement>();
+  const setChipActive = (btn: HTMLButtonElement, active: boolean): void => {
+    btn.style.background = active ? tokens.activeBackground : tokens.background;
+    btn.style.color = active ? tokens.activeText : tokens.text;
+    btn.style.borderColor = active ? tokens.activeBorder : tokens.border;
+  };
+  for (const preset of presets) {
+    const btn = doc.createElement("button");
+    btn.type = "button";
+    btn.textContent = preset.label;
+    btn.dataset.key = preset.key;
+    btn.style.cssText = [
+      "padding:4px 9px",
+      "border-radius:5px",
+      "border:1px solid",
+      `font:${theme.legend.fontSize - 2}px/1.4 ${cssFontStack(theme.text.fontFamily)}`,
+      "cursor:pointer",
+    ].join(";");
+    btn.addEventListener("click", () => controller.setActive(preset.key));
+    setChipActive(btn, false);
+    strip.appendChild(btn);
+    buttons.set(preset.key, btn);
+  }
+
+  const applyActive = (key: string | null): void => {
+    for (const [k, btn] of buttons) setChipActive(btn, k === key);
+  };
+  applyActive(controller.getActive());
+  const unsub = controller.subscribe(applyActive);
+
+  ui.mount.appendChild(strip);
+  return {
+    dispose() {
+      unsub();
+      strip.remove();
+    },
+  };
+}
+
+interface ChipTokens {
+  background: string;
+  border: string;
+  text: string;
+  activeBackground: string;
+  activeBorder: string;
+  activeText: string;
+}
+
+function chipTokens(theme: Theme): ChipTokens {
+  // Derive chip colors from existing legend/background tokens so the strip
+  // tracks dark/light themes without adding a new token section. The active
+  // accent picks the first categorical palette slot — same color the legend
+  // would use for the first series, which keeps the chip strip visually
+  // anchored to the chart's color language.
+  const accent = theme.palettes.categorical(0);
+  return {
+    background: cssColor(withAlphaC(theme.background, 0.85)),
+    border: cssColor(withAlphaC(theme.legend.labelColor, 0.18)),
+    text: cssColor(withAlphaC(theme.legend.labelColor, 0.7)),
+    activeBackground: cssColor(withAlphaC(accent, 0.18)),
+    activeBorder: cssColor(withAlphaC(accent, 0.45)),
+    activeText: cssColor(theme.legend.labelColor),
+  };
+}
+
+function cssColor(c: Color): string {
+  const r = Math.round(c.r * 255);
+  const g = Math.round(c.g * 255);
+  const b = Math.round(c.b * 255);
+  return `rgba(${r},${g},${b},${c.a})`;
+}
+
+function withAlphaC(c: Color, alpha: number): Color {
+  return { r: c.r, g: c.g, b: c.b, a: c.a * alpha };
+}
+
+function cssFontStack(family: string | undefined): string {
+  return family && family.length > 0 ? family : "ui-sans-serif,system-ui,sans-serif";
+}