update 2025-06-02
This commit is contained in:
arifal
@@ -1,13 +1,83 @@
|
||||
import ApexCharts from "apexcharts";
|
||||
|
||||
import Big from "big.js";
|
||||
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
||||
|
||||
class BigData {
|
||||
async init() {
|
||||
try{
|
||||
this.resultDataTotal = await this.getTotalAllTask();
|
||||
try {
|
||||
this.totalTargetPAD = await this.getTargetPAD();
|
||||
this.resultDataTotal = await this.getDataTotalPotensi();
|
||||
this.dataVerification = await this.getDataVerfication();
|
||||
this.dataNonVerification = await this.getDataNonVerfication();
|
||||
this.dataBusiness = await this.getDataBusiness();
|
||||
this.dataNonBusiness = await this.getDataNonBusiness();
|
||||
|
||||
if (!this.resultDataTotal) {
|
||||
// total potensi
|
||||
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
|
||||
this.bigTotalPotensi = new Big(this.resultDataTotal.totalData ?? 0);
|
||||
|
||||
this.resultPercentage = 0;
|
||||
if (this.bigTotalPotensi > 0 && this.bigTargetPAD > 0) {
|
||||
this.resultPercentage = this.bigTotalPotensi
|
||||
.div(this.bigTargetPAD)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
if (this.resultPercentage > 100) {
|
||||
this.resultPercentage = 100;
|
||||
}
|
||||
}
|
||||
|
||||
// kekurangan potensi
|
||||
this.totalKekuranganPotensi = new Big(
|
||||
this.totalTargetPAD - this.bigTotalPotensi
|
||||
);
|
||||
this.percentageKekuranganPotensi =
|
||||
this.totalKekuranganPotensi <= 0 || this.totalTargetPAD <= 0
|
||||
? 0
|
||||
: this.totalKekuranganPotensi
|
||||
.div(this.bigTargetPAD)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
// non-verification documents
|
||||
this.bigTotalNonVerification = new Big(
|
||||
this.dataNonVerification.total
|
||||
);
|
||||
this.percentageResultNonVerification = this.bigTotalNonVerification
|
||||
.div(this.bigTotalPotensi)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
// verification documents
|
||||
this.bigTotalVerification = new Big(this.dataVerification.total);
|
||||
this.percetageResultVerification =
|
||||
this.bigTotalVerification <= 0 || this.bigTotalPotensi <= 0
|
||||
? 0
|
||||
: this.bigTotalVerification
|
||||
.div(this.bigTargetPAD)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
// business documents
|
||||
this.bigTotalBusiness = new Big(this.dataBusiness.total);
|
||||
this.percentageResultBusiness =
|
||||
this.bigTotalNonVerification <= 0
|
||||
? 0
|
||||
: this.bigTotalBusiness
|
||||
.div(this.bigTotalNonVerification)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
// non-business documents
|
||||
this.bigTotalNonBusiness = new Big(this.dataNonBusiness.total);
|
||||
this.percentageResultNonBusiness =
|
||||
this.bigTotalNonBusiness <= 0
|
||||
? 0
|
||||
: this.bigTotalNonBusiness
|
||||
.div(this.bigTotalNonVerification)
|
||||
.times(100)
|
||||
.toFixed(2);
|
||||
|
||||
if (!this.totalTargetPAD) {
|
||||
console.error("Failed to load chart data");
|
||||
return;
|
||||
}
|
||||
@@ -15,455 +85,469 @@ class BigData {
|
||||
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){
|
||||
this.initChartTotalPotensi();
|
||||
this.initChartVerificationDocuments();
|
||||
this.initChartNonVerificationDocuments();
|
||||
this.initChartKekuranganPotensi();
|
||||
this.initChartRealisasiTerbitPBG();
|
||||
this.initChartMenungguKlikDPMPTSP();
|
||||
this.initChartProsesDinasTeknis();
|
||||
this.initChartPotensiTataRuang();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async getTotalAllTask() {
|
||||
async getDataTotalPotensi() {
|
||||
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",
|
||||
},
|
||||
});
|
||||
|
||||
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
|
||||
totalData: data.data.total,
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null; // Mengembalikan null jika terjadi error
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getTargetPAD() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/api-data-settings?search=target_pad`,
|
||||
{
|
||||
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 null;
|
||||
}
|
||||
}
|
||||
|
||||
async getDataVerfication() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/verification-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 {
|
||||
count: data.data.count,
|
||||
total: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getDataNonVerfication() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/non-verification-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 {
|
||||
count: data.data.count,
|
||||
total: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getDataBusiness() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/business-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 {
|
||||
count: data.data.count,
|
||||
total: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async getDataNonBusiness() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/non-business-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 {
|
||||
count: data.data.count,
|
||||
total: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
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}%`;
|
||||
});
|
||||
let totalPad = 0;
|
||||
fetch(
|
||||
`${GlobalConfig.apiHost}/api/api-data-settings?search=target_pad`,
|
||||
{
|
||||
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) => {
|
||||
totalPad = data.data[0].value;
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-target-pad")
|
||||
.forEach((element) => {
|
||||
element.innerText = ``;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-target-pad")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
totalPad
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-target-pad")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${100}%`;
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching target_pad:", error);
|
||||
});
|
||||
}
|
||||
initChartTotalPotensi() {
|
||||
const countAll = this.resultDataTotal.countData ?? 0;
|
||||
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-total-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${countAll}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-total-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalPotensi.toString()
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-total-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.resultPercentage}%`;
|
||||
});
|
||||
}
|
||||
initChartVerificationDocuments() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-berkas-terverifikasi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.dataVerification.count}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-berkas-terverifikasi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalVerification.toString()
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-berkas-terverifikasi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percetageResultVerification}%`;
|
||||
});
|
||||
}
|
||||
initChartNonVerificationDocuments() {
|
||||
document
|
||||
.querySelectorAll(
|
||||
".document-count.chart-berkas-belum-terverifikasi"
|
||||
)
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.dataNonVerification.count}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(
|
||||
".document-total.chart-berkas-belum-terverifikasi"
|
||||
)
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalNonVerification.toString()
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(
|
||||
".small-percentage.chart-berkas-belum-terverifikasi"
|
||||
)
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percentageResultNonVerification}%`;
|
||||
});
|
||||
}
|
||||
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-count.chart-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.dataBusiness.count}`;
|
||||
});
|
||||
document.querySelectorAll('.document-total.chart-business').forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(totalUsaha)}`;
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalBusiness.toString()
|
||||
)}`;
|
||||
});
|
||||
document.querySelectorAll('.small-percentage.chart-business').forEach((element) => {
|
||||
element.innerText = `${resultPercentage.toFixed(2)}%`;
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percentageResultBusiness}%`;
|
||||
});
|
||||
})
|
||||
.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-count.chart-non-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.dataNonBusiness.count}`;
|
||||
});
|
||||
document.querySelectorAll('.document-total.chart-non-business').forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-non-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.bigTotalNonBusiness.toString()
|
||||
)}`;
|
||||
});
|
||||
document.querySelectorAll('.small-percentage.chart-non-business').forEach((element) => {
|
||||
element.innerText = `${resultPercentage.toFixed(2)}%`;
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-non-business")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percentageResultNonBusiness}%`;
|
||||
});
|
||||
})
|
||||
.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);
|
||||
});
|
||||
initChartKekuranganPotensi() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-kekurangan-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = ``;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-kekurangan-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators(
|
||||
this.totalKekuranganPotensi.toString()
|
||||
)}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-kekurangan-potensi")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${this.percentageKekuranganPotensi}%`;
|
||||
});
|
||||
}
|
||||
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);
|
||||
});
|
||||
initChartRealisasiTerbitPBG() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-realisasi-tebit-pbg")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-realisasi-tebit-pbg")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators("0.00")}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-realisasi-tebit-pbg")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0.00%`;
|
||||
});
|
||||
}
|
||||
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);
|
||||
});
|
||||
initChartMenungguKlikDPMPTSP() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-menunggu-klik-dpmptsp")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${0}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-menunggu-klik-dpmptsp")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators("0.00")}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-menunggu-klik-dpmptsp")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0.00%`;
|
||||
});
|
||||
}
|
||||
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);
|
||||
});
|
||||
initChartProsesDinasTeknis() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-proses-dinas-teknis")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${0}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-proses-dinas-teknis")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators("0.00")}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-proses-dinas-teknis")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0.00%`;
|
||||
});
|
||||
}
|
||||
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);
|
||||
initChartPotensiTataRuang() {
|
||||
document
|
||||
.querySelectorAll(".document-count.chart-potensi-tata-ruang")
|
||||
.forEach((element) => {
|
||||
element.innerText = `${0}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".document-total.chart-potensi-tata-ruang")
|
||||
.forEach((element) => {
|
||||
element.innerText = `Rp.${addThousandSeparators("0.00")}`;
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".small-percentage.chart-potensi-tata-ruang")
|
||||
.forEach((element) => {
|
||||
element.innerText = `0.00%`;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async function (e) {
|
||||
await new BigData().init();
|
||||
// new ArrowConnectorCircles().init();
|
||||
});
|
||||
|
||||
function resizeDashboard(){
|
||||
//Target Width
|
||||
let targetElement = document.getElementById("dashboard-fixed-wrapper");
|
||||
let targetWidth = targetElement.offsetWidth;
|
||||
//console.log("TARGET ",targetWidth);
|
||||
function resizeDashboard() {
|
||||
//Target Width
|
||||
let targetElement = document.getElementById("dashboard-fixed-wrapper");
|
||||
let targetWidth = targetElement.offsetWidth;
|
||||
//console.log("TARGET ",targetWidth);
|
||||
|
||||
//Real Object Width
|
||||
let dashboardElement = document.getElementById("dashboard-fixed-container");
|
||||
let dashboardWidth = 1110; //dashboardElement.offsetWidth;
|
||||
//console.log("CURRENT ",dashboardWidth);
|
||||
//Real Object Width
|
||||
let dashboardElement = document.getElementById("dashboard-fixed-container");
|
||||
let dashboardWidth = 1110; //dashboardElement.offsetWidth;
|
||||
//console.log("CURRENT ",dashboardWidth);
|
||||
|
||||
if(targetWidth> dashboardWidth){
|
||||
targetWidth = dashboardWidth;
|
||||
}
|
||||
|
||||
dashboardElement.style.transformOrigin = "left top";
|
||||
dashboardElement.style.transition = "transform 0.2s ease-in-out";
|
||||
dashboardElement.style.transform = "scale(" + (targetWidth/dashboardWidth).toFixed(2) + ")";
|
||||
//console.log("SCALE ", (targetWidth/dashboardWidth).toFixed(2));
|
||||
if (targetWidth > dashboardWidth) {
|
||||
targetWidth = dashboardWidth;
|
||||
}
|
||||
|
||||
dashboardElement.style.transformOrigin = "left top";
|
||||
dashboardElement.style.transition = "transform 0.2s ease-in-out";
|
||||
dashboardElement.style.transform =
|
||||
"scale(" + (targetWidth / dashboardWidth).toFixed(2) + ")";
|
||||
//console.log("SCALE ", (targetWidth/dashboardWidth).toFixed(2));
|
||||
}
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
resizeDashboard();
|
||||
});
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
resizeDashboard();
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user