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

add dashboard, fix get data scraping, fix table

Browse Source
This commit is contained in:
arifal
2025-01-24 01:58:06 +07:00
parent 4de7067487
commit 5f93a18f60
53 changed files with 2671 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/config.js
View File

@@ -26,4 +26,4 @@
window.innerWidth <= 1140
? e.setAttribute("data-sidebar-size", "hidden")
: e.setAttribute("data-sidebar-size", config.menu.size));
})();
})();

868
resources/js/dashboards/bigdata.js Normal file
View File

@@ -0,0 +1,868 @@
import ApexCharts from "apexcharts";
import jsVectorMap from "jsvectormap/dist/jsvectormap.js";
import 'jsvectormap/dist/maps/world-merc.js';
import 'jsvectormap/dist/maps/world.js';
import GlobalConfig, {addThousandSeparators} from '../global-config.js';
class BigData {
init(){
this.initChartKekuranganPotensi();
this.initChartTargetPAD();
this.initChartUsaha();
this.initChartNonUsaha();
}
initChartTargetPAD() {
console.log("api host : " + GlobalConfig.apiHost);
fetch(`${GlobalConfig.apiHost}/api/all-task-documents`)
.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("countTargetPAD").innerText = `${data.data.count} Berkas`;
document.getElementById("totalTargetPAD").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: seriesData
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart12"), options1).render();
})
.catch(error => {
console.error("error fetching chart dara : ", error);
});
}
initChartUsaha(){
fetch(`${GlobalConfig.apiHost}/api/business-documents`)
.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("countBusinessDocuments").innerText = `${data.data.count} Berkas`;
document.getElementById("totalBusinessDocuments").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: seriesData
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chartBusinessDocuments"), options1).render();
})
.catch(error => {
console.error("error fetching chart dara : ", error);
});
}
initChartNonUsaha(){
fetch(`${GlobalConfig.apiHost}/api/non-business-documents`)
.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("countNonUsaha").innerText = `${data.data.count} Berkas`;
document.getElementById("totalNonUsaha").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: seriesData
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chartNonUsaha"), options1).render();
})
.catch(error => {
console.error("error fetching chart dara : ", error);
});
}
initChartKekuranganPotensi(){
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [80, 100, 50, 30, 90]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart01"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart02"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart03"), options1).render();
// var options1 = {
// chart: {
// type: 'area',
// height: 50,
// sparkline: {
// enabled: true
// }
// },
// series: [{
// data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
// }],
// stroke: {
// width: 2,
// curve: 'smooth'
// },
// markers: {
// size: 0
// },
// colors: ["#7e67fe"],
// tooltip: {
// fixed: {
// enabled: false
// },
// x: {
// show: false
// },
// y: {
// title: {
// formatter: function (seriesName) {
// return ''
// }
// }
// },
// marker: {
// show: false
// }
// },
// fill: {
// opacity: [1],
// type: ['gradient'],
// gradient: {
// type: "vertical",
// // shadeIntensity: 1,
// inverseColors: false,
// opacityFrom: 0.5,
// opacityTo: 0,
// stops: [0, 100]
// },
// },
// }
// new ApexCharts(document.querySelector("#chart04"), options1).render();
// var options1 = {
// chart: {
// type: 'area',
// height: 50,
// sparkline: {
// enabled: true
// }
// },
// series: [{
// data: [80, 100, 50, 30, 90]
// }],
// stroke: {
// width: 2,
// curve: 'smooth'
// },
// markers: {
// size: 0
// },
// colors: ["#7e67fe"],
// tooltip: {
// fixed: {
// enabled: false
// },
// x: {
// show: false
// },
// y: {
// title: {
// formatter: function (seriesName) {
// return ''
// }
// }
// },
// marker: {
// show: false
// }
// },
// fill: {
// opacity: [1],
// type: ['gradient'],
// gradient: {
// type: "vertical",
// // shadeIntensity: 1,
// inverseColors: false,
// opacityFrom: 0.5,
// opacityTo: 0,
// stops: [0, 100]
// },
// },
// }
// new ApexCharts(document.querySelector("#chart05"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart06"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart07"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart08"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [80, 100, 50, 30, 90]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart09"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart10"), options1).render();
var options1 = {
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
}
},
series: [{
data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
}],
stroke: {
width: 2,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ["#7e67fe"],
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
},
fill: {
opacity: [1],
type: ['gradient'],
gradient: {
type: "vertical",
// shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 100]
},
},
}
new ApexCharts(document.querySelector("#chart11"), options1).render();
// var options1 = {
// chart: {
// type: 'area',
// height: 50,
// sparkline: {
// enabled: true
// }
// },
// series: [{
// data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
// }],
// stroke: {
// width: 2,
// curve: 'smooth'
// },
// markers: {
// size: 0
// },
// colors: ["#7e67fe"],
// tooltip: {
// fixed: {
// enabled: false
// },
// x: {
// show: false
// },
// y: {
// title: {
// formatter: function (seriesName) {
// return ''
// }
// }
// },
// marker: {
// show: false
// }
// },
// fill: {
// opacity: [1],
// type: ['gradient'],
// gradient: {
// type: "vertical",
// // shadeIntensity: 1,
// inverseColors: false,
// opacityFrom: 0.5,
// opacityTo: 0,
// stops: [0, 100]
// },
// },
// }
// new ApexCharts(document.querySelector("#chart12"), options1).render();
}
}
document.addEventListener('DOMContentLoaded', function (e) {
new BigData().init();
});

12
resources/js/global-config.js Normal file
View File

@@ -0,0 +1,12 @@
const GlobalConfig = {
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);
}

23
resources/js/settings/syncronize/syncronize.js Normal file
View File

@@ -0,0 +1,23 @@
class SyncronizeTask {
init(){
this.onSyncSubmit();
}
onSyncSubmit(){
const form = document.getElementById("sync-form");
if(form){
form.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the default form submission
const button = document.getElementById("btn-sync-submit");
if (button) {
button.disabled = true;
button.innerText = "Processing...";
}
form.submit();
});
}
}
}
document.addEventListener('DOMContentLoaded', function (e) {
new SyncronizeTask().init();
});

128
resources/js/tables/common-table.js Normal file
View File

@@ -0,0 +1,128 @@
import { Grid } from "gridjs/dist/gridjs.umd.js";
import gridjs from 'gridjs/dist/gridjs.umd.js'
import 'gridjs/dist/gridjs.umd.js'
import GlobalConfig from "../global-config";
class CommonTable {
init() {
// this.CommonTableInit();
this.CommonTableInitWithFetchApi();
}
CommonTableInit() {
new Grid({
columns: [
{
name: 'ID',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
})
},
"Name",
{
name: 'Email',
formatter: (function (cell) {
return gridjs.html('<a href="">' + cell + '</a>');
})
},
"Position", "Company", "Country",
{
name: 'Actions',
width: '120px',
formatter: (function (cell) {
return gridjs.html(`
<div class="d-flex justify-items-end gap-10">
<a href="#" class="text-primary text-decoration-underline me-2">Details</a>
<a href="#" class="text-warning text-decoration-underline me-2">Update</a>
<a href="#" class="text-danger text-decoration-underline">Delete</a>
</div>
`);
})
},
],
pagination: {
limit: 10
},
sort: true,
search: true,
data: [
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
]
}).render(document.getElementById("common-table"));
}
CommonTableInitWithFetchApi(){
fetch(`${GlobalConfig.apiHost}/users`)
.then((response) => response.json())
.then((data) => {
console.log("check log response");
console.log(data.data);
new Grid({
columns: [
{
name: 'id',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
})
},
"name",
{
name: 'email',
formatter: (function (cell) {
return gridjs.html('<a href="">' + cell + '</a>');
})
},
"position", "firstname", "lastname",
{
name: 'Actions',
width: '120px',
formatter: (function (cell) {
return gridjs.html(`
<div class="d-flex justify-items-end gap-10">
<a href="#" class="text-primary text-decoration-underline me-2">Details</a>
<a href="#" class="text-warning text-decoration-underline me-2">Update</a>
<a href="#" class="text-danger text-decoration-underline">Delete</a>
</div>
`);
})
},
],
pagination: {
limit: 10
},
sort: true,
search: true,
data: data.data
}).render(document.getElementById("common-table"));
})
.catch((error) => console.error("Error fetching data: " + error));
}
}
document.addEventListener('DOMContentLoaded', function (e) {
new CommonTable().init();
});