Affichage d'une tooltip au survol des données pour indiquer sur quel produit/période on se situe.

Les tables sont trop grandes pour voir continuellement, lors du scroll, les mois et les noms des produits. 

La solution des tooltips est encore à améliorer car le scroll vers la droite décale les tooltips, ce qui gêne la lecture.

Une autre solution à explorer serait de mettre le header et le nom des produits en position fixe. Ce sera plus long à ettre en place par contre.

backend/controllers/StatsController.php

                     ->orderBy('order ASC')
                     ->all() ;
         
+        $arr_mois = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] ;
+        
         return $this->render('produits', [
             'year' => $year,
+            'arr_mois' => $arr_mois,
             'produits' => $produits,
             'arr_produits' => $arr_produits,
             'empty' => $empty

backend/views/stats/produits.php

     <div class="alert alert-warning">Aucune statistique disponible pour cette période</div>
 <?php else: ?>
     
-<table class="table table-bordered table-hover header-fixed">
+<table id="table-stats-produits" class="table table-bordered table-hover header-fixed">
     <thead>
         <tr class="mois">
             <th></th>
-            <th colspan="2">Janvier</th>
-            <th colspan="2">Février</th>
-            <th colspan="2">Mars</th>
-            <th colspan="2">Avril</th>
-            <th colspan="2">Mai</th>
-            <th colspan="2">Juin</th>
-            <th colspan="2">Juillet</th>
-            <th colspan="2">Août</th>
-            <th colspan="2">Septembre</th>
-            <th colspan="2">Octobre</th>
-            <th colspan="2">Novembre</th>
-            <th colspan="2">Décembre</th>
+            <?php foreach($arr_mois as $m): ?>
+                <th colspan="2"><?= $m; ?></th>
+            <?php endforeach; ?>
         </tr>
         <tr class="sub-head">
             <th></th>
     <tbody>
         <?php foreach($produits as $produit_current):  ?>
         <tr>
-            <td class="nom"><?= $produit_current['nom'] ?></td>
-            <?php foreach($arr_produits as $arr_produit_mois): 
+            <td class="nom"><?= Html::encode($produit_current['nom']) ?></td>
+            <?php foreach($arr_produits as $mois => $arr_produit_mois): 
                 $find_max = false ;
                 $find_commandes = false ;
             ?>
                 <!-- max -->
-                <?php foreach($arr_produit_mois['max'] as $produit): ?>
+                <?php foreach($arr_produit_mois['max'] as $produit): 
+                    $tooltip = 'data-toggle="tooltip" data-placement="top" data-original-title="'.Html::encode($produit_current['nom']).' / '.$arr_mois[$mois - 1] .' '. $year.' / Maximum"' ;
+                ?>
                     <?php if($produit['nom'] == $produit_current['nom']): 
                         $find_max = true ;
                     ?>
-                        <td class="align-center"><?= $produit['total'] ?></td>
+                        <td class="align-center">
+                            <div <?= $tooltip; ?>><?= $produit['total'] ?></div>
+                        </td>
                     <?php endif; ?>
                 <?php endforeach; ?>
-                <?php if(!$find_max): ?><td class="align-center">0</td><?php endif; ?>
+                <?php if(!$find_max): ?><td class="align-center"><div <?= $tooltip; ?>>0</div></td><?php endif; ?>
                         
                 <!-- commandes -->
-                <?php foreach($arr_produit_mois['commandes'] as $produit): ?>
+                <?php foreach($arr_produit_mois['commandes'] as $produit): 
+                    $tooltip = 'data-toggle="tooltip" data-placement="top" data-original-title="'.Html::encode($produit_current['nom']).' / '. $arr_mois[$mois - 1] . ' '. $year .' / Commandés"' ;
+                ?>
                     <?php if($produit['nom'] == $produit_current['nom']): 
                         $find_commandes = true ;
                     ?>
-                        <td class="align-center"><?= $produit['total'] ?></td>
+                        <td class="align-center">
+                            <div <?= $tooltip ?> ><?= $produit['total'] ?></div>
+                        </td>
                     <?php endif; ?>
                 <?php endforeach; ?>        
-                <?php if(!$find_commandes): ?><td class="align-center">0</td><?php endif; ?>
+                <?php if(!$find_commandes): ?><td class="align-center"><div <?= $tooltip ?> >0</div></td><?php endif; ?>
             <?php endforeach; ?>
         </tr>
         <?php endforeach; ?>

backend/web/css/screen.css

 }
 
 /* stats */
-/* line 1347, ../sass/screen.scss */
-.stats-produits {
-    /*.header-fixed {
-        width: 100% 
-    }
-
-    .header-fixed > thead,
-    .header-fixed > tbody,
-    .header-fixed > thead > tr,
-    .header-fixed > tbody > tr,
-    .header-fixed > thead > tr > th,
-    .header-fixed > tbody > tr > td {
-        display: block;
-    }
-
-    .header-fixed > tbody > tr:after,
-    .header-fixed > thead > tr:after {
-        content: ' ';
-        display: block;
-        visibility: hidden;
-        clear: both;
-    }
-
-    .header-fixed > tbody {
-        overflow-y: auto;
-        height: 150px;
-    }
-
-    .header-fixed > tbody > tr > td,
-    .header-fixed > thead > tr.sub-head > th {
-        width: 4.16%;
-        float: left;
-    }
-    
-    .header-fixed > thead > tr.mois > th {
-        width: 7.69%;
-        float: left;
-    }*/
-}
 /* line 1349, ../sass/screen.scss */
 .stats-produits #nav-year {
   float: right;

backend/web/js/lechatdesnoisettes.js

 };
 
 function chat_tooltip() {
-    $('[data-toggle="tooltip"]').tooltip();
+    $('[data-toggle="tooltip"]').tooltip({container:'body'});
 }
 
 function chat_nl2br(str, is_xhtml) {   

backend/web/sass/screen.scss

     td.align-center {
         text-align: center ;
     }
-    
-    
-    /*.header-fixed {
-        width: 100% 
-    }
-
-    .header-fixed > thead,
-    .header-fixed > tbody,
-    .header-fixed > thead > tr,
-    .header-fixed > tbody > tr,
-    .header-fixed > thead > tr > th,
-    .header-fixed > tbody > tr > td {
-        display: block;
-    }
-
-    .header-fixed > tbody > tr:after,
-    .header-fixed > thead > tr:after {
-        content: ' ';
-        display: block;
-        visibility: hidden;
-        clear: both;
-    }
-
-    .header-fixed > tbody {
-        overflow-y: auto;
-        height: 150px;
-    }
-
-    .header-fixed > tbody > tr > td,
-    .header-fixed > thead > tr.sub-head > th {
-        width: 4.16%;
-        float: left;
-    }
-    
-    .header-fixed > thead > tr.mois > th {
-        width: 7.69%;
-        float: left;
-    }*/
 }