868 lines
21 KiB
JavaScript
868 lines
21 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) {
|
|
new BigData().init();
|
|
}); |