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. #15

Merged
krzysiej merged 1 commits from feature/display-stock-in-chart into master 2025-01-26 11:42:38 +01:00
Conversation 0 Commits 1 Files Changed 2 +69 -19
2 changed files with 69 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3705990be1 - Show all commits

25
src/Controller/ProductController.php
View File

@@ -23,12 +23,29 @@ final class ProductController extends BaseController
'price' => fn($query) => $query->orderBy('created_at', 'desc'),
'stock' => fn($query) => $query->orderBy('created_at', 'desc'),
])->find($productId);
if(null === $product) {
if (null === $product) {
throw $this->createNotFoundException('Product not found');
}
$priceList = $product->price()->pluck('price');
$stockList = $product->stock()->pluck('stock');
$priceDates = $product->price()->pluck('created_at')->map(fn($date) => $date->format('Y-m-d'))->toArray();
$stockDates = $product->stock()->pluck('created_at')->map(fn($date) => $date->format('Y-m-d'))->toArray();
$priceList = $product->price()->pluck('price')->implode(',');
$priceDates = $product->price()->pluck('created_at')->map(fn($date) => $date->format('Y-m-d'))->implode("','");
return $this->render('product.html.twig', ['product' => $product, 'price_list' => $priceList, 'price_dates' => $priceDates]);
return $this->render('product.html.twig', [
'product' => $product,
'price_list' => $this->prepareChartData($priceDates, $priceList),
'stock_list' => $this->prepareChartData($stockDates, $stockList),
'price_dates' => implode("','", $priceDates),
]);
}
private function prepareChartData($set1, $set2): string
{
$data = [];
foreach ($set1 as $key => $value) {
$data[] = ['x' => $value, 'y' => $set2[$key]];
}
$stringData = json_encode($data);
return str_replace(['"x"', '"y"'], ['x', 'y'], $stringData);
}
}

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'
},
}
}
});