enhance chart
This commit is contained in:
parent
ba7a0c9f4a
commit
6689bbca98
4 changed files with 94 additions and 60 deletions
|
@ -23,10 +23,18 @@ final readonly class GetStockHistory
|
||||||
if ($drinkType->getId() === null) {
|
if ($drinkType->getId() === null) {
|
||||||
return[];
|
return[];
|
||||||
}
|
}
|
||||||
return $this->propertyChangeLogRepository->findBy([
|
$items = $this->propertyChangeLogRepository->findBy([
|
||||||
'entityClass' => DrinkType::class,
|
'entityClass' => DrinkType::class,
|
||||||
'propertyName' => 'currentStock',
|
'propertyName' => 'currentStock',
|
||||||
'entityId' => $drinkType->getId(),
|
'entityId' => $drinkType->getId(),
|
||||||
]);
|
]);
|
||||||
|
$currentStock = new PropertyChangeLog();
|
||||||
|
$currentStock->setNewValue((string) $drinkType->getCurrentStock());
|
||||||
|
$currentStock->setEntityClass(DrinkType::class);
|
||||||
|
$currentStock->setEntityId($drinkType->getId());
|
||||||
|
$currentStock->setPropertyName('currentStock');
|
||||||
|
|
||||||
|
$items[] = $currentStock;
|
||||||
|
return $items;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,10 +18,17 @@ final readonly class GetWantedHistory
|
||||||
return[];
|
return[];
|
||||||
}
|
}
|
||||||
|
|
||||||
return $this->propertyChangeLogRepository->findBy([
|
$items = $this->propertyChangeLogRepository->findBy([
|
||||||
'entityClass' => DrinkType::class,
|
'entityClass' => DrinkType::class,
|
||||||
'propertyName' => 'wantedStock',
|
'propertyName' => 'wantedStock',
|
||||||
'entityId' => $drinkType->getId(),
|
'entityId' => $drinkType->getId(),
|
||||||
]);
|
]);
|
||||||
|
$wantedStock = new PropertyChangeLog();
|
||||||
|
$wantedStock->setNewValue((string) $drinkType->getWantedStock());
|
||||||
|
$wantedStock->setEntityClass(DrinkType::class);
|
||||||
|
$wantedStock->setEntityId($drinkType->getId());
|
||||||
|
$wantedStock->setPropertyName('wantedStock');
|
||||||
|
$items[] = $wantedStock;
|
||||||
|
return $items;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
71
templates/components/history_chart.html.twig
Normal file
71
templates/components/history_chart.html.twig
Normal file
|
@ -0,0 +1,71 @@
|
||||||
|
{#
|
||||||
|
History Chart Component
|
||||||
|
|
||||||
|
Parameters:
|
||||||
|
- stock_history: Array of stock history records with changeDate and newValue properties
|
||||||
|
- wanted_history: Array of wanted stock history records with newValue properties
|
||||||
|
- chart_id: ID for the canvas element (default: 'stockHistoryChart')
|
||||||
|
- title: Title for the chart card (default: 'History')
|
||||||
|
#}
|
||||||
|
|
||||||
|
{% set chart_id = chart_id|default('stockHistoryChart') %}
|
||||||
|
{% set title = title|default('History') %}
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h5 class="card-title">{{ title }}</h5>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div style="height: 300px; position: relative;">
|
||||||
|
<canvas id="{{ chart_id }}"></canvas>
|
||||||
|
</div>
|
||||||
|
<script type="module">
|
||||||
|
import { Chart } from 'chart.js/auto';
|
||||||
|
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 %}],
|
||||||
|
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>
|
|
@ -62,64 +62,12 @@
|
||||||
|
|
||||||
<div class="row mb-4">
|
<div class="row mb-4">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<div class="card">
|
{% include 'components/history_chart.html.twig' with {
|
||||||
<div class="card-header">
|
'stock_history': stock_history,
|
||||||
<h5 class="card-title">History</h5>
|
'wanted_history': wanted_history,
|
||||||
</div>
|
'chart_id': 'stockHistoryChart',
|
||||||
<div class="card-body">
|
'title': 'History'
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue