Persentase Capaian

Kalkulator Kinerja

Hitung Persentase Capaian

Evaluasi kinerja, monitoring program, dan hitung persentase pencapaian berdasarkan perbandingan target dan realisasi dengan mudah dan cepat.

Kalkulator Data

Masukkan target yang ditetapkan (dukung desimal & ribuan)
Masukkan hasil pencapaian aktual

Dashboard Hasil

0%
Status
Target
0
Realisasi
0
Selisih
0
Status Pencapaian
Menunggu
Progress Relatif 0%
Riwayat Perhitungan
Tanggal Target Realisasi Persentase Status
Cara Menggunakan
  • Masukkan Nilai Target: Ketikkan angka target yang telah ditetapkan (misal: 100).
  • Masukkan Nilai Realisasi: Ketikkan angka hasil pelaksanaan aktual (misal: 85).
  • Klik Hitung Capaian: Sistem akan otomatis memproses data.
  • Lihat Hasil: Evaluasi dashboard visual yang menampilkan persentase dan status.
  • Simpan/Cetak: Gunakan tombol salin, unduh, atau cetak untuk keperluan administrasi.
Rumus Perhitungan

Perhitungan didasarkan pada rumus standar rasio pencapaian kinerja:

Realisasi
Target × 100%

Catatan: Hasil dapat melebihi 100% jika realisasi melampaui target yang ditetapkan.

Jelajahi Topik Terkait
Persentase Capaian Kalkulator Target Realisasi Cara Menghitung Persentase Capaian Rumus Persentase Pencapaian Hitung Capaian Kinerja Kalkulator Persentase Target Kalkulator Realisasi Anggaran Aplikasi Hitung Target Persentase Keberhasilan Cara Mencari Persentase Realisasi Kalkulator Indikator Kinerja Menghitung Persentase Penjualan Rumus Capaian Program Persentase Ketercapaian Target Hitung Realisasi vs Target Evaluasi Pencapaian Kinerja Kalkulator Persentase Penurunan Kalkulator Persentase Kenaikan Rumus Excel Persentase Capaian Monitoring Capaian Target Persentase Pencapaian Penjualan Hitung Persentase Keuntungan Laporan Realisasi Kinerja Cara Hitung Persentase Progres Kalkulator Evaluasi Kinerja Persentase Realisasi Fisik Persentase Realisasi Keuangan Alat Hitung Capaian Otomatis Kalkulator KPI Key Performance Indicator Rumus Menghitung Progress Pekerjaan Cara Menghitung Persentase Deviasi Dashboard Pencapaian Kinerja Kalkulator Pencapaian Penjualan Rumus Persentase Pencapaian Target Waktu Persentase Keberhasilan Proyek Target and Achievement Calculator Kalkulator Persentase Diskon Rumus Realisasi Anggaran Cara Hitung Progres Proyek Persentase Capaian Indikator Penghitung Persentase Online Kalkulator Capaian Kinerja Pegawai Persentase Pemenuhan Target Persentase Sisa Target Aplikasi Penghitung Persentase Kinerja Hitung Cepat Persentase Realisasi Persentase Kelulusan Target Analisis Capaian Kinerja Kalkulator Target Tercapai
// JavaScript Application Logic document.addEventListener('DOMContentLoaded', () => { // Configuration & State const state = { history: JSON.parse(localStorage.getItem('capaianHistory')) || [] }; // DOM Elements const els = { mainGrid: document.querySelector('.main-grid'), inputTarget: document.getElementById('input-target'), inputRealisasi: document.getElementById('input-realisasi'), btnCalculate: document.getElementById('btn-calculate'), btnReset: document.getElementById('btn-reset'), btnSample: document.getElementById('btn-sample'), resultSection: document.getElementById('result-section'), resPercent: document.getElementById('result-percent'), resStatusLabel: document.getElementById('result-status-label'), resTarget: document.getElementById('res-target'), resRealisasi: document.getElementById('res-realisasi'), resSelisih: document.getElementById('res-selisih'), resStatus: document.getElementById('res-status'), gaugeProgress: document.getElementById('gauge-progress'), linearProgress: document.getElementById('linear-progress'), progressText: document.getElementById('progress-text'), btnCopy: document.getElementById('btn-copy'), btnDownload: document.getElementById('btn-download'), btnPrint: document.getElementById('btn-print'), historyBody: document.getElementById('history-body'), btnClearHistory: document.getElementById('btn-clear-history'), themeToggle: document.getElementById('theme-toggle'), iconSun: document.getElementById('icon-sun'), iconMoon: document.getElementById('icon-moon'), btnToggleTags: document.getElementById('btn-toggle-tags'), tagsContainer: document.getElementById('tags-container'), currentYear: document.getElementById('current-year'), footerTitle: document.getElementById('footer-title'), toastContainer: document.getElementById('toast-container') }; // Setup Footer els.currentYear.textContent = new Date().getFullYear(); els.footerTitle.textContent = document.title; // Setup Theme const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); els.iconSun.style.display = 'block'; els.iconMoon.style.display = 'none'; } els.themeToggle.addEventListener('click', () => { document.documentElement.classList.toggle('dark'); const isDark = document.documentElement.classList.contains('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); els.iconSun.style.display = isDark ? 'block' : 'none'; els.iconMoon.style.display = isDark ? 'none' : 'block'; }); // Utilities const showToast = (message, type = 'success') => { const toast = document.createElement('div'); toast.className = `toast ${type}`; const icon = type === 'error' ? `` : ``; toast.innerHTML = `${icon} ${message}`; els.toastContainer.appendChild(toast); setTimeout(() => toast.classList.add('show'), 10); setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 300); }, 3000); }; const formatID = (num) => new Intl.NumberFormat('id-ID', { maximumFractionDigits: 2 }).format(num); const parseIDInput = (str) => { if (!str) return NaN; // Hilangkan titik (ribuan) lalu ubah koma jadi titik (desimal) const cleanStr = str.replace(/\./g, '').replace(',', '.'); return parseFloat(cleanStr); }; const getStatusInfo = (percent) => { if (percent < 50) return { text: "Capaian Rendah", color: "var(--danger-color)" }; if (percent < 75) return { text: "Capaian Cukup", color: "var(--warning-color)" }; if (percent < 100) return { text: "Mendekati Target", color: "var(--primary-color)" }; if (percent === 100) return { text: "Target Tercapai", color: "var(--success-color)" }; return { text: "Melampaui Target", color: "var(--secondary-color)" }; }; // Main Calculate Function const calculate = () => { const targetVal = parseIDInput(els.inputTarget.value); const realisasiVal = parseIDInput(els.inputRealisasi.value); if (isNaN(targetVal) || isNaN(realisasiVal)) { showToast("Masukkan angka yang valid pada kedua kolom.", "error"); return; } if (targetVal <= 0) { showToast("Target harus lebih besar dari 0.", "error"); return; } const percent = (realisasiVal / targetVal) * 100; const selisih = Math.abs(realisasiVal - targetVal); const status = getStatusInfo(percent); // Update UI els.resTarget.textContent = formatID(targetVal); els.resRealisasi.textContent = formatID(realisasiVal); const selisihPrefix = realisasiVal > targetVal ? "+" : (realisasiVal < targetVal ? "-" : ""); els.resSelisih.textContent = `${selisihPrefix}${formatID(selisih)}`; els.resSelisih.style.color = realisasiVal >= targetVal ? "var(--success-color)" : "var(--danger-color)"; els.resPercent.textContent = `${formatID(percent)}%`; els.resPercent.style.color = status.color; els.resStatusLabel.style.color = status.color; els.resStatus.textContent = status.text; els.resStatus.style.color = status.color; // Animate Gauges els.mainGrid.classList.add('show-results'); els.resultSection.style.display = 'block'; // SVG Circle Circumference is 283 const gaugePercent = Math.min(percent, 100); // Cap drawing at 100% full circle const dashoffset = 283 - (283 * gaugePercent) / 100; setTimeout(() => { els.gaugeProgress.style.strokeDashoffset = dashoffset; els.gaugeProgress.style.stroke = status.color; els.linearProgress.style.width = `${Math.min(percent, 100)}%`; els.linearProgress.style.background = status.color; els.progressText.textContent = `${formatID(percent)}%`; }, 50); // Save History saveHistory(targetVal, realisasiVal, percent, status); // Scroll to result smoothly on mobile if (window.innerWidth < 896) { els.resultSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } }; // History Management const saveHistory = (t, r, p, status) => { const date = new Date().toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }); state.history.unshift({ date, t, r, p, statusText: status.text, statusColor: status.color }); if (state.history.length > 10) state.history.pop(); localStorage.setItem('capaianHistory', JSON.stringify(state.history)); renderHistory(); }; const renderHistory = () => { if (state.history.length === 0) { els.historyBody.innerHTML = `Belum ada riwayat perhitungan.`; return; } els.historyBody.innerHTML = state.history.map(item => ` ${item.date} ${formatID(item.t)} ${formatID(item.r)} ${formatID(item.p)}% ${item.statusText} `).join(''); }; // Actions els.btnCalculate.addEventListener('click', calculate); els.btnReset.addEventListener('click', () => { els.inputTarget.value = ''; els.inputRealisasi.value = ''; els.mainGrid.classList.remove('show-results'); els.resultSection.style.display = 'none'; els.gaugeProgress.style.strokeDashoffset = 283; els.linearProgress.style.width = '0%'; showToast("Data direset", "success"); }); els.btnSample.addEventListener('click', () => { els.inputTarget.value = "1.500"; els.inputRealisasi.value = "1.850"; calculate(); showToast("Contoh data dimuat", "success"); }); els.btnClearHistory.addEventListener('click', () => { state.history = []; localStorage.removeItem('capaianHistory'); renderHistory(); showToast("Riwayat dihapus", "success"); }); els.btnToggleTags.addEventListener('click', () => { const isHidden = els.tagsContainer.classList.contains('hidden-tags'); if (isHidden) { els.tagsContainer.classList.remove('hidden-tags'); els.btnToggleTags.textContent = "Sembunyikan Tag"; } else { els.tagsContainer.classList.add('hidden-tags'); els.btnToggleTags.textContent = "Tampilkan Tag"; } }); // Input handlers to format slightly on blur if needed (Optional, keeping raw input for safety now) // Export / Share Actions const getResultText = () => { return `LAPORAN PERSENTASE CAPAIAN\n` + `--------------------------\n` + `Target : ${els.resTarget.textContent}\n` + `Realisasi : ${els.resRealisasi.textContent}\n` + `Selisih : ${els.resSelisih.textContent}\n` + `Persentase : ${els.resPercent.textContent}\n` + `Status : ${els.resStatus.textContent}\n\n` + `Dihasilkan oleh: ${document.title} - GISTARIAU.com`; }; els.btnCopy.addEventListener('click', () => { const text = getResultText(); if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(text).then(() => showToast("Hasil disalin ke clipboard!")); } else { // Fallback const textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); showToast("Hasil disalin ke clipboard!"); } catch (err) { showToast("Gagal menyalin text.", "error"); } document.body.removeChild(textArea); } }); els.btnDownload.addEventListener('click', () => { const text = getResultText(); const blob = new Blob([text], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `Laporan_Capaian_${new Date().getTime()}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast("File TXT diunduh!"); }); els.btnPrint.addEventListener('click', () => { window.print(); }); // Initial Render renderHistory(); });