add dashboard potential

resources/js/dashboards/bigdata.js

@@ -118,7 +118,7 @@ class BigData {
                 this.dataNonVerification.total
             );
             this.percentageResultNonVerification =
-                this.bigTotalNonVerification <= 0 || this.bigTotalPotensi
+                this.bigTotalNonVerification <= 0 || this.bigTotalPotensi <= 0
                     ? 0
                     : this.bigTotalNonVerification
                           .div(this.bigTotalPotensi)

resources/js/dashboards/lack-of-potential.js

@@ -0,0 +1,119 @@
+import Big from "big.js";
+import GlobalConfig, { addThousandSeparators } from "../global-config.js";
+
+class LackOfPotential {
+    async init() {
+        this.bigTotalLackPotential = 0;
+        this.totalPotensi = await this.getDataTotalPotensi(2025);
+        this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
+
+        this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
+        this.bigTotalPotensi = new Big(this.totalPotensi.totalData ?? 0);
+        this.bigTotalLackPotential = this.bigTargetPAD - this.bigTotalPotensi;
+        this.initChartKekuranganPotensi();
+    }
+    async getDataTotalPotensi(year) {
+        try {
+            const response = await fetch(
+                `${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
+                {
+                    credentials: "include",
+                    headers: {
+                        Authorization: `Bearer ${
+                            document.querySelector("meta[name='api-token']")
+                                .content
+                        }`,
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            if (!response.ok) {
+                console.error("Network response was not ok", response);
+            }
+
+            const data = await response.json();
+            return {
+                countData: data.data.count,
+                totalData: data.data.total,
+            };
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+            return null;
+        }
+    }
+    async getDataSettings(string_key) {
+        try {
+            const response = await fetch(
+                `${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
+                {
+                    credentials: "include",
+                    headers: {
+                        Authorization: `Bearer ${
+                            document.querySelector("meta[name='api-token']")
+                                .content
+                        }`,
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            if (!response.ok) {
+                console.error("Network response was not ok", response);
+            }
+
+            const data = await response.json();
+            return data.data[0].value;
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+            return 0;
+        }
+    }
+    initChartKekuranganPotensi() {
+        document
+            .querySelectorAll(".document-count.chart-lack-of-potential")
+            .forEach((element) => {
+                element.innerText = ``;
+            });
+        document
+            .querySelectorAll(".document-total.chart-lack-of-potential")
+            .forEach((element) => {
+                element.innerText = `Rp.${addThousandSeparators(
+                    this.bigTotalLackPotential.toString()
+                )}`;
+            });
+        document
+            .querySelectorAll(".small-percentage.chart-lack-of-potential")
+            .forEach((element) => {
+                element.innerText = ``;
+            });
+    }
+}
+document.addEventListener("DOMContentLoaded", async function (e) {
+    await new LackOfPotential().init();
+});
+
+function resizeDashboard() {
+    let targetElement = document.getElementById("lack-of-potential-wrapper");
+    let dashboardElement = document.getElementById(
+        "lack-of-potential-fixed-container"
+    );
+
+    let targetWidth = targetElement.offsetWidth;
+    let dashboardWidth = 1400;
+
+    let scaleFactor = (targetWidth / dashboardWidth).toFixed(2);
+
+    // Prevent scaling beyond 1 (100%) to avoid overflow
+    scaleFactor = Math.min(scaleFactor, 1);
+
+    dashboardElement.style.transformOrigin = "left top";
+    dashboardElement.style.transition = "transform 0.2s ease-in-out";
+    dashboardElement.style.transform = `scale(${scaleFactor})`;
+
+    // Ensure horizontal scrolling is allowed if necessary
+    document.body.style.overflowX = "auto";
+}
+
+window.addEventListener("load", resizeDashboard);
+window.addEventListener("resize", resizeDashboard);