wip

resources/js/filament-chart-js-plugins.js

@@ -1,4 +0,0 @@
-import IntersectionFiller from './widget-chart-line-intersection-filler'
-
-window.filamentChartJsPlugins ??= []
-window.filamentChartJsPlugins.push(IntersectionFiller)

resources/js/number-animator.js

@@ -0,0 +1,32 @@
+function animate(element, end, duration = 500) {
+    console.log(element, end);
+
+    var element = document.getElementById(element);
+    const startTime = performance.now();
+
+    // Cubic easing function: slows down at the start and end
+    const easeInOutCubic = (t) =>
+        t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+
+    const updateCount = (currentTime) => {
+        const elapsedTime = currentTime - startTime;
+        let progress = elapsedTime / duration;
+
+        // Clamp progress to ensure it doesn't overshoot
+        if (progress > 1) progress = 1;
+
+        // Apply easing curve to progress
+        const easedProgress = easeInOutCubic(progress);
+
+        // Calculate current value and round to integer
+        const currentCount = Math.round(end * easedProgress * 100) / 100;
+
+        element.innerHTML = currentCount;
+
+        if (progress < 1) {
+            requestAnimationFrame(updateCount);
+        }
+    };
+
+    requestAnimationFrame(updateCount);
+}

resources/js/widget-chart-line-intersection-filler.js

@@ -1,42 +0,0 @@
-const fillPlugin = {
-    id: 'fillHigherValue',
-    beforeDatasetsDraw(chart) {
-        const { ctx } = chart;
-        const metaA = chart.getDatasetMeta(0); // Dataset A
-        const metaB = chart.getDatasetMeta(1); // Dataset B
-
-        ctx.save();
-
-        // Loop through your data points
-        for (let i = 0; i < metaA.data.length; i++) {
-            const pA = metaA.data[i];
-            const pB = metaB.data[i];
-
-            if (!pA || !pB) continue;
-
-            // Define your colors
-            const colorA = 'rgba(255, 99, 132, 0.4)'; // Color when Line A is higher
-            const colorB = 'rgba(54, 162, 235, 0.4)'; // Color when Line B is higher
-
-            // Determine which line is higher (remember canvas Y=0 is at the top)
-            if (pA.y < pB.y) {
-                ctx.fillStyle = colorA;
-            } else {
-                ctx.fillStyle = colorB;
-            }
-
-            // Draw the fill polygon segment between the two points
-            ctx.beginPath();
-            ctx.moveTo(pA.x, pA.y);
-            ctx.lineTo(pB.x, pB.y);
-            // If doing multiple segments, connect back to create a contiguous fill
-            if (metaA.data[i + 1] && metaB.data[i + 1]) {
-                ctx.lineTo(metaB.data[i + 1].x, metaB.data[i + 1].y);
-                ctx.lineTo(metaA.data[i + 1].x, metaA.data[i + 1].y);
-            }
-            ctx.closePath();
-            ctx.fill();
-        }
-        ctx.restore();
-    }
-};