921 lines
27 KiB
JavaScript
921 lines
27 KiB
JavaScript
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.initAllChart();
|
|
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);
|
|
});
|
|
}
|
|
|
|
initAllChart() {
|
|
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) {
|
|
let apiTokenMeta = document.querySelector("meta[name='api-token']");
|
|
|
|
if (apiTokenMeta && apiTokenMeta.content) {
|
|
let apiToken = apiTokenMeta.content;
|
|
localStorage.setItem("token", apiToken); // Simpan token ke localStorage
|
|
console.log("Token berhasil disimpan:", apiToken);
|
|
}
|
|
new BigData().init();
|
|
});
|