From 9e55ea0dbb278773d71cfd3d3a1158e9c6b69dfa Mon Sep 17 00:00:00 2001 From: arifal Date: Tue, 25 Feb 2025 10:41:59 +0700 Subject: [PATCH] fix change api route data settings --- resources/js/dashboards/pbg.js | 251 +++++++++++++++++++++------------ 1 file changed, 162 insertions(+), 89 deletions(-) diff --git a/resources/js/dashboards/pbg.js b/resources/js/dashboards/pbg.js index 5967118..1c128a3 100644 --- a/resources/js/dashboards/pbg.js +++ b/resources/js/dashboards/pbg.js @@ -17,35 +17,64 @@ document.addEventListener("DOMContentLoaded", async function () { targetPadElement.textContent = formatCurrency(targetPadValue); // Total Potensi Berkas - const totalPotensiBerkas = document.getElementById("total-potensi-berkas"); + const totalPotensiBerkas = document.getElementById( + "total-potensi-berkas" + ); if (!totalPotensiBerkas) return; const totalPotensiBerkasValue = await getDataTotalPotensi(selectedYear); - totalPotensiBerkas.textContent = formatCurrency(totalPotensiBerkasValue.totalData); + totalPotensiBerkas.textContent = formatCurrency( + totalPotensiBerkasValue.totalData + ); // Total Berkas Terverifikasi - const totalBerkasTerverifikasi = document.getElementById("total-berkas-terverifikasi"); + const totalBerkasTerverifikasi = document.getElementById( + "total-berkas-terverifikasi" + ); if (!totalBerkasTerverifikasi) return; - const totalBerkasTerverifikasiValue = await getDataVerification(selectedYear); - totalBerkasTerverifikasi.textContent = formatCurrency(totalBerkasTerverifikasiValue.totalData); + const totalBerkasTerverifikasiValue = await getDataVerification( + selectedYear + ); + totalBerkasTerverifikasi.textContent = formatCurrency( + totalBerkasTerverifikasiValue.totalData + ); // Total Kekurangan potensi - const totalKekuranganPotensi = document.getElementById("total-kekurangan-potensi"); + const totalKekuranganPotensi = document.getElementById( + "total-kekurangan-potensi" + ); if (!totalKekuranganPotensi) return; - const totalKekuranganPotensiValue = new Big(targetPadValue) - new Big(totalPotensiBerkasValue.totalData); - totalKekuranganPotensi.textContent = formatCurrency(totalKekuranganPotensiValue) + const totalKekuranganPotensiValue = + new Big(targetPadValue) - + new Big(totalPotensiBerkasValue.totalData); + totalKekuranganPotensi.textContent = formatCurrency( + totalKekuranganPotensiValue + ); // Total Potensi PBG dari tata ruang - const totalPotensiPBGTataRuang = document.getElementById("total-potensi-pbd-tata-ruang"); + const totalPotensiPBGTataRuang = document.getElementById( + "total-potensi-pbd-tata-ruang" + ); if (!totalPotensiPBGTataRuang) return; - const totalPotensiPBGTataRuangValue = await getDataSettings("TATA_RUANG"); - totalPotensiPBGTataRuang.textContent = formatCurrency(totalPotensiPBGTataRuangValue); + const totalPotensiPBGTataRuangValue = await getDataSettings( + "TATA_RUANG" + ); + totalPotensiPBGTataRuang.textContent = formatCurrency( + totalPotensiPBGTataRuangValue + ); // Total Berkas Belum terverifikasi - const totalBerkasBelumTerverifikasi = document.getElementById("total-berkas-belum-terverifikasi"); + const totalBerkasBelumTerverifikasi = document.getElementById( + "total-berkas-belum-terverifikasi" + ); if (!totalBerkasBelumTerverifikasi) return; - const totalBerkasBelumTerverifikasiValue = await getDataNonVerification(selectedYear); - const totalBerkasBelumTerverifikasiCount = totalBerkasBelumTerverifikasiValue.countData; - totalBerkasBelumTerverifikasi.textContent = formatCurrency(totalBerkasBelumTerverifikasiValue.totalData); + const totalBerkasBelumTerverifikasiValue = await getDataNonVerification( + selectedYear + ); + const totalBerkasBelumTerverifikasiCount = + totalBerkasBelumTerverifikasiValue.countData; + totalBerkasBelumTerverifikasi.textContent = formatCurrency( + totalBerkasBelumTerverifikasiValue.totalData + ); // Total Berkas Usaha const totalBerkasUsahaValue = await getDataBusiness(selectedYear); @@ -58,21 +87,40 @@ document.addEventListener("DOMContentLoaded", async function () { const totalBerkasNonUsahaTotalData = totalBerkasNonUsahaValue.totalData; // Pie Chart Section - let persenUsaha = totalBerkasBelumTerverifikasiCount > 0 - ? ((totalBerkasUsahaCount / totalBerkasBelumTerverifikasiCount) * 100).toFixed(2) - : "0"; + let persenUsaha = + totalBerkasBelumTerverifikasiCount > 0 + ? ( + (totalBerkasUsahaCount / + totalBerkasBelumTerverifikasiCount) * + 100 + ).toFixed(2) + : "0"; - let persenNonUsaha = totalBerkasBelumTerverifikasiCount > 0 - ? ((totalBerkasNonUsahaCount / totalBerkasBelumTerverifikasiCount) * 100).toFixed(2) - : "0"; + let persenNonUsaha = + totalBerkasBelumTerverifikasiCount > 0 + ? ( + (totalBerkasNonUsahaCount / + totalBerkasBelumTerverifikasiCount) * + 100 + ).toFixed(2) + : "0"; - const dataSeriesPieChart = [Number(persenUsaha), Number(persenNonUsaha)] + const dataSeriesPieChart = [ + Number(persenUsaha), + Number(persenNonUsaha), + ]; const labelsPieChart = ["Berkas Usaha", "Berkas Non Usaha"]; - document.querySelector("td[data-category='non-usaha']").textContent = formatCurrency(totalBerkasNonUsahaTotalData).toLocaleString(); - document.querySelector("td[data-category='non-usaha-percentage']").textContent = persenNonUsaha + "%"; + document.querySelector("td[data-category='non-usaha']").textContent = + formatCurrency(totalBerkasNonUsahaTotalData).toLocaleString(); + document.querySelector( + "td[data-category='non-usaha-percentage']" + ).textContent = persenNonUsaha + "%"; - document.querySelector("td[data-category='usaha']").textContent = formatCurrency(totalBerkasUsahaTotalData).toLocaleString(); - document.querySelector("td[data-category='usaha-percentage']").textContent = persenUsaha + "%"; + document.querySelector("td[data-category='usaha']").textContent = + formatCurrency(totalBerkasUsahaTotalData).toLocaleString(); + document.querySelector( + "td[data-category='usaha-percentage']" + ).textContent = persenUsaha + "%"; updatePieChart(dataSeriesPieChart, labelsPieChart); @@ -81,27 +129,30 @@ document.addEventListener("DOMContentLoaded", async function () { console.log(allLocation); // Filter hanya data yang memiliki angka valid - let validLocations = allLocation.dataLocation.filter(loc => { - return !isNaN(parseFloat(loc.longitude)) && !isNaN(parseFloat(loc.latitude)); + let validLocations = allLocation.dataLocation.filter((loc) => { + return ( + !isNaN(parseFloat(loc.longitude)) && + !isNaN(parseFloat(loc.latitude)) + ); }); // Ubah string ke float - validLocations = validLocations.map(loc => ({ + validLocations = validLocations.map((loc) => ({ name: loc.project_name, longitude: parseFloat(loc.longitude), - latitude: parseFloat(loc.latitude) + latitude: parseFloat(loc.latitude), })); - console.log(validLocations.name) + console.log(validLocations.name); // Inisialisasi peta - var map = L.map('map').setView([-7.0230, 107.5275], 10); - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' + var map = L.map("map").setView([-7.023, 107.5275], 10); + L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { + attribution: "© OpenStreetMap contributors", }).addTo(map); // Tambahkan marker ke peta - validLocations.forEach(function(loc) { + validLocations.forEach(function (loc) { L.marker([loc.latitude, loc.longitude]) .addTo(map) .bindPopup(`${loc.name}`) // Popup saat diklik @@ -109,22 +160,40 @@ document.addEventListener("DOMContentLoaded", async function () { }); // Realisasi terbit PBG - const totalRealisasiTerbitPBG = document.getElementById("realisasi-terbit-pbg"); + const totalRealisasiTerbitPBG = document.getElementById( + "realisasi-terbit-pbg" + ); if (!totalRealisasiTerbitPBG) return; - const totalRealisasiTerbitPBGValue = await getDataSettings("REALISASI_TERBIT_PBG_SUM"); - totalRealisasiTerbitPBG.textContent = formatCurrency(totalRealisasiTerbitPBGValue); + const totalRealisasiTerbitPBGValue = await getDataSettings( + "REALISASI_TERBIT_PBG_SUM" + ); + totalRealisasiTerbitPBG.textContent = formatCurrency( + totalRealisasiTerbitPBGValue + ); // Menunggu Klik DPMPTSP - const totalMenungguKlikDpmptsp = document.getElementById("waiting-click-dpmptsp"); + const totalMenungguKlikDpmptsp = document.getElementById( + "waiting-click-dpmptsp" + ); if (!totalMenungguKlikDpmptsp) return; - const totalMenungguKlikDpmptspValue = await getDataSettings("MENUNGGU_KLIK_DPMPTSP_SUM"); - totalMenungguKlikDpmptsp.textContent = formatCurrency(totalMenungguKlikDpmptspValue); + const totalMenungguKlikDpmptspValue = await getDataSettings( + "MENUNGGU_KLIK_DPMPTSP_SUM" + ); + totalMenungguKlikDpmptsp.textContent = formatCurrency( + totalMenungguKlikDpmptspValue + ); // Proses Dinas Teknis - const totalProsesDinasTeknis = document.getElementById("processing-technical-services"); + const totalProsesDinasTeknis = document.getElementById( + "processing-technical-services" + ); if (!totalProsesDinasTeknis) return; - const totalProsesDinasTeknisValue = await getDataSettings("PROSES_DINAS_TEKNIS_SUM"); - totalProsesDinasTeknis.textContent = formatCurrency(totalProsesDinasTeknisValue); + const totalProsesDinasTeknisValue = await getDataSettings( + "PROSES_DINAS_TEKNIS_SUM" + ); + totalProsesDinasTeknis.textContent = formatCurrency( + totalProsesDinasTeknisValue + ); // Load Tabel Baru di Update const tableLastUpdated = new GeneralTable( @@ -172,25 +241,32 @@ document.addEventListener("DOMContentLoaded", async function () { tableSKPBGTerbit.init(); - document.querySelector("#pbg-filter-by-updated-at .gridjs-search").hidden = true; - document.querySelector("#pbg-filter-by-updated-at .gridjs-footer").hidden = true; - document.querySelector("#pbg-filter-by-status .gridjs-search").hidden = true; - document.querySelector("#pbg-filter-by-status .gridjs-footer").hidden = true; + document.querySelector( + "#pbg-filter-by-updated-at .gridjs-search" + ).hidden = true; + document.querySelector( + "#pbg-filter-by-updated-at .gridjs-footer" + ).hidden = true; + document.querySelector( + "#pbg-filter-by-status .gridjs-search" + ).hidden = true; + document.querySelector( + "#pbg-filter-by-status .gridjs-footer" + ).hidden = true; } await updateDataByYear(yearPicker.value); yearPicker.addEventListener("change", async function () { - console.log("event change dropdown") + console.log("event change dropdown"); await updateDataByYear(yearPicker.value); }); - }); async function getDataSettings(string_key) { try { const response = await fetch( - `${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`, + `${GlobalConfig.apiHost}/api/data-settings?search=${string_key}`, { credentials: "include", headers: { @@ -224,7 +300,7 @@ async function getDataTotalPotensi(year) { Authorization: `Bearer ${ document.querySelector("meta[name='api-token']").content }`, - "Content-Type": "application/json" + "Content-Type": "application/json", }, } ); @@ -251,8 +327,7 @@ async function getDataVerification(year) { credentials: "include", headers: { Authorization: `Bearer ${ - document.querySelector("meta[name='api-token']") - .content + document.querySelector("meta[name='api-token']").content }`, "Content-Type": "application/json", }, @@ -263,26 +338,25 @@ async function getDataVerification(year) { console.error("Network response was not ok", response); } - const data = await response.json() + const data = await response.json(); return { totalData: data.data.total, }; } catch (error) { console.error("Error fetching chart data:", error); - return 0 + return 0; } } async function getDataNonVerification(year) { try { - const response = await fetch ( + const response = await fetch( `${GlobalConfig.apiHost}/api/non-verification-documents?year=${year}`, { credentials: "include", headers: { Authorization: `Bearer ${ - document.querySelector("meta[name='api-token']") - .content + document.querySelector("meta[name='api-token']").content }`, "Content-Type": "application/json", }, @@ -297,7 +371,7 @@ async function getDataNonVerification(year) { return { countData: data.data.count, totalData: data.data.total, - } + }; } catch (error) { console.error("Error fetching chart data:", error); return 0; @@ -312,8 +386,7 @@ async function getDataBusiness(year) { credentials: "include", headers: { Authorization: `Bearer ${ - document.querySelector("meta[name='api-token']") - .content + document.querySelector("meta[name='api-token']").content }`, "Content-Type": "application/json", }, @@ -343,8 +416,7 @@ async function getDataNonBusiness(year) { credentials: "include", headers: { Authorization: `Bearer ${ - document.querySelector("meta[name='api-token']") - .content + document.querySelector("meta[name='api-token']").content }`, "Content-Type": "application/json", }, @@ -357,8 +429,8 @@ async function getDataNonBusiness(year) { const data = await response.json(); return { countData: data.data.count, - totalData: data.data.total - } + totalData: data.data.total, + }; } catch (error) { console.error("Error fetching chart data:", error); return 0; @@ -373,8 +445,7 @@ async function getAllLocation() { credentials: "include", headers: { Authorization: `Bearer ${ - document.querySelector("meta[name='api-token']") - .content + document.querySelector("meta[name='api-token']").content }`, "Content-Type": "application/json", }, @@ -386,7 +457,7 @@ async function getAllLocation() { const data = await response.json(); return { dataLocation: data.data, - } + }; } catch (error) { console.error("Error fetching chart data:", error); return 0; @@ -397,38 +468,40 @@ async function initChart() { var options = { chart: { height: 180, - type: 'donut', + type: "donut", }, series: [0, 0], // Inisialisasi dengan nilai awal labels: ["Berkas Usaha", "Berkas Non Usaha"], legend: { - show: false + show: false, }, stroke: { - width: 0 + width: 0, }, plotOptions: { pie: { donut: { - size: '60%', - } - } + size: "60%", + }, + }, }, colors: ["#7e67fe", "#17c553"], dataLabels: { - enabled: false + enabled: false, }, - responsive: [{ - breakpoint: 480, - options: { - chart: { - width: 200 - } - } - }], + responsive: [ + { + breakpoint: 480, + options: { + chart: { + width: 200, + }, + }, + }, + ], fill: { - type: 'gradient' - } + type: "gradient", + }, }; chart = new ApexCharts(document.querySelector("#conversions"), options); @@ -447,7 +520,7 @@ async function updatePieChart(dataSeries, labels) { // Perbarui label jika diperlukan if (Array.isArray(labels) && labels.length === dataSeries.length) { chart.updateOptions({ - labels: labels + labels: labels, }); } } @@ -457,7 +530,7 @@ function formatCurrency(number) { return new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", - minimumFractionDigits: 0 + minimumFractionDigits: 0, }).format(number); } @@ -467,4 +540,4 @@ const pbgTaskColumns = [ "Nomor Registrasi", "Nomor Dokumen", "Alamat", -] \ No newline at end of file +];