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

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