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

fix dashboard style and resume bigdata

Browse Source
This commit is contained in:
arifal
2025-02-26 21:52:23 +07:00
parent 7f8a2e4936
commit de300c2c32
11 changed files with 253 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,121 +23,9 @@ class BigData {
}
async updateData(filterDate) {
try {
console.log("Filtering data for date:", filterDate);
this.resumeBigData = await this.getBigDataResume(filterDate);
// this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
// this.resultDataTotal = await this.getDataTotalPotensi(year);
// this.dataVerification = await this.getDataVerfication(year);
// this.dataNonVerification = await this.getDataNonVerfication(year);
// this.dataBusiness = await this.getDataBusiness(year);
// this.dataNonBusiness = await this.getDataNonBusiness(year);
// this.dataTataRuang = await this.getDataSettings("TATA_RUANG");
// this.dataSumRealisasiTerbit = await this.getDataSettings(
// "REALISASI_TERBIT_PBG_SUM"
// );
// this.dataCountRealisasiTerbit = await this.getDataSettings(
// "REALISASI_TERBIT_PBG_COUNT"
// );
// this.dataSumMenungguKlikDPMPTSP = await this.getDataSettings(
// "MENUNGGU_KLIK_DPMPTSP_SUM"
// );
// this.dataCountMenungguKlikDPMPTSP = await this.getDataSettings(
// "MENUNGGU_KLIK_DPMPTSP_COUNT"
// );
// this.dataSumProsesDinasTeknis = await this.getDataSettings(
// "PROSES_DINAS_TEKNIS_SUM"
// );
// this.dataCountProsesDinasTeknis = await this.getDataSettings(
// "PROSES_DINAS_TEKNIS_COUNT"
// );
// // 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;
// }
// }
// // tata ruang
// this.bigTotalTataRuang = new Big(this.dataTataRuang);
// this.percentageResultTataRuang =
// this.bigTotalTataRuang <= 0 || this.bigTotalPotensi <= 0
// ? 0
// : this.bigTotalTataRuang
// .div(this.bigTotalPotensi)
// .times(100)
// .toFixed(2);
// // kekurangan potensi
// this.totalKekuranganPotensi = new Big(
// this.bigTargetPAD - this.bigTotalPotensi
// );
// this.percentageKekuranganPotensi =
// this.totalKekuranganPotensi <= 0 || this.bigTargetPAD <= 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 <= 0 || this.bigTotalPotensi <= 0
// ? 0
// : 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 || this.bigTotalBusiness <= 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 ||
// this.bigTotalNonVerification <= 0
// ? 0
// : this.bigTotalNonBusiness
// .div(this.bigTotalNonVerification)
// .times(100)
// .toFixed(2);
// if (!this.bigTargetPAD) {
// console.error("Failed to load chart data");
// return;
// }
this.initChartTargetPAD();
this.initChartTargetPAD(filterDate);
this.initChartUsaha();
this.initChartNonUsaha();
this.initChartTotalPotensi();
@@ -180,190 +68,17 @@ class BigData {
return null;
}
}
async getDataTotalPotensi(year) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return {
countData: data.data.count,
totalData: data.data.total,
};
} catch (error) {
console.error("Error fetching chart data:", error);
return null;
}
}
async getDataVerfication(year) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/verification-documents?year=${year}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return {
count: data.data.count,
total: data.data.total,
};
} catch (error) {
console.error("Error fetching chart data:", error);
return 0;
}
}
async getDataNonVerfication(year) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/non-verification-documents?year=${year}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return {
count: data.data.count,
total: data.data.total,
};
} catch (error) {
console.error("Error fetching chart data:", error);
return 0;
}
}
async getDataBusiness(year) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/business-documents?year=${year}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return {
count: data.data.count,
total: data.data.total,
};
} catch (error) {
console.error("Error fetching chart data:", error);
return 0;
}
}
async getDataNonBusiness(year) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/non-business-documents?year=${year}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return {
count: data.data.count,
total: data.data.total,
};
} catch (error) {
console.error("Error fetching chart data:", error);
return 0;
}
}
async getDataSettings(string_key) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return data.data[0].value;
} catch (error) {
console.error("Error fetching chart data:", error);
return 0;
}
}
initChartTargetPAD() {
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) => {
@@ -373,7 +88,6 @@ class BigData {
.querySelectorAll(".document-total.chart-target-pad")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.bigTargetPAD.toString()
this.resumeBigData.target_pad.sum.toString()
)}`;
});
@@ -589,20 +303,18 @@ class BigData {
document
.querySelectorAll(".document-count.chart-potensi-tata-ruang")
.forEach((element) => {
element.innerText = "";
element.innerText = `${this.resumeBigData.tata_ruang.count}`;
});
document
.querySelectorAll(".document-total.chart-potensi-tata-ruang")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
// this.bigTotalTataRuang.toString()
this.resumeBigData.tata_ruang.sum.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-potensi-tata-ruang")
.forEach((element) => {
// element.innerText = `${this.percentageResultTataRuang}%`;
element.innerText = `${this.resumeBigData.tata_ruang.percentage}%`;
});
}

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

@@ -21,8 +21,8 @@
// overflow: hidden;
.circle-content {
width: 180px; /* Ukuran lingkaran dalam */
height: 180px;
min-width: 180px; /* Ukuran lingkaran dalam */
min-height: 180px;
background-color: var(--circle-color); /* Warna lingkaran dalam */
border-radius: 50%;
display: flex;
@@ -57,17 +57,20 @@
padding: 0 7px;
border-radius: 10px;
margin: 0;
max-width: 100%;
}
.circle-content .document-count {
font-size: 24px;
font-weight: bold;
margin: 0;
max-width: 100%;
}
.circle-content .document-type {
font-size: 14px;
margin: 0;
max-width: 100%;
}
.small-circle-container {

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

@@ -9,7 +9,7 @@
@include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'Dashboard Pimpinan'])
<div id="dashboard-fixed-wrapper" class="row">
<div class="col-12">
<!-- <div class="col-12">
<h2 class="mt-3 ms-2 text-danger">
<span class="float-end fs-6 me-3 text-black d-block d-sm-inline text-end">Terakhir di update - {{$latest_created}}</span>
ANALISA BIG DATA PROSES PBG <br>
@@ -24,6 +24,18 @@
<input type="text" class="form-control" style="max-width: 125px;" id="datepicker-dashboard-bigdata" placeholder="Filter Date" />
</div>
</div>
</div> -->
<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', [
@@ -37,7 +49,7 @@
@endcomponent
@component('components.circle', [
'document_title' => 'Target PAD 2024',
'document_title' => 'Target PAD',
'document_color' => '#204f6b',
'document_type' => '',
'document_id' => 'chart-target-pad',

16
resources/views/dashboards/lack_of_potential.blade.php
View File

@@ -9,20 +9,16 @@
<div class="lack-of-potential-wrapper">
<div class="row" id="lack-of-potential-wrapper">
<div class="col-12">
<h3 class="mt-3 ms-2 text-danger">
<div class="d-flex justify-content-between align-items-center mt-3 ms-2">
<h2 class="text-danger m-0">
ANALISA BIG DATA MELALUI APLIKASI SIBEDAS PBG
</h3>
</h2>
<div class="text-black text-end d-flex flex-column align-items-end me-3">
<input type="text" class="form-control mt-2" style="max-width: 125px;" id="datepicker-lack-of-potential" placeholder="Filter Date" />
</div>
</div>
</div>
<div class="wrapper">
<div class="row d-flex justify-content-end">
<div class="col-12 col-sm-6 col-md-3">
<div class="d-flex flex-sm-nowrap flex-wrap justify-content-end">
<input type="text" class="form-control me-3" style="max-width: 125px;" id="datepicker-lack-of-potential" placeholder="Filter Date" />
</div>
</div>
</div>
<div id="lack-of-potential-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
<div style="position: absolute; top: 200px; left: 50px;">
<x-custom-circle title="Restoran" size="small" style="background-color: #0e4753;" />