templates/users.html

@@ -19,10 +19,18 @@
         </select>
     </div>
     <div class="card-body">
-        <div id="chart-container"
-             style="height: 100px; display: flex; align-items: flex-end; gap: 3px;">
+        <div style="display: flex; gap: 6px;">
+            <div id="chart-yaxis"
+                 style="display: flex; flex-direction: column; justify-content: space-between;
+                        align-items: flex-end; width: 20px; height: 100px; flex-shrink: 0;">
+            </div>
+            <div style="flex: 1; min-width: 0;">
+                <div id="chart-container"
+                     style="height: 100px; display: flex; align-items: flex-end; gap: 3px;">
+                </div>
+                <div id="chart-labels" style="display: flex; gap: 3px; margin-top: 4px;"></div>
+            </div>
         </div>
-        <div id="chart-labels" style="display: flex; gap: 3px; margin-top: 4px;"></div>
         <div id="chart-unavailable" class="d-none">
             <div class="alert alert-info mb-0">
                 <i class="bi bi-info-circle"></i>
@@ -67,6 +75,20 @@ var currentPeriod = 'today';
 
 /* --- Graphique CSS pur --- */
 
+function renderYAxis(max) {
+    var yaxis = document.getElementById('chart-yaxis');
+    yaxis.textContent = '';
+    var values = [max, Math.round(max / 2), 0];
+    values.forEach(function(v) {
+        var lbl = document.createElement('div');
+        lbl.style.fontSize  = '0.6rem';
+        lbl.style.color     = '#6c757d';
+        lbl.style.lineHeight = '1';
+        lbl.textContent = v;
+        yaxis.appendChild(lbl);
+    });
+}
+
 function renderChart(data) {
     var container = document.getElementById('chart-container');
     var labelsEl  = document.getElementById('chart-labels');
@@ -79,6 +101,7 @@ function renderChart(data) {
     labelsEl.textContent  = '';
 
     if (!data || data.length === 0) {
+        renderYAxis(0);
         var msg = document.createElement('span');
         msg.className = 'text-muted small';
         msg.textContent = 'Aucune donnee disponible.';
@@ -88,6 +111,7 @@ function renderChart(data) {
 
     var max = 1;
     data.forEach(function(d) { if ((d.count || 0) > max) max = d.count; });
+    renderYAxis(max);
 
     data.forEach(function(item) {
         var count = item.count || 0;
@@ -132,6 +156,7 @@ function renderWeekly(weekly) {
     if (allNull) {
         container.style.display = 'none';
         labelsEl.style.display  = 'none';
+        document.getElementById('chart-yaxis').textContent = '';
         unavail.classList.remove('d-none');
         return;
     }