calminer/templates/reporting.html

{% extends "base.html" %} {% block title %}Reporting · CalMiner{% endblock %} {%
block content %}
<section class="panel">
  <h2>Scenario KPI Summary</h2>
  <div class="button-row">
    <button id="report-refresh" class="btn" type="button">
      Refresh Metrics
    </button>
  </div>
  <p id="report-feedback" class="feedback hidden" role="status"></p>

  <div id="reporting-empty" class="empty-state hidden">
    No reporting data available. Run a simulation to generate metrics.
  </div>

  <div id="reporting-table-wrapper" class="table-container hidden">
    <table aria-label="Scenario reporting summary">
      <thead>
        <tr>
          <th scope="col">Scenario</th>
          <th scope="col">Iterations</th>
          <th scope="col">Mean Result</th>
          <th scope="col">Variance</th>
          <th scope="col">Std. Dev</th>
          <th scope="col">Percentile 5</th>
          <th scope="col">Percentile 95</th>
          <th scope="col">Value at Risk (95%)</th>
          <th scope="col">Expected Shortfall (95%)</th>
        </tr>
      </thead>
      <tbody id="reporting-table-body"></tbody>
    </table>
  </div>
</section>

<script>
  const reportingSummaries = {{ report_summaries | tojson | safe }};
  const REPORT_FIELDS = [
    { key: "iterations", label: "Iterations", decimals: 0 },
    { key: "mean", label: "Mean Result", decimals: 2 },
    { key: "variance", label: "Variance", decimals: 2 },
    { key: "std_dev", label: "Std. Dev", decimals: 2 },
    { key: "percentile_5", label: "Percentile 5", decimals: 2 },
    { key: "percentile_95", label: "Percentile 95", decimals: 2 },
    { key: "value_at_risk_95", label: "Value at Risk (95%)", decimals: 2 },
    { key: "expected_shortfall_95", label: "Expected Shortfall (95%)", decimals: 2 },
  ];

  const tableWrapper = document.getElementById("reporting-table-wrapper");
  const tableBody = document.getElementById("reporting-table-body");
  const emptyState = document.getElementById("reporting-empty");
  const refreshButton = document.getElementById("report-refresh");
  const feedbackEl = document.getElementById("report-feedback");

  function formatNumber(value, decimals = 2) {
    if (value === null || value === undefined || Number.isNaN(Number(value))) {
      return "—";
    }
    return Number(value).toLocaleString(undefined, {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals,
    });
  }

  function showFeedback(message, type = "success") {
    if (!feedbackEl) {
      return;
    }
    feedbackEl.textContent = message;
    feedbackEl.classList.remove("hidden", "success", "error");
    feedbackEl.classList.add(type);
  }

  function hideFeedback() {
    if (!feedbackEl) {
      return;
    }
    feedbackEl.classList.add("hidden");
    feedbackEl.textContent = "";
  }

  function renderReportingTable(summaryData) {
    if (!tableBody || !tableWrapper || !emptyState) {
      return;
    }

    tableBody.innerHTML = "";

    if (!summaryData.length) {
      emptyState.classList.remove("hidden");
      tableWrapper.classList.add("hidden");
      return;
    }

    emptyState.classList.add("hidden");
    tableWrapper.classList.remove("hidden");

    summaryData.forEach((entry) => {
      const row = document.createElement("tr");
      const scenarioCell = document.createElement("td");
      scenarioCell.textContent = entry.scenario_name;
      row.appendChild(scenarioCell);

      REPORT_FIELDS.forEach((field) => {
        const cell = document.createElement("td");
        const source = field.key === "iterations" ? entry : entry.summary || {};
        cell.textContent = formatNumber(source[field.key], field.decimals);
        row.appendChild(cell);
      });

      tableBody.appendChild(row);
    });
  }

  async function refreshMetrics() {
    hideFeedback();
    showFeedback("Refreshing metrics…", "success");

    try {
      const response = await fetch("/ui/reporting", {
        method: "GET",
        headers: {
          "X-Requested-With": "XMLHttpRequest",
        },
      });

      if (!response.ok) {
        throw new Error("Unable to refresh reporting data.");
      }

      const text = await response.text();
      const parser = new DOMParser();
      const doc = parser.parseFromString(text, "text/html");
      const newTable = doc.querySelector("#reporting-table-wrapper");
      const newFeedback = doc.querySelector("#report-feedback");

      if (!newTable) {
        throw new Error("Unexpected response while refreshing.");
      }

      const newEmptyState = doc.querySelector("#reporting-empty");

      if (emptyState && newEmptyState) {
        emptyState.className = newEmptyState.className;
        emptyState.textContent = newEmptyState.textContent;
      }

      if (tableWrapper) {
        tableWrapper.className = newTable.className;
        tableWrapper.innerHTML = newTable.innerHTML;
      }

      if (newFeedback && feedbackEl) {
        feedbackEl.className = newFeedback.className;
        feedbackEl.textContent = newFeedback.textContent;
      }

      showFeedback("Metrics refreshed.", "success");
    } catch (error) {
      showFeedback(error.message || "An unexpected error occurred.", "error");
    }
  }

  renderReportingTable(reportingSummaries);

  if (refreshButton) {
    refreshButton.addEventListener("click", refreshMetrics);
  }
</script>
{% endblock %}