add first chartychaaaaarrrt

importmap.php

@@ -1,7 +1,5 @@
 <?php
 
-declare(strict_types=1);
-
 /**
  * Returns the importmap for this application.
  *
@@ -28,4 +26,13 @@ return [
         'version' => '5.3.6',
         'type' => 'css',
     ],
+    'chart.js' => [
+        'version' => '4.5.0',
+    ],
+    '@kurkle/color' => [
+        'version' => '0.3.4',
+    ],
+    'chart.js/auto' => [
+        'version' => '4.5.0',
+    ],
 ];

templates/drink_type/show.html.twig

@@ -50,6 +50,48 @@
             </div>
         </div>
 
+        <div class="row mb-4">
+            <div class="col-md-12">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="card-title">Example Chart</h5>
+                    </div>
+                    <div class="card-body">
+                        <canvas id="stockHistoryChart"></canvas>
+                        <script type="module">
+                            import { Chart } from 'chart.js/auto';
+                            new Chart(document.getElementById('stockHistoryChart'), {
+                                type: 'line',
+                                data: {
+                                    labels: [{% for record in stock_history %}'{{ record.changeDate|date('Y-m-d H:i') }}'{{ not loop.last ? ',' }}{% endfor %}],
+                                    datasets: [{
+                                        label: 'Stock History',
+                                        data: [{% for record in stock_history %}{{ record.newValue }}{{ not loop.last ? ',' }}{% endfor %}],
+                                        borderColor: 'rgb(75, 192, 192)',
+                                        tension: 0.1
+                                    },
+                                        {
+                                            label: 'Wanted Stock History',
+                                            data: [{% for record in wanted_history %}{{ record.newValue }}{{ not loop.last ? ',' }}{% endfor %}],
+                                            borderColor: 'rgb(255, 99, 132)',
+                                            tension: 0.1
+                                        }]
+                                },
+                                options: {
+                                    responsive: true,
+                                    scales: {
+                                        y: {
+                                            beginAtZero: true
+                                        }
+                                    }
+                                }
+                            });
+                        </script>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="row mb-4">
             <div class="col-md-12">
                 <div class="card">