filipriec/komp_ac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

htmx datafusion graphs via echarts3 - no custom scripts, only alpinejs

Browse Source
This commit is contained in:
Priec
2026-07-16 00:51:13 +02:00
parent f2e8db471c
commit 52d1064071
3 changed files with 20 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
graphs/static/index.html
View File

@@ -6,8 +6,10 @@
<title>Analytics graphs</title>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.min.js"></script>
<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>
<style>
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
body { margin: 0; font: 14px system-ui, sans-serif; color: #17202a; background: #f4f6f8; }
main { width: min(1500px, calc(100% - 32px)); margin: 24px auto; }
h1 { margin: 0 0 18px; font-size: 24px; }
@@ -61,7 +63,7 @@
</style>
</head>
<body>
<main>
<main x-data="{ sql: '', copied: false }">
<div class="top"><h1>Analytics graphs</h1><a href="/login">Login</a></div>
<div class="workspace">
@@ -95,7 +97,7 @@
</label>
<label>Max rows<input name="max_rows" type="number" min="1" value="1000"></label>
</div>
<label>SQL<textarea id="sql" name="sql" required spellcheck="false" placeholder="Load the schema, then choose a starter query or write a SELECT query"></textarea></label>
<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>
@@ -106,32 +108,5 @@
</section>
</div>
</main>
<script>
document.addEventListener('click', async (event) => {
const queryButton = event.target.closest('[data-sql]');
if (queryButton) {
const editor = document.getElementById('sql');
editor.value = queryButton.dataset.sql;
editor.focus();
return;
}
const columnButton = event.target.closest('[data-insert]');
if (columnButton) {
const editor = document.getElementById('sql');
const start = editor.selectionStart;
editor.setRangeText(columnButton.dataset.insert, start, editor.selectionEnd, 'end');
editor.focus();
return;
}
const copyButton = event.target.closest('[data-copy]');
if (copyButton) {
const text = document.getElementById(copyButton.dataset.copy).value;
await navigator.clipboard.writeText(text);
document.getElementById('copy-status').textContent = 'Copied';
}
});
</script>
</body>
</html>