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();
});