Rebuild workspace widgets and behavioral graph views

core/templates/partials/behavioral-graph-card.html

@@ -0,0 +1,71 @@
+<article class="card gia-behavior-graph-card">
+  <header class="card-header">
+    <div class="card-header-title is-flex is-justify-content-space-between is-align-items-flex-start">
+      <div>
+        <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">
+          {{ graph.state_label }} · {{ graph.group|upper }}
+        </p>
+        <p class="mb-0">
+          <span class="icon is-small mr-1"><i class="{{ graph.icon }}"></i></span>
+          <span>{{ graph.title }}</span>
+        </p>
+      </div>
+      <span class="tag is-light gia-badge">{{ graph.current_value_label }}</span>
+    </div>
+  </header>
+  <div class="card-content">
+    <p class="is-size-7 has-text-grey mb-2">
+      {{ graph.raw_count }} sample{{ graph.raw_count|pluralize }} in this range{% if graph.delta_label %} · {{ graph.delta_label }}{% endif %}
+    </p>
+    {% if graph.has_data %}
+      <div class="gia-behavior-chart-shell">
+        <svg
+          class="gia-behavior-chart"
+          viewBox="0 0 100 48"
+          preserveAspectRatio="none"
+          role="img"
+          aria-label="{{ graph.title }} graph">
+          {% if graph.area_path %}
+            <path class="gia-behavior-chart-area" d="{{ graph.area_path }}"></path>
+          {% endif %}
+          {% if graph.polyline %}
+            <polyline class="gia-behavior-chart-line" points="{{ graph.polyline }}"></polyline>
+          {% endif %}
+          {% for marker in graph.markers|slice:"-1:" %}
+            <circle class="gia-behavior-chart-point" cx="{{ marker.x }}" cy="{{ marker.y }}" r="1.8"></circle>
+          {% endfor %}
+        </svg>
+        <div class="is-flex is-justify-content-space-between is-size-7 has-text-grey mt-1">
+          <span>{{ graph.y_min_label }}</span>
+          <span>{{ graph.latest_bucket_label }}</span>
+          <span>{{ graph.y_max_label }}</span>
+        </div>
+      </div>
+    {% else %}
+      <article class="message is-light">
+        <div class="message-body is-size-7">
+          No samples for this metric in the selected range.
+        </div>
+      </article>
+    {% endif %}
+    <p class="is-size-7 mt-3">{{ graph.psychology }}</p>
+    <div class="buttons are-small mt-3 mb-0">
+      <a
+        class="button is-light"
+        href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=graph.slug %}?range={{ range_key }}">
+        Page
+      </a>
+      {% if behavioral_show_widget_actions %}
+        <button
+          type="button"
+          class="button is-light js-widget-spawn-trigger"
+          data-widget-url="{% url 'ai_workspace_insight_detail' type='widget' person_id=person.id metric=graph.slug %}?range={{ range_key }}"
+          hx-get="{% url 'ai_workspace_insight_detail' type='widget' person_id=person.id metric=graph.slug %}?range={{ range_key }}"
+          hx-target="#widgets-here"
+          hx-swap="beforeend">
+          Widget
+        </button>
+      {% endif %}
+    </div>
+  </div>
+</article>