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

add sync to leader dashboard new from google spreadsheet

Browse Source
This commit is contained in:
arifal hidayat
2025-06-14 02:15:49 +07:00
parent baed8cc487
commit 780ba60224
22 changed files with 933 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

378
resources/js/dashboards/leader.js Normal file
View File

@@ -0,0 +1,378 @@
import Big from "big.js";
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
import InitDatePicker from "../utils/InitDatePicker.js";
class BigData {
async init() {
try {
new InitDatePicker(
"#datepicker-dashboard-bigdata",
this.handleChangeDate.bind(this)
).init();
// Load initial data
this.updateData("latest");
} catch (error) {
console.error("Error initializing data:", error);
}
}
handleChangeDate(filterDate) {
if (!filterDate) return;
this.updateData(filterDate);
}
async updateData(filterDate) {
try {
this.resumeBigData = await this.getBigDataResume(filterDate);
this.initChartTargetPAD(filterDate);
this.initChartUsaha();
this.initChartNonUsaha();
this.initChartTotalPotensi();
this.initChartVerificationDocuments();
this.initChartNonVerificationDocuments();
this.initChartKekuranganPotensi();
this.initChartRealisasiTerbitPBG();
this.initChartMenungguKlikDPMPTSP();
this.initChartProsesDinasTeknis();
this.initChartPotensiTataRuang();
} catch (e) {
console.error(e);
}
}
async getBigDataResume(filterByDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterByDate}`,
{
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;
} catch (error) {
console.error("Error fetching chart data:", error);
return null;
}
}
initChartTargetPAD(filterDate) {
const year =
filterDate === "latest"
? new Date().getFullYear()
: new Date(filterDate).getFullYear();
document
.querySelectorAll(".document-title.chart-target-pad")
.forEach((element) => {
element.innerText = `Target PAD ${year}`;
});
document
.querySelectorAll(".document-count.chart-target-pad")
.forEach((element) => {
element.innerText = ``;
});
document
.querySelectorAll(".document-total.chart-target-pad")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
this.resumeBigData.target_pad.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-target-pad")
.forEach((element) => {
element.innerText = `${this.resumeBigData.target_pad.percentage}%`;
});
}
initChartTotalPotensi() {
// const countAll = this.resultDataTotal.countData ?? 0;
document
.querySelectorAll(".document-count.chart-total-potensi")
.forEach((element) => {
// element.innerText = `${countAll}`;
element.innerText = `${this.resumeBigData.total_potensi.count}`;
});
document
.querySelectorAll(".document-total.chart-total-potensi")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.bigTotalPotensi.toString()
this.resumeBigData.total_potensi.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-total-potensi")
.forEach((element) => {
// element.innerText = `${this.resultPercentage}%`;
element.innerText = `${this.resumeBigData.total_potensi.percentage}%`;
});
}
initChartVerificationDocuments() {
document
.querySelectorAll(".document-count.chart-berkas-terverifikasi")
.forEach((element) => {
// element.innerText = `${this.dataVerification.count}`;
element.innerText = `${this.resumeBigData.verified_document.count}`;
});
document
.querySelectorAll(".document-total.chart-berkas-terverifikasi")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.bigTotalVerification.toString()
this.resumeBigData.verified_document.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-berkas-terverifikasi")
.forEach((element) => {
// element.innerText = `${this.percetageResultVerification}%`;
element.innerText = `${this.resumeBigData.verified_document.percentage}%`;
});
}
initChartNonVerificationDocuments() {
document
.querySelectorAll(
".document-count.chart-berkas-belum-terverifikasi"
)
.forEach((element) => {
// element.innerText = `${this.dataNonVerification.count}`;
element.innerText = `${this.resumeBigData.non_verified_document.count}`;
});
document
.querySelectorAll(
".document-total.chart-berkas-belum-terverifikasi"
)
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.bigTotalNonVerification.toString()
this.resumeBigData.non_verified_document.sum.toString()
)}`;
});
document
.querySelectorAll(
".small-percentage.chart-berkas-belum-terverifikasi"
)
.forEach((element) => {
// element.innerText = `${this.percentageResultNonVerification}%`;
element.innerText = `${this.resumeBigData.non_verified_document.percentage}%`;
});
}
initChartUsaha() {
document
.querySelectorAll(".document-count.chart-business")
.forEach((element) => {
// element.innerText = `${this.dataBusiness.count}`;
element.innerText = `${this.resumeBigData.business_document.count}`;
});
document
.querySelectorAll(".document-total.chart-business")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.bigTotalBusiness.toString()
this.resumeBigData.business_document.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-business")
.forEach((element) => {
// element.innerText = `${this.percentageResultBusiness}%`;
element.innerText = `${this.resumeBigData.business_document.percentage}%`;
});
}
initChartNonUsaha() {
document
.querySelectorAll(".document-count.chart-non-business")
.forEach((element) => {
// element.innerText = `${this.dataNonBusiness.count}`;
element.innerText = `${this.resumeBigData.non_business_document.count}`;
});
document
.querySelectorAll(".document-total.chart-non-business")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.bigTotalNonBusiness.toString()
this.resumeBigData.non_business_document.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-non-business")
.forEach((element) => {
// element.innerText = `${this.percentageResultNonBusiness}%`;
element.innerText = `${this.resumeBigData.non_business_document.percentage}%`;
});
}
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()
this.resumeBigData.kekurangan_potensi.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-kekurangan-potensi")
.forEach((element) => {
// element.innerText = `${this.percentageKekuranganPotensi}%`;
element.innerText = `${this.resumeBigData.kekurangan_potensi.percentage}%`;
});
}
initChartRealisasiTerbitPBG() {
document
.querySelectorAll(".document-count.chart-realisasi-tebit-pbg")
.forEach((element) => {
// element.innerText = `${this.dataCountRealisasiTerbit}`;
element.innerText = `${this.resumeBigData.realisasi_terbit.count}`;
});
document
.querySelectorAll(".document-total.chart-realisasi-tebit-pbg")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.dataSumRealisasiTerbit
this.resumeBigData.realisasi_terbit.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-realisasi-tebit-pbg")
.forEach((element) => {
element.innerText = `${this.resumeBigData.realisasi_terbit.percentage}%`;
});
}
initChartMenungguKlikDPMPTSP() {
document
.querySelectorAll(".document-count.chart-menunggu-klik-dpmptsp")
.forEach((element) => {
// element.innerText = `${this.dataCountMenungguKlikDPMPTSP}`;
element.innerText = `${this.resumeBigData.menunggu_klik_dpmptsp.count}`;
});
document
.querySelectorAll(".document-total.chart-menunggu-klik-dpmptsp")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.dataSumMenungguKlikDPMPTSP
this.resumeBigData.menunggu_klik_dpmptsp.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-menunggu-klik-dpmptsp")
.forEach((element) => {
element.innerText = `${this.resumeBigData.menunggu_klik_dpmptsp.percentage}%`;
});
}
initChartProsesDinasTeknis() {
document
.querySelectorAll(".document-count.chart-proses-dinas-teknis")
.forEach((element) => {
// element.innerText = `${this.dataCountProsesDinasTeknis}`;
element.innerText = `${this.resumeBigData.proses_dinas_teknis.count}`;
});
document
.querySelectorAll(".document-total.chart-proses-dinas-teknis")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.dataSumProsesDinasTeknis
this.resumeBigData.proses_dinas_teknis.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-proses-dinas-teknis")
.forEach((element) => {
element.innerText = `${this.resumeBigData.proses_dinas_teknis.percentage}%`;
});
}
initChartPotensiTataRuang() {
document
.querySelectorAll(".document-count.chart-potensi-tata-ruang")
.forEach((element) => {
element.innerText = `${this.resumeBigData.tata_ruang.count}`;
});
document
.querySelectorAll(".document-total.chart-potensi-tata-ruang")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
this.resumeBigData.tata_ruang.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-potensi-tata-ruang")
.forEach((element) => {
element.innerText = `${this.resumeBigData.tata_ruang.percentage}%`;
});
}
}
document.addEventListener("DOMContentLoaded", async function (e) {
await new BigData().init();
});
// 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);
// 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();
// });
function resizeDashboard() {
let targetElement = document.getElementById("dashboard-fixed-wrapper");
let dashboardElement = document.getElementById("dashboard-fixed-container");
let targetWidth = targetElement.offsetWidth;
let dashboardWidth = 1110;
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);

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

@@ -71,7 +71,6 @@ class SyncronizeTask {
data.data.map((item) => [
item.id,
item.message,
item.response_body,
item.status,
item.start_time,
item.duration,

187
resources/views/dashboards/leader.blade.php Normal file
View File

@@ -0,0 +1,187 @@
@extends('layouts.vertical', ['subtitle' => 'Dashboards'])
@section('css')
@vite(['resources/scss/dashboards/_bigdata.scss'])
@endsection
@section('content')
@include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'Dashboard Pimpinan'])
<div id="dashboard-fixed-wrapper" class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mt-3 ms-2">
<h2 class="text-danger m-0">
ANALISA BIG DATA PROSES PBG <br>
MELALUI APLIKASI SIBEDAS PBG
</h2>
<div class="text-black text-end d-flex flex-column align-items-end me-3">
<span class="fs-5">Terakhir di update - {{$latest_created}}</span>
<input type="text" class="form-control mt-2" style="max-width: 125px;" id="datepicker-dashboard-bigdata" placeholder="Filter Date" />
</div>
</div>
</div>
<div id="dashboard-fixed-container" class="row" style="width:1110px;height:770px;position:relative;margin:auto;">
@component('components.circle', [
'document_title' => 'Kekurangan Potensi',
'document_color' => '#ff5757',
'document_type' => '',
'document_id' => 'chart-kekurangan-potensi',
'visible_small_circle' => true,
'style' => 'top:150px;'
])
@endcomponent
@component('components.circle', [
'document_title' => 'Target PAD',
'document_color' => '#204f6b',
'document_type' => '',
'document_id' => 'chart-target-pad',
'visible_small_circle' => true,
'style' => 'left:200px;',
'document_url' => route('data-settings.index', ['menu_id' => $menus->where('url','data-settings.index')->first()->id])
])
@endcomponent
<div class="square dia-top-left-bottom-right" style="top:150px;left:350px;">
</div>
<div class="square dia-top-right-bottom-left" style="top:150px;left:150px;">
</div>
@component('components.circle', [
'document_title' => 'Total Potensi Berkas',
'document_color' => '#0097b3',
'document_type' => 'Pemohon',
'document_id' => 'chart-total-potensi',
'visible_small_circle' => true,
'style' => 'left:400px;top:150px;',
'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'all'])
])
@endcomponent
<div class="square dia-top-right-bottom-left" style="top:300px;left:350px;">
</div>
<div class="square dia-top-left-bottom-right" style="top:300px;left:550px;">
</div>
@component('components.circle', [
'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
'document_color' => '#ed9d2e',
'document_type' => '',
'document_id' => 'chart-potensi-tata-ruang',
'visible_small_circle' => true,
'style' => 'left:600px;',
'document_url' => route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id])
])
@endcomponent
<div class="square dia-top-right-bottom-left" style="top:150px;left:550px;">
</div>
@component('components.circle', [
'document_title' => 'Non Usaha',
'document_color' => '#399787',
'document_type' => 'Berkas',
'document_id' => 'chart-non-business',
'visible_small_circle' => true,
'style' => 'left:900px;top:150px;',
'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'non-business'])
])
@endcomponent
@component('components.circle', [
'document_title' => 'Usaha',
'document_color' => '#5e7c89',
'document_type' => 'Berkas',
'document_id' => 'chart-business',
'visible_small_circle' => true,
'style' => 'left:900px;top:400px;',
'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'business'])
])
@endcomponent
@component('components.circle', [
'document_title' => 'Berkas Terverifikasi',
'document_color' => '#5170ff',
'document_type' => 'Berkas',
'document_id' => 'chart-berkas-terverifikasi',
'visible_small_circle' => true,
'style' => 'top:300px;left:200px;',
'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'verified'])
])
@endcomponent
<div class="square dia-top-right-bottom-left" style="top:500px;left:200px;width:50px">
</div>
<div class="square dia-top-left-bottom-right" style="top:450px;left:350px;width:500px;height:200px;">
</div>
@component('components.circle', [
'document_title' => 'Berkas Belum Terverifikasi',
'document_color' => '#5170ff',
'document_type' => 'Berkas',
'document_id' => 'chart-berkas-belum-terverifikasi',
'visible_small_circle' => true,
'style' => 'top:300px;left:600px;',
'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'non-verified'])
])
@endcomponent
<div class="square dia-top-right-bottom-left" style="top:200px;left:750px;width:250px;height:150px;">
</div>
<div class="square dia-top-left-bottom-right" style="top:400px;left:750px;width:250px;height:150px;">
</div>
@component('components.circle',[
'document_title' => 'Realisasi Terbit PBG',
'document_color' => '#8cc540',
'document_type' => 'Berkas',
'document_id' => 'chart-realisasi-tebit-pbg',
'visible_small_circle' => true,
'style' => 'top:550px;left:100px;',
'document_url' => 'https://docs.google.com/spreadsheets/d/1QoXzuLdEX3MK70Yrfigz0Qj5rAt4T819jX85vubBNdY/edit?gid=1514195399#gid=1514195399'
])
@endcomponent
<div class="square" style="top:650px;left:200px;width:250px;height:2px;background-color:black;">
</div>
@component('components.circle',[
'document_title' => 'Menunggu Klik DPMPTSP',
'document_color' => '#00bf61',
'document_type' => 'Berkas',
'document_id' => 'chart-menunggu-klik-dpmptsp',
'visible_small_circle' => true,
'style' => 'top:550px;left:400px',
'document_url' => 'https://docs.google.com/spreadsheets/d/1QoXzuLdEX3MK70Yrfigz0Qj5rAt4T819jX85vubBNdY/edit?gid=1514195399#gid=1514195399'
])
@endcomponent
<div class="square" style="top:650px;left:600px;width:250px;height:2px;background-color:black;">
</div>
@component('components.circle',[
'document_title' => 'Berproses Di Dinas Teknis',
'document_color' => '#737373',
'document_type' => 'Berkas',
'document_id' => 'chart-proses-dinas-teknis',
'visible_small_circle' => true,
'style' => 'top:550px;left:700px',
'document_url' => 'https://docs.google.com/spreadsheets/d/1QoXzuLdEX3MK70Yrfigz0Qj5rAt4T819jX85vubBNdY/edit?gid=1514195399#gid=1514195399'
])
@endcomponent
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/js/dashboards/bigdata.js'])
@endsection