enhance chart

This commit is contained in:
lubiana 2025-06-28 18:55:07 +02:00
parent ba7a0c9f4a
commit 6689bbca98
Signed by: lubiana
SSH key fingerprint: SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
4 changed files with 94 additions and 60 deletions

View file

@ -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>