95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
import ApexCharts from "apexcharts";
|
|
import { addThousandSeparators } from "../../global-config.js";
|
|
class GrowthReport {
|
|
init() {
|
|
this.loadChart();
|
|
}
|
|
|
|
async loadChart() {
|
|
try {
|
|
const chartElement = document.getElementById("chart-growth-report");
|
|
const apiUrl = chartElement.dataset.url;
|
|
|
|
const token = document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content");
|
|
|
|
const response = await fetch(apiUrl, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
Accept: "application/json",
|
|
},
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
console.log("data", data);
|
|
|
|
const categories = data.map((item) => item.date);
|
|
|
|
const potentionSeries = {
|
|
name: "Potensi Berkas",
|
|
data: data.map((item) => item.potention_sum),
|
|
};
|
|
|
|
const verifiedSeries = {
|
|
name: "Terverifikasi",
|
|
data: data.map((item) => item.verified_sum),
|
|
};
|
|
|
|
const nonVerifiedSeries = {
|
|
name: "Belum Terverifikasi",
|
|
data: data.map((item) => item.non_verified_sum),
|
|
};
|
|
|
|
const options = {
|
|
chart: {
|
|
type: "bar",
|
|
height: "auto",
|
|
},
|
|
title: {
|
|
text: "Grafik Pertumbuhan",
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
},
|
|
xaxis: {
|
|
categories: categories,
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: "Total SUM Per Date",
|
|
},
|
|
labels: {
|
|
formatter: function (value) {
|
|
return "Rp. " + addThousandSeparators(value);
|
|
},
|
|
},
|
|
},
|
|
noData: {
|
|
text: "Data tidak tersedia",
|
|
align: "center",
|
|
verticalAlign: "middle",
|
|
style: {
|
|
color: "#999",
|
|
fontSize: "16px",
|
|
},
|
|
},
|
|
series: [potentionSeries, verifiedSeries, nonVerifiedSeries],
|
|
};
|
|
|
|
const chart = new ApexCharts(chartElement, options);
|
|
chart.render();
|
|
} catch (error) {
|
|
console.error("Failed to load growth report data:", error);
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
new GrowthReport().init();
|
|
});
|