Compare commits
No commits in common. "17bf3f83c42c8cd17aff647d4aa08c357ac570f3" and "de104dc7dd6863d006ec2d20fedb56ca0de3b82d" have entirely different histories.
17bf3f83c4
...
de104dc7dd
7 changed files with 71 additions and 12019 deletions
|
|
@ -1,9 +1,5 @@
|
|||
title: Analytics
|
||||
icon: chart
|
||||
buttons: false
|
||||
|
||||
status:
|
||||
- unlisted
|
||||
|
||||
columns:
|
||||
- width: 1/1
|
||||
|
|
|
|||
|
|
@ -95,39 +95,15 @@ 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);
|
||||
|
||||
// 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;
|
||||
|
||||
// Visites par jour
|
||||
$visitsByDay = [];
|
||||
foreach ($visits as $visit) {
|
||||
$day = date('Y-m-d', strtotime($visit->timestamp));
|
||||
|
|
@ -135,25 +111,38 @@ class AnalyticsStore
|
|||
}
|
||||
ksort($visitsByDay);
|
||||
|
||||
$uniqueSessions = count(array_unique(array_map(fn($v) => $v->sessionId, $visits)));
|
||||
|
||||
// Visites par jour par page (toutes les pages)
|
||||
$visitsByDayByPage = [];
|
||||
// Visites par page
|
||||
$visitsByPage = [];
|
||||
foreach ($visits as $visit) {
|
||||
$page = $visit->pageName ?: $visit->pageUrl;
|
||||
$day = date('Y-m-d', strtotime($visit->timestamp));
|
||||
$visitsByDayByPage[$page][$day] = ($visitsByDayByPage[$page][$day] ?? 0) + 1;
|
||||
$visitsByPage[$page] = ($visitsByPage[$page] ?? 0) + 1;
|
||||
}
|
||||
foreach ($visitsByDayByPage as &$days) {
|
||||
ksort($days);
|
||||
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 = [];
|
||||
foreach ($visits as $visit) {
|
||||
$visitsByType[$visit->pageType] = ($visitsByType[$visit->pageType] ?? 0) + 1;
|
||||
}
|
||||
arsort($visitsByType);
|
||||
|
||||
return [
|
||||
'totalVisits' => count($visits),
|
||||
'uniqueSessions' => $uniqueSessions,
|
||||
'visitsByDay' => $visitsByDay,
|
||||
'visitsByPage' => array_slice($visitsByPage, 0, 10, true),
|
||||
'visitsByDayByPage' => $visitsByDayByPage,
|
||||
'visitsByPage' => array_slice($visitsByPage, 0, 10),
|
||||
'visitsByUser' => $visitsByUser,
|
||||
'visitsByType' => $visitsByType,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,133 +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: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
.k-date-inputs-wrapper {
|
||||
display: flex;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
.k-analytics-filters input[type='date'] {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--rounded);
|
||||
font-size: 0.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: 0.5rem;
|
||||
font-size: 0.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: 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);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.k-analytics-card h3 {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-light);
|
||||
margin: 0 0 0.5rem 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.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-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.k-analytics-chart-header h3 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
.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: 0.375rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: 0.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{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}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -43,10 +43,6 @@ return [
|
|||
$filters['emails'] = explode(',', $_GET['emails']);
|
||||
}
|
||||
|
||||
if (!empty($_GET['pageNames'])) {
|
||||
$filters['pageNames'] = explode(',', $_GET['pageNames']);
|
||||
}
|
||||
|
||||
$data = $analyticsPage->getAnalyticsData($filters);
|
||||
|
||||
$users = [];
|
||||
|
|
|
|||
|
|
@ -28,16 +28,6 @@
|
|||
@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">
|
||||
|
|
@ -61,18 +51,7 @@
|
|||
</div>
|
||||
|
||||
<div class="k-analytics-chart-container">
|
||||
<div class="k-analytics-chart-header">
|
||||
<h3>Visites par jour</h3>
|
||||
<k-toggle-field
|
||||
v-if="selectedPages.length === 0"
|
||||
:value="showTopPagesOnly"
|
||||
before="Moyenne"
|
||||
after="Pages les + visitées"
|
||||
text=" "
|
||||
name="topPages"
|
||||
@input="onToggleTopPages"
|
||||
/>
|
||||
</div>
|
||||
<h3>Visites par jour</h3>
|
||||
<canvas ref="chartCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
|
|
@ -102,7 +81,6 @@ import {
|
|||
CategoryScale,
|
||||
Filler,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'chart.js';
|
||||
|
||||
Chart.register(
|
||||
|
|
@ -112,23 +90,9 @@ Chart.register(
|
|||
LinearScale,
|
||||
CategoryScale,
|
||||
Filler,
|
||||
Tooltip,
|
||||
Legend
|
||||
Tooltip
|
||||
);
|
||||
|
||||
const CHART_COLORS = [
|
||||
'#4271ae',
|
||||
'#c82829',
|
||||
'#8959a8',
|
||||
'#4d9a0f',
|
||||
'#f5871f',
|
||||
'#3e999f',
|
||||
'#718c00',
|
||||
'#a3685a',
|
||||
'#525252',
|
||||
'#eab700',
|
||||
];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
analyticsData: {
|
||||
|
|
@ -145,8 +109,6 @@ export default {
|
|||
chart: null,
|
||||
users: [],
|
||||
selectedEmails: [],
|
||||
selectedPages: [],
|
||||
showTopPagesOnly: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -161,12 +123,6 @@ 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: {
|
||||
|
|
@ -200,16 +156,6 @@ export default {
|
|||
this.fetchData();
|
||||
},
|
||||
|
||||
onPageSelectionChange(pages) {
|
||||
this.selectedPages = pages;
|
||||
this.fetchData();
|
||||
},
|
||||
|
||||
onToggleTopPages(value) {
|
||||
this.showTopPagesOnly = value;
|
||||
this.renderChart();
|
||||
},
|
||||
|
||||
async fetchData() {
|
||||
const params = new URLSearchParams();
|
||||
if (this.startDate) params.set('startDate', this.startDate);
|
||||
|
|
@ -217,9 +163,6 @@ 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}`);
|
||||
|
|
@ -260,61 +203,32 @@ export default {
|
|||
const canvas = this.$refs.chartCanvas;
|
||||
if (!canvas || !this.data?.visitsByDay) return;
|
||||
|
||||
const allDays = Object.keys(this.data.visitsByDay);
|
||||
if (!allDays.length) return;
|
||||
const labels = Object.keys(this.data.visitsByDay).map((d) =>
|
||||
this.formatDateFR(d)
|
||||
);
|
||||
const values = Object.values(this.data.visitsByDay);
|
||||
|
||||
const labels = allDays.map((d) => this.formatDateFR(d));
|
||||
const showPerPage =
|
||||
this.selectedPages.length === 0 &&
|
||||
this.showTopPagesOnly &&
|
||||
this.data.visitsByDayByPage;
|
||||
if (!labels.length) return;
|
||||
|
||||
let datasets;
|
||||
let maxValue;
|
||||
|
||||
if (showPerPage) {
|
||||
const topPages = this.data.visitsByPage
|
||||
? Object.keys(this.data.visitsByPage)
|
||||
: [];
|
||||
const pages = topPages;
|
||||
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);
|
||||
}
|
||||
const maxValue = Math.max(...values);
|
||||
|
||||
this.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: { labels, datasets },
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
|
|
@ -323,11 +237,6 @@ export default {
|
|||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
legend: {
|
||||
display: showPerPage,
|
||||
position: 'bottom',
|
||||
labels: { boxWidth: 12, padding: 12 },
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
|
|
@ -391,20 +300,10 @@ export default {
|
|||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.k-field-name-user,
|
||||
.k-field-name-page {
|
||||
.k-field-name-user {
|
||||
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);
|
||||
|
|
@ -436,18 +335,11 @@ export default {
|
|||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.k-analytics-chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.k-analytics-chart-header h3 {
|
||||
.k-analytics-chart-container h3 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.k-analytics-chart-container canvas {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { defineStore } from 'pinia';
|
|||
import { ref, computed, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useAnalyticsStore } from './analytics';
|
||||
import { usePageStore } from './page';
|
||||
|
||||
export const useDialogStore = defineStore('dialog', () => {
|
||||
const content = ref(null);
|
||||
|
|
@ -154,14 +153,11 @@ export const useDialogStore = defineStore('dialog', () => {
|
|||
watch(openedFile, (newFile) => {
|
||||
if (newFile) {
|
||||
const analytics = useAnalyticsStore();
|
||||
const pageStore = usePageStore();
|
||||
const currentPath = route.path;
|
||||
const projectTitle = pageStore.page?.title || 'Projet';
|
||||
const fileLabel = newFile.label?.length ? newFile.label : (newFile.name || newFile.filename);
|
||||
analytics.trackVisit(
|
||||
`${currentPath}#file-${newFile.uuid}`,
|
||||
'modal-file',
|
||||
`${projectTitle} / ${fileLabel}`
|
||||
newFile.name || newFile.filename
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue