69 lines
3.0 KiB
HTML
69 lines
3.0 KiB
HTML
{# GET / — crate::pages::analytics::ui::AnalyticsPage #}
|
|
{% extends "ui/base.html" %}
|
|
|
|
{% block title %}{{ nav.tr("analytics-title") }}{% 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">{{ nav.tr("analytics-eyebrow") }}</p>
|
|
<h1>{{ nav.tr("analytics-title") }}</h1>
|
|
<p>{{ nav.tr("analytics-description") }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="analytics">
|
|
<aside class="panel sidebar">
|
|
<h2>{{ nav.tr("analytics-available-data") }}</h2>
|
|
<p class="hint">{{ nav.tr("analytics-load-hint") }}</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>{{ nav.tr("analytics-profile") }}
|
|
<select id="profile" name="profile_name" hx-post="/api/catalog" hx-trigger="change"
|
|
hx-target="#catalog" hx-swap="innerHTML">
|
|
<option value="">{{ nav.tr("analytics-loading-profiles") }}</option>
|
|
</select>
|
|
</label>
|
|
<button type="submit">{{ nav.tr("analytics-load-schema") }}</button>
|
|
</form>
|
|
</div>
|
|
<div id="catalog" aria-live="polite"><p class="hint">{{ nav.tr("analytics-no-schema") }}</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>{{ nav.tr("analytics-chart") }}
|
|
<select name="chart_type">
|
|
<option value="bar">{{ nav.tr("analytics-chart-bar") }}</option>
|
|
<option value="line">{{ nav.tr("analytics-chart-line") }}</option>
|
|
<option value="pie">{{ nav.tr("analytics-chart-pie") }}</option>
|
|
<option value="scatter">{{ nav.tr("analytics-chart-scatter") }}</option>
|
|
<option value="table">{{ nav.tr("analytics-chart-table") }}</option>
|
|
</select>
|
|
</label>
|
|
<label>{{ nav.tr("analytics-max-rows") }}<input name="max_rows" type="number" min="1" value="1000"></label>
|
|
</div>
|
|
<label>{{ nav.tr("analytics-sql") }}
|
|
<textarea id="sql" x-ref="sql" x-model="sql" name="sql" required spellcheck="false"
|
|
placeholder="{{ nav.tr("analytics-sql-placeholder") }}"></textarea>
|
|
</label>
|
|
<div class="actions">
|
|
<button type="submit">{{ nav.tr("analytics-run-query") }}</button>
|
|
<span class="htmx-indicator hint">{{ nav.tr("analytics-running") }}</span>
|
|
</div>
|
|
</form>
|
|
|
|
<section id="output" aria-live="polite"></section>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
{% endblock %}
|