krzysiej/ryobi-crawler
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

Add chart line to display stock as well as price.

Browse Source
This commit is contained in:
Krzysztof Płaczek
2025-01-26 11:41:42 +01:00
parent 44254ed12a
commit 3705990be1
2 changed files with 69 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
templates/product.html.twig
View File

@@ -14,7 +14,7 @@
<nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';" >
<ol class="breadcrumb">
{% for category in product.categories %}
<li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none" href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li></li>
<li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none" href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li>
{% endfor %}
</ol>
</nav>
@@ -55,26 +55,32 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('price');
const ctx = document.getElementById('price').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['{{ price_dates|raw }}'],
datasets: [{
label: 'Price (PLN)',
data: [{{ price_list }}],
borderWidth: 1
}]
datasets: [
{
label: 'Price (PLN)',
data: {{ price_list|raw }},
yAxisID: 'yPrice',
tension: 0.1,
borderWidth: 1
},
{
label: 'Stock (units)',
data: {{ stock_list|raw }},
yAxisID: 'yStock',
tension: 0.1,
borderWidth: 1
}
]
},
options: {
responsive: true,
animation: false,
plugins: {
title: {
display: true,
text: 'Price in time'
},
},
scales: {
x: {
title: {
@@ -82,13 +88,40 @@
text: 'Date'
}
},
y: {
yPrice: {
type: 'linear',
position: 'left',
beginAtZero: true,
title: {
display: true,
text: 'Price'
text: 'Price (PLN)'
},
grid: {
drawOnChartArea: false
}
},
yStock: {
type: 'linear',
position: 'right',
beginAtZero: true,
title: {
display: true,
text: 'Stock (units)'
},
grid: {
drawOnChartArea: false
}
}
},
plugins: {
legend: {
display: true,
position: 'top'
},
title: {
display: true,
text: 'Price and Stock in time'
},
}
}
});