feat: filtre par page, multi-courbes chart, tri alphabétique options
- Ajout filtre multiselect par page(s) dans le dashboard analytics - Chart multi-courbes par page quand aucun filtre page sélectionné - Options de pages indépendantes du filtre page (persistent à la sélection) - Options de pages dépendantes du filtre utilisateur - Tracking modal-file avec format "Projet / Label" dans dialog.js - Tri alphabétique des options du filtre par page - Fix user list 500 error (email string, client field check) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
de104dc7dd
commit
084bb46379
6 changed files with 157 additions and 55 deletions
|
|
@ -95,15 +95,39 @@ class AnalyticsStore
|
|||
});
|
||||
}
|
||||
|
||||
// Filtrer par nom de page
|
||||
if (!empty($filters['pageNames'])) {
|
||||
$pageNames = $filters['pageNames'];
|
||||
$visits = array_filter($visits, function($visit) use ($pageNames) {
|
||||
$name = $visit->pageName ?: $visit->pageUrl;
|
||||
return in_array($name, $pageNames);
|
||||
});
|
||||
}
|
||||
|
||||
return array_values($visits);
|
||||
}
|
||||
|
||||
public static function getAggregatedData(array $filters = []): array
|
||||
{
|
||||
self::ensureFileExists();
|
||||
$visits = self::getVisits($filters);
|
||||
|
||||
// Visites par jour
|
||||
// Visits sans filtre pageNames → pour construire la liste des pages (options)
|
||||
$filtersWithoutPages = $filters;
|
||||
unset($filtersWithoutPages['pageNames']);
|
||||
$allVisits = self::getVisits($filtersWithoutPages);
|
||||
|
||||
$visitsByPage = [];
|
||||
foreach ($allVisits as $visit) {
|
||||
$page = $visit->pageName ?: $visit->pageUrl;
|
||||
$visitsByPage[$page] = ($visitsByPage[$page] ?? 0) + 1;
|
||||
}
|
||||
arsort($visitsByPage);
|
||||
|
||||
// Visits avec tous les filtres → pour les stats affichées
|
||||
$visits = !empty($filters['pageNames'])
|
||||
? self::getVisits($filters)
|
||||
: $allVisits;
|
||||
|
||||
$visitsByDay = [];
|
||||
foreach ($visits as $visit) {
|
||||
$day = date('Y-m-d', strtotime($visit->timestamp));
|
||||
|
|
@ -111,38 +135,27 @@ class AnalyticsStore
|
|||
}
|
||||
ksort($visitsByDay);
|
||||
|
||||
// Visites par page
|
||||
$visitsByPage = [];
|
||||
foreach ($visits as $visit) {
|
||||
$page = $visit->pageName ?: $visit->pageUrl;
|
||||
$visitsByPage[$page] = ($visitsByPage[$page] ?? 0) + 1;
|
||||
}
|
||||
arsort($visitsByPage);
|
||||
|
||||
// Visites par utilisateur
|
||||
$visitsByUser = [];
|
||||
foreach ($visits as $visit) {
|
||||
$visitsByUser[$visit->email] = ($visitsByUser[$visit->email] ?? 0) + 1;
|
||||
}
|
||||
arsort($visitsByUser);
|
||||
|
||||
// Nombre de sessions uniques
|
||||
$uniqueSessions = count(array_unique(array_map(fn($v) => $v->sessionId, $visits)));
|
||||
|
||||
// Visites par type de page
|
||||
$visitsByType = [];
|
||||
// Visites par jour par page (top 10 pages)
|
||||
$topPages = array_keys(array_slice($visitsByPage, 0, 10, true));
|
||||
$visitsByDayByPage = [];
|
||||
foreach ($visits as $visit) {
|
||||
$visitsByType[$visit->pageType] = ($visitsByType[$visit->pageType] ?? 0) + 1;
|
||||
$page = $visit->pageName ?: $visit->pageUrl;
|
||||
if (!in_array($page, $topPages)) continue;
|
||||
$day = date('Y-m-d', strtotime($visit->timestamp));
|
||||
$visitsByDayByPage[$page][$day] = ($visitsByDayByPage[$page][$day] ?? 0) + 1;
|
||||
}
|
||||
foreach ($visitsByDayByPage as &$days) {
|
||||
ksort($days);
|
||||
}
|
||||
arsort($visitsByType);
|
||||
|
||||
return [
|
||||
'totalVisits' => count($visits),
|
||||
'uniqueSessions' => $uniqueSessions,
|
||||
'visitsByDay' => $visitsByDay,
|
||||
'visitsByPage' => array_slice($visitsByPage, 0, 10),
|
||||
'visitsByUser' => $visitsByUser,
|
||||
'visitsByType' => $visitsByType,
|
||||
'visitsByPage' => array_slice($visitsByPage, 0, 10, true),
|
||||
'visitsByDayByPage' => $visitsByDayByPage,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
.k-analytics-dashboard{padding:1.5rem 0}.k-analytics-filters{display:flex;gap:1rem;margin-bottom:1.5rem}.k-analytics-filters label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--color-text-light)}.k-date-inputs-wrapper{display:flex;column-gap:1rem}.k-analytics-filters input[type=date]{padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--rounded);font-size:.875rem;background:var(--color-background)}.k-analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:1.5rem}.k-analytics-user-filter{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--color-text-light);margin-left:2rem}.k-field-name-user{min-width:15rem}.k-analytics-card{background:var(--color-background);border-radius:var(--rounded);padding:1.5rem;box-shadow:var(--shadow)}.k-analytics-card h3{font-size:.75rem;font-weight:600;color:var(--color-text-light);margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.5px}.k-analytics-metric{font-size:2.5rem;font-weight:700;color:var(--color-text);line-height:1}.k-analytics-chart-container{background:var(--color-background);border-radius:var(--rounded);padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow)}.k-analytics-chart-container h3{font-size:.875rem;font-weight:600;color:var(--color-text);margin:0 0 1rem}.k-analytics-chart-container canvas{max-height:300px}.k-analytics-empty{background:var(--color-background);border-radius:var(--rounded);padding:3rem;text-align:center;box-shadow:var(--shadow)}.k-analytics-empty p{margin:0;color:var(--color-text-light)}.k-analytics-list{list-style:none;margin:0;padding:0}.k-analytics-list li{display:flex;justify-content:space-between;padding:.375rem 0;border-bottom:1px solid var(--color-border);font-size:.875rem}.k-analytics-list li:last-child{border-bottom:none}.k-analytics-list-label{color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:1rem}.k-analytics-list-value{font-weight:600;color:var(--color-text);flex-shrink:0}
|
||||
.k-analytics-dashboard{padding:1.5rem 0}.k-analytics-filters{display:flex;gap:1rem;margin-bottom:1.5rem}.k-analytics-filters label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--color-text-light)}.k-date-inputs-wrapper{display:flex;column-gap:1rem}.k-analytics-filters input[type=date]{padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--rounded);font-size:.875rem;background:var(--color-background)}.k-analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:1.5rem}.k-analytics-user-filter{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--color-text-light);margin-left:2rem}.k-field-name-user,.k-field-name-page{min-width:15rem}.k-analytics-page-filter{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--color-text-light);margin-left:2rem}.k-analytics-card{background:var(--color-background);border-radius:var(--rounded);padding:1.5rem;box-shadow:var(--shadow)}.k-analytics-card h3{font-size:.75rem;font-weight:600;color:var(--color-text-light);margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.5px}.k-analytics-metric{font-size:2.5rem;font-weight:700;color:var(--color-text);line-height:1}.k-analytics-chart-container{background:var(--color-background);border-radius:var(--rounded);padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow)}.k-analytics-chart-container h3{font-size:.875rem;font-weight:600;color:var(--color-text);margin:0 0 1rem}.k-analytics-chart-container canvas{max-height:300px}.k-analytics-empty{background:var(--color-background);border-radius:var(--rounded);padding:3rem;text-align:center;box-shadow:var(--shadow)}.k-analytics-empty p{margin:0;color:var(--color-text-light)}.k-analytics-list{list-style:none;margin:0;padding:0}.k-analytics-list li{display:flex;justify-content:space-between;padding:.375rem 0;border-bottom:1px solid var(--color-border);font-size:.875rem}.k-analytics-list li:last-child{border-bottom:none}.k-analytics-list-label{color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:1rem}.k-analytics-list-value{font-weight:600;color:var(--color-text);flex-shrink:0}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -43,6 +43,10 @@ return [
|
|||
$filters['emails'] = explode(',', $_GET['emails']);
|
||||
}
|
||||
|
||||
if (!empty($_GET['pageNames'])) {
|
||||
$filters['pageNames'] = explode(',', $_GET['pageNames']);
|
||||
}
|
||||
|
||||
$data = $analyticsPage->getAnalyticsData($filters);
|
||||
|
||||
$users = [];
|
||||
|
|
|
|||
|
|
@ -28,6 +28,16 @@
|
|||
@input="onUserSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="k-analytics-page-filter">
|
||||
<k-multiselect-field
|
||||
:options="pageOptions"
|
||||
:value="selectedPages"
|
||||
label="Filtrer par page(s)"
|
||||
search="true"
|
||||
name="page"
|
||||
@input="onPageSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!hasData" class="k-analytics-empty">
|
||||
|
|
@ -81,6 +91,7 @@ import {
|
|||
CategoryScale,
|
||||
Filler,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'chart.js';
|
||||
|
||||
Chart.register(
|
||||
|
|
@ -90,9 +101,23 @@ Chart.register(
|
|||
LinearScale,
|
||||
CategoryScale,
|
||||
Filler,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
const CHART_COLORS = [
|
||||
'#4271ae',
|
||||
'#c82829',
|
||||
'#8959a8',
|
||||
'#4d9a0f',
|
||||
'#f5871f',
|
||||
'#3e999f',
|
||||
'#718c00',
|
||||
'#a3685a',
|
||||
'#525252',
|
||||
'#eab700',
|
||||
];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
analyticsData: {
|
||||
|
|
@ -109,6 +134,7 @@ export default {
|
|||
chart: null,
|
||||
users: [],
|
||||
selectedEmails: [],
|
||||
selectedPages: [],
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -123,6 +149,12 @@ export default {
|
|||
userOptions() {
|
||||
return this.users.map((u) => ({ value: u.email, text: u.label }));
|
||||
},
|
||||
pageOptions() {
|
||||
if (!this.data?.visitsByPage) return [];
|
||||
return Object.keys(this.data.visitsByPage)
|
||||
.map((p) => ({ value: p, text: p }))
|
||||
.sort((a, b) => a.text.localeCompare(b.text));
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -156,6 +188,11 @@ export default {
|
|||
this.fetchData();
|
||||
},
|
||||
|
||||
onPageSelectionChange(pages) {
|
||||
this.selectedPages = pages;
|
||||
this.fetchData();
|
||||
},
|
||||
|
||||
async fetchData() {
|
||||
const params = new URLSearchParams();
|
||||
if (this.startDate) params.set('startDate', this.startDate);
|
||||
|
|
@ -163,6 +200,9 @@ export default {
|
|||
if (this.selectedEmails.length) {
|
||||
params.set('emails', this.selectedEmails.join(','));
|
||||
}
|
||||
if (this.selectedPages.length) {
|
||||
params.set('pageNames', this.selectedPages.join(','));
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/analytics-data.json?${params}`);
|
||||
|
|
@ -203,32 +243,58 @@ export default {
|
|||
const canvas = this.$refs.chartCanvas;
|
||||
if (!canvas || !this.data?.visitsByDay) return;
|
||||
|
||||
const labels = Object.keys(this.data.visitsByDay).map((d) =>
|
||||
this.formatDateFR(d)
|
||||
);
|
||||
const values = Object.values(this.data.visitsByDay);
|
||||
const allDays = Object.keys(this.data.visitsByDay);
|
||||
if (!allDays.length) return;
|
||||
|
||||
if (!labels.length) return;
|
||||
const labels = allDays.map((d) => this.formatDateFR(d));
|
||||
const showPerPage =
|
||||
this.selectedPages.length === 0 && this.data.visitsByDayByPage;
|
||||
|
||||
const maxValue = Math.max(...values);
|
||||
let datasets;
|
||||
let maxValue;
|
||||
|
||||
if (showPerPage) {
|
||||
const pages = Object.keys(this.data.visitsByDayByPage);
|
||||
datasets = pages.map((page, i) => {
|
||||
const color = CHART_COLORS[i % CHART_COLORS.length];
|
||||
const values = allDays.map(
|
||||
(day) => this.data.visitsByDayByPage[page]?.[day] || 0
|
||||
);
|
||||
return {
|
||||
label: page,
|
||||
data: values,
|
||||
borderColor: color,
|
||||
backgroundColor: 'transparent',
|
||||
fill: false,
|
||||
tension: 0.3,
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 4,
|
||||
borderWidth: 2,
|
||||
};
|
||||
});
|
||||
maxValue = Math.max(
|
||||
...datasets.flatMap((ds) => ds.data)
|
||||
);
|
||||
} else {
|
||||
const values = Object.values(this.data.visitsByDay);
|
||||
datasets = [
|
||||
{
|
||||
label: 'Visites',
|
||||
data: values,
|
||||
borderColor: '#4271ae',
|
||||
backgroundColor: 'rgba(66, 113, 174, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 5,
|
||||
},
|
||||
];
|
||||
maxValue = Math.max(...values);
|
||||
}
|
||||
|
||||
this.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Visites',
|
||||
data: values,
|
||||
borderColor: '#4271ae',
|
||||
backgroundColor: 'rgba(66, 113, 174, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 5,
|
||||
},
|
||||
],
|
||||
},
|
||||
data: { labels, datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
|
|
@ -237,6 +303,11 @@ export default {
|
|||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
legend: {
|
||||
display: showPerPage,
|
||||
position: 'bottom',
|
||||
labels: { boxWidth: 12, padding: 12 },
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
|
|
@ -300,10 +371,20 @@ export default {
|
|||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.k-field-name-user {
|
||||
.k-field-name-user,
|
||||
.k-field-name-page {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
.k-analytics-page-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-light);
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.k-analytics-card {
|
||||
background: var(--color-background);
|
||||
border-radius: var(--rounded);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue