fix change api route data settings

This commit is contained in:
arifal
2025-02-25 10:41:59 +07:00
parent 93f0ac5ef7
commit 9e55ea0dbb

View File

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