From 6689bbca98205928cf263c6ebb301ae091724683 Mon Sep 17 00:00:00 2001
From: lubiana <lubiana@hannover.ccc.de>
Date: Sat, 28 Jun 2025 18:55:07 +0200
Subject: [PATCH] enhance chart

---
 src/Service/DrinkType/GetStockHistory.php    | 10 ++-
 src/Service/DrinkType/GetWantedHistory.php   |  9 ++-
 templates/components/history_chart.html.twig | 71 ++++++++++++++++++++
 templates/drink_type/show.html.twig          | 64 ++----------------
 4 files changed, 94 insertions(+), 60 deletions(-)
 create mode 100644 templates/components/history_chart.html.twig

diff --git a/src/Service/DrinkType/GetStockHistory.php b/src/Service/DrinkType/GetStockHistory.php
index a9f34c1..3704887 100644
--- a/src/Service/DrinkType/GetStockHistory.php
+++ b/src/Service/DrinkType/GetStockHistory.php
@@ -23,10 +23,18 @@ final readonly class GetStockHistory
         if ($drinkType->getId() === null) {
             return[];
         }
-        return $this->propertyChangeLogRepository->findBy([
+        $items =  $this->propertyChangeLogRepository->findBy([
             'entityClass' => DrinkType::class,
             'propertyName' => 'currentStock',
             'entityId' => $drinkType->getId(),
         ]);
+        $currentStock = new PropertyChangeLog();
+        $currentStock->setNewValue((string) $drinkType->getCurrentStock());
+        $currentStock->setEntityClass(DrinkType::class);
+        $currentStock->setEntityId($drinkType->getId());
+        $currentStock->setPropertyName('currentStock');
+
+        $items[] = $currentStock;
+        return $items;
     }
 }
diff --git a/src/Service/DrinkType/GetWantedHistory.php b/src/Service/DrinkType/GetWantedHistory.php
index 9e1533b..c3b0796 100644
--- a/src/Service/DrinkType/GetWantedHistory.php
+++ b/src/Service/DrinkType/GetWantedHistory.php
@@ -18,10 +18,17 @@ final readonly class GetWantedHistory
             return[];
         }
 
-        return $this->propertyChangeLogRepository->findBy([
+        $items =  $this->propertyChangeLogRepository->findBy([
             'entityClass' => DrinkType::class,
             'propertyName' => 'wantedStock',
             'entityId' => $drinkType->getId(),
         ]);
+        $wantedStock = new PropertyChangeLog();
+        $wantedStock->setNewValue((string) $drinkType->getWantedStock());
+        $wantedStock->setEntityClass(DrinkType::class);
+        $wantedStock->setEntityId($drinkType->getId());
+        $wantedStock->setPropertyName('wantedStock');
+        $items[] = $wantedStock;
+        return $items;
     }
 }
diff --git a/templates/components/history_chart.html.twig b/templates/components/history_chart.html.twig
new file mode 100644
index 0000000..a6f6a0d
--- /dev/null
+++ b/templates/components/history_chart.html.twig
@@ -0,0 +1,71 @@
+{#
+    History Chart Component
+
+    Parameters:
+    - stock_history: Array of stock history records with changeDate and newValue properties
+    - wanted_history: Array of wanted stock history records with newValue properties
+    - chart_id: ID for the canvas element (default: 'stockHistoryChart')
+    - title: Title for the chart card (default: 'History')
+#}
+
+{% set chart_id = chart_id|default('stockHistoryChart') %}
+{% set title = title|default('History') %}
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">{{ title }}</h5>
+    </div>
+    <div class="card-body">
+        <div style="height: 300px; position: relative;">
+            <canvas id="{{ chart_id }}"></canvas>
+        </div>
+        <script type="module">
+            import { Chart } from 'chart.js/auto';
+            new Chart(document.getElementById('{{ chart_id }}'), {
+                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,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                            labels: {
+                                boxWidth: 12,
+                                padding: 10
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                maxTicksLimit: 6
+                            }
+                        },
+                        x: {
+                            ticks: {
+                                maxTicksLimit: 8,
+                                maxRotation: 45
+                            }
+                        }
+                    }
+                }
+            });
+        </script>
+    </div>
+</div>
diff --git a/templates/drink_type/show.html.twig b/templates/drink_type/show.html.twig
index a2809da..7d53344 100644
--- a/templates/drink_type/show.html.twig
+++ b/templates/drink_type/show.html.twig
@@ -62,64 +62,12 @@
 
         <div class="row mb-4">
             <div class="col-md-12">
-                <div class="card">
-                    <div class="card-header">
-                        <h5 class="card-title">History</h5>
-                    </div>
-                    <div class="card-body">
-                        <div style="height: 300px; position: relative;">
-                            <canvas id="stockHistoryChart"></canvas>
-                        </div>
-                        <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,
-                                    maintainAspectRatio: false,
-                                    plugins: {
-                                        legend: {
-                                            position: 'top',
-                                            labels: {
-                                                boxWidth: 12,
-                                                padding: 10
-                                            }
-                                        }
-                                    },
-                                    scales: {
-                                        y: {
-                                            beginAtZero: true,
-                                            ticks: {
-                                                maxTicksLimit: 6
-                                            }
-                                        },
-                                        x: {
-                                            ticks: {
-                                                maxTicksLimit: 8,
-                                                maxRotation: 45
-                                            }
-                                        }
-                                    }
-                                }
-                            });
-                        </script>
-                    </div>
-                </div>
+                {% include 'components/history_chart.html.twig' with {
+                    'stock_history': stock_history,
+                    'wanted_history': wanted_history,
+                    'chart_id': 'stockHistoryChart',
+                    'title': 'History'
+                } %}
             </div>
         </div>