fix data count and sum for showing
This commit is contained in:
@@ -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()
|
||||
)}`;
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user