[Site] Adding a new LiveComponent + Chartjs demo!

Author: weaverryan

ux.symfony.com/src/Controller/LiveComponentDemoController.php

@@ -7,6 +7,7 @@
 use App\Form\TodoListForm;
 use App\Repository\FoodRepository;
 use App\Repository\TodoListRepository;
+use App\Service\DinoStatsService;
 use App\Service\LiveDemoRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
@@ -75,4 +76,12 @@ public function inlineEdit(LiveDemoRepository $liveDemoRepository, FoodRepositor
             'food' => $foodRepository->findOneBy([]),
         ]);
     }
+
+    #[Route('/chartjs', name: 'app_live_components_demo_chartjs')]
+    public function chartJs(LiveDemoRepository $liveDemoRepository): Response
+    {
+        return $this->render('live_component_demo/chartjs.html.twig', parameters: [
+            'demo' => $liveDemoRepository->find('chartjs_updating'),
+        ]);
+    }
 }

ux.symfony.com/src/Form/MealPlannerForm.php

@@ -68,7 +68,7 @@ public function configureOptions(OptionsResolver $resolver)
     private function getAvailableFoodChoices(string $meal): array
     {
         $foods = match ($meal) {
-            self::MEAL_BREAKFAST => ['Eggs 🍳', 'Bacon 🥓', 'Strawberries 🍓', 'Croissant 🥐'],
+            self::MEAL_BREAKFAST => ['Eggs 🍳', 'Bacon 🥓', 'Strawberries 🍓', 'Croissant 🥐', 'Other', 'AnOther'],
             self::MEAL_SECOND_BREAKFAST => ['Bagel 🥯', 'Kiwi 🥝', 'Avocado 🥑', 'Waffles 🧇'],
             self::MEAL_ELEVENSES => ['Pancakes 🥞', 'Salad 🥙', 'Tea ☕️'],
             self::MEAL_LUNCH => ['Sandwich 🥪', 'Cheese 🧀', 'Sushi 🍱'],

ux.symfony.com/src/Service/DinoStatsService.php

@@ -0,0 +1,94 @@
+<?php
+
+namespace App\Service;
+
+class DinoStatsService
+{
+    private ?array $rawData = null;
+
+    private const ALL_DINOS = 'all';
+
+    public static function getAllTypes(): array
+    {
+        return [
+            self::ALL_DINOS,
+            'sauropod',
+            'large theropod',
+            'small theropod',
+            'ceratopsian',
+            'euornithopod',
+            'armoured dinosaur',
+        ];
+    }
+
+    public function fetchData(int $start, int $end, array $types): array
+    {
+        $start = abs($start);
+        $end = abs($end);
+
+        $steps = 10;
+        $step = round(($start - $end) / $steps);
+
+        $labels = [];
+        for ($i = 0; $i < $steps; $i++) {
+            $current = $start - ($i * $step);
+            // generate a random rgb color
+
+            $labels[] = $current.' mya';
+        }
+
+        $datasets = [];
+
+        foreach ($types as $type) {
+            $color = sprintf('rgb(%d, %d, %d, .4)', mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
+
+            $datasets[] = [
+                'label' => ucwords($type),
+                'data' => $this->getSpeciesCounts($start, $steps, $step, $type),
+                'borderColor' => $color,
+                'backgroundColor' => $color,
+            ];
+        }
+
+        return [
+            'labels' => $labels,
+            'datasets' => $datasets
+        ];
+    }
+
+    private function getRawData(): array
+    {
+        if (null === $this->rawData) {
+            $this->rawData = json_decode(file_get_contents(__DIR__.'/data/dino-stats.json'), true);
+        }
+
+        return $this->rawData;
+    }
+
+    private function getSpeciesCounts(int $start, int $steps, int $step, string $type): array
+    {
+        $counts = [];
+        for ($i = 0; $i < $steps; $i++) {
+            $current = round($start - ($i * $step));
+            $counts[] = $this->countSpeciesAt($current, $type);
+        }
+
+        return $counts;
+    }
+
+    private function countSpeciesAt(int $currentYear, string $type): int
+    {
+        $count = 0;
+        foreach ($this->getRawData() as $dino) {
+            if (($type !== self::ALL_DINOS) && $dino['type'] !== $type) {
+                continue;
+            }
+
+            if ($dino['from'] >= $currentYear && $dino['to'] <= $currentYear) {
+                $count++;
+            }
+        }
+
+        return $count;
+    }
+}

ux.symfony.com/src/Service/LiveDemoRepository.php

@@ -42,6 +42,12 @@ public function findAll(): array
                 description: 'Activate an inline editing form with validation.',
                 route: 'app_live_components_demo_inline_edit',
             ),
+            new LiveDemo(
+                'chartjs_updating',
+                name: 'Auto-Updating Chart',
+                description: 'Render & Update a Chart.js chart in real-time.',
+                route: 'app_live_components_demo_chartjs',
+            ),
         ];
     }