Continue AI features and improve protocol support

core/templates/pages/ai-workspace-insight-graphs.html

@@ -0,0 +1,115 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block content %}
+  <div class="columns is-multiline">
+    <div class="column is-12">
+      <nav class="breadcrumb is-small" aria-label="breadcrumbs">
+        <ul>
+          <li><a href="{{ workspace_url }}">AI Workspace</a></li>
+          <li class="is-active"><a aria-current="page">Insight Graphs</a></li>
+        </ul>
+      </nav>
+    </div>
+    <div class="column is-12">
+      <h1 class="title is-4" style="margin-bottom: 0.35rem;">Insight Graphs: {{ person.name }}</h1>
+      <p class="is-size-7 has-text-grey">
+        Historical metrics for workspace {{ workspace_conversation.id }}
+      </p>
+      <div class="buttons are-small" style="margin-top: 0.6rem;">
+        <a class="button is-light" href="{{ help_url }}">
+          <span class="icon is-small"><i class="fa-solid fa-circle-question"></i></span>
+          <span>Scoring Help</span>
+        </a>
+      </div>
+    </div>
+
+    {% for graph in graph_cards %}
+      <div class="column is-6">
+        <div class="box">
+          <div class="is-flex is-justify-content-space-between is-align-items-center" style="margin-bottom: 0.45rem;">
+            <div>
+              <p class="heading">{{ graph.group_title }}</p>
+              <p class="title is-6" style="margin-bottom: 0.2rem;">{{ graph.title }}</p>
+              <p class="is-size-7 has-text-grey">{{ graph.count }} point{{ graph.count|pluralize }}</p>
+            </div>
+            <div class="buttons are-small" style="margin: 0;">
+              <a class="button is-light" href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=graph.slug %}">
+                Detail
+              </a>
+              <a class="button is-light" href="{{ help_url }}#group-{{ graph.group }}">
+                How It Works
+              </a>
+            </div>
+          </div>
+          <div style="height: 250px;">
+            <canvas id="graph-{{ graph.slug }}"></canvas>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+
+  {{ graph_cards|json_script:"insight-graph-cards" }}
+  <script src="{% static 'js/chart.js' %}"></script>
+  <script>
+    (function() {
+      var node = document.getElementById("insight-graph-cards");
+      if (!node) {
+        return;
+      }
+      var graphs = JSON.parse(node.textContent || "[]");
+      var palette = ["#3273dc", "#23d160", "#ffdd57", "#ff3860", "#7957d5", "#00d1b2"];
+
+      graphs.forEach(function(graph, idx) {
+        var canvas = document.getElementById("graph-" + graph.slug);
+        if (!canvas) {
+          return;
+        }
+        var labels = (graph.points || []).map(function(row) {
+          return new Date(row.x).toLocaleString();
+        });
+        var values = (graph.points || []).map(function(row) {
+          return row.y;
+        });
+        var color = palette[idx % palette.length];
+        var yScale = {};
+        if (graph.y_min !== null && graph.y_min !== undefined) {
+          yScale.min = graph.y_min;
+        }
+        if (graph.y_max !== null && graph.y_max !== undefined) {
+          yScale.max = graph.y_max;
+        }
+        new Chart(canvas.getContext("2d"), {
+          type: "line",
+          data: {
+            labels: labels,
+            datasets: [
+              {
+                label: graph.title,
+                data: values,
+                borderColor: color,
+                backgroundColor: color + "33",
+                borderWidth: 2,
+                pointRadius: 2,
+                tension: 0.24,
+                spanGaps: true
+              }
+            ]
+          },
+          options: {
+            maintainAspectRatio: false,
+            scales: {
+              y: yScale
+            },
+            plugins: {
+              legend: {
+                display: false
+              }
+            }
+          }
+        });
+      });
+    })();
+  </script>
+{% endblock %}