make chart more better yet

templates/components/history_chart.html.twig

@@ -21,21 +21,73 @@
         </div>
         <script type="module">
             import { Chart } from 'chart.js/auto';
+
+            // Create a unified set of dates from both datasets
+            {% set all_dates = [] %}
+            {% for record in stock_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% if date_str not in all_dates %}
+                    {% set all_dates = all_dates|merge([date_str]) %}
+                {% endif %}
+            {% endfor %}
+            {% for record in wanted_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% if date_str not in all_dates %}
+                    {% set all_dates = all_dates|merge([date_str]) %}
+                {% endif %}
+            {% endfor %}
+
+            // Sort dates chronologically
+            {% set all_dates = all_dates|sort %}
+
+            // Create date-indexed maps for both datasets
+            {% set stock_map = {} %}
+            {% for record in stock_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% set stock_map = stock_map|merge({(date_str): record.newValue}) %}
+            {% endfor %}
+
+            {% set wanted_map = {} %}
+            {% for record in wanted_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% set wanted_map = wanted_map|merge({(date_str): record.newValue}) %}
+            {% endfor %}
+
+            // Prepare data arrays with values aligned to dates
+            {% set stock_data = [] %}
+            {% set wanted_data = [] %}
+
+            {% for date in all_dates %}
+                {% if date in stock_map|keys %}
+                    {% set stock_data = stock_data|merge([stock_map[date]]) %}
+                {% else %}
+                    {% set stock_data = stock_data|merge(['null']) %}
+                {% endif %}
+
+                {% if date in wanted_map|keys %}
+                    {% set wanted_data = wanted_data|merge([wanted_map[date]]) %}
+                {% else %}
+                    {% set wanted_data = wanted_data|merge(['null']) %}
+                {% endif %}
+            {% endfor %}
+
             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 %}],
+                    labels: [{% for date in all_dates %}'{{ date }}'{{ not loop.last ? ',' }}{% endfor %}],
                     datasets: [{
                         label: 'Stock History',
-                        data: [{% for record in stock_history %}{{ record.newValue }}{{ not loop.last ? ',' }}{% endfor %}],
+                        data: [{{ stock_data|join(',') }}],
                         borderColor: 'rgb(75, 192, 192)',
-                        tension: 0.1
+                        tension: 0.1,
+                        spanGaps: true
                     },
                     {
                         label: 'Wanted Stock History',
-                        data: [{% for record in wanted_history %}{{ record.newValue }}{{ not loop.last ? ',' }}{% endfor %}],
+                        data: [{{ wanted_data|join(',') }}],
                         borderColor: 'rgb(255, 99, 132)',
-                        tension: 0.1
+                        tension: 0.1,
+                        spanGaps: true
                     }]
                 },
                 options: {

tests/Feature/Service/DrinkType/GetStockHistoryTest.php

@@ -43,7 +43,7 @@ test('it returns stock history for a drink type', function (): void {
 
     // Verify the result
     expect($result)->toBeArray();
-    expect($result)->toHaveCount(3);
+    expect($result)->toHaveCount(4);
 
     // Verify that all logs are for currentStock
     foreach ($result as $log) {
@@ -81,7 +81,7 @@ test('it only returns logs for the specified drink type', function (): void {
     $result = $getStockHistory($drinkType1);
 
     // Verify we only get logs for the first drink type
-    expect($result)->toHaveCount(1);
+    expect($result)->toHaveCount(2);
     expect($result[0]->getEntityId())->toBe($drinkType1->getId());
     expect($result[0]->getNewValue())->toBe('10');
 });

tests/Feature/Service/DrinkType/GetWantedHistoryTest.php

@@ -43,7 +43,7 @@ test('it returns wanted stock history for a drink type', function (): void {
 
     // Verify the result
     expect($result)->toBeArray();
-    expect($result)->toHaveCount(3);
+    expect($result)->toHaveCount(4);
 
     // Verify that all logs are for wantedStock
     foreach ($result as $log) {
@@ -81,7 +81,7 @@ test('it only returns logs for the specified drink type', function (): void {
     $result = $getWantedHistory($drinkType1);
 
     // Verify we only get logs for the first drink type
-    expect($result)->toHaveCount(1);
+    expect($result)->toHaveCount(2);
     expect($result[0]->getEntityId())->toBe($drinkType1->getId());
     expect($result[0]->getNewValue())->toBe('10');
 });