From 0d236677d4854d7b66a0b8f242a4aa38700ae97d Mon Sep 17 00:00:00 2001
From: lubiana <lubiana@hannover.ccc.de>
Date: Mon, 16 Jun 2025 19:05:29 +0200
Subject: [PATCH] add first chartychaaaaarrrt

---
 importmap.php                       | 11 ++++++--
 templates/drink_type/show.html.twig | 42 +++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/importmap.php b/importmap.php
index fbddf9e..d13ef46 100644
--- a/importmap.php
+++ b/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',
+    ],
 ];
diff --git a/templates/drink_type/show.html.twig b/templates/drink_type/show.html.twig
index 9531d0a..7801144 100644
--- a/templates/drink_type/show.html.twig
+++ b/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">