@forwardimpact/pathway 0.25.15 → 0.25.20

package/src/lib/comparison-radar-chart.js

@@ -0,0 +1,256 @@
+/**
+ * Comparison Radar Chart - displays two overlaid radar charts
+ */
+
+import {
+  escapeHtml,
+  wrapLabel,
+  getTextAnchor,
+  createRadarSvg,
+  drawLevelRings,
+  drawAxisLines,
+  createRadarTooltip,
+} from "./radar-utils.js";
+
+export class ComparisonRadarChart {
+  /**
+   * @param {Object} config
+   * @param {HTMLElement} config.container
+   * @param {import('./radar.js').RadarDataPoint[]} config.currentData
+   * @param {import('./radar.js').RadarDataPoint[]} config.targetData
+   * @param {Object} [config.options]
+   */
+  constructor({ container, currentData, targetData, options = {} }) {
+    this.container = container;
+    this.currentData = currentData;
+    this.targetData = targetData;
+    this.options = {
+      levels: options.levels || 5,
+      currentColor: options.currentColor || "#3b82f6",
+      targetColor: options.targetColor || "#10b981",
+      showLabels: options.showLabels !== false,
+      showTooltips: options.showTooltips !== false,
+      size: options.size || 400,
+      labelOffset: options.labelOffset || 50,
+    };
+
+    this.center = this.options.size / 2;
+    this.radius = this.options.size / 2 - this.options.labelOffset - 20;
+    this.angleSlice = (Math.PI * 2) / this.currentData.length;
+
+    this.svg = null;
+    this.tooltip = null;
+  }
+
+  render() {
+    this.container.innerHTML = "";
+
+    this.svg = createRadarSvg(this.options.size, ["comparison-radar-chart"]);
+
+    const sharedParams = {
+      radius: this.radius,
+      center: this.center,
+      angleSlice: this.angleSlice,
+      dataLength: this.currentData.length,
+    };
+
+    drawLevelRings(this.svg, { ...sharedParams, levels: this.options.levels });
+    drawAxisLines(this.svg, sharedParams);
+
+    this.drawDataPolygon(this.targetData, this.options.targetColor, 0.2);
+    this.drawDataPolygon(this.currentData, this.options.currentColor, 0.3);
+    this.drawDataPoints(this.targetData, this.options.targetColor, "target");
+    this.drawDataPoints(this.currentData, this.options.currentColor, "current");
+
+    if (this.options.showLabels) this.drawLabels();
+    if (this.options.showTooltips) {
+      this.tooltip = createRadarTooltip(this.container, 250);
+    }
+
+    this.container.appendChild(this.svg);
+  }
+
+  drawDataPolygon(data, color, opacity) {
+    const points = data.map((d, i) => {
+      const angle = this.angleSlice * i - Math.PI / 2;
+      const value = d.value / d.maxValue;
+      const r = this.radius * value;
+      return {
+        x: this.center + r * Math.cos(angle),
+        y: this.center + r * Math.sin(angle),
+      };
+    });
+
+    const polygon = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "polygon",
+    );
+    polygon.setAttribute(
+      "points",
+      points.map((p) => `${p.x},${p.y}`).join(" "),
+    );
+    polygon.classList.add("radar-data");
+    polygon.style.fill = color;
+    polygon.style.fillOpacity = String(opacity);
+    polygon.style.stroke = color;
+    polygon.style.strokeWidth = "2";
+
+    this.svg.appendChild(polygon);
+  }
+
+  drawDataPoints(data, color, type) {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.classList.add("radar-points", `radar-points-${type}`);
+
+    data.forEach((d, i) => {
+      const angle = this.angleSlice * i - Math.PI / 2;
+      const value = d.value / d.maxValue;
+      const r = this.radius * value;
+      const x = this.center + r * Math.cos(angle);
+      const y = this.center + r * Math.sin(angle);
+
+      const circle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "circle",
+      );
+      circle.setAttribute("cx", x);
+      circle.setAttribute("cy", y);
+      circle.setAttribute("r", 4);
+      circle.classList.add("radar-point");
+      circle.style.fill = color;
+      circle.style.stroke = "#fff";
+      circle.style.strokeWidth = "2";
+      circle.style.cursor = "pointer";
+
+      if (this.options.showTooltips) {
+        circle.addEventListener("mouseenter", (e) =>
+          this.showTooltip(e, d, type),
+        );
+        circle.addEventListener("mouseleave", () => this.hideTooltip());
+      }
+
+      group.appendChild(circle);
+    });
+
+    this.svg.appendChild(group);
+  }
+
+  drawLabels() {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.classList.add("radar-labels");
+
+    this.currentData.forEach((d, i) => {
+      const targetD = this.targetData[i];
+      const angle = this.angleSlice * i - Math.PI / 2;
+      const labelRadius = this.radius + this.options.labelOffset;
+      const x = this.center + labelRadius * Math.cos(angle);
+      const y = this.center + labelRadius * Math.sin(angle);
+
+      const diff = targetD.value - d.value;
+      const hasDiff = diff !== 0;
+
+      const text = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "text",
+      );
+      text.setAttribute("x", x);
+      text.setAttribute("y", y);
+      text.classList.add("radar-label");
+      if (hasDiff) text.classList.add("has-change");
+      text.style.fontSize = "11px";
+      text.style.fill = hasDiff
+        ? diff > 0
+          ? "#059669"
+          : "#dc2626"
+        : "#475569";
+      text.style.fontWeight = hasDiff ? "600" : "400";
+      text.style.textAnchor = getTextAnchor(angle);
+      text.style.dominantBaseline = "middle";
+
+      let labelText = d.label;
+      if (hasDiff) {
+        labelText += ` (${diff > 0 ? "+" : ""}${diff})`;
+      }
+
+      const lines = wrapLabel(labelText, 15);
+      const lineHeight = 13;
+      const offsetY = -((lines.length - 1) * lineHeight) / 2;
+
+      lines.forEach((line, lineIndex) => {
+        const tspan = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "tspan",
+        );
+        tspan.setAttribute("x", x);
+        tspan.setAttribute("dy", lineIndex === 0 ? offsetY : lineHeight);
+        tspan.textContent = line;
+        text.appendChild(tspan);
+      });
+
+      if (this.options.showTooltips) {
+        text.style.cursor = "pointer";
+        text.addEventListener("mouseenter", (e) =>
+          this.showComparisonTooltip(e, d, targetD),
+        );
+        text.addEventListener("mouseleave", () => this.hideTooltip());
+      }
+
+      group.appendChild(text);
+    });
+
+    this.svg.appendChild(group);
+  }
+
+  showTooltip(event, data, type) {
+    if (!this.tooltip) return;
+
+    const rect = this.container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const typeLabel = type === "current" ? "Current" : "Target";
+
+    this.tooltip.innerHTML = `
+      <strong>${escapeHtml(data.label)}</strong><br>
+      ${typeLabel}: ${data.value}/${data.maxValue}
+      ${data.description ? `<br><small>${escapeHtml(data.description)}</small>` : ""}
+    `;
+
+    this.tooltip.style.left = `${x + 10}px`;
+    this.tooltip.style.top = `${y - 10}px`;
+    this.tooltip.style.opacity = "1";
+  }
+
+  showComparisonTooltip(event, currentData, targetData) {
+    if (!this.tooltip) return;
+
+    const rect = this.container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const diff = targetData.value - currentData.value;
+    const diffText =
+      diff > 0
+        ? `<span style="color: #10b981">↑ ${diff} level${diff > 1 ? "s" : ""}</span>`
+        : diff < 0
+          ? `<span style="color: #ef4444">↓ ${Math.abs(diff)} level${Math.abs(diff) > 1 ? "s" : ""}</span>`
+          : "<span style='color: #94a3b8'>No change</span>";
+
+    this.tooltip.innerHTML = `
+      <strong>${escapeHtml(currentData.label)}</strong><br>
+      Current: ${currentData.value}/${currentData.maxValue}<br>
+      Target: ${targetData.value}/${targetData.maxValue}<br>
+      ${diffText}
+    `;
+
+    this.tooltip.style.left = `${x + 10}px`;
+    this.tooltip.style.top = `${y - 10}px`;
+    this.tooltip.style.opacity = "1";
+  }
+
+  hideTooltip() {
+    if (this.tooltip) {
+      this.tooltip.style.opacity = "0";
+    }
+  }
+}

package/src/lib/radar-utils.js

@@ -0,0 +1,199 @@
+/**
+ * Shared utilities for radar chart visualizations
+ */
+
+/**
+ * Escape HTML special characters to prevent XSS
+ * @param {string} text
+ * @returns {string}
+ */
+export function escapeHtml(text) {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+/**
+ * Wrap label text into multiple lines
+ * @param {string} text
+ * @param {number} maxCharsPerLine
+ * @returns {string[]}
+ */
+export function wrapLabel(text, maxCharsPerLine) {
+  if (text.length <= maxCharsPerLine) return [text];
+
+  const words = text.split(/\s+/);
+  const lines = [];
+  let currentLine = "";
+
+  for (const word of words) {
+    if (currentLine.length === 0) {
+      currentLine = word;
+    } else if (currentLine.length + 1 + word.length <= maxCharsPerLine) {
+      currentLine += " " + word;
+    } else {
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  }
+
+  if (currentLine.length > 0) {
+    lines.push(currentLine);
+  }
+
+  return lines.length > 0 ? lines : [text];
+}
+
+/**
+ * Get text anchor based on angle
+ * @param {number} angle
+ * @returns {string}
+ */
+export function getTextAnchor(angle) {
+  const degrees = (angle * 180) / Math.PI + 90;
+  if (degrees > 45 && degrees < 135) return "start";
+  if (degrees > 225 && degrees < 315) return "end";
+  return "middle";
+}
+
+/**
+ * Create an SVG element with standard radar chart dimensions
+ * @param {number} size
+ * @param {string[]} [extraClasses]
+ * @returns {SVGElement}
+ */
+export function createRadarSvg(size, extraClasses = []) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const padding = 40;
+  const totalSize = size + padding * 2;
+  svg.setAttribute("width", totalSize);
+  svg.setAttribute("height", totalSize);
+  svg.setAttribute(
+    "viewBox",
+    `${-padding} ${-padding} ${totalSize} ${totalSize}`,
+  );
+  svg.classList.add("radar-chart", ...extraClasses);
+  return svg;
+}
+
+/**
+ * Draw concentric level rings on a radar chart
+ * @param {SVGElement} svg
+ * @param {Object} params
+ * @param {number} params.levels
+ * @param {number} params.radius
+ * @param {number} params.center
+ * @param {number} params.angleSlice
+ * @param {number} params.dataLength
+ */
+export function drawLevelRings(
+  svg,
+  { levels, radius, center, angleSlice, dataLength },
+) {
+  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  group.classList.add("radar-levels");
+
+  for (let level = 1; level <= levels; level++) {
+    const levelRadius = (radius * level) / levels;
+    const points = [];
+    for (let i = 0; i < dataLength; i++) {
+      const angle = angleSlice * i - Math.PI / 2;
+      points.push({
+        x: center + levelRadius * Math.cos(angle),
+        y: center + levelRadius * Math.sin(angle),
+      });
+    }
+
+    const polygon = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "polygon",
+    );
+    polygon.setAttribute(
+      "points",
+      points.map((p) => `${p.x},${p.y}`).join(" "),
+    );
+    polygon.classList.add("radar-level");
+    polygon.style.fill = "none";
+    polygon.style.stroke = "#e2e8f0";
+    polygon.style.strokeWidth = "1";
+    group.appendChild(polygon);
+
+    const labelX = center + 5;
+    const labelY = center - levelRadius + 4;
+    const label = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "text",
+    );
+    label.setAttribute("x", labelX);
+    label.setAttribute("y", labelY);
+    label.textContent = level;
+    label.classList.add("radar-level-label");
+    label.style.fontSize = "10px";
+    label.style.fill = "#94a3b8";
+    group.appendChild(label);
+  }
+
+  svg.appendChild(group);
+}
+
+/**
+ * Draw axis lines on a radar chart
+ * @param {SVGElement} svg
+ * @param {Object} params
+ * @param {number} params.radius
+ * @param {number} params.center
+ * @param {number} params.angleSlice
+ * @param {number} params.dataLength
+ */
+export function drawAxisLines(svg, { radius, center, angleSlice, dataLength }) {
+  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  group.classList.add("radar-axes");
+
+  for (let i = 0; i < dataLength; i++) {
+    const angle = angleSlice * i - Math.PI / 2;
+    const x = center + radius * Math.cos(angle);
+    const y = center + radius * Math.sin(angle);
+
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    line.setAttribute("x1", center);
+    line.setAttribute("y1", center);
+    line.setAttribute("x2", x);
+    line.setAttribute("y2", y);
+    line.classList.add("radar-axis");
+    line.style.stroke = "#cbd5e1";
+    line.style.strokeWidth = "1";
+    group.appendChild(line);
+  }
+
+  svg.appendChild(group);
+}
+
+/**
+ * Create a tooltip element for radar charts
+ * @param {HTMLElement} container
+ * @param {number} [maxWidth=200]
+ * @returns {HTMLDivElement}
+ */
+export function createRadarTooltip(container, maxWidth = 200) {
+  const tooltip = document.createElement("div");
+  tooltip.className = "radar-tooltip";
+  tooltip.style.cssText = `
+    position: absolute;
+    background: #1e293b;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 100;
+    max-width: ${maxWidth}px;
+  `;
+  container.style.position = "relative";
+  container.appendChild(tooltip);
+  return tooltip;
+}