Improve colors on DinoChart

Author: smnandre

ux.symfony.com/assets/styles/app/_html.scss

@@ -10,7 +10,7 @@ body {
 
 a, a.page-link, a.page-link:hover {
   text-decoration: none;
-  color: var(--color-primary);
+  color: inherit;
 }
 
 ::selection {
@@ -27,6 +27,7 @@ a, a.page-link, a.page-link:hover {
   min-width: 320px;
   overflow-x: clip;
 }
+
 main {
   flex-grow: 1;
 }
@@ -35,3 +36,28 @@ main,
 footer {
   flex-shrink: 0;
 }
+
+a.link {
+  --color: #d9438e;
+  color: var(--color);
+  position: relative;
+  &:after {
+    position: absolute;
+    content:"";
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    display: block;
+    transition: all .2s ease-in-out;
+    background: var(--color);
+    transform: scaleX(0);
+    transform-origin: center left;
+  }
+  &:hover {
+    &:after {
+      transform: scaleX(1);
+      transition: transform .15s ease-in-out revert;
+    }
+  }
+}

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

@@ -17,6 +17,21 @@ class DinoStatsService
 
     private const ALL_DINOS = 'all';
 
+    private const COLORS = [
+        'de3232',
+        'de6732',
+        'dede32',
+        '67de32',
+        '32de32',
+        '32de67',
+        '32dede',
+        '3267de',
+        '3232de',
+        '6732de',
+        'de32de',
+        'de3267',
+    ];
+
     public static function getAllTypes(): array
     {
         return [
@@ -48,8 +63,11 @@ public function fetchData(int $start, int $end, array $types): array
 
         $datasets = [];
 
+        $colors = self::COLORS;
+        shuffle($colors);
+
         foreach ($types as $type) {
-            $color = sprintf('rgb(%d, %d, %d, .4)', mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
+            $color = '#'.(next($colors) ?: reset($colors));
 
             $datasets[] = [
                 'label' => ucwords($type),

ux.symfony.com/src/Twig/DinoChart.php

@@ -29,6 +29,7 @@ class DinoChart
 
     #[LiveProp(writable: true)]
     public int $fromYear = -200;
+
     #[LiveProp(writable: true)]
     public int $toYear = -65;
 
@@ -59,6 +60,24 @@ public function getChart(): Chart
                         abs($this->toYear)
                     ),
                 ],
+                'legend' => [
+                    'labels' => [
+                        'boxHeight' => 20,
+                        'boxWidth' => 50,
+                        'padding' => 20,
+                        'font' => [
+                            'size' => 14,
+                        ],
+                    ],
+                ],
+            ],
+            'elements' => [
+                'line' => [
+                    'borderWidth' => 5,
+                    'tension' => 0.25,
+                    'borderCapStyle' => 'round',
+                    'borderJoinStyle' => 'round',
+                ],
             ],
             'maintainAspectRatio' => false,
         ]);

ux.symfony.com/templates/components/DinoChart.html.twig

@@ -45,9 +45,13 @@
 
     <hr>
 
-    <div style="min-height: 400px;">
+    <div style="min-height: 480px; margin-bottom: 1.5rem;">
         {{ render_chart(chart) }}
     </div>
 
-    <small>Source: <a href="https://www.nhm.ac.uk/">National History Museum</a> courtesy of https://github.com/kjanjua26/jurassic-park</small>
+    <small>Source:
+        <a href="https://www.nhm.ac.uk/" class="link">National History Museum</a> courtesy of
+        <a href="https://github.com/kjanjua26/jurassic-park" class="link">https://github.com/kjanjua26/jurassic-park</a>
+    </small>
+
 </div>