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

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

View file

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

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

View file

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