mustakim.id

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Indeks Desa</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<style>
  :root {
    --primary: #1a5276;
    --primary-light: #2e86c1;
    --secondary: #28b463;
    --accent: #f39c12;
    --danger: #e74c3c;
    --purple: #8e44ad;
    --teal: #17a2b8;
    --bg-dark: #0d2432;
    --bg-card: #ffffff;
    --text-dark: #1c2833;
    --text-light: #5d6d7e;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --radius: 16px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f0f4f8;
    color: var(--text-dark);
    padding: 24px;
  }
  .dashboard { max-width:1440px; margin:0 auto; }

/* Header */
  .header {
    background: linear-gradient(135deg, var(--primary) 0%, #1a6b8a 50%, #0f3b5c 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 32px 40px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
  }
  .header::before {
    content: ''; position: absolute; top: -60px; right: -80px; width: 300px; height: 300px;
    background: rgba(255,255,255,0.04); border-radius: 50%;
  }
  .header::after {
    content: ''; position: absolute; bottom: -40px; left: -40px; width: 180px; height: 180px;
    background: rgba(255,255,255,0.03); border-radius: 50%;
  }
  .header-left h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; position: relative; z-index: 1; }
  .header-left p { font-size: 14px; opacity: 0.8; margin-top: 6px; position: relative; z-index: 1; }
  .header-right { display: flex; gap: 20px; position: relative; z-index: 1; flex-wrap: wrap; }
  .header-badge {
    background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); padding: 10px 18px;
    border-radius: 10px; text-align: center; min-width: 120px; border: 1px solid rgba(255,255,255,0.1);
  }
  .header-badge .num { font-size: 22px; font-weight: 700; }
  .header-badge .lbl { font-size: 11px; opacity: 0.75; margin-top: 2px; }

/* Grid */
  .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
  .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:24px; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px; }
  .grid-full { margin-bottom:24px; }

/* Cards */
  .card {
    background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 22px 24px; transition: transform 0.2s ease;
  }
  .card:hover { transform: translateY(-2px); }
  .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .card-title { font-size: 15px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
  .card-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
  .card-value { font-size: 32px; font-weight: 800; color: var(--text-dark); line-height: 1.2; }
  .card-sub { font-size: 13px; color: var(--text-light); margin-top: 4px; }
  .card-trend { font-size: 13px; font-weight: 600; margin-top: 8px; }
  .trend-up { color: var(--danger); }
  .trend-down { color: var(--secondary); }

.kpi-green { border-left: 4px solid var(--secondary); }
  .kpi-blue { border-left: 4px solid var(--primary-light); }
  .kpi-orange { border-left: 4px solid var(--accent); }
  .kpi-red { border-left: 4px solid var(--danger); }
  .kpi-purple { border-left: 4px solid var(--purple); }
  .kpi-teal { border-left: 4px solid var(--teal); }

.chart-container { position:relative; height:300px; width:100%; }
  .chart-container-sm { position:relative; height:260px; width:100%; }
  .chart-container-md { position:relative; height:340px; width:100%; }

/* Table */
  .table-wrap { overflow-x:auto; }
  table { width:100%; border-collapse: collapse; font-size: 13px; }
  thead th {
    background: #f8f9fa; padding: 12px 14px; text-align: left; font-weight: 600;
    color: var(--text-light); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 2px solid #e9ecef; white-space: nowrap;
  }
  tbody td { padding: 11px 14px; border-bottom: 1px solid #f1f3f5; }
  tbody tr:hover { background: #f8f9fa; }
  tbody tr:last-child td { border-bottom: none; }
  .badge-status { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
  .badge-mandiri { background:#d5f5e3; color:#1e8449; }
  .badge-maju { background:#d6eaf8; color:#1a5276; }
  .badge-berkembang { background:#fef9e7; color:#b7950b; }
  .badge-tertinggal { background:#fdebd0; color:#ca6f1e; }
  .badge-sangattertinggal { background:#fadbd8; color:#c0392b; }
  .badge-desil1 { background:#fadbd8; color:#c0392b; }
  .badge-desil2 { background:#fdebd0; color:#ca6f1e; }
  .badge-desil3 { background:#fef9e7; color:#b7950b; }
  .badge-desil4 { background:#d6eaf8; color:#1a5276; }
  .badge-desil5 { background:#d5f5e3; color:#1e8449; }
  .num-pos { color: var(--secondary); font-weight:600; }
  .num-neg { color: var(--danger); font-weight:600; }

/* Policy list */
  .policy-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
  .policy-item {
    background:#f8f9fa; border-radius:12px; padding:16px 18px; display:flex; align-items:center;
    gap:14px; border-left:4px solid var(--primary-light); transition: transform 0.2s;
  }
  .policy-item:hover { transform:translateX(4px); }
  .policy-num {
    width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
  }
  .policy-text h4 { font-size:14px; font-weight:600; }
  .policy-text p { font-size:12px; color:var(--text-light); margin-top:2px; }

/* Tabs */
  .tab-bar { display:flex; gap:2px; background:#e9ecef; border-radius:10px; padding:3px; margin-bottom:18px; flex-wrap: wrap; }
  .tab-btn {
    flex:1; padding:10px 16px; border:none; background:transparent; border-radius:8px; font-size:13px;
    font-weight:600; color:var(--text-light); cursor:pointer; transition: all 0.2s; min-width: fit-content;
  }
  .tab-btn.active { background:#fff; color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
  .tab-panel { display:none; }
  .tab-panel.active { display:block; }

.eval-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
  .eval-item { background:#f8f9fa; border-radius:10px; padding:14px; text-align:center; }
  .eval-item .val { font-size:22px; font-weight:800; color:var(--primary); }
  .eval-item .lbl { font-size:11px; color:var(--text-light); margin-top:4px; }
  .section-title { font-size:18px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
  .section-desc { font-size:13px; color:var(--text-light); margin-bottom:18px; }

.ministry-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
  .ministry-item { background:#f8f9fa; border-radius:10px; padding:14px 16px; border-left:4px solid var(--primary-light); transition: transform 0.2s; }
  .ministry-item:hover { transform:translateX(3px); }
  .ministry-item .kementerian { font-weight:700; font-size:13px; }
  .ministry-item .peran { font-size:12px; color:var(--text-light); margin-top:4px; }

.impact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
  .impact-card { border-radius:12px; padding:18px; text-align:center; transition: transform 0.2s; }
  .impact-card:hover { transform:translateY(-3px); }
  .impact-card .impact-val { font-size:28px; font-weight:800; }
  .impact-card .impact-lbl { font-size:12px; margin-top:4px; opacity:0.85; }
  .impact-red { background:#fadbd8; color:#c0392b; }
  .impact-green { background:#d5f5e3; color:#1e8449; }
  .impact-orange { background:#fef9e7; color:#b7950b; }
  .impact-blue { background:#d6eaf8; color:#1a5276; }

.timeline-table { width:100%; border-collapse:separate; border-spacing:0 6px; }
  .timeline-table td { padding:12px 14px; background:#f8f9fa; border-radius:8px; font-size:13px; }
  .timeline-table .tl-month { font-weight:700; color:var(--primary); width:130px; }
  .footer { text-align:center; padding:20px; font-size:12px; color:var(--text-light); border-top:1px solid #e9ecef; margin-top:16px; }

@media (max-width:900px) {
    .grid-4 { grid-template-columns:repeat(2,1fr); }
    .grid-2 { grid-template-columns:1fr; }
    .grid-3 { grid-template-columns:1fr; }
    .header { flex-direction:column; text-align:center; }
    .header-right { justify-content:center; }
    body { padding:12px; }
    .tab-btn { font-size:12px; padding:8px 10px; }
  }
  @media (max-width:500px) {
    .grid-4 { grid-template-columns:1fr; }
    .header-badge { min-width:80px; }
  }
</style>
</head>
<body>

<div class="dashboard">
  <div class="header">
    <div class="header-left">
      <h1>📊 Dashboard Terpadu: Indeks Desa & Integrasi DTSEN 2026</h1>
      <p>Kementerian Desa, PDT, dan Transmigrasi • Kemensos • Dirjen Linjamsos • Paparan 14 April 2026</p>
    </div>
    <div class="header-right">
      <div class="header-badge"><div class="num">75.262</div><div class="lbl">Total Desa</div></div>
      <div class="header-badge"><div class="num">289,06 Jt</div><div class="lbl">Record DTSEN (Jan 2026)</div></div>
      <div class="header-badge"><div class="num">95,01 Jt</div><div class="lbl">Keluarga DTSEN</div></div>
      <div class="header-badge"><div class="num">23,85 Jt</div><div class="lbl">Penduduk Miskin</div></div>
    </div>
  </div>

<div class="grid-4">
    <div class="card kpi-green"><div class="card-header"><span class="card-title">Penurunan JPM Perdesaan</span><div class="card-icon" style="background:#d5f5e3;">📉</div></div><div class="card-value">5,36 <small style="font-size:16px;font-weight:400;">juta jiwa</small></div><div class="card-sub">dari 17,94 jt (2015) → 12,58 jt (Mar 2025)</div><div class="card-trend trend-down">↓ 14,09% → 11,03%</div></div>
    <div class="card kpi-blue"><div class="card-header"><span class="card-title">Penurunan Rata-Rata per Desa</span><div class="card-icon" style="background:#d6eaf8;">🏘️</div></div><div class="card-value">2.088</div><div class="card-sub">selisih rata-rata penduduk miskin per desa (2024→2025)</div></div>
    <div class="card kpi-purple"><div class="card-header"><span class="card-title">Pertumbuhan DTSEN</span><div class="card-icon" style="background:#e8daef;">📊</div></div><div class="card-value">3,48 Jt</div><div class="card-sub">tambah record individu (Feb 2025 → Jan 2026)</div></div>
    <div class="card kpi-teal"><div class="card-header"><span class="card-title">PBI JKN Kuota</span><div class="card-icon" style="background:#d1ecf1;">🏥</div></div><div class="card-value">96,8 Jt</div><div class="card-sub">Penerima Bantuan Iuran JKN (Desil 1-5)</div></div>
  </div>

<div class="card" style="padding:16px 24px;">
    <div class="tab-bar" id="tabBar">
      <button class="tab-btn active" data-tab="tab1">📈 Kemiskinan & Distribusi</button>
      <button class="tab-btn" data-tab="tab2">🏅 Status Desa & IDM</button>
      <button class="tab-btn" data-tab="tab3">📋 Kebijakan & Fokus 2026</button>
      <button class="tab-btn" data-tab="tab4">🔍 Evaluasi & Akuntabilitas</button>
      <button class="tab-btn" data-tab="tab5">🗄️ DTSEN & Bansos</button>
      <button class="tab-btn" data-tab="tab6">🏥 DTSEN & JKN</button>
    </div>
  </div>

<div class="tab-panel active" id="tab1">
    <div class="grid-2">
      <div class="card"><div class="card-header"><span class="card-title">Perkembangan Kemiskinan Perdesaan 2015–2025</span></div><div class="chart-container"><canvas id="chartKemiskinan"></canvas></div></div>
      <div class="card"><div class="card-header"><span class="card-title">Distribusi Penduduk Miskin per Status Desa</span></div><div class="chart-container"><canvas id="chartDistribusi2025"></canvas></div></div>
    </div>
    <div class="card grid-full">
      <div class="card-header"><span class="card-title">Data Distribusi Penduduk Miskin Berdasarkan Status Desa (2024–2025)</span></div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Status Desa</th><th>Jml Penduduk 2024</th><th>% JPM 2024</th><th>Rata/Desa 2024</th><th>Jml Penduduk 2025</th><th>% JPM 2025</th><th>Rata/Desa 2025</th><th>Selisih Rata</th></tr></thead>
          <tbody>
            <tr><td><span class="badge-status badge-mandiri">Mandiri</span></td><td>98.330.447</td><td>34,81%</td><td>5.716</td><td>135.681.081</td><td>47,06%</td><td>6.618</td><td class="num-pos">+902</td></tr>
            <tr><td><span class="badge-status badge-maju">Maju</span></td><td>96.296.608</td><td>34,09%</td><td>4.175</td><td>95.980.093</td><td>33,29%</td><td>4.071</td><td class="num-neg">−105</td></tr>
            <tr><td><span class="badge-status badge-berkembang">Berkembang</span></td><td>66.240.993</td><td>23,45%</td><td>2.700</td><td>48.119.788</td><td>16,69%</td><td>2.206</td><td class="num-neg">−494</td></tr>
            <tr><td><span class="badge-status badge-tertinggal">Tertinggal</span></td><td>11.327.351</td><td>4,01%</td><td>1.857</td><td>4.872.525</td><td>1,69%</td><td>1.043</td><td class="num-neg">−814</td></tr>
            <tr><td><span class="badge-status badge-sangattertinggal">Sangat Tertinggal</span></td><td>10.282.184</td><td>3,64%</td><td>2.357</td><td>3.661.602</td><td>1,27%</td><td>780</td><td class="num-neg">−1.577</td></tr>
            <tr style="background:#f8f9fa;font-weight:700;"><td><strong>Grand Total</strong></td><td><strong>282.477.584</strong></td><td><strong>100,00%</strong></td><td><strong>16.805</strong></td><td><strong>288.315.089</strong></td><td><strong>100,00%</strong></td><td><strong>14.717</strong></td><td class="num-neg">−2.088</td></tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="grid-2">
      <div class="card"><div class="card-header"><span class="card-title">Selisih Rata-Rata Penduduk Miskin per Desa (2024→2025)</span></div><div class="chart-container-sm"><canvas id="chartSelisihDesa"></canvas></div></div>
      <div class="card"><div class="card-header"><span class="card-title">Rata-Rata Penduduk Miskin per Desa</span></div><div class="chart-container-sm"><canvas id="chartRataDesa"></canvas></div></div>
    </div>
  </div>

<div class="tab-panel" id="tab2">
    <div class="card grid-full">
      <div class="section-title"><span class="emoji">🏅</span> Distribusi Status Desa IDM 2025</div>
      <div class="section-desc">Berdasarkan Kepmendes 343/2025 tentang Status Kemajuan dan Kemandirian Desa</div>
      <div class="grid-2">
        <div><div class="chart-container-sm"><canvas id="chartStatusDesa"></canvas></div></div>
        <div class="table-wrap">
          <table>
            <thead><tr><th>Status Desa</th><th>Jumlah Desa</th><th>% Total</th><th>Rata JPM 2025</th></tr></thead>
            <tbody>
              <tr><td><span class="badge-status badge-mandiri">Mandiri</span></td><td>20.503</td><td>27,24%</td><td>6.618</td></tr>
              <tr><td><span class="badge-status badge-maju">Maju</span></td><td>23.579</td><td>31,33%</td><td>4.071</td></tr>
              <tr><td><span class="badge-status badge-berkembang">Berkembang</span></td><td>21.813</td><td>28,98%</td><td>2.206</td></tr>
              <tr><td><span class="badge-status badge-tertinggal">Tertinggal</span></td><td>4.672</td><td>6,21%</td><td>1.043</td></tr>
              <tr><td><span class="badge-status badge-sangattertinggal">Sangat Tertinggal</span></td><td>4.695</td><td>6,24%</td><td>780</td></tr>
              <tr style="background:#f8f9fa;font-weight:700;"><td><strong>Total</strong></td><td><strong>75.262</strong></td><td><strong>100%</strong></td><td><strong>14.717</strong></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="card grid-full">
      <div class="section-title"><span class="emoji">📊</span> Indikator Indeks Desa dengan Skor 1–3 Tertinggi</div>
      <div class="section-desc">Menunjukkan indikator yang masih lemah dan membutuhkan intervensi lebih lanjut</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>#</th><th>Indikator</th><th>Desa Skor 1–3</th><th>Desa Skor 4–5</th><th>% Perlu Intervensi</th></tr></thead>
          <tbody id="idmTableBody"></tbody>
        </table>
      </div>
      <div style="margin-top:14px;"><canvas id="chartIDMTop10" style="height:280px;width:100%;"></canvas></div>
    </div>
  </div>

<div class="tab-panel" id="tab3">
    <div class="card grid-full">
      <div class="section-title"><span class="emoji">🎯</span> Sasaran Nasional Penurunan Kemiskinan RPJMN 2025–2029</div>
      <div class="grid-3" style="margin-bottom:16px;">
        <div class="eval-item"><div class="val" style="color:var(--secondary);">4,5% – 5%</div><div class="lbl">Target Tingkat Kemiskinan 2029</div></div>
        <div class="eval-item"><div class="val" style="color:var(--accent);">7% – 8%</div><div class="lbl">Tingkat Kemiskinan Saat Ini</div></div>
        <div class="eval-item"><div class="val" style="color:var(--primary-light);">PN 6</div><div class="lbl">Prioritas Nasional Ke-6</div></div>
      </div>
    </div>
    <div class="card grid-full">
      <div class="section-title"><span class="emoji">📋</span> 8 Fokus Penggunaan Dana Desa 2026</div>
      <div class="policy-grid" id="policyGrid"></div>
    </div>
  </div>

<div class="tab-panel" id="tab4">
    <div class="card grid-full">
      <div class="section-title"><span class="emoji">📊</span> 11 Metrik Evaluasi BPKP 2025</div>
      <div class="eval-grid">
        <div class="eval-item"><div class="val">1.584</div><div class="lbl">Desa Uji Petik</div></div>
        <div class="eval-item"><div class="val">75.266</div><div class="lbl">Total Desa</div></div>
        <div class="eval-item"><div class="val" style="color:var(--danger);">10,25%</div><div class="lbl">Penyaluran Tidak Tepat Waktu</div></div>
        <div class="eval-item"><div class="val" style="color:var(--danger);">18,69%</div><div class="lbl">Alokasi Mandatory Tidak Terpenuhi</div></div>
        <div class="eval-item"><div class="val" style="color:var(--accent);">32,8%</div><div class="lbl">Anggaran Berpotensi Tidak Efektif</div></div>
        <div class="eval-item"><div class="val" style="color:var(--danger);">46,24%</div><div class="lbl">RAB Tidak Sesuai Standar Teknis</div></div>
        <div class="eval-item"><div class="val" style="color:var(--accent);">98–99%</div><div class="lbl">Perencanaan Tidak Terukur</div></div>
      </div>
    </div>
  </div>

<div class="tab-panel" id="tab5">
    <div class="grid-4">
      <div class="card kpi-purple"><div class="card-header"><span class="card-title">Record Individu DTSEN</span><div class="card-icon" style="background:#e8daef;">👤</div></div><div class="card-value">289,06 <small>juta</small></div></div>
      <div class="card kpi-purple"><div class="card-header"><span class="card-title">Keluarga DTSEN</span><div class="card-icon" style="background:#e8daef;">🏠</div></div><div class="card-value">95,01 <small>juta</small></div></div>
      <div class="card kpi-red"><div class="card-header"><span class="card-title">Penduduk Miskin</span><div class="card-icon" style="background:#fadbd8;">⚠️</div></div><div class="card-value">23,85 <small>juta</small></div></div>
      <div class="card kpi-orange"><div class="card-header"><span class="card-title">Miskin Ekstrem</span><div class="card-icon" style="background:#fef9e7;">🔴</div></div><div class="card-value">2,38 <small>juta</small></div></div>
    </div>
    <div class="grid-2">
      <div class="card"><div class="card-header"><span class="card-title">Pertumbuhan Data DTSEN</span></div><div class="chart-container"><canvas id="chartDTSENGrowth"></canvas></div></div>
      <div class="card"><div class="card-header"><span class="card-title">Kerangka Desil & Program</span></div><div class="chart-container"><canvas id="chartDesilProgram"></canvas></div></div>
    </div>
  </div>

<div class="tab-panel" id="tab6">
    <div class="grid-4">
      <div class="card kpi-teal"><div class="card-header"><span class="card-title">Kuota PBI JKN</span><div class="card-icon" style="background:#d1ecf1;">🏥</div></div><div class="card-value">96,8 <small>juta</small></div></div>
      <div class="card kpi-red"><div class="card-header"><span class="card-title">PBI Tersalurkan</span><div class="card-icon" style="background:#fadbd8;">🔴</div></div><div class="card-value">10,6 <small>juta</small></div></div>
      <div class="card kpi-green"><div class="card-header"><span class="card-title">Reaktivasi PBI</span><div class="card-icon" style="background:#d5f5e3;">✅</div></div><div class="card-value">2.588</div></div>
      <div class="card kpi-purple"><div class="card-header"><span class="card-title">Penduduk Miskin</span><div class="card-icon" style="background:#e8daef;">👥</div></div><div class="card-value">288 <small>juta</small></div></div>
    </div>
    <div class="card grid-full">
      <div class="section-title"><span class="emoji">📊</span> Cakupan PBI JKN & Program Bansos Berdasarkan Desil DTSEN</div>
      <div class="chart-container-md"><canvas id="chartPBIJKN"></canvas></div>
    </div>
  </div>
  
  <div class="footer">Dashboard ini disusun berdasarkan Paparan Kemendes PDT & Dirjen Linjamsos (Jan-Apr 2026).</div>
</div>

new Chart(document.getElementById('chartKemiskinan').getContext('2d'), { type: 'line', data: { labels: ['2015','2016','2017','2018','2019','2020','2021','2022','2023','2024','2025*'], datasets: [ { label: 'JP Miskin Perdesaan (jt)', data: [17.94,17.76,17.21,15.81,15.26,16.43,15.64,15.39,14.86,14.47,12.58], borderColor: '#1a5276', backgroundColor: 'rgba(26,82,118,0.08)', fill: true, tension: 0.4 }, { label: 'JP Miskin Perkotaan (jt)', data: [10.65,10.25,10.56,10.14,9.53,11.12,10.86,10.97,11.04,10.75,11.48], borderColor: '#e74c3c', backgroundColor: 'rgba(231,76,60,0.06)', fill: true, tension: 0.4 } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { datalabels: { display: false } } } });

new Chart(document.getElementById('chartDistribusi2025').getContext('2d'), { type: 'doughnut', data: { labels: ['Mandiri','Maju','Berkembang','Tertinggal','Sangat Tertinggal'], datasets: [{ data: [47.06, 33.29, 16.69, 1.69, 1.27], backgroundColor: ['#1e8449','#2e86c1','#f1c40f','#e67e22','#e74c3c'] }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { datalabels: { formatter: (v) => v + '%', color: '#fff', font: { weight: 'bold', size: 11 } } } } });

new Chart(document.getElementById('chartSelisihDesa').getContext('2d'), { type: 'bar', data: { labels: ['Mandiri','Maju','Berkembang','Tertinggal','Sangat Tertinggal'], datasets: [{ label: 'Δ Rata-rata per Desa', data: [902, -105, -494, -814, -1577], backgroundColor: ['rgba(40,180,99,0.75)','rgba(231,76,60,0.6)','rgba(231,76,60,0.6)','rgba(231,76,60,0.6)','rgba(231,76,60,0.8)'] }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { align: 'end', font: { weight: 'bold', size: 11 }, formatter: (v) => (v >= 0 ? '+' : '') + v } } } });

new Chart(document.getElementById('chartRataDesa').getContext('2d'), { type: 'bar', data: { labels: ['Mandiri','Maju','Berkembang','Tertinggal','Sangat Tertinggal'], datasets: [ { label: 'Rata/Desa 2024', data: [5716, 4175, 2700, 1857, 2357], backgroundColor: 'rgba(26,82,118,0.6)' }, { label: 'Rata/Desa 2025', data: [6618, 4071, 2206, 1043, 780], backgroundColor: 'rgba(40,180,99,0.7)' } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { datalabels: { display: false } } } });

new Chart(document.getElementById('chartStatusDesa').getContext('2d'), { type: 'polarArea', data: { labels: ['Mandiri','Maju','Berkembang','Tertinggal','Sangat Tertinggal'], datasets: [{ data: [20503, 23579, 21813, 4672, 4695], backgroundColor: ['rgba(30,132,73,0.75)','rgba(46,134,193,0.75)','rgba(241,196,15,0.75)','rgba(230,126,34,0.75)','rgba(231,76,60,0.75)'] }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { datalabels: { font: { weight: 'bold', size: 11 }, color: '#fff', formatter: (v) => numFormat(v) } } } });

new Chart(document.getElementById('chartIDMTop10').getContext('2d'), { type: 'bar', data: { labels: idmData.map(d => d.indikator.substring(0,25) + '...'), datasets: [ { label: 'Skor 1-3', data: idmData.map(d => d.skor1), backgroundColor: 'rgba(231,76,60,0.7)' }, { label: 'Skor 4-5', data: idmData.map(d => d.skor4), backgroundColor: 'rgba(40,180,99,0.7)' } ] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { datalabels: { display: false } } } });

new Chart(document.getElementById('chartDTSENGrowth').getContext('2d'), { type: 'bar', data: { labels: ['3 Feb 2025','31 Jul 2025','3 Sep 2025','11 Nov 2025','23 Jan 2026'], datasets: [ { label: 'Record Individu', data: [285579122, 286800865, 287624267, 288056584, 289060513], backgroundColor: 'rgba(142,68,173,0.7)', yAxisID: 'y' }, { label: 'Record Keluarga', data: [93025360, 94251663, 94555442, 94497587, 95006179], backgroundColor: 'rgba(23,162,184,0.7)', yAxisID: 'y1' } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { datalabels: { display: function(ctx) { return ctx.dataIndex === ctx.dataset.data.length - 1; }, align: 'end', font: { weight: 'bold', size: 10 }, formatter: (v) => formatJuta(v) } }, scales: { y: { ticks: { callback: (v) => formatJuta(v) } }, y1: { position: 'right', grid: { display: false }, ticks: { callback: (v) => formatJuta(v) } } } } });

new Chart(document.getElementById('chartDesilProgram').getContext('2d'), { type: 'radar', data: { labels: ['Desil 1','Desil 2','Desil 3','Desil 4','Desil 5','Desil 6-10'], datasets: [ { label: 'PKH (10 Juta)', data: [4, 3, 2, 1, 0, 0], borderColor: '#e74c3c', backgroundColor: 'rgba(231,76,60,0.1)' }, { label: 'Sembako/BPNT (18,2 Juta)', data: [5, 4, 3, 2, 0, 0], borderColor: '#f39c12', backgroundColor: 'rgba(243,156,18,0.1)' }, { label: 'PBI JKN (96,8 Juta)', data: [5, 5, 4, 3, 2, 0], borderColor: '#2e86c1', backgroundColor: 'rgba(46,134,193,0.1)' } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { datalabels: { display: false } }, scales: { r: { max: 6, ticks: { display: false } } } } });

new Chart(document.getElementById('chartPBIJKN').getContext('2d'), { type: 'bar', data: { labels: ['Desil 1', 'Desil 2', 'Desil 3', 'Desil 4', 'Desil 5', 'Desil 6-10'], datasets: [ { label: 'PKH (10 Juta)', data: [10, 0, 0, 0, 0, 0], backgroundColor: 'rgba(231,76,60,0.7)' }, { label: 'Sembako (18,2 Juta)', data: [9.1, 9.1, 0, 0, 0, 0], backgroundColor: 'rgba(243,156,18,0.7)' }, { label: 'PBI JKN (96,8 Juta)', data: [28.8, 28.8, 28.8, 10.4, 0, 0], backgroundColor: 'rgba(46,134,193,0.7)' }, { label: 'Tidak Tercover', data: [0, 0, 0, 18.4, 28.8, 144], backgroundColor: 'rgba(200,200,200,0.4)' } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { datalabels: { display: function(ctx) { return ctx.dataset.data[ctx.dataIndex] > 0; }, color: '#fff', formatter: (v) => v >= 1 ? v.toFixed(1).replace('.',',') + ' Jt' : '' } }, scales: { x: { grid: { display: false } }, y: { stacked: true, ticks: { callback: (v) => v + ' Jt' } } } } });

const tabBtns = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');
tabBtns.forEach(btn => { btn.addEventListener('click', () => { tabBtns.forEach(b => b.classList.remove('active')); tabPanels.forEach(p => p.classList.remove('active')); btn.classList.add('active'); document.getElementById(btn.dataset.tab).classList.add('active'); }); });
</script>
</body>
</html>

mustakim.id

Tentang Kami

WorldInNews

Categories

Pages

Contact

Formulir Kontak