assets/app.js

@@ -10,11 +10,11 @@ import './styles/modes.css';
 import './styles/emoji-footprint.css';
 
 // Import modules
-import './theme.js';
-import './emoji-footprint.js';
-import './modes.js';
-import { initNumberInputs } from './numberInputs.js';
-import { initRadioState } from './radioState.js';
+import './javascript/theme.js';
+import './javascript/emoji-footprint.js';
+import './javascript/modes.js';
+import { initNumberInputs } from './javascript/numberInputs.js';
+import { initRadioState } from './javascript/radioState.js';
 
 // Initialize everything when DOM is ready
 document.addEventListener('DOMContentLoaded', function() {
@@ -23,4 +23,4 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize number inputs on page load
     initNumberInputs();
-});
+});

importmap.php

@@ -28,4 +28,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">