Hugging Face's logo

Spaces:
rhmnsae
/
sentimeter
Running

App Files Community
sentimeter
File size: 7,502 Bytes
04b72bb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<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>