arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add circle component and small circle percentage

Browse Source
This commit is contained in:
arifal
2025-02-04 01:12:33 +07:00
parent c43c79f65e
commit 6e726b4940
7 changed files with 483 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
resources/js/dashboards/bigdata.js
View File

@@ -1,6 +1,5 @@
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";
@@ -37,12 +36,18 @@ class BigData {
})
.then((data) => {
const seriesData = data.data.series;
document.getElementById(
"countTargetPAD"
).innerText = `${data.data.count} Berkas`;
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",
@@ -122,6 +127,12 @@ class BigData {
})
.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`;
@@ -207,6 +218,12 @@ class BigData {
})
.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`;
@@ -1036,6 +1053,63 @@ class BigData {
}
}
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();
});