add filter date for dashboard
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user