webs unified

web/templates/pages/analytics/analytics.html

@@ -0,0 +1,68 @@
+{# GET / — crate::pages::analytics::ui::AnalyticsPage #}
+{% extends "ui/base.html" %}
+
+{% block title %}Analytics{% endblock %}
+
+{% block head %}
+<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
+{% endblock %}
+
+{% block content %}
+<main x-data="{ sql: '', copied: false }">
+  <section class="heading">
+    <div>
+      <p class="eyebrow">Reporting</p>
+      <h1>Analytics</h1>
+      <p>Query the read-only analytics API and chart the result.</p>
+    </div>
+  </section>
+
+  <div class="analytics">
+    <aside class="panel sidebar">
+      <h2>Available data</h2>
+      <p class="hint">Load a profile to see the table and column aliases accepted by analytics SQL.</p>
+      <div hx-get="/api/profiles" hx-trigger="load" hx-target="#profile" hx-swap="innerHTML">
+        <form class="catalog-load" hx-post="/api/catalog" hx-target="#catalog" hx-swap="innerHTML" hx-disabled-elt="button">
+          <label>Profile
+            <select id="profile" name="profile_name" hx-post="/api/catalog" hx-trigger="change"
+                    hx-target="#catalog" hx-swap="innerHTML">
+              <option value="">Loading profiles…</option>
+            </select>
+          </label>
+          <button type="submit">Load schema</button>
+        </form>
+      </div>
+      <div id="catalog" aria-live="polite"><p class="hint">No schema loaded.</p></div>
+    </aside>
+
+    <section>
+      <form id="query-form" class="panel query-form" hx-post="/api/query" hx-include="#profile"
+            hx-target="#output" hx-swap="innerHTML" hx-disabled-elt="button">
+        <div class="query-row">
+          <label>Chart
+            <select name="chart_type">
+              <option value="bar">Bar</option>
+              <option value="line">Line</option>
+              <option value="pie">Pie</option>
+              <option value="scatter">Scatter</option>
+              <option value="table">Table</option>
+            </select>
+          </label>
+          <label>Max rows<input name="max_rows" type="number" min="1" value="1000"></label>
+        </div>
+        <label>SQL
+          <textarea id="sql" x-ref="sql" x-model="sql" name="sql" required spellcheck="false"
+                    placeholder="Load the schema, then choose a starter query or write a SELECT query"></textarea>
+        </label>
+        <div class="actions">
+          <button type="submit">Run query</button>
+          <span class="htmx-indicator hint">Running…</span>
+        </div>
+      </form>
+
+      <section id="output" aria-live="polite"></section>
+    </section>
+  </div>
+</main>
+{% endblock %}