AkurAI-Framework / site/frontend/ai/components/display/stats_display.js

Latest change 88d669a6b3c5464f8a947a66be0437a90424470f - feat(ai): add Display components — citation, link_preview, stats_display, terminal, weather_widget by Ólafur Búi Ólafsson

/**
 * Stats Display — a stat grid from an array of { label, value, delta? }.
 * Reuses .stat / .stat-value / .stat-label from the design system.
 * Payload: { stats: Array<{ label: string, value: string|number, delta?: string }> }
 */

function el(tag, cls) {
  const node = document.createElement(tag);
  if (cls) node.className = cls;
  return node;
}

export const def = {
  name: "stats_display",
  category: "Display",
  title: "Stats Display",

  match(payload) {
    return (
      payload !== null &&
      typeof payload === "object" &&
      Array.isArray(payload.stats) &&
      payload.stats.length > 0 &&
      typeof payload.stats[0].label === "string"
    );
  },

  render(payload) {
    const { stats } = payload;

    const grid = el("div", "tc-display-stats");

    for (const item of stats) {
      const cell = el("div", "stat tc-display-stats__cell");

      const valueEl = el("div", "stat-value");
      valueEl.textContent = String(item.value ?? "");
      cell.appendChild(valueEl);

      if (item.delta !== undefined && item.delta !== null) {
        const deltaEl = el("span", "tc-display-stats__delta");
        const raw = String(item.delta);
        // Colour by sign: starts with "-" → danger, else ok
        const isNeg = raw.trim().startsWith("-");
        deltaEl.className += isNeg
          ? " tc-display-stats__delta--down"
          : " tc-display-stats__delta--up";
        deltaEl.textContent = raw;
        cell.appendChild(deltaEl);
      }

      const labelEl = el("div", "stat-label");
      labelEl.textContent = String(item.label ?? "");
      cell.appendChild(labelEl);

      grid.appendChild(cell);
    }

    return grid;
  },

  example: {
    stats: [
      { label: "Monthly revenue", value: "ISK 1.2M", delta: "+18%" },
      { label: "Active customers", value: 34, delta: "+3" },
      { label: "Avg response time", value: "1.4 s", delta: "-0.3 s" },
      { label: "Uptime", value: "99.97%", delta: null },
    ],
  },
};