Просмотр исходного кода

dashboard: taller frequency charts, time range selectors for entities/keywords

- Bumped chart-wrap-tall height from 400px to 480px for better readability
- Added time range selector (6h/24h/3d/1w/2w) above the 3-column grid
  in both Entities and Keywords views, matching the clusters pattern
- loadEntities/loadKeywords and detail fetchers now use the selected
  hours value instead of hardcoded 144
Lukas Goldschmidt 1 неделя назад
Родитель
Сommit
a60e33e0df
3 измененных файлов с 37 добавлено и 7 удалено
  1. 8 4
      dashboard/dashboard.js
  2. 28 2
      dashboard/index.html
  3. 1 1
      dashboard/style.css

+ 8 - 4
dashboard/dashboard.js

@@ -328,8 +328,9 @@ function renderSentimentStats(series) {
 
 // ── Entities ─────────────────────────────────────────────
 async function loadEntities() {
+  var hours = ($('entity-hours') || {}).value || 24;
   try {
-    var res = await fetch(API + '/entities?hours=144&limit=30');
+    var res = await fetch(API + '/entities?hours=' + hours + '&limit=30');
     var d = await res.json();
     _entitiesData = d.entities || [];
     renderEntityList();
@@ -367,8 +368,9 @@ async function showEntityDetail(label) {
   if (!label) return;
   var el = $('entity-detail'); if (!el) return;
   el.innerHTML = '<div class="loading">Fetching clusters mentioning ' + esc(label) + '...</div>';
+  var hours = ($('entity-hours') || {}).value || 24;
   try {
-    var res = await fetch(API + '/clusters?topic=all&hours=144&limit=100');
+    var res = await fetch(API + '/clusters?topic=all&hours=' + hours + '&limit=100');
     var d = await res.json();
     var matched = (d.clusters || []).filter(function(c) {
       return (c.entities||[]).some(function(e) { return (e||'').toLowerCase() === label.toLowerCase(); });
@@ -397,8 +399,9 @@ async function showEntityDetail(label) {
 var _keywordsData = [];
 
 async function loadKeywords() {
+  var hours = ($('keyword-hours') || {}).value || 24;
   try {
-    var res = await fetch(API + '/keywords?hours=144&limit=30');
+    var res = await fetch(API + '/keywords?hours=' + hours + '&limit=30');
     var d = await res.json();
     _keywordsData = d.keywords || [];
     renderKeywordList();
@@ -436,8 +439,9 @@ async function showKeywordDetail(label) {
   if (!label) return;
   var el = $('keyword-detail'); if (!el) return;
   el.innerHTML = '<div class="loading">Fetching clusters with keyword ' + esc(label) + '…</div>';
+  var hours = ($('keyword-hours') || {}).value || 24;
   try {
-    var res = await fetch(API + '/clusters?topic=all&hours=144&limit=200');
+    var res = await fetch(API + '/clusters?topic=all&hours=' + hours + '&limit=200');
     var d = await res.json();
     var matched = (d.clusters || []).filter(function(c) {
       return (c.keywords||[]).some(function(k) { return (k||'').toLowerCase() === label.toLowerCase(); });

+ 28 - 2
dashboard/index.html

@@ -123,9 +123,22 @@
 
 <!-- ENTITIES VIEW -->
 <div id="view-entities" class="view">
+  <div class="card" style="margin-bottom:1rem">
+    <div class="toolbar">
+      <div class="filters">
+        <select id="entity-hours" onchange="loadEntities()">
+          <option value="6">Last 6h</option>
+          <option value="24" selected>Last 24h</option>
+          <option value="72">Last 3 days</option>
+          <option value="168">Last week</option>
+          <option value="336">Last 2 weeks</option>
+        </select>
+      </div>
+    </div>
+  </div>
   <div class="grid grid-3">
     <div class="card">
-      <h3>🔗 Top Entities <small class="muted">(24h mentions)</small></h3>
+      <h3>🔗 Top Entities</h3>
       <div id="entity-list"><div class="loading">Loading…</div></div>
     </div>
     <div class="card">
@@ -141,9 +154,22 @@
 
 <!-- KEYWORDS VIEW -->
 <div id="view-keywords" class="view">
+  <div class="card" style="margin-bottom:1rem">
+    <div class="toolbar">
+      <div class="filters">
+        <select id="keyword-hours" onchange="loadKeywords()">
+          <option value="6">Last 6h</option>
+          <option value="24" selected>Last 24h</option>
+          <option value="72">Last 3 days</option>
+          <option value="168">Last week</option>
+          <option value="336">Last 2 weeks</option>
+        </select>
+      </div>
+    </div>
+  </div>
   <div class="grid grid-3">
     <div class="card">
-      <h3>🏷️ Top Keywords <small class="muted">(24h occurrences, excluding entities)</small></h3>
+      <h3>🏷️ Top Keywords</h3>
       <div id="keyword-list"><div class="loading">Loading…</div></div>
     </div>
     <div class="card">

+ 1 - 1
dashboard/style.css

@@ -191,7 +191,7 @@ tr:hover td { background: rgba(91,138,245,.05); }
 
 /* ── Chart containers ─────────────────────────────── */
 .chart-wrap { position: relative; height: 280px; }
-.chart-wrap-tall { position: relative; height: 400px; }
+.chart-wrap-tall { position: relative; height: 480px; }
 
 /* ── Feed status ──────────────────────────────────── */
 .feed-item { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; font-size: .82rem; border-bottom: 1px solid rgba(42,46,58,.4); }