🚀 introduce charts

merging_APE
Antoine PEREDERII 1 year ago
parent 114dd33a4f
commit d3d6dbb12f

@ -9,6 +9,7 @@ use App\Router\Response\Response;
use App\Router\Response\IResponse; use App\Router\Response\IResponse;
use App\Router\Session; use App\Router\Session;
use DateTime;
use Manager\UserManager; use Manager\UserManager;
use Shared\Attributes\Route; use Shared\Attributes\Route;
use Shared\Validation; use Shared\Validation;
@ -51,26 +52,24 @@ class UserController extends BaseController
{ {
$athleteGateway = new AthleteGateway(new Connexion(DSN, DB_USER, DB_PASSWORD)); $athleteGateway = new AthleteGateway(new Connexion(DSN, DB_USER, DB_PASSWORD));
$activity = $athleteGateway->getListActivity('1');//$currentUser->getId() $activity = $athleteGateway->getListActivity('1');//$currentUser->getId()
// Log::dd($activity);
$chart = []; $charts = [];
foreach($activity as $act){ $i = 0;
$chart[] = ['act' => $act['nbactivite'], 'mois' => date('m', $act['mois'])]; while ($i <= 12) {
if ($activity[$i]['mois'] == null) {
$activity[$i]['mois'] = $i;
$activity[$i]['nbactivite'] = 0;
} elseif (($indice = intval($activity[$i]['mois'])) != $i) {
$temp = $activity[$i]; // Stocker temporairement les données actuelles
$activity[$i]['mois'] = $i;
$activity[$i]['nbactivite'] = 0;
$activity[$indice]['mois'] = $indice;
$activity[$indice]['nbactivite'] = $temp['nbactivite']; // Restaurer les données
}
$charts[] = ['act' => $activity[$i]['nbactivite'], 'mois' => $activity[$i]['mois']];
$i++;
} }
// $activityGateway = new ActivityGateway(new Connexion(DSN, DB_USER, DB_PASSWORD));
// $listSearch = $activityGateway->getActivity();
// $map = new ActivityMapper();
// $activityGateway = $map->activitySqlToEntity($listSearch);
// $listActivity = [];
// foreach ($activityGateway as $entity) {
// $activity = $map->activityEntityToModel($entity);
// $listActivity[] = ['idactivity' => number_format($activity->getIdActivity()), 'type' => $activity->getType(),
// 'date' => $activity->getDate()->format("D j F Y"), 'heureDebut' => $activity->getHeureDebut()->format("H\h i"), 'heureFin' => $activity->getHeureFin()->format("H\h i"),
// 'effortRessenti' => $activity->getEffortRessenti(), 'variabilite' => $activity->getVariability(), 'variance' => $activity->getVariance(),
// 'ecartType' => $activity->getStandardDeviation(), 'moyenne' => $activity->getAverage(),
// 'max' => $activity->getMaximum(), 'min' => $activity->getMinimum(), 'temperature' => $activity->getAvrTemperature()];
// }
// Log::dd($chart);
return $this->render('./page/home.html.twig',[ return $this->render('./page/home.html.twig',[
'css' => $this->preference->getCookie(), 'css' => $this->preference->getCookie(),
'pp' => "test2", 'pp' => "test2",
@ -78,7 +77,7 @@ class UserController extends BaseController
'role' => "Athlète", 'role' => "Athlète",
'friendship' => [], 'friendship' => [],
'analyzes' => [], 'analyzes' => [],
'chart' => $chart, 'charts' => $charts,
'mails' => [], 'mails' => [],
'users' => [], 'users' => [],
'infoUser' => [], 'infoUser' => [],

@ -67,7 +67,6 @@
<td>{{analyze.max}} Bpm</td> <td>{{analyze.max}} Bpm</td>
<td>{{analyze.min}} Bpm</td> <td>{{analyze.min}} Bpm</td>
<td>{{analyze.temperature}} °C</td> <td>{{analyze.temperature}} °C</td>
<td>{{analyze.idactivity}} °C</td>
<td><a href="/analyze?id={{ analyze.idactivity }}">En savoir plus</a></td> <td><a href="/analyze?id={{ analyze.idactivity }}">En savoir plus</a></td>
</tr> </tr>
{% endfor %} {% endfor %}

@ -17,36 +17,36 @@
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</ol> </ol>
<div class="card-body"> <div class="card-body">
<table id="datatablesSimple" class="datatable-table"> {# <table id="datatablesSimple" class="datatable-table">#}
<thead> {# <thead>#}
<tr> {# <tr>#}
<th>id FC</th> {# <th>id FC</th>#}
<th>altitude</th> {# <th>altitude</th>#}
<th>temps</th> {# <th>temps</th>#}
<th>Temperature</th> {# <th>Temperature</th>#}
<th>bpm</th> {# <th>bpm</th>#}
<th>longitude</th> {# <th>longitude</th>#}
<th>latitude</th> {# <th>latitude</th>#}
<th>activiteid</th> {# <th>activiteid</th>#}
<th></th> {# <th></th>#}
</tr> {# </tr>#}
</thead> {# </thead>#}
{% for analyze in analyzes %} {# {% for analyze in analyzes %}#}
<tbody> {# <tbody>#}
<tr> {# <tr>#}
<td>{{analyze.idfc}}</td> {# <td>{{analyze.idfc}}</td>#}
<td>{{analyze.altitude}}</td> {# <td>{{analyze.altitude}}</td>#}
<td>{{analyze.temps}}</td> {# <td>{{analyze.temps}}</td>#}
<td>{{analyze.temperature}}</td> {# <td>{{analyze.temperature}}</td>#}
<td>{{analyze.bpm}}</td> {# <td>{{analyze.bpm}}</td>#}
<td>{{analyze.longitude}}</td> {# <td>{{analyze.longitude}}</td>#}
<td>{{analyze.latitude}}</td> {# <td>{{analyze.latitude}}</td>#}
<td>{{analyze.activiteid}}</td> {# <td>{{analyze.activiteid}}</td>#}
<td><a href="/home">Home</a></td> {# <td><a href="/home">Home</a></td>#}
</tr> {# </tr>#}
</tbody> {# </tbody>#}
{% endfor %} {# {% endfor %}#}
</table> {# </table>#}
{# <div>#} {# <div>#}
{# <canvas id="myChart" width="400" height="200">#} {# <canvas id="myChart" width="400" height="200">#}
{# <p>Hello Fallback World</p>#} {# <p>Hello Fallback World</p>#}
@ -84,7 +84,7 @@
{# });#} {# });#}
{# </script>#} {# </script>#}
<div> <div>
<canvas id="myChart" width="400" height="200"> <canvas id="myChart" height="50">
<p>Hello Fallback World</p> <p>Hello Fallback World</p>
</canvas> </canvas>
</div> </div>
@ -109,7 +109,10 @@
datasets: [{ datasets: [{
label: 'Batement par minute', label: 'Batement par minute',
data: data, data: data,
borderWidth: 1 borderWidth: 1,
tension: 0.2,
fill: false,
borderColor: 'rgb(255, 0, 0)'
}] }]
}, },
options: { options: {

@ -21,55 +21,88 @@
<i class="fas fa-chart-area me-1"></i> <i class="fas fa-chart-area me-1"></i>
Stastiques globales Stastiques globales
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div>
<div class="card-body"> <canvas id="myChart" height="50" width="100">
<canvas id="myChart" width="100%" height="40"> <p>Hello Fallback World</p>
</canvas> </canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
const labels = [
{% for chart in charts %}
{{ chart.mois }},
{% endfor %}
];
const data = [
{% for chart in charts %}
{{ chart.act }},
{% endfor %}
];
<script> console.log(labels); // Vérifiez les valeurs dans la console
document.addEventListener("DOMContentLoaded", function () { console.log(data); // Vérifiez les valeurs dans la console
const ctx = document.getElementById('myAreaChart').getContext('2d');
const myChart = new Chart(ctx, { new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: chart.map(entry => entry.mois), labels: labels,
datasets: [{ datasets: [{
label: 'Nombre d\'activité', label: 'Activité du mois',
data: { data: data,
{% for analyze in analyzes %} borderWidth: 1,
{{ chart.act }}, tension: 0.2,
{{ chart.mois }}, fill: false,
{% endfor %} borderColor: 'rgb(255, 0, 0)'
}, }]
fill: false },
}] options: {
scales: {
x: {
type: 'linear', // Utiliser une échelle linéaire pour les mois
position: 'bottom'
},
y: {
beginAtZero: true
} }
}); }
}); }
</script> });
{# <script>#}
{# const ctx = document.getElementById('myChart');#} {#const ctx = document.getElementById('myChart');#}
{#const labels = [#}
{# {% for chart in charts %}#}
{# '{{ chart.mois }}',#}
{# {% endfor %}#}
{#];#}
{#const data = [#}
{# {% for chart in charts %}#}
{# {{ chart.act }},#}
{# {% endfor %}#}
{#];#}
{# new Chart(ctx, {#} {#new Chart(ctx, {#}
{# type: 'bar',#} {# type: 'line',#}
{# data: {#} {# data: {#}
{# labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],#} {# labels: labels,#}
{# datasets: [{#} {# datasets: [{#}
{# label: '# of Votes',#} {# label: 'Activité du mois',#}
{# data: [12, 19, 3, 5, 2, 3],#} {# data: data,#}
{# borderWidth: 1#} {# borderWidth: 1,#}
{# }]#} {# tension: 0.2,#}
{# },#} {# fill: false,#}
{# options: {#} {# borderColor: 'rgb(255, 0, 0)'#}
{# scales: {#} {# }]#}
{# y: {#} {# },#}
{# beginAtZero: true#} {# options: {#}
{# }#} {# scales: {#}
{# }#} {# y: {#}
{# }#} {# beginAtZero: true#}
{# });#} {# }#}
{# </script>#} {# }#}
{# }#}
{#});#}
</script>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save