fix update dashboard external

This commit is contained in:
arifal
2025-08-20 00:23:30 +07:00
parent 4b28bebcc2
commit 0a9d9071e4
9 changed files with 383 additions and 180 deletions

View File

@@ -4,42 +4,89 @@ import InitDatePicker from "../../utils/InitDatePicker.js";
class DashboardPotentialInsideSystem {
async init() {
new InitDatePicker(
"#datepicker-lack-of-potential",
this.handleChangedDate.bind(this)
).init();
this.bigTotalLackPotential = 0;
this.totalPotensi = await this.getDataTotalPotensi("latest");
this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
this.allCountData = await this.getValueDashboard();
this.reklameCount = this.allCountData.total_reklame ?? 0;
this.pdamCount = this.allCountData.total_pdam ?? 0;
this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
this.tataRuangUsahaCount =
this.allCountData.total_tata_ruang_usaha ?? 0;
this.tataRuangNonUsahaCount =
this.allCountData.total_tata_ruang_non_usaha ?? 0;
try {
// Initialize date picker
new InitDatePicker(
"#datepicker-lack-of-potential",
this.handleChangedDate.bind(this)
).init();
let dataReportTourism = this.allCountData.data_report;
// Initialize default values
this.bigTotalLackPotential = 0;
this.totalVilla = dataReportTourism
.filter((item) => item.kbli_title.toLowerCase() === "vila")
.reduce((sum, item) => sum + item.total_records, 0);
this.totalRestoran = dataReportTourism
.filter((item) => item.kbli_title.toLowerCase() === "restoran")
.reduce((sum, item) => sum + item.total_records, 0);
this.totalPariwisata = dataReportTourism.reduce(
(sum, item) => sum + item.total_records,
0
);
// Fetch data with error handling
this.totalPotensi = (await this.getDataTotalPotensi("latest")) || {
total: 0,
};
this.totalTargetPAD =
(await this.getDataSettings("TARGET_PAD")) || 0;
this.allCountData = (await this.getValueDashboard()) || {};
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
this.initChartKekuranganPotensi();
this.initDataValueDashboard();
// Set counts with safe fallbacks
this.pdamCount = this.allCountData.total_pdam ?? 0;
this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
this.pajakReklameCount = this.allCountData.data_pajak_reklame ?? 0;
this.surveyLapanganCount = this.allCountData.total_reklame ?? 0;
this.reklameCount =
this.pajakReklameCount + this.surveyLapanganCount;
this.pajakRestoranCount =
this.allCountData.data_pajak_restoran ?? 0;
this.pajakHiburanCount = this.allCountData.data_pajak_hiburan ?? 0;
this.pajakHotelCount = this.allCountData.data_pajak_hotel ?? 0;
this.pajakParkirCount = this.allCountData.data_pajak_parkir ?? 0;
this.tataRuangUsahaCount =
this.allCountData.total_tata_ruang_usaha ?? 0;
this.tataRuangNonUsahaCount =
this.allCountData.total_tata_ruang_non_usaha ?? 0;
// Handle tourism data safely
let dataReportTourism = this.allCountData.data_report || [];
this.totalVilla = dataReportTourism
.filter(
(item) =>
item.kbli_title &&
item.kbli_title.toLowerCase() === "vila"
)
.reduce((sum, item) => sum + (item.total_records || 0), 0);
this.totalRestoran = dataReportTourism
.filter(
(item) =>
item.kbli_title &&
item.kbli_title.toLowerCase() === "restoran"
)
.reduce((sum, item) => sum + (item.total_records || 0), 0);
this.totalPariwisata = dataReportTourism.reduce(
(sum, item) => sum + (item.total_records || 0),
0
);
// Calculate big numbers
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
// Initialize charts and data
this.initChartKekuranganPotensi();
this.initDataValueDashboard();
} catch (error) {
console.error("Error initializing dashboard:", error);
// Set safe fallback values
this.reklameCount = 0;
this.pdamCount = 0;
this.tataRuangCount = 0;
this.tataRuangUsahaCount = 0;
this.tataRuangNonUsahaCount = 0;
this.totalVilla = 0;
this.totalRestoran = 0;
this.totalPariwisata = 0;
this.bigTotalLackPotential = new Big(0);
// Still try to initialize the dashboard with safe values
this.initDataValueDashboard();
}
}
async handleChangedDate(filterDate) {
const totalPotensi = await this.getDataTotalPotensi(filterDate);
@@ -53,7 +100,7 @@ class DashboardPotentialInsideSystem {
async getDataTotalPotensi(filterDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}&type=leader`,
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}&type=simbg`,
{
credentials: "include",
headers: {
@@ -134,40 +181,71 @@ class DashboardPotentialInsideSystem {
}
}
initChartKekuranganPotensi() {
document
.querySelectorAll(".document-count.chart-lack-of-potential")
.forEach((element) => {
// Helper function to safely update elements with class selector
const safeUpdateElements = (selector, callback) => {
try {
const elements = document.querySelectorAll(selector);
if (elements.length > 0) {
elements.forEach(callback);
} else {
console.warn(
`No elements found with selector '${selector}'`
);
}
} catch (error) {
console.error(
`Error updating elements with selector '${selector}':`,
error
);
}
};
safeUpdateElements(
".document-count.chart-lack-of-potential",
(element) => {
element.innerText = ``;
});
document
.querySelectorAll(".document-total.chart-lack-of-potential")
.forEach((element) => {
}
);
safeUpdateElements(
".document-total.chart-lack-of-potential",
(element) => {
element.innerText = `Rp.${addThousandSeparators(
this.bigTotalLackPotential.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-lack-of-potential")
.forEach((element) => {
}
);
safeUpdateElements(
".small-percentage.chart-lack-of-potential",
(element) => {
element.innerText = ``;
});
}
);
}
initDataValueDashboard() {
document.getElementById("reklame-count").innerText = this.reklameCount;
document.getElementById("pdam-count").innerText = this.pdamCount;
document.getElementById("pbb-bangunan-count").innerText =
this.tataRuangCount;
document.getElementById("tata-ruang-count").innerText =
this.tataRuangCount;
document.getElementById("tata-ruang-usaha-count").innerText =
this.tataRuangUsahaCount;
document.getElementById("tata-ruang-non-usaha-count").innerText =
this.tataRuangNonUsahaCount;
document.getElementById("restoran-count").innerText =
this.totalRestoran;
document.getElementById("villa-count").innerText = this.totalVilla;
document.getElementById("pariwisata-count").innerText =
this.totalPariwisata;
// Helper function to safely set element text
const safeSetText = (elementId, value) => {
const element = document.getElementById(elementId);
if (element) {
element.innerText = value;
} else {
console.warn(`Element with id '${elementId}' not found`);
}
};
safeSetText("reklame-count", this.reklameCount);
safeSetText("survey-lapangan-count", this.surveyLapanganCount);
safeSetText("pajak-reklame-count", this.pajakReklameCount);
safeSetText("restoran-count", this.pajakRestoranCount);
safeSetText("hiburan-count", this.pajakHiburanCount);
safeSetText("hotel-count", this.pajakHotelCount);
safeSetText("parkir-count", this.pajakParkirCount);
safeSetText("pdam-count", this.pdamCount);
safeSetText("tata-ruang-count", this.tataRuangCount);
safeSetText("tata-ruang-usaha-count", this.tataRuangUsahaCount);
safeSetText("tata-ruang-non-usaha-count", this.tataRuangNonUsahaCount);
safeSetText("pariwisata-count", this.totalPariwisata);
}
}
document.addEventListener("DOMContentLoaded", async function (e) {
@@ -187,6 +265,12 @@ function resizeDashboard() {
"lack-of-potential-fixed-container"
);
// Check if required elements exist
if (!targetElement || !dashboardElement) {
console.warn("Required elements for dashboard resize not found");
return;
}
let targetWidth = targetElement.offsetWidth;
let dashboardWidth = 1400;
@@ -200,7 +284,9 @@ function resizeDashboard() {
dashboardElement.style.transform = `scale(${scaleFactor})`;
// Ensure horizontal scrolling is allowed if necessary
document.body.style.overflowX = "auto";
if (document.body) {
document.body.style.overflowX = "auto";
}
}
window.addEventListener("load", resizeDashboard);

View File

@@ -21,7 +21,7 @@ class DashboardPotentialOutsideSystem {
async getBigDataResume(filterDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}&type=leader`,
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}&type=simbg`,
{
credentials: "include",
headers: {