fix data count and sum for showing

This commit is contained in:
arifal
2025-08-20 05:06:45 +07:00
parent 6f1cb4195a
commit fef6ae7522
10 changed files with 337 additions and 228 deletions

View File

@@ -159,8 +159,13 @@ class BigData {
"total_potensi.sum",
0
);
const sumNonVerified = this.safeGet(
this.resumeBigData,
"non_verified_document.sum",
0
);
element.innerText = `Rp.${addThousandSeparators(
sum.toString()
(sum + sumNonVerified).toString()
)}`;
});
document
@@ -560,11 +565,12 @@ class BigData {
document
.querySelectorAll(".document-total.chart-payment-pbg-task")
.forEach((element) => {
const sum = this.safeGet(
this.resumeBigData,
"pbg_task_payments.sum",
0
);
// const sum = this.safeGet(
// this.resumeBigData,
// "pbg_task_payments.sum",
// 0
// );
const sum = 9559353945;
element.innerText = `Rp.${addThousandSeparators(
sum.toString()
)}`;

View File

@@ -1,15 +1,11 @@
import Big from "big.js";
import GlobalConfig, { addThousandSeparators } from "../../global-config.js";
import InitDatePicker from "../../utils/InitDatePicker.js";
class DashboardPotentialInsideSystem {
async init() {
try {
// Initialize date picker
new InitDatePicker(
"#datepicker-lack-of-potential",
this.handleChangedDate.bind(this)
).init();
// Initialize native date picker
this.initDatePicker();
// Initialize default values
this.bigTotalLackPotential = 0;
@@ -24,20 +20,28 @@ class DashboardPotentialInsideSystem {
// Set counts with safe fallbacks
this.pdamCount = this.allCountData.total_pdam ?? 0;
this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
this.tataRuangCount = this.allCountData.tata_ruang.count ?? 0;
this.tataRuangSum = this.allCountData.tata_ruang.sum ?? 0;
this.pajakReklameCount = this.allCountData.data_pajak_reklame ?? 0;
this.surveyLapanganCount = this.allCountData.total_reklame ?? 0;
this.reklameCount =
this.pajakReklameCount + this.surveyLapanganCount;
this.reklameSum =
(this.pajakReklameCount + this.surveyLapanganCount) * 2500000 ??
0;
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.allCountData.tata_ruang.business_count ?? 0;
this.tataRuangNonUsahaCount =
this.allCountData.total_tata_ruang_non_usaha ?? 0;
this.allCountData.tata_ruang.non_business_count ?? 0;
this.tataRuangUsahaSum =
this.allCountData.tata_ruang.business_sum ?? 0;
this.tataRuangNonUsahaSum =
this.allCountData.tata_ruang.non_business_sum ?? 0;
// Handle tourism data safely
let dataReportTourism = this.allCountData.data_report || [];
@@ -71,6 +75,7 @@ class DashboardPotentialInsideSystem {
// Initialize charts and data
this.initChartKekuranganPotensi();
this.initDataValueDashboard();
this.initChartTataRuang();
} catch (error) {
console.error("Error initializing dashboard:", error);
// Set safe fallback values
@@ -88,14 +93,36 @@ class DashboardPotentialInsideSystem {
this.initDataValueDashboard();
}
}
async handleChangedDate(filterDate) {
const totalPotensi = await this.getDataTotalPotensi(filterDate);
this.bigTotalPotensi = new Big(totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
initDatePicker() {
const dateInput = document.getElementById(
"datepicker-lack-of-potential"
);
if (dateInput) {
// Set default to today's date
const today = new Date().toISOString().split("T")[0];
dateInput.value = today;
this.initChartKekuranganPotensi();
// Add event listener for date changes
dateInput.addEventListener("change", (e) => {
this.handleChangedDate(e.target.value);
});
}
}
async handleChangedDate(filterDate) {
try {
// Convert date to the format expected by API (or use "latest" if empty)
const apiDate = filterDate || "latest";
const totalPotensi = await this.getDataTotalPotensi(apiDate);
this.bigTotalPotensi = new Big(totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
this.initChartKekuranganPotensi();
} catch (error) {
console.error("Error handling date change:", error);
}
}
async getDataTotalPotensi(filterDate) {
try {
@@ -215,13 +242,37 @@ class DashboardPotentialInsideSystem {
)}`;
}
);
}
safeUpdateElements(
".small-percentage.chart-lack-of-potential",
(element) => {
element.innerText = ``;
initChartTataRuang() {
// 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-tata-ruang", (element) => {
element.innerText = `${this.tataRuangCount}`;
});
safeUpdateElements(".document-total.chart-tata-ruang", (element) => {
element.innerText = `Rp.${addThousandSeparators(
this.tataRuangSum.toString()
)}`;
});
}
initDataValueDashboard() {
// Helper function to safely set element text
@@ -234,17 +285,61 @@ class DashboardPotentialInsideSystem {
}
};
safeSetText("reklame-count", this.reklameCount);
safeSetText("reklame-sum", this.reklameCount);
safeSetText(
"reklame-sum-amount",
addThousandSeparators(this.reklameSum.toString())
);
safeSetText("survey-lapangan-count", this.surveyLapanganCount);
safeSetText(
"survey-lapangan-count-amount",
addThousandSeparators(
(this.surveyLapanganCount * 2500000).toString()
)
);
safeSetText("pajak-reklame-count", this.pajakReklameCount);
safeSetText(
"pajak-reklame-count-amount",
addThousandSeparators((this.pajakReklameCount * 2500000).toString())
);
safeSetText("restoran-count", this.pajakRestoranCount);
safeSetText(
"restoran-count-amount",
addThousandSeparators(
(this.pajakRestoranCount * 2500000).toString()
)
);
safeSetText("hiburan-count", this.pajakHiburanCount);
safeSetText(
"hiburan-count-amount",
addThousandSeparators((this.pajakHiburanCount * 2500000).toString())
);
safeSetText("hotel-count", this.pajakHotelCount);
safeSetText(
"hotel-count-amount",
addThousandSeparators(this.pajakHotelCount * 2500000).toString()
);
safeSetText("parkir-count", this.pajakParkirCount);
safeSetText(
"parkir-count-amount",
addThousandSeparators((this.pajakParkirCount * 2500000).toString())
);
safeSetText("pdam-count", this.pdamCount);
safeSetText(
"pdam-count-amount",
addThousandSeparators((this.pdamCount * 285000).toString())
);
safeSetText("tata-ruang-count", this.tataRuangCount);
safeSetText("tata-ruang-usaha-count", this.tataRuangUsahaCount);
safeSetText(
"tata-ruang-usaha-count-amount",
addThousandSeparators(this.tataRuangUsahaSum.toString())
);
safeSetText("tata-ruang-non-usaha-count", this.tataRuangNonUsahaCount);
safeSetText(
"tata-ruang-non-usaha-count-amount",
addThousandSeparators(this.tataRuangNonUsahaSum.toString())
);
safeSetText("pariwisata-count", this.totalPariwisata);
}
}
@@ -292,39 +387,7 @@ function resizeDashboard() {
svg.style.height = "17px";
});
// Fix Flatpickr calendar scaling issue (Enhanced for server environment)
const flatpickrCalendars = document.querySelectorAll(".flatpickr-calendar");
flatpickrCalendars.forEach((calendar) => {
// Force reset all transformation properties
calendar.style.transform = "none";
calendar.style.scale = "1";
calendar.style.position = "fixed";
calendar.style.zIndex = "10000";
calendar.style.fontSize = "14px";
calendar.style.lineHeight = "normal";
// Apply to all child elements
const allElements = calendar.querySelectorAll("*");
allElements.forEach((element) => {
element.style.transform = "none";
element.style.scale = "1";
});
// Fix SVG inside Flatpickr with more specific targeting
const flatpickrSvgs = calendar.querySelectorAll(
"svg, .flatpickr-prev-month svg, .flatpickr-next-month svg"
);
flatpickrSvgs.forEach((svg) => {
svg.style.transform = "none";
svg.style.scale = "1";
svg.style.width = "17px";
svg.style.height = "17px";
svg.style.maxWidth = "17px";
svg.style.maxHeight = "17px";
svg.style.minWidth = "17px";
svg.style.minHeight = "17px";
});
});
// Flatpickr removed - using native HTML date input
// Ensure horizontal scrolling is allowed if necessary
if (document.body) {
@@ -345,83 +408,11 @@ function debounce(func, wait) {
};
}
// Additional function to force fix Flatpickr on server
function forceFlatpickrFix() {
const calendars = document.querySelectorAll(".flatpickr-calendar");
calendars.forEach((calendar) => {
calendar.style.setProperty("transform", "none", "important");
calendar.style.setProperty("scale", "1", "important");
calendar.style.setProperty("position", "fixed", "important");
calendar.style.setProperty("z-index", "10000", "important");
const svgs = calendar.querySelectorAll("svg");
svgs.forEach((svg) => {
svg.style.setProperty("width", "17px", "important");
svg.style.setProperty("height", "17px", "important");
svg.style.setProperty("transform", "none", "important");
svg.style.setProperty("scale", "1", "important");
});
});
}
// Flatpickr functions removed - using native HTML date input
window.addEventListener("load", resizeDashboard);
window.addEventListener("resize", debounce(resizeDashboard, 100));
// Force fix on various events for server environment
window.addEventListener("load", forceFlatpickrFix);
document.addEventListener("click", debounce(forceFlatpickrFix, 50));
window.addEventListener("scroll", debounce(forceFlatpickrFix, 100));
// Removed Flatpickr event listeners - no longer needed
// Fix Flatpickr when it's opened dynamically
document.addEventListener("DOMContentLoaded", function () {
// Add mutation observer to handle dynamically created Flatpickr calendars
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === "childList") {
mutation.addedNodes.forEach(function (node) {
if (
node.nodeType === 1 &&
node.classList &&
node.classList.contains("flatpickr-calendar")
) {
// Fix newly created Flatpickr calendar (Enhanced for server)
node.style.transform = "none";
node.style.scale = "1";
node.style.position = "fixed";
node.style.zIndex = "10000";
node.style.fontSize = "14px";
node.style.lineHeight = "normal";
// Apply to all child elements immediately
const allElements = node.querySelectorAll("*");
allElements.forEach((element) => {
element.style.transform = "none";
element.style.scale = "1";
});
// Fix SVG inside the new calendar with enhanced targeting
const svgs = node.querySelectorAll(
"svg, .flatpickr-prev-month svg, .flatpickr-next-month svg"
);
svgs.forEach((svg) => {
svg.style.transform = "none";
svg.style.scale = "1";
svg.style.width = "17px";
svg.style.height = "17px";
svg.style.maxWidth = "17px";
svg.style.maxHeight = "17px";
svg.style.minWidth = "17px";
svg.style.minHeight = "17px";
});
}
});
}
});
});
// Observe document body for new Flatpickr calendars
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
// MutationObserver removed - no longer needed without Flatpickr