global: snap

website/scripts/utils/chart/capture.js

@@ -0,0 +1,119 @@
+import { ios, canShare } from "../env.js";
+import { style } from "../elements.js";
+import { colors } from "../colors.js";
+
+export const canCapture = !ios || canShare;
+
+/**
+ * @param {Object} args
+ * @param {HTMLCanvasElement} args.screenshot
+ * @param {number} args.chartWidth
+ * @param {HTMLElement} args.parent
+ * @param {{ element: HTMLElement }[]} args.legends
+ */
+export function capture({ screenshot, chartWidth, parent, legends }) {
+  const dpr = screenshot.width / chartWidth;
+  const pad = Math.round(16 * dpr);
+  const fontSize = Math.round(14 * dpr);
+  const titleFontSize = Math.round(20 * dpr);
+  const circleRadius = Math.round(5 * dpr);
+  const legendHeight = Math.round(28 * dpr);
+  const titleHeight = Math.round(36 * dpr);
+
+  const title = (parent.querySelector("h1")?.textContent ?? "").toUpperCase();
+  const hasTitle = title.length > 0;
+  const hasTopLegend = legends[0].element.children.length > 0;
+  const hasBottomLegend = legends[1].element.children.length > 0;
+  const titleOffset = hasTitle ? titleHeight : 0;
+  const topLegendOffset = hasTopLegend ? legendHeight : 0;
+  const bottomOffset = hasBottomLegend ? legendHeight : 0;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = screenshot.width + pad * 2;
+  canvas.height =
+    screenshot.height + pad * 2 + titleOffset + topLegendOffset + bottomOffset;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  // Background
+  const bodyBg = getComputedStyle(document.body).backgroundColor;
+  const htmlBg = getComputedStyle(document.documentElement).backgroundColor;
+  ctx.fillStyle = bodyBg === "rgba(0, 0, 0, 0)" ? htmlBg : bodyBg;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  /** @param {HTMLElement} legendEl @param {number} y */
+  const drawLegend = (legendEl, y) => {
+    ctx.font = `${fontSize}px ${style.fontFamily}`;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+    let x = pad;
+    for (const div of legendEl.children) {
+      const label = div.querySelector("label");
+      if (!label) continue;
+      const input = label.querySelector("input");
+      if (input && !input.checked) continue;
+      // Draw color circles
+      const colorSpans = label.querySelectorAll(".colors span");
+      for (const span of colorSpans) {
+        ctx.fillStyle = /** @type {HTMLElement} */ (span).style.backgroundColor;
+        ctx.beginPath();
+        ctx.arc(x + circleRadius, y, circleRadius, 0, Math.PI * 2);
+        ctx.fill();
+        x += circleRadius * 2 + Math.round(2 * dpr);
+      }
+      // Draw name
+      const name = label.querySelector(".name")?.textContent ?? "";
+      ctx.fillStyle = colors.default();
+      ctx.fillText(name, x + Math.round(4 * dpr), y);
+      x += ctx.measureText(name).width + Math.round(20 * dpr);
+    }
+  };
+
+  // Title
+  if (hasTitle) {
+    ctx.font = `${titleFontSize}px ${style.fontFamily}`;
+    ctx.fillStyle = colors.default();
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+    ctx.fillText(title, pad, pad + titleHeight / 2);
+  }
+
+  // Top legend
+  if (hasTopLegend) {
+    drawLegend(legends[0].element, pad + titleOffset + topLegendOffset / 2);
+  }
+
+  // Chart
+  ctx.drawImage(screenshot, pad, pad + titleOffset + topLegendOffset);
+
+  // Bottom legend
+  if (hasBottomLegend) {
+    drawLegend(
+      legends[1].element,
+      pad +
+        titleOffset +
+        topLegendOffset +
+        screenshot.height +
+        legendHeight / 2,
+    );
+  }
+
+  // Watermark
+  ctx.fillStyle = colors.gray();
+  ctx.font = `${fontSize}px ${style.fontFamily}`;
+  ctx.textAlign = "right";
+  ctx.textBaseline = "bottom";
+  ctx.fillText(
+    window.location.host,
+    canvas.width - pad,
+    canvas.height - pad / 2,
+  );
+
+  // Open in new tab
+  canvas.toBlob((blob) => {
+    if (!blob) return;
+    const url = URL.createObjectURL(blob);
+    window.open(url, "_blank");
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+  }, "image/png");
+}

website/scripts/utils/chart/legend.js

@@ -0,0 +1,155 @@
+import { createLabeledInput, createSpanName } from "../dom.js";
+import { stringToId } from "../format.js";
+
+/** @param {HTMLElement} el */
+function captureScroll(el) {
+  el.addEventListener("wheel", (e) => e.stopPropagation(), { passive: true });
+  el.addEventListener("touchstart", (e) => e.stopPropagation(), {
+    passive: true,
+  });
+  el.addEventListener("touchmove", (e) => e.stopPropagation(), {
+    passive: true,
+  });
+}
+
+/**
+ * Creates a `<legend>` with a scrollable `<div>`.
+ * Call `setPrefix(el)` to insert a prefix element followed by a `|` separator.
+ * Append further content to `scroller`.
+ */
+export function createLegend() {
+  const element = /** @type {HTMLLegendElement} */ (
+    window.document.createElement("legend")
+  );
+  const scroller = /** @type {HTMLDivElement} */ (
+    window.document.createElement("div")
+  );
+  element.append(scroller);
+  captureScroll(scroller);
+
+  const separator = window.document.createElement("span");
+  separator.textContent = "|";
+  captureScroll(separator);
+
+  return {
+    element,
+    scroller,
+    /** @param {HTMLElement} el */
+    setPrefix(el) {
+      const prev = separator.previousSibling;
+      if (prev) {
+        prev.replaceWith(el);
+      } else {
+        scroller.prepend(el, separator);
+      }
+      captureScroll(el);
+    },
+  };
+}
+
+export function createSeriesLegend() {
+  const legend = createLegend();
+  const items = window.document.createElement("div");
+  legend.scroller.append(items);
+  captureScroll(items);
+
+  /** @type {AnySeries | null} */
+  let hoveredSeries = null;
+  /** @type {Map<AnySeries, { span: HTMLSpanElement, color: Color }[]>} */
+  const seriesColorSpans = new Map();
+
+  /** @param {AnySeries | null} series */
+  function setHovered(series) {
+    if (hoveredSeries === series) return;
+    hoveredSeries = series;
+    for (const [entrySeries, colorSpans] of seriesColorSpans) {
+      const shouldHighlight = !hoveredSeries || hoveredSeries === entrySeries;
+      shouldHighlight ? entrySeries.highlight() : entrySeries.tame();
+      for (const { span, color } of colorSpans) {
+        span.style.backgroundColor = color.highlight(shouldHighlight);
+      }
+    }
+  }
+
+  /** @type {HTMLElement[]} */
+  const legends = [];
+
+  return {
+    element: legend.element,
+    setPrefix: legend.setPrefix,
+    /**
+     * @param {Object} args
+     * @param {AnySeries} args.series
+     * @param {string} args.name
+     * @param {number} args.order
+     * @param {Color[]} args.colors
+     */
+    addOrReplace({ series, name, colors, order }) {
+      const div = window.document.createElement("div");
+
+      const prev = legends[order];
+      if (prev) {
+        prev.replaceWith(div);
+      } else {
+        const elementAtOrder = Array.from(items.children).at(order);
+        if (elementAtOrder) {
+          elementAtOrder.before(div);
+        } else {
+          items.append(div);
+        }
+      }
+      legends[order] = div;
+
+      const { label } = createLabeledInput({
+        inputId: stringToId(`legend-${series.id}`),
+        inputName: stringToId(`selected-${series.id}`),
+        inputValue: "value",
+        title: "Click to toggle",
+        inputChecked: series.active.value,
+        onClick: () => {
+          series.setActive(!series.active.value);
+        },
+        type: "checkbox",
+      });
+
+      const spanMain = window.document.createElement("span");
+      spanMain.classList.add("main");
+      label.append(spanMain);
+
+      const spanName = createSpanName(name);
+      spanMain.append(spanName);
+
+      div.append(label);
+      label.addEventListener("mouseover", () => setHovered(series));
+      label.addEventListener("mouseleave", () => setHovered(null));
+
+      const spanColors = window.document.createElement("span");
+      spanColors.classList.add("colors");
+      spanMain.prepend(spanColors);
+      /** @type {{ span: HTMLSpanElement, color: Color }[]} */
+      const colorSpans = [];
+      colors.forEach((color) => {
+        const spanColor = window.document.createElement("span");
+        spanColor.style.backgroundColor = color.highlight(true);
+        spanColors.append(spanColor);
+        colorSpans.push({ span: spanColor, color });
+      });
+      seriesColorSpans.set(series, colorSpans);
+
+      if (series.url) {
+        const anchor = window.document.createElement("a");
+        anchor.href = series.url;
+        anchor.target = "_blank";
+        anchor.rel = "noopener noreferrer";
+        anchor.title = "Open the series data in a new tab";
+        div.append(anchor);
+      }
+    },
+    /**
+     * @param {number} start
+     */
+    removeFrom(start) {
+      legends.splice(start).forEach((child) => child.remove());
+    },
+  };
+}