Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <title>Analytics — SentiMeter</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> | |
| <script src="js/chart.js"></script> | |
| <link rel="stylesheet" href="css/style.css" /> | |
| <link rel="icon" type="image/svg+xml" href="img/logo.svg" /> | |
| </head> | |
| <body> | |
| <div class="layout"> | |
| <div id="sidebar"></div> | |
| <div class="main"> | |
| <div class="topbar"> | |
| <div class="topbar-title">Analytics Lengkap</div> | |
| <div id="topbarMeta" class="topbar-sub"></div> | |
| </div> | |
| <div class="page-body"> | |
| <div class="sec-head"> | |
| <div><div class="sec-title">Visualisasi Data</div><div class="sec-sub">15 grafik & tabel analitik komprehensif</div></div> | |
| </div> | |
| <!-- Row 1: Donut + Time trend --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">1. Distribusi Sentimen</div><span class="card-badge">Donut</span></div> | |
| <div class="chart-wrap chart-wrap-sm"><canvas id="c1"></canvas></div> | |
| <div class="legend-row" id="legend1"></div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">2. Tren Sentimen per Jam</div><span class="card-badge">Area</span></div> | |
| <div class="chart-wrap"><canvas id="c2"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- Row 2: Stacked topic + location horiz --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">3. Sentimen per Topik</div><span class="card-badge">Batang Berlapis</span></div> | |
| <div class="chart-wrap"><canvas id="c3"></canvas></div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">4. Distribusi Lokasi</div><span class="card-badge">Batang Horiz.</span></div> | |
| <div class="chart-wrap"><canvas id="c4"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- Row 3: User activity + Grouped topic score --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">5. Pengguna Paling Aktif</div><span class="card-badge">Batang Horiz.</span></div> | |
| <div class="chart-wrap"><canvas id="c5"></canvas></div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">6. Avg Confidence per Topik</div><span class="card-badge">Batang Berkelompok</span></div> | |
| <div class="chart-wrap"><canvas id="c8"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- Row 4: Hourly heatmap-bar (full width) --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body chart-full"> | |
| <div class="card-head"><div class="card-title">7. Aktivitas per Jam (Heatmap)</div><span class="card-badge">Batang</span></div> | |
| <div class="chart-wrap"><canvas id="c12"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- ━━━ NEW SECTIONS ━━━ --> | |
| <!-- Row 5: Language Sentiment Chart (full) ← now #8 --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body chart-full"> | |
| <div class="card-head"><div class="card-title">8. Sentimen berdasarkan Bahasa</div><span class="card-badge">Batang Berlapis</span></div> | |
| <div class="chart-wrap"><canvas id="cLang"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- Row 6: Top Hashtag Table + Top Topic Table --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">9. Top 10 Hashtag Teratas</div><span class="card-badge">Tabel</span></div> | |
| <div class="analytics-table-wrap"> | |
| <table class="analytics-table" id="tblHashtag"> | |
| <thead><tr><th>#</th><th>Hashtag</th><th>Jumlah</th><th>Distribusi</th></tr></thead> | |
| <tbody id="tblHashtagBody"></tbody> | |
| </table> | |
| <div class="empty-state" id="tblHashtagEmpty" style="display:none;margin-top:0;border:none"> | |
| <div class="empty-state-title">Tidak ada hashtag</div> | |
| <div class="empty-state-desc">Belum ada data hashtag yang ditemukan.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">10. Top 10 Topik Teratas</div><span class="card-badge">Tabel</span></div> | |
| <div class="analytics-table-wrap"> | |
| <table class="analytics-table" id="tblTopic"> | |
| <thead><tr><th>#</th><th>Topik</th><th>Total</th><th class="tc-pos">✦ Pos</th><th class="tc-neg">✦ Neg</th><th class="tc-neu">✦ Net</th></tr></thead> | |
| <tbody id="tblTopicBody"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Row 7: Sentiment per Hashtag Table (full) --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body chart-full"> | |
| <div class="card-head"><div class="card-title">11. Sentimen per Hashtag Teratas</div><span class="card-badge">Tabel Detail</span></div> | |
| <div class="analytics-table-wrap"> | |
| <table class="analytics-table" id="tblHashtagSent"> | |
| <thead><tr><th>#</th><th>Hashtag</th><th>Total</th><th class="tc-pos">Positif</th><th class="tc-neg">Negatif</th><th class="tc-neu">Netral</th><th>Dominan</th><th>Bar Distribusi</th></tr></thead> | |
| <tbody id="tblHashtagSentBody"></tbody> | |
| </table> | |
| <div class="empty-state" id="tblHashtagSentEmpty" style="display:none;margin-top:0;border:none"> | |
| <div class="empty-state-title">Tidak ada hashtag</div> | |
| <div class="empty-state-desc">Belum ada data hashtag yang ditemukan.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Row 8: Common Words (3 columns) --> | |
| <div class="chart-grid-3" style="margin-bottom:14px"> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">12. Kata Umum — Positif</div><span class="card-badge" style="background:var(--pos-d);color:var(--pos);border-color:transparent">Positif</span></div> | |
| <div class="word-tag-cloud" id="wordsPos"></div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">13. Kata Umum — Netral</div><span class="card-badge" style="background:var(--neu-d);color:var(--neu);border-color:transparent">Netral</span></div> | |
| <div class="word-tag-cloud" id="wordsNeu"></div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">14. Kata Umum — Negatif</div><span class="card-badge" style="background:var(--neg-d);color:var(--neg);border-color:transparent">Negatif</span></div> | |
| <div class="word-tag-cloud" id="wordsNeg"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/shared.js"></script> | |
| <script src="js/analytics.js"></script> | |
| </body> | |
| </html> | |