439 lines
16 KiB
JavaScript
439 lines
16 KiB
JavaScript
import ApexCharts from "apexcharts";
|
|
|
|
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
|
|
|
class BigData {
|
|
async init() {
|
|
try{
|
|
this.resultDataTotal = await this.getTotalAllTask();
|
|
|
|
if (!this.resultDataTotal) {
|
|
console.error("Failed to load chart data");
|
|
return;
|
|
}
|
|
|
|
this.initChartTargetPAD();
|
|
this.initChartUsaha();
|
|
this.initChartNonUsaha();
|
|
this.initChartStatus1();
|
|
this.initChartStatus2();
|
|
this.initChartStatus3();
|
|
this.initChartStatus4();
|
|
this.initChartStatus5();
|
|
this.initChartStatus6();
|
|
this.initChartStatus7();
|
|
this.initChartStatus20();
|
|
this.initChartStatus24();
|
|
}catch(e){
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
async getTotalAllTask() {
|
|
try {
|
|
const response = await fetch(`${GlobalConfig.apiHost}/api/all-task-documents`, {
|
|
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 {
|
|
seriesData: data.data.series,
|
|
countData: data.data.count,
|
|
totalData: data.data.total
|
|
};
|
|
|
|
} catch (error) {
|
|
console.error("Error fetching chart data:", error);
|
|
return null; // Mengembalikan null jika terjadi error
|
|
}
|
|
}
|
|
|
|
initChartTargetPAD() {
|
|
const total = this.resultDataTotal.totalData;
|
|
const count = this.resultDataTotal.countData;
|
|
document.querySelectorAll('.document-count.chart-all-task').forEach((element) => {
|
|
element.innerText = `${count}`;
|
|
});
|
|
document.querySelectorAll('.document-total.chart-all-task').forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(total)}`;
|
|
});
|
|
document.querySelectorAll('.small-percentage.chart-all-task').forEach((element) => {
|
|
element.innerText = `${100}%`;
|
|
});
|
|
}
|
|
initChartUsaha() {
|
|
fetch(`${GlobalConfig.apiHost}/api/business-documents`,{
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
// Pastikan this.resultDataTotal sudah ada
|
|
if (!this.resultDataTotal) {
|
|
console.error("Error: resultDataTotal is undefined");
|
|
return;
|
|
}
|
|
|
|
const totalAll = this.resultDataTotal.totalData ?? 0;
|
|
const countAll = this.resultDataTotal.countData ?? 0;
|
|
const countUsaha = data?.data?.count ?? 0;
|
|
const totalUsaha = data?.data?.total ?? 0;
|
|
|
|
// Perbaikan perhitungan persentase
|
|
let resultPercentage = 0;
|
|
if (countUsaha > 0) {
|
|
resultPercentage = (countUsaha / countAll) * 100;
|
|
if (resultPercentage > 100) {
|
|
resultPercentage = 100; // Batasi maksimum 100%
|
|
}
|
|
}
|
|
document.querySelectorAll('.document-count.chart-business').forEach((element) => {
|
|
element.innerText = `${countUsaha}`;
|
|
});
|
|
document.querySelectorAll('.document-total.chart-business').forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(totalUsaha)}`;
|
|
});
|
|
document.querySelectorAll('.small-percentage.chart-business').forEach((element) => {
|
|
element.innerText = `${resultPercentage.toFixed(2)}%`;
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartNonUsaha() {
|
|
fetch(`${GlobalConfig.apiHost}/api/non-business-documents`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
// Pastikan this.resultDataTotal sudah ada
|
|
if (!this.resultDataTotal) {
|
|
console.error("Error: resultDataTotal is undefined");
|
|
return;
|
|
}
|
|
|
|
const totalAll = this.resultDataTotal.totalData ?? 0;
|
|
const countAll = this.resultDataTotal.countData ?? 0;
|
|
const countUsaha = data?.data?.count ?? 0;
|
|
const totalUsaha = data?.data?.total ?? 0;
|
|
|
|
// Perbaikan perhitungan persentase
|
|
let resultPercentage = 0;
|
|
if (countUsaha > 0) {
|
|
resultPercentage = (countUsaha / countAll) * 100;
|
|
if (resultPercentage > 100) {
|
|
resultPercentage = 100; // Batasi maksimum 100%
|
|
}
|
|
}
|
|
document.querySelectorAll('.document-count.chart-non-business').forEach((element) => {
|
|
element.innerText = `${data.data.count}`;
|
|
});
|
|
document.querySelectorAll('.document-total.chart-non-business').forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
});
|
|
document.querySelectorAll('.small-percentage.chart-non-business').forEach((element) => {
|
|
element.innerText = `${resultPercentage.toFixed(2)}%`;
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus1(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=1`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus1"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus1"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus2(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=2`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus2"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus2"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus3(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=3`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus3"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus3"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus4(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=4`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus4"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus4"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus5(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=5`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus5"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus5"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus6(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=6`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus6"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus6"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus7(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=7`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus7"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus7"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus20(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=20`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus20"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus20"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus24(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=24`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Network response was not ok");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const seriesData = data.data.series;
|
|
// document.getElementById(
|
|
// "countStatus24"
|
|
// ).innerText = `${data.data.count} Berkas`;
|
|
// document.getElementById(
|
|
// "totalStatus24"
|
|
// ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
}
|
|
|
|
class ArrowConnectorCircles {
|
|
init(){
|
|
// Memanggil fungsi saat halaman dimuat dan ketika layar diubah ukurannya
|
|
document.addEventListener("resize", this.updateLine());
|
|
document.addEventListener("load", this.updateLine());
|
|
}
|
|
|
|
updateLine() {
|
|
const circle1 = document.getElementById("chart-all-task-1").getBoundingClientRect();
|
|
const circle2 = document.getElementById("chart-all-task-2").getBoundingClientRect();
|
|
const line = document.getElementById("connector-line");
|
|
|
|
console.log(circle1);
|
|
console.log(circle2);
|
|
|
|
line.setAttribute("x1", circle1.left + circle1.width / 2);
|
|
line.setAttribute("y1", circle1.top + circle1.height / 2);
|
|
line.setAttribute("x2", circle2.left + circle2.width / 2);
|
|
line.setAttribute("y2", circle2.top + circle2.height / 2);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async function (e) {
|
|
await new BigData().init();
|
|
// new ArrowConnectorCircles().init();
|
|
});
|