wip animate dezimalstellen

app/Filament/Widgets/StatsMedianAverage.php

@@ -148,6 +148,10 @@ class StatsMedianAverage extends StatsOverviewWidget
             }
         }
 
+        // i box  1 3 4 5 devono sempre avere 1 decimale, se il valore è 12 fai scrivere 12.0
+        // il box 2 sempre un numero intero
+        // il box 6 sempre a due decimali, se trovi 2 fai scrivere 2.00
+
         $boxes = [];
 
         if ($similar_past_matches != 'none') {
@@ -163,7 +167,7 @@ class StatsMedianAverage extends StatsOverviewWidget
             $boxes[] = Stat::make('Average '.$statistic_type, self::template_box3('Home', 'Away', $value_home, $value_away))
                 ->description('Team '.$team_position)
                 ->extraAttributes([
-                    'x-init' => "animate('average_home', $value_home); animate('average_away', $value_away)",
+                    'x-init' => "animate('average_home', $value_home, 1); animate('average_away', $value_away, 1)",
                     'class' => 'box-success',
                 ]);
             // BOX 6
@@ -179,7 +183,7 @@ class StatsMedianAverage extends StatsOverviewWidget
             $boxes[] = Stat::make($statistic_type, self::template_box1($expectations_home, $expectations_away))
                 ->description('Expected Values')
                 ->extraAttributes([
-                    'x-init' => "animate('expectations_home', $expectations_home); animate('expectations_away', $expectations_away)",
+                    'x-init' => "animate('expectations_home', $expectations_home, 1); animate('expectations_away', $expectations_away, 1)",
                     'class' => 'box-yellow',
                 ]);
 
@@ -197,7 +201,7 @@ class StatsMedianAverage extends StatsOverviewWidget
                 $boxes[] = Stat::make('Average '.$statistic_type, self::template_box3($home_team, $away_team, $value_home, $value_away))
                     ->description('Team '.$team_position)
                     ->extraAttributes([
-                        'x-init' => "animate('average_home', $value_home); animate('average_away', $value_away)",
+                        'x-init' => "animate('average_home', $value_home, 1); animate('average_away', $value_away, 1)",
                         'class' => 'box-success',
                     ]);
 
@@ -205,7 +209,7 @@ class StatsMedianAverage extends StatsOverviewWidget
                 $boxes[] = Stat::make('Average '.$statistic_type, self::template_box4($home_team, $away_team, $average_team_home, $average_team_away))
                     ->description('Team Season')
                     ->extraAttributes([
-                        'x-init' => "animate('av_team_home', $average_team_home); animate('av_team_away', $average_team_away)",
+                        'x-init' => "animate('av_team_home', $average_team_home, 1); animate('av_team_away', $average_team_away, 1)",
                         'class' => 'box-success',
                     ]);
 
@@ -213,7 +217,7 @@ class StatsMedianAverage extends StatsOverviewWidget
                 $boxes[] = Stat::make('Average '.$statistic_type, self::template_box5('Home', 'Away', $average_league_home, $average_league_away))
                     ->description('League Season')
                     ->extraAttributes([
-                        'x-init' => "animate('av_league_home', $average_league_home); animate('av_league_away', $average_league_away)",
+                        'x-init' => "animate('av_league_home', $average_league_home, 1); animate('av_league_away', $average_league_away, 1)",
                         'class' => 'box-success',
                     ]);
 
@@ -221,7 +225,7 @@ class StatsMedianAverage extends StatsOverviewWidget
                 $boxes[] = Stat::make('Odds', self::templateOdds($data, $win, $draw, $lost))
                     ->description($team_position)
                     ->extraAttributes([
-                        'x-init' => "animate('win', $win); animate('draw', $draw); animate('lost', $lost)",
+                        'x-init' => "animate('win', $win, 2); animate('draw', $draw, 2); animate('lost', $lost, 2)",
                         'class' => 'box-purple',
                     ]);
             }
@@ -237,6 +241,7 @@ class StatsMedianAverage extends StatsOverviewWidget
         return $boxes;
     }
  
+
     // TEAMPLATE BOX 1
     protected function template_box1(float $expectations_home, float $expectations_away): HtmlString
     {

resources/js/number-animator.js

@@ -1,4 +1,5 @@
-function animate(element, end, duration = 500) {
+function animate(element, end, dezimal = 0) {
+    var duration = 500;
     var element = document.getElementById(element);
 
     const startTime = performance.now();
@@ -20,7 +21,18 @@ function animate(element, end, duration = 500) {
         // Calculate current value and round to integer
         const currentCount = Math.round(end * easedProgress * 100) / 100;
 
-        element.innerHTML = currentCount;
+        switch (dezimal) {
+            case 1:
+                element.innerHTML = currentCount.toFixed(1);
+                break;
+            case 2:
+                element.innerHTML = currentCount.toFixed(2);
+                break;
+
+            default:
+                element.innerHTML = currentCount;
+                break;
+        }
 
         if (progress < 1) {
             requestAnimationFrame(updateCount);

resources/js/number-animator2.js

@@ -1,31 +0,0 @@
-function animateValue(id, start, end, duration) {
-    // assumes integer values for start and end
-
-    var obj = document.getElementById(id);
-    var range = end - start;
-    // no timer shorter than 50ms (not really visible any way)
-    var minTimer = 50;
-    // calc step time to show all interediate values
-    var stepTime = Math.abs(Math.floor(duration / range));
-
-    // never go below minTimer
-    stepTime = Math.max(stepTime, minTimer);
-
-    // get current time and calculate desired end time
-    var startTime = new Date().getTime();
-    var endTime = startTime + duration;
-    var timer;
-
-    function run() {
-        var now = new Date().getTime();
-        var remaining = Math.max((endTime - now) / duration, 0);
-        var value = Math.round(end - remaining * range);
-        obj.innerHTML = value;
-        if (value == end) {
-            clearInterval(timer);
-        }
-    }
-
-    timer = setInterval(run, stepTime);
-    run();
-}