ajout du suivi utilisateur
This commit is contained in:
@@ -19,10 +19,18 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
<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"
|
<div id="chart-container"
|
||||||
style="height: 100px; display: flex; align-items: flex-end; gap: 3px;">
|
style="height: 100px; display: flex; align-items: flex-end; gap: 3px;">
|
||||||
</div>
|
</div>
|
||||||
<div id="chart-labels" style="display: flex; gap: 3px; margin-top: 4px;"></div>
|
<div id="chart-labels" style="display: flex; gap: 3px; margin-top: 4px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="chart-unavailable" class="d-none">
|
<div id="chart-unavailable" class="d-none">
|
||||||
<div class="alert alert-info mb-0">
|
<div class="alert alert-info mb-0">
|
||||||
<i class="bi bi-info-circle"></i>
|
<i class="bi bi-info-circle"></i>
|
||||||
@@ -67,6 +75,20 @@ var currentPeriod = 'today';
|
|||||||
|
|
||||||
/* --- Graphique CSS pur --- */
|
/* --- 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) {
|
function renderChart(data) {
|
||||||
var container = document.getElementById('chart-container');
|
var container = document.getElementById('chart-container');
|
||||||
var labelsEl = document.getElementById('chart-labels');
|
var labelsEl = document.getElementById('chart-labels');
|
||||||
@@ -79,6 +101,7 @@ function renderChart(data) {
|
|||||||
labelsEl.textContent = '';
|
labelsEl.textContent = '';
|
||||||
|
|
||||||
if (!data || data.length === 0) {
|
if (!data || data.length === 0) {
|
||||||
|
renderYAxis(0);
|
||||||
var msg = document.createElement('span');
|
var msg = document.createElement('span');
|
||||||
msg.className = 'text-muted small';
|
msg.className = 'text-muted small';
|
||||||
msg.textContent = 'Aucune donnee disponible.';
|
msg.textContent = 'Aucune donnee disponible.';
|
||||||
@@ -88,6 +111,7 @@ function renderChart(data) {
|
|||||||
|
|
||||||
var max = 1;
|
var max = 1;
|
||||||
data.forEach(function(d) { if ((d.count || 0) > max) max = d.count; });
|
data.forEach(function(d) { if ((d.count || 0) > max) max = d.count; });
|
||||||
|
renderYAxis(max);
|
||||||
|
|
||||||
data.forEach(function(item) {
|
data.forEach(function(item) {
|
||||||
var count = item.count || 0;
|
var count = item.count || 0;
|
||||||
@@ -132,6 +156,7 @@ function renderWeekly(weekly) {
|
|||||||
if (allNull) {
|
if (allNull) {
|
||||||
container.style.display = 'none';
|
container.style.display = 'none';
|
||||||
labelsEl.style.display = 'none';
|
labelsEl.style.display = 'none';
|
||||||
|
document.getElementById('chart-yaxis').textContent = '';
|
||||||
unavail.classList.remove('d-none');
|
unavail.classList.remove('d-none');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user