@bicharts/chart-host 0.6.75 → 0.6.77

package/dist/card.mjs

@@ -0,0 +1,234 @@
+/*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
+import {
+  computeSelectionCard
+} from "./chunk-QOKQUXVV.mjs";
+import "./chunk-H2P63UMG.mjs";
+import "./chunk-GHODWOAL.mjs";
+
+// src/selectionCardChrome.ts
+var CARD_CLASS = "lch-selcard";
+var MAX_TILE_FRACTION = 0.3;
+function createSelectionCards(deps) {
+  const { container } = deps;
+  const log = deps.log ?? (() => {
+  });
+  let transient = null;
+  const pinned = [];
+  let anchor = { x: 0, y: 0 };
+  let disposed = false;
+  const onPointer = (ev) => {
+    try {
+      const r = container.getBoundingClientRect();
+      anchor = { x: ev.clientX - r.left, y: ev.clientY - r.top };
+    } catch {
+    }
+  };
+  container.addEventListener("click", onPointer, true);
+  const onKey = (ev) => {
+    if (ev.key !== "Escape") return;
+    clearAll();
+  };
+  document.addEventListener("keydown", onKey);
+  function removeCard(c) {
+    if (!c) return;
+    try {
+      c.el.remove();
+    } catch {
+    }
+  }
+  function clearTransient() {
+    removeCard(transient);
+    transient = null;
+  }
+  function clearAll() {
+    clearTransient();
+    while (pinned.length) removeCard(pinned.pop());
+  }
+  function place(el, at) {
+    const cw = container.clientWidth || 0;
+    const ch = container.clientHeight || 0;
+    if (!cw || !ch) return;
+    const w = el.offsetWidth || 0;
+    const h = el.offsetHeight || 0;
+    const gap = 12, edge = 6;
+    let left = at.x + gap;
+    if (left + w > cw - edge) left = at.x - gap - w;
+    if (left < edge) left = edge;
+    if (left + w > cw - edge) left = Math.max(edge, cw - w - edge);
+    let top = at.y + gap;
+    if (top + h > ch - edge) top = at.y - gap - h;
+    if (top < edge) top = edge;
+    if (top + h > ch - edge) top = Math.max(edge, ch - h - edge);
+    el.style.left = `${Math.round(left)}px`;
+    el.style.top = `${Math.round(top)}px`;
+  }
+  function makeDraggable(el, grip) {
+    let startX = 0, startY = 0, baseX = 0, baseY = 0, dragging = false;
+    const down = (ev) => {
+      dragging = true;
+      startX = ev.clientX;
+      startY = ev.clientY;
+      baseX = parseFloat(el.style.left || "0");
+      baseY = parseFloat(el.style.top || "0");
+      ev.preventDefault();
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    };
+    const move = (ev) => {
+      if (!dragging) return;
+      const cw = container.clientWidth || 0, ch = container.clientHeight || 0;
+      const w = el.offsetWidth || 0, h = el.offsetHeight || 0;
+      const nx = Math.min(Math.max(4, baseX + (ev.clientX - startX)), Math.max(4, cw - w - 4));
+      const ny = Math.min(Math.max(4, baseY + (ev.clientY - startY)), Math.max(4, ch - h - 4));
+      el.style.left = `${Math.round(nx)}px`;
+      el.style.top = `${Math.round(ny)}px`;
+    };
+    const up = () => {
+      dragging = false;
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+    grip.addEventListener("mousedown", down);
+  }
+  function build(model, compact) {
+    const el = document.createElement("div");
+    el.className = CARD_CLASS;
+    const head = document.createElement("div");
+    head.className = `${CARD_CLASS}-head`;
+    const title = document.createElement("span");
+    title.className = `${CARD_CLASS}-title`;
+    title.textContent = model.header;
+    head.append(title);
+    const pin = document.createElement("button");
+    pin.type = "button";
+    pin.className = `${CARD_CLASS}-btn`;
+    pin.title = "Keep this card while you click other marks";
+    pin.setAttribute("aria-label", "Pin this card");
+    pin.textContent = "Pin";
+    head.append(pin);
+    const close = document.createElement("button");
+    close.type = "button";
+    close.className = `${CARD_CLASS}-btn`;
+    close.title = "Dismiss";
+    close.setAttribute("aria-label", "Dismiss this card");
+    close.textContent = "\xD7";
+    head.append(close);
+    el.append(head);
+    const appendLine = (line, cls) => {
+      const row = document.createElement("div");
+      row.className = cls;
+      const lbl = document.createElement("span");
+      lbl.className = `${CARD_CLASS}-label`;
+      lbl.textContent = `${line.label}:`;
+      const val = document.createElement("span");
+      val.className = `${CARD_CLASS}-value`;
+      val.textContent = line.shareText ? `${line.valueText} (${line.shareText})` : line.valueText;
+      row.append(lbl, val);
+      el.append(row);
+    };
+    if (!compact) {
+      for (const line of model.lines) appendLine(line, `${CARD_CLASS}-line`);
+      if (model.hiddenMeasures > 0) {
+        const more = document.createElement("div");
+        more.className = `${CARD_CLASS}-more`;
+        more.textContent = `+${model.hiddenMeasures} more measure${model.hiddenMeasures === 1 ? "" : "s"}`;
+        el.append(more);
+      }
+      for (const line of model.dimensionLines) appendLine(line, `${CARD_CLASS}-line ${CARD_CLASS}-dim`);
+    }
+    const rows = document.createElement("div");
+    rows.className = `${CARD_CLASS}-rows`;
+    rows.textContent = model.rowsText;
+    el.append(rows);
+    makeDraggable(el, head);
+    return { el, pin, close };
+  }
+  function show(model) {
+    clearTransient();
+    let built = build(model, false);
+    let el = built.el;
+    el.style.visibility = "hidden";
+    container.append(el);
+    const cw = container.clientWidth || 0, ch = container.clientHeight || 0;
+    const area = (el.offsetWidth || 0) * (el.offsetHeight || 0);
+    const tile = cw * ch;
+    if (tile > 0 && area > tile * MAX_TILE_FRACTION) {
+      el.remove();
+      built = build(model, true);
+      el = built.el;
+      el.style.visibility = "hidden";
+      container.append(el);
+      log("selcard-compact", { area, tile });
+    }
+    place(el, anchor);
+    el.style.visibility = "visible";
+    const handle = { el, pinned: false };
+    transient = handle;
+    built.close.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      if (handle.pinned) {
+        const i = pinned.indexOf(handle);
+        if (i >= 0) pinned.splice(i, 1);
+        removeCard(handle);
+      } else {
+        clearTransient();
+      }
+    });
+    built.pin.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      if (handle.pinned) return;
+      handle.pinned = true;
+      transient = null;
+      built.pin.textContent = "Pinned";
+      built.pin.disabled = true;
+      el.classList.add(`${CARD_CLASS}--pinned`);
+      pinned.push(handle);
+      const limit = Math.max(1, deps.getPinLimit() || 3);
+      while (pinned.length > limit) removeCard(pinned.shift());
+      log("selcard-pinned", { pins: pinned.length, limit });
+    });
+  }
+  return {
+    onSelect(rowIdxs) {
+      if (disposed) return;
+      if (!deps.getEnabled()) {
+        clearTransient();
+        return;
+      }
+      if (!rowIdxs || !rowIdxs.length) {
+        clearTransient();
+        return;
+      }
+      let model = null;
+      try {
+        model = computeSelectionCard(deps.getPayload(), rowIdxs, {
+          aggregation: deps.getAggregation(),
+          cultureCode: deps.cultureCode,
+          sourceFormats: deps.getSourceFormats?.() ?? null
+        });
+      } catch (e) {
+        log("selcard-failed", { error: e?.message ?? String(e) });
+        clearTransient();
+        return;
+      }
+      if (!model) {
+        clearTransient();
+        return;
+      }
+      if (model.suppressedColumns.length) {
+        log("selcard-not-aggregatable", { columns: model.suppressedColumns.join(", ") });
+      }
+      show(model);
+    },
+    clear: clearAll,
+    destroy() {
+      disposed = true;
+      clearAll();
+      container.removeEventListener("click", onPointer, true);
+      document.removeEventListener("keydown", onKey);
+    }
+  };
+}
+export {
+  createSelectionCards
+};