diff --git a/.forgejo/workflows/deploy-demo.yml b/.forgejo/workflows/deploy-demo.yml
new file mode 100644
index 0000000..ca3c523
--- /dev/null
+++ b/.forgejo/workflows/deploy-demo.yml
@@ -0,0 +1,53 @@
+name: Deploy Production
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy to Production
+    runs-on: docker
+    container:
+      image: forgejo-ci-node:latest
+    steps:
+      - name: Checkout code
+        run: |
+          git clone --depth 1 --branch main https://forge.studio-variable.com/${{ github.repository }}.git .
+          ls -la
+
+      - name: Install npm dependencies
+        run: npm install
+
+      - name: Build frontend (production)
+        run: npm run build
+
+      - name: Install composer dependencies
+        run: |
+          cd dist
+          composer install --no-dev --optimize-autoloader
+
+      - name: Deploy via rsync
+        env:
+          USERNAME: ${{ secrets.DEMO_USERNAME }}
+          PASSWORD: ${{ secrets.DEMO_PASSWORD }}
+          HOST: ${{ secrets.DEMO_HOST }}
+        run: |
+          cd dist
+          lftp -c "
+          set ftp:ssl-allow no;
+          open -u $USERNAME,$PASSWORD $PRODUCTION_HOST;
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
+            assets assets;
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
+            -x 'accounts/' \
+            -x 'cache/' \
+            -x 'sessions/' \
+            site site;
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
+            kirby kirby;
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
+            vendor vendor;
+          put index.php -o index.php;
+          quit"
diff --git a/.forgejo/workflows/deploy-preprod.yml b/.forgejo/workflows/deploy-preprod.yml
new file mode 100644
index 0000000..cbe2808
--- /dev/null
+++ b/.forgejo/workflows/deploy-preprod.yml
@@ -0,0 +1,64 @@
+name: Deploy Preprod
+
+on:
+  push:
+    branches:
+      - preprod
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy to Preprod
+    runs-on: docker
+    container:
+      image: forgejo-ci-node:latest
+    steps:
+      - name: Checkout code
+        run: |
+          git clone --depth 1 --branch preprod https://forge.studio-variable.com/${{ github.repository }}.git .
+          ls -la
+
+      - name: Install npm dependencies
+        run: npm install
+
+      - name: Build frontend (preprod)
+        run: npm run build:preprod
+
+      - name: Install composer dependencies
+        run: |
+          cd dist
+          composer install --no-dev --optimize-autoloader
+
+      - name: Deploy via rsync
+        env:
+          USERNAME: ${{ secrets.USERNAME }}
+          PASSWORD: ${{ secrets.PASSWORD }}
+          HOST: ${{ secrets.HOST }}
+          PREPROD_PATH: ${{ secrets.PREPROD_PATH }}
+        run: |
+          cd dist
+
+          echo "Deploying site/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O --no-perms --no-owner --no-group \
+            --include 'accounts/' \
+            --exclude 'accounts/*' \
+            --include 'sessions/' \
+            --exclude 'sessions/*' \
+            --include 'cache/' \
+            --exclude 'cache/*' \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            site/ $USERNAME@$HOST:$PREPROD_PATH/site/
+
+          echo "Deploying vendor/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            vendor/ $USERNAME@$HOST:$PREPROD_PATH/vendor/
+
+          echo "Deploying kirby/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            kirby/ $USERNAME@$HOST:$PREPROD_PATH/kirby/
+
+          echo "Deploying assets/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            assets/ $USERNAME@$HOST:$PREPROD_PATH/assets/
diff --git a/.forgejo/workflows/deploy-prod.yml b/.forgejo/workflows/deploy-prod.yml
new file mode 100644
index 0000000..d407912
--- /dev/null
+++ b/.forgejo/workflows/deploy-prod.yml
@@ -0,0 +1,64 @@
+name: Deploy Production
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy to Production
+    runs-on: docker
+    container:
+      image: forgejo-ci-node:latest
+    steps:
+      - name: Checkout code
+        run: |
+          git clone --depth 1 --branch main https://forge.studio-variable.com/${{ github.repository }}.git .
+          ls -la
+
+      - name: Install npm dependencies
+        run: npm install
+
+      - name: Build frontend (production)
+        run: npm run build
+
+      - name: Install composer dependencies
+        run: |
+          cd dist
+          composer install --no-dev --optimize-autoloader
+
+      - name: Deploy via rsync
+        env:
+          USERNAME: ${{ secrets.USERNAME }}
+          PASSWORD: ${{ secrets.PASSWORD }}
+          HOST: ${{ secrets.HOST }}
+          PROD_PATH: ${{ secrets.PROD_PATH }}
+        run: |
+          cd dist
+
+          echo "Deploying site/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            --exclude 'accounts/*' \
+            --exclude 'cache/*' \
+            --exclude 'sessions/*' \
+            --include 'accounts/' \
+            --include 'cache/' \
+            --include 'sessions/' \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            site/ $USERNAME@$HOST:$PROD_PATH/site/
+
+          echo "Deploying vendor/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            vendor/ $USERNAME@$HOST:$PROD_PATH/vendor/
+
+          echo "Deploying kirby/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            kirby/ $USERNAME@$HOST:$PROD_PATH/kirby/
+
+          echo "Deploying assets/"
+          sshpass -p "$PASSWORD" rsync -az --delete -O \
+            -e 'ssh -p 2244 -o StrictHostKeyChecking=no' \
+            assets/ $USERNAME@$HOST:$PROD_PATH/assets/
diff --git a/.gitignore b/.gitignore
index c192e22..15c0a18 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,18 +62,21 @@ public/.idea
 
 public/site/cache/*
 !public/site/cache/index.html
+!public/site/cache/.gitkeep
 
 # Accounts
 # ---------------
 
 public/site/accounts/*
 !public/site/accounts/index.html
+!public/site/accounts/.gitkeep
 
 # Sessions
 # ---------------
 
 public/site/sessions/*
 !public/site/sessions/index.html
+!public/site/sessions/.gitkeep
 
 # License
 # ---------------
@@ -91,3 +94,10 @@ public/vendor
 # Content
 # ---------------
 /public/content
+
+# Claude settings
+# ---------------
+.claude
+/.claude/*
+
+
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..7fe2bf4
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,344 @@
+# Design to Pack - Vue d'ensemble du projet
+
+Plateforme de gestion de projets de création de flacons de parfum pour Pochet du Courval.
+
+## Stack technique
+
+| Couche | Technologies |
+|--------|-------------|
+| **Backend** | Kirby CMS 4 (PHP), flat-file database |
+| **Frontend** | Vue 3 + Vite 7, Pinia, Vue Router 4, PrimeVue 4.0 |
+| **PDF** | @vue-pdf-viewer 2.5 |
+| **3D** | Three.js (vue interactive 360) |
+| **Déploiement** | GitLab CI/CD, rsync vers serveur |
+
+---
+
+## Structure du projet
+
+```
+design-to-pack/
+├── src/                          # App Vue.js
+│   ├── assets/css/               # Styles globaux
+│   ├── components/               # Composants réutilisables
+│   │   ├── comments/             # Système de commentaires
+│   │   ├── design-to-light/      # Feature DTL
+│   │   ├── inspirations/         # Galerie inspirations
+│   │   ├── notifications/        # Notifications
+│   │   └── project/              # Composants projet
+│   │       ├── cards/            # Cartes par type d'étape
+│   │       ├── brief/            # Brief client (moodboard)
+│   │       └── virtual-sample/   # Échantillon virtuel 3D
+│   ├── router/                   # Vue Router
+│   ├── stores/                   # Pinia stores
+│   ├── utils/                    # Utilitaires
+│   ├── views/                    # Pages principales
+│   ├── main.js                   # Point d'entrée
+│   └── App.vue                   # Composant racine
+│
+├── public/                       # Kirby CMS
+│   ├── content/                  # Données (flat-file)
+│   │   ├── projects/             # Pages projets
+│   │   ├── clients/              # Pages clients
+│   │   ├── design-to-light/      # Page DTL
+│   │   └── inspirations/         # Galerie inspirations
+│   ├── site/
+│   │   ├── blueprints/           # Schémas de données
+│   │   │   ├── pages/            # Blueprints des pages
+│   │   │   ├── users/            # Blueprints utilisateurs
+│   │   │   └── files/            # Blueprints fichiers
+│   │   ├── templates/            # Templates PHP + JSON
+│   │   ├── controllers/          # Contrôleurs
+│   │   ├── models/               # Modèles PHP (Project, Client)
+│   │   ├── plugins/              # Plugins custom
+│   │   ├── snippets/             # Fragments réutilisables
+│   │   └── config/               # Configuration + routes
+│   └── media/                    # Fichiers uploadés
+│
+├── package.json
+├── vite.config.js
+└── .gitlab-ci.yml
+```
+
+---
+
+## Plugins Kirby custom
+
+### 1. `classes/` - Classes partagées
+Classes de données utilisées par comments et notifications.
+
+| Classe | Rôle |
+|--------|------|
+| `Author` | Auteur (name, email, uuid, role) |
+| `Position` | Position x/y + pageIndex (marqueurs sur PDF) |
+| `Location` | Localisation (page, file, parent) |
+| `PageDetails` | Détails de page |
+| `FileDetails` | Détails de fichier |
+| `ProjectDetails` | Détails de projet |
+
+### 2. `comments/` - Système de commentaires
+Plugin `adrienpayet/kirby4-comments`
+
+**Classes:**
+- `BaseComment` - Classe de base
+- `Comment` - Commentaire avec replies
+- `Reply` - Réponse à un commentaire
+
+**Routes:**
+| Route | Fichier | Description |
+|-------|---------|-------------|
+| `POST /create-comment.json` | `routes/create.php` | Créer un commentaire |
+| `POST /update-comment.json` | `routes/update.php` | Modifier un commentaire |
+| `POST /delete-comment.json` | `routes/delete.php` | Supprimer un commentaire |
+| `POST /reply-comment.json` | `routes/reply.php` | Répondre à un commentaire |
+
+**Stockage:** Les commentaires sont stockés en YAML dans les métadonnées des fichiers.
+
+### 3. `notifications/` - Système de notifications
+Plugin `adrienpayet/pdc-notifications`
+
+**Classes:**
+- `Notification` - Notification (type, location, text, author, date, readby[])
+- `NotificationsPage` - Base pour pages avec notifications (extends Page)
+
+**Méthodes NotificationsPage:**
+- `createNotification($data)` - Créer une notification
+- `deleteNotification($id)` - Supprimer une notification
+- `readNotification($id)` - Marquer comme lue (ajoute userUuid à readby)
+- `readAllNotifications()` - Tout marquer comme lu
+
+**Routes:**
+| Route | Description |
+|-------|-------------|
+| `POST /read-notification.json` | Marquer une notification comme lue |
+| `POST /read-all-notifications.json` | Tout marquer comme lu |
+
+### 4. `user-projects/` - Projets autorisés par utilisateur
+Plugin `adrienpayet/pdc-authorized-projects`
+
+**User methods:**
+- `currentProjects()` - Projets actifs (listed) accessibles à l'utilisateur
+- `archivedProjects()` - Projets archivés (unlisted) accessibles
+
+Logique: Admin = tous les projets, autres = seulement projets assignés.
+
+### 5. `helpers/` - Fonctions utilitaires
+
+| Fonction | Description |
+|----------|-------------|
+| `getFileData($file, $preserveQuality)` | Normalise les données fichier (thumb webp, cover, comments) |
+| `getGlobalEvaluation($numberedGrade)` | Convertit note numérique en lettre A-E avec mention |
+| `processDTLProposals($page)` | Traite les propositions Design to Light |
+| `refreshProjectStepsCache($project, $steps)` | Rafraîchit le cache des étapes |
+
+### 6. `icons/` - Icônes custom panel
+Plugin `adrienpayet/pochet-icons` - Icônes personnalisées pour le panel Kirby.
+
+### 7. `kql/` - Kirby Query Language
+Plugin externe pour requêtes type GraphQL.
+
+### 8. `refresh-cache-button/` - Bouton refresh cache
+Plugin externe ajoutant un bouton de rafraîchissement du cache dans le panel.
+
+---
+
+## Modèles de données
+
+### Utilisateurs (3 rôles)
+
+| Rôle | Accès |
+|------|-------|
+| `admin` | Tous les projets, panel complet |
+| `pochet` | Projets assignés uniquement, panel limité |
+| `client` | Ses projets uniquement, pas de panel |
+
+### Projet (ProjectPage)
+Hérite de `NotificationsPage`.
+
+**Champs principaux:**
+- `title`, `status` (draft/listed/unlisted)
+- `client` - Lien vers ClientPage
+- `currentStep` - Étape courante
+- `isDTLEnabled` - Design to Light activé
+
+**Étapes (children):**
+1. `client-brief` - Brief client (PDF + moodboard)
+2. `proposal` - Proposition commerciale (PDFs)
+3. `extended-brief` - Brief étendu
+4. `industrial-ideation` - Idéation industrielle (optionnel)
+5. `virtual-sample` - Échantillon virtuel (pistes dynamiques + statiques)
+6. `physical-sample` - Échantillon physique (médias)
+
+### Client (ClientPage)
+- `logo`, `title`
+- `projects()` - Tous les projets
+- `projectsListed()` / `projectsUnlisted()` - Filtres par statut
+
+---
+
+## Stores Pinia
+
+| Store | Fichier | Rôle |
+|-------|---------|------|
+| `api` | `stores/api.js` | Communication API (fetch, post, comments, notifications) |
+| `user` | `stores/user.js` | Utilisateur courant, permissions |
+| `page` | `stores/page.js` | Données de la page courante |
+| `projects` | `stores/projects.js` | Liste des projets |
+| `dialog` | `stores/dialog.js` | État des modales (contenu, fichier, commentaires) |
+| `brief` | `stores/brief.js` | Gestion du brief client |
+| `designToLight` | `stores/designToLight.js` | Feature DTL |
+| `notifications` | `stores/notifications.js` | Notifications non lues |
+| `virtualSample` | `stores/virtualSample.js` | État échantillon virtuel |
+| `addImagesModal` | `stores/addImagesModal.js` | Modal ajout images |
+| `project` | `stores/project.js` | Utilitaires projet |
+
+---
+
+## Routes Vue
+
+| Path | Vue | Description |
+|------|-----|-------------|
+| `/` | `Home.vue` | Liste des projets |
+| `/login` | `Login.vue` | Authentification |
+| `/account` | `Account.vue` | Compte utilisateur |
+| `/notifications` | `Notifications.vue` | Centre de notifications |
+| `/inspirations` | `Inspirations.vue` | Galerie d'inspirations |
+| `/design-to-light` | `DesignToLight.vue` | Feature DTL |
+| `/projects/:id` | `Kanban.vue` | Détail projet (kanban) |
+| `/projects/:id/client-brief` | `Brief.vue` | Brief client |
+| `/projects/:id/extended-brief` | `Brief.vue` | Brief étendu |
+
+---
+
+## API Endpoints
+
+### Authentification
+- `POST /login.json` - Connexion (email, password)
+- `GET /logout` - Déconnexion
+
+### Pages (JSON)
+- `GET /{uri}.json` - Données page + user
+
+### Commentaires
+- `POST /create-comment.json`
+- `POST /update-comment.json`
+- `POST /delete-comment.json`
+- `POST /reply-comment.json`
+
+### Notifications
+- `POST /read-notification.json`
+- `POST /read-all-notifications.json`
+
+### Fichiers
+- `POST /upload-pdf.json`
+- `POST /upload-images.json`
+- `POST /remove-file.json`
+
+### Actions
+- `POST /save-page.json`
+- `POST /save-file.json`
+- `POST /validate-brief.json`
+- `POST /toggle-favorite.json`
+- `POST /request-project-creation.json`
+- `POST /request-optimization-appointment.json`
+
+---
+
+## Design to Light (DTL)
+
+Système d'évaluation avancée des designs de flacons.
+
+**Notation:**
+- Note globale : A (8-10), B (6-8), C (4-6), D (2-4), E (0-2)
+- Indicateurs : Design global, Bague, Épaule, Colonnes & Arêtes, Pied, Fond de Verre
+- Position : Complexité, Poids
+
+**Propositions DTL liées à:**
+- Proposition commerciale (PDF)
+- Idéation industrielle (PDF)
+- Échantillon virtuel - piste dynamique
+- Échantillon virtuel - piste statique
+
+---
+
+## Fichiers clés à connaître
+
+### Frontend
+- `src/main.js` - Init app
+- `src/router/router.js` - Guard + setup
+- `src/router/routes.js` - Définition routes
+- `src/stores/api.js` - Toute la comm API
+- `src/components/Menu.vue` - Navigation latérale
+- `src/components/project/DialogWrapper.vue` - Wrapper modales
+
+### Backend
+- `public/site/config/config.php` - Routes, hooks, config
+- `public/site/controllers/site.php` - Contrôleur principal
+- `public/site/models/project.php` - Logique projet
+- `public/site/plugins/helpers/index.php` - Fonctions utilitaires
+- `public/site/blueprints/pages/project.yml` - Structure projet
+
+---
+
+## Développement local
+
+```bash
+# Backend
+cd public
+composer install
+php -S localhost:8888 kirby/router.php
+
+# Frontend
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run build          # Production
+npm run build:preprod  # Staging (avec sourcemaps)
+```
+
+---
+
+## Notes importantes
+
+1. **Cache**: Les étapes projet sont cachées. Invalidation automatique via hooks Kirby.
+2. **Permissions**: Filtrées côté serveur selon le rôle utilisateur.
+3. **Commentaires**: Positionnés en % (x, y) + pageIndex pour les PDFs multi-pages.
+4. **Notifications**: Stockées par projet, trackées par user UUID dans `readby[]`.
+5. **Virtual Sample**: Pistes dynamiques = pages enfants, pistes statiques = fichiers.
+
+---
+
+## Préférences de code et standards
+
+### Principes généraux
+
+**Clarté avant tout**
+- Privilégier des noms de variables et fonctions explicites
+- Éviter les commentaires sauf en cas de nécessité absolue
+- Le code doit être auto-documenté par des noms clairs
+
+**Organisation du code**
+- Factoriser le code en petites fonctions bien nommées
+- Éviter les blocs de code longs et complexes dans les hooks de lifecycle
+- Une fonction = une responsabilité claire
+
+**Ce qui est considéré comme "bricolage" (à éviter)**
+- Paramètres d'URL pour gérer des états applicatifs
+- Commentaires qui expliquent ce que fait le code au lieu de nommer correctement
+- Abstractions prématurées ou sur-ingénierie
+
+### Style de communication
+
+**Feedback direct**
+- Pas de politesses inutiles
+- Dire immédiatement si quelque chose ne va pas
+- Tester tout de suite et signaler les problèmes
+
+**Qualité attendue**
+- Standards élevés sur la qualité du code
+- Pas de code médiocre accepté
+- Exigence de clarté et d'explicité constante
diff --git a/package-lock.json b/package-lock.json
index c374fad..7bc1fc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "three": "^0.168.0",
         "uniqid": "^5.4.0",
         "vue": "^3.5.6",
+        "vue-i18n": "^11.2.8",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
@@ -542,6 +543,50 @@
         "@swc/helpers": "^0.5.0"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.2.8.tgz",
+      "integrity": "sha512-nBq6Y1tVkjIUsLsdOjDSJj4AsjvD0UG3zsg9Fyc+OivwlA/oMHSKooUy9tpKj0HqZ+NWFifweHavdljlBLTwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.2.8",
+        "@intlify/shared": "11.2.8"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.2.8.tgz",
+      "integrity": "sha512-A5n33doOjmHsBtCN421386cG1tWp5rpOjOYPNsnpjIJbQ4POF0QY2ezhZR9kr0boKwaHjbOifvyQvHj2UTrDFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.2.8",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.2.8.tgz",
+      "integrity": "sha512-l6e4NZyUgv8VyXXH4DbuucFOBmxLF56C/mqh2tvApbzl2Hrhi1aTDcuv5TKdxzfHYmpO3UB0Cz04fgDT9vszfw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -1857,6 +1902,26 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.8.tgz",
+      "integrity": "sha512-vJ123v/PXCZntd6Qj5Jumy7UBmIuE92VrtdX+AXr+1WzdBHojiBxnAxdfctUFL+/JIN+VQH4BhsfTtiGsvVObg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.2.8",
+        "@intlify/shared": "11.2.8",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
diff --git a/package.json b/package.json
index db18c29..8f71718 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "three": "^0.168.0",
     "uniqid": "^5.4.0",
     "vue": "^3.5.6",
+    "vue-i18n": "^11.2.8",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
diff --git a/public/.user.ini b/public/.user.ini
new file mode 100644
index 0000000..082ba05
--- /dev/null
+++ b/public/.user.ini
@@ -0,0 +1,2 @@
+; Augmentation temporaire de la limite mémoire pour le chargement des notifications
+memory_limit = 512M
diff --git a/public/site/cache/index.html b/public/site/accounts/.gitkeep
similarity index 100%
rename from public/site/cache/index.html
rename to public/site/accounts/.gitkeep
diff --git a/public/site/blueprints/pages/client-brief.yml b/public/site/blueprints/pages/client-brief.yml
index 7574be8..d7b2100 100644
--- a/public/site/blueprints/pages/client-brief.yml
+++ b/public/site/blueprints/pages/client-brief.yml
@@ -24,6 +24,18 @@ tabs:
             type: hidden
           isValidated:
             type: hidden
+          validatedBy:
+            type: hidden
+          validatedByName:
+            type: hidden
+          validatedByEmail:
+            type: hidden
+          validatedAt:
+            type: hidden
+          validationReadby:
+            type: hidden
+          validationDialogUri:
+            type: hidden
           pdf:
             label: PDF
             type: files
diff --git a/public/site/blueprints/pages/extended-brief.yml b/public/site/blueprints/pages/extended-brief.yml
index b65d99f..88ce3b2 100644
--- a/public/site/blueprints/pages/extended-brief.yml
+++ b/public/site/blueprints/pages/extended-brief.yml
@@ -22,9 +22,34 @@ tabs:
         fields:
           stepName:
             type: hidden
+          isValidated:
+            type: hidden
+          # Champs pour notification "content" (brief validé)
+          validatedBy:
+            type: hidden
+          validatedByName:
+            type: hidden
+          validatedByEmail:
+            type: hidden
+          validatedAt:
+            type: hidden
+          validationReadby:
+            type: hidden
+          validationDialogUri:
+            type: hidden
           pdf:
             label: PDF
             type: files
             multiple: false
             uploads: pdf
+          description:
+            type: textarea
+            size: tiny
+            buttons: false
+          moodboard:
+            label: Images
+            type: files
+            template: image
+            layout: cards
+            size: medium
   files: tabs/files
diff --git a/public/site/blueprints/pages/project.yml b/public/site/blueprints/pages/project.yml
index 946e238..6243b53 100644
--- a/public/site/blueprints/pages/project.yml
+++ b/public/site/blueprints/pages/project.yml
@@ -21,6 +21,7 @@ tabs:
         fields:
           lastCacheUpdate:
             type: hidden
+          # Champs pour project-request
           isClientRequest:
             type: hidden
             default: "false"
@@ -30,6 +31,32 @@ tabs:
             disabled: true
             when:
               isClientRequest: "true"
+          requestAuthor:
+            type: hidden
+          requestAuthorName:
+            type: hidden
+          requestAuthorEmail:
+            type: hidden
+          requestDate:
+            type: hidden
+          requestReadby:
+            type: hidden
+          # Champs pour appointment-request (DTL)
+          hasOptimizationRequest:
+            type: hidden
+            default: "false"
+          optimizationRequestDetails:
+            type: hidden
+          optimizationAuthor:
+            type: hidden
+          optimizationAuthorName:
+            type: hidden
+          optimizationAuthorEmail:
+            type: hidden
+          optimizationDate:
+            type: hidden
+          optimizationReadby:
+            type: hidden
           currentStep:
             label: Étape en cours
             type: radio
@@ -58,6 +85,10 @@ tabs:
               query: page.logo.toFile
             layout: cardlets
             required: true
+          users:
+            label: Utilisateurs assignés
+            type: users
+            multiple: true
 
       - width: 2/3
         sections:
diff --git a/public/site/blueprints/users/client.yml b/public/site/blueprints/users/client.yml
index 9476739..f321069 100644
--- a/public/site/blueprints/users/client.yml
+++ b/public/site/blueprints/users/client.yml
@@ -36,7 +36,7 @@ sections:
           fr: Projet(s) en cours
           en: Current project(s)
         link: https://designtopack.morphozbygroupepochet.com/
-        value: "{{ user.projects.toPages.count }}"
+        value: "{{ user.currentProjects.count }}"
         icon: folder
   content:
     label: ' '
@@ -52,8 +52,3 @@ sections:
         layout: cardlets
         required: true
         width: 1/2
-      projects:
-        label: Projets
-        type: pages
-        query: page('projects').children
-        width: 1/2
diff --git a/public/site/blueprints/users/pochet.yml b/public/site/blueprints/users/pochet.yml
index bd66784..fab2a50 100644
--- a/public/site/blueprints/users/pochet.yml
+++ b/public/site/blueprints/users/pochet.yml
@@ -14,8 +14,8 @@ fields:
       - Sales Manager
     default: Project Panager
     width: 1/4
-  projects:
-    label: Projets
+  hiddenProjects:
+    label: Projets masqués
     type: pages
     query: page('projects').children
     width: 3/4
diff --git a/public/site/cache/.gitkeep b/public/site/cache/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/public/site/config/config.php b/public/site/config/config.php
index 72ea0da..280672f 100644
--- a/public/site/config/config.php
+++ b/public/site/config/config.php
@@ -25,11 +25,14 @@ return [
     'css'      => 'assets/css/panel.css',
     'favicon'  => 'favicon.svg',
     'menu'     => require(__DIR__ . '/menu.php'),
+    'install' => 'true'
   ],
   'routes' => [
+    require(__DIR__ . '/routes/en-locale.php'),
     require(__DIR__ . '/routes/logout.php'),
     require(__DIR__ . '/routes/login.php'),
     require(__DIR__ . '/routes/toggle-favorite.php'),
+    require(__DIR__ . '/routes/toggle-hidden-project.php'),
     require(__DIR__ . '/routes/upload-images.php'),
     require(__DIR__ . '/routes/save-page.php'),
     require(__DIR__ . '/routes/save-file.php'),
@@ -40,6 +43,8 @@ return [
     require(__DIR__ . '/routes/validate-brief.php'),
     require(__DIR__ . '/routes/request-project-creation.php'),
     require(__DIR__ . '/routes/request-optimization-appointment.php'),
+    require(__DIR__ . '/routes/migrate-notifications.php'),
+    require(__DIR__ . '/routes/migrate-user-projects.php'),
   ],
   'hooks' => [
     'page.create:after'  => require_once(__DIR__ . '/hooks/create-steps.php'),
diff --git a/public/site/config/hooks/file-update--regenerate-project-steps-cache.php b/public/site/config/hooks/file-update--regenerate-project-steps-cache.php
index ab09290..c30f93d 100644
--- a/public/site/config/hooks/file-update--regenerate-project-steps-cache.php
+++ b/public/site/config/hooks/file-update--regenerate-project-steps-cache.php
@@ -3,7 +3,9 @@
 // file.update:after
 return function ($newFile, $oldFile) {
   $project = $newFile->parent()->template() == 'project' ? $newFile->parent() : $newFile->parent()->parents()->findBy('template', 'project');
-  if ($project) {    
-    $steps = $project->rebuildStepsCache();
+  if ($project) {
+    $project->rebuildStepsCache();
+    // Invalider aussi le cache des notifications (commentaires sur fichiers, etc.)
+    $project->invalidateNotificationsCache();
   }
 };
\ No newline at end of file
diff --git a/public/site/config/hooks/page-update--regenerate-project-steps-cache.php b/public/site/config/hooks/page-update--regenerate-project-steps-cache.php
index bde728d..f8d9675 100644
--- a/public/site/config/hooks/page-update--regenerate-project-steps-cache.php
+++ b/public/site/config/hooks/page-update--regenerate-project-steps-cache.php
@@ -1,9 +1,11 @@
 <?php
 
 // page.update:after && page.changeStatus:after
-return function($newPage, $oldPage) {  
+return function($newPage, $oldPage) {
   $project = $newPage->template() == 'project' ? $newPage : $newPage->parents()->findBy('template', 'project');
   if ($project) {
-    $steps = $project->rebuildStepsCache();
+    $project->rebuildStepsCache();
+    // Invalider aussi le cache des notifications (briefs validés, etc.)
+    $project->invalidateNotificationsCache();
   }
 };
\ No newline at end of file
diff --git a/public/site/config/menu.php b/public/site/config/menu.php
index bce7476..8198cbd 100644
--- a/public/site/config/menu.php
+++ b/public/site/config/menu.php
@@ -59,6 +59,15 @@ $menu = [
     }
   ],
   '-',
+  'analytics' => [
+    'label' => 'Analytics',
+    'icon'  => 'chart',
+    'link'  => 'pages/analytics',
+    'current' => function (string $current): bool {
+      $path = Kirby\Cms\App::instance()->path();
+      return Str::contains($path, 'pages/analytics');
+    }
+  ],
   '-',
   'users',
   'system'
diff --git a/public/site/config/routes/en-locale.php b/public/site/config/routes/en-locale.php
new file mode 100644
index 0000000..9391ad1
--- /dev/null
+++ b/public/site/config/routes/en-locale.php
@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Route catch-all pour le préfixe /en/
+ * Permet d'accéder aux pages avec /en/... pour la version anglaise
+ */
+
+return [
+  'pattern' => 'en/(:all?)',
+  'action' => function ($uri = '') {
+    // Si l'URI se termine par .json, chercher la page et retourner le JSON
+    if (str_ends_with($uri, '.json')) {
+      $uri = str_replace('.json', '', $uri);
+      $page = page($uri);
+
+      if (!$page) {
+        // Si pas de page trouvée, essayer avec 'home'
+        if ($uri === '' || $uri === '/') {
+          $page = page('home');
+        } else {
+          return false; // 404
+        }
+      }
+
+      // Retourner la page pour que Kirby serve le template .json.php
+      return $page;
+    }
+
+    // Pour les URLs normales (sans .json), chercher la page
+    $page = page($uri);
+
+    if (!$page) {
+      // Si pas de page trouvée, essayer avec 'home'
+      if ($uri === '' || $uri === '/') {
+        $page = page('home');
+      } else {
+        return false; // 404
+      }
+    }
+
+    // Retourner la page pour que Kirby serve le template .php
+    return $page;
+  }
+];
diff --git a/public/site/config/routes/migrate-notifications.php b/public/site/config/routes/migrate-notifications.php
new file mode 100644
index 0000000..3aa033c
--- /dev/null
+++ b/public/site/config/routes/migrate-notifications.php
@@ -0,0 +1,175 @@
+<?php
+
+/**
+ * Script de migration unique pour le système de notifications dérivées.
+ *
+ * Ce script copie les `readby[]` des anciennes notifications vers les sources de données.
+ * À exécuter une seule fois après le déploiement, puis à supprimer.
+ *
+ * Usage: POST /migrate-notifications.json
+ */
+
+return [
+  'pattern' => 'migrate-notifications.json',
+  'method' => 'POST',
+  'action' => function () {
+    $user = kirby()->user();
+
+    // Vérifier que l'utilisateur est admin
+    if (!$user || $user->role()->id() !== 'admin') {
+      return [
+        'status' => 'error',
+        'message' => 'Cette action nécessite les droits administrateur.'
+      ];
+    }
+
+    $migrated = [
+      'comments' => 0,
+      'replies' => 0,
+      'project-requests' => 0,
+      'appointment-requests' => 0,
+      'content' => 0,
+      'errors' => []
+    ];
+
+    $projects = page('projects')->children();
+
+    foreach ($projects as $project) {
+      // Récupérer les anciennes notifications
+      $notifications = $project->notifications()->yaml() ?? [];
+
+      if (empty($notifications)) {
+        continue;
+      }
+
+      foreach ($notifications as $notification) {
+        try {
+          $type = $notification['type'] ?? 'comment';
+          $id = $notification['id'] ?? null;
+          $readby = $notification['readby'] ?? [];
+
+          if (empty($id) || empty($readby)) {
+            continue;
+          }
+
+          switch ($type) {
+            case 'comment':
+            case 'comment-reply':
+              $fileUuid = $notification['location']['file']['uuid'] ?? null;
+              if (!$fileUuid) continue 2;
+
+              $file = kirby()->file($fileUuid);
+              if (!$file) continue 2;
+
+              $comments = Yaml::decode($file->comments()->value()) ?? [];
+              $updated = false;
+
+              foreach ($comments as &$comment) {
+                // Vérifier si c'est le commentaire principal
+                if ($comment['id'] === $id) {
+                  $existingReadby = $comment['readby'] ?? [];
+                  $comment['readby'] = array_values(array_unique(array_merge($existingReadby, $readby)));
+                  $updated = true;
+                  $migrated['comments']++;
+                  break;
+                }
+
+                // Vérifier dans les réponses
+                foreach ($comment['replies'] ?? [] as &$reply) {
+                  if ($reply['id'] === $id) {
+                    $existingReadby = $reply['readby'] ?? [];
+                    $reply['readby'] = array_values(array_unique(array_merge($existingReadby, $readby)));
+                    $updated = true;
+                    $migrated['replies']++;
+                    break 2;
+                  }
+                }
+              }
+
+              if ($updated) {
+                $file->update(['comments' => $comments]);
+              }
+              break;
+
+            case 'project-request':
+              $existingReadby = $project->requestReadby()->yaml() ?? [];
+              $newReadby = array_values(array_unique(array_merge($existingReadby, $readby)));
+
+              $updateData = ['requestReadby' => $newReadby];
+
+              // Migrer aussi les métadonnées si elles n'existent pas encore
+              if ($project->requestAuthor()->isEmpty() && isset($notification['author'])) {
+                $updateData['requestAuthor'] = $notification['author']['uuid'] ?? '';
+                $updateData['requestAuthorName'] = $notification['author']['name'] ?? '';
+                $updateData['requestAuthorEmail'] = $notification['author']['email'] ?? '';
+                $updateData['requestDate'] = $notification['date'] ?? '';
+              }
+
+              $project->update($updateData);
+              $migrated['project-requests']++;
+              break;
+
+            case 'appointment-request':
+              $existingReadby = $project->optimizationReadby()->yaml() ?? [];
+              $newReadby = array_values(array_unique(array_merge($existingReadby, $readby)));
+
+              $updateData = ['optimizationReadby' => $newReadby];
+
+              // Migrer aussi les métadonnées si elles n'existent pas encore
+              if ($project->optimizationAuthor()->isEmpty() && isset($notification['author'])) {
+                $updateData['optimizationAuthor'] = $notification['author']['uuid'] ?? '';
+                $updateData['optimizationAuthorName'] = $notification['author']['name'] ?? '';
+                $updateData['optimizationAuthorEmail'] = $notification['author']['email'] ?? '';
+                $updateData['optimizationDate'] = $notification['date'] ?? '';
+              }
+
+              $project->update($updateData);
+              $migrated['appointment-requests']++;
+              break;
+
+            case 'content':
+              $briefUri = $notification['location']['page']['uri'] ?? null;
+              if (!$briefUri) continue 2;
+
+              $brief = page($briefUri);
+              if (!$brief) continue 2;
+
+              $existingReadby = $brief->validationReadby()->yaml() ?? [];
+              $newReadby = array_values(array_unique(array_merge($existingReadby, $readby)));
+
+              $updateData = ['validationReadby' => $newReadby];
+
+              // Migrer aussi les métadonnées si elles n'existent pas encore
+              if ($brief->validatedBy()->isEmpty() && isset($notification['author'])) {
+                $updateData['validatedBy'] = $notification['author']['uuid'] ?? '';
+                $updateData['validatedByName'] = $notification['author']['name'] ?? '';
+                $updateData['validatedByEmail'] = $notification['author']['email'] ?? '';
+                $updateData['validatedAt'] = $notification['date'] ?? '';
+              }
+
+              $brief->update($updateData);
+              $migrated['content']++;
+              break;
+          }
+        } catch (\Throwable $th) {
+          $migrated['errors'][] = [
+            'project' => $project->title()->value(),
+            'notification_id' => $id ?? 'unknown',
+            'type' => $type ?? 'unknown',
+            'error' => $th->getMessage()
+          ];
+        }
+      }
+    }
+
+    $total = $migrated['comments'] + $migrated['replies'] +
+             $migrated['project-requests'] + $migrated['appointment-requests'] +
+             $migrated['content'];
+
+    return [
+      'status' => 'success',
+      'message' => "Migration terminée. $total notifications migrées.",
+      'details' => $migrated
+    ];
+  }
+];
diff --git a/public/site/config/routes/migrate-user-projects.php b/public/site/config/routes/migrate-user-projects.php
new file mode 100644
index 0000000..abe71bf
--- /dev/null
+++ b/public/site/config/routes/migrate-user-projects.php
@@ -0,0 +1,75 @@
+<?php
+
+/**
+ * Script de migration : inverse la relation User→Projects en Project→Users.
+ *
+ * Pour chaque user (non-admin) ayant un champ projects non vide,
+ * ajoute ce user dans le champ `users` du projet correspondant.
+ *
+ * Idempotent : pas de doublons si exécuté plusieurs fois.
+ * À supprimer après migration.
+ *
+ * Usage: POST /migrate-user-projects.json
+ */
+
+return [
+  'pattern' => 'migrate-user-projects.json',
+  'method' => 'POST',
+  'action' => function () {
+    $user = kirby()->user();
+
+    if (!$user || $user->role()->id() !== 'admin') {
+      return [
+        'status' => 'error',
+        'message' => 'Cette action nécessite les droits administrateur.'
+      ];
+    }
+
+    $migrated = [];
+    $errors = [];
+
+    $nonAdminUsers = kirby()->users()->filter(fn($u) => $u->role()->id() !== 'admin');
+
+    foreach ($nonAdminUsers as $u) {
+      if (!$u->projects()->exists() || $u->projects()->isEmpty()) {
+        continue;
+      }
+
+      $userProjects = $u->projects()->toPages();
+
+      foreach ($userProjects as $project) {
+        try {
+          $currentUsers = $project->users()->yaml();
+
+          $userUuid = $u->uuid()->toString();
+
+          if (in_array($userUuid, $currentUsers)) {
+            continue;
+          }
+
+          $currentUsers[] = $userUuid;
+          $project->update(['users' => $currentUsers]);
+
+          $migrated[] = [
+            'user' => $u->name()->value(),
+            'email' => $u->email(),
+            'project' => $project->title()->value(),
+          ];
+        } catch (\Throwable $th) {
+          $errors[] = [
+            'user' => $u->email(),
+            'project' => $project->title()->value(),
+            'error' => $th->getMessage()
+          ];
+        }
+      }
+    }
+
+    return [
+      'status' => 'success',
+      'message' => count($migrated) . ' assignations migrées.',
+      'migrated' => $migrated,
+      'errors' => $errors
+    ];
+  }
+];
diff --git a/public/site/config/routes/request-optimization-appointment.php b/public/site/config/routes/request-optimization-appointment.php
index 0cc94c0..d1e4b84 100644
--- a/public/site/config/routes/request-optimization-appointment.php
+++ b/public/site/config/routes/request-optimization-appointment.php
@@ -7,37 +7,26 @@ return [
     $json = file_get_contents('php://input');
     $data = json_decode($json);
 
-    $user = kirby()->user();    
+    $user = kirby()->user();
     $project = page($data->projectUri);
 
+    $date = new DateTime();
+    $formattedDate = $date->format(DateTime::ISO8601);
+
     try {
-      $newProject = $project->update([
+      $project->update([
         "hasOptimizationRequest" => "true",
-        "optimizationRequestDetails" => esc("De la part de " . kirby()->user()->name() . " (" . kirby()->user()->email() . ") : \n\n" . "Objet : " . $data->subject . "\n" . $data->details)
+        "optimizationRequestDetails" => esc("De la part de " . $user->name() . " (" . $user->email() . ") : \n\n" . "Objet : " . $data->subject . "\n" . $data->details),
+        // Métadonnées pour le système de notifications dérivées
+        "optimizationAuthor" => (string) $user->uuid(),
+        "optimizationAuthorName" => (string) $user->name(),
+        "optimizationAuthorEmail" => (string) $user->email(),
+        "optimizationDate" => $formattedDate,
+        "optimizationReadby" => [],
       ]);
-    } catch (\Throwable $th) {
-      return [
-        "status" => "error",
-        "message" => "Can't update project " . $project->title()->value() . ". " . $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine()
-      ];
-    }
 
-    try {
-      $date = new DateTime();
-      $formattedDate = $date->format(DateTime::ISO8601);
-
-      $notificationData = [
-        "location" => [
-          "page" => $newProject
-        ],
-        "date" => (string) $formattedDate,
-        "text" => nl2br("Objet : " . $data->subject . "\n" .  esc($data->details)),
-        "author" => $user,
-        "id" => Str::uuid(),
-        "type" => "appointment-request",
-      ];
-
-      $newProject->createNotification($notificationData);
+      // Note: Les notifications sont maintenant dérivées.
+      // Plus besoin d'appeler createNotification().
 
       return [
         "status" => "success",
@@ -45,7 +34,7 @@ return [
     } catch (\Throwable $th) {
       return [
         "status" => "error",
-        "message" => "Can't create notification. " . $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine()
+        "message" => "Can't update project " . $project->title()->value() . ". " . $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine()
       ];
     }
   }
diff --git a/public/site/config/routes/request-project-creation.php b/public/site/config/routes/request-project-creation.php
index 9a474d7..1b9b378 100644
--- a/public/site/config/routes/request-project-creation.php
+++ b/public/site/config/routes/request-project-creation.php
@@ -11,15 +11,24 @@ return [
 
     $client = kirby()->user()->client()->toPage()->uuid();
 
+    $date = new DateTime();
+    $formattedDate = $date->format(DateTime::ISO8601);
+
     $projectData = [
       "slug" => esc(Str::slug($data->title)),
-      "template" => "project", 
+      "template" => "project",
       "content" => [
         "title" => esc($data->title),
-        "requestDetails" => esc("Demande de " . kirby()->user()->name() . " (" . kirby()->user()->email() . ") : \n\n" . $data->details),
+        "requestDetails" => esc("Demande de " . $user->name() . " (" . $user->email() . ") : \n\n" . $data->details),
         "client" => [$client],
         "isClientRequest" => "true",
-        "isDTLEnabled" => esc($data->isDTLEnabled)
+        "isDTLEnabled" => esc($data->isDTLEnabled),
+        // Métadonnées pour le système de notifications dérivées
+        "requestAuthor" => (string) $user->uuid(),
+        "requestAuthorName" => (string) $user->name(),
+        "requestAuthorEmail" => (string) $user->email(),
+        "requestDate" => $formattedDate,
+        "requestReadby" => [],
       ]
     ];
 
@@ -27,21 +36,8 @@ return [
     try {
       $newProject = $projects->createChild($projectData);
 
-      $date = new DateTime();
-      $formattedDate = $date->format(DateTime::ISO8601);
-
-      $notificationData = [
-        "location" => [
-          "page" => $newProject
-        ],
-        "date" => (string) $formattedDate,
-        "text" => nl2br(esc($data->details)),
-        "author" => $user,
-        "id" => Str::uuid(),
-        "type" => "project-request",
-      ];
-
-      $newProject->createNotification($notificationData);
+      // Note: Les notifications sont maintenant dérivées.
+      // Plus besoin d'appeler createNotification().
 
       return [
         "status" => "success",
diff --git a/public/site/config/routes/toggle-hidden-project.php b/public/site/config/routes/toggle-hidden-project.php
new file mode 100644
index 0000000..cb023e7
--- /dev/null
+++ b/public/site/config/routes/toggle-hidden-project.php
@@ -0,0 +1,60 @@
+<?php
+
+return [
+  'pattern' => '/toggle-hidden-project.json',
+  'method' => 'POST',
+  'action' => function() {
+    $json = file_get_contents("php://input");
+    $data = json_decode($json);
+
+    try {
+      $user = kirby()->user();
+      $projectUuid = $data->projectUuid;
+
+      // Récupérer la collection des projets masqués actuels
+      $hiddenProjects = $user->hiddenProjects()->toPages();
+
+      // Trouver le projet à toggle
+      $projectPage = Find::page($projectUuid);
+
+      if (!$projectPage) {
+        throw new Exception('Projet introuvable');
+      }
+
+      // Toggle: ajouter ou retirer le projet de la collection
+      if ($hiddenProjects->has($projectPage)) {
+        $hiddenProjects->remove($projectPage);
+        $action = 'shown';
+      } else {
+        $hiddenProjects->add($projectPage);
+        $action = 'hidden';
+      }
+
+      // Convertir la collection en array puis en YAML
+      $array = $hiddenProjects->toArray();
+      $yaml = Data::encode($array, 'yaml');
+
+      // Mettre à jour l'utilisateur
+      $user->update([
+        'hiddenProjects' => $yaml
+      ]);
+
+      // Retourner les UUIDs pour le frontend
+      $hiddenProjectsUuids = [];
+      foreach ($hiddenProjects as $project) {
+        $hiddenProjectsUuids[] = $project->uuid();
+      }
+
+      return [
+        'status' => 'success',
+        'action' => $action,
+        'hiddenProjects' => $hiddenProjectsUuids
+      ];
+    } catch (\Throwable $th) {
+      return [
+        'status' => 'error',
+        'message' => 'Impossible de modifier les projets masqués : ' . $th->getMessage() . ' in file ' . $th->getFile() . ' line ' . $th->getLine()
+      ];
+    }
+  }
+];
diff --git a/public/site/config/routes/validate-brief.php b/public/site/config/routes/validate-brief.php
index f8e97f1..5b16c44 100644
--- a/public/site/config/routes/validate-brief.php
+++ b/public/site/config/routes/validate-brief.php
@@ -9,27 +9,31 @@ return [
 
     $page = page($data->briefUri);
     $project = $page->parent();
-    
-    try {
-      $newPage = $page->update([
-        'isValidated' => 'true'
-      ]);
+    $user = kirby()->user();
 
+    try {
       $timezone = new DateTimeZone('Europe/Paris');
       $dateTime = new DateTime('now', $timezone);
 
-      $notification = [
-        'location' => [
-          'page' => $page,
-        ],
-        'date' => $dateTime->format('Y-m-d\TH:i:sP'),
-        'text' => "Nouveau brief", 
-        'author' => kirby()->user(),
-        'id' => Str::uuid(),
-        'type' => 'content'
+      $updateData = [
+        'isValidated' => 'true',
+        // Métadonnées pour le système de notifications dérivées
+        'validatedBy' => (string) $user->uuid(),
+        'validatedByName' => (string) $user->name(),
+        'validatedByEmail' => (string) $user->email(),
+        'validatedAt' => $dateTime->format('Y-m-d\TH:i:sP'),
+        'validationReadby' => [],
       ];
 
-      $project->createNotification($notification);
+      // Si un dialogUri est fourni (validation depuis PDF), le stocker
+      if (isset($data->dialogUri) && !empty($data->dialogUri)) {
+        $updateData['validationDialogUri'] = (string) $data->dialogUri;
+      }
+
+      $newPage = $page->update($updateData);
+
+      // Note: Les notifications sont maintenant dérivées.
+      // Plus besoin d'appeler createNotification().
 
       return [
         "success" => "'" . $project->title()->value() . "' brief validated."
diff --git a/public/site/controllers/site.php b/public/site/controllers/site.php
index c5a36fb..14a8e61 100644
--- a/public/site/controllers/site.php
+++ b/public/site/controllers/site.php
@@ -27,15 +27,28 @@ return function ($page, $kirby, $site) {
       }
     }
 
-    if ($kirby->user()->projects()->exists() && $kirby->user()->projects()->isNotEmpty()) {
-      $userData['projects'] = $kirby->user()->projects()->toPages()->map(function ($project) {
+    $userProjects = $kirby->user()->currentProjects()->merge(
+      $kirby->user()->archivedProjects()
+    );
+
+    if ($userProjects->count() > 0) {
+      $userData['projects'] = $userProjects->map(function ($project) {
         return [
           "title" => (string) $project->title(),
           "uri" => (string) $project->uri(),
-          "step" => (string) $project->getStepLabel(),
+          "step" => (string) $project->currentStep(),
+          "uuid" => (string) $project->uuid(),
         ];
       })->data;
     }
+
+    if ($kirby->user()->hiddenProjects()->exists() && $kirby->user()->hiddenProjects()->isNotEmpty()) {
+      $userData['hiddenProjects'] = $kirby->user()->hiddenProjects()->toPages()->map(function ($project) {
+        return (string) $project->uuid();
+      })->values();
+    } else {
+      $userData['hiddenProjects'] = [];
+    }
   }
 
 
diff --git a/public/site/models/project.php b/public/site/models/project.php
index df39ff1..4ea0543 100644
--- a/public/site/models/project.php
+++ b/public/site/models/project.php
@@ -3,18 +3,62 @@
 use adrienpayet\notifications\NotificationsPage;
 
 class ProjectPage extends NotificationsPage {
-  public function getSteps() {    
+  public function getSteps() {
     $apiCache = kirby()->cache('api');
-    $stepsData = $apiCache?->get($this->slug() . '_' . 'steps');   
-    
+    $stepsData = $apiCache?->get($this->slug() . '_' . 'steps');
+
     if ($stepsData === null || count($stepsData) === 0) {
       $this->rebuildStepsCache();
     };
-    
-    $stepsData = $apiCache->get($this->slug() . '_' . 'steps');   
+
+    $stepsData = $apiCache->get($this->slug() . '_' . 'steps');
 
     return $stepsData;
   }
+
+  /**
+   * Récupère les notifications pour ce projet (version allégée avec cache).
+   * Cache par utilisateur pour inclure le isRead.
+   */
+  public function getNotificationsLight($user) {
+    if (!$user) {
+      return [];
+    }
+
+    $apiCache = kirby()->cache('api');
+    $cacheKey = $this->slug() . '_notifications_' . $user->uuid();
+    $notifications = $apiCache?->get($cacheKey);
+
+    // Si pas en cache, collecter et cacher
+    if ($notifications === null) {
+      $collector = kirby()->option('adrienpayet.pdc-notifications.collector');
+      if (!$collector) {
+        return [];
+      }
+
+      try {
+        $notifications = $collector->collectLight($this, $user);
+        $apiCache->set($cacheKey, $notifications);
+      } catch (\Throwable $e) {
+        error_log("Error caching notifications for {$this->slug()}: " . $e->getMessage());
+        return [];
+      }
+    }
+
+    return $notifications;
+  }
+
+  /**
+   * Invalide le cache des notifications de ce projet pour tous les utilisateurs.
+   */
+  public function invalidateNotificationsCache() {
+    $apiCache = kirby()->cache('api');
+    // Invalider pour tous les users
+    foreach (kirby()->users() as $user) {
+      $cacheKey = $this->slug() . '_notifications_' . $user->uuid();
+      $apiCache->remove($cacheKey);
+    }
+  }
   
   public function rebuildStepsCache() {    
     // Create steps
@@ -55,7 +99,6 @@ class ProjectPage extends NotificationsPage {
     }
 
     return [
-      'label' => $child->title()->value(),
       'id' => $child->stepName()->value(),
       'slug' => $child->slug(),
       'index' => intval($child->stepIndex()->value()),
@@ -98,19 +141,19 @@ class ProjectPage extends NotificationsPage {
 
     if ($child->hasChildren()) {
       $files['dynamic'] = [];
-      
+
       foreach ($child->children() as $key => $track) {
         $trackData = [
           'title' => (string) $track->title(),
           'slug' => (string) $track->slug(),
           'backgroundColor' => (string) $track->backgroundColor(),
           'files' => [],
-        ];        
-        
+        ];
+
         foreach ($track->views()->toFiles() as $view) {
           $trackData['files'][] = getFileData($view, true);
         }
-        
+
         if ($track->group()->isNotEmpty()) {
           $files['dynamic'][$track->group()->value()][] = $trackData;
         } else {
@@ -118,12 +161,36 @@ class ProjectPage extends NotificationsPage {
         }
       }
 
+      // Récupérer l'ordre des groupes depuis le champ groups
+      $orderedGroups = $child->groups()->split();
+
+      // Réorganiser $files['dynamic'] selon l'ordre défini
+      if (!empty($orderedGroups)) {
+        $orderedDynamic = [];
+
+        foreach ($orderedGroups as $group) {
+          if (isset($files['dynamic'][$group])) {
+            $orderedDynamic[$group] = $files['dynamic'][$group];
+          }
+        }
+
+        // Ajouter les groupes non définis dans le champ à la fin
+        foreach ($files['dynamic'] as $group => $tracks) {
+          if (!isset($orderedDynamic[$group])) {
+            $orderedDynamic[$group] = $tracks;
+          }
+        }
+
+        $files['dynamic'] = $orderedDynamic;
+      }
+
+      // Toujours mettre "Autres pistes" à la fin
       if (isset($files['dynamic']['Autres pistes'])) {
         $others = $files['dynamic']['Autres pistes'];
         unset($files['dynamic']['Autres pistes']);
         $files['dynamic']['Autres pistes'] = $others;
       }
-    
+
     }
 
     if ($child->rawGlass()->isNotEmpty() || $child->finishedGlass()->isNotEmpty()) {
@@ -133,7 +200,7 @@ class ProjectPage extends NotificationsPage {
     if ($child->rawGlass()->isNotEmpty()) {
       $files['static']['rawGlass'] = getFileData($child->rawGlass()->toFile());
     }
-    
+
     if ($child->finishedGlass()->isNotEmpty()) {
       $files['static']['finishedGlass'] = getFileData($child->finishedGlass()->toFile());
     }
@@ -149,30 +216,18 @@ class ProjectPage extends NotificationsPage {
     }
   }
 
-  public function getStepLabel() {
-    $stepsLabel = [
-      "clientBrief" => "brief",
-      "proposal" => "offre commerciale",
-      "extendedBrief" => "brief enrichi",
-      "industrialIdeation" => "idéation industrielle",
-      "virtualSample" => "échantillon virtuel",
-      "physicalSample" => "échantillon physique",
-    ];
-
-    return $stepsLabel[$this->currentStep()->value()] ?? "brief";
-  }
 
   // public function printManagers() {
   //   return A::implode($this->managers()->toUsers()->pluck('name'), ', ');
   // }
 
   public function managers() {
-    return kirby()->users()->filter(function($user) {
-      if ($user->role() != 'admin' && $user->projects()->isEmpty()) {
-          return false;
-      }
-
-      return $user->role() == 'admin' || $user->projects()->toPages()->has($this);
+    if ($this->users()->isEmpty()) {
+      return kirby()->users()->filterBy('role', 'admin');
+    }
+    $projectUsers = $this->users()->toUsers();
+    return kirby()->users()->filter(function($user) use ($projectUsers) {
+      return $user->role() == 'admin' || $projectUsers->has($user);
     });
   }
 }
\ No newline at end of file
diff --git a/public/site/plugins/analytics/blueprints/pages/analytics.yml b/public/site/plugins/analytics/blueprints/pages/analytics.yml
new file mode 100644
index 0000000..432b91e
--- /dev/null
+++ b/public/site/plugins/analytics/blueprints/pages/analytics.yml
@@ -0,0 +1,18 @@
+title: Analytics
+icon: chart
+buttons: false
+options:
+  changeTitle: false
+
+status:
+  - unlisted
+
+columns:
+  - width: 1/1
+    sections:
+      dashboard:
+        type: fields
+        fields:
+          analytics:
+            type: analytics-dashboard
+            label: false
diff --git a/public/site/plugins/analytics/classes/AnalyticsPage.php b/public/site/plugins/analytics/classes/AnalyticsPage.php
new file mode 100644
index 0000000..4f0d3b9
--- /dev/null
+++ b/public/site/plugins/analytics/classes/AnalyticsPage.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace adrienpayet\analytics;
+
+use Kirby\Cms\Page;
+
+class AnalyticsPage extends Page
+{
+    public function getAnalyticsData(array $filters = []): array
+    {
+        $user = kirby()->user();
+
+        if (!$user) {
+            return [];
+        }
+
+        if ($user->isAdmin()) {
+            return AnalyticsStore::getAggregatedData($filters);
+        }
+
+        $allowedProjects = $user->currentProjects();
+        $allowedEmails = [];
+        foreach ($allowedProjects as $project) {
+            $users = kirby()->users();
+            foreach ($users as $u) {
+                if ($u->currentProjects()->has($project)) {
+                    $allowedEmails[] = $u->email()->value();
+                }
+            }
+        }
+
+        $filters['emails'] = array_unique($allowedEmails);
+
+        return AnalyticsStore::getAggregatedData($filters);
+    }
+
+}
diff --git a/public/site/plugins/analytics/classes/AnalyticsStore.php b/public/site/plugins/analytics/classes/AnalyticsStore.php
new file mode 100644
index 0000000..552891e
--- /dev/null
+++ b/public/site/plugins/analytics/classes/AnalyticsStore.php
@@ -0,0 +1,159 @@
+<?php
+
+namespace adrienpayet\analytics;
+
+use Kirby\Data\Yaml;
+use Kirby\Toolkit\F;
+
+class AnalyticsStore
+{
+    private static function getFilePath(): string
+    {
+        return kirby()->root('content') . '/analytics/visits.yml';
+    }
+
+    private static function ensureFileExists(): void
+    {
+        $filePath = self::getFilePath();
+        $dirPath = dirname($filePath);
+
+        if (!is_dir($dirPath)) {
+            F::mkdir($dirPath, true);
+        }
+
+        if (!F::exists($filePath)) {
+            F::write($filePath, Yaml::encode(['visits' => []]));
+        }
+    }
+
+    public static function addVisit(Visit $visit): void
+    {
+        self::ensureFileExists();
+
+        $filePath = self::getFilePath();
+        $data = Yaml::decode(F::read($filePath));
+
+        $visits = $data['visits'] ?? [];
+        $visits[] = $visit->toArray();
+
+        // Limiter à 10000 visites max
+        if (count($visits) > 10000) {
+            $visits = array_slice($visits, -10000);
+        }
+
+        $data['visits'] = $visits;
+        F::write($filePath, Yaml::encode($data));
+    }
+
+    public static function getVisits(array $filters = []): array
+    {
+        self::ensureFileExists();
+
+        $filePath = self::getFilePath();
+        $data = Yaml::decode(F::read($filePath));
+        $visits = $data['visits'] ?? [];
+
+        // Convertir en objets Visit
+        $visits = array_map(fn($v) => Visit::fromArray($v), $visits);
+
+        // Filtrer par daterange
+        if (!empty($filters['startDate']) || !empty($filters['endDate'])) {
+            $visits = array_filter($visits, function($visit) use ($filters) {
+                $timestamp = strtotime($visit->timestamp);
+
+                if (!empty($filters['startDate'])) {
+                    $startDate = strtotime($filters['startDate'] . ' 00:00:00');
+                    if ($timestamp < $startDate) {
+                        return false;
+                    }
+                }
+
+                if (!empty($filters['endDate'])) {
+                    $endDate = strtotime($filters['endDate'] . ' 23:59:59');
+                    if ($timestamp > $endDate) {
+                        return false;
+                    }
+                }
+
+                return true;
+            });
+        }
+
+        // Filtrer par projet
+        if (!empty($filters['project'])) {
+            $projectId = $filters['project'];
+            $visits = array_filter($visits, function($visit) use ($projectId) {
+                return str_contains($visit->pageUrl, "/projects/{$projectId}");
+            });
+        }
+
+        // Filtrer par email (permissions)
+        if (!empty($filters['emails'])) {
+            $allowedEmails = $filters['emails'];
+            $visits = array_filter($visits, function($visit) use ($allowedEmails) {
+                return in_array($visit->email, $allowedEmails);
+            });
+        }
+
+        // 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 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));
+            $visitsByDay[$day] = ($visitsByDay[$day] ?? 0) + 1;
+        }
+        ksort($visitsByDay);
+
+        $uniqueSessions = count(array_unique(array_map(fn($v) => $v->sessionId, $visits)));
+
+        // Visites par jour par page (toutes les pages)
+        $visitsByDayByPage = [];
+        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;
+        }
+        foreach ($visitsByDayByPage as &$days) {
+            ksort($days);
+        }
+
+        return [
+            'totalVisits' => count($visits),
+            'uniqueSessions' => $uniqueSessions,
+            'visitsByDay' => $visitsByDay,
+            'visitsByPage' => array_slice($visitsByPage, 0, 10, true),
+            'visitsByDayByPage' => $visitsByDayByPage,
+        ];
+    }
+}
diff --git a/public/site/plugins/analytics/classes/Visit.php b/public/site/plugins/analytics/classes/Visit.php
new file mode 100644
index 0000000..55a2ef7
--- /dev/null
+++ b/public/site/plugins/analytics/classes/Visit.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace adrienpayet\analytics;
+
+class Visit
+{
+    public string $id;
+    public string $email;
+    public ?string $country;
+    public string $timestamp;
+    public string $sessionId;
+    public string $pageUrl;
+    public string $pageType;
+    public ?string $pageName;
+
+    public function __construct(array $data)
+    {
+        $this->id = $data['id'] ?? uniqid('visit_', true);
+        $this->email = $data['email'];
+        $this->country = $data['country'] ?? null;
+        $this->timestamp = $data['timestamp'] ?? date('Y-m-d H:i:s');
+        $this->sessionId = $data['sessionId'];
+        $this->pageUrl = $data['pageUrl'];
+        $this->pageType = $data['pageType'];
+        $this->pageName = $data['pageName'] ?? null;
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'id' => $this->id,
+            'email' => $this->email,
+            'country' => $this->country,
+            'timestamp' => $this->timestamp,
+            'sessionId' => $this->sessionId,
+            'pageUrl' => $this->pageUrl,
+            'pageType' => $this->pageType,
+            'pageName' => $this->pageName,
+        ];
+    }
+
+    public static function fromArray(array $data): self
+    {
+        return new self($data);
+    }
+}
diff --git a/public/site/plugins/analytics/fields/dashboard.php b/public/site/plugins/analytics/fields/dashboard.php
new file mode 100644
index 0000000..4a0dc2e
--- /dev/null
+++ b/public/site/plugins/analytics/fields/dashboard.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'props' => [
+        'value' => function ($value = null) {
+            return null;
+        }
+    ],
+    'computed' => [
+        'analyticsData' => function () {
+            $page = $this->model();
+            if (method_exists($page, 'getAnalyticsData')) {
+                return $page->getAnalyticsData();
+            }
+            return [];
+        }
+    ]
+];
diff --git a/public/site/plugins/analytics/index.css b/public/site/plugins/analytics/index.css
new file mode 100644
index 0000000..67f9106
--- /dev/null
+++ b/public/site/plugins/analytics/index.css
@@ -0,0 +1,123 @@
+
+.k-analytics-filters {
+  display: flex;
+  gap: 1rem;
+}
+.k-analytics-filters label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+.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: 3rem 0;
+}
+.k-analytics-user-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-left: 2rem;
+}
+.k-field-name-user,
+.k-field-name-page {
+  min-width: 15rem;
+}
+.k-field-name-top-pages {
+  margin-left: 1rem;
+}
+.k-analytics-page-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-left: 2rem;
+}
+.k-analytics-card {
+  background: var(--color-background);
+  border-radius: var(--rounded);
+}
+.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);
+  margin-bottom: 1.5rem;
+}
+.k-analytics-chart-header {
+  display: flex;
+  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;
+}
+.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;
+}
diff --git a/public/site/plugins/analytics/index.js b/public/site/plugins/analytics/index.js
new file mode 100644
index 0000000..51f7aa4
--- /dev/null
+++ b/public/site/plugins/analytics/index.js
@@ -0,0 +1,11703 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+(function() {
+  "use strict";
+  /*!
+   * @kurkle/color v0.3.4
+   * https://github.com/kurkle/color#readme
+   * (c) 2024 Jukka Kurkela
+   * Released under the MIT License
+   */
+  function round(v) {
+    return v + 0.5 | 0;
+  }
+  const lim = (v, l, h) => Math.max(Math.min(v, h), l);
+  function p2b(v) {
+    return lim(round(v * 2.55), 0, 255);
+  }
+  function n2b(v) {
+    return lim(round(v * 255), 0, 255);
+  }
+  function b2n(v) {
+    return lim(round(v / 2.55) / 100, 0, 1);
+  }
+  function n2p(v) {
+    return lim(round(v * 100), 0, 100);
+  }
+  const map$1 = { 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, A: 10, B: 11, C: 12, D: 13, E: 14, F: 15, a: 10, b: 11, c: 12, d: 13, e: 14, f: 15 };
+  const hex = [..."0123456789ABCDEF"];
+  const h1 = (b) => hex[b & 15];
+  const h2 = (b) => hex[(b & 240) >> 4] + hex[b & 15];
+  const eq = (b) => (b & 240) >> 4 === (b & 15);
+  const isShort = (v) => eq(v.r) && eq(v.g) && eq(v.b) && eq(v.a);
+  function hexParse(str) {
+    var len = str.length;
+    var ret;
+    if (str[0] === "#") {
+      if (len === 4 || len === 5) {
+        ret = {
+          r: 255 & map$1[str[1]] * 17,
+          g: 255 & map$1[str[2]] * 17,
+          b: 255 & map$1[str[3]] * 17,
+          a: len === 5 ? map$1[str[4]] * 17 : 255
+        };
+      } else if (len === 7 || len === 9) {
+        ret = {
+          r: map$1[str[1]] << 4 | map$1[str[2]],
+          g: map$1[str[3]] << 4 | map$1[str[4]],
+          b: map$1[str[5]] << 4 | map$1[str[6]],
+          a: len === 9 ? map$1[str[7]] << 4 | map$1[str[8]] : 255
+        };
+      }
+    }
+    return ret;
+  }
+  const alpha = (a, f) => a < 255 ? f(a) : "";
+  function hexString(v) {
+    var f = isShort(v) ? h1 : h2;
+    return v ? "#" + f(v.r) + f(v.g) + f(v.b) + alpha(v.a, f) : void 0;
+  }
+  const HUE_RE = /^(hsla?|hwb|hsv)\(\s*([-+.e\d]+)(?:deg)?[\s,]+([-+.e\d]+)%[\s,]+([-+.e\d]+)%(?:[\s,]+([-+.e\d]+)(%)?)?\s*\)$/;
+  function hsl2rgbn(h, s, l) {
+    const a = s * Math.min(l, 1 - l);
+    const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return [f(0), f(8), f(4)];
+  }
+  function hsv2rgbn(h, s, v) {
+    const f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
+    return [f(5), f(3), f(1)];
+  }
+  function hwb2rgbn(h, w, b) {
+    const rgb = hsl2rgbn(h, 1, 0.5);
+    let i;
+    if (w + b > 1) {
+      i = 1 / (w + b);
+      w *= i;
+      b *= i;
+    }
+    for (i = 0; i < 3; i++) {
+      rgb[i] *= 1 - w - b;
+      rgb[i] += w;
+    }
+    return rgb;
+  }
+  function hueValue(r, g, b, d, max) {
+    if (r === max) {
+      return (g - b) / d + (g < b ? 6 : 0);
+    }
+    if (g === max) {
+      return (b - r) / d + 2;
+    }
+    return (r - g) / d + 4;
+  }
+  function rgb2hsl(v) {
+    const range = 255;
+    const r = v.r / range;
+    const g = v.g / range;
+    const b = v.b / range;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h, s, d;
+    if (max !== min) {
+      d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      h = hueValue(r, g, b, d, max);
+      h = h * 60 + 0.5;
+    }
+    return [h | 0, s || 0, l];
+  }
+  function calln(f, a, b, c) {
+    return (Array.isArray(a) ? f(a[0], a[1], a[2]) : f(a, b, c)).map(n2b);
+  }
+  function hsl2rgb(h, s, l) {
+    return calln(hsl2rgbn, h, s, l);
+  }
+  function hwb2rgb(h, w, b) {
+    return calln(hwb2rgbn, h, w, b);
+  }
+  function hsv2rgb(h, s, v) {
+    return calln(hsv2rgbn, h, s, v);
+  }
+  function hue(h) {
+    return (h % 360 + 360) % 360;
+  }
+  function hueParse(str) {
+    const m = HUE_RE.exec(str);
+    let a = 255;
+    let v;
+    if (!m) {
+      return;
+    }
+    if (m[5] !== v) {
+      a = m[6] ? p2b(+m[5]) : n2b(+m[5]);
+    }
+    const h = hue(+m[2]);
+    const p1 = +m[3] / 100;
+    const p2 = +m[4] / 100;
+    if (m[1] === "hwb") {
+      v = hwb2rgb(h, p1, p2);
+    } else if (m[1] === "hsv") {
+      v = hsv2rgb(h, p1, p2);
+    } else {
+      v = hsl2rgb(h, p1, p2);
+    }
+    return {
+      r: v[0],
+      g: v[1],
+      b: v[2],
+      a
+    };
+  }
+  function rotate(v, deg) {
+    var h = rgb2hsl(v);
+    h[0] = hue(h[0] + deg);
+    h = hsl2rgb(h);
+    v.r = h[0];
+    v.g = h[1];
+    v.b = h[2];
+  }
+  function hslString(v) {
+    if (!v) {
+      return;
+    }
+    const a = rgb2hsl(v);
+    const h = a[0];
+    const s = n2p(a[1]);
+    const l = n2p(a[2]);
+    return v.a < 255 ? `hsla(${h}, ${s}%, ${l}%, ${b2n(v.a)})` : `hsl(${h}, ${s}%, ${l}%)`;
+  }
+  const map = {
+    x: "dark",
+    Z: "light",
+    Y: "re",
+    X: "blu",
+    W: "gr",
+    V: "medium",
+    U: "slate",
+    A: "ee",
+    T: "ol",
+    S: "or",
+    B: "ra",
+    C: "lateg",
+    D: "ights",
+    R: "in",
+    Q: "turquois",
+    E: "hi",
+    P: "ro",
+    O: "al",
+    N: "le",
+    M: "de",
+    L: "yello",
+    F: "en",
+    K: "ch",
+    G: "arks",
+    H: "ea",
+    I: "ightg",
+    J: "wh"
+  };
+  const names$1 = {
+    OiceXe: "f0f8ff",
+    antiquewEte: "faebd7",
+    aqua: "ffff",
+    aquamarRe: "7fffd4",
+    azuY: "f0ffff",
+    beige: "f5f5dc",
+    bisque: "ffe4c4",
+    black: "0",
+    blanKedOmond: "ffebcd",
+    Xe: "ff",
+    XeviTet: "8a2be2",
+    bPwn: "a52a2a",
+    burlywood: "deb887",
+    caMtXe: "5f9ea0",
+    KartYuse: "7fff00",
+    KocTate: "d2691e",
+    cSO: "ff7f50",
+    cSnflowerXe: "6495ed",
+    cSnsilk: "fff8dc",
+    crimson: "dc143c",
+    cyan: "ffff",
+    xXe: "8b",
+    xcyan: "8b8b",
+    xgTMnPd: "b8860b",
+    xWay: "a9a9a9",
+    xgYF: "6400",
+    xgYy: "a9a9a9",
+    xkhaki: "bdb76b",
+    xmagFta: "8b008b",
+    xTivegYF: "556b2f",
+    xSange: "ff8c00",
+    xScEd: "9932cc",
+    xYd: "8b0000",
+    xsOmon: "e9967a",
+    xsHgYF: "8fbc8f",
+    xUXe: "483d8b",
+    xUWay: "2f4f4f",
+    xUgYy: "2f4f4f",
+    xQe: "ced1",
+    xviTet: "9400d3",
+    dAppRk: "ff1493",
+    dApskyXe: "bfff",
+    dimWay: "696969",
+    dimgYy: "696969",
+    dodgerXe: "1e90ff",
+    fiYbrick: "b22222",
+    flSOwEte: "fffaf0",
+    foYstWAn: "228b22",
+    fuKsia: "ff00ff",
+    gaRsbSo: "dcdcdc",
+    ghostwEte: "f8f8ff",
+    gTd: "ffd700",
+    gTMnPd: "daa520",
+    Way: "808080",
+    gYF: "8000",
+    gYFLw: "adff2f",
+    gYy: "808080",
+    honeyMw: "f0fff0",
+    hotpRk: "ff69b4",
+    RdianYd: "cd5c5c",
+    Rdigo: "4b0082",
+    ivSy: "fffff0",
+    khaki: "f0e68c",
+    lavFMr: "e6e6fa",
+    lavFMrXsh: "fff0f5",
+    lawngYF: "7cfc00",
+    NmoncEffon: "fffacd",
+    ZXe: "add8e6",
+    ZcSO: "f08080",
+    Zcyan: "e0ffff",
+    ZgTMnPdLw: "fafad2",
+    ZWay: "d3d3d3",
+    ZgYF: "90ee90",
+    ZgYy: "d3d3d3",
+    ZpRk: "ffb6c1",
+    ZsOmon: "ffa07a",
+    ZsHgYF: "20b2aa",
+    ZskyXe: "87cefa",
+    ZUWay: "778899",
+    ZUgYy: "778899",
+    ZstAlXe: "b0c4de",
+    ZLw: "ffffe0",
+    lime: "ff00",
+    limegYF: "32cd32",
+    lRF: "faf0e6",
+    magFta: "ff00ff",
+    maPon: "800000",
+    VaquamarRe: "66cdaa",
+    VXe: "cd",
+    VScEd: "ba55d3",
+    VpurpN: "9370db",
+    VsHgYF: "3cb371",
+    VUXe: "7b68ee",
+    VsprRggYF: "fa9a",
+    VQe: "48d1cc",
+    VviTetYd: "c71585",
+    midnightXe: "191970",
+    mRtcYam: "f5fffa",
+    mistyPse: "ffe4e1",
+    moccasR: "ffe4b5",
+    navajowEte: "ffdead",
+    navy: "80",
+    Tdlace: "fdf5e6",
+    Tive: "808000",
+    TivedBb: "6b8e23",
+    Sange: "ffa500",
+    SangeYd: "ff4500",
+    ScEd: "da70d6",
+    pOegTMnPd: "eee8aa",
+    pOegYF: "98fb98",
+    pOeQe: "afeeee",
+    pOeviTetYd: "db7093",
+    papayawEp: "ffefd5",
+    pHKpuff: "ffdab9",
+    peru: "cd853f",
+    pRk: "ffc0cb",
+    plum: "dda0dd",
+    powMrXe: "b0e0e6",
+    purpN: "800080",
+    YbeccapurpN: "663399",
+    Yd: "ff0000",
+    Psybrown: "bc8f8f",
+    PyOXe: "4169e1",
+    saddNbPwn: "8b4513",
+    sOmon: "fa8072",
+    sandybPwn: "f4a460",
+    sHgYF: "2e8b57",
+    sHshell: "fff5ee",
+    siFna: "a0522d",
+    silver: "c0c0c0",
+    skyXe: "87ceeb",
+    UXe: "6a5acd",
+    UWay: "708090",
+    UgYy: "708090",
+    snow: "fffafa",
+    sprRggYF: "ff7f",
+    stAlXe: "4682b4",
+    tan: "d2b48c",
+    teO: "8080",
+    tEstN: "d8bfd8",
+    tomato: "ff6347",
+    Qe: "40e0d0",
+    viTet: "ee82ee",
+    JHt: "f5deb3",
+    wEte: "ffffff",
+    wEtesmoke: "f5f5f5",
+    Lw: "ffff00",
+    LwgYF: "9acd32"
+  };
+  function unpack() {
+    const unpacked = {};
+    const keys = Object.keys(names$1);
+    const tkeys = Object.keys(map);
+    let i, j, k, ok, nk;
+    for (i = 0; i < keys.length; i++) {
+      ok = nk = keys[i];
+      for (j = 0; j < tkeys.length; j++) {
+        k = tkeys[j];
+        nk = nk.replace(k, map[k]);
+      }
+      k = parseInt(names$1[ok], 16);
+      unpacked[nk] = [k >> 16 & 255, k >> 8 & 255, k & 255];
+    }
+    return unpacked;
+  }
+  let names;
+  function nameParse(str) {
+    if (!names) {
+      names = unpack();
+      names.transparent = [0, 0, 0, 0];
+    }
+    const a = names[str.toLowerCase()];
+    return a && {
+      r: a[0],
+      g: a[1],
+      b: a[2],
+      a: a.length === 4 ? a[3] : 255
+    };
+  }
+  const RGB_RE = /^rgba?\(\s*([-+.\d]+)(%)?[\s,]+([-+.e\d]+)(%)?[\s,]+([-+.e\d]+)(%)?(?:[\s,/]+([-+.e\d]+)(%)?)?\s*\)$/;
+  function rgbParse(str) {
+    const m = RGB_RE.exec(str);
+    let a = 255;
+    let r, g, b;
+    if (!m) {
+      return;
+    }
+    if (m[7] !== r) {
+      const v = +m[7];
+      a = m[8] ? p2b(v) : lim(v * 255, 0, 255);
+    }
+    r = +m[1];
+    g = +m[3];
+    b = +m[5];
+    r = 255 & (m[2] ? p2b(r) : lim(r, 0, 255));
+    g = 255 & (m[4] ? p2b(g) : lim(g, 0, 255));
+    b = 255 & (m[6] ? p2b(b) : lim(b, 0, 255));
+    return {
+      r,
+      g,
+      b,
+      a
+    };
+  }
+  function rgbString(v) {
+    return v && (v.a < 255 ? `rgba(${v.r}, ${v.g}, ${v.b}, ${b2n(v.a)})` : `rgb(${v.r}, ${v.g}, ${v.b})`);
+  }
+  const to = (v) => v <= 31308e-7 ? v * 12.92 : Math.pow(v, 1 / 2.4) * 1.055 - 0.055;
+  const from = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  function interpolate$1(rgb1, rgb2, t) {
+    const r = from(b2n(rgb1.r));
+    const g = from(b2n(rgb1.g));
+    const b = from(b2n(rgb1.b));
+    return {
+      r: n2b(to(r + t * (from(b2n(rgb2.r)) - r))),
+      g: n2b(to(g + t * (from(b2n(rgb2.g)) - g))),
+      b: n2b(to(b + t * (from(b2n(rgb2.b)) - b))),
+      a: rgb1.a + t * (rgb2.a - rgb1.a)
+    };
+  }
+  function modHSL(v, i, ratio) {
+    if (v) {
+      let tmp = rgb2hsl(v);
+      tmp[i] = Math.max(0, Math.min(tmp[i] + tmp[i] * ratio, i === 0 ? 360 : 1));
+      tmp = hsl2rgb(tmp);
+      v.r = tmp[0];
+      v.g = tmp[1];
+      v.b = tmp[2];
+    }
+  }
+  function clone$1(v, proto) {
+    return v ? Object.assign(proto || {}, v) : v;
+  }
+  function fromObject(input) {
+    var v = { r: 0, g: 0, b: 0, a: 255 };
+    if (Array.isArray(input)) {
+      if (input.length >= 3) {
+        v = { r: input[0], g: input[1], b: input[2], a: 255 };
+        if (input.length > 3) {
+          v.a = n2b(input[3]);
+        }
+      }
+    } else {
+      v = clone$1(input, { r: 0, g: 0, b: 0, a: 1 });
+      v.a = n2b(v.a);
+    }
+    return v;
+  }
+  function functionParse(str) {
+    if (str.charAt(0) === "r") {
+      return rgbParse(str);
+    }
+    return hueParse(str);
+  }
+  class Color {
+    constructor(input) {
+      if (input instanceof Color) {
+        return input;
+      }
+      const type = typeof input;
+      let v;
+      if (type === "object") {
+        v = fromObject(input);
+      } else if (type === "string") {
+        v = hexParse(input) || nameParse(input) || functionParse(input);
+      }
+      this._rgb = v;
+      this._valid = !!v;
+    }
+    get valid() {
+      return this._valid;
+    }
+    get rgb() {
+      var v = clone$1(this._rgb);
+      if (v) {
+        v.a = b2n(v.a);
+      }
+      return v;
+    }
+    set rgb(obj) {
+      this._rgb = fromObject(obj);
+    }
+    rgbString() {
+      return this._valid ? rgbString(this._rgb) : void 0;
+    }
+    hexString() {
+      return this._valid ? hexString(this._rgb) : void 0;
+    }
+    hslString() {
+      return this._valid ? hslString(this._rgb) : void 0;
+    }
+    mix(color2, weight) {
+      if (color2) {
+        const c1 = this.rgb;
+        const c2 = color2.rgb;
+        let w2;
+        const p = weight === w2 ? 0.5 : weight;
+        const w = 2 * p - 1;
+        const a = c1.a - c2.a;
+        const w1 = ((w * a === -1 ? w : (w + a) / (1 + w * a)) + 1) / 2;
+        w2 = 1 - w1;
+        c1.r = 255 & w1 * c1.r + w2 * c2.r + 0.5;
+        c1.g = 255 & w1 * c1.g + w2 * c2.g + 0.5;
+        c1.b = 255 & w1 * c1.b + w2 * c2.b + 0.5;
+        c1.a = p * c1.a + (1 - p) * c2.a;
+        this.rgb = c1;
+      }
+      return this;
+    }
+    interpolate(color2, t) {
+      if (color2) {
+        this._rgb = interpolate$1(this._rgb, color2._rgb, t);
+      }
+      return this;
+    }
+    clone() {
+      return new Color(this.rgb);
+    }
+    alpha(a) {
+      this._rgb.a = n2b(a);
+      return this;
+    }
+    clearer(ratio) {
+      const rgb = this._rgb;
+      rgb.a *= 1 - ratio;
+      return this;
+    }
+    greyscale() {
+      const rgb = this._rgb;
+      const val = round(rgb.r * 0.3 + rgb.g * 0.59 + rgb.b * 0.11);
+      rgb.r = rgb.g = rgb.b = val;
+      return this;
+    }
+    opaquer(ratio) {
+      const rgb = this._rgb;
+      rgb.a *= 1 + ratio;
+      return this;
+    }
+    negate() {
+      const v = this._rgb;
+      v.r = 255 - v.r;
+      v.g = 255 - v.g;
+      v.b = 255 - v.b;
+      return this;
+    }
+    lighten(ratio) {
+      modHSL(this._rgb, 2, ratio);
+      return this;
+    }
+    darken(ratio) {
+      modHSL(this._rgb, 2, -ratio);
+      return this;
+    }
+    saturate(ratio) {
+      modHSL(this._rgb, 1, ratio);
+      return this;
+    }
+    desaturate(ratio) {
+      modHSL(this._rgb, 1, -ratio);
+      return this;
+    }
+    rotate(deg) {
+      rotate(this._rgb, deg);
+      return this;
+    }
+  }
+  /*!
+   * Chart.js v4.5.1
+   * https://www.chartjs.org
+   * (c) 2025 Chart.js Contributors
+   * Released under the MIT License
+   */
+  function noop() {
+  }
+  const uid = /* @__PURE__ */ (() => {
+    let id = 0;
+    return () => id++;
+  })();
+  function isNullOrUndef(value) {
+    return value === null || value === void 0;
+  }
+  function isArray(value) {
+    if (Array.isArray && Array.isArray(value)) {
+      return true;
+    }
+    const type = Object.prototype.toString.call(value);
+    if (type.slice(0, 7) === "[object" && type.slice(-6) === "Array]") {
+      return true;
+    }
+    return false;
+  }
+  function isObject(value) {
+    return value !== null && Object.prototype.toString.call(value) === "[object Object]";
+  }
+  function isNumberFinite(value) {
+    return (typeof value === "number" || value instanceof Number) && isFinite(+value);
+  }
+  function finiteOrDefault(value, defaultValue) {
+    return isNumberFinite(value) ? value : defaultValue;
+  }
+  function valueOrDefault(value, defaultValue) {
+    return typeof value === "undefined" ? defaultValue : value;
+  }
+  const toDimension = (value, dimension) => typeof value === "string" && value.endsWith("%") ? parseFloat(value) / 100 * dimension : +value;
+  function callback(fn, args, thisArg) {
+    if (fn && typeof fn.call === "function") {
+      return fn.apply(thisArg, args);
+    }
+  }
+  function each(loopable, fn, thisArg, reverse) {
+    let i, len, keys;
+    if (isArray(loopable)) {
+      len = loopable.length;
+      {
+        for (i = 0; i < len; i++) {
+          fn.call(thisArg, loopable[i], i);
+        }
+      }
+    } else if (isObject(loopable)) {
+      keys = Object.keys(loopable);
+      len = keys.length;
+      for (i = 0; i < len; i++) {
+        fn.call(thisArg, loopable[keys[i]], keys[i]);
+      }
+    }
+  }
+  function _elementsEqual(a0, a1) {
+    let i, ilen, v0, v1;
+    if (!a0 || !a1 || a0.length !== a1.length) {
+      return false;
+    }
+    for (i = 0, ilen = a0.length; i < ilen; ++i) {
+      v0 = a0[i];
+      v1 = a1[i];
+      if (v0.datasetIndex !== v1.datasetIndex || v0.index !== v1.index) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function clone(source) {
+    if (isArray(source)) {
+      return source.map(clone);
+    }
+    if (isObject(source)) {
+      const target = /* @__PURE__ */ Object.create(null);
+      const keys = Object.keys(source);
+      const klen = keys.length;
+      let k = 0;
+      for (; k < klen; ++k) {
+        target[keys[k]] = clone(source[keys[k]]);
+      }
+      return target;
+    }
+    return source;
+  }
+  function isValidKey(key) {
+    return [
+      "__proto__",
+      "prototype",
+      "constructor"
+    ].indexOf(key) === -1;
+  }
+  function _merger(key, target, source, options) {
+    if (!isValidKey(key)) {
+      return;
+    }
+    const tval = target[key];
+    const sval = source[key];
+    if (isObject(tval) && isObject(sval)) {
+      merge(tval, sval, options);
+    } else {
+      target[key] = clone(sval);
+    }
+  }
+  function merge(target, source, options) {
+    const sources = isArray(source) ? source : [
+      source
+    ];
+    const ilen = sources.length;
+    if (!isObject(target)) {
+      return target;
+    }
+    options = options || {};
+    const merger = options.merger || _merger;
+    let current;
+    for (let i = 0; i < ilen; ++i) {
+      current = sources[i];
+      if (!isObject(current)) {
+        continue;
+      }
+      const keys = Object.keys(current);
+      for (let k = 0, klen = keys.length; k < klen; ++k) {
+        merger(keys[k], target, current, options);
+      }
+    }
+    return target;
+  }
+  function mergeIf(target, source) {
+    return merge(target, source, {
+      merger: _mergerIf
+    });
+  }
+  function _mergerIf(key, target, source) {
+    if (!isValidKey(key)) {
+      return;
+    }
+    const tval = target[key];
+    const sval = source[key];
+    if (isObject(tval) && isObject(sval)) {
+      mergeIf(tval, sval);
+    } else if (!Object.prototype.hasOwnProperty.call(target, key)) {
+      target[key] = clone(sval);
+    }
+  }
+  const keyResolvers = {
+    // Chart.helpers.core resolveObjectKey should resolve empty key to root object
+    "": (v) => v,
+    // default resolvers
+    x: (o) => o.x,
+    y: (o) => o.y
+  };
+  function _splitKey(key) {
+    const parts = key.split(".");
+    const keys = [];
+    let tmp = "";
+    for (const part of parts) {
+      tmp += part;
+      if (tmp.endsWith("\\")) {
+        tmp = tmp.slice(0, -1) + ".";
+      } else {
+        keys.push(tmp);
+        tmp = "";
+      }
+    }
+    return keys;
+  }
+  function _getKeyResolver(key) {
+    const keys = _splitKey(key);
+    return (obj) => {
+      for (const k of keys) {
+        if (k === "") {
+          break;
+        }
+        obj = obj && obj[k];
+      }
+      return obj;
+    };
+  }
+  function resolveObjectKey(obj, key) {
+    const resolver = keyResolvers[key] || (keyResolvers[key] = _getKeyResolver(key));
+    return resolver(obj);
+  }
+  function _capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+  const defined = (value) => typeof value !== "undefined";
+  const isFunction = (value) => typeof value === "function";
+  const setsEqual = (a, b) => {
+    if (a.size !== b.size) {
+      return false;
+    }
+    for (const item of a) {
+      if (!b.has(item)) {
+        return false;
+      }
+    }
+    return true;
+  };
+  function _isClickEvent(e) {
+    return e.type === "mouseup" || e.type === "click" || e.type === "contextmenu";
+  }
+  const PI = Math.PI;
+  const TAU = 2 * PI;
+  const PITAU = TAU + PI;
+  const INFINITY = Number.POSITIVE_INFINITY;
+  const RAD_PER_DEG = PI / 180;
+  const HALF_PI = PI / 2;
+  const QUARTER_PI = PI / 4;
+  const TWO_THIRDS_PI = PI * 2 / 3;
+  const log10 = Math.log10;
+  const sign = Math.sign;
+  function almostEquals(x, y, epsilon) {
+    return Math.abs(x - y) < epsilon;
+  }
+  function niceNum(range) {
+    const roundedRange = Math.round(range);
+    range = almostEquals(range, roundedRange, range / 1e3) ? roundedRange : range;
+    const niceRange = Math.pow(10, Math.floor(log10(range)));
+    const fraction = range / niceRange;
+    const niceFraction = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10;
+    return niceFraction * niceRange;
+  }
+  function _factorize(value) {
+    const result = [];
+    const sqrt = Math.sqrt(value);
+    let i;
+    for (i = 1; i < sqrt; i++) {
+      if (value % i === 0) {
+        result.push(i);
+        result.push(value / i);
+      }
+    }
+    if (sqrt === (sqrt | 0)) {
+      result.push(sqrt);
+    }
+    result.sort((a, b) => a - b).pop();
+    return result;
+  }
+  function isNonPrimitive(n) {
+    return typeof n === "symbol" || typeof n === "object" && n !== null && !(Symbol.toPrimitive in n || "toString" in n || "valueOf" in n);
+  }
+  function isNumber(n) {
+    return !isNonPrimitive(n) && !isNaN(parseFloat(n)) && isFinite(n);
+  }
+  function almostWhole(x, epsilon) {
+    const rounded = Math.round(x);
+    return rounded - epsilon <= x && rounded + epsilon >= x;
+  }
+  function _setMinAndMaxByKey(array, target, property) {
+    let i, ilen, value;
+    for (i = 0, ilen = array.length; i < ilen; i++) {
+      value = array[i][property];
+      if (!isNaN(value)) {
+        target.min = Math.min(target.min, value);
+        target.max = Math.max(target.max, value);
+      }
+    }
+  }
+  function toRadians(degrees) {
+    return degrees * (PI / 180);
+  }
+  function toDegrees(radians) {
+    return radians * (180 / PI);
+  }
+  function _decimalPlaces(x) {
+    if (!isNumberFinite(x)) {
+      return;
+    }
+    let e = 1;
+    let p = 0;
+    while (Math.round(x * e) / e !== x) {
+      e *= 10;
+      p++;
+    }
+    return p;
+  }
+  function getAngleFromPoint(centrePoint, anglePoint) {
+    const distanceFromXCenter = anglePoint.x - centrePoint.x;
+    const distanceFromYCenter = anglePoint.y - centrePoint.y;
+    const radialDistanceFromCenter = Math.sqrt(distanceFromXCenter * distanceFromXCenter + distanceFromYCenter * distanceFromYCenter);
+    let angle = Math.atan2(distanceFromYCenter, distanceFromXCenter);
+    if (angle < -0.5 * PI) {
+      angle += TAU;
+    }
+    return {
+      angle,
+      distance: radialDistanceFromCenter
+    };
+  }
+  function distanceBetweenPoints(pt1, pt2) {
+    return Math.sqrt(Math.pow(pt2.x - pt1.x, 2) + Math.pow(pt2.y - pt1.y, 2));
+  }
+  function _angleDiff(a, b) {
+    return (a - b + PITAU) % TAU - PI;
+  }
+  function _normalizeAngle(a) {
+    return (a % TAU + TAU) % TAU;
+  }
+  function _angleBetween(angle, start, end, sameAngleIsFullCircle) {
+    const a = _normalizeAngle(angle);
+    const s = _normalizeAngle(start);
+    const e = _normalizeAngle(end);
+    const angleToStart = _normalizeAngle(s - a);
+    const angleToEnd = _normalizeAngle(e - a);
+    const startToAngle = _normalizeAngle(a - s);
+    const endToAngle = _normalizeAngle(a - e);
+    return a === s || a === e || sameAngleIsFullCircle && s === e || angleToStart > angleToEnd && startToAngle < endToAngle;
+  }
+  function _limitValue(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+  }
+  function _int16Range(value) {
+    return _limitValue(value, -32768, 32767);
+  }
+  function _isBetween(value, start, end, epsilon = 1e-6) {
+    return value >= Math.min(start, end) - epsilon && value <= Math.max(start, end) + epsilon;
+  }
+  function _lookup(table, value, cmp) {
+    cmp = cmp || ((index2) => table[index2] < value);
+    let hi = table.length - 1;
+    let lo = 0;
+    let mid;
+    while (hi - lo > 1) {
+      mid = lo + hi >> 1;
+      if (cmp(mid)) {
+        lo = mid;
+      } else {
+        hi = mid;
+      }
+    }
+    return {
+      lo,
+      hi
+    };
+  }
+  const _lookupByKey = (table, key, value, last) => _lookup(table, value, last ? (index2) => {
+    const ti = table[index2][key];
+    return ti < value || ti === value && table[index2 + 1][key] === value;
+  } : (index2) => table[index2][key] < value);
+  const _rlookupByKey = (table, key, value) => _lookup(table, value, (index2) => table[index2][key] >= value);
+  function _filterBetween(values, min, max) {
+    let start = 0;
+    let end = values.length;
+    while (start < end && values[start] < min) {
+      start++;
+    }
+    while (end > start && values[end - 1] > max) {
+      end--;
+    }
+    return start > 0 || end < values.length ? values.slice(start, end) : values;
+  }
+  const arrayEvents = [
+    "push",
+    "pop",
+    "shift",
+    "splice",
+    "unshift"
+  ];
+  function listenArrayEvents(array, listener) {
+    if (array._chartjs) {
+      array._chartjs.listeners.push(listener);
+      return;
+    }
+    Object.defineProperty(array, "_chartjs", {
+      configurable: true,
+      enumerable: false,
+      value: {
+        listeners: [
+          listener
+        ]
+      }
+    });
+    arrayEvents.forEach((key) => {
+      const method = "_onData" + _capitalize(key);
+      const base = array[key];
+      Object.defineProperty(array, key, {
+        configurable: true,
+        enumerable: false,
+        value(...args) {
+          const res = base.apply(this, args);
+          array._chartjs.listeners.forEach((object) => {
+            if (typeof object[method] === "function") {
+              object[method](...args);
+            }
+          });
+          return res;
+        }
+      });
+    });
+  }
+  function unlistenArrayEvents(array, listener) {
+    const stub = array._chartjs;
+    if (!stub) {
+      return;
+    }
+    const listeners = stub.listeners;
+    const index2 = listeners.indexOf(listener);
+    if (index2 !== -1) {
+      listeners.splice(index2, 1);
+    }
+    if (listeners.length > 0) {
+      return;
+    }
+    arrayEvents.forEach((key) => {
+      delete array[key];
+    });
+    delete array._chartjs;
+  }
+  function _arrayUnique(items) {
+    const set2 = new Set(items);
+    if (set2.size === items.length) {
+      return items;
+    }
+    return Array.from(set2);
+  }
+  const requestAnimFrame = (function() {
+    if (typeof window === "undefined") {
+      return function(callback2) {
+        return callback2();
+      };
+    }
+    return window.requestAnimationFrame;
+  })();
+  function throttled(fn, thisArg) {
+    let argsToUse = [];
+    let ticking = false;
+    return function(...args) {
+      argsToUse = args;
+      if (!ticking) {
+        ticking = true;
+        requestAnimFrame.call(window, () => {
+          ticking = false;
+          fn.apply(thisArg, argsToUse);
+        });
+      }
+    };
+  }
+  function debounce(fn, delay) {
+    let timeout;
+    return function(...args) {
+      if (delay) {
+        clearTimeout(timeout);
+        timeout = setTimeout(fn, delay, args);
+      } else {
+        fn.apply(this, args);
+      }
+      return delay;
+    };
+  }
+  const _toLeftRightCenter = (align) => align === "start" ? "left" : align === "end" ? "right" : "center";
+  const _alignStartEnd = (align, start, end) => align === "start" ? start : align === "end" ? end : (start + end) / 2;
+  const _textX = (align, left, right, rtl) => {
+    const check = rtl ? "left" : "right";
+    return align === check ? right : align === "center" ? (left + right) / 2 : left;
+  };
+  function _getStartAndCountOfVisiblePoints(meta, points, animationsDisabled) {
+    const pointCount = points.length;
+    let start = 0;
+    let count = pointCount;
+    if (meta._sorted) {
+      const { iScale, vScale, _parsed } = meta;
+      const spanGaps = meta.dataset ? meta.dataset.options ? meta.dataset.options.spanGaps : null : null;
+      const axis = iScale.axis;
+      const { min, max, minDefined, maxDefined } = iScale.getUserBounds();
+      if (minDefined) {
+        start = Math.min(
+          // @ts-expect-error Need to type _parsed
+          _lookupByKey(_parsed, axis, min).lo,
+          // @ts-expect-error Need to fix types on _lookupByKey
+          animationsDisabled ? pointCount : _lookupByKey(points, axis, iScale.getPixelForValue(min)).lo
+        );
+        if (spanGaps) {
+          const distanceToDefinedLo = _parsed.slice(0, start + 1).reverse().findIndex((point) => !isNullOrUndef(point[vScale.axis]));
+          start -= Math.max(0, distanceToDefinedLo);
+        }
+        start = _limitValue(start, 0, pointCount - 1);
+      }
+      if (maxDefined) {
+        let end = Math.max(
+          // @ts-expect-error Need to type _parsed
+          _lookupByKey(_parsed, iScale.axis, max, true).hi + 1,
+          // @ts-expect-error Need to fix types on _lookupByKey
+          animationsDisabled ? 0 : _lookupByKey(points, axis, iScale.getPixelForValue(max), true).hi + 1
+        );
+        if (spanGaps) {
+          const distanceToDefinedHi = _parsed.slice(end - 1).findIndex((point) => !isNullOrUndef(point[vScale.axis]));
+          end += Math.max(0, distanceToDefinedHi);
+        }
+        count = _limitValue(end, start, pointCount) - start;
+      } else {
+        count = pointCount - start;
+      }
+    }
+    return {
+      start,
+      count
+    };
+  }
+  function _scaleRangesChanged(meta) {
+    const { xScale, yScale, _scaleRanges } = meta;
+    const newRanges = {
+      xmin: xScale.min,
+      xmax: xScale.max,
+      ymin: yScale.min,
+      ymax: yScale.max
+    };
+    if (!_scaleRanges) {
+      meta._scaleRanges = newRanges;
+      return true;
+    }
+    const changed = _scaleRanges.xmin !== xScale.min || _scaleRanges.xmax !== xScale.max || _scaleRanges.ymin !== yScale.min || _scaleRanges.ymax !== yScale.max;
+    Object.assign(_scaleRanges, newRanges);
+    return changed;
+  }
+  const atEdge = (t) => t === 0 || t === 1;
+  const elasticIn = (t, s, p) => -(Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * TAU / p));
+  const elasticOut = (t, s, p) => Math.pow(2, -10 * t) * Math.sin((t - s) * TAU / p) + 1;
+  const effects = {
+    linear: (t) => t,
+    easeInQuad: (t) => t * t,
+    easeOutQuad: (t) => -t * (t - 2),
+    easeInOutQuad: (t) => (t /= 0.5) < 1 ? 0.5 * t * t : -0.5 * (--t * (t - 2) - 1),
+    easeInCubic: (t) => t * t * t,
+    easeOutCubic: (t) => (t -= 1) * t * t + 1,
+    easeInOutCubic: (t) => (t /= 0.5) < 1 ? 0.5 * t * t * t : 0.5 * ((t -= 2) * t * t + 2),
+    easeInQuart: (t) => t * t * t * t,
+    easeOutQuart: (t) => -((t -= 1) * t * t * t - 1),
+    easeInOutQuart: (t) => (t /= 0.5) < 1 ? 0.5 * t * t * t * t : -0.5 * ((t -= 2) * t * t * t - 2),
+    easeInQuint: (t) => t * t * t * t * t,
+    easeOutQuint: (t) => (t -= 1) * t * t * t * t + 1,
+    easeInOutQuint: (t) => (t /= 0.5) < 1 ? 0.5 * t * t * t * t * t : 0.5 * ((t -= 2) * t * t * t * t + 2),
+    easeInSine: (t) => -Math.cos(t * HALF_PI) + 1,
+    easeOutSine: (t) => Math.sin(t * HALF_PI),
+    easeInOutSine: (t) => -0.5 * (Math.cos(PI * t) - 1),
+    easeInExpo: (t) => t === 0 ? 0 : Math.pow(2, 10 * (t - 1)),
+    easeOutExpo: (t) => t === 1 ? 1 : -Math.pow(2, -10 * t) + 1,
+    easeInOutExpo: (t) => atEdge(t) ? t : t < 0.5 ? 0.5 * Math.pow(2, 10 * (t * 2 - 1)) : 0.5 * (-Math.pow(2, -10 * (t * 2 - 1)) + 2),
+    easeInCirc: (t) => t >= 1 ? t : -(Math.sqrt(1 - t * t) - 1),
+    easeOutCirc: (t) => Math.sqrt(1 - (t -= 1) * t),
+    easeInOutCirc: (t) => (t /= 0.5) < 1 ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1),
+    easeInElastic: (t) => atEdge(t) ? t : elasticIn(t, 0.075, 0.3),
+    easeOutElastic: (t) => atEdge(t) ? t : elasticOut(t, 0.075, 0.3),
+    easeInOutElastic(t) {
+      const s = 0.1125;
+      const p = 0.45;
+      return atEdge(t) ? t : t < 0.5 ? 0.5 * elasticIn(t * 2, s, p) : 0.5 + 0.5 * elasticOut(t * 2 - 1, s, p);
+    },
+    easeInBack(t) {
+      const s = 1.70158;
+      return t * t * ((s + 1) * t - s);
+    },
+    easeOutBack(t) {
+      const s = 1.70158;
+      return (t -= 1) * t * ((s + 1) * t + s) + 1;
+    },
+    easeInOutBack(t) {
+      let s = 1.70158;
+      if ((t /= 0.5) < 1) {
+        return 0.5 * (t * t * (((s *= 1.525) + 1) * t - s));
+      }
+      return 0.5 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2);
+    },
+    easeInBounce: (t) => 1 - effects.easeOutBounce(1 - t),
+    easeOutBounce(t) {
+      const m = 7.5625;
+      const d = 2.75;
+      if (t < 1 / d) {
+        return m * t * t;
+      }
+      if (t < 2 / d) {
+        return m * (t -= 1.5 / d) * t + 0.75;
+      }
+      if (t < 2.5 / d) {
+        return m * (t -= 2.25 / d) * t + 0.9375;
+      }
+      return m * (t -= 2.625 / d) * t + 0.984375;
+    },
+    easeInOutBounce: (t) => t < 0.5 ? effects.easeInBounce(t * 2) * 0.5 : effects.easeOutBounce(t * 2 - 1) * 0.5 + 0.5
+  };
+  function isPatternOrGradient(value) {
+    if (value && typeof value === "object") {
+      const type = value.toString();
+      return type === "[object CanvasPattern]" || type === "[object CanvasGradient]";
+    }
+    return false;
+  }
+  function color(value) {
+    return isPatternOrGradient(value) ? value : new Color(value);
+  }
+  function getHoverColor(value) {
+    return isPatternOrGradient(value) ? value : new Color(value).saturate(0.5).darken(0.1).hexString();
+  }
+  const numbers = [
+    "x",
+    "y",
+    "borderWidth",
+    "radius",
+    "tension"
+  ];
+  const colors = [
+    "color",
+    "borderColor",
+    "backgroundColor"
+  ];
+  function applyAnimationsDefaults(defaults2) {
+    defaults2.set("animation", {
+      delay: void 0,
+      duration: 1e3,
+      easing: "easeOutQuart",
+      fn: void 0,
+      from: void 0,
+      loop: void 0,
+      to: void 0,
+      type: void 0
+    });
+    defaults2.describe("animation", {
+      _fallback: false,
+      _indexable: false,
+      _scriptable: (name) => name !== "onProgress" && name !== "onComplete" && name !== "fn"
+    });
+    defaults2.set("animations", {
+      colors: {
+        type: "color",
+        properties: colors
+      },
+      numbers: {
+        type: "number",
+        properties: numbers
+      }
+    });
+    defaults2.describe("animations", {
+      _fallback: "animation"
+    });
+    defaults2.set("transitions", {
+      active: {
+        animation: {
+          duration: 400
+        }
+      },
+      resize: {
+        animation: {
+          duration: 0
+        }
+      },
+      show: {
+        animations: {
+          colors: {
+            from: "transparent"
+          },
+          visible: {
+            type: "boolean",
+            duration: 0
+          }
+        }
+      },
+      hide: {
+        animations: {
+          colors: {
+            to: "transparent"
+          },
+          visible: {
+            type: "boolean",
+            easing: "linear",
+            fn: (v) => v | 0
+          }
+        }
+      }
+    });
+  }
+  function applyLayoutsDefaults(defaults2) {
+    defaults2.set("layout", {
+      autoPadding: true,
+      padding: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      }
+    });
+  }
+  const intlCache = /* @__PURE__ */ new Map();
+  function getNumberFormat(locale, options) {
+    options = options || {};
+    const cacheKey = locale + JSON.stringify(options);
+    let formatter = intlCache.get(cacheKey);
+    if (!formatter) {
+      formatter = new Intl.NumberFormat(locale, options);
+      intlCache.set(cacheKey, formatter);
+    }
+    return formatter;
+  }
+  function formatNumber(num, locale, options) {
+    return getNumberFormat(locale, options).format(num);
+  }
+  const formatters = {
+    values(value) {
+      return isArray(value) ? value : "" + value;
+    },
+    numeric(tickValue, index2, ticks) {
+      if (tickValue === 0) {
+        return "0";
+      }
+      const locale = this.chart.options.locale;
+      let notation;
+      let delta = tickValue;
+      if (ticks.length > 1) {
+        const maxTick = Math.max(Math.abs(ticks[0].value), Math.abs(ticks[ticks.length - 1].value));
+        if (maxTick < 1e-4 || maxTick > 1e15) {
+          notation = "scientific";
+        }
+        delta = calculateDelta(tickValue, ticks);
+      }
+      const logDelta = log10(Math.abs(delta));
+      const numDecimal = isNaN(logDelta) ? 1 : Math.max(Math.min(-1 * Math.floor(logDelta), 20), 0);
+      const options = {
+        notation,
+        minimumFractionDigits: numDecimal,
+        maximumFractionDigits: numDecimal
+      };
+      Object.assign(options, this.options.ticks.format);
+      return formatNumber(tickValue, locale, options);
+    }
+  };
+  function calculateDelta(tickValue, ticks) {
+    let delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
+    if (Math.abs(delta) >= 1 && tickValue !== Math.floor(tickValue)) {
+      delta = tickValue - Math.floor(tickValue);
+    }
+    return delta;
+  }
+  var Ticks = {
+    formatters
+  };
+  function applyScaleDefaults(defaults2) {
+    defaults2.set("scale", {
+      display: true,
+      offset: false,
+      reverse: false,
+      beginAtZero: false,
+      bounds: "ticks",
+      clip: true,
+      grace: 0,
+      grid: {
+        display: true,
+        lineWidth: 1,
+        drawOnChartArea: true,
+        drawTicks: true,
+        tickLength: 8,
+        tickWidth: (_ctx, options) => options.lineWidth,
+        tickColor: (_ctx, options) => options.color,
+        offset: false
+      },
+      border: {
+        display: true,
+        dash: [],
+        dashOffset: 0,
+        width: 1
+      },
+      title: {
+        display: false,
+        text: "",
+        padding: {
+          top: 4,
+          bottom: 4
+        }
+      },
+      ticks: {
+        minRotation: 0,
+        maxRotation: 50,
+        mirror: false,
+        textStrokeWidth: 0,
+        textStrokeColor: "",
+        padding: 3,
+        display: true,
+        autoSkip: true,
+        autoSkipPadding: 3,
+        labelOffset: 0,
+        callback: Ticks.formatters.values,
+        minor: {},
+        major: {},
+        align: "center",
+        crossAlign: "near",
+        showLabelBackdrop: false,
+        backdropColor: "rgba(255, 255, 255, 0.75)",
+        backdropPadding: 2
+      }
+    });
+    defaults2.route("scale.ticks", "color", "", "color");
+    defaults2.route("scale.grid", "color", "", "borderColor");
+    defaults2.route("scale.border", "color", "", "borderColor");
+    defaults2.route("scale.title", "color", "", "color");
+    defaults2.describe("scale", {
+      _fallback: false,
+      _scriptable: (name) => !name.startsWith("before") && !name.startsWith("after") && name !== "callback" && name !== "parser",
+      _indexable: (name) => name !== "borderDash" && name !== "tickBorderDash" && name !== "dash"
+    });
+    defaults2.describe("scales", {
+      _fallback: "scale"
+    });
+    defaults2.describe("scale.ticks", {
+      _scriptable: (name) => name !== "backdropPadding" && name !== "callback",
+      _indexable: (name) => name !== "backdropPadding"
+    });
+  }
+  const overrides = /* @__PURE__ */ Object.create(null);
+  const descriptors = /* @__PURE__ */ Object.create(null);
+  function getScope$1(node, key) {
+    if (!key) {
+      return node;
+    }
+    const keys = key.split(".");
+    for (let i = 0, n = keys.length; i < n; ++i) {
+      const k = keys[i];
+      node = node[k] || (node[k] = /* @__PURE__ */ Object.create(null));
+    }
+    return node;
+  }
+  function set(root, scope, values) {
+    if (typeof scope === "string") {
+      return merge(getScope$1(root, scope), values);
+    }
+    return merge(getScope$1(root, ""), scope);
+  }
+  class Defaults {
+    constructor(_descriptors2, _appliers) {
+      this.animation = void 0;
+      this.backgroundColor = "rgba(0,0,0,0.1)";
+      this.borderColor = "rgba(0,0,0,0.1)";
+      this.color = "#666";
+      this.datasets = {};
+      this.devicePixelRatio = (context) => context.chart.platform.getDevicePixelRatio();
+      this.elements = {};
+      this.events = [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove"
+      ];
+      this.font = {
+        family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+        size: 12,
+        style: "normal",
+        lineHeight: 1.2,
+        weight: null
+      };
+      this.hover = {};
+      this.hoverBackgroundColor = (ctx, options) => getHoverColor(options.backgroundColor);
+      this.hoverBorderColor = (ctx, options) => getHoverColor(options.borderColor);
+      this.hoverColor = (ctx, options) => getHoverColor(options.color);
+      this.indexAxis = "x";
+      this.interaction = {
+        mode: "nearest",
+        intersect: true,
+        includeInvisible: false
+      };
+      this.maintainAspectRatio = true;
+      this.onHover = null;
+      this.onClick = null;
+      this.parsing = true;
+      this.plugins = {};
+      this.responsive = true;
+      this.scale = void 0;
+      this.scales = {};
+      this.showLine = true;
+      this.drawActiveElementsOnTop = true;
+      this.describe(_descriptors2);
+      this.apply(_appliers);
+    }
+    set(scope, values) {
+      return set(this, scope, values);
+    }
+    get(scope) {
+      return getScope$1(this, scope);
+    }
+    describe(scope, values) {
+      return set(descriptors, scope, values);
+    }
+    override(scope, values) {
+      return set(overrides, scope, values);
+    }
+    route(scope, name, targetScope, targetName) {
+      const scopeObject = getScope$1(this, scope);
+      const targetScopeObject = getScope$1(this, targetScope);
+      const privateName = "_" + name;
+      Object.defineProperties(scopeObject, {
+        [privateName]: {
+          value: scopeObject[name],
+          writable: true
+        },
+        [name]: {
+          enumerable: true,
+          get() {
+            const local = this[privateName];
+            const target = targetScopeObject[targetName];
+            if (isObject(local)) {
+              return Object.assign({}, target, local);
+            }
+            return valueOrDefault(local, target);
+          },
+          set(value) {
+            this[privateName] = value;
+          }
+        }
+      });
+    }
+    apply(appliers) {
+      appliers.forEach((apply) => apply(this));
+    }
+  }
+  var defaults = /* @__PURE__ */ new Defaults({
+    _scriptable: (name) => !name.startsWith("on"),
+    _indexable: (name) => name !== "events",
+    hover: {
+      _fallback: "interaction"
+    },
+    interaction: {
+      _scriptable: false,
+      _indexable: false
+    }
+  }, [
+    applyAnimationsDefaults,
+    applyLayoutsDefaults,
+    applyScaleDefaults
+  ]);
+  function toFontString(font) {
+    if (!font || isNullOrUndef(font.size) || isNullOrUndef(font.family)) {
+      return null;
+    }
+    return (font.style ? font.style + " " : "") + (font.weight ? font.weight + " " : "") + font.size + "px " + font.family;
+  }
+  function _measureText(ctx, data, gc, longest, string) {
+    let textWidth = data[string];
+    if (!textWidth) {
+      textWidth = data[string] = ctx.measureText(string).width;
+      gc.push(string);
+    }
+    if (textWidth > longest) {
+      longest = textWidth;
+    }
+    return longest;
+  }
+  function _alignPixel(chart, pixel, width) {
+    const devicePixelRatio = chart.currentDevicePixelRatio;
+    const halfWidth = width !== 0 ? Math.max(width / 2, 0.5) : 0;
+    return Math.round((pixel - halfWidth) * devicePixelRatio) / devicePixelRatio + halfWidth;
+  }
+  function clearCanvas(canvas, ctx) {
+    if (!ctx && !canvas) {
+      return;
+    }
+    ctx = ctx || canvas.getContext("2d");
+    ctx.save();
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.restore();
+  }
+  function drawPoint(ctx, options, x, y) {
+    drawPointLegend(ctx, options, x, y, null);
+  }
+  function drawPointLegend(ctx, options, x, y, w) {
+    let type, xOffset, yOffset, size, cornerRadius, width, xOffsetW, yOffsetW;
+    const style = options.pointStyle;
+    const rotation = options.rotation;
+    const radius = options.radius;
+    let rad = (rotation || 0) * RAD_PER_DEG;
+    if (style && typeof style === "object") {
+      type = style.toString();
+      if (type === "[object HTMLImageElement]" || type === "[object HTMLCanvasElement]") {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(rad);
+        ctx.drawImage(style, -style.width / 2, -style.height / 2, style.width, style.height);
+        ctx.restore();
+        return;
+      }
+    }
+    if (isNaN(radius) || radius <= 0) {
+      return;
+    }
+    ctx.beginPath();
+    switch (style) {
+      // Default includes circle
+      default:
+        if (w) {
+          ctx.ellipse(x, y, w / 2, radius, 0, 0, TAU);
+        } else {
+          ctx.arc(x, y, radius, 0, TAU);
+        }
+        ctx.closePath();
+        break;
+      case "triangle":
+        width = w ? w / 2 : radius;
+        ctx.moveTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
+        rad += TWO_THIRDS_PI;
+        ctx.lineTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
+        rad += TWO_THIRDS_PI;
+        ctx.lineTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
+        ctx.closePath();
+        break;
+      case "rectRounded":
+        cornerRadius = radius * 0.516;
+        size = radius - cornerRadius;
+        xOffset = Math.cos(rad + QUARTER_PI) * size;
+        xOffsetW = Math.cos(rad + QUARTER_PI) * (w ? w / 2 - cornerRadius : size);
+        yOffset = Math.sin(rad + QUARTER_PI) * size;
+        yOffsetW = Math.sin(rad + QUARTER_PI) * (w ? w / 2 - cornerRadius : size);
+        ctx.arc(x - xOffsetW, y - yOffset, cornerRadius, rad - PI, rad - HALF_PI);
+        ctx.arc(x + yOffsetW, y - xOffset, cornerRadius, rad - HALF_PI, rad);
+        ctx.arc(x + xOffsetW, y + yOffset, cornerRadius, rad, rad + HALF_PI);
+        ctx.arc(x - yOffsetW, y + xOffset, cornerRadius, rad + HALF_PI, rad + PI);
+        ctx.closePath();
+        break;
+      case "rect":
+        if (!rotation) {
+          size = Math.SQRT1_2 * radius;
+          width = w ? w / 2 : size;
+          ctx.rect(x - width, y - size, 2 * width, 2 * size);
+          break;
+        }
+        rad += QUARTER_PI;
+      /* falls through */
+      case "rectRot":
+        xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
+        xOffset = Math.cos(rad) * radius;
+        yOffset = Math.sin(rad) * radius;
+        yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
+        ctx.moveTo(x - xOffsetW, y - yOffset);
+        ctx.lineTo(x + yOffsetW, y - xOffset);
+        ctx.lineTo(x + xOffsetW, y + yOffset);
+        ctx.lineTo(x - yOffsetW, y + xOffset);
+        ctx.closePath();
+        break;
+      case "crossRot":
+        rad += QUARTER_PI;
+      /* falls through */
+      case "cross":
+        xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
+        xOffset = Math.cos(rad) * radius;
+        yOffset = Math.sin(rad) * radius;
+        yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
+        ctx.moveTo(x - xOffsetW, y - yOffset);
+        ctx.lineTo(x + xOffsetW, y + yOffset);
+        ctx.moveTo(x + yOffsetW, y - xOffset);
+        ctx.lineTo(x - yOffsetW, y + xOffset);
+        break;
+      case "star":
+        xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
+        xOffset = Math.cos(rad) * radius;
+        yOffset = Math.sin(rad) * radius;
+        yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
+        ctx.moveTo(x - xOffsetW, y - yOffset);
+        ctx.lineTo(x + xOffsetW, y + yOffset);
+        ctx.moveTo(x + yOffsetW, y - xOffset);
+        ctx.lineTo(x - yOffsetW, y + xOffset);
+        rad += QUARTER_PI;
+        xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
+        xOffset = Math.cos(rad) * radius;
+        yOffset = Math.sin(rad) * radius;
+        yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
+        ctx.moveTo(x - xOffsetW, y - yOffset);
+        ctx.lineTo(x + xOffsetW, y + yOffset);
+        ctx.moveTo(x + yOffsetW, y - xOffset);
+        ctx.lineTo(x - yOffsetW, y + xOffset);
+        break;
+      case "line":
+        xOffset = w ? w / 2 : Math.cos(rad) * radius;
+        yOffset = Math.sin(rad) * radius;
+        ctx.moveTo(x - xOffset, y - yOffset);
+        ctx.lineTo(x + xOffset, y + yOffset);
+        break;
+      case "dash":
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + Math.cos(rad) * (w ? w / 2 : radius), y + Math.sin(rad) * radius);
+        break;
+      case false:
+        ctx.closePath();
+        break;
+    }
+    ctx.fill();
+    if (options.borderWidth > 0) {
+      ctx.stroke();
+    }
+  }
+  function _isPointInArea(point, area, margin) {
+    margin = margin || 0.5;
+    return !area || point && point.x > area.left - margin && point.x < area.right + margin && point.y > area.top - margin && point.y < area.bottom + margin;
+  }
+  function clipArea(ctx, area) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(area.left, area.top, area.right - area.left, area.bottom - area.top);
+    ctx.clip();
+  }
+  function unclipArea(ctx) {
+    ctx.restore();
+  }
+  function _steppedLineTo(ctx, previous, target, flip, mode) {
+    if (!previous) {
+      return ctx.lineTo(target.x, target.y);
+    }
+    if (mode === "middle") {
+      const midpoint = (previous.x + target.x) / 2;
+      ctx.lineTo(midpoint, previous.y);
+      ctx.lineTo(midpoint, target.y);
+    } else if (mode === "after" !== !!flip) {
+      ctx.lineTo(previous.x, target.y);
+    } else {
+      ctx.lineTo(target.x, previous.y);
+    }
+    ctx.lineTo(target.x, target.y);
+  }
+  function _bezierCurveTo(ctx, previous, target, flip) {
+    if (!previous) {
+      return ctx.lineTo(target.x, target.y);
+    }
+    ctx.bezierCurveTo(flip ? previous.cp1x : previous.cp2x, flip ? previous.cp1y : previous.cp2y, flip ? target.cp2x : target.cp1x, flip ? target.cp2y : target.cp1y, target.x, target.y);
+  }
+  function setRenderOpts(ctx, opts) {
+    if (opts.translation) {
+      ctx.translate(opts.translation[0], opts.translation[1]);
+    }
+    if (!isNullOrUndef(opts.rotation)) {
+      ctx.rotate(opts.rotation);
+    }
+    if (opts.color) {
+      ctx.fillStyle = opts.color;
+    }
+    if (opts.textAlign) {
+      ctx.textAlign = opts.textAlign;
+    }
+    if (opts.textBaseline) {
+      ctx.textBaseline = opts.textBaseline;
+    }
+  }
+  function decorateText(ctx, x, y, line, opts) {
+    if (opts.strikethrough || opts.underline) {
+      const metrics = ctx.measureText(line);
+      const left = x - metrics.actualBoundingBoxLeft;
+      const right = x + metrics.actualBoundingBoxRight;
+      const top = y - metrics.actualBoundingBoxAscent;
+      const bottom = y + metrics.actualBoundingBoxDescent;
+      const yDecoration = opts.strikethrough ? (top + bottom) / 2 : bottom;
+      ctx.strokeStyle = ctx.fillStyle;
+      ctx.beginPath();
+      ctx.lineWidth = opts.decorationWidth || 2;
+      ctx.moveTo(left, yDecoration);
+      ctx.lineTo(right, yDecoration);
+      ctx.stroke();
+    }
+  }
+  function drawBackdrop(ctx, opts) {
+    const oldColor = ctx.fillStyle;
+    ctx.fillStyle = opts.color;
+    ctx.fillRect(opts.left, opts.top, opts.width, opts.height);
+    ctx.fillStyle = oldColor;
+  }
+  function renderText(ctx, text, x, y, font, opts = {}) {
+    const lines = isArray(text) ? text : [
+      text
+    ];
+    const stroke = opts.strokeWidth > 0 && opts.strokeColor !== "";
+    let i, line;
+    ctx.save();
+    ctx.font = font.string;
+    setRenderOpts(ctx, opts);
+    for (i = 0; i < lines.length; ++i) {
+      line = lines[i];
+      if (opts.backdrop) {
+        drawBackdrop(ctx, opts.backdrop);
+      }
+      if (stroke) {
+        if (opts.strokeColor) {
+          ctx.strokeStyle = opts.strokeColor;
+        }
+        if (!isNullOrUndef(opts.strokeWidth)) {
+          ctx.lineWidth = opts.strokeWidth;
+        }
+        ctx.strokeText(line, x, y, opts.maxWidth);
+      }
+      ctx.fillText(line, x, y, opts.maxWidth);
+      decorateText(ctx, x, y, line, opts);
+      y += Number(font.lineHeight);
+    }
+    ctx.restore();
+  }
+  function addRoundedRectPath(ctx, rect) {
+    const { x, y, w, h, radius } = rect;
+    ctx.arc(x + radius.topLeft, y + radius.topLeft, radius.topLeft, 1.5 * PI, PI, true);
+    ctx.lineTo(x, y + h - radius.bottomLeft);
+    ctx.arc(x + radius.bottomLeft, y + h - radius.bottomLeft, radius.bottomLeft, PI, HALF_PI, true);
+    ctx.lineTo(x + w - radius.bottomRight, y + h);
+    ctx.arc(x + w - radius.bottomRight, y + h - radius.bottomRight, radius.bottomRight, HALF_PI, 0, true);
+    ctx.lineTo(x + w, y + radius.topRight);
+    ctx.arc(x + w - radius.topRight, y + radius.topRight, radius.topRight, 0, -HALF_PI, true);
+    ctx.lineTo(x + radius.topLeft, y);
+  }
+  const LINE_HEIGHT = /^(normal|(\d+(?:\.\d+)?)(px|em|%)?)$/;
+  const FONT_STYLE = /^(normal|italic|initial|inherit|unset|(oblique( -?[0-9]?[0-9]deg)?))$/;
+  function toLineHeight(value, size) {
+    const matches = ("" + value).match(LINE_HEIGHT);
+    if (!matches || matches[1] === "normal") {
+      return size * 1.2;
+    }
+    value = +matches[2];
+    switch (matches[3]) {
+      case "px":
+        return value;
+      case "%":
+        value /= 100;
+        break;
+    }
+    return size * value;
+  }
+  const numberOrZero = (v) => +v || 0;
+  function _readValueToProps(value, props) {
+    const ret = {};
+    const objProps = isObject(props);
+    const keys = objProps ? Object.keys(props) : props;
+    const read = isObject(value) ? objProps ? (prop) => valueOrDefault(value[prop], value[props[prop]]) : (prop) => value[prop] : () => value;
+    for (const prop of keys) {
+      ret[prop] = numberOrZero(read(prop));
+    }
+    return ret;
+  }
+  function toTRBL(value) {
+    return _readValueToProps(value, {
+      top: "y",
+      right: "x",
+      bottom: "y",
+      left: "x"
+    });
+  }
+  function toTRBLCorners(value) {
+    return _readValueToProps(value, [
+      "topLeft",
+      "topRight",
+      "bottomLeft",
+      "bottomRight"
+    ]);
+  }
+  function toPadding(value) {
+    const obj = toTRBL(value);
+    obj.width = obj.left + obj.right;
+    obj.height = obj.top + obj.bottom;
+    return obj;
+  }
+  function toFont(options, fallback) {
+    options = options || {};
+    fallback = fallback || defaults.font;
+    let size = valueOrDefault(options.size, fallback.size);
+    if (typeof size === "string") {
+      size = parseInt(size, 10);
+    }
+    let style = valueOrDefault(options.style, fallback.style);
+    if (style && !("" + style).match(FONT_STYLE)) {
+      console.warn('Invalid font style specified: "' + style + '"');
+      style = void 0;
+    }
+    const font = {
+      family: valueOrDefault(options.family, fallback.family),
+      lineHeight: toLineHeight(valueOrDefault(options.lineHeight, fallback.lineHeight), size),
+      size,
+      style,
+      weight: valueOrDefault(options.weight, fallback.weight),
+      string: ""
+    };
+    font.string = toFontString(font);
+    return font;
+  }
+  function resolve(inputs, context, index2, info) {
+    let i, ilen, value;
+    for (i = 0, ilen = inputs.length; i < ilen; ++i) {
+      value = inputs[i];
+      if (value === void 0) {
+        continue;
+      }
+      if (value !== void 0) {
+        return value;
+      }
+    }
+  }
+  function _addGrace(minmax, grace, beginAtZero) {
+    const { min, max } = minmax;
+    const change = toDimension(grace, (max - min) / 2);
+    const keepZero = (value, add) => beginAtZero && value === 0 ? 0 : value + add;
+    return {
+      min: keepZero(min, -Math.abs(change)),
+      max: keepZero(max, change)
+    };
+  }
+  function createContext(parentContext, context) {
+    return Object.assign(Object.create(parentContext), context);
+  }
+  function _createResolver(scopes, prefixes = [
+    ""
+  ], rootScopes, fallback, getTarget = () => scopes[0]) {
+    const finalRootScopes = rootScopes || scopes;
+    if (typeof fallback === "undefined") {
+      fallback = _resolve("_fallback", scopes);
+    }
+    const cache = {
+      [Symbol.toStringTag]: "Object",
+      _cacheable: true,
+      _scopes: scopes,
+      _rootScopes: finalRootScopes,
+      _fallback: fallback,
+      _getTarget: getTarget,
+      override: (scope) => _createResolver([
+        scope,
+        ...scopes
+      ], prefixes, finalRootScopes, fallback)
+    };
+    return new Proxy(cache, {
+      /**
+      * A trap for the delete operator.
+      */
+      deleteProperty(target, prop) {
+        delete target[prop];
+        delete target._keys;
+        delete scopes[0][prop];
+        return true;
+      },
+      /**
+      * A trap for getting property values.
+      */
+      get(target, prop) {
+        return _cached(target, prop, () => _resolveWithPrefixes(prop, prefixes, scopes, target));
+      },
+      /**
+      * A trap for Object.getOwnPropertyDescriptor.
+      * Also used by Object.hasOwnProperty.
+      */
+      getOwnPropertyDescriptor(target, prop) {
+        return Reflect.getOwnPropertyDescriptor(target._scopes[0], prop);
+      },
+      /**
+      * A trap for Object.getPrototypeOf.
+      */
+      getPrototypeOf() {
+        return Reflect.getPrototypeOf(scopes[0]);
+      },
+      /**
+      * A trap for the in operator.
+      */
+      has(target, prop) {
+        return getKeysFromAllScopes(target).includes(prop);
+      },
+      /**
+      * A trap for Object.getOwnPropertyNames and Object.getOwnPropertySymbols.
+      */
+      ownKeys(target) {
+        return getKeysFromAllScopes(target);
+      },
+      /**
+      * A trap for setting property values.
+      */
+      set(target, prop, value) {
+        const storage = target._storage || (target._storage = getTarget());
+        target[prop] = storage[prop] = value;
+        delete target._keys;
+        return true;
+      }
+    });
+  }
+  function _attachContext(proxy, context, subProxy, descriptorDefaults) {
+    const cache = {
+      _cacheable: false,
+      _proxy: proxy,
+      _context: context,
+      _subProxy: subProxy,
+      _stack: /* @__PURE__ */ new Set(),
+      _descriptors: _descriptors(proxy, descriptorDefaults),
+      setContext: (ctx) => _attachContext(proxy, ctx, subProxy, descriptorDefaults),
+      override: (scope) => _attachContext(proxy.override(scope), context, subProxy, descriptorDefaults)
+    };
+    return new Proxy(cache, {
+      /**
+      * A trap for the delete operator.
+      */
+      deleteProperty(target, prop) {
+        delete target[prop];
+        delete proxy[prop];
+        return true;
+      },
+      /**
+      * A trap for getting property values.
+      */
+      get(target, prop, receiver) {
+        return _cached(target, prop, () => _resolveWithContext(target, prop, receiver));
+      },
+      /**
+      * A trap for Object.getOwnPropertyDescriptor.
+      * Also used by Object.hasOwnProperty.
+      */
+      getOwnPropertyDescriptor(target, prop) {
+        return target._descriptors.allKeys ? Reflect.has(proxy, prop) ? {
+          enumerable: true,
+          configurable: true
+        } : void 0 : Reflect.getOwnPropertyDescriptor(proxy, prop);
+      },
+      /**
+      * A trap for Object.getPrototypeOf.
+      */
+      getPrototypeOf() {
+        return Reflect.getPrototypeOf(proxy);
+      },
+      /**
+      * A trap for the in operator.
+      */
+      has(target, prop) {
+        return Reflect.has(proxy, prop);
+      },
+      /**
+      * A trap for Object.getOwnPropertyNames and Object.getOwnPropertySymbols.
+      */
+      ownKeys() {
+        return Reflect.ownKeys(proxy);
+      },
+      /**
+      * A trap for setting property values.
+      */
+      set(target, prop, value) {
+        proxy[prop] = value;
+        delete target[prop];
+        return true;
+      }
+    });
+  }
+  function _descriptors(proxy, defaults2 = {
+    scriptable: true,
+    indexable: true
+  }) {
+    const { _scriptable = defaults2.scriptable, _indexable = defaults2.indexable, _allKeys = defaults2.allKeys } = proxy;
+    return {
+      allKeys: _allKeys,
+      scriptable: _scriptable,
+      indexable: _indexable,
+      isScriptable: isFunction(_scriptable) ? _scriptable : () => _scriptable,
+      isIndexable: isFunction(_indexable) ? _indexable : () => _indexable
+    };
+  }
+  const readKey = (prefix, name) => prefix ? prefix + _capitalize(name) : name;
+  const needsSubResolver = (prop, value) => isObject(value) && prop !== "adapters" && (Object.getPrototypeOf(value) === null || value.constructor === Object);
+  function _cached(target, prop, resolve2) {
+    if (Object.prototype.hasOwnProperty.call(target, prop) || prop === "constructor") {
+      return target[prop];
+    }
+    const value = resolve2();
+    target[prop] = value;
+    return value;
+  }
+  function _resolveWithContext(target, prop, receiver) {
+    const { _proxy, _context, _subProxy, _descriptors: descriptors2 } = target;
+    let value = _proxy[prop];
+    if (isFunction(value) && descriptors2.isScriptable(prop)) {
+      value = _resolveScriptable(prop, value, target, receiver);
+    }
+    if (isArray(value) && value.length) {
+      value = _resolveArray(prop, value, target, descriptors2.isIndexable);
+    }
+    if (needsSubResolver(prop, value)) {
+      value = _attachContext(value, _context, _subProxy && _subProxy[prop], descriptors2);
+    }
+    return value;
+  }
+  function _resolveScriptable(prop, getValue, target, receiver) {
+    const { _proxy, _context, _subProxy, _stack } = target;
+    if (_stack.has(prop)) {
+      throw new Error("Recursion detected: " + Array.from(_stack).join("->") + "->" + prop);
+    }
+    _stack.add(prop);
+    let value = getValue(_context, _subProxy || receiver);
+    _stack.delete(prop);
+    if (needsSubResolver(prop, value)) {
+      value = createSubResolver(_proxy._scopes, _proxy, prop, value);
+    }
+    return value;
+  }
+  function _resolveArray(prop, value, target, isIndexable) {
+    const { _proxy, _context, _subProxy, _descriptors: descriptors2 } = target;
+    if (typeof _context.index !== "undefined" && isIndexable(prop)) {
+      return value[_context.index % value.length];
+    } else if (isObject(value[0])) {
+      const arr = value;
+      const scopes = _proxy._scopes.filter((s) => s !== arr);
+      value = [];
+      for (const item of arr) {
+        const resolver = createSubResolver(scopes, _proxy, prop, item);
+        value.push(_attachContext(resolver, _context, _subProxy && _subProxy[prop], descriptors2));
+      }
+    }
+    return value;
+  }
+  function resolveFallback(fallback, prop, value) {
+    return isFunction(fallback) ? fallback(prop, value) : fallback;
+  }
+  const getScope = (key, parent) => key === true ? parent : typeof key === "string" ? resolveObjectKey(parent, key) : void 0;
+  function addScopes(set2, parentScopes, key, parentFallback, value) {
+    for (const parent of parentScopes) {
+      const scope = getScope(key, parent);
+      if (scope) {
+        set2.add(scope);
+        const fallback = resolveFallback(scope._fallback, key, value);
+        if (typeof fallback !== "undefined" && fallback !== key && fallback !== parentFallback) {
+          return fallback;
+        }
+      } else if (scope === false && typeof parentFallback !== "undefined" && key !== parentFallback) {
+        return null;
+      }
+    }
+    return false;
+  }
+  function createSubResolver(parentScopes, resolver, prop, value) {
+    const rootScopes = resolver._rootScopes;
+    const fallback = resolveFallback(resolver._fallback, prop, value);
+    const allScopes = [
+      ...parentScopes,
+      ...rootScopes
+    ];
+    const set2 = /* @__PURE__ */ new Set();
+    set2.add(value);
+    let key = addScopesFromKey(set2, allScopes, prop, fallback || prop, value);
+    if (key === null) {
+      return false;
+    }
+    if (typeof fallback !== "undefined" && fallback !== prop) {
+      key = addScopesFromKey(set2, allScopes, fallback, key, value);
+      if (key === null) {
+        return false;
+      }
+    }
+    return _createResolver(Array.from(set2), [
+      ""
+    ], rootScopes, fallback, () => subGetTarget(resolver, prop, value));
+  }
+  function addScopesFromKey(set2, allScopes, key, fallback, item) {
+    while (key) {
+      key = addScopes(set2, allScopes, key, fallback, item);
+    }
+    return key;
+  }
+  function subGetTarget(resolver, prop, value) {
+    const parent = resolver._getTarget();
+    if (!(prop in parent)) {
+      parent[prop] = {};
+    }
+    const target = parent[prop];
+    if (isArray(target) && isObject(value)) {
+      return value;
+    }
+    return target || {};
+  }
+  function _resolveWithPrefixes(prop, prefixes, scopes, proxy) {
+    let value;
+    for (const prefix of prefixes) {
+      value = _resolve(readKey(prefix, prop), scopes);
+      if (typeof value !== "undefined") {
+        return needsSubResolver(prop, value) ? createSubResolver(scopes, proxy, prop, value) : value;
+      }
+    }
+  }
+  function _resolve(key, scopes) {
+    for (const scope of scopes) {
+      if (!scope) {
+        continue;
+      }
+      const value = scope[key];
+      if (typeof value !== "undefined") {
+        return value;
+      }
+    }
+  }
+  function getKeysFromAllScopes(target) {
+    let keys = target._keys;
+    if (!keys) {
+      keys = target._keys = resolveKeysFromAllScopes(target._scopes);
+    }
+    return keys;
+  }
+  function resolveKeysFromAllScopes(scopes) {
+    const set2 = /* @__PURE__ */ new Set();
+    for (const scope of scopes) {
+      for (const key of Object.keys(scope).filter((k) => !k.startsWith("_"))) {
+        set2.add(key);
+      }
+    }
+    return Array.from(set2);
+  }
+  const EPSILON = Number.EPSILON || 1e-14;
+  const getPoint = (points, i) => i < points.length && !points[i].skip && points[i];
+  const getValueAxis = (indexAxis) => indexAxis === "x" ? "y" : "x";
+  function splineCurve(firstPoint, middlePoint, afterPoint, t) {
+    const previous = firstPoint.skip ? middlePoint : firstPoint;
+    const current = middlePoint;
+    const next = afterPoint.skip ? middlePoint : afterPoint;
+    const d01 = distanceBetweenPoints(current, previous);
+    const d12 = distanceBetweenPoints(next, current);
+    let s01 = d01 / (d01 + d12);
+    let s12 = d12 / (d01 + d12);
+    s01 = isNaN(s01) ? 0 : s01;
+    s12 = isNaN(s12) ? 0 : s12;
+    const fa = t * s01;
+    const fb = t * s12;
+    return {
+      previous: {
+        x: current.x - fa * (next.x - previous.x),
+        y: current.y - fa * (next.y - previous.y)
+      },
+      next: {
+        x: current.x + fb * (next.x - previous.x),
+        y: current.y + fb * (next.y - previous.y)
+      }
+    };
+  }
+  function monotoneAdjust(points, deltaK, mK) {
+    const pointsLen = points.length;
+    let alphaK, betaK, tauK, squaredMagnitude, pointCurrent;
+    let pointAfter = getPoint(points, 0);
+    for (let i = 0; i < pointsLen - 1; ++i) {
+      pointCurrent = pointAfter;
+      pointAfter = getPoint(points, i + 1);
+      if (!pointCurrent || !pointAfter) {
+        continue;
+      }
+      if (almostEquals(deltaK[i], 0, EPSILON)) {
+        mK[i] = mK[i + 1] = 0;
+        continue;
+      }
+      alphaK = mK[i] / deltaK[i];
+      betaK = mK[i + 1] / deltaK[i];
+      squaredMagnitude = Math.pow(alphaK, 2) + Math.pow(betaK, 2);
+      if (squaredMagnitude <= 9) {
+        continue;
+      }
+      tauK = 3 / Math.sqrt(squaredMagnitude);
+      mK[i] = alphaK * tauK * deltaK[i];
+      mK[i + 1] = betaK * tauK * deltaK[i];
+    }
+  }
+  function monotoneCompute(points, mK, indexAxis = "x") {
+    const valueAxis = getValueAxis(indexAxis);
+    const pointsLen = points.length;
+    let delta, pointBefore, pointCurrent;
+    let pointAfter = getPoint(points, 0);
+    for (let i = 0; i < pointsLen; ++i) {
+      pointBefore = pointCurrent;
+      pointCurrent = pointAfter;
+      pointAfter = getPoint(points, i + 1);
+      if (!pointCurrent) {
+        continue;
+      }
+      const iPixel = pointCurrent[indexAxis];
+      const vPixel = pointCurrent[valueAxis];
+      if (pointBefore) {
+        delta = (iPixel - pointBefore[indexAxis]) / 3;
+        pointCurrent[`cp1${indexAxis}`] = iPixel - delta;
+        pointCurrent[`cp1${valueAxis}`] = vPixel - delta * mK[i];
+      }
+      if (pointAfter) {
+        delta = (pointAfter[indexAxis] - iPixel) / 3;
+        pointCurrent[`cp2${indexAxis}`] = iPixel + delta;
+        pointCurrent[`cp2${valueAxis}`] = vPixel + delta * mK[i];
+      }
+    }
+  }
+  function splineCurveMonotone(points, indexAxis = "x") {
+    const valueAxis = getValueAxis(indexAxis);
+    const pointsLen = points.length;
+    const deltaK = Array(pointsLen).fill(0);
+    const mK = Array(pointsLen);
+    let i, pointBefore, pointCurrent;
+    let pointAfter = getPoint(points, 0);
+    for (i = 0; i < pointsLen; ++i) {
+      pointBefore = pointCurrent;
+      pointCurrent = pointAfter;
+      pointAfter = getPoint(points, i + 1);
+      if (!pointCurrent) {
+        continue;
+      }
+      if (pointAfter) {
+        const slopeDelta = pointAfter[indexAxis] - pointCurrent[indexAxis];
+        deltaK[i] = slopeDelta !== 0 ? (pointAfter[valueAxis] - pointCurrent[valueAxis]) / slopeDelta : 0;
+      }
+      mK[i] = !pointBefore ? deltaK[i] : !pointAfter ? deltaK[i - 1] : sign(deltaK[i - 1]) !== sign(deltaK[i]) ? 0 : (deltaK[i - 1] + deltaK[i]) / 2;
+    }
+    monotoneAdjust(points, deltaK, mK);
+    monotoneCompute(points, mK, indexAxis);
+  }
+  function capControlPoint(pt, min, max) {
+    return Math.max(Math.min(pt, max), min);
+  }
+  function capBezierPoints(points, area) {
+    let i, ilen, point, inArea, inAreaPrev;
+    let inAreaNext = _isPointInArea(points[0], area);
+    for (i = 0, ilen = points.length; i < ilen; ++i) {
+      inAreaPrev = inArea;
+      inArea = inAreaNext;
+      inAreaNext = i < ilen - 1 && _isPointInArea(points[i + 1], area);
+      if (!inArea) {
+        continue;
+      }
+      point = points[i];
+      if (inAreaPrev) {
+        point.cp1x = capControlPoint(point.cp1x, area.left, area.right);
+        point.cp1y = capControlPoint(point.cp1y, area.top, area.bottom);
+      }
+      if (inAreaNext) {
+        point.cp2x = capControlPoint(point.cp2x, area.left, area.right);
+        point.cp2y = capControlPoint(point.cp2y, area.top, area.bottom);
+      }
+    }
+  }
+  function _updateBezierControlPoints(points, options, area, loop, indexAxis) {
+    let i, ilen, point, controlPoints;
+    if (options.spanGaps) {
+      points = points.filter((pt) => !pt.skip);
+    }
+    if (options.cubicInterpolationMode === "monotone") {
+      splineCurveMonotone(points, indexAxis);
+    } else {
+      let prev = loop ? points[points.length - 1] : points[0];
+      for (i = 0, ilen = points.length; i < ilen; ++i) {
+        point = points[i];
+        controlPoints = splineCurve(prev, point, points[Math.min(i + 1, ilen - (loop ? 0 : 1)) % ilen], options.tension);
+        point.cp1x = controlPoints.previous.x;
+        point.cp1y = controlPoints.previous.y;
+        point.cp2x = controlPoints.next.x;
+        point.cp2y = controlPoints.next.y;
+        prev = point;
+      }
+    }
+    if (options.capBezierPoints) {
+      capBezierPoints(points, area);
+    }
+  }
+  function _isDomSupported() {
+    return typeof window !== "undefined" && typeof document !== "undefined";
+  }
+  function _getParentNode(domNode) {
+    let parent = domNode.parentNode;
+    if (parent && parent.toString() === "[object ShadowRoot]") {
+      parent = parent.host;
+    }
+    return parent;
+  }
+  function parseMaxStyle(styleValue, node, parentProperty) {
+    let valueInPixels;
+    if (typeof styleValue === "string") {
+      valueInPixels = parseInt(styleValue, 10);
+      if (styleValue.indexOf("%") !== -1) {
+        valueInPixels = valueInPixels / 100 * node.parentNode[parentProperty];
+      }
+    } else {
+      valueInPixels = styleValue;
+    }
+    return valueInPixels;
+  }
+  const getComputedStyle = (element) => element.ownerDocument.defaultView.getComputedStyle(element, null);
+  function getStyle(el, property) {
+    return getComputedStyle(el).getPropertyValue(property);
+  }
+  const positions = [
+    "top",
+    "right",
+    "bottom",
+    "left"
+  ];
+  function getPositionedStyle(styles, style, suffix) {
+    const result = {};
+    suffix = suffix ? "-" + suffix : "";
+    for (let i = 0; i < 4; i++) {
+      const pos = positions[i];
+      result[pos] = parseFloat(styles[style + "-" + pos + suffix]) || 0;
+    }
+    result.width = result.left + result.right;
+    result.height = result.top + result.bottom;
+    return result;
+  }
+  const useOffsetPos = (x, y, target) => (x > 0 || y > 0) && (!target || !target.shadowRoot);
+  function getCanvasPosition(e, canvas) {
+    const touches = e.touches;
+    const source = touches && touches.length ? touches[0] : e;
+    const { offsetX, offsetY } = source;
+    let box = false;
+    let x, y;
+    if (useOffsetPos(offsetX, offsetY, e.target)) {
+      x = offsetX;
+      y = offsetY;
+    } else {
+      const rect = canvas.getBoundingClientRect();
+      x = source.clientX - rect.left;
+      y = source.clientY - rect.top;
+      box = true;
+    }
+    return {
+      x,
+      y,
+      box
+    };
+  }
+  function getRelativePosition(event, chart) {
+    if ("native" in event) {
+      return event;
+    }
+    const { canvas, currentDevicePixelRatio } = chart;
+    const style = getComputedStyle(canvas);
+    const borderBox = style.boxSizing === "border-box";
+    const paddings = getPositionedStyle(style, "padding");
+    const borders = getPositionedStyle(style, "border", "width");
+    const { x, y, box } = getCanvasPosition(event, canvas);
+    const xOffset = paddings.left + (box && borders.left);
+    const yOffset = paddings.top + (box && borders.top);
+    let { width, height } = chart;
+    if (borderBox) {
+      width -= paddings.width + borders.width;
+      height -= paddings.height + borders.height;
+    }
+    return {
+      x: Math.round((x - xOffset) / width * canvas.width / currentDevicePixelRatio),
+      y: Math.round((y - yOffset) / height * canvas.height / currentDevicePixelRatio)
+    };
+  }
+  function getContainerSize(canvas, width, height) {
+    let maxWidth, maxHeight;
+    if (width === void 0 || height === void 0) {
+      const container = canvas && _getParentNode(canvas);
+      if (!container) {
+        width = canvas.clientWidth;
+        height = canvas.clientHeight;
+      } else {
+        const rect = container.getBoundingClientRect();
+        const containerStyle = getComputedStyle(container);
+        const containerBorder = getPositionedStyle(containerStyle, "border", "width");
+        const containerPadding = getPositionedStyle(containerStyle, "padding");
+        width = rect.width - containerPadding.width - containerBorder.width;
+        height = rect.height - containerPadding.height - containerBorder.height;
+        maxWidth = parseMaxStyle(containerStyle.maxWidth, container, "clientWidth");
+        maxHeight = parseMaxStyle(containerStyle.maxHeight, container, "clientHeight");
+      }
+    }
+    return {
+      width,
+      height,
+      maxWidth: maxWidth || INFINITY,
+      maxHeight: maxHeight || INFINITY
+    };
+  }
+  const round1 = (v) => Math.round(v * 10) / 10;
+  function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
+    const style = getComputedStyle(canvas);
+    const margins = getPositionedStyle(style, "margin");
+    const maxWidth = parseMaxStyle(style.maxWidth, canvas, "clientWidth") || INFINITY;
+    const maxHeight = parseMaxStyle(style.maxHeight, canvas, "clientHeight") || INFINITY;
+    const containerSize = getContainerSize(canvas, bbWidth, bbHeight);
+    let { width, height } = containerSize;
+    if (style.boxSizing === "content-box") {
+      const borders = getPositionedStyle(style, "border", "width");
+      const paddings = getPositionedStyle(style, "padding");
+      width -= paddings.width + borders.width;
+      height -= paddings.height + borders.height;
+    }
+    width = Math.max(0, width - margins.width);
+    height = Math.max(0, aspectRatio ? width / aspectRatio : height - margins.height);
+    width = round1(Math.min(width, maxWidth, containerSize.maxWidth));
+    height = round1(Math.min(height, maxHeight, containerSize.maxHeight));
+    if (width && !height) {
+      height = round1(width / 2);
+    }
+    const maintainHeight = bbWidth !== void 0 || bbHeight !== void 0;
+    if (maintainHeight && aspectRatio && containerSize.height && height > containerSize.height) {
+      height = containerSize.height;
+      width = round1(Math.floor(height * aspectRatio));
+    }
+    return {
+      width,
+      height
+    };
+  }
+  function retinaScale(chart, forceRatio, forceStyle) {
+    const pixelRatio = forceRatio || 1;
+    const deviceHeight = round1(chart.height * pixelRatio);
+    const deviceWidth = round1(chart.width * pixelRatio);
+    chart.height = round1(chart.height);
+    chart.width = round1(chart.width);
+    const canvas = chart.canvas;
+    if (canvas.style && (forceStyle || !canvas.style.height && !canvas.style.width)) {
+      canvas.style.height = `${chart.height}px`;
+      canvas.style.width = `${chart.width}px`;
+    }
+    if (chart.currentDevicePixelRatio !== pixelRatio || canvas.height !== deviceHeight || canvas.width !== deviceWidth) {
+      chart.currentDevicePixelRatio = pixelRatio;
+      canvas.height = deviceHeight;
+      canvas.width = deviceWidth;
+      chart.ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      return true;
+    }
+    return false;
+  }
+  const supportsEventListenerOptions = (function() {
+    let passiveSupported = false;
+    try {
+      const options = {
+        get passive() {
+          passiveSupported = true;
+          return false;
+        }
+      };
+      if (_isDomSupported()) {
+        window.addEventListener("test", null, options);
+        window.removeEventListener("test", null, options);
+      }
+    } catch (e) {
+    }
+    return passiveSupported;
+  })();
+  function readUsedSize(element, property) {
+    const value = getStyle(element, property);
+    const matches = value && value.match(/^(\d+)(\.\d+)?px$/);
+    return matches ? +matches[1] : void 0;
+  }
+  function _pointInLine(p1, p2, t, mode) {
+    return {
+      x: p1.x + t * (p2.x - p1.x),
+      y: p1.y + t * (p2.y - p1.y)
+    };
+  }
+  function _steppedInterpolation(p1, p2, t, mode) {
+    return {
+      x: p1.x + t * (p2.x - p1.x),
+      y: mode === "middle" ? t < 0.5 ? p1.y : p2.y : mode === "after" ? t < 1 ? p1.y : p2.y : t > 0 ? p2.y : p1.y
+    };
+  }
+  function _bezierInterpolation(p1, p2, t, mode) {
+    const cp1 = {
+      x: p1.cp2x,
+      y: p1.cp2y
+    };
+    const cp2 = {
+      x: p2.cp1x,
+      y: p2.cp1y
+    };
+    const a = _pointInLine(p1, cp1, t);
+    const b = _pointInLine(cp1, cp2, t);
+    const c = _pointInLine(cp2, p2, t);
+    const d = _pointInLine(a, b, t);
+    const e = _pointInLine(b, c, t);
+    return _pointInLine(d, e, t);
+  }
+  const getRightToLeftAdapter = function(rectX, width) {
+    return {
+      x(x) {
+        return rectX + rectX + width - x;
+      },
+      setWidth(w) {
+        width = w;
+      },
+      textAlign(align) {
+        if (align === "center") {
+          return align;
+        }
+        return align === "right" ? "left" : "right";
+      },
+      xPlus(x, value) {
+        return x - value;
+      },
+      leftForLtr(x, itemWidth) {
+        return x - itemWidth;
+      }
+    };
+  };
+  const getLeftToRightAdapter = function() {
+    return {
+      x(x) {
+        return x;
+      },
+      setWidth(w) {
+      },
+      textAlign(align) {
+        return align;
+      },
+      xPlus(x, value) {
+        return x + value;
+      },
+      leftForLtr(x, _itemWidth) {
+        return x;
+      }
+    };
+  };
+  function getRtlAdapter(rtl, rectX, width) {
+    return rtl ? getRightToLeftAdapter(rectX, width) : getLeftToRightAdapter();
+  }
+  function overrideTextDirection(ctx, direction) {
+    let style, original;
+    if (direction === "ltr" || direction === "rtl") {
+      style = ctx.canvas.style;
+      original = [
+        style.getPropertyValue("direction"),
+        style.getPropertyPriority("direction")
+      ];
+      style.setProperty("direction", direction, "important");
+      ctx.prevTextDirection = original;
+    }
+  }
+  function restoreTextDirection(ctx, original) {
+    if (original !== void 0) {
+      delete ctx.prevTextDirection;
+      ctx.canvas.style.setProperty("direction", original[0], original[1]);
+    }
+  }
+  function propertyFn(property) {
+    if (property === "angle") {
+      return {
+        between: _angleBetween,
+        compare: _angleDiff,
+        normalize: _normalizeAngle
+      };
+    }
+    return {
+      between: _isBetween,
+      compare: (a, b) => a - b,
+      normalize: (x) => x
+    };
+  }
+  function normalizeSegment({ start, end, count, loop, style }) {
+    return {
+      start: start % count,
+      end: end % count,
+      loop: loop && (end - start + 1) % count === 0,
+      style
+    };
+  }
+  function getSegment(segment, points, bounds) {
+    const { property, start: startBound, end: endBound } = bounds;
+    const { between, normalize } = propertyFn(property);
+    const count = points.length;
+    let { start, end, loop } = segment;
+    let i, ilen;
+    if (loop) {
+      start += count;
+      end += count;
+      for (i = 0, ilen = count; i < ilen; ++i) {
+        if (!between(normalize(points[start % count][property]), startBound, endBound)) {
+          break;
+        }
+        start--;
+        end--;
+      }
+      start %= count;
+      end %= count;
+    }
+    if (end < start) {
+      end += count;
+    }
+    return {
+      start,
+      end,
+      loop,
+      style: segment.style
+    };
+  }
+  function _boundSegment(segment, points, bounds) {
+    if (!bounds) {
+      return [
+        segment
+      ];
+    }
+    const { property, start: startBound, end: endBound } = bounds;
+    const count = points.length;
+    const { compare, between, normalize } = propertyFn(property);
+    const { start, end, loop, style } = getSegment(segment, points, bounds);
+    const result = [];
+    let inside = false;
+    let subStart = null;
+    let value, point, prevValue;
+    const startIsBefore = () => between(startBound, prevValue, value) && compare(startBound, prevValue) !== 0;
+    const endIsBefore = () => compare(endBound, value) === 0 || between(endBound, prevValue, value);
+    const shouldStart = () => inside || startIsBefore();
+    const shouldStop = () => !inside || endIsBefore();
+    for (let i = start, prev = start; i <= end; ++i) {
+      point = points[i % count];
+      if (point.skip) {
+        continue;
+      }
+      value = normalize(point[property]);
+      if (value === prevValue) {
+        continue;
+      }
+      inside = between(value, startBound, endBound);
+      if (subStart === null && shouldStart()) {
+        subStart = compare(value, startBound) === 0 ? i : prev;
+      }
+      if (subStart !== null && shouldStop()) {
+        result.push(normalizeSegment({
+          start: subStart,
+          end: i,
+          loop,
+          count,
+          style
+        }));
+        subStart = null;
+      }
+      prev = i;
+      prevValue = value;
+    }
+    if (subStart !== null) {
+      result.push(normalizeSegment({
+        start: subStart,
+        end,
+        loop,
+        count,
+        style
+      }));
+    }
+    return result;
+  }
+  function _boundSegments(line, bounds) {
+    const result = [];
+    const segments = line.segments;
+    for (let i = 0; i < segments.length; i++) {
+      const sub = _boundSegment(segments[i], line.points, bounds);
+      if (sub.length) {
+        result.push(...sub);
+      }
+    }
+    return result;
+  }
+  function findStartAndEnd(points, count, loop, spanGaps) {
+    let start = 0;
+    let end = count - 1;
+    if (loop && !spanGaps) {
+      while (start < count && !points[start].skip) {
+        start++;
+      }
+    }
+    while (start < count && points[start].skip) {
+      start++;
+    }
+    start %= count;
+    if (loop) {
+      end += start;
+    }
+    while (end > start && points[end % count].skip) {
+      end--;
+    }
+    end %= count;
+    return {
+      start,
+      end
+    };
+  }
+  function solidSegments(points, start, max, loop) {
+    const count = points.length;
+    const result = [];
+    let last = start;
+    let prev = points[start];
+    let end;
+    for (end = start + 1; end <= max; ++end) {
+      const cur = points[end % count];
+      if (cur.skip || cur.stop) {
+        if (!prev.skip) {
+          loop = false;
+          result.push({
+            start: start % count,
+            end: (end - 1) % count,
+            loop
+          });
+          start = last = cur.stop ? end : null;
+        }
+      } else {
+        last = end;
+        if (prev.skip) {
+          start = end;
+        }
+      }
+      prev = cur;
+    }
+    if (last !== null) {
+      result.push({
+        start: start % count,
+        end: last % count,
+        loop
+      });
+    }
+    return result;
+  }
+  function _computeSegments(line, segmentOptions) {
+    const points = line.points;
+    const spanGaps = line.options.spanGaps;
+    const count = points.length;
+    if (!count) {
+      return [];
+    }
+    const loop = !!line._loop;
+    const { start, end } = findStartAndEnd(points, count, loop, spanGaps);
+    if (spanGaps === true) {
+      return splitByStyles(line, [
+        {
+          start,
+          end,
+          loop
+        }
+      ], points, segmentOptions);
+    }
+    const max = end < start ? end + count : end;
+    const completeLoop = !!line._fullLoop && start === 0 && end === count - 1;
+    return splitByStyles(line, solidSegments(points, start, max, completeLoop), points, segmentOptions);
+  }
+  function splitByStyles(line, segments, points, segmentOptions) {
+    if (!segmentOptions || !segmentOptions.setContext || !points) {
+      return segments;
+    }
+    return doSplitByStyles(line, segments, points, segmentOptions);
+  }
+  function doSplitByStyles(line, segments, points, segmentOptions) {
+    const chartContext = line._chart.getContext();
+    const baseStyle = readStyle(line.options);
+    const { _datasetIndex: datasetIndex, options: { spanGaps } } = line;
+    const count = points.length;
+    const result = [];
+    let prevStyle = baseStyle;
+    let start = segments[0].start;
+    let i = start;
+    function addStyle(s, e, l, st) {
+      const dir = spanGaps ? -1 : 1;
+      if (s === e) {
+        return;
+      }
+      s += count;
+      while (points[s % count].skip) {
+        s -= dir;
+      }
+      while (points[e % count].skip) {
+        e += dir;
+      }
+      if (s % count !== e % count) {
+        result.push({
+          start: s % count,
+          end: e % count,
+          loop: l,
+          style: st
+        });
+        prevStyle = st;
+        start = e % count;
+      }
+    }
+    for (const segment of segments) {
+      start = spanGaps ? start : segment.start;
+      let prev = points[start % count];
+      let style;
+      for (i = start + 1; i <= segment.end; i++) {
+        const pt = points[i % count];
+        style = readStyle(segmentOptions.setContext(createContext(chartContext, {
+          type: "segment",
+          p0: prev,
+          p1: pt,
+          p0DataIndex: (i - 1) % count,
+          p1DataIndex: i % count,
+          datasetIndex
+        })));
+        if (styleChanged(style, prevStyle)) {
+          addStyle(start, i - 1, segment.loop, prevStyle);
+        }
+        prev = pt;
+        prevStyle = style;
+      }
+      if (start < i - 1) {
+        addStyle(start, i - 1, segment.loop, prevStyle);
+      }
+    }
+    return result;
+  }
+  function readStyle(options) {
+    return {
+      backgroundColor: options.backgroundColor,
+      borderCapStyle: options.borderCapStyle,
+      borderDash: options.borderDash,
+      borderDashOffset: options.borderDashOffset,
+      borderJoinStyle: options.borderJoinStyle,
+      borderWidth: options.borderWidth,
+      borderColor: options.borderColor
+    };
+  }
+  function styleChanged(style, prevStyle) {
+    if (!prevStyle) {
+      return false;
+    }
+    const cache = [];
+    const replacer = function(key, value) {
+      if (!isPatternOrGradient(value)) {
+        return value;
+      }
+      if (!cache.includes(value)) {
+        cache.push(value);
+      }
+      return cache.indexOf(value);
+    };
+    return JSON.stringify(style, replacer) !== JSON.stringify(prevStyle, replacer);
+  }
+  function getSizeForArea(scale, chartArea, field) {
+    return scale.options.clip ? scale[field] : chartArea[field];
+  }
+  function getDatasetArea(meta, chartArea) {
+    const { xScale, yScale } = meta;
+    if (xScale && yScale) {
+      return {
+        left: getSizeForArea(xScale, chartArea, "left"),
+        right: getSizeForArea(xScale, chartArea, "right"),
+        top: getSizeForArea(yScale, chartArea, "top"),
+        bottom: getSizeForArea(yScale, chartArea, "bottom")
+      };
+    }
+    return chartArea;
+  }
+  function getDatasetClipArea(chart, meta) {
+    const clip = meta._clip;
+    if (clip.disabled) {
+      return false;
+    }
+    const area = getDatasetArea(meta, chart.chartArea);
+    return {
+      left: clip.left === false ? 0 : area.left - (clip.left === true ? 0 : clip.left),
+      right: clip.right === false ? chart.width : area.right + (clip.right === true ? 0 : clip.right),
+      top: clip.top === false ? 0 : area.top - (clip.top === true ? 0 : clip.top),
+      bottom: clip.bottom === false ? chart.height : area.bottom + (clip.bottom === true ? 0 : clip.bottom)
+    };
+  }
+  /*!
+   * Chart.js v4.5.1
+   * https://www.chartjs.org
+   * (c) 2025 Chart.js Contributors
+   * Released under the MIT License
+   */
+  class Animator {
+    constructor() {
+      this._request = null;
+      this._charts = /* @__PURE__ */ new Map();
+      this._running = false;
+      this._lastDate = void 0;
+    }
+    _notify(chart, anims, date, type) {
+      const callbacks = anims.listeners[type];
+      const numSteps = anims.duration;
+      callbacks.forEach((fn) => fn({
+        chart,
+        initial: anims.initial,
+        numSteps,
+        currentStep: Math.min(date - anims.start, numSteps)
+      }));
+    }
+    _refresh() {
+      if (this._request) {
+        return;
+      }
+      this._running = true;
+      this._request = requestAnimFrame.call(window, () => {
+        this._update();
+        this._request = null;
+        if (this._running) {
+          this._refresh();
+        }
+      });
+    }
+    _update(date = Date.now()) {
+      let remaining = 0;
+      this._charts.forEach((anims, chart) => {
+        if (!anims.running || !anims.items.length) {
+          return;
+        }
+        const items = anims.items;
+        let i = items.length - 1;
+        let draw2 = false;
+        let item;
+        for (; i >= 0; --i) {
+          item = items[i];
+          if (item._active) {
+            if (item._total > anims.duration) {
+              anims.duration = item._total;
+            }
+            item.tick(date);
+            draw2 = true;
+          } else {
+            items[i] = items[items.length - 1];
+            items.pop();
+          }
+        }
+        if (draw2) {
+          chart.draw();
+          this._notify(chart, anims, date, "progress");
+        }
+        if (!items.length) {
+          anims.running = false;
+          this._notify(chart, anims, date, "complete");
+          anims.initial = false;
+        }
+        remaining += items.length;
+      });
+      this._lastDate = date;
+      if (remaining === 0) {
+        this._running = false;
+      }
+    }
+    _getAnims(chart) {
+      const charts = this._charts;
+      let anims = charts.get(chart);
+      if (!anims) {
+        anims = {
+          running: false,
+          initial: true,
+          items: [],
+          listeners: {
+            complete: [],
+            progress: []
+          }
+        };
+        charts.set(chart, anims);
+      }
+      return anims;
+    }
+    listen(chart, event, cb) {
+      this._getAnims(chart).listeners[event].push(cb);
+    }
+    add(chart, items) {
+      if (!items || !items.length) {
+        return;
+      }
+      this._getAnims(chart).items.push(...items);
+    }
+    has(chart) {
+      return this._getAnims(chart).items.length > 0;
+    }
+    start(chart) {
+      const anims = this._charts.get(chart);
+      if (!anims) {
+        return;
+      }
+      anims.running = true;
+      anims.start = Date.now();
+      anims.duration = anims.items.reduce((acc, cur) => Math.max(acc, cur._duration), 0);
+      this._refresh();
+    }
+    running(chart) {
+      if (!this._running) {
+        return false;
+      }
+      const anims = this._charts.get(chart);
+      if (!anims || !anims.running || !anims.items.length) {
+        return false;
+      }
+      return true;
+    }
+    stop(chart) {
+      const anims = this._charts.get(chart);
+      if (!anims || !anims.items.length) {
+        return;
+      }
+      const items = anims.items;
+      let i = items.length - 1;
+      for (; i >= 0; --i) {
+        items[i].cancel();
+      }
+      anims.items = [];
+      this._notify(chart, anims, Date.now(), "complete");
+    }
+    remove(chart) {
+      return this._charts.delete(chart);
+    }
+  }
+  var animator = /* @__PURE__ */ new Animator();
+  const transparent = "transparent";
+  const interpolators = {
+    boolean(from2, to2, factor) {
+      return factor > 0.5 ? to2 : from2;
+    },
+    color(from2, to2, factor) {
+      const c0 = color(from2 || transparent);
+      const c1 = c0.valid && color(to2 || transparent);
+      return c1 && c1.valid ? c1.mix(c0, factor).hexString() : to2;
+    },
+    number(from2, to2, factor) {
+      return from2 + (to2 - from2) * factor;
+    }
+  };
+  class Animation {
+    constructor(cfg, target, prop, to2) {
+      const currentValue = target[prop];
+      to2 = resolve([
+        cfg.to,
+        to2,
+        currentValue,
+        cfg.from
+      ]);
+      const from2 = resolve([
+        cfg.from,
+        currentValue,
+        to2
+      ]);
+      this._active = true;
+      this._fn = cfg.fn || interpolators[cfg.type || typeof from2];
+      this._easing = effects[cfg.easing] || effects.linear;
+      this._start = Math.floor(Date.now() + (cfg.delay || 0));
+      this._duration = this._total = Math.floor(cfg.duration);
+      this._loop = !!cfg.loop;
+      this._target = target;
+      this._prop = prop;
+      this._from = from2;
+      this._to = to2;
+      this._promises = void 0;
+    }
+    active() {
+      return this._active;
+    }
+    update(cfg, to2, date) {
+      if (this._active) {
+        this._notify(false);
+        const currentValue = this._target[this._prop];
+        const elapsed = date - this._start;
+        const remain = this._duration - elapsed;
+        this._start = date;
+        this._duration = Math.floor(Math.max(remain, cfg.duration));
+        this._total += elapsed;
+        this._loop = !!cfg.loop;
+        this._to = resolve([
+          cfg.to,
+          to2,
+          currentValue,
+          cfg.from
+        ]);
+        this._from = resolve([
+          cfg.from,
+          currentValue,
+          to2
+        ]);
+      }
+    }
+    cancel() {
+      if (this._active) {
+        this.tick(Date.now());
+        this._active = false;
+        this._notify(false);
+      }
+    }
+    tick(date) {
+      const elapsed = date - this._start;
+      const duration = this._duration;
+      const prop = this._prop;
+      const from2 = this._from;
+      const loop = this._loop;
+      const to2 = this._to;
+      let factor;
+      this._active = from2 !== to2 && (loop || elapsed < duration);
+      if (!this._active) {
+        this._target[prop] = to2;
+        this._notify(true);
+        return;
+      }
+      if (elapsed < 0) {
+        this._target[prop] = from2;
+        return;
+      }
+      factor = elapsed / duration % 2;
+      factor = loop && factor > 1 ? 2 - factor : factor;
+      factor = this._easing(Math.min(1, Math.max(0, factor)));
+      this._target[prop] = this._fn(from2, to2, factor);
+    }
+    wait() {
+      const promises = this._promises || (this._promises = []);
+      return new Promise((res, rej) => {
+        promises.push({
+          res,
+          rej
+        });
+      });
+    }
+    _notify(resolved) {
+      const method = resolved ? "res" : "rej";
+      const promises = this._promises || [];
+      for (let i = 0; i < promises.length; i++) {
+        promises[i][method]();
+      }
+    }
+  }
+  class Animations {
+    constructor(chart, config) {
+      this._chart = chart;
+      this._properties = /* @__PURE__ */ new Map();
+      this.configure(config);
+    }
+    configure(config) {
+      if (!isObject(config)) {
+        return;
+      }
+      const animationOptions = Object.keys(defaults.animation);
+      const animatedProps = this._properties;
+      Object.getOwnPropertyNames(config).forEach((key) => {
+        const cfg = config[key];
+        if (!isObject(cfg)) {
+          return;
+        }
+        const resolved = {};
+        for (const option of animationOptions) {
+          resolved[option] = cfg[option];
+        }
+        (isArray(cfg.properties) && cfg.properties || [
+          key
+        ]).forEach((prop) => {
+          if (prop === key || !animatedProps.has(prop)) {
+            animatedProps.set(prop, resolved);
+          }
+        });
+      });
+    }
+    _animateOptions(target, values) {
+      const newOptions = values.options;
+      const options = resolveTargetOptions(target, newOptions);
+      if (!options) {
+        return [];
+      }
+      const animations = this._createAnimations(options, newOptions);
+      if (newOptions.$shared) {
+        awaitAll(target.options.$animations, newOptions).then(() => {
+          target.options = newOptions;
+        }, () => {
+        });
+      }
+      return animations;
+    }
+    _createAnimations(target, values) {
+      const animatedProps = this._properties;
+      const animations = [];
+      const running = target.$animations || (target.$animations = {});
+      const props = Object.keys(values);
+      const date = Date.now();
+      let i;
+      for (i = props.length - 1; i >= 0; --i) {
+        const prop = props[i];
+        if (prop.charAt(0) === "$") {
+          continue;
+        }
+        if (prop === "options") {
+          animations.push(...this._animateOptions(target, values));
+          continue;
+        }
+        const value = values[prop];
+        let animation = running[prop];
+        const cfg = animatedProps.get(prop);
+        if (animation) {
+          if (cfg && animation.active()) {
+            animation.update(cfg, value, date);
+            continue;
+          } else {
+            animation.cancel();
+          }
+        }
+        if (!cfg || !cfg.duration) {
+          target[prop] = value;
+          continue;
+        }
+        running[prop] = animation = new Animation(cfg, target, prop, value);
+        animations.push(animation);
+      }
+      return animations;
+    }
+    update(target, values) {
+      if (this._properties.size === 0) {
+        Object.assign(target, values);
+        return;
+      }
+      const animations = this._createAnimations(target, values);
+      if (animations.length) {
+        animator.add(this._chart, animations);
+        return true;
+      }
+    }
+  }
+  function awaitAll(animations, properties) {
+    const running = [];
+    const keys = Object.keys(properties);
+    for (let i = 0; i < keys.length; i++) {
+      const anim = animations[keys[i]];
+      if (anim && anim.active()) {
+        running.push(anim.wait());
+      }
+    }
+    return Promise.all(running);
+  }
+  function resolveTargetOptions(target, newOptions) {
+    if (!newOptions) {
+      return;
+    }
+    let options = target.options;
+    if (!options) {
+      target.options = newOptions;
+      return;
+    }
+    if (options.$shared) {
+      target.options = options = Object.assign({}, options, {
+        $shared: false,
+        $animations: {}
+      });
+    }
+    return options;
+  }
+  function scaleClip(scale, allowedOverflow) {
+    const opts = scale && scale.options || {};
+    const reverse = opts.reverse;
+    const min = opts.min === void 0 ? allowedOverflow : 0;
+    const max = opts.max === void 0 ? allowedOverflow : 0;
+    return {
+      start: reverse ? max : min,
+      end: reverse ? min : max
+    };
+  }
+  function defaultClip(xScale, yScale, allowedOverflow) {
+    if (allowedOverflow === false) {
+      return false;
+    }
+    const x = scaleClip(xScale, allowedOverflow);
+    const y = scaleClip(yScale, allowedOverflow);
+    return {
+      top: y.end,
+      right: x.end,
+      bottom: y.start,
+      left: x.start
+    };
+  }
+  function toClip(value) {
+    let t, r, b, l;
+    if (isObject(value)) {
+      t = value.top;
+      r = value.right;
+      b = value.bottom;
+      l = value.left;
+    } else {
+      t = r = b = l = value;
+    }
+    return {
+      top: t,
+      right: r,
+      bottom: b,
+      left: l,
+      disabled: value === false
+    };
+  }
+  function getSortedDatasetIndices(chart, filterVisible) {
+    const keys = [];
+    const metasets = chart._getSortedDatasetMetas(filterVisible);
+    let i, ilen;
+    for (i = 0, ilen = metasets.length; i < ilen; ++i) {
+      keys.push(metasets[i].index);
+    }
+    return keys;
+  }
+  function applyStack(stack, value, dsIndex, options = {}) {
+    const keys = stack.keys;
+    const singleMode = options.mode === "single";
+    let i, ilen, datasetIndex, otherValue;
+    if (value === null) {
+      return;
+    }
+    let found = false;
+    for (i = 0, ilen = keys.length; i < ilen; ++i) {
+      datasetIndex = +keys[i];
+      if (datasetIndex === dsIndex) {
+        found = true;
+        if (options.all) {
+          continue;
+        }
+        break;
+      }
+      otherValue = stack.values[datasetIndex];
+      if (isNumberFinite(otherValue) && (singleMode || value === 0 || sign(value) === sign(otherValue))) {
+        value += otherValue;
+      }
+    }
+    if (!found && !options.all) {
+      return 0;
+    }
+    return value;
+  }
+  function convertObjectDataToArray(data, meta) {
+    const { iScale, vScale } = meta;
+    const iAxisKey = iScale.axis === "x" ? "x" : "y";
+    const vAxisKey = vScale.axis === "x" ? "x" : "y";
+    const keys = Object.keys(data);
+    const adata = new Array(keys.length);
+    let i, ilen, key;
+    for (i = 0, ilen = keys.length; i < ilen; ++i) {
+      key = keys[i];
+      adata[i] = {
+        [iAxisKey]: key,
+        [vAxisKey]: data[key]
+      };
+    }
+    return adata;
+  }
+  function isStacked(scale, meta) {
+    const stacked = scale && scale.options.stacked;
+    return stacked || stacked === void 0 && meta.stack !== void 0;
+  }
+  function getStackKey(indexScale, valueScale, meta) {
+    return `${indexScale.id}.${valueScale.id}.${meta.stack || meta.type}`;
+  }
+  function getUserBounds(scale) {
+    const { min, max, minDefined, maxDefined } = scale.getUserBounds();
+    return {
+      min: minDefined ? min : Number.NEGATIVE_INFINITY,
+      max: maxDefined ? max : Number.POSITIVE_INFINITY
+    };
+  }
+  function getOrCreateStack(stacks, stackKey, indexValue) {
+    const subStack = stacks[stackKey] || (stacks[stackKey] = {});
+    return subStack[indexValue] || (subStack[indexValue] = {});
+  }
+  function getLastIndexInStack(stack, vScale, positive, type) {
+    for (const meta of vScale.getMatchingVisibleMetas(type).reverse()) {
+      const value = stack[meta.index];
+      if (positive && value > 0 || !positive && value < 0) {
+        return meta.index;
+      }
+    }
+    return null;
+  }
+  function updateStacks(controller, parsed) {
+    const { chart, _cachedMeta: meta } = controller;
+    const stacks = chart._stacks || (chart._stacks = {});
+    const { iScale, vScale, index: datasetIndex } = meta;
+    const iAxis = iScale.axis;
+    const vAxis = vScale.axis;
+    const key = getStackKey(iScale, vScale, meta);
+    const ilen = parsed.length;
+    let stack;
+    for (let i = 0; i < ilen; ++i) {
+      const item = parsed[i];
+      const { [iAxis]: index2, [vAxis]: value } = item;
+      const itemStacks = item._stacks || (item._stacks = {});
+      stack = itemStacks[vAxis] = getOrCreateStack(stacks, key, index2);
+      stack[datasetIndex] = value;
+      stack._top = getLastIndexInStack(stack, vScale, true, meta.type);
+      stack._bottom = getLastIndexInStack(stack, vScale, false, meta.type);
+      const visualValues = stack._visualValues || (stack._visualValues = {});
+      visualValues[datasetIndex] = value;
+    }
+  }
+  function getFirstScaleId(chart, axis) {
+    const scales = chart.scales;
+    return Object.keys(scales).filter((key) => scales[key].axis === axis).shift();
+  }
+  function createDatasetContext(parent, index2) {
+    return createContext(parent, {
+      active: false,
+      dataset: void 0,
+      datasetIndex: index2,
+      index: index2,
+      mode: "default",
+      type: "dataset"
+    });
+  }
+  function createDataContext(parent, index2, element) {
+    return createContext(parent, {
+      active: false,
+      dataIndex: index2,
+      parsed: void 0,
+      raw: void 0,
+      element,
+      index: index2,
+      mode: "default",
+      type: "data"
+    });
+  }
+  function clearStacks(meta, items) {
+    const datasetIndex = meta.controller.index;
+    const axis = meta.vScale && meta.vScale.axis;
+    if (!axis) {
+      return;
+    }
+    items = items || meta._parsed;
+    for (const parsed of items) {
+      const stacks = parsed._stacks;
+      if (!stacks || stacks[axis] === void 0 || stacks[axis][datasetIndex] === void 0) {
+        return;
+      }
+      delete stacks[axis][datasetIndex];
+      if (stacks[axis]._visualValues !== void 0 && stacks[axis]._visualValues[datasetIndex] !== void 0) {
+        delete stacks[axis]._visualValues[datasetIndex];
+      }
+    }
+  }
+  const isDirectUpdateMode = (mode) => mode === "reset" || mode === "none";
+  const cloneIfNotShared = (cached, shared) => shared ? cached : Object.assign({}, cached);
+  const createStack = (canStack, meta, chart) => canStack && !meta.hidden && meta._stacked && {
+    keys: getSortedDatasetIndices(chart, true),
+    values: null
+  };
+  class DatasetController {
+    constructor(chart, datasetIndex) {
+      this.chart = chart;
+      this._ctx = chart.ctx;
+      this.index = datasetIndex;
+      this._cachedDataOpts = {};
+      this._cachedMeta = this.getMeta();
+      this._type = this._cachedMeta.type;
+      this.options = void 0;
+      this._parsing = false;
+      this._data = void 0;
+      this._objectData = void 0;
+      this._sharedOptions = void 0;
+      this._drawStart = void 0;
+      this._drawCount = void 0;
+      this.enableOptionSharing = false;
+      this.supportsDecimation = false;
+      this.$context = void 0;
+      this._syncList = [];
+      this.datasetElementType = new.target.datasetElementType;
+      this.dataElementType = new.target.dataElementType;
+      this.initialize();
+    }
+    initialize() {
+      const meta = this._cachedMeta;
+      this.configure();
+      this.linkScales();
+      meta._stacked = isStacked(meta.vScale, meta);
+      this.addElements();
+      if (this.options.fill && !this.chart.isPluginEnabled("filler")) {
+        console.warn("Tried to use the 'fill' option without the 'Filler' plugin enabled. Please import and register the 'Filler' plugin and make sure it is not disabled in the options");
+      }
+    }
+    updateIndex(datasetIndex) {
+      if (this.index !== datasetIndex) {
+        clearStacks(this._cachedMeta);
+      }
+      this.index = datasetIndex;
+    }
+    linkScales() {
+      const chart = this.chart;
+      const meta = this._cachedMeta;
+      const dataset = this.getDataset();
+      const chooseId = (axis, x, y, r) => axis === "x" ? x : axis === "r" ? r : y;
+      const xid = meta.xAxisID = valueOrDefault(dataset.xAxisID, getFirstScaleId(chart, "x"));
+      const yid = meta.yAxisID = valueOrDefault(dataset.yAxisID, getFirstScaleId(chart, "y"));
+      const rid = meta.rAxisID = valueOrDefault(dataset.rAxisID, getFirstScaleId(chart, "r"));
+      const indexAxis = meta.indexAxis;
+      const iid = meta.iAxisID = chooseId(indexAxis, xid, yid, rid);
+      const vid = meta.vAxisID = chooseId(indexAxis, yid, xid, rid);
+      meta.xScale = this.getScaleForId(xid);
+      meta.yScale = this.getScaleForId(yid);
+      meta.rScale = this.getScaleForId(rid);
+      meta.iScale = this.getScaleForId(iid);
+      meta.vScale = this.getScaleForId(vid);
+    }
+    getDataset() {
+      return this.chart.data.datasets[this.index];
+    }
+    getMeta() {
+      return this.chart.getDatasetMeta(this.index);
+    }
+    getScaleForId(scaleID) {
+      return this.chart.scales[scaleID];
+    }
+    _getOtherScale(scale) {
+      const meta = this._cachedMeta;
+      return scale === meta.iScale ? meta.vScale : meta.iScale;
+    }
+    reset() {
+      this._update("reset");
+    }
+    _destroy() {
+      const meta = this._cachedMeta;
+      if (this._data) {
+        unlistenArrayEvents(this._data, this);
+      }
+      if (meta._stacked) {
+        clearStacks(meta);
+      }
+    }
+    _dataCheck() {
+      const dataset = this.getDataset();
+      const data = dataset.data || (dataset.data = []);
+      const _data = this._data;
+      if (isObject(data)) {
+        const meta = this._cachedMeta;
+        this._data = convertObjectDataToArray(data, meta);
+      } else if (_data !== data) {
+        if (_data) {
+          unlistenArrayEvents(_data, this);
+          const meta = this._cachedMeta;
+          clearStacks(meta);
+          meta._parsed = [];
+        }
+        if (data && Object.isExtensible(data)) {
+          listenArrayEvents(data, this);
+        }
+        this._syncList = [];
+        this._data = data;
+      }
+    }
+    addElements() {
+      const meta = this._cachedMeta;
+      this._dataCheck();
+      if (this.datasetElementType) {
+        meta.dataset = new this.datasetElementType();
+      }
+    }
+    buildOrUpdateElements(resetNewElements) {
+      const meta = this._cachedMeta;
+      const dataset = this.getDataset();
+      let stackChanged = false;
+      this._dataCheck();
+      const oldStacked = meta._stacked;
+      meta._stacked = isStacked(meta.vScale, meta);
+      if (meta.stack !== dataset.stack) {
+        stackChanged = true;
+        clearStacks(meta);
+        meta.stack = dataset.stack;
+      }
+      this._resyncElements(resetNewElements);
+      if (stackChanged || oldStacked !== meta._stacked) {
+        updateStacks(this, meta._parsed);
+        meta._stacked = isStacked(meta.vScale, meta);
+      }
+    }
+    configure() {
+      const config = this.chart.config;
+      const scopeKeys = config.datasetScopeKeys(this._type);
+      const scopes = config.getOptionScopes(this.getDataset(), scopeKeys, true);
+      this.options = config.createResolver(scopes, this.getContext());
+      this._parsing = this.options.parsing;
+      this._cachedDataOpts = {};
+    }
+    parse(start, count) {
+      const { _cachedMeta: meta, _data: data } = this;
+      const { iScale, _stacked } = meta;
+      const iAxis = iScale.axis;
+      let sorted = start === 0 && count === data.length ? true : meta._sorted;
+      let prev = start > 0 && meta._parsed[start - 1];
+      let i, cur, parsed;
+      if (this._parsing === false) {
+        meta._parsed = data;
+        meta._sorted = true;
+        parsed = data;
+      } else {
+        if (isArray(data[start])) {
+          parsed = this.parseArrayData(meta, data, start, count);
+        } else if (isObject(data[start])) {
+          parsed = this.parseObjectData(meta, data, start, count);
+        } else {
+          parsed = this.parsePrimitiveData(meta, data, start, count);
+        }
+        const isNotInOrderComparedToPrev = () => cur[iAxis] === null || prev && cur[iAxis] < prev[iAxis];
+        for (i = 0; i < count; ++i) {
+          meta._parsed[i + start] = cur = parsed[i];
+          if (sorted) {
+            if (isNotInOrderComparedToPrev()) {
+              sorted = false;
+            }
+            prev = cur;
+          }
+        }
+        meta._sorted = sorted;
+      }
+      if (_stacked) {
+        updateStacks(this, parsed);
+      }
+    }
+    parsePrimitiveData(meta, data, start, count) {
+      const { iScale, vScale } = meta;
+      const iAxis = iScale.axis;
+      const vAxis = vScale.axis;
+      const labels = iScale.getLabels();
+      const singleScale = iScale === vScale;
+      const parsed = new Array(count);
+      let i, ilen, index2;
+      for (i = 0, ilen = count; i < ilen; ++i) {
+        index2 = i + start;
+        parsed[i] = {
+          [iAxis]: singleScale || iScale.parse(labels[index2], index2),
+          [vAxis]: vScale.parse(data[index2], index2)
+        };
+      }
+      return parsed;
+    }
+    parseArrayData(meta, data, start, count) {
+      const { xScale, yScale } = meta;
+      const parsed = new Array(count);
+      let i, ilen, index2, item;
+      for (i = 0, ilen = count; i < ilen; ++i) {
+        index2 = i + start;
+        item = data[index2];
+        parsed[i] = {
+          x: xScale.parse(item[0], index2),
+          y: yScale.parse(item[1], index2)
+        };
+      }
+      return parsed;
+    }
+    parseObjectData(meta, data, start, count) {
+      const { xScale, yScale } = meta;
+      const { xAxisKey = "x", yAxisKey = "y" } = this._parsing;
+      const parsed = new Array(count);
+      let i, ilen, index2, item;
+      for (i = 0, ilen = count; i < ilen; ++i) {
+        index2 = i + start;
+        item = data[index2];
+        parsed[i] = {
+          x: xScale.parse(resolveObjectKey(item, xAxisKey), index2),
+          y: yScale.parse(resolveObjectKey(item, yAxisKey), index2)
+        };
+      }
+      return parsed;
+    }
+    getParsed(index2) {
+      return this._cachedMeta._parsed[index2];
+    }
+    getDataElement(index2) {
+      return this._cachedMeta.data[index2];
+    }
+    applyStack(scale, parsed, mode) {
+      const chart = this.chart;
+      const meta = this._cachedMeta;
+      const value = parsed[scale.axis];
+      const stack = {
+        keys: getSortedDatasetIndices(chart, true),
+        values: parsed._stacks[scale.axis]._visualValues
+      };
+      return applyStack(stack, value, meta.index, {
+        mode
+      });
+    }
+    updateRangeFromParsed(range, scale, parsed, stack) {
+      const parsedValue = parsed[scale.axis];
+      let value = parsedValue === null ? NaN : parsedValue;
+      const values = stack && parsed._stacks[scale.axis];
+      if (stack && values) {
+        stack.values = values;
+        value = applyStack(stack, parsedValue, this._cachedMeta.index);
+      }
+      range.min = Math.min(range.min, value);
+      range.max = Math.max(range.max, value);
+    }
+    getMinMax(scale, canStack) {
+      const meta = this._cachedMeta;
+      const _parsed = meta._parsed;
+      const sorted = meta._sorted && scale === meta.iScale;
+      const ilen = _parsed.length;
+      const otherScale = this._getOtherScale(scale);
+      const stack = createStack(canStack, meta, this.chart);
+      const range = {
+        min: Number.POSITIVE_INFINITY,
+        max: Number.NEGATIVE_INFINITY
+      };
+      const { min: otherMin, max: otherMax } = getUserBounds(otherScale);
+      let i, parsed;
+      function _skip() {
+        parsed = _parsed[i];
+        const otherValue = parsed[otherScale.axis];
+        return !isNumberFinite(parsed[scale.axis]) || otherMin > otherValue || otherMax < otherValue;
+      }
+      for (i = 0; i < ilen; ++i) {
+        if (_skip()) {
+          continue;
+        }
+        this.updateRangeFromParsed(range, scale, parsed, stack);
+        if (sorted) {
+          break;
+        }
+      }
+      if (sorted) {
+        for (i = ilen - 1; i >= 0; --i) {
+          if (_skip()) {
+            continue;
+          }
+          this.updateRangeFromParsed(range, scale, parsed, stack);
+          break;
+        }
+      }
+      return range;
+    }
+    getAllParsedValues(scale) {
+      const parsed = this._cachedMeta._parsed;
+      const values = [];
+      let i, ilen, value;
+      for (i = 0, ilen = parsed.length; i < ilen; ++i) {
+        value = parsed[i][scale.axis];
+        if (isNumberFinite(value)) {
+          values.push(value);
+        }
+      }
+      return values;
+    }
+    getMaxOverflow() {
+      return false;
+    }
+    getLabelAndValue(index2) {
+      const meta = this._cachedMeta;
+      const iScale = meta.iScale;
+      const vScale = meta.vScale;
+      const parsed = this.getParsed(index2);
+      return {
+        label: iScale ? "" + iScale.getLabelForValue(parsed[iScale.axis]) : "",
+        value: vScale ? "" + vScale.getLabelForValue(parsed[vScale.axis]) : ""
+      };
+    }
+    _update(mode) {
+      const meta = this._cachedMeta;
+      this.update(mode || "default");
+      meta._clip = toClip(valueOrDefault(this.options.clip, defaultClip(meta.xScale, meta.yScale, this.getMaxOverflow())));
+    }
+    update(mode) {
+    }
+    draw() {
+      const ctx = this._ctx;
+      const chart = this.chart;
+      const meta = this._cachedMeta;
+      const elements = meta.data || [];
+      const area = chart.chartArea;
+      const active = [];
+      const start = this._drawStart || 0;
+      const count = this._drawCount || elements.length - start;
+      const drawActiveElementsOnTop = this.options.drawActiveElementsOnTop;
+      let i;
+      if (meta.dataset) {
+        meta.dataset.draw(ctx, area, start, count);
+      }
+      for (i = start; i < start + count; ++i) {
+        const element = elements[i];
+        if (element.hidden) {
+          continue;
+        }
+        if (element.active && drawActiveElementsOnTop) {
+          active.push(element);
+        } else {
+          element.draw(ctx, area);
+        }
+      }
+      for (i = 0; i < active.length; ++i) {
+        active[i].draw(ctx, area);
+      }
+    }
+    getStyle(index2, active) {
+      const mode = active ? "active" : "default";
+      return index2 === void 0 && this._cachedMeta.dataset ? this.resolveDatasetElementOptions(mode) : this.resolveDataElementOptions(index2 || 0, mode);
+    }
+    getContext(index2, active, mode) {
+      const dataset = this.getDataset();
+      let context;
+      if (index2 >= 0 && index2 < this._cachedMeta.data.length) {
+        const element = this._cachedMeta.data[index2];
+        context = element.$context || (element.$context = createDataContext(this.getContext(), index2, element));
+        context.parsed = this.getParsed(index2);
+        context.raw = dataset.data[index2];
+        context.index = context.dataIndex = index2;
+      } else {
+        context = this.$context || (this.$context = createDatasetContext(this.chart.getContext(), this.index));
+        context.dataset = dataset;
+        context.index = context.datasetIndex = this.index;
+      }
+      context.active = !!active;
+      context.mode = mode;
+      return context;
+    }
+    resolveDatasetElementOptions(mode) {
+      return this._resolveElementOptions(this.datasetElementType.id, mode);
+    }
+    resolveDataElementOptions(index2, mode) {
+      return this._resolveElementOptions(this.dataElementType.id, mode, index2);
+    }
+    _resolveElementOptions(elementType, mode = "default", index2) {
+      const active = mode === "active";
+      const cache = this._cachedDataOpts;
+      const cacheKey = elementType + "-" + mode;
+      const cached = cache[cacheKey];
+      const sharing = this.enableOptionSharing && defined(index2);
+      if (cached) {
+        return cloneIfNotShared(cached, sharing);
+      }
+      const config = this.chart.config;
+      const scopeKeys = config.datasetElementScopeKeys(this._type, elementType);
+      const prefixes = active ? [
+        `${elementType}Hover`,
+        "hover",
+        elementType,
+        ""
+      ] : [
+        elementType,
+        ""
+      ];
+      const scopes = config.getOptionScopes(this.getDataset(), scopeKeys);
+      const names2 = Object.keys(defaults.elements[elementType]);
+      const context = () => this.getContext(index2, active, mode);
+      const values = config.resolveNamedOptions(scopes, names2, context, prefixes);
+      if (values.$shared) {
+        values.$shared = sharing;
+        cache[cacheKey] = Object.freeze(cloneIfNotShared(values, sharing));
+      }
+      return values;
+    }
+    _resolveAnimations(index2, transition, active) {
+      const chart = this.chart;
+      const cache = this._cachedDataOpts;
+      const cacheKey = `animation-${transition}`;
+      const cached = cache[cacheKey];
+      if (cached) {
+        return cached;
+      }
+      let options;
+      if (chart.options.animation !== false) {
+        const config = this.chart.config;
+        const scopeKeys = config.datasetAnimationScopeKeys(this._type, transition);
+        const scopes = config.getOptionScopes(this.getDataset(), scopeKeys);
+        options = config.createResolver(scopes, this.getContext(index2, active, transition));
+      }
+      const animations = new Animations(chart, options && options.animations);
+      if (options && options._cacheable) {
+        cache[cacheKey] = Object.freeze(animations);
+      }
+      return animations;
+    }
+    getSharedOptions(options) {
+      if (!options.$shared) {
+        return;
+      }
+      return this._sharedOptions || (this._sharedOptions = Object.assign({}, options));
+    }
+    includeOptions(mode, sharedOptions) {
+      return !sharedOptions || isDirectUpdateMode(mode) || this.chart._animationsDisabled;
+    }
+    _getSharedOptions(start, mode) {
+      const firstOpts = this.resolveDataElementOptions(start, mode);
+      const previouslySharedOptions = this._sharedOptions;
+      const sharedOptions = this.getSharedOptions(firstOpts);
+      const includeOptions = this.includeOptions(mode, sharedOptions) || sharedOptions !== previouslySharedOptions;
+      this.updateSharedOptions(sharedOptions, mode, firstOpts);
+      return {
+        sharedOptions,
+        includeOptions
+      };
+    }
+    updateElement(element, index2, properties, mode) {
+      if (isDirectUpdateMode(mode)) {
+        Object.assign(element, properties);
+      } else {
+        this._resolveAnimations(index2, mode).update(element, properties);
+      }
+    }
+    updateSharedOptions(sharedOptions, mode, newOptions) {
+      if (sharedOptions && !isDirectUpdateMode(mode)) {
+        this._resolveAnimations(void 0, mode).update(sharedOptions, newOptions);
+      }
+    }
+    _setStyle(element, index2, mode, active) {
+      element.active = active;
+      const options = this.getStyle(index2, active);
+      this._resolveAnimations(index2, mode, active).update(element, {
+        options: !active && this.getSharedOptions(options) || options
+      });
+    }
+    removeHoverStyle(element, datasetIndex, index2) {
+      this._setStyle(element, index2, "active", false);
+    }
+    setHoverStyle(element, datasetIndex, index2) {
+      this._setStyle(element, index2, "active", true);
+    }
+    _removeDatasetHoverStyle() {
+      const element = this._cachedMeta.dataset;
+      if (element) {
+        this._setStyle(element, void 0, "active", false);
+      }
+    }
+    _setDatasetHoverStyle() {
+      const element = this._cachedMeta.dataset;
+      if (element) {
+        this._setStyle(element, void 0, "active", true);
+      }
+    }
+    _resyncElements(resetNewElements) {
+      const data = this._data;
+      const elements = this._cachedMeta.data;
+      for (const [method, arg1, arg2] of this._syncList) {
+        this[method](arg1, arg2);
+      }
+      this._syncList = [];
+      const numMeta = elements.length;
+      const numData = data.length;
+      const count = Math.min(numData, numMeta);
+      if (count) {
+        this.parse(0, count);
+      }
+      if (numData > numMeta) {
+        this._insertElements(numMeta, numData - numMeta, resetNewElements);
+      } else if (numData < numMeta) {
+        this._removeElements(numData, numMeta - numData);
+      }
+    }
+    _insertElements(start, count, resetNewElements = true) {
+      const meta = this._cachedMeta;
+      const data = meta.data;
+      const end = start + count;
+      let i;
+      const move = (arr) => {
+        arr.length += count;
+        for (i = arr.length - 1; i >= end; i--) {
+          arr[i] = arr[i - count];
+        }
+      };
+      move(data);
+      for (i = start; i < end; ++i) {
+        data[i] = new this.dataElementType();
+      }
+      if (this._parsing) {
+        move(meta._parsed);
+      }
+      this.parse(start, count);
+      if (resetNewElements) {
+        this.updateElements(data, start, count, "reset");
+      }
+    }
+    updateElements(element, start, count, mode) {
+    }
+    _removeElements(start, count) {
+      const meta = this._cachedMeta;
+      if (this._parsing) {
+        const removed = meta._parsed.splice(start, count);
+        if (meta._stacked) {
+          clearStacks(meta, removed);
+        }
+      }
+      meta.data.splice(start, count);
+    }
+    _sync(args) {
+      if (this._parsing) {
+        this._syncList.push(args);
+      } else {
+        const [method, arg1, arg2] = args;
+        this[method](arg1, arg2);
+      }
+      this.chart._dataChanges.push([
+        this.index,
+        ...args
+      ]);
+    }
+    _onDataPush() {
+      const count = arguments.length;
+      this._sync([
+        "_insertElements",
+        this.getDataset().data.length - count,
+        count
+      ]);
+    }
+    _onDataPop() {
+      this._sync([
+        "_removeElements",
+        this._cachedMeta.data.length - 1,
+        1
+      ]);
+    }
+    _onDataShift() {
+      this._sync([
+        "_removeElements",
+        0,
+        1
+      ]);
+    }
+    _onDataSplice(start, count) {
+      if (count) {
+        this._sync([
+          "_removeElements",
+          start,
+          count
+        ]);
+      }
+      const newCount = arguments.length - 2;
+      if (newCount) {
+        this._sync([
+          "_insertElements",
+          start,
+          newCount
+        ]);
+      }
+    }
+    _onDataUnshift() {
+      this._sync([
+        "_insertElements",
+        0,
+        arguments.length
+      ]);
+    }
+  }
+  __publicField(DatasetController, "defaults", {});
+  __publicField(DatasetController, "datasetElementType", null);
+  __publicField(DatasetController, "dataElementType", null);
+  class LineController extends DatasetController {
+    initialize() {
+      this.enableOptionSharing = true;
+      this.supportsDecimation = true;
+      super.initialize();
+    }
+    update(mode) {
+      const meta = this._cachedMeta;
+      const { dataset: line, data: points = [], _dataset } = meta;
+      const animationsDisabled = this.chart._animationsDisabled;
+      let { start, count } = _getStartAndCountOfVisiblePoints(meta, points, animationsDisabled);
+      this._drawStart = start;
+      this._drawCount = count;
+      if (_scaleRangesChanged(meta)) {
+        start = 0;
+        count = points.length;
+      }
+      line._chart = this.chart;
+      line._datasetIndex = this.index;
+      line._decimated = !!_dataset._decimated;
+      line.points = points;
+      const options = this.resolveDatasetElementOptions(mode);
+      if (!this.options.showLine) {
+        options.borderWidth = 0;
+      }
+      options.segment = this.options.segment;
+      this.updateElement(line, void 0, {
+        animated: !animationsDisabled,
+        options
+      }, mode);
+      this.updateElements(points, start, count, mode);
+    }
+    updateElements(points, start, count, mode) {
+      const reset = mode === "reset";
+      const { iScale, vScale, _stacked, _dataset } = this._cachedMeta;
+      const { sharedOptions, includeOptions } = this._getSharedOptions(start, mode);
+      const iAxis = iScale.axis;
+      const vAxis = vScale.axis;
+      const { spanGaps, segment } = this.options;
+      const maxGapLength = isNumber(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
+      const directUpdate = this.chart._animationsDisabled || reset || mode === "none";
+      const end = start + count;
+      const pointsCount = points.length;
+      let prevParsed = start > 0 && this.getParsed(start - 1);
+      for (let i = 0; i < pointsCount; ++i) {
+        const point = points[i];
+        const properties = directUpdate ? point : {};
+        if (i < start || i >= end) {
+          properties.skip = true;
+          continue;
+        }
+        const parsed = this.getParsed(i);
+        const nullData = isNullOrUndef(parsed[vAxis]);
+        const iPixel = properties[iAxis] = iScale.getPixelForValue(parsed[iAxis], i);
+        const vPixel = properties[vAxis] = reset || nullData ? vScale.getBasePixel() : vScale.getPixelForValue(_stacked ? this.applyStack(vScale, parsed, _stacked) : parsed[vAxis], i);
+        properties.skip = isNaN(iPixel) || isNaN(vPixel) || nullData;
+        properties.stop = i > 0 && Math.abs(parsed[iAxis] - prevParsed[iAxis]) > maxGapLength;
+        if (segment) {
+          properties.parsed = parsed;
+          properties.raw = _dataset.data[i];
+        }
+        if (includeOptions) {
+          properties.options = sharedOptions || this.resolveDataElementOptions(i, point.active ? "active" : mode);
+        }
+        if (!directUpdate) {
+          this.updateElement(point, i, properties, mode);
+        }
+        prevParsed = parsed;
+      }
+    }
+    getMaxOverflow() {
+      const meta = this._cachedMeta;
+      const dataset = meta.dataset;
+      const border = dataset.options && dataset.options.borderWidth || 0;
+      const data = meta.data || [];
+      if (!data.length) {
+        return border;
+      }
+      const firstPoint = data[0].size(this.resolveDataElementOptions(0));
+      const lastPoint = data[data.length - 1].size(this.resolveDataElementOptions(data.length - 1));
+      return Math.max(border, firstPoint, lastPoint) / 2;
+    }
+    draw() {
+      const meta = this._cachedMeta;
+      meta.dataset.updateControlPoints(this.chart.chartArea, meta.iScale.axis);
+      super.draw();
+    }
+  }
+  __publicField(LineController, "id", "line");
+  __publicField(LineController, "defaults", {
+    datasetElementType: "line",
+    dataElementType: "point",
+    showLine: true,
+    spanGaps: false
+  });
+  __publicField(LineController, "overrides", {
+    scales: {
+      _index_: {
+        type: "category"
+      },
+      _value_: {
+        type: "linear"
+      }
+    }
+  });
+  function abstract() {
+    throw new Error("This method is not implemented: Check that a complete date adapter is provided.");
+  }
+  class DateAdapterBase {
+    constructor(options) {
+      __publicField(this, "options");
+      this.options = options || {};
+    }
+    /**
+    * Override default date adapter methods.
+    * Accepts type parameter to define options type.
+    * @example
+    * Chart._adapters._date.override<{myAdapterOption: string}>({
+    *   init() {
+    *     console.log(this.options.myAdapterOption);
+    *   }
+    * })
+    */
+    static override(members) {
+      Object.assign(DateAdapterBase.prototype, members);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    init() {
+    }
+    formats() {
+      return abstract();
+    }
+    parse() {
+      return abstract();
+    }
+    format() {
+      return abstract();
+    }
+    add() {
+      return abstract();
+    }
+    diff() {
+      return abstract();
+    }
+    startOf() {
+      return abstract();
+    }
+    endOf() {
+      return abstract();
+    }
+  }
+  var adapters = {
+    _date: DateAdapterBase
+  };
+  function binarySearch(metaset, axis, value, intersect) {
+    const { controller, data, _sorted } = metaset;
+    const iScale = controller._cachedMeta.iScale;
+    const spanGaps = metaset.dataset ? metaset.dataset.options ? metaset.dataset.options.spanGaps : null : null;
+    if (iScale && axis === iScale.axis && axis !== "r" && _sorted && data.length) {
+      const lookupMethod = iScale._reversePixels ? _rlookupByKey : _lookupByKey;
+      if (!intersect) {
+        const result = lookupMethod(data, axis, value);
+        if (spanGaps) {
+          const { vScale } = controller._cachedMeta;
+          const { _parsed } = metaset;
+          const distanceToDefinedLo = _parsed.slice(0, result.lo + 1).reverse().findIndex((point) => !isNullOrUndef(point[vScale.axis]));
+          result.lo -= Math.max(0, distanceToDefinedLo);
+          const distanceToDefinedHi = _parsed.slice(result.hi).findIndex((point) => !isNullOrUndef(point[vScale.axis]));
+          result.hi += Math.max(0, distanceToDefinedHi);
+        }
+        return result;
+      } else if (controller._sharedOptions) {
+        const el = data[0];
+        const range = typeof el.getRange === "function" && el.getRange(axis);
+        if (range) {
+          const start = lookupMethod(data, axis, value - range);
+          const end = lookupMethod(data, axis, value + range);
+          return {
+            lo: start.lo,
+            hi: end.hi
+          };
+        }
+      }
+    }
+    return {
+      lo: 0,
+      hi: data.length - 1
+    };
+  }
+  function evaluateInteractionItems(chart, axis, position, handler, intersect) {
+    const metasets = chart.getSortedVisibleDatasetMetas();
+    const value = position[axis];
+    for (let i = 0, ilen = metasets.length; i < ilen; ++i) {
+      const { index: index2, data } = metasets[i];
+      const { lo, hi } = binarySearch(metasets[i], axis, value, intersect);
+      for (let j = lo; j <= hi; ++j) {
+        const element = data[j];
+        if (!element.skip) {
+          handler(element, index2, j);
+        }
+      }
+    }
+  }
+  function getDistanceMetricForAxis(axis) {
+    const useX = axis.indexOf("x") !== -1;
+    const useY = axis.indexOf("y") !== -1;
+    return function(pt1, pt2) {
+      const deltaX = useX ? Math.abs(pt1.x - pt2.x) : 0;
+      const deltaY = useY ? Math.abs(pt1.y - pt2.y) : 0;
+      return Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
+    };
+  }
+  function getIntersectItems(chart, position, axis, useFinalPosition, includeInvisible) {
+    const items = [];
+    if (!includeInvisible && !chart.isPointInArea(position)) {
+      return items;
+    }
+    const evaluationFunc = function(element, datasetIndex, index2) {
+      if (!includeInvisible && !_isPointInArea(element, chart.chartArea, 0)) {
+        return;
+      }
+      if (element.inRange(position.x, position.y, useFinalPosition)) {
+        items.push({
+          element,
+          datasetIndex,
+          index: index2
+        });
+      }
+    };
+    evaluateInteractionItems(chart, axis, position, evaluationFunc, true);
+    return items;
+  }
+  function getNearestRadialItems(chart, position, axis, useFinalPosition) {
+    let items = [];
+    function evaluationFunc(element, datasetIndex, index2) {
+      const { startAngle, endAngle } = element.getProps([
+        "startAngle",
+        "endAngle"
+      ], useFinalPosition);
+      const { angle } = getAngleFromPoint(element, {
+        x: position.x,
+        y: position.y
+      });
+      if (_angleBetween(angle, startAngle, endAngle)) {
+        items.push({
+          element,
+          datasetIndex,
+          index: index2
+        });
+      }
+    }
+    evaluateInteractionItems(chart, axis, position, evaluationFunc);
+    return items;
+  }
+  function getNearestCartesianItems(chart, position, axis, intersect, useFinalPosition, includeInvisible) {
+    let items = [];
+    const distanceMetric = getDistanceMetricForAxis(axis);
+    let minDistance = Number.POSITIVE_INFINITY;
+    function evaluationFunc(element, datasetIndex, index2) {
+      const inRange = element.inRange(position.x, position.y, useFinalPosition);
+      if (intersect && !inRange) {
+        return;
+      }
+      const center = element.getCenterPoint(useFinalPosition);
+      const pointInArea = !!includeInvisible || chart.isPointInArea(center);
+      if (!pointInArea && !inRange) {
+        return;
+      }
+      const distance = distanceMetric(position, center);
+      if (distance < minDistance) {
+        items = [
+          {
+            element,
+            datasetIndex,
+            index: index2
+          }
+        ];
+        minDistance = distance;
+      } else if (distance === minDistance) {
+        items.push({
+          element,
+          datasetIndex,
+          index: index2
+        });
+      }
+    }
+    evaluateInteractionItems(chart, axis, position, evaluationFunc);
+    return items;
+  }
+  function getNearestItems(chart, position, axis, intersect, useFinalPosition, includeInvisible) {
+    if (!includeInvisible && !chart.isPointInArea(position)) {
+      return [];
+    }
+    return axis === "r" && !intersect ? getNearestRadialItems(chart, position, axis, useFinalPosition) : getNearestCartesianItems(chart, position, axis, intersect, useFinalPosition, includeInvisible);
+  }
+  function getAxisItems(chart, position, axis, intersect, useFinalPosition) {
+    const items = [];
+    const rangeMethod = axis === "x" ? "inXRange" : "inYRange";
+    let intersectsItem = false;
+    evaluateInteractionItems(chart, axis, position, (element, datasetIndex, index2) => {
+      if (element[rangeMethod] && element[rangeMethod](position[axis], useFinalPosition)) {
+        items.push({
+          element,
+          datasetIndex,
+          index: index2
+        });
+        intersectsItem = intersectsItem || element.inRange(position.x, position.y, useFinalPosition);
+      }
+    });
+    if (intersect && !intersectsItem) {
+      return [];
+    }
+    return items;
+  }
+  var Interaction = {
+    modes: {
+      index(chart, e, options, useFinalPosition) {
+        const position = getRelativePosition(e, chart);
+        const axis = options.axis || "x";
+        const includeInvisible = options.includeInvisible || false;
+        const items = options.intersect ? getIntersectItems(chart, position, axis, useFinalPosition, includeInvisible) : getNearestItems(chart, position, axis, false, useFinalPosition, includeInvisible);
+        const elements = [];
+        if (!items.length) {
+          return [];
+        }
+        chart.getSortedVisibleDatasetMetas().forEach((meta) => {
+          const index2 = items[0].index;
+          const element = meta.data[index2];
+          if (element && !element.skip) {
+            elements.push({
+              element,
+              datasetIndex: meta.index,
+              index: index2
+            });
+          }
+        });
+        return elements;
+      },
+      dataset(chart, e, options, useFinalPosition) {
+        const position = getRelativePosition(e, chart);
+        const axis = options.axis || "xy";
+        const includeInvisible = options.includeInvisible || false;
+        let items = options.intersect ? getIntersectItems(chart, position, axis, useFinalPosition, includeInvisible) : getNearestItems(chart, position, axis, false, useFinalPosition, includeInvisible);
+        if (items.length > 0) {
+          const datasetIndex = items[0].datasetIndex;
+          const data = chart.getDatasetMeta(datasetIndex).data;
+          items = [];
+          for (let i = 0; i < data.length; ++i) {
+            items.push({
+              element: data[i],
+              datasetIndex,
+              index: i
+            });
+          }
+        }
+        return items;
+      },
+      point(chart, e, options, useFinalPosition) {
+        const position = getRelativePosition(e, chart);
+        const axis = options.axis || "xy";
+        const includeInvisible = options.includeInvisible || false;
+        return getIntersectItems(chart, position, axis, useFinalPosition, includeInvisible);
+      },
+      nearest(chart, e, options, useFinalPosition) {
+        const position = getRelativePosition(e, chart);
+        const axis = options.axis || "xy";
+        const includeInvisible = options.includeInvisible || false;
+        return getNearestItems(chart, position, axis, options.intersect, useFinalPosition, includeInvisible);
+      },
+      x(chart, e, options, useFinalPosition) {
+        const position = getRelativePosition(e, chart);
+        return getAxisItems(chart, position, "x", options.intersect, useFinalPosition);
+      },
+      y(chart, e, options, useFinalPosition) {
+        const position = getRelativePosition(e, chart);
+        return getAxisItems(chart, position, "y", options.intersect, useFinalPosition);
+      }
+    }
+  };
+  const STATIC_POSITIONS = [
+    "left",
+    "top",
+    "right",
+    "bottom"
+  ];
+  function filterByPosition(array, position) {
+    return array.filter((v) => v.pos === position);
+  }
+  function filterDynamicPositionByAxis(array, axis) {
+    return array.filter((v) => STATIC_POSITIONS.indexOf(v.pos) === -1 && v.box.axis === axis);
+  }
+  function sortByWeight(array, reverse) {
+    return array.sort((a, b) => {
+      const v0 = reverse ? b : a;
+      const v1 = reverse ? a : b;
+      return v0.weight === v1.weight ? v0.index - v1.index : v0.weight - v1.weight;
+    });
+  }
+  function wrapBoxes(boxes) {
+    const layoutBoxes = [];
+    let i, ilen, box, pos, stack, stackWeight;
+    for (i = 0, ilen = (boxes || []).length; i < ilen; ++i) {
+      box = boxes[i];
+      ({ position: pos, options: { stack, stackWeight = 1 } } = box);
+      layoutBoxes.push({
+        index: i,
+        box,
+        pos,
+        horizontal: box.isHorizontal(),
+        weight: box.weight,
+        stack: stack && pos + stack,
+        stackWeight
+      });
+    }
+    return layoutBoxes;
+  }
+  function buildStacks(layouts2) {
+    const stacks = {};
+    for (const wrap of layouts2) {
+      const { stack, pos, stackWeight } = wrap;
+      if (!stack || !STATIC_POSITIONS.includes(pos)) {
+        continue;
+      }
+      const _stack = stacks[stack] || (stacks[stack] = {
+        count: 0,
+        placed: 0,
+        weight: 0,
+        size: 0
+      });
+      _stack.count++;
+      _stack.weight += stackWeight;
+    }
+    return stacks;
+  }
+  function setLayoutDims(layouts2, params) {
+    const stacks = buildStacks(layouts2);
+    const { vBoxMaxWidth, hBoxMaxHeight } = params;
+    let i, ilen, layout;
+    for (i = 0, ilen = layouts2.length; i < ilen; ++i) {
+      layout = layouts2[i];
+      const { fullSize } = layout.box;
+      const stack = stacks[layout.stack];
+      const factor = stack && layout.stackWeight / stack.weight;
+      if (layout.horizontal) {
+        layout.width = factor ? factor * vBoxMaxWidth : fullSize && params.availableWidth;
+        layout.height = hBoxMaxHeight;
+      } else {
+        layout.width = vBoxMaxWidth;
+        layout.height = factor ? factor * hBoxMaxHeight : fullSize && params.availableHeight;
+      }
+    }
+    return stacks;
+  }
+  function buildLayoutBoxes(boxes) {
+    const layoutBoxes = wrapBoxes(boxes);
+    const fullSize = sortByWeight(layoutBoxes.filter((wrap) => wrap.box.fullSize), true);
+    const left = sortByWeight(filterByPosition(layoutBoxes, "left"), true);
+    const right = sortByWeight(filterByPosition(layoutBoxes, "right"));
+    const top = sortByWeight(filterByPosition(layoutBoxes, "top"), true);
+    const bottom = sortByWeight(filterByPosition(layoutBoxes, "bottom"));
+    const centerHorizontal = filterDynamicPositionByAxis(layoutBoxes, "x");
+    const centerVertical = filterDynamicPositionByAxis(layoutBoxes, "y");
+    return {
+      fullSize,
+      leftAndTop: left.concat(top),
+      rightAndBottom: right.concat(centerVertical).concat(bottom).concat(centerHorizontal),
+      chartArea: filterByPosition(layoutBoxes, "chartArea"),
+      vertical: left.concat(right).concat(centerVertical),
+      horizontal: top.concat(bottom).concat(centerHorizontal)
+    };
+  }
+  function getCombinedMax(maxPadding, chartArea, a, b) {
+    return Math.max(maxPadding[a], chartArea[a]) + Math.max(maxPadding[b], chartArea[b]);
+  }
+  function updateMaxPadding(maxPadding, boxPadding) {
+    maxPadding.top = Math.max(maxPadding.top, boxPadding.top);
+    maxPadding.left = Math.max(maxPadding.left, boxPadding.left);
+    maxPadding.bottom = Math.max(maxPadding.bottom, boxPadding.bottom);
+    maxPadding.right = Math.max(maxPadding.right, boxPadding.right);
+  }
+  function updateDims(chartArea, params, layout, stacks) {
+    const { pos, box } = layout;
+    const maxPadding = chartArea.maxPadding;
+    if (!isObject(pos)) {
+      if (layout.size) {
+        chartArea[pos] -= layout.size;
+      }
+      const stack = stacks[layout.stack] || {
+        size: 0,
+        count: 1
+      };
+      stack.size = Math.max(stack.size, layout.horizontal ? box.height : box.width);
+      layout.size = stack.size / stack.count;
+      chartArea[pos] += layout.size;
+    }
+    if (box.getPadding) {
+      updateMaxPadding(maxPadding, box.getPadding());
+    }
+    const newWidth = Math.max(0, params.outerWidth - getCombinedMax(maxPadding, chartArea, "left", "right"));
+    const newHeight = Math.max(0, params.outerHeight - getCombinedMax(maxPadding, chartArea, "top", "bottom"));
+    const widthChanged = newWidth !== chartArea.w;
+    const heightChanged = newHeight !== chartArea.h;
+    chartArea.w = newWidth;
+    chartArea.h = newHeight;
+    return layout.horizontal ? {
+      same: widthChanged,
+      other: heightChanged
+    } : {
+      same: heightChanged,
+      other: widthChanged
+    };
+  }
+  function handleMaxPadding(chartArea) {
+    const maxPadding = chartArea.maxPadding;
+    function updatePos(pos) {
+      const change = Math.max(maxPadding[pos] - chartArea[pos], 0);
+      chartArea[pos] += change;
+      return change;
+    }
+    chartArea.y += updatePos("top");
+    chartArea.x += updatePos("left");
+    updatePos("right");
+    updatePos("bottom");
+  }
+  function getMargins(horizontal, chartArea) {
+    const maxPadding = chartArea.maxPadding;
+    function marginForPositions(positions2) {
+      const margin = {
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+      };
+      positions2.forEach((pos) => {
+        margin[pos] = Math.max(chartArea[pos], maxPadding[pos]);
+      });
+      return margin;
+    }
+    return horizontal ? marginForPositions([
+      "left",
+      "right"
+    ]) : marginForPositions([
+      "top",
+      "bottom"
+    ]);
+  }
+  function fitBoxes(boxes, chartArea, params, stacks) {
+    const refitBoxes = [];
+    let i, ilen, layout, box, refit, changed;
+    for (i = 0, ilen = boxes.length, refit = 0; i < ilen; ++i) {
+      layout = boxes[i];
+      box = layout.box;
+      box.update(layout.width || chartArea.w, layout.height || chartArea.h, getMargins(layout.horizontal, chartArea));
+      const { same, other } = updateDims(chartArea, params, layout, stacks);
+      refit |= same && refitBoxes.length;
+      changed = changed || other;
+      if (!box.fullSize) {
+        refitBoxes.push(layout);
+      }
+    }
+    return refit && fitBoxes(refitBoxes, chartArea, params, stacks) || changed;
+  }
+  function setBoxDims(box, left, top, width, height) {
+    box.top = top;
+    box.left = left;
+    box.right = left + width;
+    box.bottom = top + height;
+    box.width = width;
+    box.height = height;
+  }
+  function placeBoxes(boxes, chartArea, params, stacks) {
+    const userPadding = params.padding;
+    let { x, y } = chartArea;
+    for (const layout of boxes) {
+      const box = layout.box;
+      const stack = stacks[layout.stack] || {
+        placed: 0,
+        weight: 1
+      };
+      const weight = layout.stackWeight / stack.weight || 1;
+      if (layout.horizontal) {
+        const width = chartArea.w * weight;
+        const height = stack.size || box.height;
+        if (defined(stack.start)) {
+          y = stack.start;
+        }
+        if (box.fullSize) {
+          setBoxDims(box, userPadding.left, y, params.outerWidth - userPadding.right - userPadding.left, height);
+        } else {
+          setBoxDims(box, chartArea.left + stack.placed, y, width, height);
+        }
+        stack.start = y;
+        stack.placed += width;
+        y = box.bottom;
+      } else {
+        const height = chartArea.h * weight;
+        const width = stack.size || box.width;
+        if (defined(stack.start)) {
+          x = stack.start;
+        }
+        if (box.fullSize) {
+          setBoxDims(box, x, userPadding.top, width, params.outerHeight - userPadding.bottom - userPadding.top);
+        } else {
+          setBoxDims(box, x, chartArea.top + stack.placed, width, height);
+        }
+        stack.start = x;
+        stack.placed += height;
+        x = box.right;
+      }
+    }
+    chartArea.x = x;
+    chartArea.y = y;
+  }
+  var layouts = {
+    addBox(chart, item) {
+      if (!chart.boxes) {
+        chart.boxes = [];
+      }
+      item.fullSize = item.fullSize || false;
+      item.position = item.position || "top";
+      item.weight = item.weight || 0;
+      item._layers = item._layers || function() {
+        return [
+          {
+            z: 0,
+            draw(chartArea) {
+              item.draw(chartArea);
+            }
+          }
+        ];
+      };
+      chart.boxes.push(item);
+    },
+    removeBox(chart, layoutItem) {
+      const index2 = chart.boxes ? chart.boxes.indexOf(layoutItem) : -1;
+      if (index2 !== -1) {
+        chart.boxes.splice(index2, 1);
+      }
+    },
+    configure(chart, item, options) {
+      item.fullSize = options.fullSize;
+      item.position = options.position;
+      item.weight = options.weight;
+    },
+    update(chart, width, height, minPadding) {
+      if (!chart) {
+        return;
+      }
+      const padding = toPadding(chart.options.layout.padding);
+      const availableWidth = Math.max(width - padding.width, 0);
+      const availableHeight = Math.max(height - padding.height, 0);
+      const boxes = buildLayoutBoxes(chart.boxes);
+      const verticalBoxes = boxes.vertical;
+      const horizontalBoxes = boxes.horizontal;
+      each(chart.boxes, (box) => {
+        if (typeof box.beforeLayout === "function") {
+          box.beforeLayout();
+        }
+      });
+      const visibleVerticalBoxCount = verticalBoxes.reduce((total, wrap) => wrap.box.options && wrap.box.options.display === false ? total : total + 1, 0) || 1;
+      const params = Object.freeze({
+        outerWidth: width,
+        outerHeight: height,
+        padding,
+        availableWidth,
+        availableHeight,
+        vBoxMaxWidth: availableWidth / 2 / visibleVerticalBoxCount,
+        hBoxMaxHeight: availableHeight / 2
+      });
+      const maxPadding = Object.assign({}, padding);
+      updateMaxPadding(maxPadding, toPadding(minPadding));
+      const chartArea = Object.assign({
+        maxPadding,
+        w: availableWidth,
+        h: availableHeight,
+        x: padding.left,
+        y: padding.top
+      }, padding);
+      const stacks = setLayoutDims(verticalBoxes.concat(horizontalBoxes), params);
+      fitBoxes(boxes.fullSize, chartArea, params, stacks);
+      fitBoxes(verticalBoxes, chartArea, params, stacks);
+      if (fitBoxes(horizontalBoxes, chartArea, params, stacks)) {
+        fitBoxes(verticalBoxes, chartArea, params, stacks);
+      }
+      handleMaxPadding(chartArea);
+      placeBoxes(boxes.leftAndTop, chartArea, params, stacks);
+      chartArea.x += chartArea.w;
+      chartArea.y += chartArea.h;
+      placeBoxes(boxes.rightAndBottom, chartArea, params, stacks);
+      chart.chartArea = {
+        left: chartArea.left,
+        top: chartArea.top,
+        right: chartArea.left + chartArea.w,
+        bottom: chartArea.top + chartArea.h,
+        height: chartArea.h,
+        width: chartArea.w
+      };
+      each(boxes.chartArea, (layout) => {
+        const box = layout.box;
+        Object.assign(box, chart.chartArea);
+        box.update(chartArea.w, chartArea.h, {
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0
+        });
+      });
+    }
+  };
+  class BasePlatform {
+    acquireContext(canvas, aspectRatio) {
+    }
+    releaseContext(context) {
+      return false;
+    }
+    addEventListener(chart, type, listener) {
+    }
+    removeEventListener(chart, type, listener) {
+    }
+    getDevicePixelRatio() {
+      return 1;
+    }
+    getMaximumSize(element, width, height, aspectRatio) {
+      width = Math.max(0, width || element.width);
+      height = height || element.height;
+      return {
+        width,
+        height: Math.max(0, aspectRatio ? Math.floor(width / aspectRatio) : height)
+      };
+    }
+    isAttached(canvas) {
+      return true;
+    }
+    updateConfig(config) {
+    }
+  }
+  class BasicPlatform extends BasePlatform {
+    acquireContext(item) {
+      return item && item.getContext && item.getContext("2d") || null;
+    }
+    updateConfig(config) {
+      config.options.animation = false;
+    }
+  }
+  const EXPANDO_KEY = "$chartjs";
+  const EVENT_TYPES = {
+    touchstart: "mousedown",
+    touchmove: "mousemove",
+    touchend: "mouseup",
+    pointerenter: "mouseenter",
+    pointerdown: "mousedown",
+    pointermove: "mousemove",
+    pointerup: "mouseup",
+    pointerleave: "mouseout",
+    pointerout: "mouseout"
+  };
+  const isNullOrEmpty = (value) => value === null || value === "";
+  function initCanvas(canvas, aspectRatio) {
+    const style = canvas.style;
+    const renderHeight = canvas.getAttribute("height");
+    const renderWidth = canvas.getAttribute("width");
+    canvas[EXPANDO_KEY] = {
+      initial: {
+        height: renderHeight,
+        width: renderWidth,
+        style: {
+          display: style.display,
+          height: style.height,
+          width: style.width
+        }
+      }
+    };
+    style.display = style.display || "block";
+    style.boxSizing = style.boxSizing || "border-box";
+    if (isNullOrEmpty(renderWidth)) {
+      const displayWidth = readUsedSize(canvas, "width");
+      if (displayWidth !== void 0) {
+        canvas.width = displayWidth;
+      }
+    }
+    if (isNullOrEmpty(renderHeight)) {
+      if (canvas.style.height === "") {
+        canvas.height = canvas.width / (aspectRatio || 2);
+      } else {
+        const displayHeight = readUsedSize(canvas, "height");
+        if (displayHeight !== void 0) {
+          canvas.height = displayHeight;
+        }
+      }
+    }
+    return canvas;
+  }
+  const eventListenerOptions = supportsEventListenerOptions ? {
+    passive: true
+  } : false;
+  function addListener(node, type, listener) {
+    if (node) {
+      node.addEventListener(type, listener, eventListenerOptions);
+    }
+  }
+  function removeListener(chart, type, listener) {
+    if (chart && chart.canvas) {
+      chart.canvas.removeEventListener(type, listener, eventListenerOptions);
+    }
+  }
+  function fromNativeEvent(event, chart) {
+    const type = EVENT_TYPES[event.type] || event.type;
+    const { x, y } = getRelativePosition(event, chart);
+    return {
+      type,
+      chart,
+      native: event,
+      x: x !== void 0 ? x : null,
+      y: y !== void 0 ? y : null
+    };
+  }
+  function nodeListContains(nodeList, canvas) {
+    for (const node of nodeList) {
+      if (node === canvas || node.contains(canvas)) {
+        return true;
+      }
+    }
+  }
+  function createAttachObserver(chart, type, listener) {
+    const canvas = chart.canvas;
+    const observer = new MutationObserver((entries) => {
+      let trigger = false;
+      for (const entry of entries) {
+        trigger = trigger || nodeListContains(entry.addedNodes, canvas);
+        trigger = trigger && !nodeListContains(entry.removedNodes, canvas);
+      }
+      if (trigger) {
+        listener();
+      }
+    });
+    observer.observe(document, {
+      childList: true,
+      subtree: true
+    });
+    return observer;
+  }
+  function createDetachObserver(chart, type, listener) {
+    const canvas = chart.canvas;
+    const observer = new MutationObserver((entries) => {
+      let trigger = false;
+      for (const entry of entries) {
+        trigger = trigger || nodeListContains(entry.removedNodes, canvas);
+        trigger = trigger && !nodeListContains(entry.addedNodes, canvas);
+      }
+      if (trigger) {
+        listener();
+      }
+    });
+    observer.observe(document, {
+      childList: true,
+      subtree: true
+    });
+    return observer;
+  }
+  const drpListeningCharts = /* @__PURE__ */ new Map();
+  let oldDevicePixelRatio = 0;
+  function onWindowResize() {
+    const dpr = window.devicePixelRatio;
+    if (dpr === oldDevicePixelRatio) {
+      return;
+    }
+    oldDevicePixelRatio = dpr;
+    drpListeningCharts.forEach((resize, chart) => {
+      if (chart.currentDevicePixelRatio !== dpr) {
+        resize();
+      }
+    });
+  }
+  function listenDevicePixelRatioChanges(chart, resize) {
+    if (!drpListeningCharts.size) {
+      window.addEventListener("resize", onWindowResize);
+    }
+    drpListeningCharts.set(chart, resize);
+  }
+  function unlistenDevicePixelRatioChanges(chart) {
+    drpListeningCharts.delete(chart);
+    if (!drpListeningCharts.size) {
+      window.removeEventListener("resize", onWindowResize);
+    }
+  }
+  function createResizeObserver(chart, type, listener) {
+    const canvas = chart.canvas;
+    const container = canvas && _getParentNode(canvas);
+    if (!container) {
+      return;
+    }
+    const resize = throttled((width, height) => {
+      const w = container.clientWidth;
+      listener(width, height);
+      if (w < container.clientWidth) {
+        listener();
+      }
+    }, window);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const width = entry.contentRect.width;
+      const height = entry.contentRect.height;
+      if (width === 0 && height === 0) {
+        return;
+      }
+      resize(width, height);
+    });
+    observer.observe(container);
+    listenDevicePixelRatioChanges(chart, resize);
+    return observer;
+  }
+  function releaseObserver(chart, type, observer) {
+    if (observer) {
+      observer.disconnect();
+    }
+    if (type === "resize") {
+      unlistenDevicePixelRatioChanges(chart);
+    }
+  }
+  function createProxyAndListen(chart, type, listener) {
+    const canvas = chart.canvas;
+    const proxy = throttled((event) => {
+      if (chart.ctx !== null) {
+        listener(fromNativeEvent(event, chart));
+      }
+    }, chart);
+    addListener(canvas, type, proxy);
+    return proxy;
+  }
+  class DomPlatform extends BasePlatform {
+    acquireContext(canvas, aspectRatio) {
+      const context = canvas && canvas.getContext && canvas.getContext("2d");
+      if (context && context.canvas === canvas) {
+        initCanvas(canvas, aspectRatio);
+        return context;
+      }
+      return null;
+    }
+    releaseContext(context) {
+      const canvas = context.canvas;
+      if (!canvas[EXPANDO_KEY]) {
+        return false;
+      }
+      const initial = canvas[EXPANDO_KEY].initial;
+      [
+        "height",
+        "width"
+      ].forEach((prop) => {
+        const value = initial[prop];
+        if (isNullOrUndef(value)) {
+          canvas.removeAttribute(prop);
+        } else {
+          canvas.setAttribute(prop, value);
+        }
+      });
+      const style = initial.style || {};
+      Object.keys(style).forEach((key) => {
+        canvas.style[key] = style[key];
+      });
+      canvas.width = canvas.width;
+      delete canvas[EXPANDO_KEY];
+      return true;
+    }
+    addEventListener(chart, type, listener) {
+      this.removeEventListener(chart, type);
+      const proxies = chart.$proxies || (chart.$proxies = {});
+      const handlers = {
+        attach: createAttachObserver,
+        detach: createDetachObserver,
+        resize: createResizeObserver
+      };
+      const handler = handlers[type] || createProxyAndListen;
+      proxies[type] = handler(chart, type, listener);
+    }
+    removeEventListener(chart, type) {
+      const proxies = chart.$proxies || (chart.$proxies = {});
+      const proxy = proxies[type];
+      if (!proxy) {
+        return;
+      }
+      const handlers = {
+        attach: releaseObserver,
+        detach: releaseObserver,
+        resize: releaseObserver
+      };
+      const handler = handlers[type] || removeListener;
+      handler(chart, type, proxy);
+      proxies[type] = void 0;
+    }
+    getDevicePixelRatio() {
+      return window.devicePixelRatio;
+    }
+    getMaximumSize(canvas, width, height, aspectRatio) {
+      return getMaximumSize(canvas, width, height, aspectRatio);
+    }
+    isAttached(canvas) {
+      const container = canvas && _getParentNode(canvas);
+      return !!(container && container.isConnected);
+    }
+  }
+  function _detectPlatform(canvas) {
+    if (!_isDomSupported() || typeof OffscreenCanvas !== "undefined" && canvas instanceof OffscreenCanvas) {
+      return BasicPlatform;
+    }
+    return DomPlatform;
+  }
+  class Element {
+    constructor() {
+      __publicField(this, "x");
+      __publicField(this, "y");
+      __publicField(this, "active", false);
+      __publicField(this, "options");
+      __publicField(this, "$animations");
+    }
+    tooltipPosition(useFinalPosition) {
+      const { x, y } = this.getProps([
+        "x",
+        "y"
+      ], useFinalPosition);
+      return {
+        x,
+        y
+      };
+    }
+    hasValue() {
+      return isNumber(this.x) && isNumber(this.y);
+    }
+    getProps(props, final) {
+      const anims = this.$animations;
+      if (!final || !anims) {
+        return this;
+      }
+      const ret = {};
+      props.forEach((prop) => {
+        ret[prop] = anims[prop] && anims[prop].active() ? anims[prop]._to : this[prop];
+      });
+      return ret;
+    }
+  }
+  __publicField(Element, "defaults", {});
+  __publicField(Element, "defaultRoutes");
+  function autoSkip(scale, ticks) {
+    const tickOpts = scale.options.ticks;
+    const determinedMaxTicks = determineMaxTicks(scale);
+    const ticksLimit = Math.min(tickOpts.maxTicksLimit || determinedMaxTicks, determinedMaxTicks);
+    const majorIndices = tickOpts.major.enabled ? getMajorIndices(ticks) : [];
+    const numMajorIndices = majorIndices.length;
+    const first = majorIndices[0];
+    const last = majorIndices[numMajorIndices - 1];
+    const newTicks = [];
+    if (numMajorIndices > ticksLimit) {
+      skipMajors(ticks, newTicks, majorIndices, numMajorIndices / ticksLimit);
+      return newTicks;
+    }
+    const spacing = calculateSpacing(majorIndices, ticks, ticksLimit);
+    if (numMajorIndices > 0) {
+      let i, ilen;
+      const avgMajorSpacing = numMajorIndices > 1 ? Math.round((last - first) / (numMajorIndices - 1)) : null;
+      skip(ticks, newTicks, spacing, isNullOrUndef(avgMajorSpacing) ? 0 : first - avgMajorSpacing, first);
+      for (i = 0, ilen = numMajorIndices - 1; i < ilen; i++) {
+        skip(ticks, newTicks, spacing, majorIndices[i], majorIndices[i + 1]);
+      }
+      skip(ticks, newTicks, spacing, last, isNullOrUndef(avgMajorSpacing) ? ticks.length : last + avgMajorSpacing);
+      return newTicks;
+    }
+    skip(ticks, newTicks, spacing);
+    return newTicks;
+  }
+  function determineMaxTicks(scale) {
+    const offset = scale.options.offset;
+    const tickLength = scale._tickSize();
+    const maxScale = scale._length / tickLength + (offset ? 0 : 1);
+    const maxChart = scale._maxLength / tickLength;
+    return Math.floor(Math.min(maxScale, maxChart));
+  }
+  function calculateSpacing(majorIndices, ticks, ticksLimit) {
+    const evenMajorSpacing = getEvenSpacing(majorIndices);
+    const spacing = ticks.length / ticksLimit;
+    if (!evenMajorSpacing) {
+      return Math.max(spacing, 1);
+    }
+    const factors = _factorize(evenMajorSpacing);
+    for (let i = 0, ilen = factors.length - 1; i < ilen; i++) {
+      const factor = factors[i];
+      if (factor > spacing) {
+        return factor;
+      }
+    }
+    return Math.max(spacing, 1);
+  }
+  function getMajorIndices(ticks) {
+    const result = [];
+    let i, ilen;
+    for (i = 0, ilen = ticks.length; i < ilen; i++) {
+      if (ticks[i].major) {
+        result.push(i);
+      }
+    }
+    return result;
+  }
+  function skipMajors(ticks, newTicks, majorIndices, spacing) {
+    let count = 0;
+    let next = majorIndices[0];
+    let i;
+    spacing = Math.ceil(spacing);
+    for (i = 0; i < ticks.length; i++) {
+      if (i === next) {
+        newTicks.push(ticks[i]);
+        count++;
+        next = majorIndices[count * spacing];
+      }
+    }
+  }
+  function skip(ticks, newTicks, spacing, majorStart, majorEnd) {
+    const start = valueOrDefault(majorStart, 0);
+    const end = Math.min(valueOrDefault(majorEnd, ticks.length), ticks.length);
+    let count = 0;
+    let length, i, next;
+    spacing = Math.ceil(spacing);
+    if (majorEnd) {
+      length = majorEnd - majorStart;
+      spacing = length / Math.floor(length / spacing);
+    }
+    next = start;
+    while (next < 0) {
+      count++;
+      next = Math.round(start + count * spacing);
+    }
+    for (i = Math.max(start, 0); i < end; i++) {
+      if (i === next) {
+        newTicks.push(ticks[i]);
+        count++;
+        next = Math.round(start + count * spacing);
+      }
+    }
+  }
+  function getEvenSpacing(arr) {
+    const len = arr.length;
+    let i, diff;
+    if (len < 2) {
+      return false;
+    }
+    for (diff = arr[0], i = 1; i < len; ++i) {
+      if (arr[i] - arr[i - 1] !== diff) {
+        return false;
+      }
+    }
+    return diff;
+  }
+  const reverseAlign = (align) => align === "left" ? "right" : align === "right" ? "left" : align;
+  const offsetFromEdge = (scale, edge, offset) => edge === "top" || edge === "left" ? scale[edge] + offset : scale[edge] - offset;
+  const getTicksLimit = (ticksLength, maxTicksLimit) => Math.min(maxTicksLimit || ticksLength, ticksLength);
+  function sample(arr, numItems) {
+    const result = [];
+    const increment = arr.length / numItems;
+    const len = arr.length;
+    let i = 0;
+    for (; i < len; i += increment) {
+      result.push(arr[Math.floor(i)]);
+    }
+    return result;
+  }
+  function getPixelForGridLine(scale, index2, offsetGridLines) {
+    const length = scale.ticks.length;
+    const validIndex2 = Math.min(index2, length - 1);
+    const start = scale._startPixel;
+    const end = scale._endPixel;
+    const epsilon = 1e-6;
+    let lineValue = scale.getPixelForTick(validIndex2);
+    let offset;
+    if (offsetGridLines) {
+      if (length === 1) {
+        offset = Math.max(lineValue - start, end - lineValue);
+      } else if (index2 === 0) {
+        offset = (scale.getPixelForTick(1) - lineValue) / 2;
+      } else {
+        offset = (lineValue - scale.getPixelForTick(validIndex2 - 1)) / 2;
+      }
+      lineValue += validIndex2 < index2 ? offset : -offset;
+      if (lineValue < start - epsilon || lineValue > end + epsilon) {
+        return;
+      }
+    }
+    return lineValue;
+  }
+  function garbageCollect(caches, length) {
+    each(caches, (cache) => {
+      const gc = cache.gc;
+      const gcLen = gc.length / 2;
+      let i;
+      if (gcLen > length) {
+        for (i = 0; i < gcLen; ++i) {
+          delete cache.data[gc[i]];
+        }
+        gc.splice(0, gcLen);
+      }
+    });
+  }
+  function getTickMarkLength(options) {
+    return options.drawTicks ? options.tickLength : 0;
+  }
+  function getTitleHeight(options, fallback) {
+    if (!options.display) {
+      return 0;
+    }
+    const font = toFont(options.font, fallback);
+    const padding = toPadding(options.padding);
+    const lines = isArray(options.text) ? options.text.length : 1;
+    return lines * font.lineHeight + padding.height;
+  }
+  function createScaleContext(parent, scale) {
+    return createContext(parent, {
+      scale,
+      type: "scale"
+    });
+  }
+  function createTickContext(parent, index2, tick) {
+    return createContext(parent, {
+      tick,
+      index: index2,
+      type: "tick"
+    });
+  }
+  function titleAlign(align, position, reverse) {
+    let ret = _toLeftRightCenter(align);
+    if (reverse && position !== "right" || !reverse && position === "right") {
+      ret = reverseAlign(ret);
+    }
+    return ret;
+  }
+  function titleArgs(scale, offset, position, align) {
+    const { top, left, bottom, right, chart } = scale;
+    const { chartArea, scales } = chart;
+    let rotation = 0;
+    let maxWidth, titleX, titleY;
+    const height = bottom - top;
+    const width = right - left;
+    if (scale.isHorizontal()) {
+      titleX = _alignStartEnd(align, left, right);
+      if (isObject(position)) {
+        const positionAxisID = Object.keys(position)[0];
+        const value = position[positionAxisID];
+        titleY = scales[positionAxisID].getPixelForValue(value) + height - offset;
+      } else if (position === "center") {
+        titleY = (chartArea.bottom + chartArea.top) / 2 + height - offset;
+      } else {
+        titleY = offsetFromEdge(scale, position, offset);
+      }
+      maxWidth = right - left;
+    } else {
+      if (isObject(position)) {
+        const positionAxisID = Object.keys(position)[0];
+        const value = position[positionAxisID];
+        titleX = scales[positionAxisID].getPixelForValue(value) - width + offset;
+      } else if (position === "center") {
+        titleX = (chartArea.left + chartArea.right) / 2 - width + offset;
+      } else {
+        titleX = offsetFromEdge(scale, position, offset);
+      }
+      titleY = _alignStartEnd(align, bottom, top);
+      rotation = position === "left" ? -HALF_PI : HALF_PI;
+    }
+    return {
+      titleX,
+      titleY,
+      maxWidth,
+      rotation
+    };
+  }
+  class Scale extends Element {
+    constructor(cfg) {
+      super();
+      this.id = cfg.id;
+      this.type = cfg.type;
+      this.options = void 0;
+      this.ctx = cfg.ctx;
+      this.chart = cfg.chart;
+      this.top = void 0;
+      this.bottom = void 0;
+      this.left = void 0;
+      this.right = void 0;
+      this.width = void 0;
+      this.height = void 0;
+      this._margins = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      };
+      this.maxWidth = void 0;
+      this.maxHeight = void 0;
+      this.paddingTop = void 0;
+      this.paddingBottom = void 0;
+      this.paddingLeft = void 0;
+      this.paddingRight = void 0;
+      this.axis = void 0;
+      this.labelRotation = void 0;
+      this.min = void 0;
+      this.max = void 0;
+      this._range = void 0;
+      this.ticks = [];
+      this._gridLineItems = null;
+      this._labelItems = null;
+      this._labelSizes = null;
+      this._length = 0;
+      this._maxLength = 0;
+      this._longestTextCache = {};
+      this._startPixel = void 0;
+      this._endPixel = void 0;
+      this._reversePixels = false;
+      this._userMax = void 0;
+      this._userMin = void 0;
+      this._suggestedMax = void 0;
+      this._suggestedMin = void 0;
+      this._ticksLength = 0;
+      this._borderValue = 0;
+      this._cache = {};
+      this._dataLimitsCached = false;
+      this.$context = void 0;
+    }
+    init(options) {
+      this.options = options.setContext(this.getContext());
+      this.axis = options.axis;
+      this._userMin = this.parse(options.min);
+      this._userMax = this.parse(options.max);
+      this._suggestedMin = this.parse(options.suggestedMin);
+      this._suggestedMax = this.parse(options.suggestedMax);
+    }
+    parse(raw, index2) {
+      return raw;
+    }
+    getUserBounds() {
+      let { _userMin, _userMax, _suggestedMin, _suggestedMax } = this;
+      _userMin = finiteOrDefault(_userMin, Number.POSITIVE_INFINITY);
+      _userMax = finiteOrDefault(_userMax, Number.NEGATIVE_INFINITY);
+      _suggestedMin = finiteOrDefault(_suggestedMin, Number.POSITIVE_INFINITY);
+      _suggestedMax = finiteOrDefault(_suggestedMax, Number.NEGATIVE_INFINITY);
+      return {
+        min: finiteOrDefault(_userMin, _suggestedMin),
+        max: finiteOrDefault(_userMax, _suggestedMax),
+        minDefined: isNumberFinite(_userMin),
+        maxDefined: isNumberFinite(_userMax)
+      };
+    }
+    getMinMax(canStack) {
+      let { min, max, minDefined, maxDefined } = this.getUserBounds();
+      let range;
+      if (minDefined && maxDefined) {
+        return {
+          min,
+          max
+        };
+      }
+      const metas = this.getMatchingVisibleMetas();
+      for (let i = 0, ilen = metas.length; i < ilen; ++i) {
+        range = metas[i].controller.getMinMax(this, canStack);
+        if (!minDefined) {
+          min = Math.min(min, range.min);
+        }
+        if (!maxDefined) {
+          max = Math.max(max, range.max);
+        }
+      }
+      min = maxDefined && min > max ? max : min;
+      max = minDefined && min > max ? min : max;
+      return {
+        min: finiteOrDefault(min, finiteOrDefault(max, min)),
+        max: finiteOrDefault(max, finiteOrDefault(min, max))
+      };
+    }
+    getPadding() {
+      return {
+        left: this.paddingLeft || 0,
+        top: this.paddingTop || 0,
+        right: this.paddingRight || 0,
+        bottom: this.paddingBottom || 0
+      };
+    }
+    getTicks() {
+      return this.ticks;
+    }
+    getLabels() {
+      const data = this.chart.data;
+      return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels || [];
+    }
+    getLabelItems(chartArea = this.chart.chartArea) {
+      const items = this._labelItems || (this._labelItems = this._computeLabelItems(chartArea));
+      return items;
+    }
+    beforeLayout() {
+      this._cache = {};
+      this._dataLimitsCached = false;
+    }
+    beforeUpdate() {
+      callback(this.options.beforeUpdate, [
+        this
+      ]);
+    }
+    update(maxWidth, maxHeight, margins) {
+      const { beginAtZero, grace, ticks: tickOpts } = this.options;
+      const sampleSize = tickOpts.sampleSize;
+      this.beforeUpdate();
+      this.maxWidth = maxWidth;
+      this.maxHeight = maxHeight;
+      this._margins = margins = Object.assign({
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      }, margins);
+      this.ticks = null;
+      this._labelSizes = null;
+      this._gridLineItems = null;
+      this._labelItems = null;
+      this.beforeSetDimensions();
+      this.setDimensions();
+      this.afterSetDimensions();
+      this._maxLength = this.isHorizontal() ? this.width + margins.left + margins.right : this.height + margins.top + margins.bottom;
+      if (!this._dataLimitsCached) {
+        this.beforeDataLimits();
+        this.determineDataLimits();
+        this.afterDataLimits();
+        this._range = _addGrace(this, grace, beginAtZero);
+        this._dataLimitsCached = true;
+      }
+      this.beforeBuildTicks();
+      this.ticks = this.buildTicks() || [];
+      this.afterBuildTicks();
+      const samplingEnabled = sampleSize < this.ticks.length;
+      this._convertTicksToLabels(samplingEnabled ? sample(this.ticks, sampleSize) : this.ticks);
+      this.configure();
+      this.beforeCalculateLabelRotation();
+      this.calculateLabelRotation();
+      this.afterCalculateLabelRotation();
+      if (tickOpts.display && (tickOpts.autoSkip || tickOpts.source === "auto")) {
+        this.ticks = autoSkip(this, this.ticks);
+        this._labelSizes = null;
+        this.afterAutoSkip();
+      }
+      if (samplingEnabled) {
+        this._convertTicksToLabels(this.ticks);
+      }
+      this.beforeFit();
+      this.fit();
+      this.afterFit();
+      this.afterUpdate();
+    }
+    configure() {
+      let reversePixels = this.options.reverse;
+      let startPixel, endPixel;
+      if (this.isHorizontal()) {
+        startPixel = this.left;
+        endPixel = this.right;
+      } else {
+        startPixel = this.top;
+        endPixel = this.bottom;
+        reversePixels = !reversePixels;
+      }
+      this._startPixel = startPixel;
+      this._endPixel = endPixel;
+      this._reversePixels = reversePixels;
+      this._length = endPixel - startPixel;
+      this._alignToPixels = this.options.alignToPixels;
+    }
+    afterUpdate() {
+      callback(this.options.afterUpdate, [
+        this
+      ]);
+    }
+    beforeSetDimensions() {
+      callback(this.options.beforeSetDimensions, [
+        this
+      ]);
+    }
+    setDimensions() {
+      if (this.isHorizontal()) {
+        this.width = this.maxWidth;
+        this.left = 0;
+        this.right = this.width;
+      } else {
+        this.height = this.maxHeight;
+        this.top = 0;
+        this.bottom = this.height;
+      }
+      this.paddingLeft = 0;
+      this.paddingTop = 0;
+      this.paddingRight = 0;
+      this.paddingBottom = 0;
+    }
+    afterSetDimensions() {
+      callback(this.options.afterSetDimensions, [
+        this
+      ]);
+    }
+    _callHooks(name) {
+      this.chart.notifyPlugins(name, this.getContext());
+      callback(this.options[name], [
+        this
+      ]);
+    }
+    beforeDataLimits() {
+      this._callHooks("beforeDataLimits");
+    }
+    determineDataLimits() {
+    }
+    afterDataLimits() {
+      this._callHooks("afterDataLimits");
+    }
+    beforeBuildTicks() {
+      this._callHooks("beforeBuildTicks");
+    }
+    buildTicks() {
+      return [];
+    }
+    afterBuildTicks() {
+      this._callHooks("afterBuildTicks");
+    }
+    beforeTickToLabelConversion() {
+      callback(this.options.beforeTickToLabelConversion, [
+        this
+      ]);
+    }
+    generateTickLabels(ticks) {
+      const tickOpts = this.options.ticks;
+      let i, ilen, tick;
+      for (i = 0, ilen = ticks.length; i < ilen; i++) {
+        tick = ticks[i];
+        tick.label = callback(tickOpts.callback, [
+          tick.value,
+          i,
+          ticks
+        ], this);
+      }
+    }
+    afterTickToLabelConversion() {
+      callback(this.options.afterTickToLabelConversion, [
+        this
+      ]);
+    }
+    beforeCalculateLabelRotation() {
+      callback(this.options.beforeCalculateLabelRotation, [
+        this
+      ]);
+    }
+    calculateLabelRotation() {
+      const options = this.options;
+      const tickOpts = options.ticks;
+      const numTicks = getTicksLimit(this.ticks.length, options.ticks.maxTicksLimit);
+      const minRotation = tickOpts.minRotation || 0;
+      const maxRotation = tickOpts.maxRotation;
+      let labelRotation = minRotation;
+      let tickWidth, maxHeight, maxLabelDiagonal;
+      if (!this._isVisible() || !tickOpts.display || minRotation >= maxRotation || numTicks <= 1 || !this.isHorizontal()) {
+        this.labelRotation = minRotation;
+        return;
+      }
+      const labelSizes = this._getLabelSizes();
+      const maxLabelWidth = labelSizes.widest.width;
+      const maxLabelHeight = labelSizes.highest.height;
+      const maxWidth = _limitValue(this.chart.width - maxLabelWidth, 0, this.maxWidth);
+      tickWidth = options.offset ? this.maxWidth / numTicks : maxWidth / (numTicks - 1);
+      if (maxLabelWidth + 6 > tickWidth) {
+        tickWidth = maxWidth / (numTicks - (options.offset ? 0.5 : 1));
+        maxHeight = this.maxHeight - getTickMarkLength(options.grid) - tickOpts.padding - getTitleHeight(options.title, this.chart.options.font);
+        maxLabelDiagonal = Math.sqrt(maxLabelWidth * maxLabelWidth + maxLabelHeight * maxLabelHeight);
+        labelRotation = toDegrees(Math.min(Math.asin(_limitValue((labelSizes.highest.height + 6) / tickWidth, -1, 1)), Math.asin(_limitValue(maxHeight / maxLabelDiagonal, -1, 1)) - Math.asin(_limitValue(maxLabelHeight / maxLabelDiagonal, -1, 1))));
+        labelRotation = Math.max(minRotation, Math.min(maxRotation, labelRotation));
+      }
+      this.labelRotation = labelRotation;
+    }
+    afterCalculateLabelRotation() {
+      callback(this.options.afterCalculateLabelRotation, [
+        this
+      ]);
+    }
+    afterAutoSkip() {
+    }
+    beforeFit() {
+      callback(this.options.beforeFit, [
+        this
+      ]);
+    }
+    fit() {
+      const minSize = {
+        width: 0,
+        height: 0
+      };
+      const { chart, options: { ticks: tickOpts, title: titleOpts, grid: gridOpts } } = this;
+      const display = this._isVisible();
+      const isHorizontal = this.isHorizontal();
+      if (display) {
+        const titleHeight = getTitleHeight(titleOpts, chart.options.font);
+        if (isHorizontal) {
+          minSize.width = this.maxWidth;
+          minSize.height = getTickMarkLength(gridOpts) + titleHeight;
+        } else {
+          minSize.height = this.maxHeight;
+          minSize.width = getTickMarkLength(gridOpts) + titleHeight;
+        }
+        if (tickOpts.display && this.ticks.length) {
+          const { first, last, widest, highest } = this._getLabelSizes();
+          const tickPadding = tickOpts.padding * 2;
+          const angleRadians = toRadians(this.labelRotation);
+          const cos = Math.cos(angleRadians);
+          const sin = Math.sin(angleRadians);
+          if (isHorizontal) {
+            const labelHeight = tickOpts.mirror ? 0 : sin * widest.width + cos * highest.height;
+            minSize.height = Math.min(this.maxHeight, minSize.height + labelHeight + tickPadding);
+          } else {
+            const labelWidth = tickOpts.mirror ? 0 : cos * widest.width + sin * highest.height;
+            minSize.width = Math.min(this.maxWidth, minSize.width + labelWidth + tickPadding);
+          }
+          this._calculatePadding(first, last, sin, cos);
+        }
+      }
+      this._handleMargins();
+      if (isHorizontal) {
+        this.width = this._length = chart.width - this._margins.left - this._margins.right;
+        this.height = minSize.height;
+      } else {
+        this.width = minSize.width;
+        this.height = this._length = chart.height - this._margins.top - this._margins.bottom;
+      }
+    }
+    _calculatePadding(first, last, sin, cos) {
+      const { ticks: { align, padding }, position } = this.options;
+      const isRotated = this.labelRotation !== 0;
+      const labelsBelowTicks = position !== "top" && this.axis === "x";
+      if (this.isHorizontal()) {
+        const offsetLeft = this.getPixelForTick(0) - this.left;
+        const offsetRight = this.right - this.getPixelForTick(this.ticks.length - 1);
+        let paddingLeft = 0;
+        let paddingRight = 0;
+        if (isRotated) {
+          if (labelsBelowTicks) {
+            paddingLeft = cos * first.width;
+            paddingRight = sin * last.height;
+          } else {
+            paddingLeft = sin * first.height;
+            paddingRight = cos * last.width;
+          }
+        } else if (align === "start") {
+          paddingRight = last.width;
+        } else if (align === "end") {
+          paddingLeft = first.width;
+        } else if (align !== "inner") {
+          paddingLeft = first.width / 2;
+          paddingRight = last.width / 2;
+        }
+        this.paddingLeft = Math.max((paddingLeft - offsetLeft + padding) * this.width / (this.width - offsetLeft), 0);
+        this.paddingRight = Math.max((paddingRight - offsetRight + padding) * this.width / (this.width - offsetRight), 0);
+      } else {
+        let paddingTop = last.height / 2;
+        let paddingBottom = first.height / 2;
+        if (align === "start") {
+          paddingTop = 0;
+          paddingBottom = first.height;
+        } else if (align === "end") {
+          paddingTop = last.height;
+          paddingBottom = 0;
+        }
+        this.paddingTop = paddingTop + padding;
+        this.paddingBottom = paddingBottom + padding;
+      }
+    }
+    _handleMargins() {
+      if (this._margins) {
+        this._margins.left = Math.max(this.paddingLeft, this._margins.left);
+        this._margins.top = Math.max(this.paddingTop, this._margins.top);
+        this._margins.right = Math.max(this.paddingRight, this._margins.right);
+        this._margins.bottom = Math.max(this.paddingBottom, this._margins.bottom);
+      }
+    }
+    afterFit() {
+      callback(this.options.afterFit, [
+        this
+      ]);
+    }
+    isHorizontal() {
+      const { axis, position } = this.options;
+      return position === "top" || position === "bottom" || axis === "x";
+    }
+    isFullSize() {
+      return this.options.fullSize;
+    }
+    _convertTicksToLabels(ticks) {
+      this.beforeTickToLabelConversion();
+      this.generateTickLabels(ticks);
+      let i, ilen;
+      for (i = 0, ilen = ticks.length; i < ilen; i++) {
+        if (isNullOrUndef(ticks[i].label)) {
+          ticks.splice(i, 1);
+          ilen--;
+          i--;
+        }
+      }
+      this.afterTickToLabelConversion();
+    }
+    _getLabelSizes() {
+      let labelSizes = this._labelSizes;
+      if (!labelSizes) {
+        const sampleSize = this.options.ticks.sampleSize;
+        let ticks = this.ticks;
+        if (sampleSize < ticks.length) {
+          ticks = sample(ticks, sampleSize);
+        }
+        this._labelSizes = labelSizes = this._computeLabelSizes(ticks, ticks.length, this.options.ticks.maxTicksLimit);
+      }
+      return labelSizes;
+    }
+    _computeLabelSizes(ticks, length, maxTicksLimit) {
+      const { ctx, _longestTextCache: caches } = this;
+      const widths = [];
+      const heights = [];
+      const increment = Math.floor(length / getTicksLimit(length, maxTicksLimit));
+      let widestLabelSize = 0;
+      let highestLabelSize = 0;
+      let i, j, jlen, label, tickFont, fontString, cache, lineHeight, width, height, nestedLabel;
+      for (i = 0; i < length; i += increment) {
+        label = ticks[i].label;
+        tickFont = this._resolveTickFontOptions(i);
+        ctx.font = fontString = tickFont.string;
+        cache = caches[fontString] = caches[fontString] || {
+          data: {},
+          gc: []
+        };
+        lineHeight = tickFont.lineHeight;
+        width = height = 0;
+        if (!isNullOrUndef(label) && !isArray(label)) {
+          width = _measureText(ctx, cache.data, cache.gc, width, label);
+          height = lineHeight;
+        } else if (isArray(label)) {
+          for (j = 0, jlen = label.length; j < jlen; ++j) {
+            nestedLabel = label[j];
+            if (!isNullOrUndef(nestedLabel) && !isArray(nestedLabel)) {
+              width = _measureText(ctx, cache.data, cache.gc, width, nestedLabel);
+              height += lineHeight;
+            }
+          }
+        }
+        widths.push(width);
+        heights.push(height);
+        widestLabelSize = Math.max(width, widestLabelSize);
+        highestLabelSize = Math.max(height, highestLabelSize);
+      }
+      garbageCollect(caches, length);
+      const widest = widths.indexOf(widestLabelSize);
+      const highest = heights.indexOf(highestLabelSize);
+      const valueAt = (idx) => ({
+        width: widths[idx] || 0,
+        height: heights[idx] || 0
+      });
+      return {
+        first: valueAt(0),
+        last: valueAt(length - 1),
+        widest: valueAt(widest),
+        highest: valueAt(highest),
+        widths,
+        heights
+      };
+    }
+    getLabelForValue(value) {
+      return value;
+    }
+    getPixelForValue(value, index2) {
+      return NaN;
+    }
+    getValueForPixel(pixel) {
+    }
+    getPixelForTick(index2) {
+      const ticks = this.ticks;
+      if (index2 < 0 || index2 > ticks.length - 1) {
+        return null;
+      }
+      return this.getPixelForValue(ticks[index2].value);
+    }
+    getPixelForDecimal(decimal) {
+      if (this._reversePixels) {
+        decimal = 1 - decimal;
+      }
+      const pixel = this._startPixel + decimal * this._length;
+      return _int16Range(this._alignToPixels ? _alignPixel(this.chart, pixel, 0) : pixel);
+    }
+    getDecimalForPixel(pixel) {
+      const decimal = (pixel - this._startPixel) / this._length;
+      return this._reversePixels ? 1 - decimal : decimal;
+    }
+    getBasePixel() {
+      return this.getPixelForValue(this.getBaseValue());
+    }
+    getBaseValue() {
+      const { min, max } = this;
+      return min < 0 && max < 0 ? max : min > 0 && max > 0 ? min : 0;
+    }
+    getContext(index2) {
+      const ticks = this.ticks || [];
+      if (index2 >= 0 && index2 < ticks.length) {
+        const tick = ticks[index2];
+        return tick.$context || (tick.$context = createTickContext(this.getContext(), index2, tick));
+      }
+      return this.$context || (this.$context = createScaleContext(this.chart.getContext(), this));
+    }
+    _tickSize() {
+      const optionTicks = this.options.ticks;
+      const rot = toRadians(this.labelRotation);
+      const cos = Math.abs(Math.cos(rot));
+      const sin = Math.abs(Math.sin(rot));
+      const labelSizes = this._getLabelSizes();
+      const padding = optionTicks.autoSkipPadding || 0;
+      const w = labelSizes ? labelSizes.widest.width + padding : 0;
+      const h = labelSizes ? labelSizes.highest.height + padding : 0;
+      return this.isHorizontal() ? h * cos > w * sin ? w / cos : h / sin : h * sin < w * cos ? h / cos : w / sin;
+    }
+    _isVisible() {
+      const display = this.options.display;
+      if (display !== "auto") {
+        return !!display;
+      }
+      return this.getMatchingVisibleMetas().length > 0;
+    }
+    _computeGridLineItems(chartArea) {
+      const axis = this.axis;
+      const chart = this.chart;
+      const options = this.options;
+      const { grid, position, border } = options;
+      const offset = grid.offset;
+      const isHorizontal = this.isHorizontal();
+      const ticks = this.ticks;
+      const ticksLength = ticks.length + (offset ? 1 : 0);
+      const tl = getTickMarkLength(grid);
+      const items = [];
+      const borderOpts = border.setContext(this.getContext());
+      const axisWidth = borderOpts.display ? borderOpts.width : 0;
+      const axisHalfWidth = axisWidth / 2;
+      const alignBorderValue = function(pixel) {
+        return _alignPixel(chart, pixel, axisWidth);
+      };
+      let borderValue, i, lineValue, alignedLineValue;
+      let tx1, ty1, tx2, ty2, x1, y1, x2, y2;
+      if (position === "top") {
+        borderValue = alignBorderValue(this.bottom);
+        ty1 = this.bottom - tl;
+        ty2 = borderValue - axisHalfWidth;
+        y1 = alignBorderValue(chartArea.top) + axisHalfWidth;
+        y2 = chartArea.bottom;
+      } else if (position === "bottom") {
+        borderValue = alignBorderValue(this.top);
+        y1 = chartArea.top;
+        y2 = alignBorderValue(chartArea.bottom) - axisHalfWidth;
+        ty1 = borderValue + axisHalfWidth;
+        ty2 = this.top + tl;
+      } else if (position === "left") {
+        borderValue = alignBorderValue(this.right);
+        tx1 = this.right - tl;
+        tx2 = borderValue - axisHalfWidth;
+        x1 = alignBorderValue(chartArea.left) + axisHalfWidth;
+        x2 = chartArea.right;
+      } else if (position === "right") {
+        borderValue = alignBorderValue(this.left);
+        x1 = chartArea.left;
+        x2 = alignBorderValue(chartArea.right) - axisHalfWidth;
+        tx1 = borderValue + axisHalfWidth;
+        tx2 = this.left + tl;
+      } else if (axis === "x") {
+        if (position === "center") {
+          borderValue = alignBorderValue((chartArea.top + chartArea.bottom) / 2 + 0.5);
+        } else if (isObject(position)) {
+          const positionAxisID = Object.keys(position)[0];
+          const value = position[positionAxisID];
+          borderValue = alignBorderValue(this.chart.scales[positionAxisID].getPixelForValue(value));
+        }
+        y1 = chartArea.top;
+        y2 = chartArea.bottom;
+        ty1 = borderValue + axisHalfWidth;
+        ty2 = ty1 + tl;
+      } else if (axis === "y") {
+        if (position === "center") {
+          borderValue = alignBorderValue((chartArea.left + chartArea.right) / 2);
+        } else if (isObject(position)) {
+          const positionAxisID = Object.keys(position)[0];
+          const value = position[positionAxisID];
+          borderValue = alignBorderValue(this.chart.scales[positionAxisID].getPixelForValue(value));
+        }
+        tx1 = borderValue - axisHalfWidth;
+        tx2 = tx1 - tl;
+        x1 = chartArea.left;
+        x2 = chartArea.right;
+      }
+      const limit = valueOrDefault(options.ticks.maxTicksLimit, ticksLength);
+      const step = Math.max(1, Math.ceil(ticksLength / limit));
+      for (i = 0; i < ticksLength; i += step) {
+        const context = this.getContext(i);
+        const optsAtIndex = grid.setContext(context);
+        const optsAtIndexBorder = border.setContext(context);
+        const lineWidth = optsAtIndex.lineWidth;
+        const lineColor = optsAtIndex.color;
+        const borderDash = optsAtIndexBorder.dash || [];
+        const borderDashOffset = optsAtIndexBorder.dashOffset;
+        const tickWidth = optsAtIndex.tickWidth;
+        const tickColor = optsAtIndex.tickColor;
+        const tickBorderDash = optsAtIndex.tickBorderDash || [];
+        const tickBorderDashOffset = optsAtIndex.tickBorderDashOffset;
+        lineValue = getPixelForGridLine(this, i, offset);
+        if (lineValue === void 0) {
+          continue;
+        }
+        alignedLineValue = _alignPixel(chart, lineValue, lineWidth);
+        if (isHorizontal) {
+          tx1 = tx2 = x1 = x2 = alignedLineValue;
+        } else {
+          ty1 = ty2 = y1 = y2 = alignedLineValue;
+        }
+        items.push({
+          tx1,
+          ty1,
+          tx2,
+          ty2,
+          x1,
+          y1,
+          x2,
+          y2,
+          width: lineWidth,
+          color: lineColor,
+          borderDash,
+          borderDashOffset,
+          tickWidth,
+          tickColor,
+          tickBorderDash,
+          tickBorderDashOffset
+        });
+      }
+      this._ticksLength = ticksLength;
+      this._borderValue = borderValue;
+      return items;
+    }
+    _computeLabelItems(chartArea) {
+      const axis = this.axis;
+      const options = this.options;
+      const { position, ticks: optionTicks } = options;
+      const isHorizontal = this.isHorizontal();
+      const ticks = this.ticks;
+      const { align, crossAlign, padding, mirror } = optionTicks;
+      const tl = getTickMarkLength(options.grid);
+      const tickAndPadding = tl + padding;
+      const hTickAndPadding = mirror ? -padding : tickAndPadding;
+      const rotation = -toRadians(this.labelRotation);
+      const items = [];
+      let i, ilen, tick, label, x, y, textAlign, pixel, font, lineHeight, lineCount, textOffset;
+      let textBaseline = "middle";
+      if (position === "top") {
+        y = this.bottom - hTickAndPadding;
+        textAlign = this._getXAxisLabelAlignment();
+      } else if (position === "bottom") {
+        y = this.top + hTickAndPadding;
+        textAlign = this._getXAxisLabelAlignment();
+      } else if (position === "left") {
+        const ret = this._getYAxisLabelAlignment(tl);
+        textAlign = ret.textAlign;
+        x = ret.x;
+      } else if (position === "right") {
+        const ret = this._getYAxisLabelAlignment(tl);
+        textAlign = ret.textAlign;
+        x = ret.x;
+      } else if (axis === "x") {
+        if (position === "center") {
+          y = (chartArea.top + chartArea.bottom) / 2 + tickAndPadding;
+        } else if (isObject(position)) {
+          const positionAxisID = Object.keys(position)[0];
+          const value = position[positionAxisID];
+          y = this.chart.scales[positionAxisID].getPixelForValue(value) + tickAndPadding;
+        }
+        textAlign = this._getXAxisLabelAlignment();
+      } else if (axis === "y") {
+        if (position === "center") {
+          x = (chartArea.left + chartArea.right) / 2 - tickAndPadding;
+        } else if (isObject(position)) {
+          const positionAxisID = Object.keys(position)[0];
+          const value = position[positionAxisID];
+          x = this.chart.scales[positionAxisID].getPixelForValue(value);
+        }
+        textAlign = this._getYAxisLabelAlignment(tl).textAlign;
+      }
+      if (axis === "y") {
+        if (align === "start") {
+          textBaseline = "top";
+        } else if (align === "end") {
+          textBaseline = "bottom";
+        }
+      }
+      const labelSizes = this._getLabelSizes();
+      for (i = 0, ilen = ticks.length; i < ilen; ++i) {
+        tick = ticks[i];
+        label = tick.label;
+        const optsAtIndex = optionTicks.setContext(this.getContext(i));
+        pixel = this.getPixelForTick(i) + optionTicks.labelOffset;
+        font = this._resolveTickFontOptions(i);
+        lineHeight = font.lineHeight;
+        lineCount = isArray(label) ? label.length : 1;
+        const halfCount = lineCount / 2;
+        const color2 = optsAtIndex.color;
+        const strokeColor = optsAtIndex.textStrokeColor;
+        const strokeWidth = optsAtIndex.textStrokeWidth;
+        let tickTextAlign = textAlign;
+        if (isHorizontal) {
+          x = pixel;
+          if (textAlign === "inner") {
+            if (i === ilen - 1) {
+              tickTextAlign = !this.options.reverse ? "right" : "left";
+            } else if (i === 0) {
+              tickTextAlign = !this.options.reverse ? "left" : "right";
+            } else {
+              tickTextAlign = "center";
+            }
+          }
+          if (position === "top") {
+            if (crossAlign === "near" || rotation !== 0) {
+              textOffset = -lineCount * lineHeight + lineHeight / 2;
+            } else if (crossAlign === "center") {
+              textOffset = -labelSizes.highest.height / 2 - halfCount * lineHeight + lineHeight;
+            } else {
+              textOffset = -labelSizes.highest.height + lineHeight / 2;
+            }
+          } else {
+            if (crossAlign === "near" || rotation !== 0) {
+              textOffset = lineHeight / 2;
+            } else if (crossAlign === "center") {
+              textOffset = labelSizes.highest.height / 2 - halfCount * lineHeight;
+            } else {
+              textOffset = labelSizes.highest.height - lineCount * lineHeight;
+            }
+          }
+          if (mirror) {
+            textOffset *= -1;
+          }
+          if (rotation !== 0 && !optsAtIndex.showLabelBackdrop) {
+            x += lineHeight / 2 * Math.sin(rotation);
+          }
+        } else {
+          y = pixel;
+          textOffset = (1 - lineCount) * lineHeight / 2;
+        }
+        let backdrop;
+        if (optsAtIndex.showLabelBackdrop) {
+          const labelPadding = toPadding(optsAtIndex.backdropPadding);
+          const height = labelSizes.heights[i];
+          const width = labelSizes.widths[i];
+          let top = textOffset - labelPadding.top;
+          let left = 0 - labelPadding.left;
+          switch (textBaseline) {
+            case "middle":
+              top -= height / 2;
+              break;
+            case "bottom":
+              top -= height;
+              break;
+          }
+          switch (textAlign) {
+            case "center":
+              left -= width / 2;
+              break;
+            case "right":
+              left -= width;
+              break;
+            case "inner":
+              if (i === ilen - 1) {
+                left -= width;
+              } else if (i > 0) {
+                left -= width / 2;
+              }
+              break;
+          }
+          backdrop = {
+            left,
+            top,
+            width: width + labelPadding.width,
+            height: height + labelPadding.height,
+            color: optsAtIndex.backdropColor
+          };
+        }
+        items.push({
+          label,
+          font,
+          textOffset,
+          options: {
+            rotation,
+            color: color2,
+            strokeColor,
+            strokeWidth,
+            textAlign: tickTextAlign,
+            textBaseline,
+            translation: [
+              x,
+              y
+            ],
+            backdrop
+          }
+        });
+      }
+      return items;
+    }
+    _getXAxisLabelAlignment() {
+      const { position, ticks } = this.options;
+      const rotation = -toRadians(this.labelRotation);
+      if (rotation) {
+        return position === "top" ? "left" : "right";
+      }
+      let align = "center";
+      if (ticks.align === "start") {
+        align = "left";
+      } else if (ticks.align === "end") {
+        align = "right";
+      } else if (ticks.align === "inner") {
+        align = "inner";
+      }
+      return align;
+    }
+    _getYAxisLabelAlignment(tl) {
+      const { position, ticks: { crossAlign, mirror, padding } } = this.options;
+      const labelSizes = this._getLabelSizes();
+      const tickAndPadding = tl + padding;
+      const widest = labelSizes.widest.width;
+      let textAlign;
+      let x;
+      if (position === "left") {
+        if (mirror) {
+          x = this.right + padding;
+          if (crossAlign === "near") {
+            textAlign = "left";
+          } else if (crossAlign === "center") {
+            textAlign = "center";
+            x += widest / 2;
+          } else {
+            textAlign = "right";
+            x += widest;
+          }
+        } else {
+          x = this.right - tickAndPadding;
+          if (crossAlign === "near") {
+            textAlign = "right";
+          } else if (crossAlign === "center") {
+            textAlign = "center";
+            x -= widest / 2;
+          } else {
+            textAlign = "left";
+            x = this.left;
+          }
+        }
+      } else if (position === "right") {
+        if (mirror) {
+          x = this.left + padding;
+          if (crossAlign === "near") {
+            textAlign = "right";
+          } else if (crossAlign === "center") {
+            textAlign = "center";
+            x -= widest / 2;
+          } else {
+            textAlign = "left";
+            x -= widest;
+          }
+        } else {
+          x = this.left + tickAndPadding;
+          if (crossAlign === "near") {
+            textAlign = "left";
+          } else if (crossAlign === "center") {
+            textAlign = "center";
+            x += widest / 2;
+          } else {
+            textAlign = "right";
+            x = this.right;
+          }
+        }
+      } else {
+        textAlign = "right";
+      }
+      return {
+        textAlign,
+        x
+      };
+    }
+    _computeLabelArea() {
+      if (this.options.ticks.mirror) {
+        return;
+      }
+      const chart = this.chart;
+      const position = this.options.position;
+      if (position === "left" || position === "right") {
+        return {
+          top: 0,
+          left: this.left,
+          bottom: chart.height,
+          right: this.right
+        };
+      }
+      if (position === "top" || position === "bottom") {
+        return {
+          top: this.top,
+          left: 0,
+          bottom: this.bottom,
+          right: chart.width
+        };
+      }
+    }
+    drawBackground() {
+      const { ctx, options: { backgroundColor }, left, top, width, height } = this;
+      if (backgroundColor) {
+        ctx.save();
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(left, top, width, height);
+        ctx.restore();
+      }
+    }
+    getLineWidthForValue(value) {
+      const grid = this.options.grid;
+      if (!this._isVisible() || !grid.display) {
+        return 0;
+      }
+      const ticks = this.ticks;
+      const index2 = ticks.findIndex((t) => t.value === value);
+      if (index2 >= 0) {
+        const opts = grid.setContext(this.getContext(index2));
+        return opts.lineWidth;
+      }
+      return 0;
+    }
+    drawGrid(chartArea) {
+      const grid = this.options.grid;
+      const ctx = this.ctx;
+      const items = this._gridLineItems || (this._gridLineItems = this._computeGridLineItems(chartArea));
+      let i, ilen;
+      const drawLine = (p1, p2, style) => {
+        if (!style.width || !style.color) {
+          return;
+        }
+        ctx.save();
+        ctx.lineWidth = style.width;
+        ctx.strokeStyle = style.color;
+        ctx.setLineDash(style.borderDash || []);
+        ctx.lineDashOffset = style.borderDashOffset;
+        ctx.beginPath();
+        ctx.moveTo(p1.x, p1.y);
+        ctx.lineTo(p2.x, p2.y);
+        ctx.stroke();
+        ctx.restore();
+      };
+      if (grid.display) {
+        for (i = 0, ilen = items.length; i < ilen; ++i) {
+          const item = items[i];
+          if (grid.drawOnChartArea) {
+            drawLine({
+              x: item.x1,
+              y: item.y1
+            }, {
+              x: item.x2,
+              y: item.y2
+            }, item);
+          }
+          if (grid.drawTicks) {
+            drawLine({
+              x: item.tx1,
+              y: item.ty1
+            }, {
+              x: item.tx2,
+              y: item.ty2
+            }, {
+              color: item.tickColor,
+              width: item.tickWidth,
+              borderDash: item.tickBorderDash,
+              borderDashOffset: item.tickBorderDashOffset
+            });
+          }
+        }
+      }
+    }
+    drawBorder() {
+      const { chart, ctx, options: { border, grid } } = this;
+      const borderOpts = border.setContext(this.getContext());
+      const axisWidth = border.display ? borderOpts.width : 0;
+      if (!axisWidth) {
+        return;
+      }
+      const lastLineWidth = grid.setContext(this.getContext(0)).lineWidth;
+      const borderValue = this._borderValue;
+      let x1, x2, y1, y2;
+      if (this.isHorizontal()) {
+        x1 = _alignPixel(chart, this.left, axisWidth) - axisWidth / 2;
+        x2 = _alignPixel(chart, this.right, lastLineWidth) + lastLineWidth / 2;
+        y1 = y2 = borderValue;
+      } else {
+        y1 = _alignPixel(chart, this.top, axisWidth) - axisWidth / 2;
+        y2 = _alignPixel(chart, this.bottom, lastLineWidth) + lastLineWidth / 2;
+        x1 = x2 = borderValue;
+      }
+      ctx.save();
+      ctx.lineWidth = borderOpts.width;
+      ctx.strokeStyle = borderOpts.color;
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+      ctx.restore();
+    }
+    drawLabels(chartArea) {
+      const optionTicks = this.options.ticks;
+      if (!optionTicks.display) {
+        return;
+      }
+      const ctx = this.ctx;
+      const area = this._computeLabelArea();
+      if (area) {
+        clipArea(ctx, area);
+      }
+      const items = this.getLabelItems(chartArea);
+      for (const item of items) {
+        const renderTextOptions = item.options;
+        const tickFont = item.font;
+        const label = item.label;
+        const y = item.textOffset;
+        renderText(ctx, label, 0, y, tickFont, renderTextOptions);
+      }
+      if (area) {
+        unclipArea(ctx);
+      }
+    }
+    drawTitle() {
+      const { ctx, options: { position, title, reverse } } = this;
+      if (!title.display) {
+        return;
+      }
+      const font = toFont(title.font);
+      const padding = toPadding(title.padding);
+      const align = title.align;
+      let offset = font.lineHeight / 2;
+      if (position === "bottom" || position === "center" || isObject(position)) {
+        offset += padding.bottom;
+        if (isArray(title.text)) {
+          offset += font.lineHeight * (title.text.length - 1);
+        }
+      } else {
+        offset += padding.top;
+      }
+      const { titleX, titleY, maxWidth, rotation } = titleArgs(this, offset, position, align);
+      renderText(ctx, title.text, 0, 0, font, {
+        color: title.color,
+        maxWidth,
+        rotation,
+        textAlign: titleAlign(align, position, reverse),
+        textBaseline: "middle",
+        translation: [
+          titleX,
+          titleY
+        ]
+      });
+    }
+    draw(chartArea) {
+      if (!this._isVisible()) {
+        return;
+      }
+      this.drawBackground();
+      this.drawGrid(chartArea);
+      this.drawBorder();
+      this.drawTitle();
+      this.drawLabels(chartArea);
+    }
+    _layers() {
+      const opts = this.options;
+      const tz = opts.ticks && opts.ticks.z || 0;
+      const gz = valueOrDefault(opts.grid && opts.grid.z, -1);
+      const bz = valueOrDefault(opts.border && opts.border.z, 0);
+      if (!this._isVisible() || this.draw !== Scale.prototype.draw) {
+        return [
+          {
+            z: tz,
+            draw: (chartArea) => {
+              this.draw(chartArea);
+            }
+          }
+        ];
+      }
+      return [
+        {
+          z: gz,
+          draw: (chartArea) => {
+            this.drawBackground();
+            this.drawGrid(chartArea);
+            this.drawTitle();
+          }
+        },
+        {
+          z: bz,
+          draw: () => {
+            this.drawBorder();
+          }
+        },
+        {
+          z: tz,
+          draw: (chartArea) => {
+            this.drawLabels(chartArea);
+          }
+        }
+      ];
+    }
+    getMatchingVisibleMetas(type) {
+      const metas = this.chart.getSortedVisibleDatasetMetas();
+      const axisID = this.axis + "AxisID";
+      const result = [];
+      let i, ilen;
+      for (i = 0, ilen = metas.length; i < ilen; ++i) {
+        const meta = metas[i];
+        if (meta[axisID] === this.id && (!type || meta.type === type)) {
+          result.push(meta);
+        }
+      }
+      return result;
+    }
+    _resolveTickFontOptions(index2) {
+      const opts = this.options.ticks.setContext(this.getContext(index2));
+      return toFont(opts.font);
+    }
+    _maxDigits() {
+      const fontSize = this._resolveTickFontOptions(0).lineHeight;
+      return (this.isHorizontal() ? this.width : this.height) / fontSize;
+    }
+  }
+  class TypedRegistry {
+    constructor(type, scope, override) {
+      this.type = type;
+      this.scope = scope;
+      this.override = override;
+      this.items = /* @__PURE__ */ Object.create(null);
+    }
+    isForType(type) {
+      return Object.prototype.isPrototypeOf.call(this.type.prototype, type.prototype);
+    }
+    register(item) {
+      const proto = Object.getPrototypeOf(item);
+      let parentScope;
+      if (isIChartComponent(proto)) {
+        parentScope = this.register(proto);
+      }
+      const items = this.items;
+      const id = item.id;
+      const scope = this.scope + "." + id;
+      if (!id) {
+        throw new Error("class does not have id: " + item);
+      }
+      if (id in items) {
+        return scope;
+      }
+      items[id] = item;
+      registerDefaults(item, scope, parentScope);
+      if (this.override) {
+        defaults.override(item.id, item.overrides);
+      }
+      return scope;
+    }
+    get(id) {
+      return this.items[id];
+    }
+    unregister(item) {
+      const items = this.items;
+      const id = item.id;
+      const scope = this.scope;
+      if (id in items) {
+        delete items[id];
+      }
+      if (scope && id in defaults[scope]) {
+        delete defaults[scope][id];
+        if (this.override) {
+          delete overrides[id];
+        }
+      }
+    }
+  }
+  function registerDefaults(item, scope, parentScope) {
+    const itemDefaults = merge(/* @__PURE__ */ Object.create(null), [
+      parentScope ? defaults.get(parentScope) : {},
+      defaults.get(scope),
+      item.defaults
+    ]);
+    defaults.set(scope, itemDefaults);
+    if (item.defaultRoutes) {
+      routeDefaults(scope, item.defaultRoutes);
+    }
+    if (item.descriptors) {
+      defaults.describe(scope, item.descriptors);
+    }
+  }
+  function routeDefaults(scope, routes) {
+    Object.keys(routes).forEach((property) => {
+      const propertyParts = property.split(".");
+      const sourceName = propertyParts.pop();
+      const sourceScope = [
+        scope
+      ].concat(propertyParts).join(".");
+      const parts = routes[property].split(".");
+      const targetName = parts.pop();
+      const targetScope = parts.join(".");
+      defaults.route(sourceScope, sourceName, targetScope, targetName);
+    });
+  }
+  function isIChartComponent(proto) {
+    return "id" in proto && "defaults" in proto;
+  }
+  class Registry {
+    constructor() {
+      this.controllers = new TypedRegistry(DatasetController, "datasets", true);
+      this.elements = new TypedRegistry(Element, "elements");
+      this.plugins = new TypedRegistry(Object, "plugins");
+      this.scales = new TypedRegistry(Scale, "scales");
+      this._typedRegistries = [
+        this.controllers,
+        this.scales,
+        this.elements
+      ];
+    }
+    add(...args) {
+      this._each("register", args);
+    }
+    remove(...args) {
+      this._each("unregister", args);
+    }
+    addControllers(...args) {
+      this._each("register", args, this.controllers);
+    }
+    addElements(...args) {
+      this._each("register", args, this.elements);
+    }
+    addPlugins(...args) {
+      this._each("register", args, this.plugins);
+    }
+    addScales(...args) {
+      this._each("register", args, this.scales);
+    }
+    getController(id) {
+      return this._get(id, this.controllers, "controller");
+    }
+    getElement(id) {
+      return this._get(id, this.elements, "element");
+    }
+    getPlugin(id) {
+      return this._get(id, this.plugins, "plugin");
+    }
+    getScale(id) {
+      return this._get(id, this.scales, "scale");
+    }
+    removeControllers(...args) {
+      this._each("unregister", args, this.controllers);
+    }
+    removeElements(...args) {
+      this._each("unregister", args, this.elements);
+    }
+    removePlugins(...args) {
+      this._each("unregister", args, this.plugins);
+    }
+    removeScales(...args) {
+      this._each("unregister", args, this.scales);
+    }
+    _each(method, args, typedRegistry) {
+      [
+        ...args
+      ].forEach((arg) => {
+        const reg = typedRegistry || this._getRegistryForType(arg);
+        if (typedRegistry || reg.isForType(arg) || reg === this.plugins && arg.id) {
+          this._exec(method, reg, arg);
+        } else {
+          each(arg, (item) => {
+            const itemReg = typedRegistry || this._getRegistryForType(item);
+            this._exec(method, itemReg, item);
+          });
+        }
+      });
+    }
+    _exec(method, registry2, component) {
+      const camelMethod = _capitalize(method);
+      callback(component["before" + camelMethod], [], component);
+      registry2[method](component);
+      callback(component["after" + camelMethod], [], component);
+    }
+    _getRegistryForType(type) {
+      for (let i = 0; i < this._typedRegistries.length; i++) {
+        const reg = this._typedRegistries[i];
+        if (reg.isForType(type)) {
+          return reg;
+        }
+      }
+      return this.plugins;
+    }
+    _get(id, typedRegistry, type) {
+      const item = typedRegistry.get(id);
+      if (item === void 0) {
+        throw new Error('"' + id + '" is not a registered ' + type + ".");
+      }
+      return item;
+    }
+  }
+  var registry = /* @__PURE__ */ new Registry();
+  class PluginService {
+    constructor() {
+      this._init = void 0;
+    }
+    notify(chart, hook, args, filter) {
+      if (hook === "beforeInit") {
+        this._init = this._createDescriptors(chart, true);
+        this._notify(this._init, chart, "install");
+      }
+      if (this._init === void 0) {
+        return;
+      }
+      const descriptors2 = filter ? this._descriptors(chart).filter(filter) : this._descriptors(chart);
+      const result = this._notify(descriptors2, chart, hook, args);
+      if (hook === "afterDestroy") {
+        this._notify(descriptors2, chart, "stop");
+        this._notify(this._init, chart, "uninstall");
+        this._init = void 0;
+      }
+      return result;
+    }
+    _notify(descriptors2, chart, hook, args) {
+      args = args || {};
+      for (const descriptor of descriptors2) {
+        const plugin = descriptor.plugin;
+        const method = plugin[hook];
+        const params = [
+          chart,
+          args,
+          descriptor.options
+        ];
+        if (callback(method, params, plugin) === false && args.cancelable) {
+          return false;
+        }
+      }
+      return true;
+    }
+    invalidate() {
+      if (!isNullOrUndef(this._cache)) {
+        this._oldCache = this._cache;
+        this._cache = void 0;
+      }
+    }
+    _descriptors(chart) {
+      if (this._cache) {
+        return this._cache;
+      }
+      const descriptors2 = this._cache = this._createDescriptors(chart);
+      this._notifyStateChanges(chart);
+      return descriptors2;
+    }
+    _createDescriptors(chart, all) {
+      const config = chart && chart.config;
+      const options = valueOrDefault(config.options && config.options.plugins, {});
+      const plugins = allPlugins(config);
+      return options === false && !all ? [] : createDescriptors(chart, plugins, options, all);
+    }
+    _notifyStateChanges(chart) {
+      const previousDescriptors = this._oldCache || [];
+      const descriptors2 = this._cache;
+      const diff = (a, b) => a.filter((x) => !b.some((y) => x.plugin.id === y.plugin.id));
+      this._notify(diff(previousDescriptors, descriptors2), chart, "stop");
+      this._notify(diff(descriptors2, previousDescriptors), chart, "start");
+    }
+  }
+  function allPlugins(config) {
+    const localIds = {};
+    const plugins = [];
+    const keys = Object.keys(registry.plugins.items);
+    for (let i = 0; i < keys.length; i++) {
+      plugins.push(registry.getPlugin(keys[i]));
+    }
+    const local = config.plugins || [];
+    for (let i = 0; i < local.length; i++) {
+      const plugin = local[i];
+      if (plugins.indexOf(plugin) === -1) {
+        plugins.push(plugin);
+        localIds[plugin.id] = true;
+      }
+    }
+    return {
+      plugins,
+      localIds
+    };
+  }
+  function getOpts(options, all) {
+    if (!all && options === false) {
+      return null;
+    }
+    if (options === true) {
+      return {};
+    }
+    return options;
+  }
+  function createDescriptors(chart, { plugins, localIds }, options, all) {
+    const result = [];
+    const context = chart.getContext();
+    for (const plugin of plugins) {
+      const id = plugin.id;
+      const opts = getOpts(options[id], all);
+      if (opts === null) {
+        continue;
+      }
+      result.push({
+        plugin,
+        options: pluginOpts(chart.config, {
+          plugin,
+          local: localIds[id]
+        }, opts, context)
+      });
+    }
+    return result;
+  }
+  function pluginOpts(config, { plugin, local }, opts, context) {
+    const keys = config.pluginScopeKeys(plugin);
+    const scopes = config.getOptionScopes(opts, keys);
+    if (local && plugin.defaults) {
+      scopes.push(plugin.defaults);
+    }
+    return config.createResolver(scopes, context, [
+      ""
+    ], {
+      scriptable: false,
+      indexable: false,
+      allKeys: true
+    });
+  }
+  function getIndexAxis(type, options) {
+    const datasetDefaults = defaults.datasets[type] || {};
+    const datasetOptions = (options.datasets || {})[type] || {};
+    return datasetOptions.indexAxis || options.indexAxis || datasetDefaults.indexAxis || "x";
+  }
+  function getAxisFromDefaultScaleID(id, indexAxis) {
+    let axis = id;
+    if (id === "_index_") {
+      axis = indexAxis;
+    } else if (id === "_value_") {
+      axis = indexAxis === "x" ? "y" : "x";
+    }
+    return axis;
+  }
+  function getDefaultScaleIDFromAxis(axis, indexAxis) {
+    return axis === indexAxis ? "_index_" : "_value_";
+  }
+  function idMatchesAxis(id) {
+    if (id === "x" || id === "y" || id === "r") {
+      return id;
+    }
+  }
+  function axisFromPosition(position) {
+    if (position === "top" || position === "bottom") {
+      return "x";
+    }
+    if (position === "left" || position === "right") {
+      return "y";
+    }
+  }
+  function determineAxis(id, ...scaleOptions) {
+    if (idMatchesAxis(id)) {
+      return id;
+    }
+    for (const opts of scaleOptions) {
+      const axis = opts.axis || axisFromPosition(opts.position) || id.length > 1 && idMatchesAxis(id[0].toLowerCase());
+      if (axis) {
+        return axis;
+      }
+    }
+    throw new Error(`Cannot determine type of '${id}' axis. Please provide 'axis' or 'position' option.`);
+  }
+  function getAxisFromDataset(id, axis, dataset) {
+    if (dataset[axis + "AxisID"] === id) {
+      return {
+        axis
+      };
+    }
+  }
+  function retrieveAxisFromDatasets(id, config) {
+    if (config.data && config.data.datasets) {
+      const boundDs = config.data.datasets.filter((d) => d.xAxisID === id || d.yAxisID === id);
+      if (boundDs.length) {
+        return getAxisFromDataset(id, "x", boundDs[0]) || getAxisFromDataset(id, "y", boundDs[0]);
+      }
+    }
+    return {};
+  }
+  function mergeScaleConfig(config, options) {
+    const chartDefaults = overrides[config.type] || {
+      scales: {}
+    };
+    const configScales = options.scales || {};
+    const chartIndexAxis = getIndexAxis(config.type, options);
+    const scales = /* @__PURE__ */ Object.create(null);
+    Object.keys(configScales).forEach((id) => {
+      const scaleConf = configScales[id];
+      if (!isObject(scaleConf)) {
+        return console.error(`Invalid scale configuration for scale: ${id}`);
+      }
+      if (scaleConf._proxy) {
+        return console.warn(`Ignoring resolver passed as options for scale: ${id}`);
+      }
+      const axis = determineAxis(id, scaleConf, retrieveAxisFromDatasets(id, config), defaults.scales[scaleConf.type]);
+      const defaultId = getDefaultScaleIDFromAxis(axis, chartIndexAxis);
+      const defaultScaleOptions = chartDefaults.scales || {};
+      scales[id] = mergeIf(/* @__PURE__ */ Object.create(null), [
+        {
+          axis
+        },
+        scaleConf,
+        defaultScaleOptions[axis],
+        defaultScaleOptions[defaultId]
+      ]);
+    });
+    config.data.datasets.forEach((dataset) => {
+      const type = dataset.type || config.type;
+      const indexAxis = dataset.indexAxis || getIndexAxis(type, options);
+      const datasetDefaults = overrides[type] || {};
+      const defaultScaleOptions = datasetDefaults.scales || {};
+      Object.keys(defaultScaleOptions).forEach((defaultID) => {
+        const axis = getAxisFromDefaultScaleID(defaultID, indexAxis);
+        const id = dataset[axis + "AxisID"] || axis;
+        scales[id] = scales[id] || /* @__PURE__ */ Object.create(null);
+        mergeIf(scales[id], [
+          {
+            axis
+          },
+          configScales[id],
+          defaultScaleOptions[defaultID]
+        ]);
+      });
+    });
+    Object.keys(scales).forEach((key) => {
+      const scale = scales[key];
+      mergeIf(scale, [
+        defaults.scales[scale.type],
+        defaults.scale
+      ]);
+    });
+    return scales;
+  }
+  function initOptions(config) {
+    const options = config.options || (config.options = {});
+    options.plugins = valueOrDefault(options.plugins, {});
+    options.scales = mergeScaleConfig(config, options);
+  }
+  function initData(data) {
+    data = data || {};
+    data.datasets = data.datasets || [];
+    data.labels = data.labels || [];
+    return data;
+  }
+  function initConfig(config) {
+    config = config || {};
+    config.data = initData(config.data);
+    initOptions(config);
+    return config;
+  }
+  const keyCache = /* @__PURE__ */ new Map();
+  const keysCached = /* @__PURE__ */ new Set();
+  function cachedKeys(cacheKey, generate) {
+    let keys = keyCache.get(cacheKey);
+    if (!keys) {
+      keys = generate();
+      keyCache.set(cacheKey, keys);
+      keysCached.add(keys);
+    }
+    return keys;
+  }
+  const addIfFound = (set2, obj, key) => {
+    const opts = resolveObjectKey(obj, key);
+    if (opts !== void 0) {
+      set2.add(opts);
+    }
+  };
+  class Config {
+    constructor(config) {
+      this._config = initConfig(config);
+      this._scopeCache = /* @__PURE__ */ new Map();
+      this._resolverCache = /* @__PURE__ */ new Map();
+    }
+    get platform() {
+      return this._config.platform;
+    }
+    get type() {
+      return this._config.type;
+    }
+    set type(type) {
+      this._config.type = type;
+    }
+    get data() {
+      return this._config.data;
+    }
+    set data(data) {
+      this._config.data = initData(data);
+    }
+    get options() {
+      return this._config.options;
+    }
+    set options(options) {
+      this._config.options = options;
+    }
+    get plugins() {
+      return this._config.plugins;
+    }
+    update() {
+      const config = this._config;
+      this.clearCache();
+      initOptions(config);
+    }
+    clearCache() {
+      this._scopeCache.clear();
+      this._resolverCache.clear();
+    }
+    datasetScopeKeys(datasetType) {
+      return cachedKeys(datasetType, () => [
+        [
+          `datasets.${datasetType}`,
+          ""
+        ]
+      ]);
+    }
+    datasetAnimationScopeKeys(datasetType, transition) {
+      return cachedKeys(`${datasetType}.transition.${transition}`, () => [
+        [
+          `datasets.${datasetType}.transitions.${transition}`,
+          `transitions.${transition}`
+        ],
+        [
+          `datasets.${datasetType}`,
+          ""
+        ]
+      ]);
+    }
+    datasetElementScopeKeys(datasetType, elementType) {
+      return cachedKeys(`${datasetType}-${elementType}`, () => [
+        [
+          `datasets.${datasetType}.elements.${elementType}`,
+          `datasets.${datasetType}`,
+          `elements.${elementType}`,
+          ""
+        ]
+      ]);
+    }
+    pluginScopeKeys(plugin) {
+      const id = plugin.id;
+      const type = this.type;
+      return cachedKeys(`${type}-plugin-${id}`, () => [
+        [
+          `plugins.${id}`,
+          ...plugin.additionalOptionScopes || []
+        ]
+      ]);
+    }
+    _cachedScopes(mainScope, resetCache) {
+      const _scopeCache = this._scopeCache;
+      let cache = _scopeCache.get(mainScope);
+      if (!cache || resetCache) {
+        cache = /* @__PURE__ */ new Map();
+        _scopeCache.set(mainScope, cache);
+      }
+      return cache;
+    }
+    getOptionScopes(mainScope, keyLists, resetCache) {
+      const { options, type } = this;
+      const cache = this._cachedScopes(mainScope, resetCache);
+      const cached = cache.get(keyLists);
+      if (cached) {
+        return cached;
+      }
+      const scopes = /* @__PURE__ */ new Set();
+      keyLists.forEach((keys) => {
+        if (mainScope) {
+          scopes.add(mainScope);
+          keys.forEach((key) => addIfFound(scopes, mainScope, key));
+        }
+        keys.forEach((key) => addIfFound(scopes, options, key));
+        keys.forEach((key) => addIfFound(scopes, overrides[type] || {}, key));
+        keys.forEach((key) => addIfFound(scopes, defaults, key));
+        keys.forEach((key) => addIfFound(scopes, descriptors, key));
+      });
+      const array = Array.from(scopes);
+      if (array.length === 0) {
+        array.push(/* @__PURE__ */ Object.create(null));
+      }
+      if (keysCached.has(keyLists)) {
+        cache.set(keyLists, array);
+      }
+      return array;
+    }
+    chartOptionScopes() {
+      const { options, type } = this;
+      return [
+        options,
+        overrides[type] || {},
+        defaults.datasets[type] || {},
+        {
+          type
+        },
+        defaults,
+        descriptors
+      ];
+    }
+    resolveNamedOptions(scopes, names2, context, prefixes = [
+      ""
+    ]) {
+      const result = {
+        $shared: true
+      };
+      const { resolver, subPrefixes } = getResolver(this._resolverCache, scopes, prefixes);
+      let options = resolver;
+      if (needContext(resolver, names2)) {
+        result.$shared = false;
+        context = isFunction(context) ? context() : context;
+        const subResolver = this.createResolver(scopes, context, subPrefixes);
+        options = _attachContext(resolver, context, subResolver);
+      }
+      for (const prop of names2) {
+        result[prop] = options[prop];
+      }
+      return result;
+    }
+    createResolver(scopes, context, prefixes = [
+      ""
+    ], descriptorDefaults) {
+      const { resolver } = getResolver(this._resolverCache, scopes, prefixes);
+      return isObject(context) ? _attachContext(resolver, context, void 0, descriptorDefaults) : resolver;
+    }
+  }
+  function getResolver(resolverCache, scopes, prefixes) {
+    let cache = resolverCache.get(scopes);
+    if (!cache) {
+      cache = /* @__PURE__ */ new Map();
+      resolverCache.set(scopes, cache);
+    }
+    const cacheKey = prefixes.join();
+    let cached = cache.get(cacheKey);
+    if (!cached) {
+      const resolver = _createResolver(scopes, prefixes);
+      cached = {
+        resolver,
+        subPrefixes: prefixes.filter((p) => !p.toLowerCase().includes("hover"))
+      };
+      cache.set(cacheKey, cached);
+    }
+    return cached;
+  }
+  const hasFunction = (value) => isObject(value) && Object.getOwnPropertyNames(value).some((key) => isFunction(value[key]));
+  function needContext(proxy, names2) {
+    const { isScriptable, isIndexable } = _descriptors(proxy);
+    for (const prop of names2) {
+      const scriptable = isScriptable(prop);
+      const indexable = isIndexable(prop);
+      const value = (indexable || scriptable) && proxy[prop];
+      if (scriptable && (isFunction(value) || hasFunction(value)) || indexable && isArray(value)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  var version = "4.5.1";
+  const KNOWN_POSITIONS = [
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "chartArea"
+  ];
+  function positionIsHorizontal(position, axis) {
+    return position === "top" || position === "bottom" || KNOWN_POSITIONS.indexOf(position) === -1 && axis === "x";
+  }
+  function compare2Level(l1, l2) {
+    return function(a, b) {
+      return a[l1] === b[l1] ? a[l2] - b[l2] : a[l1] - b[l1];
+    };
+  }
+  function onAnimationsComplete(context) {
+    const chart = context.chart;
+    const animationOptions = chart.options.animation;
+    chart.notifyPlugins("afterRender");
+    callback(animationOptions && animationOptions.onComplete, [
+      context
+    ], chart);
+  }
+  function onAnimationProgress(context) {
+    const chart = context.chart;
+    const animationOptions = chart.options.animation;
+    callback(animationOptions && animationOptions.onProgress, [
+      context
+    ], chart);
+  }
+  function getCanvas(item) {
+    if (_isDomSupported() && typeof item === "string") {
+      item = document.getElementById(item);
+    } else if (item && item.length) {
+      item = item[0];
+    }
+    if (item && item.canvas) {
+      item = item.canvas;
+    }
+    return item;
+  }
+  const instances = {};
+  const getChart = (key) => {
+    const canvas = getCanvas(key);
+    return Object.values(instances).filter((c) => c.canvas === canvas).pop();
+  };
+  function moveNumericKeys(obj, start, move) {
+    const keys = Object.keys(obj);
+    for (const key of keys) {
+      const intKey = +key;
+      if (intKey >= start) {
+        const value = obj[key];
+        delete obj[key];
+        if (move > 0 || intKey > start) {
+          obj[intKey + move] = value;
+        }
+      }
+    }
+  }
+  function determineLastEvent(e, lastEvent, inChartArea, isClick) {
+    if (!inChartArea || e.type === "mouseout") {
+      return null;
+    }
+    if (isClick) {
+      return lastEvent;
+    }
+    return e;
+  }
+  class Chart {
+    static register(...items) {
+      registry.add(...items);
+      invalidatePlugins();
+    }
+    static unregister(...items) {
+      registry.remove(...items);
+      invalidatePlugins();
+    }
+    constructor(item, userConfig) {
+      const config = this.config = new Config(userConfig);
+      const initialCanvas = getCanvas(item);
+      const existingChart = getChart(initialCanvas);
+      if (existingChart) {
+        throw new Error("Canvas is already in use. Chart with ID '" + existingChart.id + "' must be destroyed before the canvas with ID '" + existingChart.canvas.id + "' can be reused.");
+      }
+      const options = config.createResolver(config.chartOptionScopes(), this.getContext());
+      this.platform = new (config.platform || _detectPlatform(initialCanvas))();
+      this.platform.updateConfig(config);
+      const context = this.platform.acquireContext(initialCanvas, options.aspectRatio);
+      const canvas = context && context.canvas;
+      const height = canvas && canvas.height;
+      const width = canvas && canvas.width;
+      this.id = uid();
+      this.ctx = context;
+      this.canvas = canvas;
+      this.width = width;
+      this.height = height;
+      this._options = options;
+      this._aspectRatio = this.aspectRatio;
+      this._layers = [];
+      this._metasets = [];
+      this._stacks = void 0;
+      this.boxes = [];
+      this.currentDevicePixelRatio = void 0;
+      this.chartArea = void 0;
+      this._active = [];
+      this._lastEvent = void 0;
+      this._listeners = {};
+      this._responsiveListeners = void 0;
+      this._sortedMetasets = [];
+      this.scales = {};
+      this._plugins = new PluginService();
+      this.$proxies = {};
+      this._hiddenIndices = {};
+      this.attached = false;
+      this._animationsDisabled = void 0;
+      this.$context = void 0;
+      this._doResize = debounce((mode) => this.update(mode), options.resizeDelay || 0);
+      this._dataChanges = [];
+      instances[this.id] = this;
+      if (!context || !canvas) {
+        console.error("Failed to create chart: can't acquire context from the given item");
+        return;
+      }
+      animator.listen(this, "complete", onAnimationsComplete);
+      animator.listen(this, "progress", onAnimationProgress);
+      this._initialize();
+      if (this.attached) {
+        this.update();
+      }
+    }
+    get aspectRatio() {
+      const { options: { aspectRatio, maintainAspectRatio }, width, height, _aspectRatio } = this;
+      if (!isNullOrUndef(aspectRatio)) {
+        return aspectRatio;
+      }
+      if (maintainAspectRatio && _aspectRatio) {
+        return _aspectRatio;
+      }
+      return height ? width / height : null;
+    }
+    get data() {
+      return this.config.data;
+    }
+    set data(data) {
+      this.config.data = data;
+    }
+    get options() {
+      return this._options;
+    }
+    set options(options) {
+      this.config.options = options;
+    }
+    get registry() {
+      return registry;
+    }
+    _initialize() {
+      this.notifyPlugins("beforeInit");
+      if (this.options.responsive) {
+        this.resize();
+      } else {
+        retinaScale(this, this.options.devicePixelRatio);
+      }
+      this.bindEvents();
+      this.notifyPlugins("afterInit");
+      return this;
+    }
+    clear() {
+      clearCanvas(this.canvas, this.ctx);
+      return this;
+    }
+    stop() {
+      animator.stop(this);
+      return this;
+    }
+    resize(width, height) {
+      if (!animator.running(this)) {
+        this._resize(width, height);
+      } else {
+        this._resizeBeforeDraw = {
+          width,
+          height
+        };
+      }
+    }
+    _resize(width, height) {
+      const options = this.options;
+      const canvas = this.canvas;
+      const aspectRatio = options.maintainAspectRatio && this.aspectRatio;
+      const newSize = this.platform.getMaximumSize(canvas, width, height, aspectRatio);
+      const newRatio = options.devicePixelRatio || this.platform.getDevicePixelRatio();
+      const mode = this.width ? "resize" : "attach";
+      this.width = newSize.width;
+      this.height = newSize.height;
+      this._aspectRatio = this.aspectRatio;
+      if (!retinaScale(this, newRatio, true)) {
+        return;
+      }
+      this.notifyPlugins("resize", {
+        size: newSize
+      });
+      callback(options.onResize, [
+        this,
+        newSize
+      ], this);
+      if (this.attached) {
+        if (this._doResize(mode)) {
+          this.render();
+        }
+      }
+    }
+    ensureScalesHaveIDs() {
+      const options = this.options;
+      const scalesOptions = options.scales || {};
+      each(scalesOptions, (axisOptions, axisID) => {
+        axisOptions.id = axisID;
+      });
+    }
+    buildOrUpdateScales() {
+      const options = this.options;
+      const scaleOpts = options.scales;
+      const scales = this.scales;
+      const updated = Object.keys(scales).reduce((obj, id) => {
+        obj[id] = false;
+        return obj;
+      }, {});
+      let items = [];
+      if (scaleOpts) {
+        items = items.concat(Object.keys(scaleOpts).map((id) => {
+          const scaleOptions = scaleOpts[id];
+          const axis = determineAxis(id, scaleOptions);
+          const isRadial = axis === "r";
+          const isHorizontal = axis === "x";
+          return {
+            options: scaleOptions,
+            dposition: isRadial ? "chartArea" : isHorizontal ? "bottom" : "left",
+            dtype: isRadial ? "radialLinear" : isHorizontal ? "category" : "linear"
+          };
+        }));
+      }
+      each(items, (item) => {
+        const scaleOptions = item.options;
+        const id = scaleOptions.id;
+        const axis = determineAxis(id, scaleOptions);
+        const scaleType = valueOrDefault(scaleOptions.type, item.dtype);
+        if (scaleOptions.position === void 0 || positionIsHorizontal(scaleOptions.position, axis) !== positionIsHorizontal(item.dposition)) {
+          scaleOptions.position = item.dposition;
+        }
+        updated[id] = true;
+        let scale = null;
+        if (id in scales && scales[id].type === scaleType) {
+          scale = scales[id];
+        } else {
+          const scaleClass = registry.getScale(scaleType);
+          scale = new scaleClass({
+            id,
+            type: scaleType,
+            ctx: this.ctx,
+            chart: this
+          });
+          scales[scale.id] = scale;
+        }
+        scale.init(scaleOptions, options);
+      });
+      each(updated, (hasUpdated, id) => {
+        if (!hasUpdated) {
+          delete scales[id];
+        }
+      });
+      each(scales, (scale) => {
+        layouts.configure(this, scale, scale.options);
+        layouts.addBox(this, scale);
+      });
+    }
+    _updateMetasets() {
+      const metasets = this._metasets;
+      const numData = this.data.datasets.length;
+      const numMeta = metasets.length;
+      metasets.sort((a, b) => a.index - b.index);
+      if (numMeta > numData) {
+        for (let i = numData; i < numMeta; ++i) {
+          this._destroyDatasetMeta(i);
+        }
+        metasets.splice(numData, numMeta - numData);
+      }
+      this._sortedMetasets = metasets.slice(0).sort(compare2Level("order", "index"));
+    }
+    _removeUnreferencedMetasets() {
+      const { _metasets: metasets, data: { datasets } } = this;
+      if (metasets.length > datasets.length) {
+        delete this._stacks;
+      }
+      metasets.forEach((meta, index2) => {
+        if (datasets.filter((x) => x === meta._dataset).length === 0) {
+          this._destroyDatasetMeta(index2);
+        }
+      });
+    }
+    buildOrUpdateControllers() {
+      const newControllers = [];
+      const datasets = this.data.datasets;
+      let i, ilen;
+      this._removeUnreferencedMetasets();
+      for (i = 0, ilen = datasets.length; i < ilen; i++) {
+        const dataset = datasets[i];
+        let meta = this.getDatasetMeta(i);
+        const type = dataset.type || this.config.type;
+        if (meta.type && meta.type !== type) {
+          this._destroyDatasetMeta(i);
+          meta = this.getDatasetMeta(i);
+        }
+        meta.type = type;
+        meta.indexAxis = dataset.indexAxis || getIndexAxis(type, this.options);
+        meta.order = dataset.order || 0;
+        meta.index = i;
+        meta.label = "" + dataset.label;
+        meta.visible = this.isDatasetVisible(i);
+        if (meta.controller) {
+          meta.controller.updateIndex(i);
+          meta.controller.linkScales();
+        } else {
+          const ControllerClass = registry.getController(type);
+          const { datasetElementType, dataElementType } = defaults.datasets[type];
+          Object.assign(ControllerClass, {
+            dataElementType: registry.getElement(dataElementType),
+            datasetElementType: datasetElementType && registry.getElement(datasetElementType)
+          });
+          meta.controller = new ControllerClass(this, i);
+          newControllers.push(meta.controller);
+        }
+      }
+      this._updateMetasets();
+      return newControllers;
+    }
+    _resetElements() {
+      each(this.data.datasets, (dataset, datasetIndex) => {
+        this.getDatasetMeta(datasetIndex).controller.reset();
+      }, this);
+    }
+    reset() {
+      this._resetElements();
+      this.notifyPlugins("reset");
+    }
+    update(mode) {
+      const config = this.config;
+      config.update();
+      const options = this._options = config.createResolver(config.chartOptionScopes(), this.getContext());
+      const animsDisabled = this._animationsDisabled = !options.animation;
+      this._updateScales();
+      this._checkEventBindings();
+      this._updateHiddenIndices();
+      this._plugins.invalidate();
+      if (this.notifyPlugins("beforeUpdate", {
+        mode,
+        cancelable: true
+      }) === false) {
+        return;
+      }
+      const newControllers = this.buildOrUpdateControllers();
+      this.notifyPlugins("beforeElementsUpdate");
+      let minPadding = 0;
+      for (let i = 0, ilen = this.data.datasets.length; i < ilen; i++) {
+        const { controller } = this.getDatasetMeta(i);
+        const reset = !animsDisabled && newControllers.indexOf(controller) === -1;
+        controller.buildOrUpdateElements(reset);
+        minPadding = Math.max(+controller.getMaxOverflow(), minPadding);
+      }
+      minPadding = this._minPadding = options.layout.autoPadding ? minPadding : 0;
+      this._updateLayout(minPadding);
+      if (!animsDisabled) {
+        each(newControllers, (controller) => {
+          controller.reset();
+        });
+      }
+      this._updateDatasets(mode);
+      this.notifyPlugins("afterUpdate", {
+        mode
+      });
+      this._layers.sort(compare2Level("z", "_idx"));
+      const { _active, _lastEvent } = this;
+      if (_lastEvent) {
+        this._eventHandler(_lastEvent, true);
+      } else if (_active.length) {
+        this._updateHoverStyles(_active, _active, true);
+      }
+      this.render();
+    }
+    _updateScales() {
+      each(this.scales, (scale) => {
+        layouts.removeBox(this, scale);
+      });
+      this.ensureScalesHaveIDs();
+      this.buildOrUpdateScales();
+    }
+    _checkEventBindings() {
+      const options = this.options;
+      const existingEvents = new Set(Object.keys(this._listeners));
+      const newEvents = new Set(options.events);
+      if (!setsEqual(existingEvents, newEvents) || !!this._responsiveListeners !== options.responsive) {
+        this.unbindEvents();
+        this.bindEvents();
+      }
+    }
+    _updateHiddenIndices() {
+      const { _hiddenIndices } = this;
+      const changes = this._getUniformDataChanges() || [];
+      for (const { method, start, count } of changes) {
+        const move = method === "_removeElements" ? -count : count;
+        moveNumericKeys(_hiddenIndices, start, move);
+      }
+    }
+    _getUniformDataChanges() {
+      const _dataChanges = this._dataChanges;
+      if (!_dataChanges || !_dataChanges.length) {
+        return;
+      }
+      this._dataChanges = [];
+      const datasetCount = this.data.datasets.length;
+      const makeSet = (idx) => new Set(_dataChanges.filter((c) => c[0] === idx).map((c, i) => i + "," + c.splice(1).join(",")));
+      const changeSet = makeSet(0);
+      for (let i = 1; i < datasetCount; i++) {
+        if (!setsEqual(changeSet, makeSet(i))) {
+          return;
+        }
+      }
+      return Array.from(changeSet).map((c) => c.split(",")).map((a) => ({
+        method: a[1],
+        start: +a[2],
+        count: +a[3]
+      }));
+    }
+    _updateLayout(minPadding) {
+      if (this.notifyPlugins("beforeLayout", {
+        cancelable: true
+      }) === false) {
+        return;
+      }
+      layouts.update(this, this.width, this.height, minPadding);
+      const area = this.chartArea;
+      const noArea = area.width <= 0 || area.height <= 0;
+      this._layers = [];
+      each(this.boxes, (box) => {
+        if (noArea && box.position === "chartArea") {
+          return;
+        }
+        if (box.configure) {
+          box.configure();
+        }
+        this._layers.push(...box._layers());
+      }, this);
+      this._layers.forEach((item, index2) => {
+        item._idx = index2;
+      });
+      this.notifyPlugins("afterLayout");
+    }
+    _updateDatasets(mode) {
+      if (this.notifyPlugins("beforeDatasetsUpdate", {
+        mode,
+        cancelable: true
+      }) === false) {
+        return;
+      }
+      for (let i = 0, ilen = this.data.datasets.length; i < ilen; ++i) {
+        this.getDatasetMeta(i).controller.configure();
+      }
+      for (let i = 0, ilen = this.data.datasets.length; i < ilen; ++i) {
+        this._updateDataset(i, isFunction(mode) ? mode({
+          datasetIndex: i
+        }) : mode);
+      }
+      this.notifyPlugins("afterDatasetsUpdate", {
+        mode
+      });
+    }
+    _updateDataset(index2, mode) {
+      const meta = this.getDatasetMeta(index2);
+      const args = {
+        meta,
+        index: index2,
+        mode,
+        cancelable: true
+      };
+      if (this.notifyPlugins("beforeDatasetUpdate", args) === false) {
+        return;
+      }
+      meta.controller._update(mode);
+      args.cancelable = false;
+      this.notifyPlugins("afterDatasetUpdate", args);
+    }
+    render() {
+      if (this.notifyPlugins("beforeRender", {
+        cancelable: true
+      }) === false) {
+        return;
+      }
+      if (animator.has(this)) {
+        if (this.attached && !animator.running(this)) {
+          animator.start(this);
+        }
+      } else {
+        this.draw();
+        onAnimationsComplete({
+          chart: this
+        });
+      }
+    }
+    draw() {
+      let i;
+      if (this._resizeBeforeDraw) {
+        const { width, height } = this._resizeBeforeDraw;
+        this._resizeBeforeDraw = null;
+        this._resize(width, height);
+      }
+      this.clear();
+      if (this.width <= 0 || this.height <= 0) {
+        return;
+      }
+      if (this.notifyPlugins("beforeDraw", {
+        cancelable: true
+      }) === false) {
+        return;
+      }
+      const layers = this._layers;
+      for (i = 0; i < layers.length && layers[i].z <= 0; ++i) {
+        layers[i].draw(this.chartArea);
+      }
+      this._drawDatasets();
+      for (; i < layers.length; ++i) {
+        layers[i].draw(this.chartArea);
+      }
+      this.notifyPlugins("afterDraw");
+    }
+    _getSortedDatasetMetas(filterVisible) {
+      const metasets = this._sortedMetasets;
+      const result = [];
+      let i, ilen;
+      for (i = 0, ilen = metasets.length; i < ilen; ++i) {
+        const meta = metasets[i];
+        if (!filterVisible || meta.visible) {
+          result.push(meta);
+        }
+      }
+      return result;
+    }
+    getSortedVisibleDatasetMetas() {
+      return this._getSortedDatasetMetas(true);
+    }
+    _drawDatasets() {
+      if (this.notifyPlugins("beforeDatasetsDraw", {
+        cancelable: true
+      }) === false) {
+        return;
+      }
+      const metasets = this.getSortedVisibleDatasetMetas();
+      for (let i = metasets.length - 1; i >= 0; --i) {
+        this._drawDataset(metasets[i]);
+      }
+      this.notifyPlugins("afterDatasetsDraw");
+    }
+    _drawDataset(meta) {
+      const ctx = this.ctx;
+      const args = {
+        meta,
+        index: meta.index,
+        cancelable: true
+      };
+      const clip = getDatasetClipArea(this, meta);
+      if (this.notifyPlugins("beforeDatasetDraw", args) === false) {
+        return;
+      }
+      if (clip) {
+        clipArea(ctx, clip);
+      }
+      meta.controller.draw();
+      if (clip) {
+        unclipArea(ctx);
+      }
+      args.cancelable = false;
+      this.notifyPlugins("afterDatasetDraw", args);
+    }
+    isPointInArea(point) {
+      return _isPointInArea(point, this.chartArea, this._minPadding);
+    }
+    getElementsAtEventForMode(e, mode, options, useFinalPosition) {
+      const method = Interaction.modes[mode];
+      if (typeof method === "function") {
+        return method(this, e, options, useFinalPosition);
+      }
+      return [];
+    }
+    getDatasetMeta(datasetIndex) {
+      const dataset = this.data.datasets[datasetIndex];
+      const metasets = this._metasets;
+      let meta = metasets.filter((x) => x && x._dataset === dataset).pop();
+      if (!meta) {
+        meta = {
+          type: null,
+          data: [],
+          dataset: null,
+          controller: null,
+          hidden: null,
+          xAxisID: null,
+          yAxisID: null,
+          order: dataset && dataset.order || 0,
+          index: datasetIndex,
+          _dataset: dataset,
+          _parsed: [],
+          _sorted: false
+        };
+        metasets.push(meta);
+      }
+      return meta;
+    }
+    getContext() {
+      return this.$context || (this.$context = createContext(null, {
+        chart: this,
+        type: "chart"
+      }));
+    }
+    getVisibleDatasetCount() {
+      return this.getSortedVisibleDatasetMetas().length;
+    }
+    isDatasetVisible(datasetIndex) {
+      const dataset = this.data.datasets[datasetIndex];
+      if (!dataset) {
+        return false;
+      }
+      const meta = this.getDatasetMeta(datasetIndex);
+      return typeof meta.hidden === "boolean" ? !meta.hidden : !dataset.hidden;
+    }
+    setDatasetVisibility(datasetIndex, visible) {
+      const meta = this.getDatasetMeta(datasetIndex);
+      meta.hidden = !visible;
+    }
+    toggleDataVisibility(index2) {
+      this._hiddenIndices[index2] = !this._hiddenIndices[index2];
+    }
+    getDataVisibility(index2) {
+      return !this._hiddenIndices[index2];
+    }
+    _updateVisibility(datasetIndex, dataIndex, visible) {
+      const mode = visible ? "show" : "hide";
+      const meta = this.getDatasetMeta(datasetIndex);
+      const anims = meta.controller._resolveAnimations(void 0, mode);
+      if (defined(dataIndex)) {
+        meta.data[dataIndex].hidden = !visible;
+        this.update();
+      } else {
+        this.setDatasetVisibility(datasetIndex, visible);
+        anims.update(meta, {
+          visible
+        });
+        this.update((ctx) => ctx.datasetIndex === datasetIndex ? mode : void 0);
+      }
+    }
+    hide(datasetIndex, dataIndex) {
+      this._updateVisibility(datasetIndex, dataIndex, false);
+    }
+    show(datasetIndex, dataIndex) {
+      this._updateVisibility(datasetIndex, dataIndex, true);
+    }
+    _destroyDatasetMeta(datasetIndex) {
+      const meta = this._metasets[datasetIndex];
+      if (meta && meta.controller) {
+        meta.controller._destroy();
+      }
+      delete this._metasets[datasetIndex];
+    }
+    _stop() {
+      let i, ilen;
+      this.stop();
+      animator.remove(this);
+      for (i = 0, ilen = this.data.datasets.length; i < ilen; ++i) {
+        this._destroyDatasetMeta(i);
+      }
+    }
+    destroy() {
+      this.notifyPlugins("beforeDestroy");
+      const { canvas, ctx } = this;
+      this._stop();
+      this.config.clearCache();
+      if (canvas) {
+        this.unbindEvents();
+        clearCanvas(canvas, ctx);
+        this.platform.releaseContext(ctx);
+        this.canvas = null;
+        this.ctx = null;
+      }
+      delete instances[this.id];
+      this.notifyPlugins("afterDestroy");
+    }
+    toBase64Image(...args) {
+      return this.canvas.toDataURL(...args);
+    }
+    bindEvents() {
+      this.bindUserEvents();
+      if (this.options.responsive) {
+        this.bindResponsiveEvents();
+      } else {
+        this.attached = true;
+      }
+    }
+    bindUserEvents() {
+      const listeners = this._listeners;
+      const platform = this.platform;
+      const _add = (type, listener2) => {
+        platform.addEventListener(this, type, listener2);
+        listeners[type] = listener2;
+      };
+      const listener = (e, x, y) => {
+        e.offsetX = x;
+        e.offsetY = y;
+        this._eventHandler(e);
+      };
+      each(this.options.events, (type) => _add(type, listener));
+    }
+    bindResponsiveEvents() {
+      if (!this._responsiveListeners) {
+        this._responsiveListeners = {};
+      }
+      const listeners = this._responsiveListeners;
+      const platform = this.platform;
+      const _add = (type, listener2) => {
+        platform.addEventListener(this, type, listener2);
+        listeners[type] = listener2;
+      };
+      const _remove = (type, listener2) => {
+        if (listeners[type]) {
+          platform.removeEventListener(this, type, listener2);
+          delete listeners[type];
+        }
+      };
+      const listener = (width, height) => {
+        if (this.canvas) {
+          this.resize(width, height);
+        }
+      };
+      let detached;
+      const attached = () => {
+        _remove("attach", attached);
+        this.attached = true;
+        this.resize();
+        _add("resize", listener);
+        _add("detach", detached);
+      };
+      detached = () => {
+        this.attached = false;
+        _remove("resize", listener);
+        this._stop();
+        this._resize(0, 0);
+        _add("attach", attached);
+      };
+      if (platform.isAttached(this.canvas)) {
+        attached();
+      } else {
+        detached();
+      }
+    }
+    unbindEvents() {
+      each(this._listeners, (listener, type) => {
+        this.platform.removeEventListener(this, type, listener);
+      });
+      this._listeners = {};
+      each(this._responsiveListeners, (listener, type) => {
+        this.platform.removeEventListener(this, type, listener);
+      });
+      this._responsiveListeners = void 0;
+    }
+    updateHoverStyle(items, mode, enabled) {
+      const prefix = enabled ? "set" : "remove";
+      let meta, item, i, ilen;
+      if (mode === "dataset") {
+        meta = this.getDatasetMeta(items[0].datasetIndex);
+        meta.controller["_" + prefix + "DatasetHoverStyle"]();
+      }
+      for (i = 0, ilen = items.length; i < ilen; ++i) {
+        item = items[i];
+        const controller = item && this.getDatasetMeta(item.datasetIndex).controller;
+        if (controller) {
+          controller[prefix + "HoverStyle"](item.element, item.datasetIndex, item.index);
+        }
+      }
+    }
+    getActiveElements() {
+      return this._active || [];
+    }
+    setActiveElements(activeElements) {
+      const lastActive = this._active || [];
+      const active = activeElements.map(({ datasetIndex, index: index2 }) => {
+        const meta = this.getDatasetMeta(datasetIndex);
+        if (!meta) {
+          throw new Error("No dataset found at index " + datasetIndex);
+        }
+        return {
+          datasetIndex,
+          element: meta.data[index2],
+          index: index2
+        };
+      });
+      const changed = !_elementsEqual(active, lastActive);
+      if (changed) {
+        this._active = active;
+        this._lastEvent = null;
+        this._updateHoverStyles(active, lastActive);
+      }
+    }
+    notifyPlugins(hook, args, filter) {
+      return this._plugins.notify(this, hook, args, filter);
+    }
+    isPluginEnabled(pluginId) {
+      return this._plugins._cache.filter((p) => p.plugin.id === pluginId).length === 1;
+    }
+    _updateHoverStyles(active, lastActive, replay) {
+      const hoverOptions = this.options.hover;
+      const diff = (a, b) => a.filter((x) => !b.some((y) => x.datasetIndex === y.datasetIndex && x.index === y.index));
+      const deactivated = diff(lastActive, active);
+      const activated = replay ? active : diff(active, lastActive);
+      if (deactivated.length) {
+        this.updateHoverStyle(deactivated, hoverOptions.mode, false);
+      }
+      if (activated.length && hoverOptions.mode) {
+        this.updateHoverStyle(activated, hoverOptions.mode, true);
+      }
+    }
+    _eventHandler(e, replay) {
+      const args = {
+        event: e,
+        replay,
+        cancelable: true,
+        inChartArea: this.isPointInArea(e)
+      };
+      const eventFilter = (plugin) => (plugin.options.events || this.options.events).includes(e.native.type);
+      if (this.notifyPlugins("beforeEvent", args, eventFilter) === false) {
+        return;
+      }
+      const changed = this._handleEvent(e, replay, args.inChartArea);
+      args.cancelable = false;
+      this.notifyPlugins("afterEvent", args, eventFilter);
+      if (changed || args.changed) {
+        this.render();
+      }
+      return this;
+    }
+    _handleEvent(e, replay, inChartArea) {
+      const { _active: lastActive = [], options } = this;
+      const useFinalPosition = replay;
+      const active = this._getActiveElements(e, lastActive, inChartArea, useFinalPosition);
+      const isClick = _isClickEvent(e);
+      const lastEvent = determineLastEvent(e, this._lastEvent, inChartArea, isClick);
+      if (inChartArea) {
+        this._lastEvent = null;
+        callback(options.onHover, [
+          e,
+          active,
+          this
+        ], this);
+        if (isClick) {
+          callback(options.onClick, [
+            e,
+            active,
+            this
+          ], this);
+        }
+      }
+      const changed = !_elementsEqual(active, lastActive);
+      if (changed || replay) {
+        this._active = active;
+        this._updateHoverStyles(active, lastActive, replay);
+      }
+      this._lastEvent = lastEvent;
+      return changed;
+    }
+    _getActiveElements(e, lastActive, inChartArea, useFinalPosition) {
+      if (e.type === "mouseout") {
+        return [];
+      }
+      if (!inChartArea) {
+        return lastActive;
+      }
+      const hoverOptions = this.options.hover;
+      return this.getElementsAtEventForMode(e, hoverOptions.mode, hoverOptions, useFinalPosition);
+    }
+  }
+  __publicField(Chart, "defaults", defaults);
+  __publicField(Chart, "instances", instances);
+  __publicField(Chart, "overrides", overrides);
+  __publicField(Chart, "registry", registry);
+  __publicField(Chart, "version", version);
+  __publicField(Chart, "getChart", getChart);
+  function invalidatePlugins() {
+    return each(Chart.instances, (chart) => chart._plugins.invalidate());
+  }
+  function setStyle(ctx, options, style = options) {
+    ctx.lineCap = valueOrDefault(style.borderCapStyle, options.borderCapStyle);
+    ctx.setLineDash(valueOrDefault(style.borderDash, options.borderDash));
+    ctx.lineDashOffset = valueOrDefault(style.borderDashOffset, options.borderDashOffset);
+    ctx.lineJoin = valueOrDefault(style.borderJoinStyle, options.borderJoinStyle);
+    ctx.lineWidth = valueOrDefault(style.borderWidth, options.borderWidth);
+    ctx.strokeStyle = valueOrDefault(style.borderColor, options.borderColor);
+  }
+  function lineTo(ctx, previous, target) {
+    ctx.lineTo(target.x, target.y);
+  }
+  function getLineMethod(options) {
+    if (options.stepped) {
+      return _steppedLineTo;
+    }
+    if (options.tension || options.cubicInterpolationMode === "monotone") {
+      return _bezierCurveTo;
+    }
+    return lineTo;
+  }
+  function pathVars(points, segment, params = {}) {
+    const count = points.length;
+    const { start: paramsStart = 0, end: paramsEnd = count - 1 } = params;
+    const { start: segmentStart, end: segmentEnd } = segment;
+    const start = Math.max(paramsStart, segmentStart);
+    const end = Math.min(paramsEnd, segmentEnd);
+    const outside = paramsStart < segmentStart && paramsEnd < segmentStart || paramsStart > segmentEnd && paramsEnd > segmentEnd;
+    return {
+      count,
+      start,
+      loop: segment.loop,
+      ilen: end < start && !outside ? count + end - start : end - start
+    };
+  }
+  function pathSegment(ctx, line, segment, params) {
+    const { points, options } = line;
+    const { count, start, loop, ilen } = pathVars(points, segment, params);
+    const lineMethod = getLineMethod(options);
+    let { move = true, reverse } = params || {};
+    let i, point, prev;
+    for (i = 0; i <= ilen; ++i) {
+      point = points[(start + (reverse ? ilen - i : i)) % count];
+      if (point.skip) {
+        continue;
+      } else if (move) {
+        ctx.moveTo(point.x, point.y);
+        move = false;
+      } else {
+        lineMethod(ctx, prev, point, reverse, options.stepped);
+      }
+      prev = point;
+    }
+    if (loop) {
+      point = points[(start + (reverse ? ilen : 0)) % count];
+      lineMethod(ctx, prev, point, reverse, options.stepped);
+    }
+    return !!loop;
+  }
+  function fastPathSegment(ctx, line, segment, params) {
+    const points = line.points;
+    const { count, start, ilen } = pathVars(points, segment, params);
+    const { move = true, reverse } = params || {};
+    let avgX = 0;
+    let countX = 0;
+    let i, point, prevX, minY, maxY, lastY;
+    const pointIndex = (index2) => (start + (reverse ? ilen - index2 : index2)) % count;
+    const drawX = () => {
+      if (minY !== maxY) {
+        ctx.lineTo(avgX, maxY);
+        ctx.lineTo(avgX, minY);
+        ctx.lineTo(avgX, lastY);
+      }
+    };
+    if (move) {
+      point = points[pointIndex(0)];
+      ctx.moveTo(point.x, point.y);
+    }
+    for (i = 0; i <= ilen; ++i) {
+      point = points[pointIndex(i)];
+      if (point.skip) {
+        continue;
+      }
+      const x = point.x;
+      const y = point.y;
+      const truncX = x | 0;
+      if (truncX === prevX) {
+        if (y < minY) {
+          minY = y;
+        } else if (y > maxY) {
+          maxY = y;
+        }
+        avgX = (countX * avgX + x) / ++countX;
+      } else {
+        drawX();
+        ctx.lineTo(x, y);
+        prevX = truncX;
+        countX = 0;
+        minY = maxY = y;
+      }
+      lastY = y;
+    }
+    drawX();
+  }
+  function _getSegmentMethod(line) {
+    const opts = line.options;
+    const borderDash = opts.borderDash && opts.borderDash.length;
+    const useFastPath = !line._decimated && !line._loop && !opts.tension && opts.cubicInterpolationMode !== "monotone" && !opts.stepped && !borderDash;
+    return useFastPath ? fastPathSegment : pathSegment;
+  }
+  function _getInterpolationMethod(options) {
+    if (options.stepped) {
+      return _steppedInterpolation;
+    }
+    if (options.tension || options.cubicInterpolationMode === "monotone") {
+      return _bezierInterpolation;
+    }
+    return _pointInLine;
+  }
+  function strokePathWithCache(ctx, line, start, count) {
+    let path = line._path;
+    if (!path) {
+      path = line._path = new Path2D();
+      if (line.path(path, start, count)) {
+        path.closePath();
+      }
+    }
+    setStyle(ctx, line.options);
+    ctx.stroke(path);
+  }
+  function strokePathDirect(ctx, line, start, count) {
+    const { segments, options } = line;
+    const segmentMethod = _getSegmentMethod(line);
+    for (const segment of segments) {
+      setStyle(ctx, options, segment.style);
+      ctx.beginPath();
+      if (segmentMethod(ctx, line, segment, {
+        start,
+        end: start + count - 1
+      })) {
+        ctx.closePath();
+      }
+      ctx.stroke();
+    }
+  }
+  const usePath2D = typeof Path2D === "function";
+  function draw(ctx, line, start, count) {
+    if (usePath2D && !line.options.segment) {
+      strokePathWithCache(ctx, line, start, count);
+    } else {
+      strokePathDirect(ctx, line, start, count);
+    }
+  }
+  class LineElement extends Element {
+    constructor(cfg) {
+      super();
+      this.animated = true;
+      this.options = void 0;
+      this._chart = void 0;
+      this._loop = void 0;
+      this._fullLoop = void 0;
+      this._path = void 0;
+      this._points = void 0;
+      this._segments = void 0;
+      this._decimated = false;
+      this._pointsUpdated = false;
+      this._datasetIndex = void 0;
+      if (cfg) {
+        Object.assign(this, cfg);
+      }
+    }
+    updateControlPoints(chartArea, indexAxis) {
+      const options = this.options;
+      if ((options.tension || options.cubicInterpolationMode === "monotone") && !options.stepped && !this._pointsUpdated) {
+        const loop = options.spanGaps ? this._loop : this._fullLoop;
+        _updateBezierControlPoints(this._points, options, chartArea, loop, indexAxis);
+        this._pointsUpdated = true;
+      }
+    }
+    set points(points) {
+      this._points = points;
+      delete this._segments;
+      delete this._path;
+      this._pointsUpdated = false;
+    }
+    get points() {
+      return this._points;
+    }
+    get segments() {
+      return this._segments || (this._segments = _computeSegments(this, this.options.segment));
+    }
+    first() {
+      const segments = this.segments;
+      const points = this.points;
+      return segments.length && points[segments[0].start];
+    }
+    last() {
+      const segments = this.segments;
+      const points = this.points;
+      const count = segments.length;
+      return count && points[segments[count - 1].end];
+    }
+    interpolate(point, property) {
+      const options = this.options;
+      const value = point[property];
+      const points = this.points;
+      const segments = _boundSegments(this, {
+        property,
+        start: value,
+        end: value
+      });
+      if (!segments.length) {
+        return;
+      }
+      const result = [];
+      const _interpolate = _getInterpolationMethod(options);
+      let i, ilen;
+      for (i = 0, ilen = segments.length; i < ilen; ++i) {
+        const { start, end } = segments[i];
+        const p1 = points[start];
+        const p2 = points[end];
+        if (p1 === p2) {
+          result.push(p1);
+          continue;
+        }
+        const t = Math.abs((value - p1[property]) / (p2[property] - p1[property]));
+        const interpolated = _interpolate(p1, p2, t, options.stepped);
+        interpolated[property] = point[property];
+        result.push(interpolated);
+      }
+      return result.length === 1 ? result[0] : result;
+    }
+    pathSegment(ctx, segment, params) {
+      const segmentMethod = _getSegmentMethod(this);
+      return segmentMethod(ctx, this, segment, params);
+    }
+    path(ctx, start, count) {
+      const segments = this.segments;
+      const segmentMethod = _getSegmentMethod(this);
+      let loop = this._loop;
+      start = start || 0;
+      count = count || this.points.length - start;
+      for (const segment of segments) {
+        loop &= segmentMethod(ctx, this, segment, {
+          start,
+          end: start + count - 1
+        });
+      }
+      return !!loop;
+    }
+    draw(ctx, chartArea, start, count) {
+      const options = this.options || {};
+      const points = this.points || [];
+      if (points.length && options.borderWidth) {
+        ctx.save();
+        draw(ctx, this, start, count);
+        ctx.restore();
+      }
+      if (this.animated) {
+        this._pointsUpdated = false;
+        this._path = void 0;
+      }
+    }
+  }
+  __publicField(LineElement, "id", "line");
+  __publicField(LineElement, "defaults", {
+    borderCapStyle: "butt",
+    borderDash: [],
+    borderDashOffset: 0,
+    borderJoinStyle: "miter",
+    borderWidth: 3,
+    capBezierPoints: true,
+    cubicInterpolationMode: "default",
+    fill: false,
+    spanGaps: false,
+    stepped: false,
+    tension: 0
+  });
+  __publicField(LineElement, "defaultRoutes", {
+    backgroundColor: "backgroundColor",
+    borderColor: "borderColor"
+  });
+  __publicField(LineElement, "descriptors", {
+    _scriptable: true,
+    _indexable: (name) => name !== "borderDash" && name !== "fill"
+  });
+  function inRange$1(el, pos, axis, useFinalPosition) {
+    const options = el.options;
+    const { [axis]: value } = el.getProps([
+      axis
+    ], useFinalPosition);
+    return Math.abs(pos - value) < options.radius + options.hitRadius;
+  }
+  class PointElement extends Element {
+    constructor(cfg) {
+      super();
+      __publicField(this, "parsed");
+      __publicField(this, "skip");
+      __publicField(this, "stop");
+      this.options = void 0;
+      this.parsed = void 0;
+      this.skip = void 0;
+      this.stop = void 0;
+      if (cfg) {
+        Object.assign(this, cfg);
+      }
+    }
+    inRange(mouseX, mouseY, useFinalPosition) {
+      const options = this.options;
+      const { x, y } = this.getProps([
+        "x",
+        "y"
+      ], useFinalPosition);
+      return Math.pow(mouseX - x, 2) + Math.pow(mouseY - y, 2) < Math.pow(options.hitRadius + options.radius, 2);
+    }
+    inXRange(mouseX, useFinalPosition) {
+      return inRange$1(this, mouseX, "x", useFinalPosition);
+    }
+    inYRange(mouseY, useFinalPosition) {
+      return inRange$1(this, mouseY, "y", useFinalPosition);
+    }
+    getCenterPoint(useFinalPosition) {
+      const { x, y } = this.getProps([
+        "x",
+        "y"
+      ], useFinalPosition);
+      return {
+        x,
+        y
+      };
+    }
+    size(options) {
+      options = options || this.options || {};
+      let radius = options.radius || 0;
+      radius = Math.max(radius, radius && options.hoverRadius || 0);
+      const borderWidth = radius && options.borderWidth || 0;
+      return (radius + borderWidth) * 2;
+    }
+    draw(ctx, area) {
+      const options = this.options;
+      if (this.skip || options.radius < 0.1 || !_isPointInArea(this, area, this.size(options) / 2)) {
+        return;
+      }
+      ctx.strokeStyle = options.borderColor;
+      ctx.lineWidth = options.borderWidth;
+      ctx.fillStyle = options.backgroundColor;
+      drawPoint(ctx, options, this.x, this.y);
+    }
+    getRange() {
+      const options = this.options || {};
+      return options.radius + options.hitRadius;
+    }
+  }
+  __publicField(PointElement, "id", "point");
+  /**
+  * @type {any}
+  */
+  __publicField(PointElement, "defaults", {
+    borderWidth: 1,
+    hitRadius: 1,
+    hoverBorderWidth: 1,
+    hoverRadius: 4,
+    pointStyle: "circle",
+    radius: 3,
+    rotation: 0
+  });
+  /**
+  * @type {any}
+  */
+  __publicField(PointElement, "defaultRoutes", {
+    backgroundColor: "backgroundColor",
+    borderColor: "borderColor"
+  });
+  function _segments(line, target, property) {
+    const segments = line.segments;
+    const points = line.points;
+    const tpoints = target.points;
+    const parts = [];
+    for (const segment of segments) {
+      let { start, end } = segment;
+      end = _findSegmentEnd(start, end, points);
+      const bounds = _getBounds(property, points[start], points[end], segment.loop);
+      if (!target.segments) {
+        parts.push({
+          source: segment,
+          target: bounds,
+          start: points[start],
+          end: points[end]
+        });
+        continue;
+      }
+      const targetSegments = _boundSegments(target, bounds);
+      for (const tgt of targetSegments) {
+        const subBounds = _getBounds(property, tpoints[tgt.start], tpoints[tgt.end], tgt.loop);
+        const fillSources = _boundSegment(segment, points, subBounds);
+        for (const fillSource of fillSources) {
+          parts.push({
+            source: fillSource,
+            target: tgt,
+            start: {
+              [property]: _getEdge(bounds, subBounds, "start", Math.max)
+            },
+            end: {
+              [property]: _getEdge(bounds, subBounds, "end", Math.min)
+            }
+          });
+        }
+      }
+    }
+    return parts;
+  }
+  function _getBounds(property, first, last, loop) {
+    if (loop) {
+      return;
+    }
+    let start = first[property];
+    let end = last[property];
+    if (property === "angle") {
+      start = _normalizeAngle(start);
+      end = _normalizeAngle(end);
+    }
+    return {
+      property,
+      start,
+      end
+    };
+  }
+  function _pointsFromSegments(boundary, line) {
+    const { x = null, y = null } = boundary || {};
+    const linePoints = line.points;
+    const points = [];
+    line.segments.forEach(({ start, end }) => {
+      end = _findSegmentEnd(start, end, linePoints);
+      const first = linePoints[start];
+      const last = linePoints[end];
+      if (y !== null) {
+        points.push({
+          x: first.x,
+          y
+        });
+        points.push({
+          x: last.x,
+          y
+        });
+      } else if (x !== null) {
+        points.push({
+          x,
+          y: first.y
+        });
+        points.push({
+          x,
+          y: last.y
+        });
+      }
+    });
+    return points;
+  }
+  function _findSegmentEnd(start, end, points) {
+    for (; end > start; end--) {
+      const point = points[end];
+      if (!isNaN(point.x) && !isNaN(point.y)) {
+        break;
+      }
+    }
+    return end;
+  }
+  function _getEdge(a, b, prop, fn) {
+    if (a && b) {
+      return fn(a[prop], b[prop]);
+    }
+    return a ? a[prop] : b ? b[prop] : 0;
+  }
+  function _createBoundaryLine(boundary, line) {
+    let points = [];
+    let _loop = false;
+    if (isArray(boundary)) {
+      _loop = true;
+      points = boundary;
+    } else {
+      points = _pointsFromSegments(boundary, line);
+    }
+    return points.length ? new LineElement({
+      points,
+      options: {
+        tension: 0
+      },
+      _loop,
+      _fullLoop: _loop
+    }) : null;
+  }
+  function _shouldApplyFill(source) {
+    return source && source.fill !== false;
+  }
+  function _resolveTarget(sources, index2, propagate) {
+    const source = sources[index2];
+    let fill2 = source.fill;
+    const visited = [
+      index2
+    ];
+    let target;
+    if (!propagate) {
+      return fill2;
+    }
+    while (fill2 !== false && visited.indexOf(fill2) === -1) {
+      if (!isNumberFinite(fill2)) {
+        return fill2;
+      }
+      target = sources[fill2];
+      if (!target) {
+        return false;
+      }
+      if (target.visible) {
+        return fill2;
+      }
+      visited.push(fill2);
+      fill2 = target.fill;
+    }
+    return false;
+  }
+  function _decodeFill(line, index2, count) {
+    const fill2 = parseFillOption(line);
+    if (isObject(fill2)) {
+      return isNaN(fill2.value) ? false : fill2;
+    }
+    let target = parseFloat(fill2);
+    if (isNumberFinite(target) && Math.floor(target) === target) {
+      return decodeTargetIndex(fill2[0], index2, target, count);
+    }
+    return [
+      "origin",
+      "start",
+      "end",
+      "stack",
+      "shape"
+    ].indexOf(fill2) >= 0 && fill2;
+  }
+  function decodeTargetIndex(firstCh, index2, target, count) {
+    if (firstCh === "-" || firstCh === "+") {
+      target = index2 + target;
+    }
+    if (target === index2 || target < 0 || target >= count) {
+      return false;
+    }
+    return target;
+  }
+  function _getTargetPixel(fill2, scale) {
+    let pixel = null;
+    if (fill2 === "start") {
+      pixel = scale.bottom;
+    } else if (fill2 === "end") {
+      pixel = scale.top;
+    } else if (isObject(fill2)) {
+      pixel = scale.getPixelForValue(fill2.value);
+    } else if (scale.getBasePixel) {
+      pixel = scale.getBasePixel();
+    }
+    return pixel;
+  }
+  function _getTargetValue(fill2, scale, startValue) {
+    let value;
+    if (fill2 === "start") {
+      value = startValue;
+    } else if (fill2 === "end") {
+      value = scale.options.reverse ? scale.min : scale.max;
+    } else if (isObject(fill2)) {
+      value = fill2.value;
+    } else {
+      value = scale.getBaseValue();
+    }
+    return value;
+  }
+  function parseFillOption(line) {
+    const options = line.options;
+    const fillOption = options.fill;
+    let fill2 = valueOrDefault(fillOption && fillOption.target, fillOption);
+    if (fill2 === void 0) {
+      fill2 = !!options.backgroundColor;
+    }
+    if (fill2 === false || fill2 === null) {
+      return false;
+    }
+    if (fill2 === true) {
+      return "origin";
+    }
+    return fill2;
+  }
+  function _buildStackLine(source) {
+    const { scale, index: index2, line } = source;
+    const points = [];
+    const segments = line.segments;
+    const sourcePoints = line.points;
+    const linesBelow = getLinesBelow(scale, index2);
+    linesBelow.push(_createBoundaryLine({
+      x: null,
+      y: scale.bottom
+    }, line));
+    for (let i = 0; i < segments.length; i++) {
+      const segment = segments[i];
+      for (let j = segment.start; j <= segment.end; j++) {
+        addPointsBelow(points, sourcePoints[j], linesBelow);
+      }
+    }
+    return new LineElement({
+      points,
+      options: {}
+    });
+  }
+  function getLinesBelow(scale, index2) {
+    const below = [];
+    const metas = scale.getMatchingVisibleMetas("line");
+    for (let i = 0; i < metas.length; i++) {
+      const meta = metas[i];
+      if (meta.index === index2) {
+        break;
+      }
+      if (!meta.hidden) {
+        below.unshift(meta.dataset);
+      }
+    }
+    return below;
+  }
+  function addPointsBelow(points, sourcePoint, linesBelow) {
+    const postponed = [];
+    for (let j = 0; j < linesBelow.length; j++) {
+      const line = linesBelow[j];
+      const { first, last, point } = findPoint(line, sourcePoint, "x");
+      if (!point || first && last) {
+        continue;
+      }
+      if (first) {
+        postponed.unshift(point);
+      } else {
+        points.push(point);
+        if (!last) {
+          break;
+        }
+      }
+    }
+    points.push(...postponed);
+  }
+  function findPoint(line, sourcePoint, property) {
+    const point = line.interpolate(sourcePoint, property);
+    if (!point) {
+      return {};
+    }
+    const pointValue = point[property];
+    const segments = line.segments;
+    const linePoints = line.points;
+    let first = false;
+    let last = false;
+    for (let i = 0; i < segments.length; i++) {
+      const segment = segments[i];
+      const firstValue = linePoints[segment.start][property];
+      const lastValue = linePoints[segment.end][property];
+      if (_isBetween(pointValue, firstValue, lastValue)) {
+        first = pointValue === firstValue;
+        last = pointValue === lastValue;
+        break;
+      }
+    }
+    return {
+      first,
+      last,
+      point
+    };
+  }
+  class simpleArc {
+    constructor(opts) {
+      this.x = opts.x;
+      this.y = opts.y;
+      this.radius = opts.radius;
+    }
+    pathSegment(ctx, bounds, opts) {
+      const { x, y, radius } = this;
+      bounds = bounds || {
+        start: 0,
+        end: TAU
+      };
+      ctx.arc(x, y, radius, bounds.end, bounds.start, true);
+      return !opts.bounds;
+    }
+    interpolate(point) {
+      const { x, y, radius } = this;
+      const angle = point.angle;
+      return {
+        x: x + Math.cos(angle) * radius,
+        y: y + Math.sin(angle) * radius,
+        angle
+      };
+    }
+  }
+  function _getTarget(source) {
+    const { chart, fill: fill2, line } = source;
+    if (isNumberFinite(fill2)) {
+      return getLineByIndex(chart, fill2);
+    }
+    if (fill2 === "stack") {
+      return _buildStackLine(source);
+    }
+    if (fill2 === "shape") {
+      return true;
+    }
+    const boundary = computeBoundary(source);
+    if (boundary instanceof simpleArc) {
+      return boundary;
+    }
+    return _createBoundaryLine(boundary, line);
+  }
+  function getLineByIndex(chart, index2) {
+    const meta = chart.getDatasetMeta(index2);
+    const visible = meta && chart.isDatasetVisible(index2);
+    return visible ? meta.dataset : null;
+  }
+  function computeBoundary(source) {
+    const scale = source.scale || {};
+    if (scale.getPointPositionForValue) {
+      return computeCircularBoundary(source);
+    }
+    return computeLinearBoundary(source);
+  }
+  function computeLinearBoundary(source) {
+    const { scale = {}, fill: fill2 } = source;
+    const pixel = _getTargetPixel(fill2, scale);
+    if (isNumberFinite(pixel)) {
+      const horizontal = scale.isHorizontal();
+      return {
+        x: horizontal ? pixel : null,
+        y: horizontal ? null : pixel
+      };
+    }
+    return null;
+  }
+  function computeCircularBoundary(source) {
+    const { scale, fill: fill2 } = source;
+    const options = scale.options;
+    const length = scale.getLabels().length;
+    const start = options.reverse ? scale.max : scale.min;
+    const value = _getTargetValue(fill2, scale, start);
+    const target = [];
+    if (options.grid.circular) {
+      const center = scale.getPointPositionForValue(0, start);
+      return new simpleArc({
+        x: center.x,
+        y: center.y,
+        radius: scale.getDistanceFromCenterForValue(value)
+      });
+    }
+    for (let i = 0; i < length; ++i) {
+      target.push(scale.getPointPositionForValue(i, value));
+    }
+    return target;
+  }
+  function _drawfill(ctx, source, area) {
+    const target = _getTarget(source);
+    const { chart, index: index2, line, scale, axis } = source;
+    const lineOpts = line.options;
+    const fillOption = lineOpts.fill;
+    const color2 = lineOpts.backgroundColor;
+    const { above = color2, below = color2 } = fillOption || {};
+    const meta = chart.getDatasetMeta(index2);
+    const clip = getDatasetClipArea(chart, meta);
+    if (target && line.points.length) {
+      clipArea(ctx, area);
+      doFill(ctx, {
+        line,
+        target,
+        above,
+        below,
+        area,
+        scale,
+        axis,
+        clip
+      });
+      unclipArea(ctx);
+    }
+  }
+  function doFill(ctx, cfg) {
+    const { line, target, above, below, area, scale, clip } = cfg;
+    const property = line._loop ? "angle" : cfg.axis;
+    ctx.save();
+    let fillColor = below;
+    if (below !== above) {
+      if (property === "x") {
+        clipVertical(ctx, target, area.top);
+        fill(ctx, {
+          line,
+          target,
+          color: above,
+          scale,
+          property,
+          clip
+        });
+        ctx.restore();
+        ctx.save();
+        clipVertical(ctx, target, area.bottom);
+      } else if (property === "y") {
+        clipHorizontal(ctx, target, area.left);
+        fill(ctx, {
+          line,
+          target,
+          color: below,
+          scale,
+          property,
+          clip
+        });
+        ctx.restore();
+        ctx.save();
+        clipHorizontal(ctx, target, area.right);
+        fillColor = above;
+      }
+    }
+    fill(ctx, {
+      line,
+      target,
+      color: fillColor,
+      scale,
+      property,
+      clip
+    });
+    ctx.restore();
+  }
+  function clipVertical(ctx, target, clipY) {
+    const { segments, points } = target;
+    let first = true;
+    let lineLoop = false;
+    ctx.beginPath();
+    for (const segment of segments) {
+      const { start, end } = segment;
+      const firstPoint = points[start];
+      const lastPoint = points[_findSegmentEnd(start, end, points)];
+      if (first) {
+        ctx.moveTo(firstPoint.x, firstPoint.y);
+        first = false;
+      } else {
+        ctx.lineTo(firstPoint.x, clipY);
+        ctx.lineTo(firstPoint.x, firstPoint.y);
+      }
+      lineLoop = !!target.pathSegment(ctx, segment, {
+        move: lineLoop
+      });
+      if (lineLoop) {
+        ctx.closePath();
+      } else {
+        ctx.lineTo(lastPoint.x, clipY);
+      }
+    }
+    ctx.lineTo(target.first().x, clipY);
+    ctx.closePath();
+    ctx.clip();
+  }
+  function clipHorizontal(ctx, target, clipX) {
+    const { segments, points } = target;
+    let first = true;
+    let lineLoop = false;
+    ctx.beginPath();
+    for (const segment of segments) {
+      const { start, end } = segment;
+      const firstPoint = points[start];
+      const lastPoint = points[_findSegmentEnd(start, end, points)];
+      if (first) {
+        ctx.moveTo(firstPoint.x, firstPoint.y);
+        first = false;
+      } else {
+        ctx.lineTo(clipX, firstPoint.y);
+        ctx.lineTo(firstPoint.x, firstPoint.y);
+      }
+      lineLoop = !!target.pathSegment(ctx, segment, {
+        move: lineLoop
+      });
+      if (lineLoop) {
+        ctx.closePath();
+      } else {
+        ctx.lineTo(clipX, lastPoint.y);
+      }
+    }
+    ctx.lineTo(clipX, target.first().y);
+    ctx.closePath();
+    ctx.clip();
+  }
+  function fill(ctx, cfg) {
+    const { line, target, property, color: color2, scale, clip } = cfg;
+    const segments = _segments(line, target, property);
+    for (const { source: src, target: tgt, start, end } of segments) {
+      const { style: { backgroundColor = color2 } = {} } = src;
+      const notShape = target !== true;
+      ctx.save();
+      ctx.fillStyle = backgroundColor;
+      clipBounds(ctx, scale, clip, notShape && _getBounds(property, start, end));
+      ctx.beginPath();
+      const lineLoop = !!line.pathSegment(ctx, src);
+      let loop;
+      if (notShape) {
+        if (lineLoop) {
+          ctx.closePath();
+        } else {
+          interpolatedLineTo(ctx, target, end, property);
+        }
+        const targetLoop = !!target.pathSegment(ctx, tgt, {
+          move: lineLoop,
+          reverse: true
+        });
+        loop = lineLoop && targetLoop;
+        if (!loop) {
+          interpolatedLineTo(ctx, target, start, property);
+        }
+      }
+      ctx.closePath();
+      ctx.fill(loop ? "evenodd" : "nonzero");
+      ctx.restore();
+    }
+  }
+  function clipBounds(ctx, scale, clip, bounds) {
+    const chartArea = scale.chart.chartArea;
+    const { property, start, end } = bounds || {};
+    if (property === "x" || property === "y") {
+      let left, top, right, bottom;
+      if (property === "x") {
+        left = start;
+        top = chartArea.top;
+        right = end;
+        bottom = chartArea.bottom;
+      } else {
+        left = chartArea.left;
+        top = start;
+        right = chartArea.right;
+        bottom = end;
+      }
+      ctx.beginPath();
+      if (clip) {
+        left = Math.max(left, clip.left);
+        right = Math.min(right, clip.right);
+        top = Math.max(top, clip.top);
+        bottom = Math.min(bottom, clip.bottom);
+      }
+      ctx.rect(left, top, right - left, bottom - top);
+      ctx.clip();
+    }
+  }
+  function interpolatedLineTo(ctx, target, point, property) {
+    const interpolatedPoint = target.interpolate(point, property);
+    if (interpolatedPoint) {
+      ctx.lineTo(interpolatedPoint.x, interpolatedPoint.y);
+    }
+  }
+  var index = {
+    id: "filler",
+    afterDatasetsUpdate(chart, _args, options) {
+      const count = (chart.data.datasets || []).length;
+      const sources = [];
+      let meta, i, line, source;
+      for (i = 0; i < count; ++i) {
+        meta = chart.getDatasetMeta(i);
+        line = meta.dataset;
+        source = null;
+        if (line && line.options && line instanceof LineElement) {
+          source = {
+            visible: chart.isDatasetVisible(i),
+            index: i,
+            fill: _decodeFill(line, i, count),
+            chart,
+            axis: meta.controller.options.indexAxis,
+            scale: meta.vScale,
+            line
+          };
+        }
+        meta.$filler = source;
+        sources.push(source);
+      }
+      for (i = 0; i < count; ++i) {
+        source = sources[i];
+        if (!source || source.fill === false) {
+          continue;
+        }
+        source.fill = _resolveTarget(sources, i, options.propagate);
+      }
+    },
+    beforeDraw(chart, _args, options) {
+      const draw2 = options.drawTime === "beforeDraw";
+      const metasets = chart.getSortedVisibleDatasetMetas();
+      const area = chart.chartArea;
+      for (let i = metasets.length - 1; i >= 0; --i) {
+        const source = metasets[i].$filler;
+        if (!source) {
+          continue;
+        }
+        source.line.updateControlPoints(area, source.axis);
+        if (draw2 && source.fill) {
+          _drawfill(chart.ctx, source, area);
+        }
+      }
+    },
+    beforeDatasetsDraw(chart, _args, options) {
+      if (options.drawTime !== "beforeDatasetsDraw") {
+        return;
+      }
+      const metasets = chart.getSortedVisibleDatasetMetas();
+      for (let i = metasets.length - 1; i >= 0; --i) {
+        const source = metasets[i].$filler;
+        if (_shouldApplyFill(source)) {
+          _drawfill(chart.ctx, source, chart.chartArea);
+        }
+      }
+    },
+    beforeDatasetDraw(chart, args, options) {
+      const source = args.meta.$filler;
+      if (!_shouldApplyFill(source) || options.drawTime !== "beforeDatasetDraw") {
+        return;
+      }
+      _drawfill(chart.ctx, source, chart.chartArea);
+    },
+    defaults: {
+      propagate: true,
+      drawTime: "beforeDatasetDraw"
+    }
+  };
+  const getBoxSize = (labelOpts, fontSize) => {
+    let { boxHeight = fontSize, boxWidth = fontSize } = labelOpts;
+    if (labelOpts.usePointStyle) {
+      boxHeight = Math.min(boxHeight, fontSize);
+      boxWidth = labelOpts.pointStyleWidth || Math.min(boxWidth, fontSize);
+    }
+    return {
+      boxWidth,
+      boxHeight,
+      itemHeight: Math.max(fontSize, boxHeight)
+    };
+  };
+  const itemsEqual = (a, b) => a !== null && b !== null && a.datasetIndex === b.datasetIndex && a.index === b.index;
+  class Legend extends Element {
+    constructor(config) {
+      super();
+      this._added = false;
+      this.legendHitBoxes = [];
+      this._hoveredItem = null;
+      this.doughnutMode = false;
+      this.chart = config.chart;
+      this.options = config.options;
+      this.ctx = config.ctx;
+      this.legendItems = void 0;
+      this.columnSizes = void 0;
+      this.lineWidths = void 0;
+      this.maxHeight = void 0;
+      this.maxWidth = void 0;
+      this.top = void 0;
+      this.bottom = void 0;
+      this.left = void 0;
+      this.right = void 0;
+      this.height = void 0;
+      this.width = void 0;
+      this._margins = void 0;
+      this.position = void 0;
+      this.weight = void 0;
+      this.fullSize = void 0;
+    }
+    update(maxWidth, maxHeight, margins) {
+      this.maxWidth = maxWidth;
+      this.maxHeight = maxHeight;
+      this._margins = margins;
+      this.setDimensions();
+      this.buildLabels();
+      this.fit();
+    }
+    setDimensions() {
+      if (this.isHorizontal()) {
+        this.width = this.maxWidth;
+        this.left = this._margins.left;
+        this.right = this.width;
+      } else {
+        this.height = this.maxHeight;
+        this.top = this._margins.top;
+        this.bottom = this.height;
+      }
+    }
+    buildLabels() {
+      const labelOpts = this.options.labels || {};
+      let legendItems = callback(labelOpts.generateLabels, [
+        this.chart
+      ], this) || [];
+      if (labelOpts.filter) {
+        legendItems = legendItems.filter((item) => labelOpts.filter(item, this.chart.data));
+      }
+      if (labelOpts.sort) {
+        legendItems = legendItems.sort((a, b) => labelOpts.sort(a, b, this.chart.data));
+      }
+      if (this.options.reverse) {
+        legendItems.reverse();
+      }
+      this.legendItems = legendItems;
+    }
+    fit() {
+      const { options, ctx } = this;
+      if (!options.display) {
+        this.width = this.height = 0;
+        return;
+      }
+      const labelOpts = options.labels;
+      const labelFont = toFont(labelOpts.font);
+      const fontSize = labelFont.size;
+      const titleHeight = this._computeTitleHeight();
+      const { boxWidth, itemHeight } = getBoxSize(labelOpts, fontSize);
+      let width, height;
+      ctx.font = labelFont.string;
+      if (this.isHorizontal()) {
+        width = this.maxWidth;
+        height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight) + 10;
+      } else {
+        height = this.maxHeight;
+        width = this._fitCols(titleHeight, labelFont, boxWidth, itemHeight) + 10;
+      }
+      this.width = Math.min(width, options.maxWidth || this.maxWidth);
+      this.height = Math.min(height, options.maxHeight || this.maxHeight);
+    }
+    _fitRows(titleHeight, fontSize, boxWidth, itemHeight) {
+      const { ctx, maxWidth, options: { labels: { padding } } } = this;
+      const hitboxes = this.legendHitBoxes = [];
+      const lineWidths = this.lineWidths = [
+        0
+      ];
+      const lineHeight = itemHeight + padding;
+      let totalHeight = titleHeight;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "middle";
+      let row = -1;
+      let top = -lineHeight;
+      this.legendItems.forEach((legendItem, i) => {
+        const itemWidth = boxWidth + fontSize / 2 + ctx.measureText(legendItem.text).width;
+        if (i === 0 || lineWidths[lineWidths.length - 1] + itemWidth + 2 * padding > maxWidth) {
+          totalHeight += lineHeight;
+          lineWidths[lineWidths.length - (i > 0 ? 0 : 1)] = 0;
+          top += lineHeight;
+          row++;
+        }
+        hitboxes[i] = {
+          left: 0,
+          top,
+          row,
+          width: itemWidth,
+          height: itemHeight
+        };
+        lineWidths[lineWidths.length - 1] += itemWidth + padding;
+      });
+      return totalHeight;
+    }
+    _fitCols(titleHeight, labelFont, boxWidth, _itemHeight) {
+      const { ctx, maxHeight, options: { labels: { padding } } } = this;
+      const hitboxes = this.legendHitBoxes = [];
+      const columnSizes = this.columnSizes = [];
+      const heightLimit = maxHeight - titleHeight;
+      let totalWidth = padding;
+      let currentColWidth = 0;
+      let currentColHeight = 0;
+      let left = 0;
+      let col = 0;
+      this.legendItems.forEach((legendItem, i) => {
+        const { itemWidth, itemHeight } = calculateItemSize(boxWidth, labelFont, ctx, legendItem, _itemHeight);
+        if (i > 0 && currentColHeight + itemHeight + 2 * padding > heightLimit) {
+          totalWidth += currentColWidth + padding;
+          columnSizes.push({
+            width: currentColWidth,
+            height: currentColHeight
+          });
+          left += currentColWidth + padding;
+          col++;
+          currentColWidth = currentColHeight = 0;
+        }
+        hitboxes[i] = {
+          left,
+          top: currentColHeight,
+          col,
+          width: itemWidth,
+          height: itemHeight
+        };
+        currentColWidth = Math.max(currentColWidth, itemWidth);
+        currentColHeight += itemHeight + padding;
+      });
+      totalWidth += currentColWidth;
+      columnSizes.push({
+        width: currentColWidth,
+        height: currentColHeight
+      });
+      return totalWidth;
+    }
+    adjustHitBoxes() {
+      if (!this.options.display) {
+        return;
+      }
+      const titleHeight = this._computeTitleHeight();
+      const { legendHitBoxes: hitboxes, options: { align, labels: { padding }, rtl } } = this;
+      const rtlHelper = getRtlAdapter(rtl, this.left, this.width);
+      if (this.isHorizontal()) {
+        let row = 0;
+        let left = _alignStartEnd(align, this.left + padding, this.right - this.lineWidths[row]);
+        for (const hitbox of hitboxes) {
+          if (row !== hitbox.row) {
+            row = hitbox.row;
+            left = _alignStartEnd(align, this.left + padding, this.right - this.lineWidths[row]);
+          }
+          hitbox.top += this.top + titleHeight + padding;
+          hitbox.left = rtlHelper.leftForLtr(rtlHelper.x(left), hitbox.width);
+          left += hitbox.width + padding;
+        }
+      } else {
+        let col = 0;
+        let top = _alignStartEnd(align, this.top + titleHeight + padding, this.bottom - this.columnSizes[col].height);
+        for (const hitbox of hitboxes) {
+          if (hitbox.col !== col) {
+            col = hitbox.col;
+            top = _alignStartEnd(align, this.top + titleHeight + padding, this.bottom - this.columnSizes[col].height);
+          }
+          hitbox.top = top;
+          hitbox.left += this.left + padding;
+          hitbox.left = rtlHelper.leftForLtr(rtlHelper.x(hitbox.left), hitbox.width);
+          top += hitbox.height + padding;
+        }
+      }
+    }
+    isHorizontal() {
+      return this.options.position === "top" || this.options.position === "bottom";
+    }
+    draw() {
+      if (this.options.display) {
+        const ctx = this.ctx;
+        clipArea(ctx, this);
+        this._draw();
+        unclipArea(ctx);
+      }
+    }
+    _draw() {
+      const { options: opts, columnSizes, lineWidths, ctx } = this;
+      const { align, labels: labelOpts } = opts;
+      const defaultColor = defaults.color;
+      const rtlHelper = getRtlAdapter(opts.rtl, this.left, this.width);
+      const labelFont = toFont(labelOpts.font);
+      const { padding } = labelOpts;
+      const fontSize = labelFont.size;
+      const halfFontSize = fontSize / 2;
+      let cursor;
+      this.drawTitle();
+      ctx.textAlign = rtlHelper.textAlign("left");
+      ctx.textBaseline = "middle";
+      ctx.lineWidth = 0.5;
+      ctx.font = labelFont.string;
+      const { boxWidth, boxHeight, itemHeight } = getBoxSize(labelOpts, fontSize);
+      const drawLegendBox = function(x, y, legendItem) {
+        if (isNaN(boxWidth) || boxWidth <= 0 || isNaN(boxHeight) || boxHeight < 0) {
+          return;
+        }
+        ctx.save();
+        const lineWidth = valueOrDefault(legendItem.lineWidth, 1);
+        ctx.fillStyle = valueOrDefault(legendItem.fillStyle, defaultColor);
+        ctx.lineCap = valueOrDefault(legendItem.lineCap, "butt");
+        ctx.lineDashOffset = valueOrDefault(legendItem.lineDashOffset, 0);
+        ctx.lineJoin = valueOrDefault(legendItem.lineJoin, "miter");
+        ctx.lineWidth = lineWidth;
+        ctx.strokeStyle = valueOrDefault(legendItem.strokeStyle, defaultColor);
+        ctx.setLineDash(valueOrDefault(legendItem.lineDash, []));
+        if (labelOpts.usePointStyle) {
+          const drawOptions = {
+            radius: boxHeight * Math.SQRT2 / 2,
+            pointStyle: legendItem.pointStyle,
+            rotation: legendItem.rotation,
+            borderWidth: lineWidth
+          };
+          const centerX = rtlHelper.xPlus(x, boxWidth / 2);
+          const centerY = y + halfFontSize;
+          drawPointLegend(ctx, drawOptions, centerX, centerY, labelOpts.pointStyleWidth && boxWidth);
+        } else {
+          const yBoxTop = y + Math.max((fontSize - boxHeight) / 2, 0);
+          const xBoxLeft = rtlHelper.leftForLtr(x, boxWidth);
+          const borderRadius = toTRBLCorners(legendItem.borderRadius);
+          ctx.beginPath();
+          if (Object.values(borderRadius).some((v) => v !== 0)) {
+            addRoundedRectPath(ctx, {
+              x: xBoxLeft,
+              y: yBoxTop,
+              w: boxWidth,
+              h: boxHeight,
+              radius: borderRadius
+            });
+          } else {
+            ctx.rect(xBoxLeft, yBoxTop, boxWidth, boxHeight);
+          }
+          ctx.fill();
+          if (lineWidth !== 0) {
+            ctx.stroke();
+          }
+        }
+        ctx.restore();
+      };
+      const fillText = function(x, y, legendItem) {
+        renderText(ctx, legendItem.text, x, y + itemHeight / 2, labelFont, {
+          strikethrough: legendItem.hidden,
+          textAlign: rtlHelper.textAlign(legendItem.textAlign)
+        });
+      };
+      const isHorizontal = this.isHorizontal();
+      const titleHeight = this._computeTitleHeight();
+      if (isHorizontal) {
+        cursor = {
+          x: _alignStartEnd(align, this.left + padding, this.right - lineWidths[0]),
+          y: this.top + padding + titleHeight,
+          line: 0
+        };
+      } else {
+        cursor = {
+          x: this.left + padding,
+          y: _alignStartEnd(align, this.top + titleHeight + padding, this.bottom - columnSizes[0].height),
+          line: 0
+        };
+      }
+      overrideTextDirection(this.ctx, opts.textDirection);
+      const lineHeight = itemHeight + padding;
+      this.legendItems.forEach((legendItem, i) => {
+        ctx.strokeStyle = legendItem.fontColor;
+        ctx.fillStyle = legendItem.fontColor;
+        const textWidth = ctx.measureText(legendItem.text).width;
+        const textAlign = rtlHelper.textAlign(legendItem.textAlign || (legendItem.textAlign = labelOpts.textAlign));
+        const width = boxWidth + halfFontSize + textWidth;
+        let x = cursor.x;
+        let y = cursor.y;
+        rtlHelper.setWidth(this.width);
+        if (isHorizontal) {
+          if (i > 0 && x + width + padding > this.right) {
+            y = cursor.y += lineHeight;
+            cursor.line++;
+            x = cursor.x = _alignStartEnd(align, this.left + padding, this.right - lineWidths[cursor.line]);
+          }
+        } else if (i > 0 && y + lineHeight > this.bottom) {
+          x = cursor.x = x + columnSizes[cursor.line].width + padding;
+          cursor.line++;
+          y = cursor.y = _alignStartEnd(align, this.top + titleHeight + padding, this.bottom - columnSizes[cursor.line].height);
+        }
+        const realX = rtlHelper.x(x);
+        drawLegendBox(realX, y, legendItem);
+        x = _textX(textAlign, x + boxWidth + halfFontSize, isHorizontal ? x + width : this.right, opts.rtl);
+        fillText(rtlHelper.x(x), y, legendItem);
+        if (isHorizontal) {
+          cursor.x += width + padding;
+        } else if (typeof legendItem.text !== "string") {
+          const fontLineHeight = labelFont.lineHeight;
+          cursor.y += calculateLegendItemHeight(legendItem, fontLineHeight) + padding;
+        } else {
+          cursor.y += lineHeight;
+        }
+      });
+      restoreTextDirection(this.ctx, opts.textDirection);
+    }
+    drawTitle() {
+      const opts = this.options;
+      const titleOpts = opts.title;
+      const titleFont = toFont(titleOpts.font);
+      const titlePadding = toPadding(titleOpts.padding);
+      if (!titleOpts.display) {
+        return;
+      }
+      const rtlHelper = getRtlAdapter(opts.rtl, this.left, this.width);
+      const ctx = this.ctx;
+      const position = titleOpts.position;
+      const halfFontSize = titleFont.size / 2;
+      const topPaddingPlusHalfFontSize = titlePadding.top + halfFontSize;
+      let y;
+      let left = this.left;
+      let maxWidth = this.width;
+      if (this.isHorizontal()) {
+        maxWidth = Math.max(...this.lineWidths);
+        y = this.top + topPaddingPlusHalfFontSize;
+        left = _alignStartEnd(opts.align, left, this.right - maxWidth);
+      } else {
+        const maxHeight = this.columnSizes.reduce((acc, size) => Math.max(acc, size.height), 0);
+        y = topPaddingPlusHalfFontSize + _alignStartEnd(opts.align, this.top, this.bottom - maxHeight - opts.labels.padding - this._computeTitleHeight());
+      }
+      const x = _alignStartEnd(position, left, left + maxWidth);
+      ctx.textAlign = rtlHelper.textAlign(_toLeftRightCenter(position));
+      ctx.textBaseline = "middle";
+      ctx.strokeStyle = titleOpts.color;
+      ctx.fillStyle = titleOpts.color;
+      ctx.font = titleFont.string;
+      renderText(ctx, titleOpts.text, x, y, titleFont);
+    }
+    _computeTitleHeight() {
+      const titleOpts = this.options.title;
+      const titleFont = toFont(titleOpts.font);
+      const titlePadding = toPadding(titleOpts.padding);
+      return titleOpts.display ? titleFont.lineHeight + titlePadding.height : 0;
+    }
+    _getLegendItemAt(x, y) {
+      let i, hitBox, lh;
+      if (_isBetween(x, this.left, this.right) && _isBetween(y, this.top, this.bottom)) {
+        lh = this.legendHitBoxes;
+        for (i = 0; i < lh.length; ++i) {
+          hitBox = lh[i];
+          if (_isBetween(x, hitBox.left, hitBox.left + hitBox.width) && _isBetween(y, hitBox.top, hitBox.top + hitBox.height)) {
+            return this.legendItems[i];
+          }
+        }
+      }
+      return null;
+    }
+    handleEvent(e) {
+      const opts = this.options;
+      if (!isListened(e.type, opts)) {
+        return;
+      }
+      const hoveredItem = this._getLegendItemAt(e.x, e.y);
+      if (e.type === "mousemove" || e.type === "mouseout") {
+        const previous = this._hoveredItem;
+        const sameItem = itemsEqual(previous, hoveredItem);
+        if (previous && !sameItem) {
+          callback(opts.onLeave, [
+            e,
+            previous,
+            this
+          ], this);
+        }
+        this._hoveredItem = hoveredItem;
+        if (hoveredItem && !sameItem) {
+          callback(opts.onHover, [
+            e,
+            hoveredItem,
+            this
+          ], this);
+        }
+      } else if (hoveredItem) {
+        callback(opts.onClick, [
+          e,
+          hoveredItem,
+          this
+        ], this);
+      }
+    }
+  }
+  function calculateItemSize(boxWidth, labelFont, ctx, legendItem, _itemHeight) {
+    const itemWidth = calculateItemWidth(legendItem, boxWidth, labelFont, ctx);
+    const itemHeight = calculateItemHeight(_itemHeight, legendItem, labelFont.lineHeight);
+    return {
+      itemWidth,
+      itemHeight
+    };
+  }
+  function calculateItemWidth(legendItem, boxWidth, labelFont, ctx) {
+    let legendItemText = legendItem.text;
+    if (legendItemText && typeof legendItemText !== "string") {
+      legendItemText = legendItemText.reduce((a, b) => a.length > b.length ? a : b);
+    }
+    return boxWidth + labelFont.size / 2 + ctx.measureText(legendItemText).width;
+  }
+  function calculateItemHeight(_itemHeight, legendItem, fontLineHeight) {
+    let itemHeight = _itemHeight;
+    if (typeof legendItem.text !== "string") {
+      itemHeight = calculateLegendItemHeight(legendItem, fontLineHeight);
+    }
+    return itemHeight;
+  }
+  function calculateLegendItemHeight(legendItem, fontLineHeight) {
+    const labelHeight = legendItem.text ? legendItem.text.length : 0;
+    return fontLineHeight * labelHeight;
+  }
+  function isListened(type, opts) {
+    if ((type === "mousemove" || type === "mouseout") && (opts.onHover || opts.onLeave)) {
+      return true;
+    }
+    if (opts.onClick && (type === "click" || type === "mouseup")) {
+      return true;
+    }
+    return false;
+  }
+  var plugin_legend = {
+    id: "legend",
+    _element: Legend,
+    start(chart, _args, options) {
+      const legend = chart.legend = new Legend({
+        ctx: chart.ctx,
+        options,
+        chart
+      });
+      layouts.configure(chart, legend, options);
+      layouts.addBox(chart, legend);
+    },
+    stop(chart) {
+      layouts.removeBox(chart, chart.legend);
+      delete chart.legend;
+    },
+    beforeUpdate(chart, _args, options) {
+      const legend = chart.legend;
+      layouts.configure(chart, legend, options);
+      legend.options = options;
+    },
+    afterUpdate(chart) {
+      const legend = chart.legend;
+      legend.buildLabels();
+      legend.adjustHitBoxes();
+    },
+    afterEvent(chart, args) {
+      if (!args.replay) {
+        chart.legend.handleEvent(args.event);
+      }
+    },
+    defaults: {
+      display: true,
+      position: "top",
+      align: "center",
+      fullSize: true,
+      reverse: false,
+      weight: 1e3,
+      onClick(e, legendItem, legend) {
+        const index2 = legendItem.datasetIndex;
+        const ci = legend.chart;
+        if (ci.isDatasetVisible(index2)) {
+          ci.hide(index2);
+          legendItem.hidden = true;
+        } else {
+          ci.show(index2);
+          legendItem.hidden = false;
+        }
+      },
+      onHover: null,
+      onLeave: null,
+      labels: {
+        color: (ctx) => ctx.chart.options.color,
+        boxWidth: 40,
+        padding: 10,
+        generateLabels(chart) {
+          const datasets = chart.data.datasets;
+          const { labels: { usePointStyle, pointStyle, textAlign, color: color2, useBorderRadius, borderRadius } } = chart.legend.options;
+          return chart._getSortedDatasetMetas().map((meta) => {
+            const style = meta.controller.getStyle(usePointStyle ? 0 : void 0);
+            const borderWidth = toPadding(style.borderWidth);
+            return {
+              text: datasets[meta.index].label,
+              fillStyle: style.backgroundColor,
+              fontColor: color2,
+              hidden: !meta.visible,
+              lineCap: style.borderCapStyle,
+              lineDash: style.borderDash,
+              lineDashOffset: style.borderDashOffset,
+              lineJoin: style.borderJoinStyle,
+              lineWidth: (borderWidth.width + borderWidth.height) / 4,
+              strokeStyle: style.borderColor,
+              pointStyle: pointStyle || style.pointStyle,
+              rotation: style.rotation,
+              textAlign: textAlign || style.textAlign,
+              borderRadius: useBorderRadius && (borderRadius || style.borderRadius),
+              datasetIndex: meta.index
+            };
+          }, this);
+        }
+      },
+      title: {
+        color: (ctx) => ctx.chart.options.color,
+        display: false,
+        position: "center",
+        text: ""
+      }
+    },
+    descriptors: {
+      _scriptable: (name) => !name.startsWith("on"),
+      labels: {
+        _scriptable: (name) => ![
+          "generateLabels",
+          "filter",
+          "sort"
+        ].includes(name)
+      }
+    }
+  };
+  const positioners = {
+    average(items) {
+      if (!items.length) {
+        return false;
+      }
+      let i, len;
+      let xSet = /* @__PURE__ */ new Set();
+      let y = 0;
+      let count = 0;
+      for (i = 0, len = items.length; i < len; ++i) {
+        const el = items[i].element;
+        if (el && el.hasValue()) {
+          const pos = el.tooltipPosition();
+          xSet.add(pos.x);
+          y += pos.y;
+          ++count;
+        }
+      }
+      if (count === 0 || xSet.size === 0) {
+        return false;
+      }
+      const xAverage = [
+        ...xSet
+      ].reduce((a, b) => a + b) / xSet.size;
+      return {
+        x: xAverage,
+        y: y / count
+      };
+    },
+    nearest(items, eventPosition) {
+      if (!items.length) {
+        return false;
+      }
+      let x = eventPosition.x;
+      let y = eventPosition.y;
+      let minDistance = Number.POSITIVE_INFINITY;
+      let i, len, nearestElement;
+      for (i = 0, len = items.length; i < len; ++i) {
+        const el = items[i].element;
+        if (el && el.hasValue()) {
+          const center = el.getCenterPoint();
+          const d = distanceBetweenPoints(eventPosition, center);
+          if (d < minDistance) {
+            minDistance = d;
+            nearestElement = el;
+          }
+        }
+      }
+      if (nearestElement) {
+        const tp = nearestElement.tooltipPosition();
+        x = tp.x;
+        y = tp.y;
+      }
+      return {
+        x,
+        y
+      };
+    }
+  };
+  function pushOrConcat(base, toPush) {
+    if (toPush) {
+      if (isArray(toPush)) {
+        Array.prototype.push.apply(base, toPush);
+      } else {
+        base.push(toPush);
+      }
+    }
+    return base;
+  }
+  function splitNewlines(str) {
+    if ((typeof str === "string" || str instanceof String) && str.indexOf("\n") > -1) {
+      return str.split("\n");
+    }
+    return str;
+  }
+  function createTooltipItem(chart, item) {
+    const { element, datasetIndex, index: index2 } = item;
+    const controller = chart.getDatasetMeta(datasetIndex).controller;
+    const { label, value } = controller.getLabelAndValue(index2);
+    return {
+      chart,
+      label,
+      parsed: controller.getParsed(index2),
+      raw: chart.data.datasets[datasetIndex].data[index2],
+      formattedValue: value,
+      dataset: controller.getDataset(),
+      dataIndex: index2,
+      datasetIndex,
+      element
+    };
+  }
+  function getTooltipSize(tooltip, options) {
+    const ctx = tooltip.chart.ctx;
+    const { body, footer, title } = tooltip;
+    const { boxWidth, boxHeight } = options;
+    const bodyFont = toFont(options.bodyFont);
+    const titleFont = toFont(options.titleFont);
+    const footerFont = toFont(options.footerFont);
+    const titleLineCount = title.length;
+    const footerLineCount = footer.length;
+    const bodyLineItemCount = body.length;
+    const padding = toPadding(options.padding);
+    let height = padding.height;
+    let width = 0;
+    let combinedBodyLength = body.reduce((count, bodyItem) => count + bodyItem.before.length + bodyItem.lines.length + bodyItem.after.length, 0);
+    combinedBodyLength += tooltip.beforeBody.length + tooltip.afterBody.length;
+    if (titleLineCount) {
+      height += titleLineCount * titleFont.lineHeight + (titleLineCount - 1) * options.titleSpacing + options.titleMarginBottom;
+    }
+    if (combinedBodyLength) {
+      const bodyLineHeight = options.displayColors ? Math.max(boxHeight, bodyFont.lineHeight) : bodyFont.lineHeight;
+      height += bodyLineItemCount * bodyLineHeight + (combinedBodyLength - bodyLineItemCount) * bodyFont.lineHeight + (combinedBodyLength - 1) * options.bodySpacing;
+    }
+    if (footerLineCount) {
+      height += options.footerMarginTop + footerLineCount * footerFont.lineHeight + (footerLineCount - 1) * options.footerSpacing;
+    }
+    let widthPadding = 0;
+    const maxLineWidth = function(line) {
+      width = Math.max(width, ctx.measureText(line).width + widthPadding);
+    };
+    ctx.save();
+    ctx.font = titleFont.string;
+    each(tooltip.title, maxLineWidth);
+    ctx.font = bodyFont.string;
+    each(tooltip.beforeBody.concat(tooltip.afterBody), maxLineWidth);
+    widthPadding = options.displayColors ? boxWidth + 2 + options.boxPadding : 0;
+    each(body, (bodyItem) => {
+      each(bodyItem.before, maxLineWidth);
+      each(bodyItem.lines, maxLineWidth);
+      each(bodyItem.after, maxLineWidth);
+    });
+    widthPadding = 0;
+    ctx.font = footerFont.string;
+    each(tooltip.footer, maxLineWidth);
+    ctx.restore();
+    width += padding.width;
+    return {
+      width,
+      height
+    };
+  }
+  function determineYAlign(chart, size) {
+    const { y, height } = size;
+    if (y < height / 2) {
+      return "top";
+    } else if (y > chart.height - height / 2) {
+      return "bottom";
+    }
+    return "center";
+  }
+  function doesNotFitWithAlign(xAlign, chart, options, size) {
+    const { x, width } = size;
+    const caret = options.caretSize + options.caretPadding;
+    if (xAlign === "left" && x + width + caret > chart.width) {
+      return true;
+    }
+    if (xAlign === "right" && x - width - caret < 0) {
+      return true;
+    }
+  }
+  function determineXAlign(chart, options, size, yAlign) {
+    const { x, width } = size;
+    const { width: chartWidth, chartArea: { left, right } } = chart;
+    let xAlign = "center";
+    if (yAlign === "center") {
+      xAlign = x <= (left + right) / 2 ? "left" : "right";
+    } else if (x <= width / 2) {
+      xAlign = "left";
+    } else if (x >= chartWidth - width / 2) {
+      xAlign = "right";
+    }
+    if (doesNotFitWithAlign(xAlign, chart, options, size)) {
+      xAlign = "center";
+    }
+    return xAlign;
+  }
+  function determineAlignment(chart, options, size) {
+    const yAlign = size.yAlign || options.yAlign || determineYAlign(chart, size);
+    return {
+      xAlign: size.xAlign || options.xAlign || determineXAlign(chart, options, size, yAlign),
+      yAlign
+    };
+  }
+  function alignX(size, xAlign) {
+    let { x, width } = size;
+    if (xAlign === "right") {
+      x -= width;
+    } else if (xAlign === "center") {
+      x -= width / 2;
+    }
+    return x;
+  }
+  function alignY(size, yAlign, paddingAndSize) {
+    let { y, height } = size;
+    if (yAlign === "top") {
+      y += paddingAndSize;
+    } else if (yAlign === "bottom") {
+      y -= height + paddingAndSize;
+    } else {
+      y -= height / 2;
+    }
+    return y;
+  }
+  function getBackgroundPoint(options, size, alignment, chart) {
+    const { caretSize, caretPadding, cornerRadius } = options;
+    const { xAlign, yAlign } = alignment;
+    const paddingAndSize = caretSize + caretPadding;
+    const { topLeft, topRight, bottomLeft, bottomRight } = toTRBLCorners(cornerRadius);
+    let x = alignX(size, xAlign);
+    const y = alignY(size, yAlign, paddingAndSize);
+    if (yAlign === "center") {
+      if (xAlign === "left") {
+        x += paddingAndSize;
+      } else if (xAlign === "right") {
+        x -= paddingAndSize;
+      }
+    } else if (xAlign === "left") {
+      x -= Math.max(topLeft, bottomLeft) + caretSize;
+    } else if (xAlign === "right") {
+      x += Math.max(topRight, bottomRight) + caretSize;
+    }
+    return {
+      x: _limitValue(x, 0, chart.width - size.width),
+      y: _limitValue(y, 0, chart.height - size.height)
+    };
+  }
+  function getAlignedX(tooltip, align, options) {
+    const padding = toPadding(options.padding);
+    return align === "center" ? tooltip.x + tooltip.width / 2 : align === "right" ? tooltip.x + tooltip.width - padding.right : tooltip.x + padding.left;
+  }
+  function getBeforeAfterBodyLines(callback2) {
+    return pushOrConcat([], splitNewlines(callback2));
+  }
+  function createTooltipContext(parent, tooltip, tooltipItems) {
+    return createContext(parent, {
+      tooltip,
+      tooltipItems,
+      type: "tooltip"
+    });
+  }
+  function overrideCallbacks(callbacks, context) {
+    const override = context && context.dataset && context.dataset.tooltip && context.dataset.tooltip.callbacks;
+    return override ? callbacks.override(override) : callbacks;
+  }
+  const defaultCallbacks = {
+    beforeTitle: noop,
+    title(tooltipItems) {
+      if (tooltipItems.length > 0) {
+        const item = tooltipItems[0];
+        const labels = item.chart.data.labels;
+        const labelCount = labels ? labels.length : 0;
+        if (this && this.options && this.options.mode === "dataset") {
+          return item.dataset.label || "";
+        } else if (item.label) {
+          return item.label;
+        } else if (labelCount > 0 && item.dataIndex < labelCount) {
+          return labels[item.dataIndex];
+        }
+      }
+      return "";
+    },
+    afterTitle: noop,
+    beforeBody: noop,
+    beforeLabel: noop,
+    label(tooltipItem) {
+      if (this && this.options && this.options.mode === "dataset") {
+        return tooltipItem.label + ": " + tooltipItem.formattedValue || tooltipItem.formattedValue;
+      }
+      let label = tooltipItem.dataset.label || "";
+      if (label) {
+        label += ": ";
+      }
+      const value = tooltipItem.formattedValue;
+      if (!isNullOrUndef(value)) {
+        label += value;
+      }
+      return label;
+    },
+    labelColor(tooltipItem) {
+      const meta = tooltipItem.chart.getDatasetMeta(tooltipItem.datasetIndex);
+      const options = meta.controller.getStyle(tooltipItem.dataIndex);
+      return {
+        borderColor: options.borderColor,
+        backgroundColor: options.backgroundColor,
+        borderWidth: options.borderWidth,
+        borderDash: options.borderDash,
+        borderDashOffset: options.borderDashOffset,
+        borderRadius: 0
+      };
+    },
+    labelTextColor() {
+      return this.options.bodyColor;
+    },
+    labelPointStyle(tooltipItem) {
+      const meta = tooltipItem.chart.getDatasetMeta(tooltipItem.datasetIndex);
+      const options = meta.controller.getStyle(tooltipItem.dataIndex);
+      return {
+        pointStyle: options.pointStyle,
+        rotation: options.rotation
+      };
+    },
+    afterLabel: noop,
+    afterBody: noop,
+    beforeFooter: noop,
+    footer: noop,
+    afterFooter: noop
+  };
+  function invokeCallbackWithFallback(callbacks, name, ctx, arg) {
+    const result = callbacks[name].call(ctx, arg);
+    if (typeof result === "undefined") {
+      return defaultCallbacks[name].call(ctx, arg);
+    }
+    return result;
+  }
+  class Tooltip extends Element {
+    constructor(config) {
+      super();
+      this.opacity = 0;
+      this._active = [];
+      this._eventPosition = void 0;
+      this._size = void 0;
+      this._cachedAnimations = void 0;
+      this._tooltipItems = [];
+      this.$animations = void 0;
+      this.$context = void 0;
+      this.chart = config.chart;
+      this.options = config.options;
+      this.dataPoints = void 0;
+      this.title = void 0;
+      this.beforeBody = void 0;
+      this.body = void 0;
+      this.afterBody = void 0;
+      this.footer = void 0;
+      this.xAlign = void 0;
+      this.yAlign = void 0;
+      this.x = void 0;
+      this.y = void 0;
+      this.height = void 0;
+      this.width = void 0;
+      this.caretX = void 0;
+      this.caretY = void 0;
+      this.labelColors = void 0;
+      this.labelPointStyles = void 0;
+      this.labelTextColors = void 0;
+    }
+    initialize(options) {
+      this.options = options;
+      this._cachedAnimations = void 0;
+      this.$context = void 0;
+    }
+    _resolveAnimations() {
+      const cached = this._cachedAnimations;
+      if (cached) {
+        return cached;
+      }
+      const chart = this.chart;
+      const options = this.options.setContext(this.getContext());
+      const opts = options.enabled && chart.options.animation && options.animations;
+      const animations = new Animations(this.chart, opts);
+      if (opts._cacheable) {
+        this._cachedAnimations = Object.freeze(animations);
+      }
+      return animations;
+    }
+    getContext() {
+      return this.$context || (this.$context = createTooltipContext(this.chart.getContext(), this, this._tooltipItems));
+    }
+    getTitle(context, options) {
+      const { callbacks } = options;
+      const beforeTitle = invokeCallbackWithFallback(callbacks, "beforeTitle", this, context);
+      const title = invokeCallbackWithFallback(callbacks, "title", this, context);
+      const afterTitle = invokeCallbackWithFallback(callbacks, "afterTitle", this, context);
+      let lines = [];
+      lines = pushOrConcat(lines, splitNewlines(beforeTitle));
+      lines = pushOrConcat(lines, splitNewlines(title));
+      lines = pushOrConcat(lines, splitNewlines(afterTitle));
+      return lines;
+    }
+    getBeforeBody(tooltipItems, options) {
+      return getBeforeAfterBodyLines(invokeCallbackWithFallback(options.callbacks, "beforeBody", this, tooltipItems));
+    }
+    getBody(tooltipItems, options) {
+      const { callbacks } = options;
+      const bodyItems = [];
+      each(tooltipItems, (context) => {
+        const bodyItem = {
+          before: [],
+          lines: [],
+          after: []
+        };
+        const scoped = overrideCallbacks(callbacks, context);
+        pushOrConcat(bodyItem.before, splitNewlines(invokeCallbackWithFallback(scoped, "beforeLabel", this, context)));
+        pushOrConcat(bodyItem.lines, invokeCallbackWithFallback(scoped, "label", this, context));
+        pushOrConcat(bodyItem.after, splitNewlines(invokeCallbackWithFallback(scoped, "afterLabel", this, context)));
+        bodyItems.push(bodyItem);
+      });
+      return bodyItems;
+    }
+    getAfterBody(tooltipItems, options) {
+      return getBeforeAfterBodyLines(invokeCallbackWithFallback(options.callbacks, "afterBody", this, tooltipItems));
+    }
+    getFooter(tooltipItems, options) {
+      const { callbacks } = options;
+      const beforeFooter = invokeCallbackWithFallback(callbacks, "beforeFooter", this, tooltipItems);
+      const footer = invokeCallbackWithFallback(callbacks, "footer", this, tooltipItems);
+      const afterFooter = invokeCallbackWithFallback(callbacks, "afterFooter", this, tooltipItems);
+      let lines = [];
+      lines = pushOrConcat(lines, splitNewlines(beforeFooter));
+      lines = pushOrConcat(lines, splitNewlines(footer));
+      lines = pushOrConcat(lines, splitNewlines(afterFooter));
+      return lines;
+    }
+    _createItems(options) {
+      const active = this._active;
+      const data = this.chart.data;
+      const labelColors = [];
+      const labelPointStyles = [];
+      const labelTextColors = [];
+      let tooltipItems = [];
+      let i, len;
+      for (i = 0, len = active.length; i < len; ++i) {
+        tooltipItems.push(createTooltipItem(this.chart, active[i]));
+      }
+      if (options.filter) {
+        tooltipItems = tooltipItems.filter((element, index2, array) => options.filter(element, index2, array, data));
+      }
+      if (options.itemSort) {
+        tooltipItems = tooltipItems.sort((a, b) => options.itemSort(a, b, data));
+      }
+      each(tooltipItems, (context) => {
+        const scoped = overrideCallbacks(options.callbacks, context);
+        labelColors.push(invokeCallbackWithFallback(scoped, "labelColor", this, context));
+        labelPointStyles.push(invokeCallbackWithFallback(scoped, "labelPointStyle", this, context));
+        labelTextColors.push(invokeCallbackWithFallback(scoped, "labelTextColor", this, context));
+      });
+      this.labelColors = labelColors;
+      this.labelPointStyles = labelPointStyles;
+      this.labelTextColors = labelTextColors;
+      this.dataPoints = tooltipItems;
+      return tooltipItems;
+    }
+    update(changed, replay) {
+      const options = this.options.setContext(this.getContext());
+      const active = this._active;
+      let properties;
+      let tooltipItems = [];
+      if (!active.length) {
+        if (this.opacity !== 0) {
+          properties = {
+            opacity: 0
+          };
+        }
+      } else {
+        const position = positioners[options.position].call(this, active, this._eventPosition);
+        tooltipItems = this._createItems(options);
+        this.title = this.getTitle(tooltipItems, options);
+        this.beforeBody = this.getBeforeBody(tooltipItems, options);
+        this.body = this.getBody(tooltipItems, options);
+        this.afterBody = this.getAfterBody(tooltipItems, options);
+        this.footer = this.getFooter(tooltipItems, options);
+        const size = this._size = getTooltipSize(this, options);
+        const positionAndSize = Object.assign({}, position, size);
+        const alignment = determineAlignment(this.chart, options, positionAndSize);
+        const backgroundPoint = getBackgroundPoint(options, positionAndSize, alignment, this.chart);
+        this.xAlign = alignment.xAlign;
+        this.yAlign = alignment.yAlign;
+        properties = {
+          opacity: 1,
+          x: backgroundPoint.x,
+          y: backgroundPoint.y,
+          width: size.width,
+          height: size.height,
+          caretX: position.x,
+          caretY: position.y
+        };
+      }
+      this._tooltipItems = tooltipItems;
+      this.$context = void 0;
+      if (properties) {
+        this._resolveAnimations().update(this, properties);
+      }
+      if (changed && options.external) {
+        options.external.call(this, {
+          chart: this.chart,
+          tooltip: this,
+          replay
+        });
+      }
+    }
+    drawCaret(tooltipPoint, ctx, size, options) {
+      const caretPosition = this.getCaretPosition(tooltipPoint, size, options);
+      ctx.lineTo(caretPosition.x1, caretPosition.y1);
+      ctx.lineTo(caretPosition.x2, caretPosition.y2);
+      ctx.lineTo(caretPosition.x3, caretPosition.y3);
+    }
+    getCaretPosition(tooltipPoint, size, options) {
+      const { xAlign, yAlign } = this;
+      const { caretSize, cornerRadius } = options;
+      const { topLeft, topRight, bottomLeft, bottomRight } = toTRBLCorners(cornerRadius);
+      const { x: ptX, y: ptY } = tooltipPoint;
+      const { width, height } = size;
+      let x1, x2, x3, y1, y2, y3;
+      if (yAlign === "center") {
+        y2 = ptY + height / 2;
+        if (xAlign === "left") {
+          x1 = ptX;
+          x2 = x1 - caretSize;
+          y1 = y2 + caretSize;
+          y3 = y2 - caretSize;
+        } else {
+          x1 = ptX + width;
+          x2 = x1 + caretSize;
+          y1 = y2 - caretSize;
+          y3 = y2 + caretSize;
+        }
+        x3 = x1;
+      } else {
+        if (xAlign === "left") {
+          x2 = ptX + Math.max(topLeft, bottomLeft) + caretSize;
+        } else if (xAlign === "right") {
+          x2 = ptX + width - Math.max(topRight, bottomRight) - caretSize;
+        } else {
+          x2 = this.caretX;
+        }
+        if (yAlign === "top") {
+          y1 = ptY;
+          y2 = y1 - caretSize;
+          x1 = x2 - caretSize;
+          x3 = x2 + caretSize;
+        } else {
+          y1 = ptY + height;
+          y2 = y1 + caretSize;
+          x1 = x2 + caretSize;
+          x3 = x2 - caretSize;
+        }
+        y3 = y1;
+      }
+      return {
+        x1,
+        x2,
+        x3,
+        y1,
+        y2,
+        y3
+      };
+    }
+    drawTitle(pt, ctx, options) {
+      const title = this.title;
+      const length = title.length;
+      let titleFont, titleSpacing, i;
+      if (length) {
+        const rtlHelper = getRtlAdapter(options.rtl, this.x, this.width);
+        pt.x = getAlignedX(this, options.titleAlign, options);
+        ctx.textAlign = rtlHelper.textAlign(options.titleAlign);
+        ctx.textBaseline = "middle";
+        titleFont = toFont(options.titleFont);
+        titleSpacing = options.titleSpacing;
+        ctx.fillStyle = options.titleColor;
+        ctx.font = titleFont.string;
+        for (i = 0; i < length; ++i) {
+          ctx.fillText(title[i], rtlHelper.x(pt.x), pt.y + titleFont.lineHeight / 2);
+          pt.y += titleFont.lineHeight + titleSpacing;
+          if (i + 1 === length) {
+            pt.y += options.titleMarginBottom - titleSpacing;
+          }
+        }
+      }
+    }
+    _drawColorBox(ctx, pt, i, rtlHelper, options) {
+      const labelColor = this.labelColors[i];
+      const labelPointStyle = this.labelPointStyles[i];
+      const { boxHeight, boxWidth } = options;
+      const bodyFont = toFont(options.bodyFont);
+      const colorX = getAlignedX(this, "left", options);
+      const rtlColorX = rtlHelper.x(colorX);
+      const yOffSet = boxHeight < bodyFont.lineHeight ? (bodyFont.lineHeight - boxHeight) / 2 : 0;
+      const colorY = pt.y + yOffSet;
+      if (options.usePointStyle) {
+        const drawOptions = {
+          radius: Math.min(boxWidth, boxHeight) / 2,
+          pointStyle: labelPointStyle.pointStyle,
+          rotation: labelPointStyle.rotation,
+          borderWidth: 1
+        };
+        const centerX = rtlHelper.leftForLtr(rtlColorX, boxWidth) + boxWidth / 2;
+        const centerY = colorY + boxHeight / 2;
+        ctx.strokeStyle = options.multiKeyBackground;
+        ctx.fillStyle = options.multiKeyBackground;
+        drawPoint(ctx, drawOptions, centerX, centerY);
+        ctx.strokeStyle = labelColor.borderColor;
+        ctx.fillStyle = labelColor.backgroundColor;
+        drawPoint(ctx, drawOptions, centerX, centerY);
+      } else {
+        ctx.lineWidth = isObject(labelColor.borderWidth) ? Math.max(...Object.values(labelColor.borderWidth)) : labelColor.borderWidth || 1;
+        ctx.strokeStyle = labelColor.borderColor;
+        ctx.setLineDash(labelColor.borderDash || []);
+        ctx.lineDashOffset = labelColor.borderDashOffset || 0;
+        const outerX = rtlHelper.leftForLtr(rtlColorX, boxWidth);
+        const innerX = rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - 2);
+        const borderRadius = toTRBLCorners(labelColor.borderRadius);
+        if (Object.values(borderRadius).some((v) => v !== 0)) {
+          ctx.beginPath();
+          ctx.fillStyle = options.multiKeyBackground;
+          addRoundedRectPath(ctx, {
+            x: outerX,
+            y: colorY,
+            w: boxWidth,
+            h: boxHeight,
+            radius: borderRadius
+          });
+          ctx.fill();
+          ctx.stroke();
+          ctx.fillStyle = labelColor.backgroundColor;
+          ctx.beginPath();
+          addRoundedRectPath(ctx, {
+            x: innerX,
+            y: colorY + 1,
+            w: boxWidth - 2,
+            h: boxHeight - 2,
+            radius: borderRadius
+          });
+          ctx.fill();
+        } else {
+          ctx.fillStyle = options.multiKeyBackground;
+          ctx.fillRect(outerX, colorY, boxWidth, boxHeight);
+          ctx.strokeRect(outerX, colorY, boxWidth, boxHeight);
+          ctx.fillStyle = labelColor.backgroundColor;
+          ctx.fillRect(innerX, colorY + 1, boxWidth - 2, boxHeight - 2);
+        }
+      }
+      ctx.fillStyle = this.labelTextColors[i];
+    }
+    drawBody(pt, ctx, options) {
+      const { body } = this;
+      const { bodySpacing, bodyAlign, displayColors, boxHeight, boxWidth, boxPadding } = options;
+      const bodyFont = toFont(options.bodyFont);
+      let bodyLineHeight = bodyFont.lineHeight;
+      let xLinePadding = 0;
+      const rtlHelper = getRtlAdapter(options.rtl, this.x, this.width);
+      const fillLineOfText = function(line) {
+        ctx.fillText(line, rtlHelper.x(pt.x + xLinePadding), pt.y + bodyLineHeight / 2);
+        pt.y += bodyLineHeight + bodySpacing;
+      };
+      const bodyAlignForCalculation = rtlHelper.textAlign(bodyAlign);
+      let bodyItem, textColor, lines, i, j, ilen, jlen;
+      ctx.textAlign = bodyAlign;
+      ctx.textBaseline = "middle";
+      ctx.font = bodyFont.string;
+      pt.x = getAlignedX(this, bodyAlignForCalculation, options);
+      ctx.fillStyle = options.bodyColor;
+      each(this.beforeBody, fillLineOfText);
+      xLinePadding = displayColors && bodyAlignForCalculation !== "right" ? bodyAlign === "center" ? boxWidth / 2 + boxPadding : boxWidth + 2 + boxPadding : 0;
+      for (i = 0, ilen = body.length; i < ilen; ++i) {
+        bodyItem = body[i];
+        textColor = this.labelTextColors[i];
+        ctx.fillStyle = textColor;
+        each(bodyItem.before, fillLineOfText);
+        lines = bodyItem.lines;
+        if (displayColors && lines.length) {
+          this._drawColorBox(ctx, pt, i, rtlHelper, options);
+          bodyLineHeight = Math.max(bodyFont.lineHeight, boxHeight);
+        }
+        for (j = 0, jlen = lines.length; j < jlen; ++j) {
+          fillLineOfText(lines[j]);
+          bodyLineHeight = bodyFont.lineHeight;
+        }
+        each(bodyItem.after, fillLineOfText);
+      }
+      xLinePadding = 0;
+      bodyLineHeight = bodyFont.lineHeight;
+      each(this.afterBody, fillLineOfText);
+      pt.y -= bodySpacing;
+    }
+    drawFooter(pt, ctx, options) {
+      const footer = this.footer;
+      const length = footer.length;
+      let footerFont, i;
+      if (length) {
+        const rtlHelper = getRtlAdapter(options.rtl, this.x, this.width);
+        pt.x = getAlignedX(this, options.footerAlign, options);
+        pt.y += options.footerMarginTop;
+        ctx.textAlign = rtlHelper.textAlign(options.footerAlign);
+        ctx.textBaseline = "middle";
+        footerFont = toFont(options.footerFont);
+        ctx.fillStyle = options.footerColor;
+        ctx.font = footerFont.string;
+        for (i = 0; i < length; ++i) {
+          ctx.fillText(footer[i], rtlHelper.x(pt.x), pt.y + footerFont.lineHeight / 2);
+          pt.y += footerFont.lineHeight + options.footerSpacing;
+        }
+      }
+    }
+    drawBackground(pt, ctx, tooltipSize, options) {
+      const { xAlign, yAlign } = this;
+      const { x, y } = pt;
+      const { width, height } = tooltipSize;
+      const { topLeft, topRight, bottomLeft, bottomRight } = toTRBLCorners(options.cornerRadius);
+      ctx.fillStyle = options.backgroundColor;
+      ctx.strokeStyle = options.borderColor;
+      ctx.lineWidth = options.borderWidth;
+      ctx.beginPath();
+      ctx.moveTo(x + topLeft, y);
+      if (yAlign === "top") {
+        this.drawCaret(pt, ctx, tooltipSize, options);
+      }
+      ctx.lineTo(x + width - topRight, y);
+      ctx.quadraticCurveTo(x + width, y, x + width, y + topRight);
+      if (yAlign === "center" && xAlign === "right") {
+        this.drawCaret(pt, ctx, tooltipSize, options);
+      }
+      ctx.lineTo(x + width, y + height - bottomRight);
+      ctx.quadraticCurveTo(x + width, y + height, x + width - bottomRight, y + height);
+      if (yAlign === "bottom") {
+        this.drawCaret(pt, ctx, tooltipSize, options);
+      }
+      ctx.lineTo(x + bottomLeft, y + height);
+      ctx.quadraticCurveTo(x, y + height, x, y + height - bottomLeft);
+      if (yAlign === "center" && xAlign === "left") {
+        this.drawCaret(pt, ctx, tooltipSize, options);
+      }
+      ctx.lineTo(x, y + topLeft);
+      ctx.quadraticCurveTo(x, y, x + topLeft, y);
+      ctx.closePath();
+      ctx.fill();
+      if (options.borderWidth > 0) {
+        ctx.stroke();
+      }
+    }
+    _updateAnimationTarget(options) {
+      const chart = this.chart;
+      const anims = this.$animations;
+      const animX = anims && anims.x;
+      const animY = anims && anims.y;
+      if (animX || animY) {
+        const position = positioners[options.position].call(this, this._active, this._eventPosition);
+        if (!position) {
+          return;
+        }
+        const size = this._size = getTooltipSize(this, options);
+        const positionAndSize = Object.assign({}, position, this._size);
+        const alignment = determineAlignment(chart, options, positionAndSize);
+        const point = getBackgroundPoint(options, positionAndSize, alignment, chart);
+        if (animX._to !== point.x || animY._to !== point.y) {
+          this.xAlign = alignment.xAlign;
+          this.yAlign = alignment.yAlign;
+          this.width = size.width;
+          this.height = size.height;
+          this.caretX = position.x;
+          this.caretY = position.y;
+          this._resolveAnimations().update(this, point);
+        }
+      }
+    }
+    _willRender() {
+      return !!this.opacity;
+    }
+    draw(ctx) {
+      const options = this.options.setContext(this.getContext());
+      let opacity = this.opacity;
+      if (!opacity) {
+        return;
+      }
+      this._updateAnimationTarget(options);
+      const tooltipSize = {
+        width: this.width,
+        height: this.height
+      };
+      const pt = {
+        x: this.x,
+        y: this.y
+      };
+      opacity = Math.abs(opacity) < 1e-3 ? 0 : opacity;
+      const padding = toPadding(options.padding);
+      const hasTooltipContent = this.title.length || this.beforeBody.length || this.body.length || this.afterBody.length || this.footer.length;
+      if (options.enabled && hasTooltipContent) {
+        ctx.save();
+        ctx.globalAlpha = opacity;
+        this.drawBackground(pt, ctx, tooltipSize, options);
+        overrideTextDirection(ctx, options.textDirection);
+        pt.y += padding.top;
+        this.drawTitle(pt, ctx, options);
+        this.drawBody(pt, ctx, options);
+        this.drawFooter(pt, ctx, options);
+        restoreTextDirection(ctx, options.textDirection);
+        ctx.restore();
+      }
+    }
+    getActiveElements() {
+      return this._active || [];
+    }
+    setActiveElements(activeElements, eventPosition) {
+      const lastActive = this._active;
+      const active = activeElements.map(({ datasetIndex, index: index2 }) => {
+        const meta = this.chart.getDatasetMeta(datasetIndex);
+        if (!meta) {
+          throw new Error("Cannot find a dataset at index " + datasetIndex);
+        }
+        return {
+          datasetIndex,
+          element: meta.data[index2],
+          index: index2
+        };
+      });
+      const changed = !_elementsEqual(lastActive, active);
+      const positionChanged = this._positionChanged(active, eventPosition);
+      if (changed || positionChanged) {
+        this._active = active;
+        this._eventPosition = eventPosition;
+        this._ignoreReplayEvents = true;
+        this.update(true);
+      }
+    }
+    handleEvent(e, replay, inChartArea = true) {
+      if (replay && this._ignoreReplayEvents) {
+        return false;
+      }
+      this._ignoreReplayEvents = false;
+      const options = this.options;
+      const lastActive = this._active || [];
+      const active = this._getActiveElements(e, lastActive, replay, inChartArea);
+      const positionChanged = this._positionChanged(active, e);
+      const changed = replay || !_elementsEqual(active, lastActive) || positionChanged;
+      if (changed) {
+        this._active = active;
+        if (options.enabled || options.external) {
+          this._eventPosition = {
+            x: e.x,
+            y: e.y
+          };
+          this.update(true, replay);
+        }
+      }
+      return changed;
+    }
+    _getActiveElements(e, lastActive, replay, inChartArea) {
+      const options = this.options;
+      if (e.type === "mouseout") {
+        return [];
+      }
+      if (!inChartArea) {
+        return lastActive.filter((i) => this.chart.data.datasets[i.datasetIndex] && this.chart.getDatasetMeta(i.datasetIndex).controller.getParsed(i.index) !== void 0);
+      }
+      const active = this.chart.getElementsAtEventForMode(e, options.mode, options, replay);
+      if (options.reverse) {
+        active.reverse();
+      }
+      return active;
+    }
+    _positionChanged(active, e) {
+      const { caretX, caretY, options } = this;
+      const position = positioners[options.position].call(this, active, e);
+      return position !== false && (caretX !== position.x || caretY !== position.y);
+    }
+  }
+  __publicField(Tooltip, "positioners", positioners);
+  var plugin_tooltip = {
+    id: "tooltip",
+    _element: Tooltip,
+    positioners,
+    afterInit(chart, _args, options) {
+      if (options) {
+        chart.tooltip = new Tooltip({
+          chart,
+          options
+        });
+      }
+    },
+    beforeUpdate(chart, _args, options) {
+      if (chart.tooltip) {
+        chart.tooltip.initialize(options);
+      }
+    },
+    reset(chart, _args, options) {
+      if (chart.tooltip) {
+        chart.tooltip.initialize(options);
+      }
+    },
+    afterDraw(chart) {
+      const tooltip = chart.tooltip;
+      if (tooltip && tooltip._willRender()) {
+        const args = {
+          tooltip
+        };
+        if (chart.notifyPlugins("beforeTooltipDraw", {
+          ...args,
+          cancelable: true
+        }) === false) {
+          return;
+        }
+        tooltip.draw(chart.ctx);
+        chart.notifyPlugins("afterTooltipDraw", args);
+      }
+    },
+    afterEvent(chart, args) {
+      if (chart.tooltip) {
+        const useFinalPosition = args.replay;
+        if (chart.tooltip.handleEvent(args.event, useFinalPosition, args.inChartArea)) {
+          args.changed = true;
+        }
+      }
+    },
+    defaults: {
+      enabled: true,
+      external: null,
+      position: "average",
+      backgroundColor: "rgba(0,0,0,0.8)",
+      titleColor: "#fff",
+      titleFont: {
+        weight: "bold"
+      },
+      titleSpacing: 2,
+      titleMarginBottom: 6,
+      titleAlign: "left",
+      bodyColor: "#fff",
+      bodySpacing: 2,
+      bodyFont: {},
+      bodyAlign: "left",
+      footerColor: "#fff",
+      footerSpacing: 2,
+      footerMarginTop: 6,
+      footerFont: {
+        weight: "bold"
+      },
+      footerAlign: "left",
+      padding: 6,
+      caretPadding: 2,
+      caretSize: 5,
+      cornerRadius: 6,
+      boxHeight: (ctx, opts) => opts.bodyFont.size,
+      boxWidth: (ctx, opts) => opts.bodyFont.size,
+      multiKeyBackground: "#fff",
+      displayColors: true,
+      boxPadding: 0,
+      borderColor: "rgba(0,0,0,0)",
+      borderWidth: 0,
+      animation: {
+        duration: 400,
+        easing: "easeOutQuart"
+      },
+      animations: {
+        numbers: {
+          type: "number",
+          properties: [
+            "x",
+            "y",
+            "width",
+            "height",
+            "caretX",
+            "caretY"
+          ]
+        },
+        opacity: {
+          easing: "linear",
+          duration: 200
+        }
+      },
+      callbacks: defaultCallbacks
+    },
+    defaultRoutes: {
+      bodyFont: "font",
+      footerFont: "font",
+      titleFont: "font"
+    },
+    descriptors: {
+      _scriptable: (name) => name !== "filter" && name !== "itemSort" && name !== "external",
+      _indexable: false,
+      callbacks: {
+        _scriptable: false,
+        _indexable: false
+      },
+      animation: {
+        _fallback: false
+      },
+      animations: {
+        _fallback: "animation"
+      }
+    },
+    additionalOptionScopes: [
+      "interaction"
+    ]
+  };
+  const addIfString = (labels, raw, index2, addedLabels) => {
+    if (typeof raw === "string") {
+      index2 = labels.push(raw) - 1;
+      addedLabels.unshift({
+        index: index2,
+        label: raw
+      });
+    } else if (isNaN(raw)) {
+      index2 = null;
+    }
+    return index2;
+  };
+  function findOrAddLabel(labels, raw, index2, addedLabels) {
+    const first = labels.indexOf(raw);
+    if (first === -1) {
+      return addIfString(labels, raw, index2, addedLabels);
+    }
+    const last = labels.lastIndexOf(raw);
+    return first !== last ? index2 : first;
+  }
+  const validIndex = (index2, max) => index2 === null ? null : _limitValue(Math.round(index2), 0, max);
+  function _getLabelForValue(value) {
+    const labels = this.getLabels();
+    if (value >= 0 && value < labels.length) {
+      return labels[value];
+    }
+    return value;
+  }
+  class CategoryScale extends Scale {
+    constructor(cfg) {
+      super(cfg);
+      this._startValue = void 0;
+      this._valueRange = 0;
+      this._addedLabels = [];
+    }
+    init(scaleOptions) {
+      const added = this._addedLabels;
+      if (added.length) {
+        const labels = this.getLabels();
+        for (const { index: index2, label } of added) {
+          if (labels[index2] === label) {
+            labels.splice(index2, 1);
+          }
+        }
+        this._addedLabels = [];
+      }
+      super.init(scaleOptions);
+    }
+    parse(raw, index2) {
+      if (isNullOrUndef(raw)) {
+        return null;
+      }
+      const labels = this.getLabels();
+      index2 = isFinite(index2) && labels[index2] === raw ? index2 : findOrAddLabel(labels, raw, valueOrDefault(index2, raw), this._addedLabels);
+      return validIndex(index2, labels.length - 1);
+    }
+    determineDataLimits() {
+      const { minDefined, maxDefined } = this.getUserBounds();
+      let { min, max } = this.getMinMax(true);
+      if (this.options.bounds === "ticks") {
+        if (!minDefined) {
+          min = 0;
+        }
+        if (!maxDefined) {
+          max = this.getLabels().length - 1;
+        }
+      }
+      this.min = min;
+      this.max = max;
+    }
+    buildTicks() {
+      const min = this.min;
+      const max = this.max;
+      const offset = this.options.offset;
+      const ticks = [];
+      let labels = this.getLabels();
+      labels = min === 0 && max === labels.length - 1 ? labels : labels.slice(min, max + 1);
+      this._valueRange = Math.max(labels.length - (offset ? 0 : 1), 1);
+      this._startValue = this.min - (offset ? 0.5 : 0);
+      for (let value = min; value <= max; value++) {
+        ticks.push({
+          value
+        });
+      }
+      return ticks;
+    }
+    getLabelForValue(value) {
+      return _getLabelForValue.call(this, value);
+    }
+    configure() {
+      super.configure();
+      if (!this.isHorizontal()) {
+        this._reversePixels = !this._reversePixels;
+      }
+    }
+    getPixelForValue(value) {
+      if (typeof value !== "number") {
+        value = this.parse(value);
+      }
+      return value === null ? NaN : this.getPixelForDecimal((value - this._startValue) / this._valueRange);
+    }
+    getPixelForTick(index2) {
+      const ticks = this.ticks;
+      if (index2 < 0 || index2 > ticks.length - 1) {
+        return null;
+      }
+      return this.getPixelForValue(ticks[index2].value);
+    }
+    getValueForPixel(pixel) {
+      return Math.round(this._startValue + this.getDecimalForPixel(pixel) * this._valueRange);
+    }
+    getBasePixel() {
+      return this.bottom;
+    }
+  }
+  __publicField(CategoryScale, "id", "category");
+  __publicField(CategoryScale, "defaults", {
+    ticks: {
+      callback: _getLabelForValue
+    }
+  });
+  function generateTicks$1(generationOptions, dataRange) {
+    const ticks = [];
+    const MIN_SPACING = 1e-14;
+    const { bounds, step, min, max, precision, count, maxTicks, maxDigits, includeBounds } = generationOptions;
+    const unit = step || 1;
+    const maxSpaces = maxTicks - 1;
+    const { min: rmin, max: rmax } = dataRange;
+    const minDefined = !isNullOrUndef(min);
+    const maxDefined = !isNullOrUndef(max);
+    const countDefined = !isNullOrUndef(count);
+    const minSpacing = (rmax - rmin) / (maxDigits + 1);
+    let spacing = niceNum((rmax - rmin) / maxSpaces / unit) * unit;
+    let factor, niceMin, niceMax, numSpaces;
+    if (spacing < MIN_SPACING && !minDefined && !maxDefined) {
+      return [
+        {
+          value: rmin
+        },
+        {
+          value: rmax
+        }
+      ];
+    }
+    numSpaces = Math.ceil(rmax / spacing) - Math.floor(rmin / spacing);
+    if (numSpaces > maxSpaces) {
+      spacing = niceNum(numSpaces * spacing / maxSpaces / unit) * unit;
+    }
+    if (!isNullOrUndef(precision)) {
+      factor = Math.pow(10, precision);
+      spacing = Math.ceil(spacing * factor) / factor;
+    }
+    if (bounds === "ticks") {
+      niceMin = Math.floor(rmin / spacing) * spacing;
+      niceMax = Math.ceil(rmax / spacing) * spacing;
+    } else {
+      niceMin = rmin;
+      niceMax = rmax;
+    }
+    if (minDefined && maxDefined && step && almostWhole((max - min) / step, spacing / 1e3)) {
+      numSpaces = Math.round(Math.min((max - min) / spacing, maxTicks));
+      spacing = (max - min) / numSpaces;
+      niceMin = min;
+      niceMax = max;
+    } else if (countDefined) {
+      niceMin = minDefined ? min : niceMin;
+      niceMax = maxDefined ? max : niceMax;
+      numSpaces = count - 1;
+      spacing = (niceMax - niceMin) / numSpaces;
+    } else {
+      numSpaces = (niceMax - niceMin) / spacing;
+      if (almostEquals(numSpaces, Math.round(numSpaces), spacing / 1e3)) {
+        numSpaces = Math.round(numSpaces);
+      } else {
+        numSpaces = Math.ceil(numSpaces);
+      }
+    }
+    const decimalPlaces = Math.max(_decimalPlaces(spacing), _decimalPlaces(niceMin));
+    factor = Math.pow(10, isNullOrUndef(precision) ? decimalPlaces : precision);
+    niceMin = Math.round(niceMin * factor) / factor;
+    niceMax = Math.round(niceMax * factor) / factor;
+    let j = 0;
+    if (minDefined) {
+      if (includeBounds && niceMin !== min) {
+        ticks.push({
+          value: min
+        });
+        if (niceMin < min) {
+          j++;
+        }
+        if (almostEquals(Math.round((niceMin + j * spacing) * factor) / factor, min, relativeLabelSize(min, minSpacing, generationOptions))) {
+          j++;
+        }
+      } else if (niceMin < min) {
+        j++;
+      }
+    }
+    for (; j < numSpaces; ++j) {
+      const tickValue = Math.round((niceMin + j * spacing) * factor) / factor;
+      if (maxDefined && tickValue > max) {
+        break;
+      }
+      ticks.push({
+        value: tickValue
+      });
+    }
+    if (maxDefined && includeBounds && niceMax !== max) {
+      if (ticks.length && almostEquals(ticks[ticks.length - 1].value, max, relativeLabelSize(max, minSpacing, generationOptions))) {
+        ticks[ticks.length - 1].value = max;
+      } else {
+        ticks.push({
+          value: max
+        });
+      }
+    } else if (!maxDefined || niceMax === max) {
+      ticks.push({
+        value: niceMax
+      });
+    }
+    return ticks;
+  }
+  function relativeLabelSize(value, minSpacing, { horizontal, minRotation }) {
+    const rad = toRadians(minRotation);
+    const ratio = (horizontal ? Math.sin(rad) : Math.cos(rad)) || 1e-3;
+    const length = 0.75 * minSpacing * ("" + value).length;
+    return Math.min(minSpacing / ratio, length);
+  }
+  class LinearScaleBase extends Scale {
+    constructor(cfg) {
+      super(cfg);
+      this.start = void 0;
+      this.end = void 0;
+      this._startValue = void 0;
+      this._endValue = void 0;
+      this._valueRange = 0;
+    }
+    parse(raw, index2) {
+      if (isNullOrUndef(raw)) {
+        return null;
+      }
+      if ((typeof raw === "number" || raw instanceof Number) && !isFinite(+raw)) {
+        return null;
+      }
+      return +raw;
+    }
+    handleTickRangeOptions() {
+      const { beginAtZero } = this.options;
+      const { minDefined, maxDefined } = this.getUserBounds();
+      let { min, max } = this;
+      const setMin = (v) => min = minDefined ? min : v;
+      const setMax = (v) => max = maxDefined ? max : v;
+      if (beginAtZero) {
+        const minSign = sign(min);
+        const maxSign = sign(max);
+        if (minSign < 0 && maxSign < 0) {
+          setMax(0);
+        } else if (minSign > 0 && maxSign > 0) {
+          setMin(0);
+        }
+      }
+      if (min === max) {
+        let offset = max === 0 ? 1 : Math.abs(max * 0.05);
+        setMax(max + offset);
+        if (!beginAtZero) {
+          setMin(min - offset);
+        }
+      }
+      this.min = min;
+      this.max = max;
+    }
+    getTickLimit() {
+      const tickOpts = this.options.ticks;
+      let { maxTicksLimit, stepSize } = tickOpts;
+      let maxTicks;
+      if (stepSize) {
+        maxTicks = Math.ceil(this.max / stepSize) - Math.floor(this.min / stepSize) + 1;
+        if (maxTicks > 1e3) {
+          console.warn(`scales.${this.id}.ticks.stepSize: ${stepSize} would result generating up to ${maxTicks} ticks. Limiting to 1000.`);
+          maxTicks = 1e3;
+        }
+      } else {
+        maxTicks = this.computeTickLimit();
+        maxTicksLimit = maxTicksLimit || 11;
+      }
+      if (maxTicksLimit) {
+        maxTicks = Math.min(maxTicksLimit, maxTicks);
+      }
+      return maxTicks;
+    }
+    computeTickLimit() {
+      return Number.POSITIVE_INFINITY;
+    }
+    buildTicks() {
+      const opts = this.options;
+      const tickOpts = opts.ticks;
+      let maxTicks = this.getTickLimit();
+      maxTicks = Math.max(2, maxTicks);
+      const numericGeneratorOptions = {
+        maxTicks,
+        bounds: opts.bounds,
+        min: opts.min,
+        max: opts.max,
+        precision: tickOpts.precision,
+        step: tickOpts.stepSize,
+        count: tickOpts.count,
+        maxDigits: this._maxDigits(),
+        horizontal: this.isHorizontal(),
+        minRotation: tickOpts.minRotation || 0,
+        includeBounds: tickOpts.includeBounds !== false
+      };
+      const dataRange = this._range || this;
+      const ticks = generateTicks$1(numericGeneratorOptions, dataRange);
+      if (opts.bounds === "ticks") {
+        _setMinAndMaxByKey(ticks, this, "value");
+      }
+      if (opts.reverse) {
+        ticks.reverse();
+        this.start = this.max;
+        this.end = this.min;
+      } else {
+        this.start = this.min;
+        this.end = this.max;
+      }
+      return ticks;
+    }
+    configure() {
+      const ticks = this.ticks;
+      let start = this.min;
+      let end = this.max;
+      super.configure();
+      if (this.options.offset && ticks.length) {
+        const offset = (end - start) / Math.max(ticks.length - 1, 1) / 2;
+        start -= offset;
+        end += offset;
+      }
+      this._startValue = start;
+      this._endValue = end;
+      this._valueRange = end - start;
+    }
+    getLabelForValue(value) {
+      return formatNumber(value, this.chart.options.locale, this.options.ticks.format);
+    }
+  }
+  class LinearScale extends LinearScaleBase {
+    determineDataLimits() {
+      const { min, max } = this.getMinMax(true);
+      this.min = isNumberFinite(min) ? min : 0;
+      this.max = isNumberFinite(max) ? max : 1;
+      this.handleTickRangeOptions();
+    }
+    computeTickLimit() {
+      const horizontal = this.isHorizontal();
+      const length = horizontal ? this.width : this.height;
+      const minRotation = toRadians(this.options.ticks.minRotation);
+      const ratio = (horizontal ? Math.sin(minRotation) : Math.cos(minRotation)) || 1e-3;
+      const tickFont = this._resolveTickFontOptions(0);
+      return Math.ceil(length / Math.min(40, tickFont.lineHeight / ratio));
+    }
+    getPixelForValue(value) {
+      return value === null ? NaN : this.getPixelForDecimal((value - this._startValue) / this._valueRange);
+    }
+    getValueForPixel(pixel) {
+      return this._startValue + this.getDecimalForPixel(pixel) * this._valueRange;
+    }
+  }
+  __publicField(LinearScale, "id", "linear");
+  __publicField(LinearScale, "defaults", {
+    ticks: {
+      callback: Ticks.formatters.numeric
+    }
+  });
+  const INTERVALS = {
+    millisecond: {
+      common: true,
+      size: 1,
+      steps: 1e3
+    },
+    second: {
+      common: true,
+      size: 1e3,
+      steps: 60
+    },
+    minute: {
+      common: true,
+      size: 6e4,
+      steps: 60
+    },
+    hour: {
+      common: true,
+      size: 36e5,
+      steps: 24
+    },
+    day: {
+      common: true,
+      size: 864e5,
+      steps: 30
+    },
+    week: {
+      common: false,
+      size: 6048e5,
+      steps: 4
+    },
+    month: {
+      common: true,
+      size: 2628e6,
+      steps: 12
+    },
+    quarter: {
+      common: false,
+      size: 7884e6,
+      steps: 4
+    },
+    year: {
+      common: true,
+      size: 3154e7
+    }
+  };
+  const UNITS = /* @__PURE__ */ Object.keys(INTERVALS);
+  function sorter(a, b) {
+    return a - b;
+  }
+  function parse(scale, input) {
+    if (isNullOrUndef(input)) {
+      return null;
+    }
+    const adapter = scale._adapter;
+    const { parser, round: round2, isoWeekday } = scale._parseOpts;
+    let value = input;
+    if (typeof parser === "function") {
+      value = parser(value);
+    }
+    if (!isNumberFinite(value)) {
+      value = typeof parser === "string" ? adapter.parse(value, parser) : adapter.parse(value);
+    }
+    if (value === null) {
+      return null;
+    }
+    if (round2) {
+      value = round2 === "week" && (isNumber(isoWeekday) || isoWeekday === true) ? adapter.startOf(value, "isoWeek", isoWeekday) : adapter.startOf(value, round2);
+    }
+    return +value;
+  }
+  function determineUnitForAutoTicks(minUnit, min, max, capacity) {
+    const ilen = UNITS.length;
+    for (let i = UNITS.indexOf(minUnit); i < ilen - 1; ++i) {
+      const interval = INTERVALS[UNITS[i]];
+      const factor = interval.steps ? interval.steps : Number.MAX_SAFE_INTEGER;
+      if (interval.common && Math.ceil((max - min) / (factor * interval.size)) <= capacity) {
+        return UNITS[i];
+      }
+    }
+    return UNITS[ilen - 1];
+  }
+  function determineUnitForFormatting(scale, numTicks, minUnit, min, max) {
+    for (let i = UNITS.length - 1; i >= UNITS.indexOf(minUnit); i--) {
+      const unit = UNITS[i];
+      if (INTERVALS[unit].common && scale._adapter.diff(max, min, unit) >= numTicks - 1) {
+        return unit;
+      }
+    }
+    return UNITS[minUnit ? UNITS.indexOf(minUnit) : 0];
+  }
+  function determineMajorUnit(unit) {
+    for (let i = UNITS.indexOf(unit) + 1, ilen = UNITS.length; i < ilen; ++i) {
+      if (INTERVALS[UNITS[i]].common) {
+        return UNITS[i];
+      }
+    }
+  }
+  function addTick(ticks, time, timestamps) {
+    if (!timestamps) {
+      ticks[time] = true;
+    } else if (timestamps.length) {
+      const { lo, hi } = _lookup(timestamps, time);
+      const timestamp = timestamps[lo] >= time ? timestamps[lo] : timestamps[hi];
+      ticks[timestamp] = true;
+    }
+  }
+  function setMajorTicks(scale, ticks, map2, majorUnit) {
+    const adapter = scale._adapter;
+    const first = +adapter.startOf(ticks[0].value, majorUnit);
+    const last = ticks[ticks.length - 1].value;
+    let major, index2;
+    for (major = first; major <= last; major = +adapter.add(major, 1, majorUnit)) {
+      index2 = map2[major];
+      if (index2 >= 0) {
+        ticks[index2].major = true;
+      }
+    }
+    return ticks;
+  }
+  function ticksFromTimestamps(scale, values, majorUnit) {
+    const ticks = [];
+    const map2 = {};
+    const ilen = values.length;
+    let i, value;
+    for (i = 0; i < ilen; ++i) {
+      value = values[i];
+      map2[value] = i;
+      ticks.push({
+        value,
+        major: false
+      });
+    }
+    return ilen === 0 || !majorUnit ? ticks : setMajorTicks(scale, ticks, map2, majorUnit);
+  }
+  class TimeScale extends Scale {
+    constructor(props) {
+      super(props);
+      this._cache = {
+        data: [],
+        labels: [],
+        all: []
+      };
+      this._unit = "day";
+      this._majorUnit = void 0;
+      this._offsets = {};
+      this._normalized = false;
+      this._parseOpts = void 0;
+    }
+    init(scaleOpts, opts = {}) {
+      const time = scaleOpts.time || (scaleOpts.time = {});
+      const adapter = this._adapter = new adapters._date(scaleOpts.adapters.date);
+      adapter.init(opts);
+      mergeIf(time.displayFormats, adapter.formats());
+      this._parseOpts = {
+        parser: time.parser,
+        round: time.round,
+        isoWeekday: time.isoWeekday
+      };
+      super.init(scaleOpts);
+      this._normalized = opts.normalized;
+    }
+    parse(raw, index2) {
+      if (raw === void 0) {
+        return null;
+      }
+      return parse(this, raw);
+    }
+    beforeLayout() {
+      super.beforeLayout();
+      this._cache = {
+        data: [],
+        labels: [],
+        all: []
+      };
+    }
+    determineDataLimits() {
+      const options = this.options;
+      const adapter = this._adapter;
+      const unit = options.time.unit || "day";
+      let { min, max, minDefined, maxDefined } = this.getUserBounds();
+      function _applyBounds(bounds) {
+        if (!minDefined && !isNaN(bounds.min)) {
+          min = Math.min(min, bounds.min);
+        }
+        if (!maxDefined && !isNaN(bounds.max)) {
+          max = Math.max(max, bounds.max);
+        }
+      }
+      if (!minDefined || !maxDefined) {
+        _applyBounds(this._getLabelBounds());
+        if (options.bounds !== "ticks" || options.ticks.source !== "labels") {
+          _applyBounds(this.getMinMax(false));
+        }
+      }
+      min = isNumberFinite(min) && !isNaN(min) ? min : +adapter.startOf(Date.now(), unit);
+      max = isNumberFinite(max) && !isNaN(max) ? max : +adapter.endOf(Date.now(), unit) + 1;
+      this.min = Math.min(min, max - 1);
+      this.max = Math.max(min + 1, max);
+    }
+    _getLabelBounds() {
+      const arr = this.getLabelTimestamps();
+      let min = Number.POSITIVE_INFINITY;
+      let max = Number.NEGATIVE_INFINITY;
+      if (arr.length) {
+        min = arr[0];
+        max = arr[arr.length - 1];
+      }
+      return {
+        min,
+        max
+      };
+    }
+    buildTicks() {
+      const options = this.options;
+      const timeOpts = options.time;
+      const tickOpts = options.ticks;
+      const timestamps = tickOpts.source === "labels" ? this.getLabelTimestamps() : this._generate();
+      if (options.bounds === "ticks" && timestamps.length) {
+        this.min = this._userMin || timestamps[0];
+        this.max = this._userMax || timestamps[timestamps.length - 1];
+      }
+      const min = this.min;
+      const max = this.max;
+      const ticks = _filterBetween(timestamps, min, max);
+      this._unit = timeOpts.unit || (tickOpts.autoSkip ? determineUnitForAutoTicks(timeOpts.minUnit, this.min, this.max, this._getLabelCapacity(min)) : determineUnitForFormatting(this, ticks.length, timeOpts.minUnit, this.min, this.max));
+      this._majorUnit = !tickOpts.major.enabled || this._unit === "year" ? void 0 : determineMajorUnit(this._unit);
+      this.initOffsets(timestamps);
+      if (options.reverse) {
+        ticks.reverse();
+      }
+      return ticksFromTimestamps(this, ticks, this._majorUnit);
+    }
+    afterAutoSkip() {
+      if (this.options.offsetAfterAutoskip) {
+        this.initOffsets(this.ticks.map((tick) => +tick.value));
+      }
+    }
+    initOffsets(timestamps = []) {
+      let start = 0;
+      let end = 0;
+      let first, last;
+      if (this.options.offset && timestamps.length) {
+        first = this.getDecimalForValue(timestamps[0]);
+        if (timestamps.length === 1) {
+          start = 1 - first;
+        } else {
+          start = (this.getDecimalForValue(timestamps[1]) - first) / 2;
+        }
+        last = this.getDecimalForValue(timestamps[timestamps.length - 1]);
+        if (timestamps.length === 1) {
+          end = last;
+        } else {
+          end = (last - this.getDecimalForValue(timestamps[timestamps.length - 2])) / 2;
+        }
+      }
+      const limit = timestamps.length < 3 ? 0.5 : 0.25;
+      start = _limitValue(start, 0, limit);
+      end = _limitValue(end, 0, limit);
+      this._offsets = {
+        start,
+        end,
+        factor: 1 / (start + 1 + end)
+      };
+    }
+    _generate() {
+      const adapter = this._adapter;
+      const min = this.min;
+      const max = this.max;
+      const options = this.options;
+      const timeOpts = options.time;
+      const minor = timeOpts.unit || determineUnitForAutoTicks(timeOpts.minUnit, min, max, this._getLabelCapacity(min));
+      const stepSize = valueOrDefault(options.ticks.stepSize, 1);
+      const weekday = minor === "week" ? timeOpts.isoWeekday : false;
+      const hasWeekday = isNumber(weekday) || weekday === true;
+      const ticks = {};
+      let first = min;
+      let time, count;
+      if (hasWeekday) {
+        first = +adapter.startOf(first, "isoWeek", weekday);
+      }
+      first = +adapter.startOf(first, hasWeekday ? "day" : minor);
+      if (adapter.diff(max, min, minor) > 1e5 * stepSize) {
+        throw new Error(min + " and " + max + " are too far apart with stepSize of " + stepSize + " " + minor);
+      }
+      const timestamps = options.ticks.source === "data" && this.getDataTimestamps();
+      for (time = first, count = 0; time < max; time = +adapter.add(time, stepSize, minor), count++) {
+        addTick(ticks, time, timestamps);
+      }
+      if (time === max || options.bounds === "ticks" || count === 1) {
+        addTick(ticks, time, timestamps);
+      }
+      return Object.keys(ticks).sort(sorter).map((x) => +x);
+    }
+    getLabelForValue(value) {
+      const adapter = this._adapter;
+      const timeOpts = this.options.time;
+      if (timeOpts.tooltipFormat) {
+        return adapter.format(value, timeOpts.tooltipFormat);
+      }
+      return adapter.format(value, timeOpts.displayFormats.datetime);
+    }
+    format(value, format) {
+      const options = this.options;
+      const formats = options.time.displayFormats;
+      const unit = this._unit;
+      const fmt = format || formats[unit];
+      return this._adapter.format(value, fmt);
+    }
+    _tickFormatFunction(time, index2, ticks, format) {
+      const options = this.options;
+      const formatter = options.ticks.callback;
+      if (formatter) {
+        return callback(formatter, [
+          time,
+          index2,
+          ticks
+        ], this);
+      }
+      const formats = options.time.displayFormats;
+      const unit = this._unit;
+      const majorUnit = this._majorUnit;
+      const minorFormat = unit && formats[unit];
+      const majorFormat = majorUnit && formats[majorUnit];
+      const tick = ticks[index2];
+      const major = majorUnit && majorFormat && tick && tick.major;
+      return this._adapter.format(time, format || (major ? majorFormat : minorFormat));
+    }
+    generateTickLabels(ticks) {
+      let i, ilen, tick;
+      for (i = 0, ilen = ticks.length; i < ilen; ++i) {
+        tick = ticks[i];
+        tick.label = this._tickFormatFunction(tick.value, i, ticks);
+      }
+    }
+    getDecimalForValue(value) {
+      return value === null ? NaN : (value - this.min) / (this.max - this.min);
+    }
+    getPixelForValue(value) {
+      const offsets = this._offsets;
+      const pos = this.getDecimalForValue(value);
+      return this.getPixelForDecimal((offsets.start + pos) * offsets.factor);
+    }
+    getValueForPixel(pixel) {
+      const offsets = this._offsets;
+      const pos = this.getDecimalForPixel(pixel) / offsets.factor - offsets.end;
+      return this.min + pos * (this.max - this.min);
+    }
+    _getLabelSize(label) {
+      const ticksOpts = this.options.ticks;
+      const tickLabelWidth = this.ctx.measureText(label).width;
+      const angle = toRadians(this.isHorizontal() ? ticksOpts.maxRotation : ticksOpts.minRotation);
+      const cosRotation = Math.cos(angle);
+      const sinRotation = Math.sin(angle);
+      const tickFontSize = this._resolveTickFontOptions(0).size;
+      return {
+        w: tickLabelWidth * cosRotation + tickFontSize * sinRotation,
+        h: tickLabelWidth * sinRotation + tickFontSize * cosRotation
+      };
+    }
+    _getLabelCapacity(exampleTime) {
+      const timeOpts = this.options.time;
+      const displayFormats = timeOpts.displayFormats;
+      const format = displayFormats[timeOpts.unit] || displayFormats.millisecond;
+      const exampleLabel = this._tickFormatFunction(exampleTime, 0, ticksFromTimestamps(this, [
+        exampleTime
+      ], this._majorUnit), format);
+      const size = this._getLabelSize(exampleLabel);
+      const capacity = Math.floor(this.isHorizontal() ? this.width / size.w : this.height / size.h) - 1;
+      return capacity > 0 ? capacity : 1;
+    }
+    getDataTimestamps() {
+      let timestamps = this._cache.data || [];
+      let i, ilen;
+      if (timestamps.length) {
+        return timestamps;
+      }
+      const metas = this.getMatchingVisibleMetas();
+      if (this._normalized && metas.length) {
+        return this._cache.data = metas[0].controller.getAllParsedValues(this);
+      }
+      for (i = 0, ilen = metas.length; i < ilen; ++i) {
+        timestamps = timestamps.concat(metas[i].controller.getAllParsedValues(this));
+      }
+      return this._cache.data = this.normalize(timestamps);
+    }
+    getLabelTimestamps() {
+      const timestamps = this._cache.labels || [];
+      let i, ilen;
+      if (timestamps.length) {
+        return timestamps;
+      }
+      const labels = this.getLabels();
+      for (i = 0, ilen = labels.length; i < ilen; ++i) {
+        timestamps.push(parse(this, labels[i]));
+      }
+      return this._cache.labels = this._normalized ? timestamps : this.normalize(timestamps);
+    }
+    normalize(values) {
+      return _arrayUnique(values.sort(sorter));
+    }
+  }
+  __publicField(TimeScale, "id", "time");
+  __publicField(TimeScale, "defaults", {
+    bounds: "data",
+    adapters: {},
+    time: {
+      parser: false,
+      unit: false,
+      round: false,
+      isoWeekday: false,
+      minUnit: "millisecond",
+      displayFormats: {}
+    },
+    ticks: {
+      source: "auto",
+      callback: false,
+      major: {
+        enabled: false
+      }
+    }
+  });
+  function interpolate(table, val, reverse) {
+    let lo = 0;
+    let hi = table.length - 1;
+    let prevSource, nextSource, prevTarget, nextTarget;
+    if (reverse) {
+      if (val >= table[lo].pos && val <= table[hi].pos) {
+        ({ lo, hi } = _lookupByKey(table, "pos", val));
+      }
+      ({ pos: prevSource, time: prevTarget } = table[lo]);
+      ({ pos: nextSource, time: nextTarget } = table[hi]);
+    } else {
+      if (val >= table[lo].time && val <= table[hi].time) {
+        ({ lo, hi } = _lookupByKey(table, "time", val));
+      }
+      ({ time: prevSource, pos: prevTarget } = table[lo]);
+      ({ time: nextSource, pos: nextTarget } = table[hi]);
+    }
+    const span = nextSource - prevSource;
+    return span ? prevTarget + (nextTarget - prevTarget) * (val - prevSource) / span : prevTarget;
+  }
+  class TimeSeriesScale extends TimeScale {
+    constructor(props) {
+      super(props);
+      this._table = [];
+      this._minPos = void 0;
+      this._tableRange = void 0;
+    }
+    initOffsets() {
+      const timestamps = this._getTimestampsForTable();
+      const table = this._table = this.buildLookupTable(timestamps);
+      this._minPos = interpolate(table, this.min);
+      this._tableRange = interpolate(table, this.max) - this._minPos;
+      super.initOffsets(timestamps);
+    }
+    buildLookupTable(timestamps) {
+      const { min, max } = this;
+      const items = [];
+      const table = [];
+      let i, ilen, prev, curr, next;
+      for (i = 0, ilen = timestamps.length; i < ilen; ++i) {
+        curr = timestamps[i];
+        if (curr >= min && curr <= max) {
+          items.push(curr);
+        }
+      }
+      if (items.length < 2) {
+        return [
+          {
+            time: min,
+            pos: 0
+          },
+          {
+            time: max,
+            pos: 1
+          }
+        ];
+      }
+      for (i = 0, ilen = items.length; i < ilen; ++i) {
+        next = items[i + 1];
+        prev = items[i - 1];
+        curr = items[i];
+        if (Math.round((next + prev) / 2) !== curr) {
+          table.push({
+            time: curr,
+            pos: i / (ilen - 1)
+          });
+        }
+      }
+      return table;
+    }
+    _generate() {
+      const min = this.min;
+      const max = this.max;
+      let timestamps = super.getDataTimestamps();
+      if (!timestamps.includes(min) || !timestamps.length) {
+        timestamps.splice(0, 0, min);
+      }
+      if (!timestamps.includes(max) || timestamps.length === 1) {
+        timestamps.push(max);
+      }
+      return timestamps.sort((a, b) => a - b);
+    }
+    _getTimestampsForTable() {
+      let timestamps = this._cache.all || [];
+      if (timestamps.length) {
+        return timestamps;
+      }
+      const data = this.getDataTimestamps();
+      const label = this.getLabelTimestamps();
+      if (data.length && label.length) {
+        timestamps = this.normalize(data.concat(label));
+      } else {
+        timestamps = data.length ? data : label;
+      }
+      timestamps = this._cache.all = timestamps;
+      return timestamps;
+    }
+    getDecimalForValue(value) {
+      return (interpolate(this._table, value) - this._minPos) / this._tableRange;
+    }
+    getValueForPixel(pixel) {
+      const offsets = this._offsets;
+      const decimal = this.getDecimalForPixel(pixel) / offsets.factor - offsets.end;
+      return interpolate(this._table, decimal * this._tableRange + this._minPos, true);
+    }
+  }
+  __publicField(TimeSeriesScale, "id", "timeseries");
+  __publicField(TimeSeriesScale, "defaults", TimeScale.defaults);
+  function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+    var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+    if (render) {
+      options.render = render;
+      options.staticRenderFns = staticRenderFns;
+      options._compiled = true;
+    }
+    return {
+      exports: scriptExports,
+      options
+    };
+  }
+  Chart.register(
+    LineController,
+    LineElement,
+    PointElement,
+    LinearScale,
+    CategoryScale,
+    index,
+    plugin_tooltip,
+    plugin_legend
+  );
+  const CHART_COLORS = [
+    "#4271ae",
+    "#c82829",
+    "#8959a8",
+    "#4d9a0f",
+    "#f5871f",
+    "#3e999f",
+    "#718c00",
+    "#a3685a",
+    "#525252",
+    "#eab700"
+  ];
+  const _sfc_main = {
+    props: {
+      analyticsData: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    data() {
+      return {
+        startDate: "",
+        endDate: "",
+        data: this.analyticsData || {},
+        chart: null,
+        users: [],
+        selectedEmails: [],
+        selectedPages: [],
+        showTopPagesOnly: true
+      };
+    },
+    computed: {
+      hasData() {
+        return this.data && this.data.totalVisits > 0;
+      },
+      pagesPerSession() {
+        var _a;
+        if (!((_a = this.data) == null ? void 0 : _a.uniqueSessions)) return "0";
+        return (this.data.totalVisits / this.data.uniqueSessions).toFixed(1);
+      },
+      userOptions() {
+        return this.users.map((u) => ({ value: u.email, text: u.label }));
+      },
+      pageOptions() {
+        var _a;
+        if (!((_a = this.data) == null ? void 0 : _a.visitsByPage)) return [];
+        return Object.keys(this.data.visitsByPage).map((p) => ({ value: p, text: p })).sort((a, b) => a.text.localeCompare(b.text));
+      }
+    },
+    watch: {
+      analyticsData(newVal) {
+        this.data = newVal || {};
+        this.renderChart();
+      }
+    },
+    mounted() {
+      this.setDefaultDates();
+      this.fetchData();
+    },
+    beforeUnmount() {
+      this.destroyChart();
+    },
+    methods: {
+      setDefaultDates() {
+        const now = /* @__PURE__ */ new Date();
+        const thirtyDaysAgo = new Date(now);
+        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+        this.endDate = now.toISOString().split("T")[0];
+        this.startDate = thirtyDaysAgo.toISOString().split("T")[0];
+      },
+      onUserSelectionChange(emails) {
+        this.selectedEmails = emails;
+        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);
+        if (this.endDate) params.set("endDate", this.endDate);
+        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}`);
+          const json = await response.json();
+          console.log(json.data);
+          if (json.status === "success") {
+            this.data = json.data;
+          }
+          if (json.users && !this.users.length) {
+            this.users = json.users;
+          }
+          this.renderChart();
+        } catch (e) {
+          console.error("Analytics fetch error:", e);
+          this.renderChart();
+        }
+      },
+      destroyChart() {
+        if (this.chart) {
+          this.chart.destroy();
+          this.chart = null;
+        }
+      },
+      formatDateFR(isoDate) {
+        const [y, m, d] = isoDate.split("-");
+        return `${d}/${m}/${y}`;
+      },
+      renderChart() {
+        var _a;
+        this.destroyChart();
+        const canvas = this.$refs.chartCanvas;
+        if (!canvas || !((_a = this.data) == null ? void 0 : _a.visitsByDay)) return;
+        const allDays = Object.keys(this.data.visitsByDay);
+        if (!allDays.length) return;
+        const labels = allDays.map((d) => this.formatDateFR(d));
+        const showPerPage = this.selectedPages.length === 0 && this.showTopPagesOnly && this.data.visitsByDayByPage;
+        let datasets;
+        let maxValue;
+        if (showPerPage) {
+          const topPages = this.data.visitsByPage ? Object.keys(this.data.visitsByPage) : [];
+          const pages = topPages.sort((a, b) => a.localeCompare(b));
+          datasets = pages.map((page, i) => {
+            const color2 = CHART_COLORS[i % CHART_COLORS.length];
+            const values = allDays.map(
+              (day) => {
+                var _a2;
+                return ((_a2 = this.data.visitsByDayByPage[page]) == null ? void 0 : _a2[day]) || 0;
+              }
+            );
+            return {
+              label: page,
+              data: values,
+              borderColor: color2,
+              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 },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              tooltip: {
+                mode: "index",
+                intersect: false
+              },
+              legend: {
+                display: showPerPage,
+                position: "bottom",
+                labels: { boxWidth: 12, padding: 12 }
+              }
+            },
+            scales: {
+              y: {
+                beginAtZero: true,
+                max: maxValue + 3,
+                ticks: { precision: 0 }
+              }
+            }
+          }
+        });
+      }
+    }
+  };
+  var _sfc_render = function render() {
+    var _vm = this, _c = _vm._self._c;
+    return _c("div", { staticClass: "k-analytics-dashboard" }, [_c("div", { staticClass: "k-analytics-filters" }, [_c("div", { staticClass: "k-analytics-date-filter" }, [_vm._m(0), _c("div", { staticClass: "k-date-inputs-wrapper" }, [_c("label", [_vm._v(" Du "), _c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.startDate, expression: "startDate" }], attrs: { "type": "date" }, domProps: { "value": _vm.startDate }, on: { "change": _vm.fetchData, "input": function($event) {
+      if ($event.target.composing) return;
+      _vm.startDate = $event.target.value;
+    } } })]), _c("label", [_vm._v(" Au "), _c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.endDate, expression: "endDate" }], attrs: { "type": "date" }, domProps: { "value": _vm.endDate }, on: { "change": _vm.fetchData, "input": function($event) {
+      if ($event.target.composing) return;
+      _vm.endDate = $event.target.value;
+    } } })])])]), _c("div", { staticClass: "k-analytics-user-filter" }, [_c("k-multiselect-field", { attrs: { "options": _vm.userOptions, "value": _vm.selectedEmails, "label": "Filtrer par utilisateur(s)", "search": "true", "name": "user" }, on: { "input": _vm.onUserSelectionChange } })], 1), _c("div", { staticClass: "k-analytics-page-filter" }, [_c("k-multiselect-field", { attrs: { "options": _vm.pageOptions, "value": _vm.selectedPages, "label": "Filtrer par page(s)", "search": "true", "name": "page" }, on: { "input": _vm.onPageSelectionChange } })], 1)]), !_vm.hasData ? _c("div", { staticClass: "k-analytics-empty" }, [_c("p", [_vm._v("Aucune donnée à afficher")])]) : [_c("div", { staticClass: "k-analytics-grid" }, [_c("div", { staticClass: "k-analytics-card" }, [_c("h3", [_vm._v("Sessions uniques")]), _c("div", { staticClass: "k-analytics-metric" }, [_vm._v(_vm._s(_vm.data.uniqueSessions))])]), _c("div", { staticClass: "k-analytics-card" }, [_c("h3", [_vm._v("Pages vues")]), _c("div", { staticClass: "k-analytics-metric" }, [_vm._v(_vm._s(_vm.data.totalVisits))])]), _c("div", { staticClass: "k-analytics-card" }, [_c("h3", [_vm._v("Pages / session")]), _c("div", { staticClass: "k-analytics-metric" }, [_vm._v(_vm._s(_vm.pagesPerSession))])])]), _c("div", { staticClass: "k-analytics-chart-container" }, [_c("div", { staticClass: "k-analytics-chart-header" }, [_c("h3", [_vm._v("Visites par jour")]), _vm.selectedPages.length === 0 ? _c("k-toggle-field", { attrs: { "value": _vm.showTopPagesOnly, "before": "Moyenne", "after": "Pages les + visitées", "text": " ", "name": "top-pages" }, on: { "input": _vm.onToggleTopPages } }) : _vm._e()], 1), _c("canvas", { ref: "chartCanvas" })]), _vm.data.visitsByPage && Object.keys(_vm.data.visitsByPage).length ? _c("div", { staticClass: "k-analytics-card" }, [_c("h3", [_vm._v("Pages les plus visitées")]), _c("ul", { staticClass: "k-analytics-list" }, _vm._l(_vm.data.visitsByPage, function(count, page) {
+      return _c("li", { key: page }, [_c("span", { staticClass: "k-analytics-list-label" }, [_vm._v(_vm._s(page))]), _c("span", { staticClass: "k-analytics-list-value" }, [_vm._v(_vm._s(count))])]);
+    }), 0)]) : _vm._e()]], 2);
+  };
+  var _sfc_staticRenderFns = [function() {
+    var _vm = this, _c = _vm._self._c;
+    return _c("header", { staticClass: "k-field-header" }, [_c("label", { staticClass: "k-label k-field-label", attrs: { "title": "Filtrer par dates" } }, [_c("span", { staticClass: "k-label-text" }, [_vm._v("Filtrer par dates ")])])]);
+  }];
+  _sfc_render._withStripped = true;
+  var __component__ = /* @__PURE__ */ normalizeComponent(
+    _sfc_main,
+    _sfc_render,
+    _sfc_staticRenderFns
+  );
+  __component__.options.__file = "/Users/adrienpayet/Documents/code/en-cours/design-to-pack/public/site/plugins/analytics/src/components/AnalyticsDashboard.vue";
+  const AnalyticsDashboard = __component__.exports;
+  window.panel.plugin("adrienpayet/analytics", {
+    fields: {
+      "analytics-dashboard": AnalyticsDashboard
+    }
+  });
+})();
diff --git a/public/site/plugins/analytics/index.php b/public/site/plugins/analytics/index.php
new file mode 100644
index 0000000..53219ff
--- /dev/null
+++ b/public/site/plugins/analytics/index.php
@@ -0,0 +1,27 @@
+<?php
+
+use adrienpayet\analytics\Visit;
+use adrienpayet\analytics\AnalyticsPage;
+use adrienpayet\analytics\AnalyticsStore;
+
+F::loadClasses([
+    "adrienpayet\\analytics\\Visit" => __DIR__ . "/classes/Visit.php",
+    "adrienpayet\\analytics\\AnalyticsPage" => __DIR__ . "/classes/AnalyticsPage.php",
+    "adrienpayet\\analytics\\AnalyticsStore" => __DIR__ . "/classes/AnalyticsStore.php",
+]);
+
+Kirby::plugin("adrienpayet/analytics", [
+    "pageModels" => [
+        "analytics" => AnalyticsPage::class,
+    ],
+    "blueprints" => [
+        "pages/analytics" => __DIR__ . "/blueprints/pages/analytics.yml",
+    ],
+    "routes" => [
+        require(__DIR__ . "/routes/track.php"),
+        require(__DIR__ . "/routes/get-data.php"),
+    ],
+    "fields" => [
+        "analytics-dashboard" => require(__DIR__ . "/fields/dashboard.php"),
+    ],
+]);
diff --git a/public/site/plugins/analytics/package-lock.json b/public/site/plugins/analytics/package-lock.json
new file mode 100644
index 0000000..b47fd09
--- /dev/null
+++ b/public/site/plugins/analytics/package-lock.json
@@ -0,0 +1,30 @@
+{
+  "name": "analytics",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "chart.js": "^4.4.0"
+      }
+    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    }
+  }
+}
diff --git a/public/site/plugins/analytics/package.json b/public/site/plugins/analytics/package.json
new file mode 100644
index 0000000..136b78b
--- /dev/null
+++ b/public/site/plugins/analytics/package.json
@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "dev": "npx -y kirbyup src/index.js --watch",
+    "build": "npx -y kirbyup src/index.js"
+  },
+  "dependencies": {
+    "chart.js": "^4.4.0"
+  }
+}
diff --git a/public/site/plugins/analytics/routes/get-data.php b/public/site/plugins/analytics/routes/get-data.php
new file mode 100644
index 0000000..f6fe2a7
--- /dev/null
+++ b/public/site/plugins/analytics/routes/get-data.php
@@ -0,0 +1,80 @@
+<?php
+
+return [
+    'pattern' => 'analytics-data.json',
+    'method' => 'GET',
+    'action' => function () {
+        $kirby = kirby();
+        $user = $kirby->user();
+
+        // Seuls les admins peuvent accéder aux données analytics
+        if (!$user || !$user->isAdmin()) {
+            return [
+                'status' => 'error',
+                'message' => 'Unauthorized'
+            ];
+        }
+
+        $analyticsPage = $kirby->page('analytics');
+
+        if (!$analyticsPage) {
+            return [
+                'status' => 'error',
+                'message' => 'Analytics page not found'
+            ];
+        }
+
+        $request = $kirby->request();
+        $filters = [];
+
+        if ($startDate = $request->query()->get('startDate')) {
+            $filters['startDate'] = $startDate;
+        }
+
+        if ($endDate = $request->query()->get('endDate')) {
+            $filters['endDate'] = $endDate;
+        }
+
+        if ($project = $request->query()->get('project')) {
+            $filters['project'] = $project;
+        }
+
+        if (!empty($_GET['emails'])) {
+            $filters['emails'] = explode(',', $_GET['emails']);
+        }
+
+        if (!empty($_GET['pageNames'])) {
+            $filters['pageNames'] = explode(',', $_GET['pageNames']);
+        }
+
+        $data = $analyticsPage->getAnalyticsData($filters);
+
+        $users = [];
+        foreach ($kirby->users() as $u) {
+            $email = (string) $u->email();
+            $name = $u->name()->isNotEmpty() ? (string) $u->name() : $email;
+            $label = $name;
+
+            $clientField = $u->content()->get('client');
+            if ($clientField && $clientField->isNotEmpty()) {
+                $clientPage = $clientField->toPage();
+                if ($clientPage) {
+                    $label .= ' (' . $clientPage->title() . ')';
+                }
+            }
+
+            $users[] = [
+                'email' => $email,
+                'label' => $label,
+            ];
+        }
+
+        usort($users, fn($a, $b) => strcasecmp($a['label'], $b['label']));
+
+        return [
+            'status' => 'success',
+            'data' => $data,
+            'users' => $users
+        ];
+    }
+];
diff --git a/public/site/plugins/analytics/routes/track.php b/public/site/plugins/analytics/routes/track.php
new file mode 100644
index 0000000..2001c4d
--- /dev/null
+++ b/public/site/plugins/analytics/routes/track.php
@@ -0,0 +1,61 @@
+<?php
+
+use adrienpayet\analytics\Visit;
+use adrienpayet\analytics\AnalyticsStore;
+
+return [
+    'pattern' => 'track-visit.json',
+    'method' => 'POST',
+    'action' => function () {
+        $kirby = kirby();
+        $user = $kirby->user();
+
+        // Seuls les utilisateurs connectés peuvent tracker
+        if (!$user) {
+            return [
+                'status' => 'error',
+                'message' => 'Unauthorized'
+            ];
+        }
+
+        $data = $kirby->request()->body()->toArray();
+
+        // Détection du pays
+        $country = null;
+
+        // 1. Header Cloudflare
+        if (isset($_SERVER['HTTP_CF_IPCOUNTRY'])) {
+            $country = $_SERVER['HTTP_CF_IPCOUNTRY'];
+        }
+        // 2. Fallback : API ipapi.co (optionnel, peut être désactivé)
+        elseif (!empty($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] !== '127.0.0.1') {
+            try {
+                $ip = $_SERVER['REMOTE_ADDR'];
+                $response = @file_get_contents("https://ipapi.co/{$ip}/country/", false, stream_context_create([
+                    'http' => ['timeout' => 1]
+                ]));
+                if ($response) {
+                    $country = trim($response);
+                }
+            } catch (Exception $e) {
+                // Ignorer les erreurs de géolocalisation
+            }
+        }
+
+        $visit = new Visit([
+            'email' => (string) $user->email(),
+            'country' => $country,
+            'sessionId' => $data['sessionId'] ?? '',
+            'pageUrl' => $data['pageUrl'] ?? '',
+            'pageType' => $data['pageType'] ?? 'unknown',
+            'pageName' => $data['pageName'] ?? null,
+        ]);
+
+        AnalyticsStore::addVisit($visit);
+
+        return [
+            'status' => 'success',
+            'message' => 'Visit tracked'
+        ];
+    }
+];
diff --git a/public/site/plugins/analytics/src/components/AnalyticsDashboard.vue b/public/site/plugins/analytics/src/components/AnalyticsDashboard.vue
new file mode 100644
index 0000000..879bd59
--- /dev/null
+++ b/public/site/plugins/analytics/src/components/AnalyticsDashboard.vue
@@ -0,0 +1,491 @@
+<template>
+  <div class="k-analytics-dashboard">
+    <div class="k-analytics-filters">
+      <div class="k-analytics-date-filter">
+        <header class="k-field-header">
+          <label class="k-label k-field-label" title="Filtrer par dates">
+            <span class="k-label-text">Filtrer par dates </span>
+          </label>
+        </header>
+        <div class="k-date-inputs-wrapper">
+          <label>
+            Du
+            <input type="date" v-model="startDate" @change="fetchData" />
+          </label>
+          <label>
+            Au
+            <input type="date" v-model="endDate" @change="fetchData" />
+          </label>
+        </div>
+      </div>
+      <div class="k-analytics-user-filter">
+        <k-multiselect-field
+          :options="userOptions"
+          :value="selectedEmails"
+          label="Filtrer par utilisateur(s)"
+          search="true"
+          name="user"
+          @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">
+      <p>Aucune donnée à afficher</p>
+    </div>
+
+    <template v-else>
+      <div class="k-analytics-grid">
+        <div class="k-analytics-card">
+          <h3>Sessions uniques</h3>
+          <div class="k-analytics-metric">{{ data.uniqueSessions }}</div>
+        </div>
+        <div class="k-analytics-card">
+          <h3>Pages vues</h3>
+          <div class="k-analytics-metric">{{ data.totalVisits }}</div>
+        </div>
+        <div class="k-analytics-card">
+          <h3>Pages / session</h3>
+          <div class="k-analytics-metric">{{ pagesPerSession }}</div>
+        </div>
+      </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="top-pages"
+            @input="onToggleTopPages"
+          />
+        </div>
+        <canvas ref="chartCanvas"></canvas>
+      </div>
+
+      <div
+        class="k-analytics-card"
+        v-if="data.visitsByPage && Object.keys(data.visitsByPage).length"
+      >
+        <h3>Pages les plus visitées</h3>
+        <ul class="k-analytics-list">
+          <li v-for="(count, page) in data.visitsByPage" :key="page">
+            <span class="k-analytics-list-label">{{ page }}</span>
+            <span class="k-analytics-list-value">{{ count }}</span>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  LineController,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Filler,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+
+Chart.register(
+  LineController,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Filler,
+  Tooltip,
+  Legend
+);
+
+const CHART_COLORS = [
+  '#4271ae',
+  '#c82829',
+  '#8959a8',
+  '#4d9a0f',
+  '#f5871f',
+  '#3e999f',
+  '#718c00',
+  '#a3685a',
+  '#525252',
+  '#eab700',
+];
+
+export default {
+  props: {
+    analyticsData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      startDate: '',
+      endDate: '',
+      data: this.analyticsData || {},
+      chart: null,
+      users: [],
+      selectedEmails: [],
+      selectedPages: [],
+      showTopPagesOnly: true,
+    };
+  },
+
+  computed: {
+    hasData() {
+      return this.data && this.data.totalVisits > 0;
+    },
+    pagesPerSession() {
+      if (!this.data?.uniqueSessions) return '0';
+      return (this.data.totalVisits / this.data.uniqueSessions).toFixed(1);
+    },
+    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: {
+    analyticsData(newVal) {
+      this.data = newVal || {};
+      this.renderChart();
+    },
+  },
+
+  mounted() {
+    this.setDefaultDates();
+    this.fetchData();
+  },
+
+  beforeUnmount() {
+    this.destroyChart();
+  },
+
+  methods: {
+    setDefaultDates() {
+      const now = new Date();
+      const thirtyDaysAgo = new Date(now);
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+
+      this.endDate = now.toISOString().split('T')[0];
+      this.startDate = thirtyDaysAgo.toISOString().split('T')[0];
+    },
+
+    onUserSelectionChange(emails) {
+      this.selectedEmails = emails;
+      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);
+      if (this.endDate) params.set('endDate', this.endDate);
+      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}`);
+        const json = await response.json();
+
+        console.log(json.data);
+
+        if (json.status === 'success') {
+          this.data = json.data;
+        }
+
+        if (json.users && !this.users.length) {
+          this.users = json.users;
+        }
+
+        this.renderChart();
+      } catch (e) {
+        console.error('Analytics fetch error:', e);
+        this.renderChart();
+      }
+    },
+
+    destroyChart() {
+      if (this.chart) {
+        this.chart.destroy();
+        this.chart = null;
+      }
+    },
+
+    formatDateFR(isoDate) {
+      const [y, m, d] = isoDate.split('-');
+      return `${d}/${m}/${y}`;
+    },
+
+    renderChart() {
+      this.destroyChart();
+
+      const canvas = this.$refs.chartCanvas;
+      if (!canvas || !this.data?.visitsByDay) return;
+
+      const allDays = Object.keys(this.data.visitsByDay);
+      if (!allDays.length) return;
+
+      const labels = allDays.map((d) => this.formatDateFR(d));
+      const showPerPage =
+        this.selectedPages.length === 0 &&
+        this.showTopPagesOnly &&
+        this.data.visitsByDayByPage;
+
+      let datasets;
+      let maxValue;
+
+      if (showPerPage) {
+        const topPages = this.data.visitsByPage
+          ? Object.keys(this.data.visitsByPage)
+          : [];
+        const pages = topPages.sort((a, b) => a.localeCompare(b));
+        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 },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            tooltip: {
+              mode: 'index',
+              intersect: false,
+            },
+            legend: {
+              display: showPerPage,
+              position: 'bottom',
+              labels: { boxWidth: 12, padding: 12 },
+            },
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              max: maxValue + 3,
+              ticks: { precision: 0 },
+            },
+          },
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style>
+.k-analytics-filters {
+  display: flex;
+  gap: 1rem;
+}
+
+.k-analytics-filters label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.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: 3rem 0;
+}
+
+.k-analytics-user-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-left: 2rem;
+}
+
+.k-field-name-user,
+.k-field-name-page {
+  min-width: 15rem;
+}
+
+.k-field-name-top-pages {
+  margin-left: 1rem;
+}
+
+.k-analytics-page-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-left: 2rem;
+}
+
+.k-analytics-card {
+  background: var(--color-background);
+  border-radius: var(--rounded);
+}
+
+.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);
+  margin-bottom: 1.5rem;
+}
+
+.k-analytics-chart-header {
+  display: flex;
+  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;
+}
+
+.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;
+}
+</style>
diff --git a/public/site/plugins/analytics/src/index.js b/public/site/plugins/analytics/src/index.js
new file mode 100644
index 0000000..1235bac
--- /dev/null
+++ b/public/site/plugins/analytics/src/index.js
@@ -0,0 +1,7 @@
+import AnalyticsDashboard from "./components/AnalyticsDashboard.vue";
+
+window.panel.plugin("adrienpayet/analytics", {
+    fields: {
+        "analytics-dashboard": AnalyticsDashboard
+    }
+});
diff --git a/public/site/plugins/comments/routes/create.php b/public/site/plugins/comments/routes/create.php
index 9db31cf..5641383 100644
--- a/public/site/plugins/comments/routes/create.php
+++ b/public/site/plugins/comments/routes/create.php
@@ -46,6 +46,7 @@ return [
         'author' => kirby()->user(),
         'id'     => Str::uuid(),
         'type'   => 'comment',
+        'readby' => [], // Pour le système de notifications dérivées
       ];
 
       if (isset($data->position->pageIndex)) {
@@ -62,11 +63,8 @@ return [
 
       echo json_encode(getFileData($newFile));
 
-      try {
-          $project->createNotification($commentData);
-      } catch (\Throwable $th) {
-          throw new Exception($th->getMessage() . '. line ' . $th->getLine() . ' in file ' . $th->getFile(), 1);
-      }
+      // Note: Les notifications sont maintenant dérivées des commentaires.
+      // Plus besoin d'appeler createNotification().
 
       exit;
   },
diff --git a/public/site/plugins/comments/routes/delete.php b/public/site/plugins/comments/routes/delete.php
index 8bc9e07..5f96a96 100644
--- a/public/site/plugins/comments/routes/delete.php
+++ b/public/site/plugins/comments/routes/delete.php
@@ -39,8 +39,8 @@ return [
 
       echo json_encode(getFileData($newFile));
 
-      $project = $page->parents()->findBy('template', 'project');
-      $project->deleteNotification($data->id);
+      // Note: Les notifications sont maintenant dérivées des commentaires.
+      // La suppression du commentaire supprime automatiquement la notification.
 
       exit;
   },
diff --git a/public/site/plugins/comments/routes/reply.php b/public/site/plugins/comments/routes/reply.php
index 68aeebd..2418dfe 100644
--- a/public/site/plugins/comments/routes/reply.php
+++ b/public/site/plugins/comments/routes/reply.php
@@ -31,18 +31,19 @@ return [
               "author" => kirby()->user(),
               "id" => Str::uuid(),
               "type" => "comment-reply",
+              "readby" => [], // Pour le système de notifications dérivées
             ];
             $newReply = new Reply($replyData);
             $comment['replies'][] = $newReply->toArray();
         }
       }
-      
+
       $newFile = $file->update([
         'comments' => $comments
       ]);
 
-      $project = $page->parents()->findBy("template", "project");
-      $project->createNotification($replyData);
+      // Note: Les notifications sont maintenant dérivées des commentaires.
+      // Plus besoin d'appeler createNotification().
 
       return getFileData($newFile);
   }
diff --git a/public/site/plugins/helpers/index.php b/public/site/plugins/helpers/index.php
index 3ab39f6..cdb3acc 100644
--- a/public/site/plugins/helpers/index.php
+++ b/public/site/plugins/helpers/index.php
@@ -94,7 +94,6 @@ function processDTLProposals($page) {
                     ],
                 "path" => "/projects/" . $page->slug() . "?dialog=proposal&fileIndex=" . $index,
                 "date" => $proposalFile->modified("d/MM/Y"),
-                "stepLabel" => "Proposition commerciale",
                 ];
             }
         break;
@@ -112,7 +111,6 @@ function processDTLProposals($page) {
                     ],
                     "path" => "/projects/" . $page->slug() . "?dialog=industrial-ideation",
                     "date" => $proposalFile->modified("d/MM/Y"),
-                    "stepLabel" => "Idéation industrielle",
                 ];
             }
         break;
@@ -129,7 +127,6 @@ function processDTLProposals($page) {
                     ],
                     "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
                     "date" => $proposalPage->modified("d/MM/Y"),
-                    "stepLabel" => "Échantillon virtuel - piste dynamique",
                 ];
             }
         break;
@@ -147,7 +144,6 @@ function processDTLProposals($page) {
                     ],
                     "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
                     "date" => $proposalFile->modified("d/MM/Y"),
-                    "stepLabel" => "Échantillon virtuel - piste statique",
                 ];
             }
         break;
diff --git a/public/site/plugins/notifications/index.php b/public/site/plugins/notifications/index.php
index 91da6f9..9b46c7e 100644
--- a/public/site/plugins/notifications/index.php
+++ b/public/site/plugins/notifications/index.php
@@ -1,27 +1,54 @@
 <?php
 
-load([
-  "ProjectPage" => "models/ProjectPage.php",
-], __DIR__);
+use adrienpayet\notifications\NotificationCollector;
+use adrienpayet\notifications\providers\CommentProvider;
+use adrienpayet\notifications\providers\ReplyProvider;
+use adrienpayet\notifications\providers\ProjectRequestProvider;
+use adrienpayet\notifications\providers\AppointmentRequestProvider;
+use adrienpayet\notifications\providers\ContentProvider;
 
+// Charger les classes
 F::loadClasses([
-  // Own classes
-  "adrienpayet\\notifications\\Notification" => __DIR__ . "/src/Notification.php",
-  "adrienpayet\\notifications\\NotificationsPage" => __DIR__ . "/src/NotificationsPage.php",
-  
-  // Shared classes
-  "adrienpayet\\D2P\\data\\Position" => __DIR__ . "/../classes/Position.php",
-  "adrienpayet\\D2P\data\Author" => __DIR__ . "/../classes/Author.php",
-  "adrienpayet\\D2P\\data\\location\\Location" => __DIR__ . "/../classes/location/Location.php",
-  "adrienpayet\\D2P\\data\\location\\PageDetails" => __DIR__ . "/../classes/location/PageDetails.php",
-  "adrienpayet\\D2P\\data\\location\\ProjectDetails" => __DIR__ . "/../classes/location/ProjectDetails.php",
-  "adrienpayet\\D2P\\data\\location\\FileDetails" => __DIR__ . "/../classes/location/FileDetails.php",
+    // Nouvelles classes - Système de providers
+    "adrienpayet\\notifications\\NotificationProvider" => __DIR__ . "/src/NotificationProvider.php",
+    "adrienpayet\\notifications\\NotificationCollector" => __DIR__ . "/src/NotificationCollector.php",
+    "adrienpayet\\notifications\\providers\\CommentProvider" => __DIR__ . "/src/providers/CommentProvider.php",
+    "adrienpayet\\notifications\\providers\\ReplyProvider" => __DIR__ . "/src/providers/ReplyProvider.php",
+    "adrienpayet\\notifications\\providers\\ProjectRequestProvider" => __DIR__ . "/src/providers/ProjectRequestProvider.php",
+    "adrienpayet\\notifications\\providers\\AppointmentRequestProvider" => __DIR__ . "/src/providers/AppointmentRequestProvider.php",
+    "adrienpayet\\notifications\\providers\\ContentProvider" => __DIR__ . "/src/providers/ContentProvider.php",
+
+    // Anciennes classes - Gardées pour rétro-compatibilité pendant migration
+    "adrienpayet\\notifications\\Notification" => __DIR__ . "/src/Notification.php",
+    "adrienpayet\\notifications\\NotificationsPage" => __DIR__ . "/src/NotificationsPage.php",
+
+    // Classes partagées
+    "adrienpayet\\D2P\\data\\Position" => __DIR__ . "/../classes/Position.php",
+    "adrienpayet\\D2P\\data\\Author" => __DIR__ . "/../classes/Author.php",
+    "adrienpayet\\D2P\\data\\location\\Location" => __DIR__ . "/../classes/location/Location.php",
+    "adrienpayet\\D2P\\data\\location\\PageDetails" => __DIR__ . "/../classes/location/PageDetails.php",
+    "adrienpayet\\D2P\\data\\location\\ProjectDetails" => __DIR__ . "/../classes/location/ProjectDetails.php",
+    "adrienpayet\\D2P\\data\\location\\FileDetails" => __DIR__ . "/../classes/location/FileDetails.php",
 ]);
 
+// Créer et configurer le collector
+$collector = new NotificationCollector();
+$collector->register(new CommentProvider());
+$collector->register(new ReplyProvider());
+$collector->register(new ProjectRequestProvider());
+$collector->register(new AppointmentRequestProvider());
+$collector->register(new ContentProvider());
 
 Kirby::plugin("adrienpayet/pdc-notifications", [
-  "routes" => [
-    require(__DIR__ . "/routes/readAll.php"),
-    require(__DIR__ . "/routes/read.php")
-  ],
+    "options" => [
+        "collector" => $collector
+    ],
+    "routes" => [
+        // Nouvelles routes
+        require(__DIR__ . "/routes/mark-as-read.php"),
+        require(__DIR__ . "/routes/mark-all-read.php"),
+        // Anciennes routes - Gardées pour rétro-compatibilité
+        require(__DIR__ . "/routes/readAll.php"),
+        require(__DIR__ . "/routes/read.php"),
+    ],
 ]);
diff --git a/public/site/plugins/notifications/routes/mark-all-read.php b/public/site/plugins/notifications/routes/mark-all-read.php
new file mode 100644
index 0000000..7c2a071
--- /dev/null
+++ b/public/site/plugins/notifications/routes/mark-all-read.php
@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * Route pour marquer toutes les notifications comme lues.
+ * Parcourt tous les projets accessibles à l'utilisateur.
+ */
+return [
+    'pattern' => '(:all)mark-all-notifications-read.json',
+    'method' => 'POST',
+    'action' => function () {
+        try {
+            $user = kirby()->user();
+            if (!$user) {
+                throw new Exception('User not authenticated');
+            }
+
+            $collector = kirby()->option('adrienpayet.pdc-notifications.collector');
+            if (!$collector) {
+                throw new Exception('NotificationCollector not initialized');
+            }
+
+            // Récupérer les projets selon le rôle
+            if ($user->role()->name() === 'admin') {
+                $projects = page('projects')->children()->toArray();
+            } else {
+                $projects = $user->currentProjects()->toArray();
+            }
+
+            $count = $collector->markAllAsRead($projects, $user);
+
+            return json_encode([
+                'status' => 'success',
+                'message' => "$count notifications marked as read"
+            ]);
+        } catch (\Throwable $th) {
+            return json_encode([
+                'status' => 'error',
+                'message' => $th->getMessage()
+            ]);
+        }
+    }
+];
diff --git a/public/site/plugins/notifications/routes/mark-as-read.php b/public/site/plugins/notifications/routes/mark-as-read.php
new file mode 100644
index 0000000..736b39f
--- /dev/null
+++ b/public/site/plugins/notifications/routes/mark-as-read.php
@@ -0,0 +1,46 @@
+<?php
+
+/**
+ * Route pour marquer une notification comme lue.
+ * Délègue au bon provider selon le type de notification.
+ */
+return [
+    'pattern' => '(:all)mark-notification-read.json',
+    'method' => 'POST',
+    'action' => function () {
+        $json = file_get_contents('php://input');
+        $data = json_decode($json);
+
+        if (!$data || !isset($data->type) || !isset($data->id)) {
+            return json_encode([
+                'status' => 'error',
+                'message' => 'Missing required fields: type, id'
+            ]);
+        }
+
+        try {
+            $collector = kirby()->option('adrienpayet.pdc-notifications.collector');
+
+            if (!$collector) {
+                throw new Exception('NotificationCollector not initialized');
+            }
+
+            $success = $collector->markAsRead(
+                $data->type,
+                $data->id,
+                (array) $data,
+                kirby()->user()
+            );
+
+            return json_encode([
+                'status' => $success ? 'success' : 'error',
+                'message' => $success ? 'Notification marked as read' : 'Failed to mark notification as read'
+            ]);
+        } catch (\Throwable $th) {
+            return json_encode([
+                'status' => 'error',
+                'message' => $th->getMessage()
+            ]);
+        }
+    }
+];
diff --git a/public/site/plugins/notifications/src/NotificationCollector.php b/public/site/plugins/notifications/src/NotificationCollector.php
new file mode 100644
index 0000000..ec1714b
--- /dev/null
+++ b/public/site/plugins/notifications/src/NotificationCollector.php
@@ -0,0 +1,181 @@
+<?php
+
+namespace adrienpayet\notifications;
+
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+
+/**
+ * Collecteur de notifications qui agrège tous les providers.
+ *
+ * Permet de :
+ * - Enregistrer des providers de notifications
+ * - Collecter toutes les notifications de tous les providers
+ * - Déléguer le markAsRead au bon provider
+ */
+class NotificationCollector
+{
+    /** @var NotificationProvider[] */
+    private array $providers = [];
+
+    /**
+     * Enregistre un nouveau provider.
+     */
+    public function register(NotificationProvider $provider): void
+    {
+        $this->providers[$provider->getType()] = $provider;
+    }
+
+    /**
+     * Collecte toutes les notifications de tous les providers pour un projet.
+     *
+     * @param Page $project Le projet à scanner
+     * @param User $user L'utilisateur courant
+     * @return array Liste triée par date décroissante
+     */
+    public function collect(Page $project, User $user): array
+    {
+        $all = [];
+
+        foreach ($this->providers as $provider) {
+            try {
+                $notifications = $provider->collect($project, $user);
+                $all = array_merge($all, $notifications);
+            } catch (\Throwable $e) {
+                // Log l'erreur mais continue avec les autres providers
+                error_log("NotificationCollector: Error in {$provider->getType()}: " . $e->getMessage());
+            }
+        }
+
+        // Trier par date décroissante
+        usort($all, function ($a, $b) {
+            $dateA = strtotime($a['date'] ?? '0');
+            $dateB = strtotime($b['date'] ?? '0');
+            return $dateB - $dateA;
+        });
+
+        return $all;
+    }
+
+    /**
+     * Collecte uniquement les données minimales des notifications (version allégée pour listing).
+     * Retourne les champs nécessaires à l'affichage mais sans les détails lourds.
+     *
+     * @param Page $project Le projet à scanner
+     * @param User $user L'utilisateur courant
+     * @return array Liste triée par date décroissante
+     */
+    public function collectLight(Page $project, User $user): array
+    {
+        $all = [];
+
+        foreach ($this->providers as $provider) {
+            try {
+                $notifications = $provider->collect($project, $user);
+                // Garder les champs nécessaires au frontend
+                foreach ($notifications as $notification) {
+                    $light = [
+                        'id' => $notification['id'] ?? null,
+                        'type' => $notification['type'] ?? null,
+                        'isRead' => $notification['isRead'] ?? false,
+                        'date' => $notification['date'] ?? null,
+                        'text' => $notification['text'] ?? null,
+                        'author' => $notification['author'] ?? null,
+                        'location' => $notification['location'] ?? []
+                    ];
+
+                    // Garder les champs optionnels s'ils existent
+                    if (isset($notification['dialogUri'])) {
+                        $light['dialogUri'] = $notification['dialogUri'];
+                    }
+                    if (isset($notification['_briefUri'])) {
+                        $light['_briefUri'] = $notification['_briefUri'];
+                    }
+                    if (isset($notification['_file'])) {
+                        $light['_file'] = $notification['_file'];
+                    }
+                    if (isset($notification['_projectUri'])) {
+                        $light['_projectUri'] = $notification['_projectUri'];
+                    }
+
+                    $all[] = $light;
+                }
+            } catch (\Throwable $e) {
+                error_log("NotificationCollector: Error in {$provider->getType()}: " . $e->getMessage());
+            }
+        }
+
+        // Trier par date décroissante
+        usort($all, function ($a, $b) {
+            $dateA = strtotime($a['date'] ?? '0');
+            $dateB = strtotime($b['date'] ?? '0');
+            return $dateB - $dateA;
+        });
+
+        return $all;
+    }
+
+    /**
+     * Marque une notification comme lue en déléguant au bon provider.
+     *
+     * @param string $type Le type de notification
+     * @param string $id L'identifiant de la notification
+     * @param array $location Informations de localisation
+     * @param User $user L'utilisateur qui marque comme lu
+     * @return bool True si succès
+     */
+    public function markAsRead(string $type, string $id, array $location, User $user): bool
+    {
+        if (!isset($this->providers[$type])) {
+            error_log("NotificationCollector: Unknown notification type: $type");
+            return false;
+        }
+
+        try {
+            return $this->providers[$type]->markAsRead($id, $location, $user);
+        } catch (\Throwable $e) {
+            error_log("NotificationCollector: Error marking as read: " . $e->getMessage());
+            return false;
+        }
+    }
+
+    /**
+     * Marque toutes les notifications comme lues pour un utilisateur.
+     *
+     * @param Page[] $projects Liste des projets
+     * @param User $user L'utilisateur
+     * @return int Nombre de notifications marquées comme lues
+     */
+    public function markAllAsRead(array $projects, User $user): int
+    {
+        $count = 0;
+
+        foreach ($projects as $project) {
+            $notifications = $this->collect($project, $user);
+
+            foreach ($notifications as $notification) {
+                if (!($notification['isRead'] ?? false)) {
+                    $success = $this->markAsRead(
+                        $notification['type'],
+                        $notification['id'],
+                        $notification,
+                        $user
+                    );
+                    if ($success) {
+                        $count++;
+                    }
+                }
+            }
+        }
+
+        return $count;
+    }
+
+    /**
+     * Retourne la liste des types de notifications enregistrés.
+     */
+    public function getRegisteredTypes(): array
+    {
+        return array_keys($this->providers);
+    }
+}
diff --git a/public/site/plugins/notifications/src/NotificationProvider.php b/public/site/plugins/notifications/src/NotificationProvider.php
new file mode 100644
index 0000000..cc11906
--- /dev/null
+++ b/public/site/plugins/notifications/src/NotificationProvider.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace adrienpayet\notifications;
+
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+
+/**
+ * Interface pour les providers de notifications.
+ *
+ * Chaque type de notification (comment, project-request, etc.)
+ * a son propre provider qui sait :
+ * - Collecter les notifications depuis la source de données
+ * - Marquer une notification comme lue sur la source
+ */
+interface NotificationProvider
+{
+    /**
+     * Retourne le type de notification géré par ce provider.
+     * Ex: 'comment', 'comment-reply', 'project-request'
+     */
+    public function getType(): string;
+
+    /**
+     * Collecte toutes les notifications de ce type pour un projet et un utilisateur.
+     *
+     * @param Page $project Le projet à scanner
+     * @param User $user L'utilisateur courant (pour filtrer ses propres actions)
+     * @return array Liste des notifications au format standard
+     */
+    public function collect(Page $project, User $user): array;
+
+    /**
+     * Marque une notification comme lue.
+     *
+     * @param string $id L'identifiant de la notification
+     * @param array $location Informations de localisation (ex: _file, _projectUri)
+     * @param User $user L'utilisateur qui marque comme lu
+     * @return bool True si succès, false sinon
+     */
+    public function markAsRead(string $id, array $location, User $user): bool;
+}
diff --git a/public/site/plugins/notifications/src/providers/AppointmentRequestProvider.php b/public/site/plugins/notifications/src/providers/AppointmentRequestProvider.php
new file mode 100644
index 0000000..8a8eb4d
--- /dev/null
+++ b/public/site/plugins/notifications/src/providers/AppointmentRequestProvider.php
@@ -0,0 +1,111 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "appointment-request".
+ * Dérivé depuis les champs du projet quand hasOptimizationRequest est true.
+ */
+class AppointmentRequestProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'appointment-request';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        // Pas de notification si pas de demande d'optimisation
+        if ($project->hasOptimizationRequest()->isFalse()) {
+            return [];
+        }
+
+        // Vérifier que les champs requis existent
+        if ($project->optimizationAuthor()->isEmpty()) {
+            return [];
+        }
+
+        $userUuid = (string) $user->uuid();
+        $authorUuid = $project->optimizationAuthor()->value();
+
+        // Ne pas notifier l'auteur de sa propre demande
+        if ($authorUuid === $userUuid) {
+            return [];
+        }
+
+        $readby = $project->optimizationReadby()->isNotEmpty()
+            ? Yaml::decode($project->optimizationReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        return [[
+            'id' => 'appointment-request-' . (string) $project->uuid(),
+            'type' => 'appointment-request',
+            'text' => $project->optimizationRequestDetails()->value() ?? '',
+            'author' => [
+                'uuid' => $authorUuid,
+                'name' => $project->optimizationAuthorName()->value() ?? '',
+                'email' => $project->optimizationAuthorEmail()->value() ?? '',
+                'role' => 'client',
+            ],
+            'date' => $project->optimizationDate()->value() ?? '',
+            'location' => [
+                'page' => [
+                    'uri' => $project->uri(),
+                    'title' => (string) $project->title(),
+                    'template' => 'project',
+                ],
+                'project' => [
+                    'uri' => $project->uri(),
+                    'title' => (string) $project->title(),
+                ]
+            ],
+            'readby' => $readby,
+            'isRead' => in_array($userUuid, $readby),
+            '_projectUri' => $project->uri(),
+        ]];
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $projectUri = $location['_projectUri'] ?? null;
+        if (!$projectUri) {
+            return false;
+        }
+
+        $project = page($projectUri);
+        if (!$project) {
+            return false;
+        }
+
+        $readby = $project->optimizationReadby()->isNotEmpty()
+            ? Yaml::decode($project->optimizationReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        $userUuid = (string) $user->uuid();
+
+        if (in_array($userUuid, $readby)) {
+            return true;
+        }
+
+        $readby[] = $userUuid;
+
+        $project->update([
+            'optimizationReadby' => array_unique($readby)
+        ]);
+
+        return true;
+    }
+}
diff --git a/public/site/plugins/notifications/src/providers/CommentProvider.php b/public/site/plugins/notifications/src/providers/CommentProvider.php
new file mode 100644
index 0000000..fc92ce1
--- /dev/null
+++ b/public/site/plugins/notifications/src/providers/CommentProvider.php
@@ -0,0 +1,172 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "comment".
+ * Collecte les commentaires depuis les fichiers des étapes du projet.
+ */
+class CommentProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'comment';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        $notifications = [];
+        $userUuid = (string) $user->uuid();
+
+        // Parcourir toutes les étapes du projet
+        foreach ($project->children() as $step) {
+            // Parcourir tous les fichiers de chaque étape
+            foreach ($step->files() as $file) {
+                if ($file->comments()->isEmpty()) {
+                    continue;
+                }
+
+                $comments = Yaml::decode($file->comments()->value());
+                if (!is_array($comments)) {
+                    continue;
+                }
+
+                foreach ($comments as $comment) {
+                    // Ignorer les commentaires de type reply (gérés par ReplyProvider)
+                    if (($comment['type'] ?? 'comment') === 'comment-reply') {
+                        continue;
+                    }
+
+                    // Ne pas notifier l'auteur de son propre commentaire
+                    $authorUuid = $comment['author']['uuid'] ?? '';
+                    if ($authorUuid === $userUuid) {
+                        continue;
+                    }
+
+                    $readby = $comment['readby'] ?? [];
+
+                    $location = $comment['location'] ?? [];
+                    // Assurer que location.project existe toujours
+                    if (!isset($location['project'])) {
+                        $location['project'] = [
+                            'uri' => $project->uri(),
+                            'title' => (string) $project->title(),
+                        ];
+                    }
+
+                    $notifications[] = [
+                        'id' => $comment['id'],
+                        'type' => 'comment',
+                        'text' => $comment['text'] ?? '',
+                        'author' => $comment['author'] ?? [],
+                        'date' => $comment['date'] ?? '',
+                        'location' => $location,
+                        'position' => $comment['position'] ?? [],
+                        'readby' => $readby,
+                        'isRead' => in_array($userUuid, $readby),
+                        // Métadonnées pour markAsRead
+                        '_file' => (string) $file->uuid(),
+                        '_stepUri' => $step->uri(),
+                    ];
+                }
+            }
+
+            // Parcourir aussi les sous-pages (ex: tracks dans virtual-sample)
+            foreach ($step->children() as $subPage) {
+                foreach ($subPage->files() as $file) {
+                    if ($file->comments()->isEmpty()) {
+                        continue;
+                    }
+
+                    $comments = Yaml::decode($file->comments()->value());
+                    if (!is_array($comments)) {
+                        continue;
+                    }
+
+                    foreach ($comments as $comment) {
+                        if (($comment['type'] ?? 'comment') === 'comment-reply') {
+                            continue;
+                        }
+
+                        $authorUuid = $comment['author']['uuid'] ?? '';
+                        if ($authorUuid === $userUuid) {
+                            continue;
+                        }
+
+                        $readby = $comment['readby'] ?? [];
+
+                        $location = $comment['location'] ?? [];
+                        // Assurer que location.project existe toujours
+                        if (!isset($location['project'])) {
+                            $location['project'] = [
+                                'uri' => $project->uri(),
+                                'title' => (string) $project->title(),
+                            ];
+                        }
+
+                        $notifications[] = [
+                            'id' => $comment['id'],
+                            'type' => 'comment',
+                            'text' => $comment['text'] ?? '',
+                            'author' => $comment['author'] ?? [],
+                            'date' => $comment['date'] ?? '',
+                            'location' => $location,
+                            'position' => $comment['position'] ?? [],
+                            'readby' => $readby,
+                            'isRead' => in_array($userUuid, $readby),
+                            '_file' => (string) $file->uuid(),
+                            '_stepUri' => $subPage->uri(),
+                        ];
+                    }
+                }
+            }
+        }
+
+        return $notifications;
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $fileUuid = $location['_file'] ?? null;
+        if (!$fileUuid) {
+            return false;
+        }
+
+        // Trouver le fichier par UUID (peut être avec ou sans préfixe file://)
+        $fileUri = str_starts_with($fileUuid, 'file://') ? $fileUuid : 'file://' . $fileUuid;
+        $file = kirby()->file($fileUri);
+        if (!$file) {
+            return false;
+        }
+
+        $comments = Yaml::decode($file->comments()->value());
+        if (!is_array($comments)) {
+            return false;
+        }
+
+        $userUuid = (string) $user->uuid();
+        $updated = false;
+
+        foreach ($comments as &$comment) {
+            if ($comment['id'] === $id) {
+                $comment['readby'] = $comment['readby'] ?? [];
+                if (!in_array($userUuid, $comment['readby'])) {
+                    $comment['readby'][] = $userUuid;
+                    $updated = true;
+                }
+                break;
+            }
+        }
+
+        if ($updated) {
+            $file->update(['comments' => $comments]);
+        }
+
+        return $updated;
+    }
+}
diff --git a/public/site/plugins/notifications/src/providers/ContentProvider.php b/public/site/plugins/notifications/src/providers/ContentProvider.php
new file mode 100644
index 0000000..94698ec
--- /dev/null
+++ b/public/site/plugins/notifications/src/providers/ContentProvider.php
@@ -0,0 +1,135 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "content".
+ * Dérivé depuis les briefs validés (isValidated = true).
+ */
+class ContentProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'content';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        $notifications = [];
+        $userUuid = (string) $user->uuid();
+
+        // Chercher les briefs validés (client-brief et extended-brief)
+        $briefTemplates = ['client-brief', 'extended-brief'];
+
+        foreach ($project->children() as $step) {
+            if (!in_array($step->intendedTemplate()->name(), $briefTemplates)) {
+                continue;
+            }
+
+            // Pas de notification si le brief n'est pas validé
+            if ($step->isValidated()->isFalse()) {
+                continue;
+            }
+
+            // Vérifier que les champs requis existent
+            if ($step->validatedBy()->isEmpty()) {
+                continue;
+            }
+
+            $authorUuid = $step->validatedBy()->value();
+
+            // Ne pas notifier l'auteur de sa propre validation
+            if ($authorUuid === $userUuid) {
+                continue;
+            }
+
+            $readby = $step->validationReadby()->isNotEmpty()
+                ? Yaml::decode($step->validationReadby()->value())
+                : [];
+
+            if (!is_array($readby)) {
+                $readby = [];
+            }
+
+            $stepLabel = $step->intendedTemplate()->name() === 'client-brief'
+                ? 'Brief client'
+                : 'Brief étendu';
+
+            $notification = [
+                'id' => 'content-' . (string) $step->uuid(),
+                'type' => 'content',
+                'text' => 'Nouveau ' . strtolower($stepLabel) . ' validé',
+                'author' => [
+                    'uuid' => $authorUuid,
+                    'name' => $step->validatedByName()->value() ?? '',
+                    'email' => $step->validatedByEmail()->value() ?? '',
+                    'role' => 'client',
+                ],
+                'date' => $step->validatedAt()->value() ?? '',
+                'location' => [
+                    'page' => [
+                        'uri' => $step->uri(),
+                        'title' => (string) $step->title(),
+                        'template' => $step->intendedTemplate()->name(),
+                    ],
+                    'project' => [
+                        'uri' => $project->uri(),
+                        'title' => (string) $project->title(),
+                    ]
+                ],
+                'readby' => $readby,
+                'isRead' => in_array($userUuid, $readby),
+                '_briefUri' => $step->uri(),
+            ];
+
+            // Ajouter le dialogUri si présent (validation depuis PDF)
+            if ($step->validationDialogUri()->isNotEmpty()) {
+                $notification['dialogUri'] = $step->validationDialogUri()->value();
+            }
+
+            $notifications[] = $notification;
+        }
+
+        return $notifications;
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $briefUri = $location['_briefUri'] ?? null;
+        if (!$briefUri) {
+            return false;
+        }
+
+        $brief = page($briefUri);
+        if (!$brief) {
+            return false;
+        }
+
+        $readby = $brief->validationReadby()->isNotEmpty()
+            ? Yaml::decode($brief->validationReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        $userUuid = (string) $user->uuid();
+
+        if (in_array($userUuid, $readby)) {
+            return true;
+        }
+
+        $readby[] = $userUuid;
+
+        $brief->update([
+            'validationReadby' => array_unique($readby)
+        ]);
+
+        return true;
+    }
+}
diff --git a/public/site/plugins/notifications/src/providers/ProjectRequestProvider.php b/public/site/plugins/notifications/src/providers/ProjectRequestProvider.php
new file mode 100644
index 0000000..cc3d186
--- /dev/null
+++ b/public/site/plugins/notifications/src/providers/ProjectRequestProvider.php
@@ -0,0 +1,111 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "project-request".
+ * Dérivé depuis les champs du projet quand isClientRequest est true.
+ */
+class ProjectRequestProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'project-request';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        // Pas de notification si ce n'est pas une demande client
+        if ($project->isClientRequest()->isFalse()) {
+            return [];
+        }
+
+        // Vérifier que les champs requis existent
+        if ($project->requestAuthor()->isEmpty()) {
+            return [];
+        }
+
+        $userUuid = (string) $user->uuid();
+        $authorUuid = $project->requestAuthor()->value();
+
+        // Ne pas notifier l'auteur de sa propre demande
+        if ($authorUuid === $userUuid) {
+            return [];
+        }
+
+        $readby = $project->requestReadby()->isNotEmpty()
+            ? Yaml::decode($project->requestReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        return [[
+            'id' => 'project-request-' . (string) $project->uuid(),
+            'type' => 'project-request',
+            'text' => $project->requestDetails()->value() ?? '',
+            'author' => [
+                'uuid' => $authorUuid,
+                'name' => $project->requestAuthorName()->value() ?? '',
+                'email' => $project->requestAuthorEmail()->value() ?? '',
+                'role' => 'client',
+            ],
+            'date' => $project->requestDate()->value() ?? '',
+            'location' => [
+                'page' => [
+                    'uri' => $project->uri(),
+                    'title' => (string) $project->title(),
+                    'template' => 'project',
+                ],
+                'project' => [
+                    'uri' => $project->uri(),
+                    'title' => (string) $project->title(),
+                ]
+            ],
+            'readby' => $readby,
+            'isRead' => in_array($userUuid, $readby),
+            '_projectUri' => $project->uri(),
+        ]];
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $projectUri = $location['_projectUri'] ?? null;
+        if (!$projectUri) {
+            return false;
+        }
+
+        $project = page($projectUri);
+        if (!$project) {
+            return false;
+        }
+
+        $readby = $project->requestReadby()->isNotEmpty()
+            ? Yaml::decode($project->requestReadby()->value())
+            : [];
+
+        if (!is_array($readby)) {
+            $readby = [];
+        }
+
+        $userUuid = (string) $user->uuid();
+
+        if (in_array($userUuid, $readby)) {
+            return true; // Déjà lu
+        }
+
+        $readby[] = $userUuid;
+
+        $project->update([
+            'requestReadby' => array_unique($readby)
+        ]);
+
+        return true;
+    }
+}
diff --git a/public/site/plugins/notifications/src/providers/ReplyProvider.php b/public/site/plugins/notifications/src/providers/ReplyProvider.php
new file mode 100644
index 0000000..467b245
--- /dev/null
+++ b/public/site/plugins/notifications/src/providers/ReplyProvider.php
@@ -0,0 +1,142 @@
+<?php
+
+namespace adrienpayet\notifications\providers;
+
+use adrienpayet\notifications\NotificationProvider;
+use Kirby\Cms\Page;
+use Kirby\Cms\User;
+use Kirby\Data\Yaml;
+
+/**
+ * Provider pour les notifications de type "comment-reply".
+ * Collecte les réponses aux commentaires depuis les fichiers.
+ */
+class ReplyProvider implements NotificationProvider
+{
+    public function getType(): string
+    {
+        return 'comment-reply';
+    }
+
+    public function collect(Page $project, User $user): array
+    {
+        $notifications = [];
+        $userUuid = (string) $user->uuid();
+
+        // Parcourir toutes les étapes du projet
+        foreach ($project->children() as $step) {
+            $this->collectFromPage($step, $project, $userUuid, $notifications);
+
+            // Parcourir aussi les sous-pages (ex: tracks)
+            foreach ($step->children() as $subPage) {
+                $this->collectFromPage($subPage, $project, $userUuid, $notifications);
+            }
+        }
+
+        return $notifications;
+    }
+
+    private function collectFromPage(Page $page, Page $project, string $userUuid, array &$notifications): void
+    {
+        foreach ($page->files() as $file) {
+            if ($file->comments()->isEmpty()) {
+                continue;
+            }
+
+            $comments = Yaml::decode($file->comments()->value());
+            if (!is_array($comments)) {
+                continue;
+            }
+
+            foreach ($comments as $comment) {
+                $replies = $comment['replies'] ?? [];
+
+                foreach ($replies as $reply) {
+                    // Ne pas notifier l'auteur de sa propre réponse
+                    $authorUuid = $reply['author']['uuid'] ?? '';
+                    if ($authorUuid === $userUuid) {
+                        continue;
+                    }
+
+                    $readby = $reply['readby'] ?? [];
+
+                    $location = $reply['location'] ?? $comment['location'] ?? [];
+                    // Assurer que location.project existe toujours
+                    if (!isset($location['project'])) {
+                        $location['project'] = [
+                            'uri' => $project->uri(),
+                            'title' => (string) $project->title(),
+                        ];
+                    }
+
+                    $notifications[] = [
+                        'id' => $reply['id'],
+                        'type' => 'comment-reply',
+                        'text' => $reply['text'] ?? '',
+                        'author' => $reply['author'] ?? [],
+                        'date' => $reply['date'] ?? '',
+                        'location' => $location,
+                        'position' => $reply['position'] ?? $comment['position'] ?? [],
+                        'readby' => $readby,
+                        'isRead' => in_array($userUuid, $readby),
+                        // Métadonnées pour markAsRead
+                        '_file' => (string) $file->uuid(),
+                        '_parentCommentId' => $comment['id'],
+                        '_stepUri' => $page->uri(),
+                    ];
+                }
+            }
+        }
+    }
+
+    public function markAsRead(string $id, array $location, User $user): bool
+    {
+        $fileUuid = $location['_file'] ?? null;
+        $parentCommentId = $location['_parentCommentId'] ?? null;
+
+        if (!$fileUuid) {
+            return false;
+        }
+
+        // Trouver le fichier par UUID (peut être avec ou sans préfixe file://)
+        $fileUri = str_starts_with($fileUuid, 'file://') ? $fileUuid : 'file://' . $fileUuid;
+        $file = kirby()->file($fileUri);
+        if (!$file) {
+            return false;
+        }
+
+        $comments = Yaml::decode($file->comments()->value());
+        if (!is_array($comments)) {
+            return false;
+        }
+
+        $userUuid = (string) $user->uuid();
+        $updated = false;
+
+        foreach ($comments as &$comment) {
+            // Si on a l'ID du parent, l'utiliser pour cibler
+            if ($parentCommentId && $comment['id'] !== $parentCommentId) {
+                continue;
+            }
+
+            $replies = &$comment['replies'] ?? [];
+
+            foreach ($replies as &$reply) {
+                if ($reply['id'] === $id) {
+                    $reply['readby'] = $reply['readby'] ?? [];
+                    if (!in_array($userUuid, $reply['readby'])) {
+                        $reply['readby'][] = $userUuid;
+                        $updated = true;
+                    }
+                    break 2;
+                }
+            }
+        }
+
+        if ($updated) {
+            $file->update(['comments' => $comments]);
+        }
+
+        return $updated;
+    }
+}
diff --git a/public/site/plugins/refresh-cache-button/index.js b/public/site/plugins/refresh-cache-button/index.js
index 8fc4d42..4d99982 100644
--- a/public/site/plugins/refresh-cache-button/index.js
+++ b/public/site/plugins/refresh-cache-button/index.js
@@ -1 +1 @@
-(function(){"use strict";function f(n,e,a,t,r,c,s,u){var o=typeof n=="function"?n.options:n;return e&&(o.render=e,o.staticRenderFns=a,o._compiled=!0),{exports:n,options:o}}const l={__name:"RefreshCacheButton",props:{pageUri:String,pageStatus:String,lastCacheUpdate:String},setup(n){const{pageUri:e,pageStatus:a,lastCacheUpdate:t}=n,r=Vue.ref("Rafraîchir"),c=Vue.ref("refresh"),s=Vue.ref("aqua-icon"),u=Vue.computed(()=>(t==null?void 0:t.length)>0?"Dernière mise à jour : "+t:"Mettre à jour le cache front");async function o(){r.value="En cours…",c.value="loader",s.value="orange-icon";const m={method:"POST","Content-Type":"application/json",body:JSON.stringify({pageUri:e})},i=await(await fetch("/refresh-cache.json",m)).json();i.status==="error"?(console.error(i),r.value="Erreur",c.value="alert",s.value="red-icon"):(console.log(i),r.value="Terminé",c.value="check",s.value="green-icon",setTimeout(()=>{location.href=location.href},1500))}return{__sfc:!0,text:r,icon:c,theme:s,title:u,refreshCache:o}}};var h=function(){var e=this,a=e._self._c,t=e._self._setupProxy;return a("div",{attrs:{id:"refresh-cache-button"}},[e.pageStatus!=="draft"?a("k-button",{attrs:{theme:t.theme,variant:"dimmed",icon:t.icon,title:t.title},on:{click:function(r){return t.refreshCache()}}},[e._v(e._s(t.text))]):e._e()],1)},_=[],p=f(l,h,_);const d=p.exports;window.panel.plugin("adrienpayet/refresh-cache-button",{components:{"refresh-cache-button":d}})})();
+(function(){"use strict";function _(n,e,u,t,r,s,a,l){var c=typeof n=="function"?n.options:n;return e&&(c.render=e,c.staticRenderFns=u,c._compiled=!0),{exports:n,options:c}}const g={__name:"RefreshCacheButton",props:{pageUri:String,pageStatus:String,lastCacheUpdate:String},setup(n){const{pageUri:e,pageStatus:u,lastCacheUpdate:t}=n,r=Vue.ref("Rafraîchir"),s=Vue.ref("refresh"),a=Vue.ref("aqua-icon"),l=Vue.ref(!1),c=Vue.computed(()=>(t==null?void 0:t.length)>0?"Dernière mise à jour : "+t:"Mettre à jour le cache front");async function T(){l.value=!0,s.value="loader",a.value="orange-icon",e==="projects"?await d():await v()}async function d(){let f=0;const h=10;let i=!0,b=0;r.value="En cours 0%";try{for(;i;){const p={method:"POST","Content-Type":"application/json",body:JSON.stringify({pageUri:"projects",offset:f,limit:h})},o=await(await fetch("/refresh-cache.json",p)).json();if(o.status==="error")throw new Error(o.message);b=o.total,i=o.hasMore,f=o.nextOffset;const m=Math.round(o.processed/o.total*100);r.value=`En cours ${m}%`,console.log(`Batch terminé : ${o.processed}/${o.total} projets (${m}%)`)}r.value="Terminé",s.value="check",a.value="green-icon",setTimeout(()=>{location.href=location.href},2e3)}catch(p){console.error(p),r.value="Erreur",s.value="alert",a.value="red-icon",l.value=!1}}async function v(){r.value="En cours…";const f={method:"POST","Content-Type":"application/json",body:JSON.stringify({pageUri:e})};try{const i=await(await fetch("/refresh-cache.json",f)).json();if(i.status==="error")throw new Error(i.message);console.log(i),r.value="Terminé",s.value="check",a.value="green-icon",setTimeout(()=>{location.href=location.href},1500)}catch(h){console.error(h),r.value="Erreur",s.value="alert",a.value="red-icon",l.value=!1}}return{__sfc:!0,text:r,icon:s,theme:a,isProcessing:l,title:c,refreshCache:T,refreshAllProjects:d,refreshSingleProject:v}}};var j=function(){var e=this,u=e._self._c,t=e._self._setupProxy;return u("div",{attrs:{id:"refresh-cache-button"}},[e.pageStatus!=="draft"?u("k-button",{attrs:{theme:t.theme,variant:"dimmed",icon:t.icon,title:t.title,disabled:t.isProcessing},on:{click:function(r){return t.refreshCache()}}},[e._v(e._s(t.text))]):e._e()],1)},y=[],w=_(g,j,y);const S=w.exports;window.panel.plugin("adrienpayet/refresh-cache-button",{components:{"refresh-cache-button":S}})})();
diff --git a/public/site/plugins/refresh-cache-button/src/components/RefreshCacheButton.vue b/public/site/plugins/refresh-cache-button/src/components/RefreshCacheButton.vue
index 5fdb1cf..f6b12f0 100644
--- a/public/site/plugins/refresh-cache-button/src/components/RefreshCacheButton.vue
+++ b/public/site/plugins/refresh-cache-button/src/components/RefreshCacheButton.vue
@@ -7,6 +7,7 @@
       :icon="icon"
       :title="title"
       @click="refreshCache()"
+      :disabled="isProcessing"
       >{{ text }}</k-button
     >
   </div>
@@ -24,6 +25,8 @@ const { pageUri, pageStatus, lastCacheUpdate } = defineProps({
 const text = ref("Rafraîchir");
 const icon = ref("refresh");
 const theme = ref("aqua-icon");
+const isProcessing = ref(false);
+
 const title = computed(() => {
   return lastCacheUpdate?.length > 0
     ? "Dernière mise à jour : " + lastCacheUpdate
@@ -31,25 +34,91 @@ const title = computed(() => {
 });
 
 async function refreshCache() {
-  text.value = "En cours…";
+  isProcessing.value = true;
   icon.value = "loader";
   theme.value = "orange-icon";
 
+  // Pour les projets multiples (batch processing)
+  if (pageUri === 'projects') {
+    await refreshAllProjects();
+  } else {
+    await refreshSingleProject();
+  }
+}
+
+async function refreshAllProjects() {
+  let offset = 0;
+  const limit = 10; // 10 projets par batch
+  let hasMore = true;
+  let total = 0;
+
+  text.value = "En cours 0%";
+
+  try {
+    while (hasMore) {
+      const init = {
+        method: "POST",
+        "Content-Type": "application/json",
+        body: JSON.stringify({
+          pageUri: 'projects',
+          offset,
+          limit
+        }),
+      };
+
+      const res = await fetch("/refresh-cache.json", init);
+      const json = await res.json();
+
+      if (json.status === "error") {
+        throw new Error(json.message);
+      }
+
+      total = json.total;
+      hasMore = json.hasMore;
+      offset = json.nextOffset;
+
+      // Mise à jour de la progression dans le texte du bouton
+      const progress = Math.round((json.processed / json.total) * 100);
+      text.value = `En cours ${progress}%`;
+
+      console.log(`Batch terminé : ${json.processed}/${json.total} projets (${progress}%)`);
+    }
+
+    // Succès
+    text.value = "Terminé";
+    icon.value = "check";
+    theme.value = "green-icon";
+
+    setTimeout(() => {
+      location.href = location.href;
+    }, 2000);
+
+  } catch (error) {
+    console.error(error);
+    text.value = "Erreur";
+    icon.value = "alert";
+    theme.value = "red-icon";
+    isProcessing.value = false;
+  }
+}
+
+async function refreshSingleProject() {
+  text.value = "En cours…";
+
   const init = {
     method: "POST",
     "Content-Type": "application/json",
     body: JSON.stringify({ pageUri }),
   };
 
-  const res = await fetch("/refresh-cache.json", init);
-  const json = await res.json();
+  try {
+    const res = await fetch("/refresh-cache.json", init);
+    const json = await res.json();
+
+    if (json.status === "error") {
+      throw new Error(json.message);
+    }
 
-  if (json.status === "error") {
-    console.error(json);
-    text.value = "Erreur";
-    icon.value = "alert";
-    theme.value = "red-icon";
-  } else {
     console.log(json);
     text.value = "Terminé";
     icon.value = "check";
@@ -58,6 +127,13 @@ async function refreshCache() {
     setTimeout(() => {
       location.href = location.href;
     }, 1500);
+
+  } catch (error) {
+    console.error(error);
+    text.value = "Erreur";
+    icon.value = "alert";
+    theme.value = "red-icon";
+    isProcessing.value = false;
   }
 }
 </script>
diff --git a/public/site/plugins/refresh-cache-button/src/routes/refresh-cache.php b/public/site/plugins/refresh-cache-button/src/routes/refresh-cache.php
index 207d34e..7f93443 100644
--- a/public/site/plugins/refresh-cache-button/src/routes/refresh-cache.php
+++ b/public/site/plugins/refresh-cache-button/src/routes/refresh-cache.php
@@ -1,5 +1,5 @@
 <?php
-set_time_limit(0);
+set_time_limit(60);
 
 return [
   'pattern' => '/refresh-cache.json',
@@ -10,17 +10,42 @@ return [
 
     if ($data->pageUri === 'projects') {
       $projects = page('projects')->children();
-      foreach ($projects as $project) {
-        $project->rebuildStepsCache();
 
-        $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT, 'Europe/Paris');
-        $project->update([
-          'lastCacheUpdate' => $formatter->format(time())
-        ]);
+      // Support du batch processing
+      $offset = isset($data->offset) ? intval($data->offset) : 0;
+      $limit = isset($data->limit) ? intval($data->limit) : 10; // 10 projets par batch par défaut
+      $total = $projects->count();
+
+      // Slice pour ne traiter qu'un batch
+      $batch = $projects->slice($offset, $limit);
+      $processed = 0;
+
+      foreach ($batch as $project) {
+        try {
+          $project->rebuildStepsCache();
+          $project->invalidateNotificationsCache();
+
+          $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT, 'Europe/Paris');
+          $project->update([
+            'lastCacheUpdate' => $formatter->format(time())
+          ]);
+          $processed++;
+        } catch (\Throwable $e) {
+          error_log("Error refreshing cache for project {$project->slug()}: " . $e->getMessage());
+        }
       }
+
+      $remaining = max(0, $total - ($offset + $processed));
+      $hasMore = $remaining > 0;
+
       return [
-        'satus' => 'success',
-        'message' => 'Données des pages projets rafraîchies avec succès.'
+        'status' => 'success',
+        'message' => "Batch terminé : $processed projets traités.",
+        'processed' => $offset + $processed,
+        'total' => $total,
+        'remaining' => $remaining,
+        'hasMore' => $hasMore,
+        'nextOffset' => $hasMore ? $offset + $limit : null
       ];
     } else {
       try {
@@ -41,7 +66,7 @@ return [
 
       if (!$project) {
         return [
-          'satus' => 'error',
+          'status' => 'error',
           'message' => 'Impossible de rafraîchir les données de la page ' . $data->pageUri . '. Aucun projet correspondant.'
         ];
       }
@@ -55,7 +80,7 @@ return [
 
       
       return [
-        'satus' => 'success',
+        'status' => 'success',
         'message' => 'Données de la page ' . $data->pageUri . ' rafraîchie avec succès.'
       ];
     }
diff --git a/public/site/plugins/user-projects/index.php b/public/site/plugins/user-projects/index.php
index 15c5aad..c1a4f3f 100644
--- a/public/site/plugins/user-projects/index.php
+++ b/public/site/plugins/user-projects/index.php
@@ -3,18 +3,21 @@
 Kirby::plugin('adrienpayet/pdc-authorized-projects', [
   'userMethods' => [
     'currentProjects' => function() {
-      if ($this->role() == 'admin') {
-        return page('projects')->children()->listed();
-      } else {
-        return $this->projects()->toPages()->listed();
+      $listed = page('projects')->children()->listed();
+      if ($this->role() == 'admin' && $this->hasNoAssignedProjects()) {
+        return $listed;
       }
+      return $listed->filter(fn($project) => $project->users()->toUsers()->has($this));
     },
     'archivedProjects' => function() {
-      if ($this->role() == 'admin') {
-        return page('projects')->children()->unlisted();
-      } else {
-        return $this->projects()->toPages()->unlisted();
+      $unlisted = page('projects')->children()->unlisted();
+      if ($this->role() == 'admin' && $this->hasNoAssignedProjects()) {
+        return $unlisted;
       }
+      return $unlisted->filter(fn($project) => $project->users()->toUsers()->has($this));
+    },
+    'hasNoAssignedProjects' => function() {
+      return page('projects')->children()->filter(fn($p) => $p->users()->toUsers()->has($this))->isEmpty();
     },
   ]
 ]);
diff --git a/public/site/sessions/.gitkeep b/public/site/sessions/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/public/site/templates/project.json.php b/public/site/templates/project.json.php
index a099586..3a31cd1 100644
--- a/public/site/templates/project.json.php
+++ b/public/site/templates/project.json.php
@@ -1,5 +1,18 @@
 <?php
 
+// Récupérer le collector de notifications pour ce projet individuel
+$notificationCollector = $kirby->option('adrienpayet.pdc-notifications.collector');
+$notifications = [];
+
+if ($notificationCollector && $kirby->user()) {
+    try {
+        $notifications = $notificationCollector->collect($page, $kirby->user());
+    } catch (\Throwable $e) {
+        error_log("Error collecting notifications for project {$page->uri()}: " . $e->getMessage());
+        $notifications = [];
+    }
+}
+
 $project = [
     'title'    => $page->title()->value(),
     'url'      => $page->url(),
@@ -11,7 +24,7 @@ $project = [
     'steps'                  => $page->getSteps(),
     'designToLight'          => $page->isDTLEnabled()->isTrue() ? processDTLProposals($page) : null,
     'hasOptimizationRequest' => $page->hasOptimizationRequest()->isTrue(),
-    'notifications'          => $page->notifications()->yaml(),
+    'notifications'          => $notifications,
 ];
 
 $pageData = array_merge($genericData, $project);
diff --git a/public/site/templates/projects.json.php b/public/site/templates/projects.json.php
index ba74b69..6f589eb 100644
--- a/public/site/templates/projects.json.php
+++ b/public/site/templates/projects.json.php
@@ -7,24 +7,32 @@ if (!$kirby->user()) {
   ]);
 }
 
-function getProjectData($project)
-{  
+function getProjectData($project, $user)
+{
+    // Utiliser getNotificationsLight() avec cache pour optimiser les performances
+    $notifications = [];
+    try {
+        $notifications = $project->getNotificationsLight($user);
+    } catch (\Throwable $e) {
+        error_log("Error getting notifications for project {$project->uri()}: " . $e->getMessage());
+        $notifications = [];
+    }
 
     $data = [
-    'title'                  => $project->title()->value(),
-    'url'                    => $project->url(),
-    'uri'                    => '/' . $project->uri(),
-    'modified'               => $project->modified('Y-MM-d'),
-    'currentStep'            => $project->currentStep()->value(),
-    'status'                 => $project->status(),
-    'logo'                   => $project->client()->toPage() ? $project->client()->toPage()->logo()->toFile()->url() : '',
-    'steps'                  => $project->getSteps(),
-    'notifications'          => Yaml::decode($project->notifications()->value),
-    'uuid'                   => (string) $project->uuid(),
-    'slug'                   => (string) $project->slug(),
-    'isDTLEnabled'           => $project->isDTLEnabled()->isTrue(),
-    'hasOptimizationRequest' => $project->hasOptimizationRequest()->isTrue(),
-  ];
+        'title'                  => $project->title()->value(),
+        'url'                    => $project->url(),
+        'uri'                    => '/' . $project->uri(),
+        'modified'               => $project->modified('Y-MM-d'),
+        'currentStep'            => $project->currentStep()->value(),
+        'status'                 => $project->status(),
+        'logo'                   => $project->client()->toPage() ? $project->client()->toPage()->logo()->toFile()->url() : '',
+        'steps'                  => $project->getSteps(),
+        'notifications'          => $notifications,
+        'uuid'                   => (string) $project->uuid(),
+        'slug'                   => (string) $project->slug(),
+        'isDTLEnabled'           => $project->isDTLEnabled()->isTrue(),
+        'hasOptimizationRequest' => $project->hasOptimizationRequest()->isTrue(),
+    ];
 
     if ($project->isDTLEnabled()) {
         $data['designToLight'] = processDTLProposals($project);
@@ -33,8 +41,15 @@ function getProjectData($project)
     return $data;
 }
 
+$currentUser = $kirby->user();
+
 try {
-    $children = $kirby->user()->role() == 'admin' ? $page->childrenAndDrafts()->map(fn($project) => getProjectData($project))->values() : $kirby->user()->projects()->toPages()->map(fn($project) => getProjectData($project))->values();
+    if ($currentUser->role() == 'admin' && $currentUser->hasNoAssignedProjects()) {
+        $projectCollection = $page->childrenAndDrafts();
+    } else {
+        $projectCollection = $currentUser->currentProjects()->merge($currentUser->archivedProjects());
+    }
+    $children = $projectCollection->map(fn($project) => getProjectData($project, $currentUser))->values();
 } catch (\Throwable $th) {
     throw new Exception($th->getMessage() . ' line ' . $th->getLine() . ' in file ' . $th->getFile(), 1);
     $children = [];
diff --git a/src/assets/css/src/2.blocks.comments.css b/src/assets/css/src/2.blocks.comments.css
index 4d2ac12..450e09b 100644
--- a/src/assets/css/src/2.blocks.comments.css
+++ b/src/assets/css/src/2.blocks.comments.css
@@ -20,7 +20,7 @@
 }
 
 .comments.empty::after {
-  content: "Partagez vos idées en ajoutant des commentaires";
+  content: attr(data-empty-message);
   height: 100%;
   display: grid;
   place-items: center;
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 65aa5a3..ca1cc2a 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -29,7 +29,22 @@
   <div v-if="isExpanded" id="menu" class="flex | rounded-xl">
     <header class="w-full | flex">
       <!-- TODO: à dynamiser en récupérant le $site->title() -->
-      <p lang="en">Design to Pack</p>
+      <p :lang="currentLocale">Design to Pack</p>
+      <div class="lang-toggle">
+        <button
+          @click="switchLocale('fr')"
+          :class="{ active: currentLocale === 'fr' }"
+        >
+          FR
+        </button>
+        <span class="slash">/</span>
+        <button
+          @click="switchLocale('en')"
+          :class="{ active: currentLocale === 'en' }"
+        >
+          EN
+        </button>
+      </div>
     </header>
     <nav class="w-full | flow">
       <ul class="flex">
@@ -51,25 +66,23 @@
             >{{ mainItem.title }}</router-link
           >
           <span
-            v-if="mainItem.title === 'Inspirations' && page?.newInspirations"
+            v-if="
+              mainItem.title === t('menu.inspirations') && page?.newInspirations
+            "
             class="pill pill--secondary"
-            >{{ 'Nouveautés' }}</span
+            >{{ t('menu.news') }}</span
           >
         </li>
       </ul>
       <details :class="{ skeleton: !currentProjects }" open>
-        <summary>Projets en cours</summary>
+        <summary>{{ t('menu.currentProjects') }}</summary>
         <ul v-if="currentProjects.length > 0">
           <li
             v-for="project in currentProjects"
             :class="{ active: isCurrent(project) }"
           >
             <router-link
-              :to="
-                isEmptyBrief(project)
-                  ? project.uri + '/client-brief'
-                  : project.uri
-              "
+              :to="getProjectPath(project)"
               :class="hasUnreadNotification(project) ? 'new' : undefined"
               :data-dtl="project.isDTLEnabled ? 'true' : undefined"
               @click="collapse()"
@@ -79,13 +92,13 @@
         </ul>
       </details>
       <details v-if="archivedProjects.length">
-        <summary>Projets archivés</summary>
+        <summary>{{ t('menu.archivedProjects') }}</summary>
         <ul>
           <li
             v-for="project in archivedProjects"
             :class="{ active: isCurrent(project) }"
           >
-            <router-link :to="project.uri" @click="collapse()">{{
+            <router-link :to="getProjectPath(project)" @click="collapse()">{{
               project.title
             }}</router-link>
           </li>
@@ -96,13 +109,19 @@
       <ul class="flex">
         <li data-icon="user">
           <a
-            :href="user.role === 'admin' ? '/panel/account' : '/account'"
+            :href="
+              user.role === 'admin'
+                ? '/panel/account'
+                : currentLocale === 'en'
+                ? '/en/account'
+                : '/account'
+            "
             @click="collapse()"
-            >Profil</a
+            >{{ t('menu.profile') }}</a
           >
         </li>
         <li data-icon="logout">
-          <a href="/logout" @click="collapse()">Déconnexion</a>
+          <a href="/logout" @click="collapse()">{{ t('menu.logout') }}</a>
         </li>
       </ul>
     </footer>
@@ -113,17 +132,23 @@
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 import { useProjectsStore } from '../stores/projects';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useUserStore } from '../stores/user';
 import { usePageStore } from '../stores/page';
 import { useProjectStore } from '../stores/project';
+import { useLocaleStore } from '../stores/locale';
+import { useI18n } from 'vue-i18n';
 
 const route = useRoute();
+const router = useRouter();
 const isExpanded = ref(true);
 const { user, notifications } = storeToRefs(useUserStore());
 const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore());
 const { isEmptyBrief } = useProjectStore();
 const { page } = storeToRefs(usePageStore());
+const localeStore = useLocaleStore();
+const { currentLocale } = storeToRefs(localeStore);
+const { t } = useI18n();
 
 const unreadNotificationsCount = computed(() => {
   if (!user.value) return 0;
@@ -135,34 +160,37 @@ const unreadNotificationsCount = computed(() => {
   return count === 0 ? 0 : count;
 });
 
-const mainItems = [
-  {
-    title: 'Home',
-    path: '/',
-    icon: 'home',
-  },
-  {
-    title: 'Notifications',
-    path: '/notifications',
-    icon: 'megaphone',
-  },
-  {
-    title: 'Réunions',
-    path: '/reunions',
-    icon: 'calendar',
-    disabled: true,
-  },
-  {
-    title: 'Design to Light',
-    path: '/design-to-light',
-    icon: 'leaf',
-  },
-  {
-    title: 'Inspirations',
-    path: '/inspirations',
-    icon: 'inspiration',
-  },
-];
+const mainItems = computed(() => {
+  const prefix = currentLocale.value === 'en' ? '/en' : '';
+  return [
+    {
+      title: t('menu.home'),
+      path: prefix + '/',
+      icon: 'home',
+    },
+    {
+      title: t('menu.notifications'),
+      path: prefix + '/notifications',
+      icon: 'megaphone',
+    },
+    {
+      title: t('menu.meetings'),
+      path: prefix + '/reunions',
+      icon: 'calendar',
+      disabled: true,
+    },
+    {
+      title: t('menu.designToLight'),
+      path: prefix + '/design-to-light',
+      icon: 'leaf',
+    },
+    {
+      title: t('menu.inspirations'),
+      path: prefix + '/inspirations',
+      icon: 'inspiration',
+    },
+  ];
+});
 
 function toggleExpand() {
   isExpanded.value = !isExpanded.value;
@@ -192,6 +220,33 @@ function collapse() {
     isExpanded.value = false;
   }
 }
+
+function switchLocale(newLocale) {
+  if (newLocale === currentLocale.value) return;
+
+  let newPath = route.path;
+
+  if (newLocale === 'en') {
+    if (!newPath.startsWith('/en')) {
+      newPath = '/en' + newPath;
+    }
+  } else {
+    if (newPath.startsWith('/en')) {
+      newPath = newPath.replace(/^\/en/, '') || '/';
+    }
+  }
+
+  localeStore.setLocale(newLocale);
+  router.push(newPath);
+}
+
+function getProjectPath(project) {
+  const prefix = currentLocale.value === 'en' ? '/en' : '';
+  const path = isEmptyBrief(project)
+    ? project.uri + '/client-brief'
+    : project.uri;
+  return prefix + path;
+}
 </script>
 
 <style>
@@ -243,6 +298,25 @@ button[aria-controls='menu'][aria-expanded='false']
   overflow-y: auto;
 }
 
+/* Lang toggle */
+.lang-toggle {
+  font-family: var(--font-sans);
+  height: 1.65rem;
+}
+
+.lang-toggle button {
+  padding: 0;
+}
+
+.lang-toggle button.active {
+  background-color: transparent !important;
+  color: var(--color-primary);
+}
+
+.lang-toggle span.slash {
+  padding: 0 0.2rem;
+}
+
 @media (max-width: 1023px) {
   button[aria-controls='menu'][aria-expanded='true'] {
     left: 0;
@@ -285,6 +359,7 @@ button[aria-controls='menu'][aria-expanded='false']
   position: sticky;
   top: 0;
   z-index: 1;
+  column-gap: calc(var(--gutter) / 2);
 }
 #menu header::before {
   content: '';
diff --git a/src/components/ProjectRequestDialog.vue b/src/components/ProjectRequestDialog.vue
index ca96ecb..dd811c0 100644
--- a/src/components/ProjectRequestDialog.vue
+++ b/src/components/ProjectRequestDialog.vue
@@ -5,12 +5,12 @@
     modal
     :draggable="false"
     :dismissableMask="true"
-    header="Demander la création d’un projet"
+    :header="t('dialogs.requestProject')"
     class="dialog"
     :closeOnEscape="true"
   >
     <template #header>
-      <h2 class="font-serif text-lg">Demander la création d’un projet</h2>
+      <h2 class="font-serif text-lg">{{ t('dialogs.requestProject') }}</h2>
     </template>
 
     <form
@@ -18,24 +18,28 @@
       class="w-full h-full p-16 flex flex-col"
       style="--row-gap: 1rem"
     >
-      <label for="project-title" class="sr-only">Nom du projet</label>
+      <label for="project-title" class="sr-only">{{
+        t('forms.projectName')
+      }}</label>
       <input
         type="text"
         v-model="title"
         id="project-title"
-        placeholder="Nom du projet"
+        :placeholder="t('forms.projectName')"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
         required
       />
 
-      <label for="project-details" class="sr-only">Détails du projet</label>
+      <label for="project-details" class="sr-only">{{
+        t('forms.projectDetails')
+      }}</label>
       <textarea
         id="project-details"
         name="details"
         v-model="details"
         cols="30"
         rows="10"
-        placeholder="Détails du projet…"
+        :placeholder="t('forms.projectDetailsPlaceholder')"
         class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
         required
       ></textarea>
@@ -52,26 +56,24 @@
           class="flex font-medium mt-4"
           style="--column-gap: var(--space-4)"
         >
-          Créer avec
-          <span class="flex justify-center text-sm" data-icon="leaf"
-            >Design to Light</span
-          >
+          {{ t('dialogs.createWithDTL') }}
+          <span class="flex justify-center text-sm" data-icon="leaf">{{
+            t('dtl.title')
+          }}</span>
         </label>
         <p class="text-sm mt-8 mb-4">
-          Découvrez la note environnementale de votre projet et allégez l’impact
-          de votre projet grâce à nos expertises d’optimisation du poids de
-          flacon.
+          {{ t('dialogs.dtlDescription') }}
         </p>
-        <router-link to="/design-to-light" class="text-sm font-medium"
-          >En savoir plus</router-link
-        >
+        <router-link to="/design-to-light" class="text-sm font-medium">{{
+          t('dialogs.learnMore')
+        }}</router-link>
       </div>
 
       <footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
         <button class="btn btn--black-10" @click="emits('close')">
-          Annuler
+          {{ t('buttons.cancel') }}
         </button>
-        <button class="btn" type="submit">Soumettre</button>
+        <button class="btn" type="submit">{{ t('buttons.submit') }}</button>
       </footer>
     </form>
   </Dialog>
@@ -81,6 +83,9 @@
 import Dialog from 'primevue/dialog';
 import { ref, watch } from 'vue';
 import { useApiStore } from '../stores/api';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const title = ref('');
 const details = ref('');
diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index 7ddc6d5..ad80b11 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="flex">
-    <h2 id="tabslist" class="sr-only">Projets</h2>
+    <h2 id="tabslist" class="sr-only">{{ t('brief.projects') }}</h2>
     <Tabs :tabs="tabs" @update:currentTab="changeTab" />
   </header>
   <section
@@ -11,6 +11,7 @@
     :aria-label="tabs[0].label"
     class="flow"
     :class="{ skeleton: isProjectsLoading }"
+    :data-empty-text="t('projects.none')"
   >
     <Project
       v-for="project in currentProjects"
@@ -25,6 +26,7 @@
     tabindex="0"
     :aria-label="tabs[1].label"
     class="flow"
+    :data-empty-text="t('projects.none')"
   >
     <Project
       v-for="project in archivedProjects"
@@ -39,7 +41,9 @@ import Project from './project/Project.vue';
 import { useProjectsStore } from '../stores/projects';
 import { ref, computed } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const { projects, currentProjects, archivedProjects, isProjectsLoading } =
   storeToRefs(useProjectsStore());
 
@@ -47,13 +51,13 @@ const currentTab = ref('currentProjects');
 const tabs = computed(() => {
   return [
     {
-      label: 'Projets en cours',
+      label: t('projects.current'),
       id: 'currentProjects',
       count: currentProjects.value.length,
       isActive: currentTab.value === 'currentProjects',
     },
     {
-      label: 'Projets archivés',
+      label: t('projects.archived'),
       id: 'archivedProjects',
       count: archivedProjects.value.length,
       isActive: currentTab.value === 'archivedProjects',
@@ -72,7 +76,7 @@ section {
   min-height: calc(100vh - 8.5rem);
 }
 section:not(.skeleton):empty::after {
-  content: 'Aucun projet pour le moment';
+  content: attr(data-empty-text);
   position: absolute;
   inset: 0;
   display: grid;
diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index 32521cb..85a7517 100644
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -12,7 +12,7 @@
       v-model="currentValue"
       :options="items"
       optionLabel="title"
-      :placeholder="'Sélectionnez une déclinaison'"
+      :placeholder="t('forms.selectVariation')"
       :maxSelectedLabels="3"
       class="font-serif"
       :class="{ active: currentValue }"
@@ -45,7 +45,7 @@
         <p v-if="currentValue">
           {{ currentValue.title }}
         </p>
-        <p v-else>Sélectionnez une déclinaison</p>
+        <p v-else>{{ t('forms.selectVariation') }}</p>
       </template>
 
       <template #option="slotProps">
@@ -65,6 +65,9 @@
 import { onBeforeMount, ref, watch, nextTick } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useDialogStore } from '../stores/dialog';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 // Props
 const { items, label, isCompareModeEnabled, index } = defineProps({
@@ -76,112 +79,149 @@ const { items, label, isCompareModeEnabled, index } = defineProps({
 
 // Local state
 const currentValue = ref(null);
-const syncing = ref(false); // empêche les réactions pendant les mises à jour programmatiques
+const syncing = ref(false);
 
-// Store
 const { activeTracks } = storeToRefs(useDialogStore());
 
-// Utils
-function isSame(a, b) {
-  if (!a || !b) return false;
-  if (a.slug && b.slug) return a.slug === b.slug;
-  return a.title === b.title;
+function normalizeSlug(slug) {
+  return slug.replace(/_/g, '-');
 }
 
-function toVariation(v) {
-  if (!v) return null;
-  return Array.isArray(v) ? v[v.length - 1] || null : v;
+function areVariationsEqual(variationA, variationB) {
+  if (!variationA || !variationB) return false;
+
+  if (variationA.slug && variationB.slug) {
+    return normalizeSlug(variationA.slug) === normalizeSlug(variationB.slug);
+  }
+
+  return variationA.title === variationB.title;
 }
 
-// Initialisation : remplir le 1er select localement ET initialiser le store
-onBeforeMount(() => {
+function extractVariation(value) {
+  if (!value) return null;
+  return Array.isArray(value) ? value[value.length - 1] || null : value;
+}
+
+function convertValueForCompareMode(value, shouldBeArray) {
+  if (shouldBeArray) {
+    return value && !Array.isArray(value) ? [value] : value;
+  } else {
+    return Array.isArray(value) ? value[0] || null : value;
+  }
+}
+
+function findMatchingVariationsInStore(storeVariations) {
+  return storeVariations.filter((storeVar) =>
+    items.some((item) => areVariationsEqual(item, storeVar))
+  );
+}
+
+function syncCurrentValueFromStore(storeVariations) {
   syncing.value = true;
 
-  if (index === 0) {
-    currentValue.value = items[0] || null;
-    // si le store est vide, initialiser avec la variation du premier sélecteur
-    if (!activeTracks.value || activeTracks.value.length === 0) {
-      const v = toVariation(items[0]);
-      if (v) activeTracks.value = [v];
-    }
+  const matchedVariations = findMatchingVariationsInStore(storeVariations);
+
+  if (isCompareModeEnabled) {
+    currentValue.value = matchedVariations.length ? [...matchedVariations] : [];
   } else {
-    // les autres ne forcent pas le store ; leur currentValue restera à null
-    currentValue.value = null;
+    currentValue.value = matchedVariations[0] || null;
   }
 
   nextTick(() => (syncing.value = false));
-});
+}
+
+function detectVariationChanges(newValues, oldValues) {
+  const newList = Array.isArray(newValues)
+    ? newValues
+    : newValues
+    ? [newValues]
+    : [];
+  const oldList = Array.isArray(oldValues)
+    ? oldValues
+    : oldValues
+    ? [oldValues]
+    : [];
+
+  const addedVariation = newList.find(
+    (n) => !oldList.some((o) => areVariationsEqual(o, n))
+  );
+  const removedVariation = oldList.find(
+    (o) => !newList.some((n) => areVariationsEqual(n, o))
+  );
+
+  return { addedVariation, removedVariation };
+}
+
+function handleVariationChange(newValue, oldValue) {
+  if (syncing.value) return;
+
+  const { addedVariation, removedVariation } = detectVariationChanges(
+    newValue,
+    oldValue
+  );
+
+  if (
+    addedVariation &&
+    items.some((item) => areVariationsEqual(item, addedVariation))
+  ) {
+    updateActiveTracks(addedVariation, 'add');
+  } else if (
+    removedVariation &&
+    items.some((item) => areVariationsEqual(item, removedVariation))
+  ) {
+    updateActiveTracks(removedVariation, 'remove');
+  }
+}
 
-// Quand on bascule compare mode (objet <-> tableau)
 watch(
   () => isCompareModeEnabled,
-  (flag) => {
+  (shouldBeArray) => {
     syncing.value = true;
-    if (flag) {
-      if (currentValue.value && !Array.isArray(currentValue.value)) {
-        currentValue.value = [currentValue.value];
-      }
-    } else {
-      if (Array.isArray(currentValue.value)) {
-        currentValue.value = currentValue.value[0] || null;
-      }
-    }
+    currentValue.value = convertValueForCompareMode(
+      currentValue.value,
+      shouldBeArray
+    );
     nextTick(() => (syncing.value = false));
   }
 );
 
-// Détection ajout / suppression dans le MultiSelect (côté composant)
-// On n'agit que si l'ajout/suppression concerne une variation appartenant à `items`
-watch(
-  currentValue,
-  (newVal, oldVal) => {
-    if (syncing.value) return;
+watch(currentValue, handleVariationChange, { deep: true });
 
-    const newItems = Array.isArray(newVal) ? newVal : newVal ? [newVal] : [];
-    const oldItems = Array.isArray(oldVal) ? oldVal : oldVal ? [oldVal] : [];
-
-    const added = newItems.find((n) => !oldItems.some((o) => isSame(o, n)));
-    const removed = oldItems.find((o) => !newItems.some((n) => isSame(n, o)));
-
-    if (added && items.some((it) => isSame(it, added))) {
-      selectTrack(added, 'add');
-    } else if (removed && items.some((it) => isSame(it, removed))) {
-      selectTrack(removed, 'remove');
-    }
-  },
-  { deep: true }
-);
-
-// Quand activeTracks change elsewhere -> synchroniser l'affichage local
-// Mais n'adopter que les variations qui appartiennent à ce Selector (`items`)
 watch(
   activeTracks,
-  (newVal) => {
-    syncing.value = true;
-
-    const storeList = Array.isArray(newVal) ? newVal : [];
-    // ne garder que les variations du store qui sont dans `items`
-    const matched = storeList.filter((av) =>
-      items.some((it) => isSame(it, av))
-    );
-
-    if (isCompareModeEnabled) {
-      currentValue.value = matched.length ? [...matched] : [];
-    } else {
-      currentValue.value = matched[0] || null;
-    }
-
-    nextTick(() => (syncing.value = false));
+  (storeVariations) => {
+    const variationsList = Array.isArray(storeVariations)
+      ? storeVariations
+      : [];
+    syncCurrentValueFromStore(variationsList);
   },
-  { deep: true }
+  { deep: true, immediate: true }
 );
 
-// Logique centrale de sélection (ajout / suppression)
-// Règles :
-// - mode normal -> activeTracks = [variation]
-// - mode comparaison -> conserver activeTracks[0] si possible; second élément ajouté/remplacé; suppression gère le cas de la suppression de la première
-function selectTrack(track, action = 'add') {
-  const variation = toVariation(track);
+function removeVariationFromActiveTracks(variation) {
+  activeTracks.value = activeTracks.value.filter(
+    (track) => !areVariationsEqual(track, variation)
+  );
+}
+
+function addVariationToActiveTracks(variation) {
+  const isAlreadyPresent = activeTracks.value.some((track) =>
+    areVariationsEqual(track, variation)
+  );
+
+  if (isAlreadyPresent) return;
+
+  if (activeTracks.value.length === 0) {
+    activeTracks.value = [variation];
+  } else if (activeTracks.value.length === 1) {
+    activeTracks.value = [activeTracks.value[0], variation];
+  } else {
+    activeTracks.value = [activeTracks.value[0], variation];
+  }
+}
+
+function updateActiveTracks(track, action = 'add') {
+  const variation = extractVariation(track);
   if (!variation) return;
 
   if (!isCompareModeEnabled) {
@@ -190,34 +230,12 @@ function selectTrack(track, action = 'add') {
   }
 
   if (action === 'remove') {
-    const wasFirst =
-      activeTracks.value.length && isSame(activeTracks.value[0], variation);
-    activeTracks.value = activeTracks.value.filter(
-      (t) => !isSame(t, variation)
-    );
-
-    // si on a retiré la première et qu'il reste une piste, elle devient naturellement index 0
-    // pas d'action supplémentaire nécessaire ici (déjà assuré par le filter)
-    return;
-  }
-
-  // action === 'add'
-  if (activeTracks.value.some((t) => isSame(t, variation))) {
-    // déjà présent -> ignore
-    return;
-  }
-
-  if (activeTracks.value.length === 0) {
-    activeTracks.value = [variation];
-  } else if (activeTracks.value.length === 1) {
-    activeTracks.value = [activeTracks.value[0], variation];
+    removeVariationFromActiveTracks(variation);
   } else {
-    // remplacer le 2e
-    activeTracks.value = [activeTracks.value[0], variation];
+    addVariationToActiveTracks(variation);
   }
 }
 
-// Helpers pour affichage (inchangés)
 function getFrontViewUrl(item) {
   if (!item) return '';
   if (Array.isArray(item)) {
@@ -231,8 +249,8 @@ function getFrontViewUrl(item) {
 }
 
 function setImage() {
-  return getFrontViewUrl(currentValue.value) 
-    ? '--image: url(\'' + getFrontViewUrl(currentValue.value) + '\')' 
+  return getFrontViewUrl(currentValue.value)
+    ? "--image: url('" + getFrontViewUrl(currentValue.value) + "')"
     : undefined;
 }
 </script>
@@ -250,7 +268,8 @@ function setImage() {
   padding: var(--space-8) var(--space-48) var(--space-8) var(--space-16);
 }
 .selector-dropdown.has-image,
-.selector-dropdown.has-image :is(#selector-select, #selector-multiselect, [role='combobox']) {
+.selector-dropdown.has-image
+  :is(#selector-select, #selector-multiselect, [role='combobox']) {
   padding-left: var(--space-64);
 }
 .selector-dropdown.has-image:before {
@@ -290,7 +309,9 @@ function setImage() {
   cursor: pointer;
 }
 [role='combobox'] p,
-.selector-dropdown [data-pc-section="labelcontainer"] > [data-pc-section='label'] {
+.selector-dropdown
+  [data-pc-section='labelcontainer']
+  > [data-pc-section='label'] {
   max-height: 1lh;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/components/comments/Comment.vue b/src/components/comments/Comment.vue
index e504654..9d1a55d 100644
--- a/src/components/comments/Comment.vue
+++ b/src/components/comments/Comment.vue
@@ -39,9 +39,7 @@
 
     <footer v-if="!comment.isEditMode" class="comment__replies">
       <p v-if="comment.replies?.length > 0">
-        {{ comment.replies.length }} réponse{{
-          comment.replies.length > 1 ? 's' : ''
-        }}
+        {{ comment.replies.length }} {{ comment.replies.length > 1 ? t('comments.replies') : t('comments.reply') }}
       </p>
       <div
         v-if="userStore.canEditComment(comment)"
@@ -52,14 +50,14 @@
           data-icon="edit"
           @click="editComment($event)"
         >
-          <span class="sr-only">Éditer</span>
+          <span class="sr-only">{{ t('comments.edit') }}</span>
         </button>
         <button
           class="btn btn--transparent btn--icon btn--sm"
           data-icon="delete"
           @click="deleteComment($event)"
         >
-          <span class="sr-only">Supprimer</span>
+          <span class="sr-only">{{ t('buttons.delete') }}</span>
         </button>
       </div>
     </footer>
@@ -68,11 +66,11 @@
       <input
         type="submit"
         class="btn btn--tranparent"
-        value="Sauvegarder"
+        :value="t('buttons.save')"
         @click="saveEditedComment($event)"
       />
       <button class="btn btn--white-10" @click="cancelEditComment($event)">
-        Annuler
+        {{ t('buttons.cancel') }}
       </button>
     </footer>
   </article>
@@ -88,9 +86,11 @@ import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../stores/page';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
 dayjs.locale('fr');
 
+const { t } = useI18n();
 const { comment, commentIndex } = defineProps({
   comment: Object,
   commentIndex: Number,
@@ -125,11 +125,11 @@ function formatDate() {
   const dateNumber = parseInt(dayjs(comment.date).format('YYMMD'));
 
   if (dateNumber === todayNumber) {
-    return "Aujourd'hui";
+    return t('dates.today');
   }
 
   if (dateNumber === todayNumber - 1) {
-    return 'hier';
+    return t('dates.yesterday');
   }
 
   return dayjs(comment.date).format('D MMM YY');
@@ -153,7 +153,7 @@ async function read() {
       page.value.uri
     );
   } catch (error) {
-    console.log('Erreur lors de la lecture de la notification : ', error);
+    console.log(t('errors.readNotificationFailed'), error);
   }
 }
 
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index f1da3b6..054a556 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -1,9 +1,10 @@
 <template>
   <aside id="comments-container" aria-labelledby="comments-label">
-    <h2 id="comments-label" class="sr-only">Commentaires</h2>
+    <h2 id="comments-label" class="sr-only">{{ t('comments.title') }}</h2>
     <div
       class="comments | flow"
       :class="{ empty: !comments || comments.length === 0 }"
+      :data-empty-message="t('comments.emptyMessage')"
     >
       <template v-if="comments">
         <template v-if="!openedComment">
@@ -26,7 +27,7 @@
               isAddOpen = false;
             "
           >
-            <span>Retour à la liste</span>
+            <span>{{ t('buttons.backToList') }}</span>
           </button>
           <Comment
             :comment="openedComment"
@@ -53,7 +54,7 @@
       class="btn btn--white-20 | w-full"
       @click="toggleCommentPositionMode(true)"
     >
-      Ajouter un commentaire
+      {{ t('buttons.addComment') }}
     </button>
     <button
       v-else-if="openedComment && !isAddOpen"
@@ -61,7 +62,7 @@
       class="btn btn--white-20 | justify-start w-full | text-white-50"
       @click="isAddOpen = true"
     >
-      Répondre…
+      {{ t('buttons.reply') }}
     </button>
     <!-- TODO: afficher #new-comment une fois le bouton Ajouter un commentaire cliqué -->
     <div
@@ -70,11 +71,10 @@
       class="bg-primary | text-sm text-white | rounded-lg | p-12"
     >
       <p class="flex justify-start | mb-12" data-icon="comment">
-        <strong>Nouveau commentaire</strong>
+        <strong>{{ t('comments.new') }}</strong>
       </p>
       <p>
-        Dans la zone du contenu, cliquez où vous souhaitez positionner le
-        commentaire
+        {{ t('comments.newInstruction') }}
       </p>
     </div>
     <form
@@ -84,13 +84,13 @@
       class="flow | p-12 | rounded-xl"
       @submit="handleSubmit"
     >
-      <label class="sr-only" for="comment">Votre commentaire</label>
+      <label class="sr-only" for="comment">{{ t('comments.your') }}</label>
       <textarea
         v-model="draftComment.text"
         :disabled="isSubmitting ? true : undefined"
         name="comment"
         id="comment"
-        placeholder="Ajouter un commentaire…"
+        :placeholder="t('forms.commentPlaceholder')"
         rows="5"
         class="text-sm | rounded-lg bg-black p-12"
       ></textarea>
@@ -99,11 +99,11 @@
           type="submit"
           class="btn"
           :class="{ submitting: isSubmitting }"
-          :value="isSubmitting ? 'En cours' : undefined"
+          :value="isSubmitting ? t('comments.inProgress') : undefined"
           :disabled="isSubmitting ? true : undefined"
         />
         <button class="btn btn--white-10" @click="isAddOpen = false">
-          Annuler
+          {{ t('buttons.cancel') }}
         </button>
       </footer>
     </form>
@@ -122,9 +122,11 @@ import { useDialogStore } from '../../stores/dialog';
 import Comment from './Comment.vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
 dayjs.locale('fr');
 
+const { t } = useI18n();
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
diff --git a/src/components/design-to-light/DTLButton.vue b/src/components/design-to-light/DTLButton.vue
index 2d3dd35..89a7625 100644
--- a/src/components/design-to-light/DTLButton.vue
+++ b/src/components/design-to-light/DTLButton.vue
@@ -1,13 +1,16 @@
 <template>
-  <button id="dtl-btn" class="bg-black rounded-md p-4" :title="'Design to Light: ' + (hasAlternatives ? 'New' : grade)" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
-    <span lang="en" class="sr-only">Design to Light</span>
-    <span v-if="hasAlternatives" lang="en" class="new">New</span>
+  <button id="dtl-btn" class="bg-black rounded-md p-4" :title="t('dtl.grade', { grade: hasAlternatives ? t('menu.news') : grade })" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
+    <span lang="en" class="sr-only">{{ t('dtl.title') }}</span>
+    <span v-if="hasAlternatives" lang="en" class="new">{{ t('menu.news') }}</span>
   </button>
 </template>
 <script setup>
 import { storeToRefs } from "pinia";
 import { usePageStore } from "../../stores/page";
 import { computed } from "vue";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { page } = storeToRefs(usePageStore());
 
diff --git a/src/components/design-to-light/DTLPanel.vue b/src/components/design-to-light/DTLPanel.vue
index 12834e0..22581b9 100644
--- a/src/components/design-to-light/DTLPanel.vue
+++ b/src/components/design-to-light/DTLPanel.vue
@@ -17,8 +17,8 @@
           proposals.length === 1 && isDialogOpen
             ? activeProposal.title
               ? activeProposal.title
-              : 'Design to light'
-            : 'Design to light'
+              : t('dtl.title')
+            : t('dtl.title')
         }}
       </h2>
       <button
@@ -27,7 +27,7 @@
         class="btn btn--icon btn--transparent | ml-auto"
         data-icon="close"
       >
-        <span class="sr-only">Fermer</span>
+        <span class="sr-only">{{ t('buttons.close') }}</span>
       </button>
     </header>
     <nav v-if="!isDialogOpen" class="tabs" role="tablist" tabindex="-1">
@@ -42,8 +42,8 @@
           proposal.title
             ? proposal.title
             : index === 0
-            ? 'Proposition initiale'
-            : 'Alternative ' + index
+            ? t('dtl.initialProposal')
+            : t('dtl.alternative', { index })
         }}
       </button>
     </nav>
@@ -67,12 +67,12 @@
           />
         </router-link>
         <p>
-          Données basées sur la proposition <br />du {{ activeProposal.date }}
-          <br />{{ activeProposal.stepLabel }}
+          {{ t('dtl.proposalBasedOn') }} <br />du {{ activeProposal.date }}
+          <br />{{ stepLabel }}
         </p>
       </div>
       <div id="note-globale" class="px-32 py-16 border-b flow">
-        <h3>Note globale</h3>
+        <h3>{{ t('dtl.globalScore') }}</h3>
         <div class="flex" style="--column-gap: 1rem">
           <p :data-grade="activeProposal.grades.global.letter">
             <strong class="sr-only">{{
@@ -100,15 +100,15 @@
         </div>
       </div>
       <div id="positionnement" class="px-32 py-16 border-b flow">
-        <h3>Positionnement</h3>
+        <h3>{{ t('dtl.positioning') }}</h3>
         <dl>
-          <dt id="design">Design</dt>
+          <dt id="design">{{ t('dtl.design') }}</dt>
           <dd>
             <span class="sr-only">{{
               activeProposal.grades.position.complexity
             }}</span>
           </dd>
-          <dt id="poids">Poids</dt>
+          <dt id="poids">{{ t('dtl.weight') }}</dt>
           <dd>
             <span class="sr-only">{{
               activeProposal.grades.position.weight
@@ -132,7 +132,7 @@
         </button>
       </div>
       <div id="indicateur" class="px-32 py-16 border-b flow">
-        <h3>Indicateur des composants impliqués</h3>
+        <h3>{{ t('dtl.indicators') }}</h3>
         <div class="grid">
           <template
             v-for="indicator in activeProposal.grades.indicators"
@@ -170,8 +170,8 @@
         >
           {{
             page.hasOptimizationRequest
-              ? "Demande d'expertise en cours de traitement…"
-              : 'Demander une expertise d’optimisation'
+              ? t('dtl.requestPending')
+              : t('dtl.requestOptimization')
           }}
         </button>
       </footer>
@@ -190,6 +190,7 @@ import { storeToRefs } from 'pinia';
 import { ref, onBeforeUnmount, computed } from 'vue';
 import { useDialogStore } from '../../stores/dialog';
 import { usePageStore } from '../../stores/page';
+import { useI18n } from 'vue-i18n';
 
 const { proposals } = defineProps({
   proposals: Array,
@@ -197,6 +198,7 @@ const { proposals } = defineProps({
 
 const { page } = storeToRefs(usePageStore());
 const { openedFile, activeTracks } = storeToRefs(useDialogStore());
+const { t } = useI18n();
 
 const isDialogOpen = computed(() => {
   if (openedFile.value) {
@@ -215,6 +217,17 @@ const emits = defineEmits(['close']);
 const activeProposal =
   proposals.length === 1 ? computed(() => proposals[0]) : ref(proposals[0]);
 
+const stepLabel = computed(() => {
+  const proposal = activeProposal.value || activeProposal;
+  const location = proposal.location;
+
+  if (location.step === 'virtualSample') {
+    return location.type === 'dynamic' ? t('dtl.dynamicTrack') : t('dtl.staticTrack');
+  }
+
+  return t('steps.' + location.step);
+});
+
 window.addEventListener('keyup', closeOnEscape);
 window.addEventListener('click', close);
 
diff --git a/src/components/design-to-light/OptimizationRequestDialog.vue b/src/components/design-to-light/OptimizationRequestDialog.vue
index d5ec8c0..ec44650 100644
--- a/src/components/design-to-light/OptimizationRequestDialog.vue
+++ b/src/components/design-to-light/OptimizationRequestDialog.vue
@@ -5,15 +5,15 @@
     modal
     :draggable="false"
     :dismissableMask="true"
-    header="Demander un rendez-vous"
+    :header="t('dialogs.requestMeeting')"
     class="dialog"
     :closeOnEscape="true"
     @click="preventClose($event)"
   >
     <template #header>
-      <h2 class="font-serif text-lg">Demander un rendez-vous</h2>
+      <h2 class="font-serif text-lg">{{ t('dialogs.requestMeeting') }}</h2>
       <p class="flex justify-center text-sm" data-icon="leaf">
-        Design to Light
+        {{ t('dtl.title') }}
       </p>
     </template>
 
@@ -22,7 +22,7 @@
       class="w-full h-full p-16 flex flex-col"
       style="--row-gap: 1rem"
     >
-      <label for="projects" class="sr-only">Projet</label>
+      <label for="projects" class="sr-only">{{ t('brief.projects') }}</label>
       <select
         name="projects"
         id="projects"
@@ -30,7 +30,7 @@
         class="w-full rounded-md border border-grey-200 px-16 py-12"
         required
       >
-        <option value="">Sélectionnez le projet</option>
+        <option value="">{{ t('forms.selectVariation') }}</option>
         <option
           v-for="project in currentProjects"
           :key="project.uri"
@@ -41,35 +41,37 @@
         </option>
       </select>
 
-      <label for="appointment-subject" class="sr-only"
-        >Objet du rendez-vous</label
-      >
+      <label for="appointment-subject" class="sr-only">{{
+        t('forms.meetingSubject')
+      }}</label>
       <input
         type="text"
         v-model="subject"
         id="appointment-subject"
-        placeholder="Objet du rendez-vous"
+        :placeholder="t('forms.meetingSubject')"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
         required
       />
 
-      <label for="appointment-details" class="sr-only">Détails du projet</label>
+      <label for="appointment-details" class="sr-only">{{
+        t('forms.meetingDetails')
+      }}</label>
       <textarea
         id="appointment-details"
         name="details"
         v-model="details"
         cols="30"
         rows="10"
-        placeholder="Décrivez votre demande…"
+        :placeholder="t('forms.meetingDetailsPlaceholder')"
         class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
         required
       ></textarea>
 
       <footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
         <button class="btn btn--black-10" @click="emits('close')">
-          Annuler
+          {{ t('buttons.cancel') }}
         </button>
-        <button class="btn" type="submit">Soumettre</button>
+        <button class="btn" type="submit">{{ t('buttons.submit') }}</button>
       </footer>
     </form>
   </Dialog>
@@ -82,6 +84,9 @@ import { storeToRefs } from 'pinia';
 import { useProjectsStore } from '../../stores/projects';
 import { usePageStore } from '../../stores/page';
 import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { page } = storeToRefs(usePageStore());
 const { currentProjects } = storeToRefs(useProjectsStore());
diff --git a/src/components/inspirations/Image.vue b/src/components/inspirations/Image.vue
index b2dac95..abbe5a0 100644
--- a/src/components/inspirations/Image.vue
+++ b/src/components/inspirations/Image.vue
@@ -3,7 +3,7 @@
     <!-- Favorite button -->
     <button
       class="favorite"
-      :aria-label="isFavorite ? 'Retirer des favoris' : 'Ajouter aux favoris'"
+      :aria-label="isFavorite ? t('inspirations.removeFromFavorites') : t('inspirations.addToFavorites')"
       :aria-pressed="isFavorite"
       @click="toggleFavorite"
     >
@@ -34,6 +34,9 @@
 import { computed } from "vue";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 // Props
 const { item, inspirationUri } = defineProps({
@@ -70,7 +73,7 @@ async function toggleFavorite() {
     // Update item favorite users list based on API response
     item.favoriteForUsers = newFavoriteUsers;
   } catch (error) {
-    console.error("Failed to toggle favorite:", error);
+    console.error(t('errors.toggleFavoriteFailed'), error);
     isFavorite.value = previousState; // Rollback on failure
   }
 }
diff --git a/src/components/notifications/AppointmentRequest.vue b/src/components/notifications/AppointmentRequest.vue
index 0731c34..dbf6194 100644
--- a/src/components/notifications/AppointmentRequest.vue
+++ b/src/components/notifications/AppointmentRequest.vue
@@ -10,12 +10,12 @@
         <strong
           class="notification__type | font-medium text-primary"
           data-icon="calendar"
-          >Demande de rendez-vous</strong
+          >{{ t('notifications.meetingRequest') }}</strong
         >
         <span class="notification__client | text-grey-700"
           >{{ notification.project.title }}
           {{
-            notification.project.status === "draft" ? "(brouillon)" : ""
+            notification.project.status === "draft" ? t('notifications.draft') : ""
           }}</span
         >
         <time
@@ -29,7 +29,7 @@
       v-if="notification.type"
       class="notification__body | text-md font-medium | line-clamp"
       v-html="
-        'Auteur : ' +
+        t('notifications.author') + ' ' +
         (notification.author.name
           ? notification.author.name + ' (' + notification.author.email + ')'
           : notification.author.email) +
@@ -44,6 +44,9 @@
 import { useNotificationsStore } from "../../stores/notifications";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { notification } = defineProps({ notification: Object });
 const { formatDate } = useNotificationsStore();
diff --git a/src/components/notifications/Content.vue b/src/components/notifications/Content.vue
index 2be62e5..cc49fce 100644
--- a/src/components/notifications/Content.vue
+++ b/src/components/notifications/Content.vue
@@ -3,14 +3,14 @@
     class="notification | bg-white rounded-lg | p-16 | flow"
     data-type="content"
     @click="readNotification()"
-    title="Aller au contenu"
+    :title="t('notifications.goToContent')"
   >
     <header>
       <p class="flex">
         <strong
           class="notification__type | font-medium text-primary"
           data-icon="content"
-          >Contenu</strong
+          >{{ t('notifications.content') }}</strong
         >
         <span class="notification__client | text-grey-700">{{
           notification.project.title
@@ -36,6 +36,9 @@ import { useRouter } from "vue-router";
 import { useNotificationsStore } from "../../stores/notifications";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const router = useRouter();
 const { notification } = defineProps({ notification: Object });
diff --git a/src/components/notifications/ProjectRequest.vue b/src/components/notifications/ProjectRequest.vue
index fd4097d..de41479 100644
--- a/src/components/notifications/ProjectRequest.vue
+++ b/src/components/notifications/ProjectRequest.vue
@@ -10,12 +10,12 @@
         <strong
           class="notification__type | font-medium text-primary"
           data-icon="document"
-          >Demande de création de projet</strong
+          >{{ t('notifications.projectRequest') }}</strong
         >
         <span class="notification__client | text-grey-700"
           >{{ notification.project.title }}
           {{
-            notification.project.status === "draft" ? "(brouillon)" : ""
+            notification.project.status === "draft" ? t('notifications.draft') : ""
           }}</span
         >
         <time
@@ -29,7 +29,7 @@
       v-if="notification.type"
       class="notification__body | text-md font-medium | line-clamp"
       v-html="
-        'De la part de ' +
+        t('notifications.from') + ' ' +
         (notification.author.name
           ? notification.author.name + ' (' + notification.author.email + ')'
           : notification.author.email) +
@@ -44,6 +44,9 @@
 import { useNotificationsStore } from "../../stores/notifications";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { notification } = defineProps({ notification: Object });
 const { formatDate } = useNotificationsStore();
diff --git a/src/components/project/PdfViewer.vue b/src/components/project/PdfViewer.vue
index 0fd8f77..d5b9e1e 100644
--- a/src/components/project/PdfViewer.vue
+++ b/src/components/project/PdfViewer.vue
@@ -14,9 +14,9 @@
     data-icon="comment"
     @click="isCommentsOpen = !isCommentsOpen"
   >
-    <span class="sr-only"
-      >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
-    >
+    <span class="sr-only">{{
+      isCommentsOpen ? t('buttons.hideComments') : t('buttons.showComments')
+    }}</span>
   </button>
   <a
     id="download-pdf"
@@ -25,7 +25,7 @@
     :href="openedFile.url"
     download
   >
-    <span class="sr-only">Télécharger le fichier PDF</span>
+    <span class="sr-only">{{ t('buttons.downloadPdf') }}</span>
   </a>
   <Comments v-if="isCommentsOpen" />
 </template>
@@ -36,6 +36,9 @@ import { ref, watch, computed, unref } from 'vue';
 import { useDialogStore } from '../../stores/dialog';
 import { storeToRefs } from 'pinia';
 import { VPdfViewer, useLicense } from '@vue-pdf-viewer/viewer';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const licenseKey =
   import.meta.env.VITE_VPV_LICENSE ??
diff --git a/src/components/project/Project.vue b/src/components/project/Project.vue
index 1ed2284..901805f 100644
--- a/src/components/project/Project.vue
+++ b/src/components/project/Project.vue
@@ -15,12 +15,13 @@
         </router-link>
       </h3>
       <p>
-        Dernière mise à jour le
-        <time :datetime="project.modified">{{ frenchFormattedModified }}</time>
+        {{ t('dates.updatedOn') }}
+        <time :datetime="project.modified">{{ formattedModified }}</time>
       </p>
     </hgroup>
     <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
     <ol
+      v-if="Array.isArray(project.steps)"
       class="project-steps"
       :data-steps="project.steps.length"
       :style="'--steps:' + project.steps.length"
@@ -31,7 +32,7 @@
         :data-status="setStatus(project.steps, project.currentStep, step)"
       >
         <span class="pill" :data-icon="step.id">
-          <span>{{ step.label }}</span>
+          <span>{{ t('steps.' + step.id) }}</span>
         </span>
       </li>
     </ol>
@@ -41,15 +42,17 @@
 <script setup>
 import dayjs from 'dayjs';
 import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
+import { computed } from 'vue';
 import { useProjectStore } from '../../stores/project';
-
-dayjs.locale('fr');
+import { useI18n } from 'vue-i18n';
 
 const { project } = defineProps({ project: Object });
 
-const frenchFormattedModified = dayjs(project.modified).format(
-  'dddd D MMMM YYYY'
-);
-
 const { stepsLabels, setStatus, isEmptyBrief } = useProjectStore();
+const { t, locale } = useI18n();
+
+const formattedModified = computed(() =>
+  dayjs(project.modified).locale(locale.value).format('dddd D MMMM YYYY')
+);
 </script>
diff --git a/src/components/project/ProjectStep.vue b/src/components/project/ProjectStep.vue
index f9718bb..e017eb0 100644
--- a/src/components/project/ProjectStep.vue
+++ b/src/components/project/ProjectStep.vue
@@ -5,7 +5,7 @@
     :data-status="setStatus(page.steps, page.content.currentstep, step)"
   >
     <h2 :id="step.id">
-      <span :data-icon="step.id">{{ step.label }}</span>
+      <span :data-icon="step.id">{{ t('steps.' + step.id) }}</span>
     </h2>
     <div
       ref="cards-node"
@@ -23,21 +23,22 @@ import 'dayjs/locale/fr';
 import { usePageStore } from '../../stores/page';
 import { computed, onMounted, useTemplateRef } from 'vue';
 import { useProjectStore } from '../../stores/project';
-import ClientBrief from './cards/ClientBrief.vue';
+import Brief from './cards/Brief.vue';
 import MultipleDocuments from './cards/MultipleDocuments.vue';
 import SimpleDocument from './cards/SimpleDocument.vue';
 import VirtualSample from './cards/VirtualSample.vue';
 import PhysicalSample from './cards/PhysicalSample.vue';
 import { useUserStore } from '../../stores/user';
+import { useI18n } from 'vue-i18n';
 
 const { step } = defineProps({
   step: Object,
 });
 
 const cardsMap = {
-  clientBrief: ClientBrief,
+  clientBrief: Brief,
   proposal: MultipleDocuments,
-  extendedBrief: SimpleDocument,
+  extendedBrief: Brief,
   industrialIdeation: SimpleDocument,
   virtualSample: VirtualSample,
   physicalSample: PhysicalSample,
@@ -49,6 +50,7 @@ const { page } = usePageStore();
 const { setStatus } = useProjectStore();
 const cardsNode = useTemplateRef('cards-node');
 const { user } = useUserStore();
+const { t } = useI18n();
 
 // Hooks
 onMounted(() => {
diff --git a/src/components/project/TitledPdfWrapper.vue b/src/components/project/TitledPdfWrapper.vue
index a1e6fbf..7e5fa87 100644
--- a/src/components/project/TitledPdfWrapper.vue
+++ b/src/components/project/TitledPdfWrapper.vue
@@ -5,7 +5,7 @@
     modal
     :draggable="false"
     :dismissableMask="true"
-    header="Titre du PDF"
+    :header="t('dialogs.pdfTitle')"
     class="dialog"
     :class="[
       { 'with-comments': isCommentsOpen },
@@ -16,13 +16,13 @@
     <template #header>
       <button
         v-if="
-          dialog.content.id === 'clientBrief' &&
+          ['clientBrief', 'extendedBrief'].includes(dialog.content.id) &&
           dialog.content.isValidated !== true
         "
         class="btn"
         @click="validate()"
       >
-        Valider et envoyer le brief
+        {{ t('buttons.validate') }}
       </button>
       <h2
         v-if="openedFile"
@@ -52,7 +52,9 @@ import { useRoute, useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useApiStore } from '../../stores/api';
 import { usePageStore } from '../../stores/page';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const { openedFile, isCommentsOpen } = storeToRefs(useDialogStore());
 
 const router = useRouter();
@@ -91,7 +93,7 @@ const correspondingDTLProposal = computed(() => {
 // Functions
 async function validate() {
   const response = await api.validateBrief(
-    route.path + '/client-brief',
+    route.path + '/' + dialog.content.slug,
     route.fullPath
   );
   if (response.success) {
diff --git a/src/components/project/brief/Header.vue b/src/components/project/brief/Header.vue
index e92aa44..751d887 100644
--- a/src/components/project/brief/Header.vue
+++ b/src/components/project/brief/Header.vue
@@ -6,12 +6,12 @@
       <label
         for="project-description"
         class="flex | text-sm text-grey-700 | mb-8"
-        >Description du projet</label
+        >{{ t('forms.description') }}</label
       >
       <textarea
         name="project-description"
         id="project-description"
-        placeholder="Ajoutez une description générale de votre projet…"
+        :placeholder="t('forms.descriptionPlaceholder')"
         rows="2"
         class="border border-grey-200 | rounded-xl | p-16 | w-full"
         v-model="page.content.description"
@@ -19,7 +19,7 @@
       ></textarea>
     </div>
     <fieldset class="project-details__filters | flex-1">
-      <legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
+      <legend class="text-sm text-grey-700 | mb-8">{{ t('forms.filterByTags') }}</legend>
       <div class="flex" style="gap: var(--space-8)">
         <button
           class="btn btn--sm btn--grey"
@@ -28,7 +28,7 @@
           role="switch"
           @click="clearTags()"
         >
-          Voir tout
+          {{ t('buttons.seeAll') }}
         </button>
         <template v-for="tag in page.tags" :key="tag">
           <input
@@ -53,6 +53,9 @@ import { ref, watch } from "vue";
 import { usePageStore } from "../../../stores/page";
 import StringUtils from "../../../utils/string";
 import debounce from "lodash/debounce";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { selectedTags } = defineProps({
   selectedTags: Array,
@@ -93,7 +96,7 @@ const saveDescription = debounce(() => {
         console.log(json);
       })
       .catch((error) => {
-        console.error("Erreur lors de la sauvegarde :", error);
+        console.error(t('errors.saveFailed'), error);
         isWaitingForSave.value = false;
       });
   }
diff --git a/src/components/project/brief/ImageDetailsModal.vue b/src/components/project/brief/ImageDetailsModal.vue
index 4062a03..7a035e3 100644
--- a/src/components/project/brief/ImageDetailsModal.vue
+++ b/src/components/project/brief/ImageDetailsModal.vue
@@ -3,7 +3,7 @@
     v-model:visible="isOpen"
     id="image-details"
     modal
-    header="Détails de l’image"
+    :header="t('dialogs.imageDetails')"
     class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
   >
     <picture :style="'--image: url('+image.url+')'">
@@ -11,7 +11,7 @@
     </picture>
     <div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
       <fieldset class="image__tags">
-        <legend class="text-sm text-grey-700 | mb-8">Tags</legend>
+        <legend class="text-sm text-grey-700 | mb-8">{{ t('forms.tags') }}</legend>
         <div class="flex" style="gap: var(--space-8)">
           <template v-for="(pageTag, index) in page.tags" :key="index">
             <input
@@ -33,12 +33,12 @@
         <label
           for="image-description"
           class="flex | text-sm text-grey-700 | mb-8"
-          >Description de l’image</label
+          >{{ t('forms.imageDescription') }}</label
         >
         <textarea
           name="image-description"
           id="image-description"
-          placeholder="Ajoutez une description à l’image…"
+          :placeholder="t('forms.imageDescriptionPlaceholder')"
           class="border border-grey-200 | rounded-xl | p-16 | w-full"
           v-model="image.description"
           @input="saveDescription()"
@@ -49,7 +49,7 @@
         class="btn btn--black-10 | ml-auto mt-auto"
         @click="remove()"
       >
-        Supprimer cette image
+        {{ t('buttons.deleteImage') }}
       </button>
     </div>
   </Dialog>
@@ -61,6 +61,9 @@ import { usePageStore } from "../../../stores/page";
 import StringUtils from "../../../utils/string";
 import Dialog from "primevue/dialog";
 import debounce from "lodash/debounce";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { imageDetails } = defineProps({
   imageDetails: Object,
@@ -97,7 +100,7 @@ function saveTags() {
       console.log(json);
     })
     .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
+      console.error(t('errors.saveFailed'), error);
     });
 }
 
@@ -122,7 +125,7 @@ const saveDescription = debounce(() => {
       emit("");
     })
     .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
+      console.error(t('errors.saveFailed'), error);
     });
 }, 1000);
 
@@ -142,7 +145,7 @@ function remove() {
       isOpen.value = false;
     })
     .catch((error) => {
-      console.error("Erreur lors de la suppression :", error);
+      console.error(t('errors.deleteFailed'), error);
     });
 }
 </script>
diff --git a/src/components/project/brief/Images.vue b/src/components/project/brief/Images.vue
index 2616eea..c62cc8b 100644
--- a/src/components/project/brief/Images.vue
+++ b/src/components/project/brief/Images.vue
@@ -10,7 +10,7 @@
         class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
         @click="isAddImagesModalOpen = true"
       >
-        Ajouter une ou plusieurs images
+        {{ t('forms.addImages') }}
       </button>
       <template v-for="image in page.moodboard" :key="image.uri">
         <figure
@@ -52,11 +52,13 @@
 import Header from "./Header.vue";
 import { usePageStore } from "../../../stores/page";
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import ImageDetailsModal from "./ImageDetailsModal.vue";
 import AddImagesModal from "./add-images-modal/AddImagesModal.vue";
 import { storeToRefs } from "pinia";
 
 const { page } = storeToRefs(usePageStore());
+const { t } = useI18n();
 
 const selectedTags = ref([]);
 const imageDetails = ref(null);
diff --git a/src/components/project/brief/Intro.vue b/src/components/project/brief/Intro.vue
deleted file mode 100644
index 7bd9155..0000000
--- a/src/components/project/brief/Intro.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <section class="h-full | grid-center">
-    <div
-      class="card | items-center | text-center | w-full max-w"
-      style="--row-gap: var(--space-32); --max-w: 27.5rem"
-    >
-      <h2 class="font-serif text-lg">Créez votre premier brief de projet !</h2>
-      <p class="text-grey-700">
-        Bienvenu à votre nouvel espace de projet. <br />Commencez par consulter
-        les inspirations <br />et partagez vos intentions !
-      </p>
-      <button
-        class="btn | w-full"
-        @click="emit('update:step', 'ModeSelection')"
-      >
-        Commencer
-      </button>
-    </div>
-  </section>
-</template>
-<script setup>
-const emit = defineEmits(["update:step"]);
-</script>
diff --git a/src/components/project/brief/ModeSelection.vue b/src/components/project/brief/ModeSelection.vue
deleted file mode 100644
index 317ca3c..0000000
--- a/src/components/project/brief/ModeSelection.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <section
-    class="h-full | flex flex-col justify-center items-center | mx-auto | max-w"
-    style="--max-w: 42rem; --row-gap: var(--space-32)"
-  >
-    <div class="flex items-baseline">
-      <div
-        @click="emit('update:step', 'Images')"
-        class="card card--cta | flex-1 | h-full"
-        style="--padding: var(--space-32); --row-gap: var(--space-32)"
-      >
-        <svg
-          aria-hidden="true"
-          width="100"
-          height="100"
-          viewBox="0 0 100 100"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          stroke="currentColor"
-          stroke-width="5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M92.8571 46.4292H64.2857C62.3133 46.4292 60.7143 48.0282 60.7143 50.0006V92.8577C60.7143 94.8302 62.3133 96.4292 64.2857 96.4292H92.8571C94.8296 96.4292 96.4286 94.8302 96.4286 92.8577V50.0006C96.4286 48.0282 94.8296 46.4292 92.8571 46.4292Z"
-          />
-          <path
-            d="M92.8571 3.57202H64.2857C62.3133 3.57202 60.7143 5.171 60.7143 7.14345V21.5006C60.7143 23.473 62.3133 25.072 64.2857 25.072H92.8571C94.8296 25.072 96.4286 23.473 96.4286 21.5006V7.14345C96.4286 5.171 94.8296 3.57202 92.8571 3.57202Z"
-          />
-          <path
-            d="M35.7143 3.57202H7.14284C5.17039 3.57202 3.57141 5.171 3.57141 7.14345V50.0006C3.57141 51.973 5.17039 53.572 7.14284 53.572H35.7143C37.6867 53.572 39.2857 51.973 39.2857 50.0006V7.14345C39.2857 5.171 37.6867 3.57202 35.7143 3.57202Z"
-          />
-          <path
-            d="M35.7143 74.9291H7.14284C5.17039 74.9291 3.57141 76.5281 3.57141 78.5005V92.8577C3.57141 94.8301 5.17039 96.4291 7.14284 96.4291H35.7143C37.6867 96.4291 39.2857 94.8301 39.2857 92.8577V78.5005C39.2857 76.5281 37.6867 74.9291 35.7143 74.9291Z"
-          />
-        </svg>
-        <h2 class="font-serif text-lg">Créer via la plateforme</h2>
-        <p class="text-sm text-grey-700">
-          Ajouter différents éléments tels que des images et du texte sur la
-          plateforme afin de créer votre brief.
-        </p>
-      </div>
-
-      <div
-        class="card card--cta | flex-1 | h-full"
-        style="--padding: var(--space-32); --row-gap: var(--space-32)"
-      >
-        <svg
-          aria-hidden="true"
-          width="100"
-          height="100"
-          viewBox="0 0 100 100"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          stroke="currentColor"
-          stroke-width="5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M3.57153 75.0001V82.143C3.57153 85.9318 5.07663 89.5654 7.75572 92.2445C10.4348 94.9236 14.0684 96.4287 17.8572 96.4287H82.143C85.9318 96.4287 89.5654 94.9236 92.2445 92.2445C94.9236 89.5654 96.4287 85.9318 96.4287 82.143V75.0001M28.5715 28.5715L50.0001 3.57153M50.0001 3.57153L71.4287 28.5715M50.0001 3.57153V67.8573"
-          />
-        </svg>
-        <label class="font-serif text-lg" for="upload-pdf">
-          Ajouter un PDF
-          <input
-            id="upload-pdf"
-            type="file"
-            @change="addPdf($event, page.uri, true)"
-            accept="application/pdf"
-            ref="pdfInput"
-            hidden
-          />
-        </label>
-        <p class="text-sm text-grey-700">
-          Vous avez déjà constitué votre brief en amont et souhaitez directement
-          l’importer.
-        </p>
-      </div>
-    </div>
-
-    <div
-      class="card | bg-grey-200 | items-center | text-center | w-full"
-      style="--padding: var(--space-32); --row-gap: var(--space-16)"
-    >
-      <h2 class="font-serif text-lg">Qu’est ce que le brief ?</h2>
-      <p class="text-sm text-grey-700">
-        Le brief est un outil créatif qui permet de définir les perspectives
-        esthétiques de votre projet.
-      </p>
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { usePageStore } from "../../../stores/page";
-import { storeToRefs } from "pinia";
-import { useBriefStore } from "../../../stores/brief";
-
-const emit = defineEmits("update:step");
-
-const { page } = storeToRefs(usePageStore());
-const { addPdf } = useBriefStore();
-const pdfInput = ref(null);
-</script>
-
-<style scoped>
-label[for="upload-pdf"]::after {
-  content: "";
-  display: block;
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/project/brief/add-images-modal/AddImagesModal.vue b/src/components/project/brief/add-images-modal/AddImagesModal.vue
index d4647bd..ea535f2 100644
--- a/src/components/project/brief/add-images-modal/AddImagesModal.vue
+++ b/src/components/project/brief/add-images-modal/AddImagesModal.vue
@@ -5,7 +5,7 @@
     :draggable="false"
     :dismissableMask="true"
     modal
-    header="Ajouter des images"
+    :header="t('dialogs.addImages')"
     class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
   >
     <div class="with-sidebar | h-full">
@@ -56,19 +56,18 @@
     id="delete-image"
     v-model:visible="deleteIsOpen"
     modal
-    header="Êtes-vous sûr de vouloir supprimer cette image ?"
+    :header="t('dialogs.deleteConfirm')"
     class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | text-center | w-full max-w | p-16 pt-32"
     style="--row-gap: var(--space-32); --max-w: 40rem"
   >
     <p class="text-grey-700 | px-16">
-      Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi
-      que toutes les informations qui lui sont attribuées.
+      {{ t('dialogs.deleteWarning') }}
     </p>
     <template #footer>
       <button class="btn btn--secondary | flex-1" @click="deleteIsOpen = false">
-        Annuler
+        {{ t('buttons.cancel') }}
       </button>
-      <button class="btn | flex-1" @click="">Supprimer</button>
+      <button class="btn | flex-1" @click="">{{ t('buttons.delete') }}</button>
     </template>
   </Dialog>
 </template>
@@ -79,6 +78,9 @@ import ImagesEditPanel from './ImagesEditPanel.vue';
 import { ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useAddImagesModalStore } from '../../../../stores/addImagesModal';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { isAddImagesModalOpen } = defineProps({
   isAddImagesModalOpen: Boolean,
diff --git a/src/components/project/brief/add-images-modal/ImagesEditPanel.vue b/src/components/project/brief/add-images-modal/ImagesEditPanel.vue
index e4adbbc..d158052 100644
--- a/src/components/project/brief/add-images-modal/ImagesEditPanel.vue
+++ b/src/components/project/brief/add-images-modal/ImagesEditPanel.vue
@@ -26,7 +26,7 @@
             <textarea
               name="image-description"
               id="image-description"
-              placeholder="Ajoutez une description à cette image…"
+              :placeholder="t('forms.imageDescriptionPlaceholder')"
               rows="3"
               class="border border-grey-200 | rounded-xl | p-16 | w-full"
               v-model="image.description"
@@ -34,7 +34,7 @@
           </div>
           <fieldset class="image-details__filters | flex-1">
             <legend class="text-sm text-grey-700 | mb-8">
-              Sélectionner un ou plusieurs tags
+              {{ t('forms.selectTags') }}
             </legend>
             <div class="flex" style="gap: var(--space-8)">
               <template v-for="tag in page.tags" :key="tag">
@@ -95,7 +95,7 @@
       </template>
     </Accordion>
     <button class="btn | w-full | mt-auto" @click="addImagesToBrief()">
-      Ajouter les images sélectionnées
+      {{ t('buttons.addSelectedImages') }}
     </button>
   </div>
 </template>
@@ -109,8 +109,10 @@ import StringUtils from "../../../../utils/string";
 import { storeToRefs } from "pinia";
 import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
 const { page } = storeToRefs(usePageStore());
+const { t } = useI18n();
 
 const { activeTab } = storeToRefs(useAddImagesModalStore());
 
diff --git a/src/components/project/brief/add-images-modal/MyImages.vue b/src/components/project/brief/add-images-modal/MyImages.vue
index 8ca9a29..047ed21 100644
--- a/src/components/project/brief/add-images-modal/MyImages.vue
+++ b/src/components/project/brief/add-images-modal/MyImages.vue
@@ -8,8 +8,8 @@
       :multiple="true"
       accept="image/*"
       :maxFileSize="1000000"
-      invalidFileSizeMessage="Fichier trop lourd"
-      chooseLabel="Ajouter une ou plusieurs images"
+      :invalidFileSizeMessage="t('errors.saveFailed')"
+      :chooseLabel="t('forms.addImages')"
       class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
       ref="uploadBtn"
     >
@@ -38,7 +38,7 @@
           removeFileCallback,
         }"
       >
-        <div v-if="files.length > 0">Fichiers importés</div>
+        <div v-if="files.length > 0">{{ t('forms.uploadedFiles') }}</div>
       </template>
     </FileUpload>
     <figure
@@ -71,6 +71,9 @@ import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
 import ArrayUtils from "../../../../utils/array";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { page } = storeToRefs(usePageStore());
 const toast = useToast();
diff --git a/src/components/project/cards/ClientBrief.vue b/src/components/project/cards/Brief.vue
similarity index 72%
rename from src/components/project/cards/ClientBrief.vue
rename to src/components/project/cards/Brief.vue
index ca74589..3e1e6bf 100644
--- a/src/components/project/cards/ClientBrief.vue
+++ b/src/components/project/cards/Brief.vue
@@ -3,20 +3,20 @@
     v-if="images.length > 0"
     :step="step"
     :images="images"
-    :uri="'/' + step.uri"
+    :uri="addLocalePrefix(step.uri)"
   />
   <Document v-if="pdf" :step="step" :pdf="pdf" />
 
   <button
-    v-if="images.length === 0"
+    v-if="images.length === 0 && step.id === 'clientBrief'"
     class="btn | w-full"
     @click="goToImagesBrief()"
   >
-    Ajouter un brief via la plateforme
+    {{ t('brief.addPlatform') }}
   </button>
-  <div class="btn | w-full" v-if="!pdf">
+  <div class="btn | w-full" v-if="!pdf && step.id === 'clientBrief'">
     <label for="upload-pdf">
-      Ajouter un brief PDF
+      {{ t('brief.addPdf') }}
       <input
         id="upload-pdf"
         type="file"
@@ -35,10 +35,13 @@ import Images from "./Images.vue";
 import Document from "./Document.vue";
 import { useBriefStore } from "../../../stores/brief";
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { addLocalePrefix } from "../../../utils/router";
 
 const { step } = defineProps({ step: Object });
 const { addPdf } = useBriefStore();
 const router = useRouter();
+const { t } = useI18n();
 
 const images = computed(() => {
   return step.files.filter((file) => file.type === "image");
@@ -49,6 +52,6 @@ const pdf = computed(() => {
 });
 
 function goToImagesBrief() {
-  router.push(location.pathname + "/client-brief?step=images");
+  router.push(location.pathname + "/" + step.slug);
 }
 </script>
diff --git a/src/components/project/cards/DateTime.vue b/src/components/project/cards/DateTime.vue
index c27a04e..ccbb529 100644
--- a/src/components/project/cards/DateTime.vue
+++ b/src/components/project/cards/DateTime.vue
@@ -3,7 +3,7 @@
     <time
       class="card__date | text-grey-700"
       :datetime="dayjs(date).format('YYYY-M-DD')"
-      >{{ dayjs(date).format("DD MMMM YYYY") }}</time
+      >{{ dayjs(date).locale(locale).format("DD MMMM YYYY") }}</time
     >
   </div>
 </template>
@@ -11,6 +11,9 @@
 <script setup>
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
+import "dayjs/locale/en";
+import { useI18n } from "vue-i18n";
 
 const { date } = defineProps({ date: String });
+const { locale } = useI18n();
 </script>
diff --git a/src/components/project/cards/Document.vue b/src/components/project/cards/Document.vue
index 4a4b60c..18e82b9 100644
--- a/src/components/project/cards/Document.vue
+++ b/src/components/project/cards/Document.vue
@@ -25,7 +25,7 @@
       v-if="pdf.comments?.length > 0"
       class="order-last | text-sm text-primary font-medium"
     >
-      <router-link :to="'/' + step.uri + '&comments=true'">
+      <router-link :to="addLocalePrefix(step.uri) + '&comments=true'">
         {{ pdf.comments.length }} commentaire{{
           pdf.comments.length > 1 ? "s" : ""
         }}
@@ -39,6 +39,7 @@ import { useRoute } from "vue-router";
 import DateTime from "./DateTime.vue";
 import { computed } from "vue";
 import { useDesignToLightStore } from "../../../stores/designToLight";
+import { addLocalePrefix } from "../../../utils/router";
 
 const { step, pdf, index } = defineProps({
   step: Object,
diff --git a/src/components/project/cards/Images.vue b/src/components/project/cards/Images.vue
index 463bfcc..de937f1 100644
--- a/src/components/project/cards/Images.vue
+++ b/src/components/project/cards/Images.vue
@@ -2,7 +2,7 @@
   <article class="card">
     <hgroup class="order-last">
       <h3 class="card__title | font-serif | text-lg">
-        <router-link :to="uri" class="link-full">{{ step.label }}</router-link>
+        <router-link :to="uri" class="link-full">{{ t('steps.' + step.id) }}</router-link>
       </h3>
     </hgroup>
     <DateTime :date="step.modified" />
@@ -42,6 +42,7 @@ import DateTime from './DateTime.vue';
 import { useDesignToLightStore } from '../../../stores/designToLight';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const { images, step, uri } = defineProps({
   images: Array,
@@ -51,13 +52,17 @@ const { images, step, uri } = defineProps({
 
 const { isDesignToLightStep } = useDesignToLightStore();
 const { allVariations } = useVirtualSampleStore();
+const { t } = useI18n();
 
 const commentsCount = computed(() => {
   let count = 0;
 
   if (Array.isArray(step.files)) {
+    // Ne compter que les commentaires des images, pas des documents (PDFs)
     for (const file of step.files) {
-      count += file?.comments?.length || 0;
+      if (file.type === 'image') {
+        count += file?.comments?.length || 0;
+      }
     }
   } else {
     if (step.files?.dynamic) {
diff --git a/src/components/project/cards/PhysicalSample.vue b/src/components/project/cards/PhysicalSample.vue
index 65f7a65..93640fe 100644
--- a/src/components/project/cards/PhysicalSample.vue
+++ b/src/components/project/cards/PhysicalSample.vue
@@ -5,7 +5,7 @@
       :style="'--cover: url(' + step.cover + ')'"
     >
       <h3 class="text-lg font-serif">
-        <router-link :to="'/' + step.uri" class="link-full">{{
+        <router-link :to="addLocalePrefix(step.uri)" class="link-full">{{
           step.title
         }}</router-link>
       </h3>
@@ -27,6 +27,7 @@
 <script setup>
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
+import { addLocalePrefix } from "../../../utils/router";
 
 const { step } = defineProps({ step: Object });
 </script>
diff --git a/src/components/project/cards/VirtualSample.vue b/src/components/project/cards/VirtualSample.vue
index e46aa3c..3b7123f 100644
--- a/src/components/project/cards/VirtualSample.vue
+++ b/src/components/project/cards/VirtualSample.vue
@@ -11,6 +11,7 @@ import Images from './Images.vue';
 import { computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
+import { addLocalePrefix } from '../../../utils/router';
 
 const { step } = defineProps({ step: Object });
 
@@ -27,7 +28,7 @@ const images = computed(() => {
   return allVariations.value.map((variation) => getFrontView(variation)) ?? [];
 });
 
-const uri = '/' + step.uri;
+const uri = addLocalePrefix(step.uri);
 
 function getFrontView(variation) {
   if (variation.files.length === 1) return variation.files[0];
diff --git a/src/components/project/virtual-sample/DynamicView.vue b/src/components/project/virtual-sample/DynamicView.vue
index f89552b..a725334 100644
--- a/src/components/project/virtual-sample/DynamicView.vue
+++ b/src/components/project/virtual-sample/DynamicView.vue
@@ -19,8 +19,8 @@
       >
         <span>{{
           isCompareModeEnabled
-            ? 'Quitter le mode comparer'
-            : 'Comparer les pistes'
+            ? t('buttons.exitCompare')
+            : t('buttons.compareTracks')
         }}</span>
       </button>
     </header>
@@ -41,7 +41,7 @@
           :backgroundColor="activeTrack.backgroundColor"
         />
         <div v-else class="track-empty | bg-white rounded-xl w-full p-32">
-          <p>Contenu non disponible pour cette piste</p>
+          <p>{{ t('virtualSample.noContent') }}</p>
         </div>
       </template>
 
@@ -49,7 +49,7 @@
         v-if="isCompareModeEnabled && activeTracks.length < 2"
         class="track-empty | bg-white rounded-xl w-full p-32"
       >
-        <p>Sélectionnez sur la piste que vous souhaitez comparer</p>
+        <p>{{ t('virtualSample.selectToCompare') }}</p>
       </div>
     </div>
   </div>
@@ -61,13 +61,17 @@ import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../../stores/page';
 import { useDialogStore } from '../../../stores/dialog';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import Interactive360 from './Interactive360.vue';
 import SingleImage from './SingleImage.vue';
 import Selector from '../../Selector.vue';
 import slugify from 'slugify';
 
+const { t } = useI18n();
+
 const route = useRoute();
+const router = useRouter();
 
 const { page } = storeToRefs(usePageStore());
 const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
@@ -83,7 +87,7 @@ const tracks = computed(() => {
 
   for (const key in raw) {
     list.push({
-      title: key,
+      title: key === 'Autres pistes' ? t('virtualSample.otherTracks') : key,
       slug: slugify(key),
       variations: raw[key] || [],
     });
@@ -92,41 +96,74 @@ const tracks = computed(() => {
   return list;
 });
 
-// ---------- INITIALISATION ----------
-// onBeforeMount : on initialise toujours activeTracks avec une VARIATION (jamais un track)
-onBeforeMount(() => {
-  // essayer la hash en priorité
-  let initialVariation = null;
+function normalizeSlug(slug) {
+  return slug.replace(/_/g, '-');
+}
 
+function getVariationSlug(variation) {
+  return variation.slug || (variation.title ? slugify(variation.title) : null);
+}
+
+function findVariationByHash(hashValue) {
+  const allVariations = tracks.value.flatMap((track) => track.variations || []);
+  const normalizedHash = normalizeSlug(hashValue);
+
+  return allVariations.find((variation) => {
+    const variationSlug = getVariationSlug(variation);
+    if (!variationSlug) return false;
+
+    const normalizedVariationSlug = normalizeSlug(variationSlug);
+    return normalizedVariationSlug === normalizedHash;
+  });
+}
+
+function getInitialVariation() {
   if (route?.hash && route.hash.length > 0) {
-    const variations = tracks.value.flatMap((t) => t.variations || []);
-    initialVariation =
-      variations.find((v) => v.slug === route.hash.substring(1)) || null;
+    const hashValue = route.hash.substring(1);
+    const variationFromHash = findVariationByHash(hashValue);
+    if (variationFromHash) return variationFromHash;
   }
 
-  // fallback : première variation du premier track
-  if (!initialVariation) {
-    initialVariation = tracks.value[0]?.variations?.[0] || null;
-  }
+  return tracks.value[0]?.variations?.[0] || null;
+}
 
-  if (initialVariation) {
-    activeTracks.value = [initialVariation];
-  } else {
-    activeTracks.value = []; // aucun contenu disponible
-  }
-});
+function initializeActiveTracks() {
+  const initialVariation = getInitialVariation();
+  activeTracks.value = initialVariation ? [initialVariation] : [];
+}
 
-// scroll si hash présent
-onMounted(() => {
-  if (route.query?.comments) isCommentsOpen.value = true;
+function normalizeUrlHash() {
+  if (route?.hash && route.hash.includes('_')) {
+    const normalizedHash = normalizeSlug(route.hash);
+    router.replace({ ...route, hash: normalizedHash });
+  }
+}
+
+function openCommentsIfRequested() {
+  if (route.query?.comments) {
+    isCommentsOpen.value = true;
+  }
+}
+
+function scrollToHashTarget() {
   if (!route?.hash || route.hash.length === 0) return;
 
-  const selector = route.hash.replace('#', '#track--');
-  const targetBtn = document.querySelector(selector);
-  if (targetBtn) targetBtn.scrollIntoView();
+  const selectorId = route.hash.replace('#', '#track--');
+  const targetButton = document.querySelector(selectorId);
+  if (targetButton) {
+    targetButton.scrollIntoView();
+  }
+}
+
+onBeforeMount(() => {
+  initializeActiveTracks();
 });
 
-// ---------- COMPUTED / WATCH ----------
+onMounted(() => {
+  openCommentsIfRequested();
+  normalizeUrlHash();
+  scrollToHashTarget();
+});
 
 const isSingleImage = computed(() => {
   return (
@@ -139,38 +176,52 @@ const singleFile = computed(() => {
   return isSingleImage.value ? activeTracks.value[0].files[0] : null;
 });
 
-watch(
-  singleFile,
-  (newValue) => {
-    if (newValue) openedFile.value = newValue;
-  },
-  { immediate: true }
-);
-
-// gestion du mode comparaison : fermer les commentaires, etc.
-watch(isCompareModeEnabled, (newValue) => {
-  if (newValue) {
-    isCommentsOpen.value = false;
-    isCommentPanelEnabled.value = false;
-  } else {
-    isCommentPanelEnabled.value = true;
+function updateOpenedFile(file) {
+  if (file) {
+    openedFile.value = file;
   }
+}
 
-  // quand on quitte le mode comparaison on retire l'élément secondaire si nécessaire
-  if (!newValue && activeTracks.value.length === 2) {
+function enableCompareModeUI() {
+  isCommentsOpen.value = false;
+  isCommentPanelEnabled.value = false;
+}
+
+function disableCompareModeUI() {
+  isCommentPanelEnabled.value = true;
+
+  if (activeTracks.value.length === 2) {
     activeTracks.value.pop();
   }
+}
+
+function updateUrlHash(firstTrack) {
+  const trackSlug = getVariationSlug(firstTrack);
+  if (!trackSlug) return;
+
+  const currentHash = route.hash ? route.hash.substring(1) : '';
+  const normalizedTrackSlug = normalizeSlug(trackSlug);
+
+  if (currentHash !== normalizedTrackSlug) {
+    router.replace({ ...route, hash: '#' + normalizedTrackSlug });
+  }
+}
+
+watch(singleFile, updateOpenedFile, { immediate: true });
+
+watch(isCompareModeEnabled, (isEnabled) => {
+  isEnabled ? enableCompareModeUI() : disableCompareModeUI();
 });
 
-// ---------- UTIL / helper ----------
-function getCommentsCount(track) {
-  if (!track || !Array.isArray(track.files)) return undefined;
-  let count = 0;
-  for (const file of track.files) {
-    count += file?.comments?.length || 0;
-  }
-  return count > 0 ? count : undefined;
-}
+watch(
+  activeTracks,
+  (tracks) => {
+    if (tracks && tracks.length > 0) {
+      updateUrlHash(tracks[0]);
+    }
+  },
+  { deep: true }
+);
 </script>
 
 <style>
diff --git a/src/components/project/virtual-sample/VirtualSample.vue b/src/components/project/virtual-sample/VirtualSample.vue
index 5bbcc0b..ab9bbf7 100644
--- a/src/components/project/virtual-sample/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@@ -5,7 +5,7 @@
     modal
     :draggable="false"
     :dismissableMask="true"
-    header="Titre du rendu"
+    :header="t('dialogs.renderTitle')"
     class="dialog"
     :class="[
       { 'with-comments': isCommentsOpen },
@@ -26,7 +26,7 @@
           aria-controls="dynamic"
           @click="activeTab = 'dynamic'"
         >
-          <span>Présentation dynamique</span>
+          <span>{{ t('virtualSample.dynamicPresentation') }}</span>
         </button>
         <button
           v-if="step.files.static"
@@ -38,10 +38,10 @@
           :aria-pressed="activeTab === 'static' ? true : false"
           aria-controls="static"
         >
-          <span>Vue statique</span>
+          <span>{{ t('virtualSample.staticView') }}</span>
         </button>
       </div>
-      <h2 class="font-serif text-lg">Échantillon virtuel</h2>
+      <h2 class="font-serif text-lg">{{ t('virtualSample.title') }}</h2>
     </template>
 
     <DynamicView id="dynamic" v-if="activeTab === 'dynamic'" />
@@ -66,8 +66,8 @@
       >
         <span>{{
           !isLoopAnimationEnabled
-            ? 'Animation en boucle'
-            : 'Arrêter l’animation'
+            ? t('buttons.loopAnimation')
+            : t('buttons.stopAnimation')
         }}</span>
       </button>
       <button
@@ -79,7 +79,7 @@
         @click="isCommentsOpen = !isCommentsOpen"
       >
         <span class="sr-only"
-          >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
+          >{{ isCommentsOpen ? t('buttons.hideComments') : t('buttons.showComments') }}</span
         >
       </button>
     </template>
@@ -103,7 +103,9 @@ import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { useDialogStore } from '../../../stores/dialog';
 import { useRoute, useRouter } from 'vue-router';
 import { usePageStore } from '../../../stores/page';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const { file } = defineProps({
   file: Object,
 });
@@ -141,12 +143,12 @@ watch(isOpen, (newValue) => {
 const downloadText = computed(() => {
   if (activeTab.value === 'dynamic') {
     if (activeTracks.value.length === 1) {
-      return "Télécharger l'image";
+      return t('buttons.downloadImage');
     } else {
-      return 'Télécharger les images';
+      return t('buttons.downloadImages');
     }
   } else {
-    return 'Télécharger le PDF';
+    return t('buttons.downloadPdf');
   }
 });
 
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..78442ce
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,201 @@
+{
+  "menu": {
+    "home": "Home",
+    "notifications": "Notifications",
+    "meetings": "Meetings",
+    "designToLight": "Design to Light",
+    "inspirations": "Inspirations",
+    "profile": "Profile",
+    "logout": "Logout",
+    "currentProjects": "Current projects",
+    "archivedProjects": "Archived projects",
+    "news": "New",
+    "show": "Show menu",
+    "hide": "Hide menu",
+    "newModifications": "New modifications"
+  },
+  "steps": {
+    "clientBrief": "Client brief",
+    "proposal": "Commercial proposal",
+    "extendedBrief": "Extended brief",
+    "industrialIdeation": "Industrial ideation",
+    "virtualSample": "Virtual sample",
+    "physicalSample": "Physical sample"
+  },
+  "dtl": {
+    "dynamicTrack": "Virtual sample - dynamic track",
+    "staticTrack": "Virtual sample - static track",
+    "title": "Design to Light",
+    "grade": "Design to Light: {grade}",
+    "globalScore": "Global score",
+    "positioning": "Positioning",
+    "design": "Design",
+    "weight": "Weight",
+    "indicators": "Component indicators",
+    "requestOptimization": "Request optimization expertise",
+    "requestPending": "Expertise request being processed…",
+    "initialProposal": "Initial proposal",
+    "alternative": "Alternative {index}",
+    "proposalBasedOn": "Data based on the proposal"
+  },
+  "buttons": {
+    "edit": "Edit",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "submit": "Submit",
+    "retry": "Retry",
+    "add": "Add",
+    "close": "Close",
+    "validate": "Validate and send the brief",
+    "validateMinimum": "Add at least one image",
+    "showPassword": "Show password",
+    "hidePassword": "Hide password",
+    "showProject": "Show project",
+    "hideProject": "Hide project",
+    "showComments": "Show comments",
+    "hideComments": "Hide comments",
+    "backToProject": "Back to project",
+    "backToList": "Back to list",
+    "addComment": "Add a comment",
+    "reply": "Reply…",
+    "seeAll": "See all",
+    "deleteImage": "Delete this image",
+    "downloadImage": "Download image",
+    "downloadImages": "Download images",
+    "downloadPdf": "Download PDF",
+    "update": "Update",
+    "requestMeeting": "Request a meeting",
+    "markAllAsRead": "Mark all as read",
+    "loopAnimation": "Loop animation",
+    "stopAnimation": "Stop animation",
+    "compareTracks": "Compare tracks",
+    "exitCompare": "Exit compare mode",
+    "addSelectedImages": "Add selected images"
+  },
+  "forms": {
+    "email": "Email",
+    "emailPlaceholder": "email{'@'}example.com",
+    "password": "Password",
+    "passwordPlaceholder": "Minimum 8 characters",
+    "newPassword": "New password",
+    "confirmPassword": "Confirm new password…",
+    "projectName": "Project name",
+    "projectDetails": "Project details",
+    "projectDetailsPlaceholder": "Project details…",
+    "meetingSubject": "Meeting subject",
+    "meetingDetails": "Project details",
+    "meetingDetailsPlaceholder": "Describe your request…",
+    "description": "Project description",
+    "descriptionPlaceholder": "Add a general description of your project…",
+    "imageDescription": "Image description",
+    "imageDescriptionPlaceholder": "Add a description to the image…",
+    "commentPlaceholder": "Add a comment…",
+    "filterByTags": "Filter by tags",
+    "tags": "Tags",
+    "selectVariation": "Select a variation",
+    "uploadedFiles": "Uploaded files",
+    "addImages": "Add one or more images",
+    "selectTags": "Select one or more tags"
+  },
+  "auth": {
+    "login": "Login",
+    "passwordShown": "Password shown",
+    "passwordHidden": "Password hidden",
+    "fillFields": "Please fill in the fields.",
+    "inProgress": "In progress…",
+    "updateSuccess": "Update successful",
+    "updateInProgress": "in progress…"
+  },
+  "account": {
+    "comments": "Comments",
+    "noClient": "No associated client",
+    "managedProjects": "Managed projects",
+    "myProjects": "My projects",
+    "currentStep": "Current step:",
+    "projectCount": "Number of projects",
+    "clientLogo": "{clientName} logo"
+  },
+  "brief": {
+    "addPlatform": "Add a brief via the platform",
+    "addPdf": "Add a PDF brief",
+    "projects": "Projects"
+  },
+  "comments": {
+    "title": "Comments",
+    "your": "Your comment",
+    "new": "New comment",
+    "newInstruction": "In the content area, click where you want to position the comment",
+    "reply": "reply",
+    "replies": "replies",
+    "edit": "Edit",
+    "inProgress": "In progress",
+    "emptyMessage": "Share your ideas by adding comments"
+  },
+  "dates": {
+    "today": "Today",
+    "yesterday": "yesterday",
+    "updatedOn": "Last updated on"
+  },
+  "projects": {
+    "none": "No projects at the moment",
+    "current": "Current projects",
+    "archived": "Archived projects"
+  },
+  "notifications": {
+    "title": "Notifications",
+    "none": "You have no new notifications",
+    "noneUnread": "You have no unread notifications",
+    "all": "All",
+    "unread": "Unread",
+    "projectRequest": "Project creation request",
+    "meetingRequest": "Meeting request",
+    "content": "Content",
+    "draft": "(draft)",
+    "from": "From",
+    "author": "Author:",
+    "goToContent": "Go to content"
+  },
+  "meetings": {
+    "none": "You have no scheduled meetings",
+    "upcoming": "Upcoming",
+    "past": "Past"
+  },
+  "inspirations": {
+    "title": "Inspirations",
+    "favorites": "My Favorites",
+    "addToFavorites": "Add to favorites",
+    "removeFromFavorites": "Remove from favorites",
+    "new": "New"
+  },
+  "dialogs": {
+    "requestProject": "Request project creation",
+    "requestMeeting": "Request a meeting",
+    "imageDetails": "Image details",
+    "addImages": "Add images",
+    "deleteConfirm": "Are you sure you want to delete this image?",
+    "deleteWarning": "If you delete this image, it will disappear from your brief along with all the information attributed to it.",
+    "pdfTitle": "PDF title",
+    "renderTitle": "Render title",
+    "createWithDTL": "Create with Design to Light",
+    "learnMore": "Learn more",
+    "dtlDescription": "Discover the environmental score of your project..."
+  },
+  "virtualSample": {
+    "title": "Virtual sample",
+    "dynamicPresentation": "Dynamic presentation",
+    "staticView": "Static view",
+    "noContent": "Content not available for this track",
+    "selectToCompare": "Select the track you want to compare",
+    "otherTracks": "Other tracks"
+  },
+  "errors": {
+    "saveFailed": "Save failed",
+    "deleteFailed": "Delete failed",
+    "toggleProjectFailed": "Failed to show/hide project",
+    "toggleFavoriteFailed": "Failed to toggle favorite",
+    "readNotificationFailed": "Failed to read notification:",
+    "readAllNotificationsFailed": "Could not read all notifications",
+    "markNotificationFailed": "Could not mark notification as read"
+  }
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
new file mode 100644
index 0000000..5f6cd69
--- /dev/null
+++ b/src/locales/fr.json
@@ -0,0 +1,201 @@
+{
+  "menu": {
+    "home": "Home",
+    "notifications": "Notifications",
+    "meetings": "Réunions",
+    "designToLight": "Design to Light",
+    "inspirations": "Inspirations",
+    "profile": "Profil",
+    "logout": "Déconnexion",
+    "currentProjects": "Projets en cours",
+    "archivedProjects": "Projets archivés",
+    "news": "Nouveautés",
+    "show": "Afficher le menu",
+    "hide": "Masquer le menu",
+    "newModifications": "Nouvelles modifications"
+  },
+  "steps": {
+    "clientBrief": "Brief client",
+    "proposal": "Proposition commerciale",
+    "extendedBrief": "Brief enrichi",
+    "industrialIdeation": "Idéation industrielle",
+    "virtualSample": "Échantillon virtuel",
+    "physicalSample": "Échantillon physique"
+  },
+  "dtl": {
+    "dynamicTrack": "Échantillon virtuel - piste dynamique",
+    "staticTrack": "Échantillon virtuel - piste statique",
+    "title": "Design to Light",
+    "grade": "Design to Light: {grade}",
+    "globalScore": "Note globale",
+    "positioning": "Positionnement",
+    "design": "Design",
+    "weight": "Poids",
+    "indicators": "Indicateur des composants impliqués",
+    "requestOptimization": "Demander une expertise d'optimisation",
+    "requestPending": "Demande d'expertise en cours de traitement…",
+    "initialProposal": "Proposition initiale",
+    "alternative": "Alternative {index}",
+    "proposalBasedOn": "Données basées sur la proposition"
+  },
+  "buttons": {
+    "edit": "Modifier",
+    "cancel": "Annuler",
+    "save": "Sauvegarder",
+    "delete": "Supprimer",
+    "submit": "Soumettre",
+    "retry": "Réessayer",
+    "add": "Ajouter",
+    "close": "Fermer",
+    "validate": "Valider et envoyer le brief",
+    "validateMinimum": "Ajoutez au moins une image",
+    "showPassword": "Afficher le mot de passe",
+    "hidePassword": "Masquer le mot de passe",
+    "showProject": "Afficher le projet",
+    "hideProject": "Masquer le projet",
+    "showComments": "Afficher les commentaires",
+    "hideComments": "Masquer les commentaires",
+    "backToProject": "Retour au projet",
+    "backToList": "Retour à la liste",
+    "addComment": "Ajouter un commentaire",
+    "reply": "Répondre…",
+    "seeAll": "Voir tout",
+    "deleteImage": "Supprimer cette image",
+    "downloadImage": "Télécharger l'image",
+    "downloadImages": "Télécharger les images",
+    "downloadPdf": "Télécharger le PDF",
+    "update": "Mettre à jour",
+    "requestMeeting": "Demander un RDV",
+    "markAllAsRead": "Marquer tout comme lu",
+    "loopAnimation": "Animation en boucle",
+    "stopAnimation": "Arrêter l'animation",
+    "compareTracks": "Comparer les pistes",
+    "exitCompare": "Quitter le mode comparer",
+    "addSelectedImages": "Ajouter les images sélectionnées"
+  },
+  "forms": {
+    "email": "Email",
+    "emailPlaceholder": "mail{'@'}exemple.com",
+    "password": "Mot de passe",
+    "passwordPlaceholder": "Minimum 8 caractères",
+    "newPassword": "Nouveau mot de passe",
+    "confirmPassword": "Confirmez le nouveau mot de passe…",
+    "projectName": "Nom du projet",
+    "projectDetails": "Détails du projet",
+    "projectDetailsPlaceholder": "Détails du projet…",
+    "meetingSubject": "Objet du rendez-vous",
+    "meetingDetails": "Détails du projet",
+    "meetingDetailsPlaceholder": "Décrivez votre demande…",
+    "description": "Description du projet",
+    "descriptionPlaceholder": "Ajoutez une description générale de votre projet…",
+    "imageDescription": "Description de l'image",
+    "imageDescriptionPlaceholder": "Ajoutez une description à l'image…",
+    "commentPlaceholder": "Ajouter un commentaire…",
+    "filterByTags": "Filtrer par tags",
+    "tags": "Tags",
+    "selectVariation": "Sélectionnez une déclinaison",
+    "uploadedFiles": "Fichiers importés",
+    "addImages": "Ajouter une ou plusieurs images",
+    "selectTags": "Sélectionner un ou plusieurs tags"
+  },
+  "auth": {
+    "login": "Connexion",
+    "passwordShown": "Mot de passe affiché",
+    "passwordHidden": "Mot de passe masqué",
+    "fillFields": "Veuillez remplir les champs.",
+    "inProgress": "En cours…",
+    "updateSuccess": "Mise à jour réussie",
+    "updateInProgress": "en cours…"
+  },
+  "account": {
+    "comments": "Commentaires",
+    "noClient": "Pas de client associé",
+    "managedProjects": "Projets managés",
+    "myProjects": "Mes projets",
+    "currentStep": "Étape en cours :",
+    "projectCount": "Nombre de projets",
+    "clientLogo": "logo {clientName}"
+  },
+  "brief": {
+    "addPlatform": "Ajouter un brief via la plateforme",
+    "addPdf": "Ajouter un brief PDF",
+    "projects": "Projets"
+  },
+  "comments": {
+    "title": "Commentaires",
+    "your": "Votre commentaire",
+    "new": "Nouveau commentaire",
+    "newInstruction": "Dans la zone du contenu, cliquez où vous souhaitez positionner le commentaire",
+    "reply": "réponse",
+    "replies": "réponses",
+    "edit": "Éditer",
+    "inProgress": "En cours",
+    "emptyMessage": "Partagez vos idées en ajoutant des commentaires"
+  },
+  "dates": {
+    "today": "Aujourd'hui",
+    "yesterday": "hier",
+    "updatedOn": "Dernière mise à jour le"
+  },
+  "projects": {
+    "none": "Aucun projet pour le moment",
+    "current": "Projets en cours",
+    "archived": "Projets archivés"
+  },
+  "notifications": {
+    "title": "Notifications",
+    "none": "Vous n'avez pas de nouvelles notifications",
+    "noneUnread": "Vous n'avez pas de notifications non lues",
+    "all": "Tout",
+    "unread": "Non lu",
+    "projectRequest": "Demande de création de projet",
+    "meetingRequest": "Demande de rendez-vous",
+    "content": "Contenu",
+    "draft": "(brouillon)",
+    "from": "De la part de",
+    "author": "Auteur :",
+    "goToContent": "Aller au contenu"
+  },
+  "meetings": {
+    "none": "Vous n'avez aucune réunion programmée",
+    "upcoming": "À venir",
+    "past": "Passées"
+  },
+  "inspirations": {
+    "title": "Les Inspirations",
+    "favorites": "Mes Favoris",
+    "addToFavorites": "Ajouter aux favoris",
+    "removeFromFavorites": "Retirer des favoris",
+    "new": "Nouveauté"
+  },
+  "dialogs": {
+    "requestProject": "Demander la création d'un projet",
+    "requestMeeting": "Demander un rendez-vous",
+    "imageDetails": "Détails de l'image",
+    "addImages": "Ajouter des images",
+    "deleteConfirm": "Êtes-vous sûr de vouloir supprimer cette image ?",
+    "deleteWarning": "Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi que toutes les informations qui lui sont attribuées.",
+    "pdfTitle": "Titre du PDF",
+    "renderTitle": "Titre du rendu",
+    "createWithDTL": "Créer avec Design to Light",
+    "learnMore": "En savoir plus",
+    "dtlDescription": "Découvrez la note environnementale de votre projet..."
+  },
+  "virtualSample": {
+    "title": "Échantillon virtuel",
+    "dynamicPresentation": "Présentation dynamique",
+    "staticView": "Vue statique",
+    "noContent": "Contenu non disponible pour cette piste",
+    "selectToCompare": "Sélectionnez sur la piste que vous souhaitez comparer",
+    "otherTracks": "Autres pistes"
+  },
+  "errors": {
+    "saveFailed": "Erreur lors de la sauvegarde",
+    "deleteFailed": "Erreur lors de la suppression",
+    "toggleProjectFailed": "Erreur lors du masquage/affichage du projet",
+    "toggleFavoriteFailed": "Failed to toggle favorite",
+    "readNotificationFailed": "Erreur lors de la lecture de la notification :",
+    "readAllNotificationsFailed": "Could not read all notifications",
+    "markNotificationFailed": "Could not mark notification as read"
+  }
+}
diff --git a/src/main.js b/src/main.js
index a260fb6..e35041f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,12 +6,30 @@ import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import Select from 'primevue/select';
 import MultiSelect from 'primevue/multiselect';
-import { router } from './router/router.js';
+import { router, setI18nLocale } from './router/router.js';
+import { createI18n } from 'vue-i18n';
+import fr from './locales/fr.json';
+import en from './locales/en.json';
+import { setI18nInstance } from './stores/locale';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'fr',
+  fallbackLocale: 'fr',
+  messages: {
+    fr,
+    en,
+  },
+});
+
+// Donner l'instance i18n au store locale pour synchronisation immédiate
+setI18nInstance(i18n);
 
 const app = createApp(App);
 const pinia = createPinia();
 
 app.use(pinia);
+app.use(i18n);
 app.use(PrimeVue, {
   unstyled: true,
 });
@@ -19,4 +37,7 @@ app.use(ToastService);
 app.use(router);
 app.component('Select', Select);
 app.component('MultiSelect', MultiSelect);
+
+setI18nLocale(i18n);
+
 app.mount('#app');
diff --git a/src/router/router.js b/src/router/router.js
index a67252a..91706bf 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -3,6 +3,8 @@ import routes from './routes';
 import { useApiStore } from '../stores/api';
 import { usePageStore } from '../stores/page';
 import { useUserStore } from '../stores/user';
+import { useLocaleStore } from '../stores/locale';
+import { useAnalyticsStore } from '../stores/analytics';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -12,13 +14,23 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
   const pageStore = usePageStore();
   const userStore = useUserStore();
+  const localeStore = useLocaleStore();
+
+  const urlLocale = to.params.locale === 'en' ? 'en' : 'fr';
+  localeStore.initLocale(urlLocale);
+
+  let apiPath = to.path;
+  if (urlLocale === 'en' && apiPath.startsWith('/en')) {
+    apiPath = apiPath.replace(/^\/en/, '') || '/';
+  }
 
   const api = useApiStore();
   try {
-    const res = await api.fetchData(to.path);
+    const res = await api.fetchData(apiPath);
 
-    if (to.path === '/login' && res.user) {
-      location.href = '/';
+    const loginPath = urlLocale === 'en' ? '/en/login' : '/login';
+    if (to.path === loginPath && res.user) {
+      location.href = urlLocale === 'en' ? '/en' : '/';
     }
 
     pageStore.page = res.page;
@@ -30,4 +42,72 @@ router.beforeEach(async (to, from, next) => {
   }
 });
 
+router.afterEach((to) => {
+  const userStore = useUserStore();
+  const pageStore = usePageStore();
+
+  if (userStore.user) {
+    const analytics = useAnalyticsStore();
+    analytics.initSession();
+
+    const { pageType, pageName } = getPageInfo(to, pageStore.page);
+    analytics.trackVisit(to.path, pageType, pageName);
+  }
+});
+
+function getPageInfo(route, page) {
+  const path = route.path;
+
+  if (path === '/' || path === '/en') {
+    return { pageType: 'home', pageName: 'Accueil' };
+  }
+
+  if (path.includes('/login')) {
+    return { pageType: 'login', pageName: 'Connexion' };
+  }
+
+  if (path.includes('/account')) {
+    return { pageType: 'account', pageName: 'Compte' };
+  }
+
+  if (path.includes('/notifications')) {
+    return { pageType: 'notifications', pageName: 'Notifications' };
+  }
+
+  if (path.includes('/reunions')) {
+    return { pageType: 'reunions', pageName: 'Réunions' };
+  }
+
+  if (path.includes('/inspirations')) {
+    return { pageType: 'inspirations', pageName: 'Inspirations' };
+  }
+
+  if (path.includes('/design-to-light')) {
+    return { pageType: 'design-to-light', pageName: 'Design to Light' };
+  }
+
+  if (path.includes('/client-brief')) {
+    return { pageType: 'client-brief', pageName: page?.title || 'Brief Client' };
+  }
+
+  if (path.includes('/extended-brief')) {
+    return { pageType: 'extended-brief', pageName: page?.title || 'Brief Étendu' };
+  }
+
+  if (path.includes('/projects/')) {
+    return { pageType: 'project', pageName: page?.title || 'Projet' };
+  }
+
+  return { pageType: 'unknown', pageName: path };
+}
+
+export function setI18nLocale(i18n) {
+  router.afterEach(() => {
+    const localeStore = useLocaleStore();
+    if (i18n.global.locale.value !== localeStore.currentLocale) {
+      i18n.global.locale.value = localeStore.currentLocale;
+    }
+  });
+}
+
 export { router };
diff --git a/src/router/routes.js b/src/router/routes.js
index 12d0f18..af98b44 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -10,53 +10,55 @@ import Account from '../views/Account.vue';
 
 const routes = [
   {
-    path: '/',
+    path: '/:locale?',
     component: Home,
   },
   {
     name: 'Login',
-    path: '/login',
+    path: '/:locale?/login',
     component: Login,
   },
   {
     name: 'Account',
-    path: '/account',
+    path: '/:locale?/account',
     component: Account,
   },
   {
-    path: '/notifications',
+    path: '/:locale?/notifications',
     component: Notifications,
   },
   {
-    path: '/reunions',
+    path: '/:locale?/reunions',
     component: Reunions,
   },
   {
-    path: '/inspirations',
+    path: '/:locale?/inspirations',
     component: Inspirations,
   },
   {
-    path: '/design-to-light',
+    path: '/:locale?/design-to-light',
     component: DesignToLight,
   },
   {
-    path: '/projects/:id',
+    path: '/:locale?/projects/:id',
     component: Kanban,
   },
   {
-    path: '/projects/:id/client-brief',
+    path: '/:locale?/projects/:id/client-brief',
     component: Brief,
   },
   {
-    path: '/projects/:id/extended-brief',
+    path: '/:locale?/projects/:id/extended-brief',
     component: Brief,
   },
 
   // Redirections
   {
-    path: '/projects/:id/industrial-ideation',
+    path: '/:locale?/projects/:id/industrial-ideation',
     redirect: (to) => {
+      const prefix = to.params.locale === 'en' ? '/en' : '';
       return (
+        prefix +
         '/projects/' +
         to.params.id +
         '?dialog=industrial-ideation&comments=true'
@@ -64,9 +66,10 @@ const routes = [
     },
   },
   {
-    path: '/projects/:id/proposal',
+    path: '/:locale?/projects/:id/proposal',
     redirect: (to) => {
-      return '/projects/' + to.params.id + '?dialog=proposal&comments=true';
+      const prefix = to.params.locale === 'en' ? '/en' : '';
+      return prefix + '/projects/' + to.params.id + '?dialog=proposal&comments=true';
     },
   },
 ];
diff --git a/src/stores/analytics.js b/src/stores/analytics.js
new file mode 100644
index 0000000..f31b0e5
--- /dev/null
+++ b/src/stores/analytics.js
@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useAnalyticsStore = defineStore('analytics', () => {
+  const sessionId = ref(null);
+
+  function initSession() {
+    // Récupérer sessionId depuis sessionStorage ou en créer un nouveau
+    const storedSessionId = sessionStorage.getItem('analyticsSessionId');
+
+    if (storedSessionId) {
+      sessionId.value = storedSessionId;
+    } else {
+      sessionId.value = generateSessionId();
+      sessionStorage.setItem('analyticsSessionId', sessionId.value);
+    }
+  }
+
+  function generateSessionId() {
+    return `session_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+  }
+
+  async function trackVisit(pageUrl, pageType, pageName = null) {
+    if (!sessionId.value) {
+      initSession();
+    }
+
+    const data = {
+      sessionId: sessionId.value,
+      pageUrl,
+      pageType,
+      pageName,
+    };
+
+    try {
+      await fetch('/track-visit.json', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+    } catch (error) {
+      // Tracking silencieux : ne pas bloquer l'app si ça échoue
+      console.debug('Analytics tracking failed:', error);
+    }
+  }
+
+  return {
+    sessionId,
+    initSession,
+    trackVisit,
+  };
+});
diff --git a/src/stores/api.js b/src/stores/api.js
index d12707a..d1506de 100644
--- a/src/stores/api.js
+++ b/src/stores/api.js
@@ -163,6 +163,34 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  /**
+   * Marque une notification comme lue.
+   * @param {Object} notification - L'objet notification complet (avec type, id, _file, _projectUri, etc.)
+   */
+  async function markNotificationRead(notification) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify(notification),
+    };
+    try {
+      const response = await fetch("/mark-notification-read.json", headers);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      if (data.status === "error") {
+        throw new Error(data.message);
+      }
+      // Mettre à jour le store local
+      userStore.markNotificationRead(notification.id, notification.project?.uri || notification._projectUri);
+      return data;
+    } catch (error) {
+      console.error("Erreur lors du marquage de la notification:", error);
+      throw error;
+    }
+  }
+
+  // Ancienne fonction gardée pour rétro-compatibilité
   async function readNotification(notificationId, projectId) {
     const headers = {
       method: "POST",
@@ -215,6 +243,31 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  /**
+   * Marque toutes les notifications comme lues (nouveau système).
+   */
+  async function markAllNotificationsRead() {
+    try {
+      const response = await fetch("/mark-all-notifications-read.json", {
+        method: "POST",
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      if (data.status === "error") {
+        throw new Error(data.message);
+      }
+      userStore.markAllNotificationsRead();
+      console.log("Toutes les notifications ont été marquées comme lues.");
+      return data;
+    } catch (error) {
+      console.error("Erreur lors du marquage de toutes les notifications:", error);
+      throw error;
+    }
+  }
+
+  // Ancienne fonction gardée pour rétro-compatibilité
   async function readAllNotifications() {
     try {
       const response = await fetch("/read-all-notifications.json");
@@ -236,6 +289,32 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  async function toggleHiddenProject(projectUuid) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify({ projectUuid }),
+    };
+
+    try {
+      const response = await fetch("/toggle-hidden-project.json", headers);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+
+      if (data.status === "success") {
+        userStore.toggleHiddenProject(projectUuid);
+        console.log("Projet masqué/affiché avec succès.");
+        return data;
+      } else {
+        throw new Error(data.message);
+      }
+    } catch (error) {
+      console.error("Erreur lors du toggle du projet masqué:", error);
+      throw error;
+    }
+  }
+
   return {
     fetchData,
     fetchRoute,
@@ -243,6 +322,11 @@ export const useApiStore = defineStore("api", () => {
     updateComment,
     deleteComment,
     replyComment,
+    // Nouvelles fonctions
+    markNotificationRead,
+    markAllNotificationsRead,
+    toggleHiddenProject,
+    // Anciennes fonctions (rétro-compatibilité)
     readNotification,
     readAllNotifications,
     validateBrief,
diff --git a/src/stores/dialog.js b/src/stores/dialog.js
index f35d979..df9f238 100644
--- a/src/stores/dialog.js
+++ b/src/stores/dialog.js
@@ -1,6 +1,8 @@
 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);
@@ -148,6 +150,22 @@ export const useDialogStore = defineStore('dialog', () => {
     }
   }
 
+  // Analytics tracking pour ouverture de fichiers
+  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}`
+      );
+    }
+  });
+
   return {
     content,
     activeTracks,
diff --git a/src/stores/locale.js b/src/stores/locale.js
new file mode 100644
index 0000000..9768a57
--- /dev/null
+++ b/src/stores/locale.js
@@ -0,0 +1,61 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+let i18nInstance = null;
+
+export function setI18nInstance(i18n) {
+  i18nInstance = i18n;
+}
+
+export const useLocaleStore = defineStore('locale', () => {
+  const currentLocale = ref('fr');
+
+  const isEnglish = computed(() => currentLocale.value === 'en');
+  const isFrench = computed(() => currentLocale.value === 'fr');
+
+  function setLocale(locale) {
+    if (locale !== 'fr' && locale !== 'en') {
+      console.warn(`Invalid locale: ${locale}, defaulting to 'fr'`);
+      locale = 'fr';
+    }
+    currentLocale.value = locale;
+    localStorage.setItem('locale', locale);
+    document.documentElement.lang = locale;
+
+    // Synchroniser i18n immédiatement
+    if (i18nInstance) {
+      i18nInstance.global.locale.value = locale;
+    }
+  }
+
+  function detectUserLocale() {
+    const browserLang = navigator.language.toLowerCase();
+    return browserLang.startsWith('en') ? 'en' : 'fr';
+  }
+
+  function initLocale(urlLocale = null) {
+    let locale = 'fr';
+
+    if (urlLocale && (urlLocale === 'en' || urlLocale === 'fr')) {
+      locale = urlLocale;
+    } else {
+      const storedLocale = localStorage.getItem('locale');
+      if (storedLocale === 'en' || storedLocale === 'fr') {
+        locale = storedLocale;
+      } else {
+        locale = detectUserLocale();
+      }
+    }
+
+    setLocale(locale);
+  }
+
+  return {
+    currentLocale,
+    isEnglish,
+    isFrench,
+    setLocale,
+    detectUserLocale,
+    initLocale,
+  };
+});
diff --git a/src/stores/projects.js b/src/stores/projects.js
index c372c63..be62742 100644
--- a/src/stores/projects.js
+++ b/src/stores/projects.js
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { useApiStore } from './api.js';
+import { useUserStore } from './user.js';
 import { ref, computed } from 'vue';
 
 export const useProjectsStore = defineStore('projects', () => {
@@ -7,25 +8,40 @@ export const useProjectsStore = defineStore('projects', () => {
   const projects = ref(null);
 
   const currentProjects = computed(() => {
+    const userStore = useUserStore();
+    const hiddenProjectUuids = userStore.hiddenProjects || [];
     return (
       projects.value
-        ?.filter((project) => project.status === 'listed')
+        ?.filter((project) =>
+          project.status === 'listed' &&
+          !hiddenProjectUuids.includes(project.uuid)
+        )
         .sort((a, b) => new Date(b.modified) - new Date(a.modified)) ?? []
     );
   });
 
   const draftProjects = computed(() => {
+    const userStore = useUserStore();
+    const hiddenProjectUuids = userStore.hiddenProjects || [];
     return (
       projects.value
-        ?.filter((project) => project.status === 'draft')
+        ?.filter((project) =>
+          project.status === 'draft' &&
+          !hiddenProjectUuids.includes(project.uuid)
+        )
         .sort((a, b) => new Date(b.modified) - new Date(a.modified)) ?? []
     );
   });
 
   const archivedProjects = computed(() => {
+    const userStore = useUserStore();
+    const hiddenProjectUuids = userStore.hiddenProjects || [];
     return (
       projects.value
-        ?.filter((project) => project.status === 'unlisted')
+        ?.filter((project) =>
+          project.status === 'unlisted' &&
+          !hiddenProjectUuids.includes(project.uuid)
+        )
         .sort((a, b) => new Date(b.modified) - new Date(a.modified)) ?? []
     );
   });
@@ -36,6 +52,8 @@ export const useProjectsStore = defineStore('projects', () => {
     isProjectsLoading.value = false;
     projects.value = json.page.children;
     // }, 3000);
+  }).catch(() => {
+    isProjectsLoading.value = false;
   });
 
   // Functions
diff --git a/src/stores/user.js b/src/stores/user.js
index 7beaf69..b0ac8d8 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -11,58 +11,120 @@ export const useUserStore = defineStore('user', () => {
 
   const { projects } = storeToRefs(useProjectsStore());
 
+  /**
+   * Liste des notifications agrégées depuis tous les projets.
+   * Les notifications sont maintenant dérivées côté backend avec isRead pré-calculé.
+   */
   const notifications = computed(() => {
-    return projects.value?.flatMap((project) => {
-      if (!project.notifications) return [];
+    if (!projects.value || !user.value) return [];
 
-      return project.notifications
-        .filter((notification) => notification.author.uuid !== user.value.uuid)
-        .map((notification) => ({
-          ...notification,
-          project: project,
-          isRead: notification.readby?.includes(user.value.uuid),
-        }));
+    return projects.value.flatMap((project) => {
+      if (!Array.isArray(project.notifications)) {
+        if (project.notifications) console.error(`[Notifications] project.notifications n'est pas un tableau pour "${project.slug}"`, project.notifications);
+        return [];
+      }
+
+      return project.notifications.map((notification) => ({
+        ...notification,
+        project: project,
+        // isRead est maintenant fourni par le backend
+      }));
     });
   });
 
-  function readNotification(notificationId, projectId) {
-    console.log('Read notification', notificationId, projectId);
+  /**
+   * Marque une notification comme lue dans le store local.
+   * @param {string} notificationId - L'ID de la notification
+   * @param {string} projectUri - L'URI du projet (optionnel, pour retrouver le projet)
+   */
+  function markNotificationRead(notificationId, projectUri = null) {
+    if (!user.value?.uuid) return;
+
+    projects.value = projects.value.map((project) => {
+      // Si projectUri fourni, cibler le bon projet
+      if (projectUri && project.uri !== projectUri && `/${project.uri}` !== projectUri) {
+        return project;
+      }
+
+      return {
+        ...project,
+        notifications: (project.notifications || []).map((notification) =>
+          notification.id === notificationId
+            ? {
+                ...notification,
+                isRead: true,
+                readby: [...new Set([...(notification.readby || []), user.value.uuid])],
+              }
+            : notification
+        ),
+      };
+    });
+  }
+
+  /**
+   * Marque toutes les notifications comme lues dans le store local.
+   */
+  function markAllNotificationsRead() {
+    if (!user.value?.uuid) return;
+
     projects.value = projects.value.map((project) => ({
       ...project,
-      notifications:
-        project.uuid === projectId || project.uri === projectId
-          ? project.notifications.map((notification) =>
-              notification.id === notificationId
-                ? {
-                    ...notification,
-                    readby: [
-                      ...new Set([...notification.readby, user.value.uuid]),
-                    ],
-                  }
-                : notification
-            )
-          : project.notifications,
+      notifications: (project.notifications || []).map((notification) => ({
+        ...notification,
+        isRead: true,
+        readby: [...new Set([...(notification.readby || []), user.value.uuid])],
+      })),
     }));
   }
 
+  // Anciennes fonctions gardées pour rétro-compatibilité
+  function readNotification(notificationId, projectId) {
+    markNotificationRead(notificationId, projectId);
+  }
+
   function readAllNotifications() {
-    projects.value = projects.value.map((project) => ({
-      ...project,
-      notifications: project.notifications.map((notification) => ({
-        ...notification,
-        readby: [...new Set([...notification.readby, user.value.uuid])],
-      })),
-    }));
+    markAllNotificationsRead();
   }
 
   function canEditComment(comment) {
     return user.value.uuid === comment.author.uuid;
   }
 
+  const hiddenProjects = computed(() => {
+    return user.value?.hiddenProjects || [];
+  });
+
+  const visibleProjects = computed(() => {
+    if (!user.value?.projects) return [];
+    const projectsArray = Array.isArray(user.value.projects)
+      ? user.value.projects
+      : Object.values(user.value.projects);
+    return projectsArray.filter(
+      (project) => !hiddenProjects.value.includes(project.uuid)
+    );
+  });
+
+  function toggleHiddenProject(projectUuid) {
+    if (!user.value) return;
+    const index = user.value.hiddenProjects.indexOf(projectUuid);
+    if (index > -1) {
+      user.value.hiddenProjects.splice(index, 1);
+    } else {
+      user.value.hiddenProjects.push(projectUuid);
+    }
+  }
+
   return {
     user,
     isLogged,
     notifications,
+    hiddenProjects,
+    visibleProjects,
+    // Nouvelles fonctions
+    markNotificationRead,
+    markAllNotificationsRead,
+    toggleHiddenProject,
+    // Anciennes fonctions (rétro-compatibilité)
     readNotification,
     readAllNotifications,
     canEditComment,
diff --git a/src/utils/router.js b/src/utils/router.js
new file mode 100644
index 0000000..ea639f4
--- /dev/null
+++ b/src/utils/router.js
@@ -0,0 +1,43 @@
+import { useLocaleStore } from '../stores/locale';
+
+export function localeRoute(path) {
+  const localeStore = useLocaleStore();
+  const locale = localeStore.currentLocale;
+
+  if (locale === 'en') {
+    return path.startsWith('/en') ? path : `/en${path}`;
+  }
+
+  return path.startsWith('/en') ? path.replace(/^\/en/, '') || '/' : path;
+}
+
+export function addLocalePrefix(path) {
+  const localeStore = useLocaleStore();
+  const locale = localeStore.currentLocale;
+
+  // S'assurer que le path commence par /
+  if (!path.startsWith('/')) {
+    path = '/' + path;
+  }
+
+  // Ajouter /en si locale anglaise et pas déjà présent
+  if (locale === 'en' && !path.startsWith('/en')) {
+    return '/en' + path;
+  }
+
+  // Enlever /en si locale française
+  if (locale === 'fr' && path.startsWith('/en')) {
+    return path.replace(/^\/en/, '') || '/';
+  }
+
+  return path;
+}
+
+export function removeLocalePrefix(path) {
+  return path.replace(/^\/(en|fr)/, '') || '/';
+}
+
+export function getLocaleFromPath(path) {
+  const match = path.match(/^\/(en|fr)/);
+  return match ? match[1] : 'fr';
+}
diff --git a/src/views/Account.vue b/src/views/Account.vue
index d9cc2fa..ca3628b 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -20,13 +20,13 @@
           role="group"
           aria-labelledby="username"
         >
-          <label for="username" class="text-grey-700">Email</label>
+          <label for="username" class="text-grey-700">{{ t('forms.email') }}</label>
           <input
             v-if="isEditingEmail"
             type="email"
             v-model="email"
             id="username"
-            placeholder="mail@exemple.com"
+            :placeholder="t('forms.emailPlaceholder')"
             autocomplete="username"
             class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
             :class="{ invalid: !isEmailValid }"
@@ -55,14 +55,14 @@
             @click="isEditingEmail = true"
             class="btn | w-full text-md"
           >
-            Modifier
+            {{ t('buttons.edit') }}
           </button>
           <button
             v-if="isEditingEmail"
             class="btn btn--secondary | w-full text-md"
             @click="isEditingEmail = false"
           >
-            Annuler
+            {{ t('buttons.cancel') }}
           </button>
         </div>
       </section>
@@ -72,17 +72,15 @@
         class="bg-white rounded-2xl px-16 py-24"
         aria-labelledby="password-label"
       >
-        <h2 class="sr-only" id="password-label">Mot de passe</h2>
+        <h2 class="sr-only" id="password-label">{{ t('forms.password') }}</h2>
         <div class="flow">
           <div class="field | w-full" role="group" aria-labelledby="password">
-            <label for="password" class="text-grey-700"
-              >Nouveau mot de passe</label
-            >
+            <label for="password" class="text-grey-700">{{ t('forms.newPassword') }}</label>
             <input
               :type="isPasswordVisible ? 'text' : 'password'"
               v-model="password"
               id="password"
-              placeholder="Minimum 8 caractères"
+              :placeholder="t('forms.passwordPlaceholder')"
               autocomplete="current-password"
               autocapitalize="none"
               autocorrect="off"
@@ -97,11 +95,7 @@
               :aria-pressed="isPasswordVisible ? 'true' : 'false'"
               aria-controls="password"
               @click="isPasswordVisible = !isPasswordVisible"
-              :title="
-                isPasswordVisible
-                  ? 'Masquer le mot de passe'
-                  : 'Afficher le mot de passe'
-              "
+              :title="isPasswordVisible ? t('buttons.hidePassword') : t('buttons.showPassword')"
             >
               <svg
                 aria-hidden="true"
@@ -121,11 +115,7 @@
                   d="M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z"
                 ></path>
               </svg>
-              <span class="sr-only">{{
-                isPasswordVisible
-                  ? 'Masquer le mot de passe'
-                  : 'Afficher le mot de passe'
-              }}</span>
+              <span class="sr-only">{{ isPasswordVisible ? t('buttons.hidePassword') : t('buttons.showPassword') }}</span>
             </button>
           </div>
           <div
@@ -133,14 +123,12 @@
             role="group"
             aria-labelledby="password-confirm"
           >
-            <label for="passwordConfirm" class="text-grey-700"
-              >Confirmez le nouveau mot de passe…</label
-            >
+            <label for="passwordConfirm" class="text-grey-700">{{ t('forms.confirmPassword') }}</label>
             <input
               :type="isPasswordVisible ? 'text' : 'password'"
               v-model="passwordConfirm"
               id="password-confirm"
-              placeholder="Minimum 8 caractères"
+              :placeholder="t('forms.passwordPlaceholder')"
               autocomplete="current-password"
               autocapitalize="none"
               autocorrect="off"
@@ -155,11 +143,7 @@
               :aria-pressed="isPasswordVisible ? 'true' : 'false'"
               aria-controls="password-confirm"
               @click="isPasswordVisible = !isPasswordVisible"
-              :title="
-                isPasswordVisible
-                  ? 'Masquer le mot de passe'
-                  : 'Afficher le mot de passe'
-              "
+              :title="isPasswordVisible ? t('buttons.hidePassword') : t('buttons.showPassword')"
             >
               <svg
                 aria-hidden="true"
@@ -179,11 +163,7 @@
                   d="M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z"
                 ></path>
               </svg>
-              <span class="sr-only">{{
-                isPasswordVisible
-                  ? 'Masquer le mot de passe'
-                  : 'Afficher le mot de passe'
-              }}</span>
+              <span class="sr-only">{{ isPasswordVisible ? t('buttons.hidePassword') : t('buttons.showPassword') }}</span>
             </button>
           </div>
           <button
@@ -198,17 +178,18 @@
       </section>
 
       <section
+        v-if="user.role !== 'pochet'"
         class="bg-white rounded-2xl px-16 py-24"
         aria-labelledby="client-label"
       >
         <h2 id="client-label" class="text-grey-700 mb-16">
-          {{ user.client ? 'Client' : 'Pas de client associé' }}
+          {{ user.client ? 'Client' : t('account.noClient') }}
         </h2>
         <div class="flex" style="--column-gap: 2rem">
           <template v-if="user.client">
             <img
               :src="user.client.logo"
-              :alt="'logo' + user.client.name"
+              :alt="t('account.clientLogo', { clientName: user.client.name })"
               class="rounded-md"
               width="72"
               height="72"
@@ -219,12 +200,99 @@
       </section>
 
       <section
-        v-if="user.hasOwnProperty('projects')"
+        v-if="
+          user.hasOwnProperty('projects') &&
+          (user.role === 'pochet' || user.role === 'client')
+        "
         class="bg-white rounded-2xl px-16 py-24"
         aria-labelledby="projects-label"
       >
-        <h2 class="sr-only" id="projects-label">Projets</h2>
-        <p class="text-grey-700 mb-16">Nombre de projets</p>
+        <h2 id="projects-label" class="text-grey-700 mb-24">
+          {{ user.role === 'pochet' ? t('account.managedProjects') : t('account.myProjects') }}
+        </h2>
+
+        <div class="projects-list flow" style="--flow-space: 1rem">
+          <div
+            v-for="project in user.role === 'pochet'
+              ? visibleProjects
+              : allProjectsList"
+            :key="project.uuid"
+            class="project-card | flex items-center | bg-grey-800 text-white rounded-lg px-16 py-12"
+            style="--column-gap: 1rem"
+          >
+            <button
+              v-if="user.role === 'pochet'"
+              @click="toggleProject(project.uuid)"
+              class="btn btn--sm btn--primary"
+              :aria-pressed="true"
+              :title="t('buttons.hideProject')"
+              :aria-label="t('buttons.hideProject')"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="16"
+                height="16"
+                fill="currentColor"
+              >
+                <path
+                  d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"
+                ></path>
+              </svg>
+            </button>
+            <div>
+              <p class="font-medium">{{ project.title }}</p>
+              <p class="text-sm text-grey-600">
+                {{ t('account.currentStep') }} {{ t('steps.' + project.step) }}
+              </p>
+            </div>
+          </div>
+
+          <template
+            v-if="user.role === 'pochet' && hiddenProjectsList.length > 0"
+          >
+            <div
+              v-for="project in hiddenProjectsList"
+              :key="project.uuid"
+              class="project-card | flex items-center | bg-grey-100 rounded-lg px-16 py-12"
+              style="--column-gap: 1rem; opacity: 0.5"
+            >
+              <button
+                @click="toggleProject(project.uuid)"
+                class="btn btn--sm btn--primary"
+                :title="t('buttons.showProject')"
+                :aria-label="t('buttons.showProject')"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z"
+                  ></path>
+                </svg>
+              </button>
+              <div>
+                <p class="font-medium">{{ project.title }}</p>
+                <p class="text-sm text-grey-600">
+                  {{ t('account.currentStep') }} {{ t('steps.' + project.step) }}
+                </p>
+              </div>
+            </div>
+          </template>
+        </div>
+      </section>
+
+      <section
+        v-else-if="user.hasOwnProperty('projects')"
+        class="bg-white rounded-2xl px-16 py-24"
+        aria-labelledby="projects-label"
+      >
+        <h2 class="sr-only" id="projects-label">{{ t('brief.projects') }}</h2>
+        <p class="text-grey-700 mb-16">{{ t('account.projectCount') }}</p>
         <p class="text-xl">{{ Object.values(user.projects).length }}</p>
       </section>
     </div>
@@ -233,14 +301,44 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { useUserStore } from '../stores/user';
+import { useApiStore } from '../stores/api';
 import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-const { user } = storeToRefs(useUserStore());
+const userStore = useUserStore();
+const { user, visibleProjects } = storeToRefs(userStore);
+const api = useApiStore();
+const { t } = useI18n();
+
+const hiddenProjectsList = computed(() => {
+  if (!user.value?.projects || !user.value?.hiddenProjects) return [];
+  const projectsArray = Array.isArray(user.value.projects)
+    ? user.value.projects
+    : Object.values(user.value.projects);
+  return projectsArray.filter((project) =>
+    user.value.hiddenProjects.includes(project.uuid)
+  );
+});
+
+const allProjectsList = computed(() => {
+  if (!user.value?.projects) return [];
+  return Array.isArray(user.value.projects)
+    ? user.value.projects
+    : Object.values(user.value.projects);
+});
+
+async function toggleProject(projectUuid) {
+  try {
+    await api.toggleHiddenProject(projectUuid);
+  } catch (error) {
+    console.error(t('errors.toggleProjectFailed'), error);
+  }
+}
 
 // Email
 const email = ref('');
 const emailBtn = ref({
-  text: 'Mettre à jour',
+  text: t('buttons.update'),
   status: 'ready',
 });
 const isEditingEmail = ref(false);
@@ -249,7 +347,7 @@ const isEmailValid = computed(() => {
   return emailRegex.test(email.value);
 });
 async function updateEmail() {
-  emailBtn.value.text = 'En cours…';
+  emailBtn.value.text = t('auth.inProgress');
   emailBtn.value.status = 'pending';
 
   const headers = {
@@ -262,11 +360,11 @@ async function updateEmail() {
   const json = await response.json();
 
   if (json.status === 'success') {
-    emailBtn.value.text = 'Mise à jour réussie';
+    emailBtn.value.text = t('auth.updateSuccess');
     emailBtn.value.status = 'succeed';
 
     setTimeout(() => {
-      emailBtn.value.text = 'Mettre à jour';
+      emailBtn.value.text = t('buttons.update');
       emailBtn.value.status = 'ready';
       isEditingEmail.value = false;
     }, 1500);
@@ -278,7 +376,7 @@ async function updateEmail() {
 // Password
 const password = ref('');
 const passwordBtn = ref({
-  text: 'Mettre à jour',
+  text: t('buttons.update'),
   status: 'ready',
 });
 const passwordConfirm = ref('');
@@ -289,7 +387,7 @@ const isPasswordConfirmed = computed(() => {
   );
 });
 async function updatePassword() {
-  passwordBtn.value.text = 'en cours…';
+  passwordBtn.value.text = t('auth.updateInProgress');
   passwordBtn.value.status = 'pending';
 
   const headers = {
@@ -304,11 +402,11 @@ async function updatePassword() {
   if (json.status === 'success') {
     password.value = '';
     passwordConfirm.value = '';
-    passwordBtn.value.text = 'mise à jour réussie';
+    passwordBtn.value.text = t('auth.updateSuccess');
     passwordBtn.value.status = 'succeed';
 
     setTimeout(() => {
-      passwordBtn.value.text = 'Mettre à jour';
+      passwordBtn.value.text = t('buttons.update');
       passwordBtn.value.status = 'ready';
     }, 1500);
   } else {
diff --git a/src/views/Brief.vue b/src/views/Brief.vue
index acc132f..e6c9290 100644
--- a/src/views/Brief.vue
+++ b/src/views/Brief.vue
@@ -7,7 +7,7 @@
         data-icon="arrow-left"
         aria-labelledby="back-to-project"
       >
-        <span id="back-to-project">Retour au projet</span>
+        <span id="back-to-project">{{ t('buttons.backToProject') }}</span>
       </router-link>
       <button
         class="btn | ml-auto"
@@ -18,56 +18,27 @@
         "
         :title="
           !page.hasOwnProperty('moodboard') || page.moodboard.length === 0
-            ? 'Ajoutez au moins une image'
+            ? t('buttons.validateMinimum')
             : undefined
         "
       >
-        Valider et envoyer le brief
+        {{ t('buttons.validate') }}
       </button>
     </header>
-    <component :is="stepsComponents[currentStep]" @update:step="changeStep" />
+    <Images />
   </main>
 </template>
 <script setup>
-import { ref } from 'vue';
-import Intro from '../components/project/brief/Intro.vue';
-import ModeSelection from '../components/project/brief/ModeSelection.vue';
 import Images from '../components/project/brief/Images.vue';
-import TitledPdfWrapper from '../components/project/TitledPdfWrapper.vue';
 import { usePageStore } from '../stores/page';
 import { storeToRefs } from 'pinia';
 import { useApiStore } from '../stores/api';
-import { useRoute } from 'vue-router';
-
-const stepsComponents = {
-  Intro,
-  ModeSelection,
-  Images,
-  TitledPdfWrapper,
-};
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const { page } = storeToRefs(usePageStore());
 const api = useApiStore();
 
-const currentStep = ref(setInitialStep());
-
-function changeStep(stepName) {
-  currentStep.value = stepName;
-}
-
-function setInitialStep() {
-  if (useRoute().query.step === 'images') {
-    return 'Images';
-  }
-  const hasPDF = page.value?.content?.pdf?.length !== 0;
-  const hasImages =
-    page.value.content?.moodboard.length !== 0 ||
-    page.value.content.description.length !== 0;
-  const isEmpty = !hasPDF && !hasImages;
-  if (isEmpty) return 'Intro';
-  if (hasImages) return 'Images';
-}
-
 function validate() {
   api.validateBrief(page.value.uri).then((res) => {
     location.href = '/' + page.value.parent;
diff --git a/src/views/Inspirations.vue b/src/views/Inspirations.vue
index e2732cc..d5933e9 100644
--- a/src/views/Inspirations.vue
+++ b/src/views/Inspirations.vue
@@ -1,7 +1,7 @@
 <template>
   <main v-if="page.inspirations" class="flex flex-col">
     <header class="flex">
-      <h2 id="tabslist" class="sr-only">Inspirations</h2>
+      <h2 id="tabslist" class="sr-only">{{ t('inspirations.title') }}</h2>
       <Tabs :tabs="tabs" @update:currentTab="changeTab" />
       <Selector
         v-if="page.inspirations.length > 1"
@@ -36,6 +36,9 @@ import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 import { usePageStore } from "../stores/page";
 import { storeToRefs } from "pinia";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 // Stores
 const { page } = storeToRefs(usePageStore());
@@ -60,14 +63,14 @@ const favoriteImages = computed(() =>
 
 const tabs = computed(() => [
   {
-    label: "Les Inspirations",
+    label: t('inspirations.title'),
     id: "all",
     icon: null,
     count: currentInspiration.value.media.length,
     isActive: currentTab.value === "all",
   },
   {
-    label: "Mes Favoris",
+    label: t('inspirations.favorites'),
     id: "favorites",
     icon: "favorite",
     count: favoriteImages.value.length,
diff --git a/src/views/Login.vue b/src/views/Login.vue
index a531ce4..316f235 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -6,7 +6,7 @@
       style="--row-gap: 1rem; max-width: 24em"
     >
       <div class="field | w-full" role="group" aria-labelledby="username">
-        <label for="username">Email</label>
+        <label for="username">{{ t('forms.email') }}</label>
         <input
           @input="updateEmail"
           type="email"
@@ -17,13 +17,13 @@
           autocorrect="off"
           spellcheck="false"
           class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
-          placeholder="mail@exemple.com"
+          :placeholder="t('forms.emailPlaceholder')"
           :aria-invalid="{ true: !isValidEmail }"
           required
         />
       </div>
       <div class="field | w-full" role="group" aria-labelledby="password">
-        <label for="password">Mot de passe</label>
+        <label for="password">{{ t('forms.password') }}</label>
         <input
           :type="isPasswordVisible ? 'text' : 'password'"
           v-model="password"
@@ -41,18 +41,18 @@
           :aria-pressed="isPasswordVisible ? 'true' : 'false'"
           aria-controls="password"
           @click="isPasswordVisible = !isPasswordVisible"
-          :title="isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'"
+          :title="isPasswordVisible ? t('buttons.hidePassword') : t('buttons.showPassword')"
         >
           <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
             <path v-if="isPasswordVisible" d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path>
             <path v-else d="M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z"></path>
           </svg>
-          <span class="sr-only">{{ isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe' }}</span>
+          <span class="sr-only">{{ isPasswordVisible ? t('buttons.hidePassword') : t('buttons.showPassword') }}</span>
         </button>
       </div>
       <p class="error" v-if="errorMessage" v-html="errorMessage"></p>
       <div class="sr-only" id="announce" aria-live="assertive">
-        {{ isPasswordVisible ? 'Mot de passe affiché' : 'Mot de passe masqué' }}
+        {{ isPasswordVisible ? t('auth.passwordShown') : t('auth.passwordHidden') }}
       </div>
       <button
         @click="login"
@@ -68,7 +68,9 @@
 </template>
 <script setup>
 import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const email = ref('');
 const isValidEmail = ref(false);
 const password = ref('');
@@ -76,7 +78,7 @@ const isPasswordVisible = ref(false);
 const errorMessage = ref(null);
 
 const submitBtn = ref({
-  message: 'Connexion',
+  message: t('auth.login'),
   state: 'ready',
 });
 
@@ -90,10 +92,10 @@ function updateEmail(event) {
 
 async function login() {
   if (email.value.length === 0 || password.value.length === 0) {
-    errorMessage.value = 'Veuillez remplir les champs.';
+    errorMessage.value = t('auth.fillFields');
   }
 
-  submitBtn.value.message = 'En cours…';
+  submitBtn.value.message = t('auth.inProgress');
   submitBtn.value.state = 'pending';
 
   const headers = {
@@ -114,7 +116,7 @@ async function login() {
     }
   } else {
     errorMessage.value = json.message;
-    submitBtn.value.message = 'Réessayer';
+    submitBtn.value.message = t('buttons.retry');
     submitBtn.value.state = 'ready';
   }
 }
diff --git a/src/views/Notifications.vue b/src/views/Notifications.vue
index c7db5b1..af61e6c 100644
--- a/src/views/Notifications.vue
+++ b/src/views/Notifications.vue
@@ -8,7 +8,7 @@
         :disabled="!sortedNotifications.length"
         @click="readAll()"
       >
-        Marquer tout come lu
+        {{ t('buttons.markAllAsRead') }}
       </button>
     </header>
     <div
@@ -32,9 +32,9 @@
         />
       </svg>
       <p v-if="currentTab === 'all'">
-        Vous n’avez pas de nouvelles notifications
+        {{ t('notifications.none') }}
       </p>
-      <p v-else>Vous n’avez pas de notifications non lues</p>
+      <p v-else>{{ t('notifications.noneUnread') }}</p>
     </div>
     <section v-else class="notifications | flow">
       <template
@@ -67,9 +67,11 @@ import Content from '../components/notifications/Content.vue';
 import { useRouter } from 'vue-router';
 import ProjectRequest from '../components/notifications/ProjectRequest.vue';
 import AppointmentRequest from '../components/notifications/AppointmentRequest.vue';
+import { useI18n } from 'vue-i18n';
 
 dayjs.locale('fr');
 
+const { t } = useI18n();
 const userStore = useUserStore();
 const router = useRouter();
 const { notifications } = storeToRefs(useUserStore());
@@ -78,14 +80,14 @@ const currentTab = ref('all');
 const tabs = computed(() => {
   return [
     {
-      label: 'Tout',
+      label: t('notifications.all'),
       id: 'all',
       icon: null,
       count: null,
       isActive: currentTab.value === 'all',
     },
     {
-      label: 'Non lu',
+      label: t('notifications.unread'),
       id: 'unread',
       icon: null,
       count: null,
@@ -119,14 +121,24 @@ function changeTab(newValue) {
 
 function readAll() {
   try {
-    api.readAllNotifications();
+    api.markAllNotificationsRead();
   } catch (error) {
-    console.log('Could not read all notifications : ', error);
+    console.log(t('errors.readAllNotificationsFailed'), error);
   }
 }
 
 // Functions
-function handleNotificationClick(notification) {
+async function handleNotificationClick(notification) {
+  // Marquer la notification comme lue
+  if (!notification.isRead) {
+    try {
+      await api.markNotificationRead(notification);
+    } catch (error) {
+      console.log(t('errors.markNotificationFailed'), error);
+    }
+  }
+
+  // Naviguer vers la cible
   const href =
     notification.type === 'appointment-request'
       ? getHref(notification) + '?tab=designToLight'
@@ -141,6 +153,11 @@ function handleNotificationClick(notification) {
 function getHref(notification) {
   const uri = notification.location.page.uri;
 
+  // Pour les notifications de type "content" (brief validé), utiliser dialogUri si présent
+  if (notification.type === 'content' && notification.dialogUri) {
+    return notification.dialogUri;
+  }
+
   const isDocumentBrief =
     notification.location.page.template === 'client-brief' &&
     notification.location?.file?.type === 'document';
diff --git a/src/views/Reunions.vue b/src/views/Reunions.vue
index 52dd847..979c25d 100644
--- a/src/views/Reunions.vue
+++ b/src/views/Reunions.vue
@@ -8,8 +8,8 @@
       <svg aria-hidden="true" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6.25 8.75C5.58696 8.75 4.95107 9.01339 4.48223 9.48223C4.01339 9.95107 3.75 10.587 3.75 11.25V33.75C3.75 34.413 4.01339 35.0489 4.48223 35.5178C4.95107 35.9866 5.58696 36.25 6.25 36.25H33.75C34.413 36.25 35.0489 35.9866 35.5178 35.5178C35.9866 35.0489 36.25 34.413 36.25 33.75V11.25C36.25 10.587 35.9866 9.95107 35.5178 9.48223C35.0489 9.01339 34.413 8.75 33.75 8.75H28.75M3.75 18.75H36.25M11.25 3.75V13.75M28.75 3.75V13.75M11.25 8.75H23.75" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
-      <p class="mb-32">Vous n’avez aucune réunion programmée</p>
-      <button class="btn">Demander un RDV</button>
+      <p class="mb-32">{{ t('meetings.none') }}</p>
+      <button class="btn">{{ t('buttons.requestMeeting') }}</button>
     </div>
   </main>
 </template>
@@ -21,21 +21,23 @@ import { usePageStore } from "../stores/page"
 import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const { page } = storeToRefs(usePageStore());
 const user = useUserStore().user;
 const currentTab = ref("future");
 const tabs = computed(() => {
   return [
     {
-      label: "À venir",
+      label: t('meetings.upcoming'),
       id: "future",
       icon: null,
       count: null,
       isActive: currentTab.value === "future",
     },
     {
-      label: "Passées",
+      label: t('meetings.past'),
       id: "past",
       icon: null,
       count: null,
diff --git a/vite.config.js b/vite.config.js
index 154116f..7de582b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
       minify: mode === 'production',
     },
     server: {
+      cors: true,
       watch: {
         ignored: [
           '**/node_modules/**',