From 82df7497ee5cdcbefe068fb7dc27e4a8011bafbc Mon Sep 17 00:00:00 2001
From: Noah Lancien <noah.lancien@ldc.fr>
Date: Wed, 23 Aug 2023 13:29:54 +0000
Subject: [PATCH] Fixed Dashboard

---
 .../Controllers/Bo/DashboardController.php    | 17 ++++--
 .../bo/components/DashboardChartComponent.vue | 58 +++++++++++++++++++
 resources/views/bo/dashboard/index.blade.php  | 51 ++++------------
 3 files changed, 82 insertions(+), 44 deletions(-)
 create mode 100644 resources/ts/bo/components/DashboardChartComponent.vue

diff --git a/app/Http/Controllers/Bo/DashboardController.php b/app/Http/Controllers/Bo/DashboardController.php
index 9e0d5c0..c68c025 100644
--- a/app/Http/Controllers/Bo/DashboardController.php
+++ b/app/Http/Controllers/Bo/DashboardController.php
@@ -10,6 +10,11 @@ use Illuminate\Support\Facades\DB;
 
 class DashboardController extends Controller
 {
+    /**
+     * Dashboard Page
+     *
+     * @return \Illuminate\Contracts\View\View
+     */
     public function index()
     {
         // Pour les stats.
@@ -20,7 +25,7 @@ class DashboardController extends Controller
             ->groupByRaw("DATE(created_at), user")->get();
         $statsUnique                = [];
         foreach ($participationsUniquePerDay as $participationPerDay) {
-            $dateUnique               = Carbon::parse($participationPerDay->date)->format('d/m/Y');
+            $dateUnique               = $participationPerDay->date->format('d/m/Y');
             $statsUnique[$dateUnique] = isset($statsUnique[$dateUnique]) ? $statsUnique[$dateUnique] + 1 : 1;
         }
         $participationsUnique = Participation::selectRaw("DISTINCT user_id  AS user, COUNT(*) AS count")
@@ -36,18 +41,20 @@ class DashboardController extends Controller
 
         // Tableau des dates comprises dans la table participation.
         foreach ($participations as $participation) {
-            $datesParticipations[Carbon::parse($participation->date)->format('d/m/Y')] = $participation->count;
+            $datesParticipations[$participation->date->format('d/m/Y')] = $participation->count;
         }
 
         // Création des tableaux avec toutes les dates depuis le début du jeu et le nombre de participations associées.
-        $date    = Carbon::parse($settings->start_date);
-        $dateFin = now() < $settings->end_date ? Carbon::now() : Carbon::parse($settings->end_date);
+        $date    = $settings->start_date;
+        $dateFin = now() < $settings->end_date ? Carbon::now() : $settings->end_date;
 
         // Récupération des 3 codes EAN les plus utilisés.
         $codesEan = Participation::select(
             DB::raw('COUNT(code_ean_id) AS nb_usage, code_ean_id')
         )->groupBy('code_ean_id')->orderByDesc('nb_usage')->limit(3)->get();
 
+
+        // TODO : Carbon Interval.
         // Génération des tableaux de date depuis le début du jeu.
         $dates       = [];
         $count       = [];
@@ -55,7 +62,7 @@ class DashboardController extends Controller
         while ($dateFin > $date) {
             $dates[]       = $date->format('d/m/Y');
             $count[]       = isset($datesParticipations[$date->format('d/m/Y')]) ?
-            $datesParticipations[$date->format('d/m/Y')] : 0;
+                $datesParticipations[$date->format('d/m/Y')] : 0;
             $countUnique[] = isset($statsUnique[$date->format('d/m/Y')]) ? $statsUnique[$date->format('d/m/Y')] : 0;
             $date->addDay();
         }
diff --git a/resources/ts/bo/components/DashboardChartComponent.vue b/resources/ts/bo/components/DashboardChartComponent.vue
new file mode 100644
index 0000000..7875003
--- /dev/null
+++ b/resources/ts/bo/components/DashboardChartComponent.vue
@@ -0,0 +1,58 @@
+<template>
+  <canvas id="dailyParticipation" />
+</template>
+
+<script lang="ts">
+import { Chart, registerables } from "chart.js";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  mounted() {
+    const json = String(this.$attrs.json ?? "{}");
+    const data = JSON.parse(json);
+    this.dates = data.dates;
+    this.count = data.count;
+    this.countUnique = data.countUnique;
+    console.log(this.dates, this.count, this.countUnique);
+    Chart.register(...registerables);
+
+    const ctx = (document.getElementById("dailyParticipation") as HTMLCanvasElement).getContext("2d");
+    new Chart(ctx as CanvasRenderingContext2D, {
+      type: "line",
+      data: {
+        labels: this.dates,
+        datasets: [
+          {
+            label: "Nombre de participation(s)",
+            data: this.count,
+
+            borderColor: [
+              "rgba(52, 146, 224, 1)",
+            ],
+            borderWidth: 1
+          },
+          {
+            label: "Nombre de participation(s) unique(s)",
+            data: this.countUnique,
+
+            borderColor: [
+              "rgba(186, 0, 0, 1)",
+            ],
+            borderWidth: 1
+          }]
+      }
+    });
+  },
+  data(): {
+    dates: any;
+    count: any;
+    countUnique: any;
+  } {
+    return {
+      dates: null,
+      count: null,
+      countUnique: null,
+    };
+  },
+});
+</script>
diff --git a/resources/views/bo/dashboard/index.blade.php b/resources/views/bo/dashboard/index.blade.php
index c79a87a..ac7d31a 100644
--- a/resources/views/bo/dashboard/index.blade.php
+++ b/resources/views/bo/dashboard/index.blade.php
@@ -2,17 +2,17 @@
 
 @section('content')
     <div class="d-flex justify-content-between">
-        <h2>Tableau de bord</h2>
+        <h2>{{ __('Dashboard') }}</h2>
         <a href="{{ route('home') }}" class="btn btn-primary text-decoration-none m-0 me-2">
             {{ __('Accéder au jeu')}}
         </a>
     </div>
     <hr>
     <p>
-        Nombre de participations total : <b>{{ $totalParticipation }}</b><br>
-        Nombre de participations moyenne par joueur : <b>{{ $avgParticipUser }}</b><br>
+        {{ __('Nombre de participations total') }} : <b>{{ $totalParticipation }}</b><br>
+        {{ __('Nombre de participations moyenne par joueur') }} : <b>{{ $avgParticipUser }}</b><br>
         @if ($settings->use_ean_codes === 1)
-            Top 3 des codes EAN les plus utilisés :
+        {{ __('Top 3 des codes EAN les plus utilisés') }} :
             <ul class="list-group list-group-horizontal">
                 @foreach ($codesEan as $codeEan)
                 <li class="list-group-item">{{ $codeEan->code_ean_value }} : <b>{{ $codeEan->nb_usage }}</b></li>
@@ -21,39 +21,12 @@
         @endif
     </p>
     <br>
-    <canvas id="dailyParticipation"></canvas>
+    @php
+        $data = [
+            'dates' => $dates,
+            'count' => $count,
+            'countUnique' => $countUnique
+        ]
+    @endphp
+    <div class="dashboard-chart" data-json='@json($data)'></div>
 @endsection
-
-@push('scripts')
-    <script>
-        let dates = @json($dates);
-        let count = @json($count);
-        let countUnique = @json($countUnique);
-
-        const ctx = document.getElementById('dailyParticipation').getContext('2d');
-        let dailyParticipation = new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: dates,
-                datasets: [{
-                    label: 'Nombre de participation(s)',
-                    data: count,
-
-                    borderColor: [
-                        'rgba(52, 146, 224, 1)',
-                    ],
-                    borderWidth: 1
-                },
-                {
-                    label: 'Nombre de participation(s) unique(s)',
-                    data: countUnique,
-
-                    borderColor: [
-                        'rgba(186, 0, 0, 1)',
-                    ],
-                    borderWidth: 1
-                }]
-            }
-        });
-    </script>
-@endpush