Merge branch 'feature/dashboard-pbg' into fix/dashboard-resume
This commit is contained in:
arifal
470
resources/js/dashboards/pbg.js
Normal file
470
resources/js/dashboards/pbg.js
Normal file
@@ -0,0 +1,470 @@
|
||||
import Big from "big.js";
|
||||
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
||||
import ApexCharts from "apexcharts";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import GeneralTable from "../table-generator.js";
|
||||
|
||||
var chart;
|
||||
document.addEventListener("DOMContentLoaded", async function () {
|
||||
await initChart();
|
||||
const yearPicker = document.getElementById("yearPicker");
|
||||
|
||||
async function updateDataByYear(selectedYear) {
|
||||
// Target PAD Element
|
||||
const targetPadElement = document.getElementById("target-pad");
|
||||
if (!targetPadElement) return;
|
||||
const targetPadValue = await getDataSettings("TARGET_PAD");
|
||||
targetPadElement.textContent = formatCurrency(targetPadValue);
|
||||
|
||||
// Total Potensi Berkas
|
||||
const totalPotensiBerkas = document.getElementById("total-potensi-berkas");
|
||||
if (!totalPotensiBerkas) return;
|
||||
const totalPotensiBerkasValue = await getDataTotalPotensi(selectedYear);
|
||||
totalPotensiBerkas.textContent = formatCurrency(totalPotensiBerkasValue.totalData);
|
||||
|
||||
// Total Berkas Terverifikasi
|
||||
const totalBerkasTerverifikasi = document.getElementById("total-berkas-terverifikasi");
|
||||
if (!totalBerkasTerverifikasi) return;
|
||||
const totalBerkasTerverifikasiValue = await getDataVerification(selectedYear);
|
||||
totalBerkasTerverifikasi.textContent = formatCurrency(totalBerkasTerverifikasiValue.totalData);
|
||||
|
||||
// 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)
|
||||
|
||||
// Total Potensi PBG dari tata ruang
|
||||
const totalPotensiPBGTataRuang = document.getElementById("total-potensi-pbd-tata-ruang");
|
||||
if (!totalPotensiPBGTataRuang) return;
|
||||
const totalPotensiPBGTataRuangValue = await getDataSettings("TATA_RUANG");
|
||||
totalPotensiPBGTataRuang.textContent = formatCurrency(totalPotensiPBGTataRuangValue);
|
||||
|
||||
// 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);
|
||||
|
||||
// Total Berkas Usaha
|
||||
const totalBerkasUsahaValue = await getDataBusiness(selectedYear);
|
||||
const totalBerkasUsahaCount = totalBerkasUsahaValue.countData;
|
||||
const totalBerkasUsahaTotalData = totalBerkasUsahaValue.totalData;
|
||||
|
||||
// Total Berkas Non Usaha
|
||||
const totalBerkasNonUsahaValue = await getDataNonBusiness(selectedYear);
|
||||
const totalBerkasNonUsahaCount = totalBerkasNonUsahaValue.countData;
|
||||
const totalBerkasNonUsahaTotalData = totalBerkasNonUsahaValue.totalData;
|
||||
|
||||
// Pie Chart Section
|
||||
let persenUsaha = totalBerkasBelumTerverifikasiCount > 0
|
||||
? ((totalBerkasUsahaCount / totalBerkasBelumTerverifikasiCount) * 100).toFixed(2)
|
||||
: "0";
|
||||
|
||||
let persenNonUsaha = totalBerkasBelumTerverifikasiCount > 0
|
||||
? ((totalBerkasNonUsahaCount / totalBerkasBelumTerverifikasiCount) * 100).toFixed(2)
|
||||
: "0";
|
||||
|
||||
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='usaha']").textContent = formatCurrency(totalBerkasUsahaTotalData).toLocaleString();
|
||||
document.querySelector("td[data-category='usaha-percentage']").textContent = persenUsaha + "%";
|
||||
|
||||
updatePieChart(dataSeriesPieChart, labelsPieChart);
|
||||
|
||||
// Load all Tourism location
|
||||
const allLocation = await getAllLocation();
|
||||
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));
|
||||
});
|
||||
|
||||
// Ubah string ke float
|
||||
validLocations = validLocations.map(loc => ({
|
||||
name: loc.project_name,
|
||||
longitude: parseFloat(loc.longitude),
|
||||
latitude: parseFloat(loc.latitude)
|
||||
}));
|
||||
|
||||
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'
|
||||
}).addTo(map);
|
||||
|
||||
// Tambahkan marker ke peta
|
||||
validLocations.forEach(function(loc) {
|
||||
L.marker([loc.latitude, loc.longitude])
|
||||
.addTo(map)
|
||||
.bindPopup(`<b>${loc.name}</b>`) // Popup saat diklik
|
||||
.bindTooltip(loc.name, { permanent: false, direction: "top" }); // Tooltip saat di-hover
|
||||
});
|
||||
|
||||
// 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);
|
||||
|
||||
// Menunggu Klik DPMPTSP
|
||||
const totalMenungguKlikDpmptsp = document.getElementById("waiting-click-dpmptsp");
|
||||
if (!totalMenungguKlikDpmptsp) return;
|
||||
const totalMenungguKlikDpmptspValue = await getDataSettings("MENUNGGU_KLIK_DPMPTSP_SUM");
|
||||
totalMenungguKlikDpmptsp.textContent = formatCurrency(totalMenungguKlikDpmptspValue);
|
||||
|
||||
// Proses Dinas Teknis
|
||||
const totalProsesDinasTeknis = document.getElementById("processing-technical-services");
|
||||
if (!totalProsesDinasTeknis) return;
|
||||
const totalProsesDinasTeknisValue = await getDataSettings("PROSES_DINAS_TEKNIS_SUM");
|
||||
totalProsesDinasTeknis.textContent = formatCurrency(totalProsesDinasTeknisValue);
|
||||
|
||||
// Load Tabel Baru di Update
|
||||
const tableLastUpdated = new GeneralTable(
|
||||
"pbg-filter-by-updated-at",
|
||||
`${GlobalConfig.apiHost}/api/api-pbg-task?isLastUpdated=true`,
|
||||
`${GlobalConfig.apiHost}`,
|
||||
pbgTaskColumns
|
||||
);
|
||||
|
||||
tableLastUpdated.processData = function (data) {
|
||||
console.log("Response Data:", data);
|
||||
return data.data.map((item) => {
|
||||
return [
|
||||
item.no,
|
||||
item.name,
|
||||
item.registration_number,
|
||||
item.document_number,
|
||||
item.address,
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
tableLastUpdated.init();
|
||||
|
||||
// Load Tabel Status SK Terbit
|
||||
const tableSKPBGTerbit = new GeneralTable(
|
||||
"pbg-filter-by-status",
|
||||
`${GlobalConfig.apiHost}/api/api-pbg-task?isLastUpdated=false`,
|
||||
`${GlobalConfig.apiHost}`,
|
||||
pbgTaskColumns
|
||||
);
|
||||
|
||||
tableSKPBGTerbit.processData = function (data) {
|
||||
console.log("Response Data:", data);
|
||||
return data.data.map((item) => {
|
||||
return [
|
||||
item.no,
|
||||
item.name,
|
||||
item.registration_number,
|
||||
item.document_number,
|
||||
item.address,
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
await updateDataByYear(yearPicker.value);
|
||||
|
||||
yearPicker.addEventListener("change", async function () {
|
||||
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}`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']").content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.data?.[0]?.value ?? 0; // Pastikan tidak error jika data kosong
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataTotalPotensi(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']").content
|
||||
}`,
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
totalData: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataVerification(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/verification-documents?year=${year}`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return {
|
||||
totalData: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataNonVerification(year) {
|
||||
try {
|
||||
const response = await fetch (
|
||||
`${GlobalConfig.apiHost}/api/non-verification-documents?year=${year}`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
countData: data.data.count,
|
||||
totalData: data.data.total,
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataBusiness(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/business-documents?year=${year}`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
countData: data.data.count,
|
||||
totalData: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataNonBusiness(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/non-business-documents?year=${year}`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
const data = await response.json();
|
||||
return {
|
||||
countData: data.data.count,
|
||||
totalData: data.data.total
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getAllLocation() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/get-all-location`,
|
||||
{
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector("meta[name='api-token']")
|
||||
.content
|
||||
}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
if (!response.ok) {
|
||||
console.error("Network response was not ok", response);
|
||||
}
|
||||
const data = await response.json();
|
||||
return {
|
||||
dataLocation: data.data,
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function initChart() {
|
||||
var options = {
|
||||
chart: {
|
||||
height: 180,
|
||||
type: 'donut',
|
||||
},
|
||||
series: [0, 0], // Inisialisasi dengan nilai awal
|
||||
labels: ["Berkas Usaha", "Berkas Non Usaha"],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '60%',
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ["#7e67fe", "#17c553"],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200
|
||||
}
|
||||
}
|
||||
}],
|
||||
fill: {
|
||||
type: 'gradient'
|
||||
}
|
||||
};
|
||||
|
||||
chart = new ApexCharts(document.querySelector("#conversions"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
async function updatePieChart(dataSeries, labels) {
|
||||
if (!Array.isArray(dataSeries) || dataSeries.length === 0) {
|
||||
console.error("Data series tidak valid:", dataSeries);
|
||||
return;
|
||||
}
|
||||
|
||||
// Perbarui data series chart
|
||||
chart.updateSeries(dataSeries);
|
||||
|
||||
// Perbarui label jika diperlukan
|
||||
if (Array.isArray(labels) && labels.length === dataSeries.length) {
|
||||
chart.updateOptions({
|
||||
labels: labels
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Fungsi untuk format angka ke Rupiah
|
||||
function formatCurrency(number) {
|
||||
return new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
minimumFractionDigits: 0
|
||||
}).format(number);
|
||||
}
|
||||
|
||||
const pbgTaskColumns = [
|
||||
"No",
|
||||
"Name",
|
||||
"Nomor Registrasi",
|
||||
"Nomor Dokumen",
|
||||
"Alamat",
|
||||
]
|
||||
Reference in New Issue
Block a user