120 lines
4.1 KiB
JavaScript
120 lines
4.1 KiB
JavaScript
import Big from "big.js";
|
|
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
|
|
|
class LackOfPotential {
|
|
async init() {
|
|
this.bigTotalLackPotential = 0;
|
|
this.totalPotensi = await this.getDataTotalPotensi(2025);
|
|
this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
|
|
|
|
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
|
|
this.bigTotalPotensi = new Big(this.totalPotensi.totalData ?? 0);
|
|
this.bigTotalLackPotential = this.bigTargetPAD - this.bigTotalPotensi;
|
|
this.initChartKekuranganPotensi();
|
|
}
|
|
async getDataTotalPotensi(year) {
|
|
try {
|
|
const response = await fetch(
|
|
`${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
|
|
{
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${
|
|
document.querySelector("meta[name='api-token']")
|
|
.content
|
|
}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
);
|
|
|
|
if (!response.ok) {
|
|
console.error("Network response was not ok", response);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return {
|
|
countData: data.data.count,
|
|
totalData: data.data.total,
|
|
};
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return null;
|
|
}
|
|
}
|
|
async getDataSettings(string_key) {
|
|
try {
|
|
const response = await fetch(
|
|
`${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
|
|
{
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${
|
|
document.querySelector("meta[name='api-token']")
|
|
.content
|
|
}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
);
|
|
|
|
if (!response.ok) {
|
|
console.error("Network response was not ok", response);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data.data[0].value;
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return 0;
|
|
}
|
|
}
|
|
initChartKekuranganPotensi() {
|
|
document
|
|
.querySelectorAll(".document-count.chart-lack-of-potential")
|
|
.forEach((element) => {
|
|
element.innerText = ``;
|
|
});
|
|
document
|
|
.querySelectorAll(".document-total.chart-lack-of-potential")
|
|
.forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(
|
|
this.bigTotalLackPotential.toString()
|
|
)}`;
|
|
});
|
|
document
|
|
.querySelectorAll(".small-percentage.chart-lack-of-potential")
|
|
.forEach((element) => {
|
|
element.innerText = ``;
|
|
});
|
|
}
|
|
}
|
|
document.addEventListener("DOMContentLoaded", async function (e) {
|
|
await new LackOfPotential().init();
|
|
});
|
|
|
|
function resizeDashboard() {
|
|
let targetElement = document.getElementById("lack-of-potential-wrapper");
|
|
let dashboardElement = document.getElementById(
|
|
"lack-of-potential-fixed-container"
|
|
);
|
|
|
|
let targetWidth = targetElement.offsetWidth;
|
|
let dashboardWidth = 1400;
|
|
|
|
let scaleFactor = (targetWidth / dashboardWidth).toFixed(2);
|
|
|
|
// Prevent scaling beyond 1 (100%) to avoid overflow
|
|
scaleFactor = Math.min(scaleFactor, 1);
|
|
|
|
dashboardElement.style.transformOrigin = "left top";
|
|
dashboardElement.style.transition = "transform 0.2s ease-in-out";
|
|
dashboardElement.style.transform = `scale(${scaleFactor})`;
|
|
|
|
// Ensure horizontal scrolling is allowed if necessary
|
|
document.body.style.overflowX = "auto";
|
|
}
|
|
|
|
window.addEventListener("load", resizeDashboard);
|
|
window.addEventListener("resize", resizeDashboard);
|