638 lines
22 KiB
JavaScript
638 lines
22 KiB
JavaScript
import Big from "big.js";
|
|
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
|
import flatpickr from "flatpickr";
|
|
import "flatpickr/dist/flatpickr.min.css";
|
|
|
|
class BigData {
|
|
async init() {
|
|
try {
|
|
this.filterYear = new Date().getFullYear(); // Set initial year
|
|
|
|
let yearSelect = document.querySelector("#yearPicker");
|
|
let filterButton = document.querySelector("#btnFilterYear");
|
|
|
|
if (!yearSelect || !filterButton) {
|
|
console.error(
|
|
"Element #yearPicker or #btnFilterYear not found."
|
|
);
|
|
return;
|
|
}
|
|
|
|
// Set default value for input
|
|
yearSelect.value = this.filterYear;
|
|
|
|
yearSelect.addEventListener("change", () => {
|
|
this.updateYear(yearSelect.value);
|
|
});
|
|
|
|
// Handle button click
|
|
filterButton.addEventListener("click", () => {
|
|
this.updateYear(yearSelect.value);
|
|
});
|
|
|
|
console.log("init filter this year", this.filterYear);
|
|
|
|
// Load initial data
|
|
await this.updateData(this.filterYear);
|
|
} catch (error) {
|
|
console.error("Error initializing data:", error);
|
|
}
|
|
}
|
|
updateYear(value) {
|
|
let inputYear = parseInt(value, 10);
|
|
if (!isNaN(inputYear)) {
|
|
this.filterYear = inputYear;
|
|
this.updateData(this.filterYear);
|
|
} else {
|
|
console.error("Invalid year input");
|
|
}
|
|
}
|
|
async updateData(year) {
|
|
try {
|
|
this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
|
|
this.resultDataTotal = await this.getDataTotalPotensi(year);
|
|
this.dataVerification = await this.getDataVerfication(year);
|
|
this.dataNonVerification = await this.getDataNonVerfication(year);
|
|
this.dataBusiness = await this.getDataBusiness(year);
|
|
this.dataNonBusiness = await this.getDataNonBusiness(year);
|
|
this.dataTataRuang = await this.getDataSettings("TATA_RUANG");
|
|
this.dataSumRealisasiTerbit = await this.getDataSettings(
|
|
"REALISASI_TERBIT_PBG_SUM"
|
|
);
|
|
this.dataCountRealisasiTerbit = await this.getDataSettings(
|
|
"REALISASI_TERBIT_PBG_COUNT"
|
|
);
|
|
this.dataSumMenungguKlikDPMPTSP = await this.getDataSettings(
|
|
"MENUNGGU_KLIK_DPMPTSP_SUM"
|
|
);
|
|
this.dataCountMenungguKlikDPMPTSP = await this.getDataSettings(
|
|
"MENUNGGU_KLIK_DPMPTSP_COUNT"
|
|
);
|
|
this.dataSumProsesDinasTeknis = await this.getDataSettings(
|
|
"PROSES_DINAS_TEKNIS_SUM"
|
|
);
|
|
this.dataCountProsesDinasTeknis = await this.getDataSettings(
|
|
"PROSES_DINAS_TEKNIS_COUNT"
|
|
);
|
|
|
|
// total potensi
|
|
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
|
|
this.bigTotalPotensi = new Big(this.resultDataTotal.totalData ?? 0);
|
|
|
|
this.resultPercentage = 0;
|
|
if (this.bigTotalPotensi > 0 && this.bigTargetPAD > 0) {
|
|
this.resultPercentage = this.bigTotalPotensi
|
|
.div(this.bigTargetPAD)
|
|
.times(100)
|
|
.toFixed(2);
|
|
if (this.resultPercentage > 100) {
|
|
this.resultPercentage = 100;
|
|
}
|
|
}
|
|
|
|
// tata ruang
|
|
this.bigTotalTataRuang = new Big(this.dataTataRuang);
|
|
this.percentageResultTataRuang =
|
|
this.bigTotalTataRuang <= 0 || this.bigTotalPotensi <= 0
|
|
? 0
|
|
: this.bigTotalTataRuang
|
|
.div(this.bigTotalPotensi)
|
|
.times(100)
|
|
.toFixed(2);
|
|
|
|
// kekurangan potensi
|
|
this.totalKekuranganPotensi = new Big(
|
|
this.bigTargetPAD - this.bigTotalPotensi
|
|
);
|
|
|
|
this.percentageKekuranganPotensi =
|
|
this.totalKekuranganPotensi <= 0 || this.bigTargetPAD <= 0
|
|
? 0
|
|
: this.totalKekuranganPotensi
|
|
.div(this.bigTargetPAD)
|
|
.times(100)
|
|
.toFixed(2);
|
|
|
|
// non-verification documents
|
|
this.bigTotalNonVerification = new Big(
|
|
this.dataNonVerification.total
|
|
);
|
|
this.percentageResultNonVerification =
|
|
this.bigTotalNonVerification <= 0 || this.bigTotalPotensi <= 0
|
|
? 0
|
|
: this.bigTotalNonVerification
|
|
.div(this.bigTotalPotensi)
|
|
.times(100)
|
|
.toFixed(2);
|
|
|
|
// verification documents
|
|
this.bigTotalVerification = new Big(this.dataVerification.total);
|
|
this.percetageResultVerification =
|
|
this.bigTotalVerification <= 0 || this.bigTotalPotensi <= 0
|
|
? 0
|
|
: this.bigTotalVerification
|
|
.div(this.bigTargetPAD)
|
|
.times(100)
|
|
.toFixed(2);
|
|
|
|
// business documents
|
|
this.bigTotalBusiness = new Big(this.dataBusiness.total);
|
|
this.percentageResultBusiness =
|
|
this.bigTotalNonVerification <= 0 || this.bigTotalBusiness <= 0
|
|
? 0
|
|
: this.bigTotalBusiness
|
|
.div(this.bigTotalNonVerification)
|
|
.times(100)
|
|
.toFixed(2);
|
|
|
|
// non-business documents
|
|
this.bigTotalNonBusiness = new Big(this.dataNonBusiness.total);
|
|
this.percentageResultNonBusiness =
|
|
this.bigTotalNonBusiness <= 0 ||
|
|
this.bigTotalNonVerification <= 0
|
|
? 0
|
|
: this.bigTotalNonBusiness
|
|
.div(this.bigTotalNonVerification)
|
|
.times(100)
|
|
.toFixed(2);
|
|
|
|
if (!this.bigTargetPAD) {
|
|
console.error("Failed to load chart data");
|
|
return;
|
|
}
|
|
|
|
this.initChartTargetPAD();
|
|
this.initChartUsaha();
|
|
this.initChartNonUsaha();
|
|
this.initChartTotalPotensi();
|
|
this.initChartVerificationDocuments();
|
|
this.initChartNonVerificationDocuments();
|
|
this.initChartKekuranganPotensi();
|
|
this.initChartRealisasiTerbitPBG();
|
|
this.initChartMenungguKlikDPMPTSP();
|
|
this.initChartProsesDinasTeknis();
|
|
this.initChartPotensiTataRuang();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
async 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 {
|
|
countData: data.data.count,
|
|
totalData: data.data.total,
|
|
};
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async getDataVerfication(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 {
|
|
count: data.data.count,
|
|
total: data.data.total,
|
|
};
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
async getDataNonVerfication(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 {
|
|
count: data.data.count,
|
|
total: data.data.total,
|
|
};
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
async 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 {
|
|
count: data.data.count,
|
|
total: data.data.total,
|
|
};
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
async 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 {
|
|
count: data.data.count,
|
|
total: data.data.total,
|
|
};
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
async 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;
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
initChartTargetPAD() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-target-pad")
|
|
.forEach((element) => {
|
|
element.innerText = ``;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-target-pad")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.bigTargetPAD.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-target-pad")
|
|
.forEach((element) => {
|
|
element.innerText = `${100}%`;
|
|
});
|
|
}
|
|
initChartTotalPotensi() {
|
|
const countAll = this.resultDataTotal.countData ?? 0;
|
|
|
|
document
|
|
.querySelectorAll(".document-count.chart-total-potensi")
|
|
.forEach((element) => {
|
|
element.innerText = `${countAll}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-total-potensi")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.bigTotalPotensi.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-total-potensi")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.resultPercentage}%`;
|
|
});
|
|
}
|
|
initChartVerificationDocuments() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-berkas-terverifikasi")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.dataVerification.count}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-berkas-terverifikasi")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.bigTotalVerification.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-berkas-terverifikasi")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.percetageResultVerification}%`;
|
|
});
|
|
}
|
|
initChartNonVerificationDocuments() {
|
|
document
|
|
.querySelectorAll(
|
|
".document-count.chart-berkas-belum-terverifikasi"
|
|
)
|
|
.forEach((element) => {
|
|
element.innerText = `${this.dataNonVerification.count}`;
|
|
});
|
|
document
|
|
.querySelectorAll(
|
|
".document-total.chart-berkas-belum-terverifikasi"
|
|
)
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.bigTotalNonVerification.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(
|
|
".small-percentage.chart-berkas-belum-terverifikasi"
|
|
)
|
|
.forEach((element) => {
|
|
element.innerText = `${this.percentageResultNonVerification}%`;
|
|
});
|
|
}
|
|
initChartUsaha() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-business")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.dataBusiness.count}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-business")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.bigTotalBusiness.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-business")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.percentageResultBusiness}%`;
|
|
});
|
|
}
|
|
initChartNonUsaha() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-non-business")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.dataNonBusiness.count}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-non-business")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.bigTotalNonBusiness.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-non-business")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.percentageResultNonBusiness}%`;
|
|
});
|
|
}
|
|
initChartKekuranganPotensi() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-kekurangan-potensi")
|
|
.forEach((element) => {
|
|
element.innerText = ``;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-kekurangan-potensi")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.totalKekuranganPotensi.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-kekurangan-potensi")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.percentageKekuranganPotensi}%`;
|
|
});
|
|
}
|
|
initChartRealisasiTerbitPBG() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-realisasi-tebit-pbg")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.dataCountRealisasiTerbit}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-realisasi-tebit-pbg")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.dataSumRealisasiTerbit
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-realisasi-tebit-pbg")
|
|
.forEach((element) => {
|
|
element.innerText = `0.00%`;
|
|
});
|
|
}
|
|
initChartMenungguKlikDPMPTSP() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-menunggu-klik-dpmptsp")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.dataCountMenungguKlikDPMPTSP}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-menunggu-klik-dpmptsp")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.dataSumMenungguKlikDPMPTSP
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-menunggu-klik-dpmptsp")
|
|
.forEach((element) => {
|
|
element.innerText = `0.00%`;
|
|
});
|
|
}
|
|
initChartProsesDinasTeknis() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-proses-dinas-teknis")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.dataCountProsesDinasTeknis}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-proses-dinas-teknis")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.dataSumProsesDinasTeknis
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-proses-dinas-teknis")
|
|
.forEach((element) => {
|
|
element.innerText = `0.00%`;
|
|
});
|
|
}
|
|
initChartPotensiTataRuang() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-potensi-tata-ruang")
|
|
.forEach((element) => {
|
|
element.innerText = "";
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-potensi-tata-ruang")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.bigTotalTataRuang.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-potensi-tata-ruang")
|
|
.forEach((element) => {
|
|
element.innerText = `${this.percentageResultTataRuang}%`;
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async function (e) {
|
|
await new BigData().init();
|
|
});
|
|
|
|
// function resizeDashboard() {
|
|
// //Target Width
|
|
// let targetElement = document.getElementById("dashboard-fixed-wrapper");
|
|
// let targetWidth = targetElement.offsetWidth;
|
|
// //console.log("TARGET ",targetWidth);
|
|
|
|
// //Real Object Width
|
|
// let dashboardElement = document.getElementById("dashboard-fixed-container");
|
|
// let dashboardWidth = 1110; //dashboardElement.offsetWidth;
|
|
// //console.log("CURRENT ",dashboardWidth);
|
|
|
|
// if (targetWidth > dashboardWidth) {
|
|
// targetWidth = dashboardWidth;
|
|
// }
|
|
|
|
// dashboardElement.style.transformOrigin = "left top";
|
|
// dashboardElement.style.transition = "transform 0.2s ease-in-out";
|
|
// dashboardElement.style.transform =
|
|
// "scale(" + (targetWidth / dashboardWidth).toFixed(2) + ")";
|
|
// //console.log("SCALE ", (targetWidth/dashboardWidth).toFixed(2));
|
|
// }
|
|
|
|
// window.addEventListener("load", function () {
|
|
// resizeDashboard();
|
|
// });
|
|
|
|
// window.addEventListener("resize", function () {
|
|
// resizeDashboard();
|
|
// });
|
|
|
|
function resizeDashboard() {
|
|
let targetElement = document.getElementById("dashboard-fixed-wrapper");
|
|
let dashboardElement = document.getElementById("dashboard-fixed-container");
|
|
|
|
let targetWidth = targetElement.offsetWidth;
|
|
let dashboardWidth = 1110;
|
|
|
|
let scaleFactor = (targetWidth / dashboardWidth).toFixed(2);
|
|
|
|
// Prevent scaling beyond 1 (100%) to avoid overflow
|
|
scaleFactor = Math.min(scaleFactor, 1);
|
|
|
|
dashboardElement.style.transformOrigin = "left top";
|
|
dashboardElement.style.transition = "transform 0.2s ease-in-out";
|
|
dashboardElement.style.transform = `scale(${scaleFactor})`;
|
|
|
|
// Ensure horizontal scrolling is allowed if necessary
|
|
document.body.style.overflowX = "auto";
|
|
}
|
|
|
|
window.addEventListener("load", resizeDashboard);
|
|
window.addEventListener("resize", resizeDashboard);
|