@prismatic-io/lux 0.0.2-preview.4 → 0.0.2-preview.7

package/viewer/charts.js

@@ -0,0 +1,86 @@
+import { escapeHtml } from "./format.js";
+
+const clamp01 = (value) =>
+  typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;
+
+export const quantizedBar = (value, tone, label, threshold = null) => {
+  const filled = Math.round(clamp01(value) * 20);
+  const thresholdCell =
+    typeof threshold === "number"
+      ? Math.min(19, Math.max(0, Math.floor(clamp01(threshold) * 20)))
+      : -1;
+  return `<span class="quantized-bar" role="img" aria-label="${escapeHtml(label)}">
+    ${Array.from({ length: 20 }, (_, index) => {
+      const classes = [
+        "quantized-cell",
+        index < filled ? `is-filled ${tone}` : "",
+        index === thresholdCell ? "has-threshold" : "",
+      ]
+        .filter(Boolean)
+        .join(" ");
+      return `<i class="${classes}"></i>`;
+    }).join("")}
+  </span>`;
+};
+
+const distributionBar = (segments, label) => {
+  const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+  const cells = Array.from({ length: 20 }, (_, index) => {
+    if (total <= 0) return '<i class="quantized-cell"></i>';
+    const point = ((index + 0.5) / 20) * total;
+    let cumulative = 0;
+    const segment =
+      segments.find((entry) => {
+        cumulative += entry.value;
+        return point <= cumulative;
+      }) ?? segments.at(-1);
+    return `<i class="quantized-cell is-filled segment-${escapeHtml(segment?.key)}"></i>`;
+  }).join("");
+  const legend = segments
+    .filter((segment) => segment.value > 0)
+    .map(
+      (segment) =>
+        `<span><i class="legend-swatch segment-${escapeHtml(segment.key)}"></i>${escapeHtml(
+          segment.label,
+        )} <b>${segment.value}</b></span>`,
+    )
+    .join("");
+  return `<div class="distribution-visual">
+    <span class="quantized-bar" role="img" aria-label="${escapeHtml(label)}">${cells}</span>
+    <div class="visual-legend">${legend || "<span>No recorded values</span>"}</div>
+  </div>`;
+};
+
+export const comparisonBars = ({
+  title,
+  before,
+  after,
+  maximum,
+  beforeText,
+  afterText,
+  deltaText,
+  deltaTone,
+}) => {
+  const scale = Math.max(maximum ?? 0, before ?? 0, after ?? 0, 1);
+  return `<figure class="comparison-bars">
+    <figcaption><span>${escapeHtml(title)}</span><b class="${escapeHtml(
+      deltaTone,
+    )}">${escapeHtml(deltaText)}</b></figcaption>
+    <div class="bar-lane"><strong>A</strong>${quantizedBar(
+      (before ?? 0) / scale,
+      "tone-before",
+      `${title} baseline ${beforeText}`,
+    )}<span>${escapeHtml(beforeText)}</span></div>
+    <div class="bar-lane"><strong>B</strong>${quantizedBar(
+      (after ?? 0) / scale,
+      "tone-after",
+      `${title} candidate ${afterText}`,
+    )}<span>${escapeHtml(afterText)}</span></div>
+  </figure>`;
+};
+
+export const compositionFigure = (title, segments, label) => `
+  <figure class="composition-figure">
+    <figcaption>${escapeHtml(title)}</figcaption>
+    ${distributionBar(segments, label)}
+  </figure>`;