arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 2025-06-02

Browse Source
This commit is contained in:
arifal
2025-02-06 04:55:30 +07:00
parent 4eac6ab83d
commit d54edb7783
23 changed files with 1354 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

896
resources/js/dashboards/bigdata.js
View File

@@ -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();
});
});

30
resources/js/global-config.js
View File

@@ -1,12 +1,28 @@
const GlobalConfig = {
apiHost: 'http://localhost:8000'
apiHost: "http://localhost:8000",
};
export default GlobalConfig;
export function addThousandSeparators(number, fractionDigits = 2) {
return new Intl.NumberFormat('en-US', {
minimumFractionDigits: fractionDigits,
maximumFractionDigits: fractionDigits,
}).format(number);
}
export function addThousandSeparators(value, fractionDigits = 2) {
if (!value) return null; // Handle empty or null values
// Remove any non-numeric characters except commas and dots
value = value.replace(/[^0-9,.]/g, "");
// If the value contains multiple dots, assume dots are thousand separators
if ((value.match(/\./g) || []).length > 1) {
value = value.replace(/\./g, "");
}
// Convert to a proper decimal number
let number = parseFloat(value.replace(",", "."));
if (isNaN(number)) return null; // Return null if conversion fails
// Format the number with thousand separators
return new Intl.NumberFormat("en-US", {
minimumFractionDigits: fractionDigits,
maximumFractionDigits: fractionDigits,
}).format(number);
}

161
resources/js/settings/syncronize/syncronize.js
View File

@@ -7,6 +7,7 @@ class SyncronizeTask {
init() {
this.initTableImportDatasources();
this.handleSubmitSync();
this.handleSubmitSnycGoogleSheet();
}
initTableImportDatasources() {
new Grid({
@@ -48,68 +49,112 @@ class SyncronizeTask {
}
handleSubmitSync() {
const button = document.getElementById("btn-sync-submit");
// Check if the button should be enabled or disabled based on the status
fetch(`${GlobalConfig.apiHost}/api/import-datasource/check-datasource`, {
method: "GET",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
fetch(
`${GlobalConfig.apiHost}/api/import-datasource/check-datasource`,
{
method: "GET",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
}
})
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(data => {
console.log("data check button sync", data.can_execute);
button.disabled = !data.can_execute;
// If the button is enabled, add click event to trigger sync
if (!button.disabled) {
button.addEventListener("click", function(e) {
button.disabled = true; // Disable button to prevent multiple clicks
button.textContent = "Syncing..."; // Change button text to show syncing
// Trigger the scraping API call
fetch(`${GlobalConfig.apiHost}/api/scraping`, {
method: "GET",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
}
})
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(data => {
console.log("data sync button", data);
alert("Synchronization executed successfully");
window.location.reload();
})
.catch(err => {
console.error("Fetch error:", err);
alert("An error occurred during synchronization");
})
.finally(() => {
button.disabled = false; // Re-enable the button after the request is complete
button.textContent = "Sync Data"; // Reset button text
)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
console.log("data check button sync", data.can_execute);
button.disabled = !data.can_execute;
// If the button is enabled, add click event to trigger sync
if (!button.disabled) {
button.addEventListener("click", function (e) {
button.disabled = true; // Disable button to prevent multiple clicks
button.textContent = "Syncing..."; // Change button text to show syncing
// Trigger the scraping API call
fetch(`${GlobalConfig.apiHost}/api/scraping`, {
method: "GET",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
})
.then((response) => {
if (!response.ok) {
throw new Error(
"Network response was not ok"
);
}
return response.json();
})
.then((data) => {
console.log("data sync button", data);
alert("Synchronization executed successfully");
window.location.reload();
})
.catch((err) => {
console.error("Fetch error:", err);
alert(
"An error occurred during synchronization"
);
})
.finally(() => {
button.disabled = false; // Re-enable the button after the request is complete
button.textContent = "Sync Data"; // Reset button text
});
});
}
})
.catch((err) => {
console.error("Fetch error:", err);
alert("An error occurred while checking the datasource");
});
}
handleSubmitSnycGoogleSheet() {
const button = document.getElementById("btn-sync-submit-google-sheet");
button.addEventListener("click", function (e) {
button.disabled = true; // Disable button to prevent multiple clicks
button.textContent = "Syncing..."; // Change button text to show syncing
// Trigger the scraping API call
fetch(`${GlobalConfig.apiHost}/api/sync-pbg-task-google-sheet`, {
method: "GET",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
})
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
console.log("data sync button", data);
alert("Synchronization executed successfully");
window.location.reload();
})
.catch((err) => {
console.error("Fetch error:", err);
alert("An error occurred during synchronization");
})
.finally(() => {
button.disabled = false; // Re-enable the button after the request is complete
button.textContent = "Sync Google Sheet"; // Reset button text
});
}
})
.catch(err => {
console.error("Fetch error:", err);
alert("An error occurred while checking the datasource");
});
}
}

171
resources/scss/components/_circle.scss
View File

@@ -1,110 +1,97 @@
:root {
--circle-color: #c97a04; /* Default warna lingkaran */
--circle-color: #c97a04; /* Default warna lingkaran */
}
.circle-container {
width: 200px; /* Ukuran lingkaran */
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--circle-color);; /* Warna lingkaran utama */
border-radius: 50%; /* Membuat lingkaran */
border: 6px solid white; /* Border putih */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
position: absolute;
.circle-content {
width: 180px; /* Ukuran lingkaran dalam */
height: 180px;
background-color: var(--circle-color); /* Warna lingkaran dalam */
border-radius: 50%;
width: 200px; /* Ukuran lingkaran */
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white; /* Warna teks */
border: 4px solid white; /* Border lingkaran dalam */
padding: 10px;
box-sizing: border-box;
}
.circle-content .document-title {
font-size: 14px;
font-weight: bold;
margin: 0 5px;
line-height: 1.5;
}
.circle-content .document-total {
font-size: 14px;
font-weight: bold;
color: #000000; /* Warna biru gelap untuk total */
background-color: white; /* Background putih untuk total */
padding: 0 7px;
border-radius: 10px;
margin: 0;
}
.circle-content .document-count {
font-size: 24px;
font-weight: bold;
margin: 0;
}
.circle-content .document-type {
font-size: 14px;
margin: 0;
}
.small-circle-container {
position: absolute;
bottom: 0;
right: 0;
width: 50px; /* Ukuran lingkaran kecil */
height: 50px;
background-color: #2d4f90; /* Warna lingkaran kecil */
background-color: var(--circle-color); /* Warna lingkaran utama */
border-radius: 50%; /* Membuat lingkaran */
// border: 4px solid white; /* Border putih */
display: flex;
align-items: center;
justify-content: center;
border: 6px solid white; /* Border putih */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
position: absolute;
.small-circle-content{
width: 45px;
height: 45px;
background-color: #2d4f90; /* Warna lingkaran kecil */
border-radius: 50%; /* Membuat lingkaran */
border: 2px solid white; /* Border putih */
display: flex;
align-items: center;
justify-content: center;
.small-percentage {
font-size: 10px;
font-weight: bold;
.circle-content {
width: 180px; /* Ukuran lingkaran dalam */
height: 180px;
background-color: var(--circle-color); /* Warna lingkaran dalam */
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white; /* Warna teks */
margin: 0;
}
border: 4px solid white; /* Border lingkaran dalam */
padding: 10px;
box-sizing: border-box;
}
}
.circle-content .document-title {
font-size: 14px;
font-weight: bold;
margin: 0 5px;
line-height: 1.5;
}
.circle-content .document-total {
font-size: 14px;
font-weight: bold;
color: #000000; /* Warna biru gelap untuk total */
background-color: white; /* Background putih untuk total */
padding: 0 7px;
border-radius: 10px;
margin: 0;
}
.circle-content .document-count {
font-size: 24px;
font-weight: bold;
margin: 0;
}
.circle-content .document-type {
font-size: 14px;
margin: 0;
}
.small-circle-container {
position: absolute;
bottom: 0;
right: 0;
width: 50px; /* Ukuran lingkaran kecil */
height: 50px;
background-color: #2d4f90; /* Warna lingkaran kecil */
border-radius: 50%; /* Membuat lingkaran */
// border: 4px solid white; /* Border putih */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
.small-circle-content {
width: 45px;
height: 45px;
background-color: #2d4f90; /* Warna lingkaran kecil */
border-radius: 50%; /* Membuat lingkaran */
border: 2px solid white; /* Border putih */
display: flex;
align-items: center;
justify-content: center;
.small-percentage {
font-size: 10px;
font-weight: bold;
color: white; /* Warna teks */
margin: 0;
}
}
}
}
.arrow-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Agar SVG tidak menghalangi interaksi */
}
// .circle-container {
// width: 20vw; /* Responsif menggunakan unit viewport */
// height: 20vw; /* Pastikan tinggi sama dengan lebar */

69
resources/views/dashboards/bigdata.blade.php
View File

@@ -39,8 +39,8 @@
@component('components.circle', [
'document_title' => 'Kekurangan Potensi',
'document_color' => '#911701',
'document_type' => 'Pemohon',
'document_id' => 'chart-all-task',
'document_type' => '',
'document_id' => 'chart-kekurangan-potensi',
'visible_small_circle' => true,
'style' => 'top:150px;'
])
@@ -49,8 +49,8 @@
@component('components.circle', [
'document_title' => 'Target PAD 2024',
'document_color' => '#020e42',
'document_type' => 'Pemohon',
'document_id' => 'chart-all-task',
'document_type' => '',
'document_id' => 'chart-target-pad',
'visible_small_circle' => true,
'style' => 'left:200px;'
])
@@ -68,7 +68,7 @@
'document_title' => 'Total Potensi Berkas',
'document_color' => '#02acfa',
'document_type' => 'Pemohon',
'document_id' => 'chart-all-task',
'document_id' => 'chart-total-potensi',
'visible_small_circle' => true,
'style' => 'left:400px;top:150px;'
])
@@ -83,8 +83,8 @@
@component('components.circle', [
'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
'document_color' => '#bf04bc',
'document_type' => 'Pemohon',
'document_id' => 'chart-all-task',
'document_type' => 'Berkas',
'document_id' => 'chart-potensi-tata-ruang',
'visible_small_circle' => true,
'style' => 'left:600px;'
])
@@ -117,7 +117,7 @@
'document_title' => 'Berkas Terverifikasi',
'document_color' => '#0561f5',
'document_type' => 'Berkas',
'document_id' => 'chart-business',
'document_id' => 'chart-berkas-terverifikasi',
'visible_small_circle' => true,
'style' => 'top:300px;left:200px;'
])
@@ -133,7 +133,7 @@
'document_title' => 'Berkas Belum Terverifikasi',
'document_color' => '#b973ff',
'document_type' => 'Berkas',
'document_id' => 'chart-business',
'document_id' => 'chart-berkas-belum-terverifikasi',
'visible_small_circle' => true,
'style' => 'top:300px;left:600px;'
])
@@ -150,7 +150,7 @@
'document_title' => 'Realisasi Terbit PBG',
'document_color' => '#09ab5a',
'document_type' => 'Berkas',
'document_id' => 'chart-business',
'document_id' => 'chart-realisasi-tebit-pbg',
'visible_small_circle' => true,
'style' => 'top:550px;left:100px;'
])
@@ -163,7 +163,7 @@
'document_title' => 'Menunggu Klik DPMPTSP',
'document_color' => '#0294ad',
'document_type' => 'Berkas',
'document_id' => 'chart-business',
'document_id' => 'chart-menunggu-klik-dpmptsp',
'visible_small_circle' => true,
'style' => 'top:550px;left:400px'
])
@@ -176,57 +176,12 @@
'document_title' => 'Berproses Di Dinas Teknis',
'document_color' => '#422519',
'document_type' => 'Berkas',
'document_id' => 'chart-business',
'document_id' => 'chart-proses-dinas-teknis',
'visible_small_circle' => true,
'style' => 'top:550px;left:700px'
])
@endcomponent
</div>
<div class="row d-flex justify-content-center">
<!-- <div id="circle1" class="absolute w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-40 left-40">
1
</div>
<div id="circle2" class="absolute w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-80 left-80">
2
</div>
<svg id="svg-container" class="absolute inset-0 w-full h-full pointer-events-none">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="red"></polygon>
</marker>
</defs>
<line id="connector-line" stroke="red" stroke-width="2" marker-end="url(#arrowhead)" />
</svg> -->
</div>
<div class="row d-flex justify-content-center">
</div>
<div class="row d-flex justify-content-center">
</div>
<div class="row d-flex justify-content-center">
</div>
<div class="row d-flex justify-content-center">
</div>
<div class="row d-flex justify-content-center">
</div>
</div>
@endsection

2
resources/views/layouts/partials/sidebar.blade.php
View File

@@ -68,7 +68,7 @@
</a>
<div class="collapse" id="sidebarSettings">
<ul class="nav sub-navbar-nav">
<li class="sub-nav-item">
<li class="sub-nav-item d-none">
<a class="sub-nav-link" href="{{ route ('general.index' ) }}">General</a>
</li>
<li class="sub-nav-item">

7
resources/views/settings/syncronize/index.blade.php
View File

@@ -10,11 +10,8 @@
<div class="row">
<div class="col-md-12 col-xl-12 d-flex justify-content-end">
<!-- <form action="{{route('settings.sync')}}" method="post" id="sync-form">
@csrf
<button type="button" class="btn btn-success width-lg" id="btn-sync-submit">Sync SIMBG</button>
</form> -->
<button type="button" class="btn btn-success width-lg" id="btn-sync-submit">Sync SIMBG</button>
<button type="button" class="btn btn-success" style="margin-right: 20px;" id="btn-sync-submit-google-sheet">Sync Google Sheet</button>
<button type="button" class="btn btn-success" id="btn-sync-submit">Sync SIMBG</button>
</div>
<div>
<div id="table-import-datasources"></div>