1042 lines
33 KiB
JavaScript
1042 lines
33 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.initChartTargetPAD();
|
|
this.initChartUsaha();
|
|
this.initChartNonUsaha();
|
|
this.initChartStatus1();
|
|
this.initChartStatus2();
|
|
this.initChartStatus3();
|
|
this.initChartStatus4();
|
|
this.initChartStatus5();
|
|
this.initChartStatus6();
|
|
this.initChartStatus7();
|
|
this.initChartStatus20();
|
|
this.initChartStatus24();
|
|
}
|
|
|
|
initChartTargetPAD() {
|
|
fetch(`${GlobalConfig.apiHost}/api/all-task-documents`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.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`,{
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.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`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.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);
|
|
});
|
|
}
|
|
|
|
initChartStatus1(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=1`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus1"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus1"
|
|
).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("#char-pbg-status-1"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
|
|
initChartStatus2(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=2`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus2"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus2"
|
|
).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("#chart-pbg-status-2"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
|
|
initChartStatus3(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=3`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus3"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus3"
|
|
).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("#chart-pbg-status-3"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus4(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=4`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus4"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus4"
|
|
).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("#chart-pbg-status-4"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus5(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=5`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus5"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus5"
|
|
).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("#chart-pbg-status-5"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus6(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=6`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus6"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus6"
|
|
).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("#chart-pbg-status-6"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus7(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=7`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus7"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus7"
|
|
).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("#chart-pbg-status-7"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus20(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=20`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus20"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus20"
|
|
).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("#chart-pbg-status-20"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
initChartStatus24(){
|
|
fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=24`, {
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
|
|
"Content-Type": "application/json",
|
|
}
|
|
})
|
|
.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(
|
|
"countStatus24"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
document.getElementById(
|
|
"totalStatus24"
|
|
).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("#chart-pbg-status-24"),
|
|
options1
|
|
).render();
|
|
})
|
|
.catch((error) => {
|
|
console.error("error fetching chart dara : ", error);
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function (e) {
|
|
new BigData().init();
|
|
});
|