add filter date for dashboard

This commit is contained in:
arifal
2025-02-24 19:00:09 +07:00
parent e743b82087
commit bb4ab5c769
8 changed files with 272 additions and 159 deletions

View File

@@ -1,55 +1,30 @@
import Big from "big.js";
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";
import InitDatePicker from "../utils/InitDatePicker.js";
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);
new InitDatePicker(
"#datepicker-dashboard-bigdata",
this.handleChangeDate.bind(this)
).init();
// Load initial data
await this.updateData(this.filterYear);
this.updateData("latest");
} 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");
}
handleChangeDate(filterDate) {
if (!filterDate) return;
this.updateData(filterDate);
}
async updateData(year) {
async updateData(filterDate) {
try {
this.resumeBigData = await this.getBigDataResume();
console.log("Filtering data for date:", filterDate);
this.resumeBigData = await this.getBigDataResume(filterDate);
// this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
// this.resultDataTotal = await this.getDataTotalPotensi(year);
// this.dataVerification = await this.getDataVerfication(year);
@@ -178,10 +153,10 @@ class BigData {
}
}
async getBigDataResume() {
async getBigDataResume(filterByDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/bigdata-resume`,
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterByDate}`,
{
credentials: "include",
headers: {
@@ -199,8 +174,6 @@ class BigData {
}
const data = await response.json();
console.log("big data resume", JSON.stringify(data));
console.log("big data resume", data);
return data;
} catch (error) {
console.error("Error fetching chart data:", error);

View File

@@ -1,10 +1,15 @@
import Big from "big.js";
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
import InitDatePicker from "../utils/InitDatePicker.js";
class LackOfPotential {
async init() {
new InitDatePicker(
"#datepicker-lack-of-potential",
this.handleChangedDate.bind(this)
).init();
this.bigTotalLackPotential = 0;
this.totalPotensi = await this.getDataTotalPotensi(2025);
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;
@@ -12,15 +17,26 @@ class LackOfPotential {
this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
this.bigTotalPotensi = new Big(this.totalPotensi.totalData ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD - this.bigTotalPotensi;
this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
this.initChartKekuranganPotensi();
this.initDataValueDashboard();
}
async getDataTotalPotensi(year) {
async handleChangedDate(filterDate) {
const totalPotensi = await this.getDataTotalPotensi(filterDate);
this.bigTotalPotensi = new Big(totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
this.initChartKekuranganPotensi();
}
async getDataTotalPotensi(filterDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}`,
{
credentials: "include",
headers: {
@@ -39,8 +55,7 @@ class LackOfPotential {
const data = await response.json();
return {
countData: data.data.count,
totalData: data.data.total,
total: data.total_potensi.sum,
};
} catch (error) {
console.error("Error fetching chart data:", error);
@@ -50,7 +65,7 @@ class LackOfPotential {
async getDataSettings(string_key) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
`${GlobalConfig.apiHost}/api/data-settings?search=${string_key}`,
{
credentials: "include",
headers: {