🚀 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\Session;
use DateTime;
use Manager\UserManager;
use Shared\Attributes\Route;
use Shared\Validation;
@ -51,26 +52,24 @@ class UserController extends BaseController
{
$athleteGateway = new AthleteGateway(new Connexion(DSN, DB_USER, DB_PASSWORD));
$activity = $athleteGateway->getListActivity('1');//$currentUser->getId()
// Log::dd($activity);
$chart = [];
foreach($activity as $act){
$chart[] = ['act' => $act['nbactivite'], 'mois' => date('m', $act['mois'])];
$charts = [];
$i = 0;
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',[
'css' => $this->preference->getCookie(),
'pp' => "test2",
@ -78,7 +77,7 @@ class UserController extends BaseController
'role' => "Athlète",
'friendship' => [],
'analyzes' => [],
'chart' => $chart,
'charts' => $charts,
'mails' => [],
'users' => [],
'infoUser' => [],

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

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

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

Loading…
Cancel
Save