1116 lines
36 KiB
JavaScript
1116 lines
36 KiB
JavaScript
import ApexCharts from "apexcharts";
|
|
|
|
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.querySelectorAll('.document-count.chart-all-task').forEach((element) => {
|
|
element.innerText = `${data.data.count}`;
|
|
});
|
|
document.querySelectorAll('.document-total.chart-all-task').forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
});
|
|
document.getElementById(
|
|
"totalTargetPAD"
|
|
).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
document.getElementById(
|
|
"countTargetPAD"
|
|
).innerText = `${data.data.count} Berkas`;
|
|
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.querySelectorAll('.document-count.chart-non-business').forEach((element) => {
|
|
element.innerText = `${data.data.count}`;
|
|
});
|
|
document.querySelectorAll('.document-total.chart-non-business').forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
});
|
|
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.querySelectorAll('.document-count.chart-business').forEach((element) => {
|
|
element.innerText = `${data.data.count}`;
|
|
});
|
|
document.querySelectorAll('.document-total.chart-business').forEach((element) => {
|
|
element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
|
});
|
|
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);
|
|
});
|
|
}
|
|
}
|
|
|
|
class ArrowConnectorCircles {
|
|
// Fungsi untuk membuat garis dengan panah
|
|
drawArrow(startElement, endElement) {
|
|
const svg = document.getElementById("arrow-svg");
|
|
const startRect = startElement.getBoundingClientRect();
|
|
const endRect = endElement.getBoundingClientRect();
|
|
|
|
// Hitung posisi pusat dari setiap lingkaran
|
|
const startX = startRect.left + startRect.width / 2;
|
|
const startY = startRect.top + startRect.height / 2;
|
|
const endX = endRect.left + endRect.width / 2;
|
|
const endY = endRect.top + endRect.height / 2;
|
|
|
|
// Bersihkan isi SVG sebelum menggambar ulang
|
|
svg.innerHTML = "";
|
|
|
|
// Buat elemen garis
|
|
const arrowLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
|
arrowLine.setAttribute("x1", startX);
|
|
arrowLine.setAttribute("y1", startY);
|
|
arrowLine.setAttribute("x2", endX);
|
|
arrowLine.setAttribute("y2", endY);
|
|
arrowLine.setAttribute("stroke", "black");
|
|
arrowLine.setAttribute("stroke-width", "2");
|
|
|
|
// Buat elemen panah
|
|
const arrowHead = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
|
|
const arrowSize = 10;
|
|
const angle = Math.atan2(endY - startY, endX - startX);
|
|
const arrowPoint1X = endX - arrowSize * Math.cos(angle - Math.PI / 6);
|
|
const arrowPoint1Y = endY - arrowSize * Math.sin(angle - Math.PI / 6);
|
|
const arrowPoint2X = endX - arrowSize * Math.cos(angle + Math.PI / 6);
|
|
const arrowPoint2Y = endY - arrowSize * Math.sin(angle + Math.PI / 6);
|
|
|
|
arrowHead.setAttribute(
|
|
"points",
|
|
`${endX},${endY} ${arrowPoint1X},${arrowPoint1Y} ${arrowPoint2X},${arrowPoint2Y}`
|
|
);
|
|
arrowHead.setAttribute("fill", "black");
|
|
|
|
// Tambahkan garis dan panah ke SVG
|
|
svg.appendChild(arrowLine);
|
|
svg.appendChild(arrowHead);
|
|
}
|
|
init(){
|
|
const circle1 = document.getElementById("chart-not-verified");
|
|
const circle2 = document.getElementById("chart-all-task");
|
|
|
|
// Gambar panah antara dua lingkaran
|
|
this.drawArrow(circle1, circle2);
|
|
|
|
// Tambahkan event listener jika ingin garis berubah sesuai posisi dinamis (opsional)
|
|
document.addEventListener("resize", () => drawArrow(circle1, circle2));
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function (e) {
|
|
new BigData().init();
|
|
// new ArrowConnectorCircles().init();
|
|
});
|