Hugging Face's logo

Spaces:
rhmnsae
/
sentimeter
Running

App Files Community
sentimeter
File size: 3,573 Bytes
04b72bb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3cc3895
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
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Dashboard — 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">Dashboard Eksekutif</div>
      <div id="topbarMeta" class="topbar-sub"></div>
    </div>
    <div class="page-body">

      <!-- KPI CARDS -->
      <div class="sec-head" style="margin-bottom:14px">
        <div><div class="sec-title">Ringkasan Analisis</div><div class="sec-sub" id="datePeriod"></div></div>
        <div class="actions">
          <button class="btn btn-ghost btn-sm" onclick="location.href='upload'">Upload Baru</button>
        </div>
      </div>
      <div class="kpi-grid" id="kpiGrid"></div>

      <!-- GAUGE + DONUT + TIME -->
      <div class="chart-grid" style="margin-bottom:14px">
        <div class="card card-body">
          <div class="card-head"><div class="card-title">Skor Sentimen Global</div><span class="card-badge">Gauge</span></div>
          <div class="gauge-wrap"><canvas id="chartGauge" width="240" height="140"></canvas></div>
          <div id="gaugeLabel" style="text-align:center;font-size:13px;color:var(--tx2);margin-top:6px"></div>
        </div>
        <div class="card card-body">
          <div class="card-head"><div class="card-title">Distribusi Sentimen</div><span class="card-badge">Donut</span></div>
          <div class="chart-wrap chart-wrap-sm"><canvas id="chartDonut"></canvas></div>
          <div class="legend-row" id="legendDonut"></div>
        </div>
      </div>

      <!-- TREND -->
      <div class="card card-body" style="margin-bottom:14px">
        <div class="card-head"><div class="card-title">Tren Sentimen per Waktu</div><span class="card-badge">Garis</span></div>
        <div class="chart-wrap"><canvas id="chartTrend"></canvas></div>
      </div>

      <!-- TOP TWEETS + LEADERBOARD -->
      <div class="chart-grid" style="margin-bottom:14px">
        <div class="card card-body">
          <div class="card-head"><div class="card-title">Tweet Positif Teratas</div><span class="card-badge">Top 5</span></div>
          <div id="positiveTweets"></div>
        </div>
        <div class="card card-body">
          <div class="card-head"><div class="card-title">Tweet Negatif Teratas</div><span class="card-badge">Top 5</span></div>
          <div id="negativeTweets"></div>
        </div>
      </div>

      <!-- ENGAGEMENT + INSIGHTS -->
      <div class="chart-grid">
        <div class="card card-body">
          <div class="card-head"><div class="card-title">Engagement Leaderboard</div><span class="card-badge">Top 10</span></div>
          <div id="leaderboard"></div>
        </div>
        <div class="card card-body">
          <div class="card-head"><div class="card-title">Insight Otomatis</div><span class="card-badge">AI</span></div>
          <div class="insight-list" id="insights"></div>
        </div>
      </div>

    </div>
  </div>
</div>
<script src="js/shared.js"></script>
<script src="js/dashboard.js"></script>
</body>
</html>