From 792357803b129c15766a0114819e982ea083efb5 Mon Sep 17 00:00:00 2001
From: Adrien Carpentier <me@adriencarpentier.com>
Date: Wed, 4 Dec 2024 11:24:43 +0100
Subject: [PATCH] style: lint and format code

---
 frontend/components.json                      |  34 ++--
 frontend/postcss.config.js                    |  10 +-
 frontend/src/App.vue                          |  40 ++---
 frontend/src/components/HeaderComponent.vue   |   6 +-
 frontend/src/components/HistogramChart.vue    | 154 +++++++++---------
 frontend/src/components/MapComponent.vue      |  13 +-
 frontend/src/components/MobileMessage.vue     |   4 +-
 .../src/components/QuestionsComponent.vue     |  68 ++++----
 frontend/src/components/SidebarComponent.vue  | 107 ++++++------
 frontend/src/components/TableauComponent.vue  |   4 +-
 .../components/map/MapTooltipComponent.vue    |  15 +-
 frontend/src/components/sidebar/TileTwo.vue   | 119 +++++++-------
 frontend/src/components/ui/card/Card.vue      |   8 +-
 .../src/components/ui/card/CardContent.vue    |   8 +-
 .../components/ui/card/CardDescription.vue    |   8 +-
 .../src/components/ui/card/CardFooter.vue     |   8 +-
 .../src/components/ui/card/CardHeader.vue     |   8 +-
 frontend/src/components/ui/card/CardTitle.vue |   8 +-
 frontend/src/components/ui/card/index.ts      |  12 +-
 frontend/src/index.css                        | 100 ++++++------
 frontend/src/main.ts                          |   4 +-
 frontend/src/shims-vue.d.ts                   |  10 +-
 frontend/src/store/appStore.ts                |  68 ++++----
 frontend/src/utils.ts                         |   6 +-
 frontend/tailwind.config.js                   |   2 +-
 frontend/tsconfig.json                        |   5 +-
 frontend/vite.config.ts                       |   4 +-
 27 files changed, 432 insertions(+), 401 deletions(-)

diff --git a/frontend/components.json b/frontend/components.json
index 75e5230..4c9826d 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -1,18 +1,18 @@
 {
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "default",
-  "typescript": true,
-  "tsConfigPath": "./tsconfig.json",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/index.css",
-    "baseColor": "slate",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "framework": "vite",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/utils"
-  }
-}
\ No newline at end of file
+	"$schema": "https://shadcn-vue.com/schema.json",
+	"style": "default",
+	"typescript": true,
+	"tsConfigPath": "./tsconfig.json",
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/index.css",
+		"baseColor": "slate",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"framework": "vite",
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/utils"
+	}
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 88a3558..e873f1a 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  }
\ No newline at end of file
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8ca5f59..5fe8274 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,32 +9,32 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 import HeaderComponent from "./components/HeaderComponent.vue";
 import MainComponent from "./components/MainComponent.vue";
 import MobileMessage from "./components/MobileMessage.vue"; // Assurez-vous que ce fichier existe
 
 export default defineComponent({
-  name: "App",
-  components: {
-    HeaderComponent,
-    MainComponent,
-    MobileMessage,
-  },
-  setup() {
-    const isMobile = ref(false);
+	name: "App",
+	components: {
+		HeaderComponent,
+		MainComponent,
+		MobileMessage,
+	},
+	setup() {
+		const isMobile = ref(false);
 
-    // Détecter si l'utilisateur est sur un appareil mobile
-    onMounted(() => {
-      const userAgent = window.navigator.userAgent.toLowerCase();
-      isMobile.value =
-        /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(
-          userAgent
-        );
-    });
+		// Détecter si l'utilisateur est sur un appareil mobile
+		onMounted(() => {
+			const userAgent = window.navigator.userAgent.toLowerCase();
+			isMobile.value =
+				/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(
+					userAgent,
+				);
+		});
 
-    return { isMobile };
-  },
+		return { isMobile };
+	},
 });
 </script>
 
@@ -77,4 +77,4 @@ body, html, #app {
   font-size: 1rem;
   margin: 10px 0 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/HeaderComponent.vue b/frontend/src/components/HeaderComponent.vue
index 1a90ae3..4c79364 100644
--- a/frontend/src/components/HeaderComponent.vue
+++ b/frontend/src/components/HeaderComponent.vue
@@ -86,7 +86,7 @@ import tableGreyIcon from "@/assets/tablegrey.svg";
 interface AddressFeature {
 	banId: string;
 	label: string;
-  citycode: string;
+	citycode: string;
 }
 
 interface Geometry {
@@ -142,7 +142,7 @@ export default defineComponent({
 
 		const goToAddress = (coordinates: Array<number>, code: string) => {
 			appStore.updateAddress(coordinates);
-      appStore.updateCodeInsee(code);
+			appStore.updateCodeInsee(code);
 			resultsAdresses.value = null;
 		};
 
@@ -284,4 +284,4 @@ export default defineComponent({
   background-color: #ebebeb;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/HistogramChart.vue b/frontend/src/components/HistogramChart.vue
index 16d5232..4ee5973 100644
--- a/frontend/src/components/HistogramChart.vue
+++ b/frontend/src/components/HistogramChart.vue
@@ -1,91 +1,91 @@
 <script>
 import {
-  Chart,
-  BarController,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-  Title,
-  Tooltip,
-  Legend,
+	BarController,
+	BarElement,
+	CategoryScale,
+	Chart,
+	Legend,
+	LinearScale,
+	Title,
+	Tooltip,
 } from "chart.js";
 
 Chart.register(
-  BarController,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-  Title,
-  Tooltip,
-  Legend
+	BarController,
+	BarElement,
+	CategoryScale,
+	LinearScale,
+	Title,
+	Tooltip,
+	Legend,
 );
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  name: "HistogramChart",
-  props: {
-    chartData: {
-      type: Array,
-      required: true,
-    },
-    colorHisto: {
-      type: String,
-      required: true,
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.createChart();
-    });
-  },
-  methods: {
-    createChart() {
-      if (!this.$refs.histogramChart) {
-        console.error("Canvas reference is not available.");
-        return;
-      }
+	name: "HistogramChart",
+	props: {
+		chartData: {
+			type: Array,
+			required: true,
+		},
+		colorHisto: {
+			type: String,
+			required: true,
+		},
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.createChart();
+		});
+	},
+	methods: {
+		createChart() {
+			if (!this.$refs.histogramChart) {
+				console.error("Canvas reference is not available.");
+				return;
+			}
 
-      const ctx = this.$refs.histogramChart.getContext("2d");
-      const labels = this.chartData.map((item) => item.x);
-      const values = this.chartData.map((item) => item.y);
+			const ctx = this.$refs.histogramChart.getContext("2d");
+			const labels = this.chartData.map((item) => item.x);
+			const values = this.chartData.map((item) => item.y);
 
-      new Chart(ctx, {
-        type: "bar",
-        data: {
-          labels: labels,
-          datasets: [
-            {
-              label: "Transactions",
-              data: values,
-              backgroundColor: this.colorHisto,
-              borderColor: this.colorHisto,
-              borderWidth: 1,
-            },
-          ],
-        },
-        options: {
-          responsive: true,
-          plugins: {
-            legend: {
-              display: false,
-            },
-            tooltip: {
-              enabled: true,
-            },
-          },
-          scales: {
-            x: {
-              type: "category",
-            },
-            y: {
-              beginAtZero: true,
-            },
-          },
-          ...this.chartOptions,
-        },
-      });
-    },
-  },
+			new Chart(ctx, {
+				type: "bar",
+				data: {
+					labels: labels,
+					datasets: [
+						{
+							label: "Transactions",
+							data: values,
+							backgroundColor: this.colorHisto,
+							borderColor: this.colorHisto,
+							borderWidth: 1,
+						},
+					],
+				},
+				options: {
+					responsive: true,
+					plugins: {
+						legend: {
+							display: false,
+						},
+						tooltip: {
+							enabled: true,
+						},
+					},
+					scales: {
+						x: {
+							type: "category",
+						},
+						y: {
+							beginAtZero: true,
+						},
+					},
+					...this.chartOptions,
+				},
+			});
+		},
+	},
 });
 </script>
 
diff --git a/frontend/src/components/MapComponent.vue b/frontend/src/components/MapComponent.vue
index 09dbca0..2020eb1 100644
--- a/frontend/src/components/MapComponent.vue
+++ b/frontend/src/components/MapComponent.vue
@@ -38,7 +38,6 @@ export default defineComponent({
 		let displayDepLayer = true;
 		const tooltipTitle = ref(""); // Initialize as an empty string
 
-
 		const tooltip = ref({
 			top: "0px",
 			left: "0px",
@@ -131,7 +130,7 @@ export default defineComponent({
 						"fill-color": "rgba(0, 0, 255, 0.2)",
 					},
 				});
-				
+
 				mapInstance.on("mousemove", "departements_fill", (e: any) => {
 					tooltipTitle.value = e.features[0]["properties"]["nom"];
 					const depCode = e.features[0]["properties"]["code"];
@@ -185,17 +184,19 @@ export default defineComponent({
 
 		watch(
 			() => appStore.codeInsee,
-			(newValue: string) => {	
+			(newValue: string) => {
 				fetch(
-					"https://object.data.gouv.fr/dataeng-open/dev/parcelles/" + appStore.codeInsee + ".json"
+					"https://object.data.gouv.fr/dataeng-open/dev/parcelles/" +
+						appStore.codeInsee +
+						".json",
 				)
 					.then((response) => {
 						return response.json();
 					})
 					.then((data) => {
-						appStore.updateComData(data)
+						appStore.updateComData(data);
 					});
-				},
+			},
 		);
 
 		watch(
diff --git a/frontend/src/components/MobileMessage.vue b/frontend/src/components/MobileMessage.vue
index 565feeb..c2bed9d 100644
--- a/frontend/src/components/MobileMessage.vue
+++ b/frontend/src/components/MobileMessage.vue
@@ -10,7 +10,7 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  name: "MobileMessage",
+	name: "MobileMessage",
 });
 </script>
 
@@ -45,4 +45,4 @@ p {
   font-size: 1rem;
   margin: 10px 0 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/QuestionsComponent.vue b/frontend/src/components/QuestionsComponent.vue
index d78d8d4..879201a 100644
--- a/frontend/src/components/QuestionsComponent.vue
+++ b/frontend/src/components/QuestionsComponent.vue
@@ -1,35 +1,45 @@
 <script setup lang="ts">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
 
-const defaultValue = 'item-1'
+const defaultValue = "item-1";
 
 const accordionItems = [
-  { 
-    value: 'item-1', 
-    title: 'TerrainsConnus ? Quesaco ?', 
-    content: '<b>TerrainsConnus</b> permet de rechercher et d’analyser les ventes de parcelles en France par typologie (terres agricoles, bois, vignes, etc.), en combinant les données ouvertes des <b>Demandes de Valeurs Foncières (DVF)</b> et du <b>Registre Parcellaire Graphique (RPG)</b>. L’application offre une vision claire des transactions foncières pour aider agriculteurs, collectivités et investisseurs à mieux comprendre et exploiter le marché foncier.' 
-  },
-  { 
-    value: 'item-2', 
-    title: 'D’où viennent les données ?', 
-    content: '<p>L\'application exploite trois sources de données publiques :</p><br /><ul><li><b>Demandes de Valeurs Foncières (DVF)</b> :<br />Les données DVF proviennent du Ministère de l\'Économie, des Finances et de la Souveraineté Industrielle et Numérique. Elles regroupent les informations portant sur les valeurs foncières déclarées à l’occasion des mutations immobilières (ventes de biens bâtis et non bâtis) enregistrées par la Direction Générale des Finances Publiques (DGFiP). Ces données incluent des informations précieuses telles que :<br /><ul><li>La nature de la mutation (vente, adjudication, expropriation, échange),</li><li>La valeur foncière (prix de la mutation),</li><li>La surface de la parcelle cadastrale,</li><li>La nature du bien (terrain, maison, immeuble),</li><li>La localisation géographique précise.</li></ul><br />Les données DVF permettent d’avoir une vue d’ensemble sur le marché foncier en France et sont mises à jour régulièrement pour refléter les transactions récentes.<br /><b>L’application présente uniquement les mutations ayant eu lieu sur des terrains agricoles, c’est-à-dire correspondant à l’une des natures de cultures suivantes : landes ; landes boisées ; prés ; pâtures ou pâturages ; pacages ou pâtis ; prés d’embouche ; herbages ; prés ; pâtures ou herbages plantes ; sols ; terres ; terres plantées ; vergers ; vignes.</b><br />Lien vers les données DVF : https://www.data.gouv.fr/fr/datasets/demandes-de-valeurs-foncieres/<br /><br /><b>Registre Parcellaire Graphique (RPG)</b><br />Le RPG est une base de données géographique créée par l’Agence de Services et de Paiement (ASP). Il contient les contours des parcelles agricoles déclarées chaque année dans le cadre de la Politique Agricole Commune (PAC). Les informations disponibles dans le RPG incluent :<br /><ul><li>Les limites géographiques des parcelles agricoles,</li>Leur typologie (cultures, pâturages, etc.),<li></li>Les déclarations effectuées par les exploitants agricoles.<li></li></ul><br />Le RPG est un outil essentiel pour analyser l’utilisation des terres agricoles en France et suivre les évolutions des surfaces dédiées à différentes typologies de cultures.<br /><b>L’application mobilise le RPG pour apporter une précision supplémentaire sur les cultures présentes sur la parcelle ayant fait l’objet de la mutation.</b><br />Lien vers les données du RPG : <a href="https://www.data.gouv.fr/fr/datasets/registre-parcellaire-graphique-rpg-contours-des-parcelles-et-ilots-culturaux-et-leur-groupe-de-cultures-majoritaire/">https://www.data.gouv.fr/fr/datasets/registre-parcellaire-graphique-rpg-contours-des-parcelles-et-ilots-culturaux-et-leur-groupe-de-cultures-majoritaire/</a>'
-  },
-  { 
-    value: 'item-3', 
-    title: 'À qui s’adresse l’application ?', 
-    content: '<p><b>TerrainsConnus</b> est une application utile pour :</p><ul><li><b>Entreprises du secteur immobilier</b> : analyser les tendances et identifier des opportunités.</li><li><b>Entreprises agricoles</b> : trouver des terres adaptées et planifier leurs investissements.</li><li><b>Collectivités territoriales</b> : suivre les transactions foncières et faciliter l’aménagement.</li><li><b>Citoyens curieux</b> : explorer les ventes et comprendre leur environnement foncier.</li></ul>'
-  },
-  { 
-    value: 'item-4', 
-    title: 'Pourquoi sélectionner les parcelles par typologie ?', 
-    content: 'La typologie des parcelles permet d’identifier précisément leur nature (terres agricoles, bois, vignes, etc.) et leur usage. Cela offre une vision claire pour analyser le marché foncier, comparer les prix, et mieux comprendre l’utilisation des terres, que ce soit pour investir, planifier ou préserver les ressources agricoles.' 
-  },
-  { 
-    value: 'item-5', 
-    title: 'Qui sommes-nous ?', 
-    content: '<p><b>TerrainsConnus</b> est une application née en décembre 2024 lors d’un hackathon, créée par une équipe de la communauté <b>data.gouv.fr</b> accompagnée de bénévoles. L’objectif est de rendre les données foncières et agricoles accessibles à tous en exploitant les données ouvertes du <b>DVF</b> et du <b>RPG</b>.</p>'
-  },
-]
+	{
+		value: "item-1",
+		title: "TerrainsConnus ? Quesaco ?",
+		content:
+			"<b>TerrainsConnus</b> permet de rechercher et d’analyser les ventes de parcelles en France par typologie (terres agricoles, bois, vignes, etc.), en combinant les données ouvertes des <b>Demandes de Valeurs Foncières (DVF)</b> et du <b>Registre Parcellaire Graphique (RPG)</b>. L’application offre une vision claire des transactions foncières pour aider agriculteurs, collectivités et investisseurs à mieux comprendre et exploiter le marché foncier.",
+	},
+	{
+		value: "item-2",
+		title: "D’où viennent les données ?",
+		content:
+			"<p>L'application exploite trois sources de données publiques :</p><br /><ul><li><b>Demandes de Valeurs Foncières (DVF)</b> :<br />Les données DVF proviennent du Ministère de l'Économie, des Finances et de la Souveraineté Industrielle et Numérique. Elles regroupent les informations portant sur les valeurs foncières déclarées à l’occasion des mutations immobilières (ventes de biens bâtis et non bâtis) enregistrées par la Direction Générale des Finances Publiques (DGFiP). Ces données incluent des informations précieuses telles que :<br /><ul><li>La nature de la mutation (vente, adjudication, expropriation, échange),</li><li>La valeur foncière (prix de la mutation),</li><li>La surface de la parcelle cadastrale,</li><li>La nature du bien (terrain, maison, immeuble),</li><li>La localisation géographique précise.</li></ul><br />Les données DVF permettent d’avoir une vue d’ensemble sur le marché foncier en France et sont mises à jour régulièrement pour refléter les transactions récentes.<br /><b>L’application présente uniquement les mutations ayant eu lieu sur des terrains agricoles, c’est-à-dire correspondant à l’une des natures de cultures suivantes : landes ; landes boisées ; prés ; pâtures ou pâturages ; pacages ou pâtis ; prés d’embouche ; herbages ; prés ; pâtures ou herbages plantes ; sols ; terres ; terres plantées ; vergers ; vignes.</b><br />Lien vers les données DVF : https://www.data.gouv.fr/fr/datasets/demandes-de-valeurs-foncieres/<br /><br /><b>Registre Parcellaire Graphique (RPG)</b><br />Le RPG est une base de données géographique créée par l’Agence de Services et de Paiement (ASP). Il contient les contours des parcelles agricoles déclarées chaque année dans le cadre de la Politique Agricole Commune (PAC). Les informations disponibles dans le RPG incluent :<br /><ul><li>Les limites géographiques des parcelles agricoles,</li>Leur typologie (cultures, pâturages, etc.),<li></li>Les déclarations effectuées par les exploitants agricoles.<li></li></ul><br />Le RPG est un outil essentiel pour analyser l’utilisation des terres agricoles en France et suivre les évolutions des surfaces dédiées à différentes typologies de cultures.<br /><b>L’application mobilise le RPG pour apporter une précision supplémentaire sur les cultures présentes sur la parcelle ayant fait l’objet de la mutation.</b><br />Lien vers les données du RPG : <a href=\"https://www.data.gouv.fr/fr/datasets/registre-parcellaire-graphique-rpg-contours-des-parcelles-et-ilots-culturaux-et-leur-groupe-de-cultures-majoritaire/\">https://www.data.gouv.fr/fr/datasets/registre-parcellaire-graphique-rpg-contours-des-parcelles-et-ilots-culturaux-et-leur-groupe-de-cultures-majoritaire/</a>",
+	},
+	{
+		value: "item-3",
+		title: "À qui s’adresse l’application ?",
+		content:
+			"<p><b>TerrainsConnus</b> est une application utile pour :</p><ul><li><b>Entreprises du secteur immobilier</b> : analyser les tendances et identifier des opportunités.</li><li><b>Entreprises agricoles</b> : trouver des terres adaptées et planifier leurs investissements.</li><li><b>Collectivités territoriales</b> : suivre les transactions foncières et faciliter l’aménagement.</li><li><b>Citoyens curieux</b> : explorer les ventes et comprendre leur environnement foncier.</li></ul>",
+	},
+	{
+		value: "item-4",
+		title: "Pourquoi sélectionner les parcelles par typologie ?",
+		content:
+			"La typologie des parcelles permet d’identifier précisément leur nature (terres agricoles, bois, vignes, etc.) et leur usage. Cela offre une vision claire pour analyser le marché foncier, comparer les prix, et mieux comprendre l’utilisation des terres, que ce soit pour investir, planifier ou préserver les ressources agricoles.",
+	},
+	{
+		value: "item-5",
+		title: "Qui sommes-nous ?",
+		content:
+			"<p><b>TerrainsConnus</b> est une application née en décembre 2024 lors d’un hackathon, créée par une équipe de la communauté <b>data.gouv.fr</b> accompagnée de bénévoles. L’objectif est de rendre les données foncières et agricoles accessibles à tous en exploitant les données ouvertes du <b>DVF</b> et du <b>RPG</b>.</p>",
+	},
+];
 </script>
 
 <template>
@@ -96,4 +106,4 @@ const accordionItems = [
 .tally-button:hover {
   background-color: #475569;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/SidebarComponent.vue b/frontend/src/components/SidebarComponent.vue
index 075c77e..31d5f6b 100644
--- a/frontend/src/components/SidebarComponent.vue
+++ b/frontend/src/components/SidebarComponent.vue
@@ -9,60 +9,69 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, watch } from "vue";
+import { useAppStore } from "@/store/appStore.ts";
+import { defineComponent, onMounted, ref, watch } from "vue";
 import TileOne from "./sidebar/TileOne.vue";
 import TileTwo from "./sidebar/TileTwo.vue";
-import { useAppStore } from '@/store/appStore.ts';
 
 export default defineComponent({
-  name: "SidebarComponent",
-  components: {
-    TileOne,
-    TileTwo,
-  },
-  setup() {
-    const appStore = useAppStore();
-
-    const loading = ref(true);
-    const selectedNatureCulture = ref("P");
-
-    const updateSelectedNatureCulture = (value: string) => {
-      selectedNatureCulture.value = value;
-      appStore.updateOption(value);
-    };
-
-    onMounted(() => {
-      setTimeout(() => {
-        loading.value = false;
-      }, 1000);
-    });
-
-    const toto = ref(1)
-    const tutu = ref([1,1])
-    const tata = ref({})
-
-		watch(() => appStore.mapZoom, (newValue: number) => {
-			toto.value = newValue;
+	name: "SidebarComponent",
+	components: {
+		TileOne,
+		TileTwo,
+	},
+	setup() {
+		const appStore = useAppStore();
+
+		const loading = ref(true);
+		const selectedNatureCulture = ref("P");
+
+		const updateSelectedNatureCulture = (value: string) => {
+			selectedNatureCulture.value = value;
+			appStore.updateOption(value);
+		};
+
+		onMounted(() => {
+			setTimeout(() => {
+				loading.value = false;
+			}, 1000);
 		});
 
-    watch(() => appStore.address, (newValue: Array<number>) => {
-      tutu.value = newValue;
-    });
-
-    watch(() => appStore.comData, (newValue: Object) => {
-      tata.value = newValue;
-    });
-
-    return {
-      loading,
-      selectedNatureCulture,
-      updateSelectedNatureCulture,
-      appStore,
-      toto,
-      tutu,
-      tata,
-    };
-  },
+		const toto = ref(1);
+		const tutu = ref([1, 1]);
+		const tata = ref({});
+
+		watch(
+			() => appStore.mapZoom,
+			(newValue: number) => {
+				toto.value = newValue;
+			},
+		);
+
+		watch(
+			() => appStore.address,
+			(newValue: Array<number>) => {
+				tutu.value = newValue;
+			},
+		);
+
+		watch(
+			() => appStore.comData,
+			(newValue: Object) => {
+				tata.value = newValue;
+			},
+		);
+
+		return {
+			loading,
+			selectedNatureCulture,
+			updateSelectedNatureCulture,
+			appStore,
+			toto,
+			tutu,
+			tata,
+		};
+	},
 });
 </script>
 
@@ -109,4 +118,4 @@ export default defineComponent({
   position: relative;
   z-index: 2;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/TableauComponent.vue b/frontend/src/components/TableauComponent.vue
index 06490be..6aaa945 100644
--- a/frontend/src/components/TableauComponent.vue
+++ b/frontend/src/components/TableauComponent.vue
@@ -18,7 +18,7 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  name: "TableauComponent",
+	name: "TableauComponent",
 });
 </script>
 
@@ -62,4 +62,4 @@ export default defineComponent({
   border: none; /* Supprime les bordures autour de l'iframe */
   background: transparent;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/map/MapTooltipComponent.vue b/frontend/src/components/map/MapTooltipComponent.vue
index d950324..dddbc64 100644
--- a/frontend/src/components/map/MapTooltipComponent.vue
+++ b/frontend/src/components/map/MapTooltipComponent.vue
@@ -27,8 +27,8 @@
 <script lang="ts">
 // Import the JSON file
 import parcellesData from "@/assets/json/parcelles.json";
-import { type PropType, defineComponent, onMounted, ref, watch } from "vue";
 import { useAppStore } from "@/store/appStore.ts";
+import { type PropType, defineComponent, onMounted, ref, watch } from "vue";
 
 // Define the type for the parcellesData
 export interface ParcelleData {
@@ -55,12 +55,12 @@ export default defineComponent({
 			type: String,
 			required: true,
 			default: "",
-		}
+		},
 	},
 
 	setup(props) {
 		const appStore = useAppStore();
-		const comData = ref({})
+		const comData = ref({});
 		const tooltipData = ref<ParcelleData | null>(null);
 
 		const loadTooltipData = () => {
@@ -75,9 +75,12 @@ export default defineComponent({
 			loadTooltipData();
 		});
 
-		watch(() => appStore.comData, (newValue: Object) => {
-			comData.value = newValue;
-		});
+		watch(
+			() => appStore.comData,
+			(newValue: Object) => {
+				comData.value = newValue;
+			},
+		);
 		return { tooltipData, comData };
 	},
 });
diff --git a/frontend/src/components/sidebar/TileTwo.vue b/frontend/src/components/sidebar/TileTwo.vue
index 36e4546..8955e98 100644
--- a/frontend/src/components/sidebar/TileTwo.vue
+++ b/frontend/src/components/sidebar/TileTwo.vue
@@ -8,71 +8,80 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, watch } from "vue";
-import { NatureCulture } from "@/types/NatureCulture";
-import HistogramChart from '@/components/HistogramChart.vue';
 import monthDepData from "@/assets/json/dvf_month_agri.json";
 import monthNatData from "@/assets/json/dvf_month_agri_nat.json";
-import { useAppStore } from '@/store/appStore.ts';
+import HistogramChart from "@/components/HistogramChart.vue";
+import { useAppStore } from "@/store/appStore.ts";
+import { NatureCulture } from "@/types/NatureCulture";
 import { getColorsForNatureCulture } from "@/types/NatureCulture";
+import { computed, defineComponent, ref, watch } from "vue";
 
 export default defineComponent({
-  name: "TileTwo",
-  components: {
-    HistogramChart,
-  },
-  props: {
-    selectedNatureCulture: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(props) {
-    const appStore = useAppStore();
+	name: "TileTwo",
+	components: {
+		HistogramChart,
+	},
+	props: {
+		selectedNatureCulture: {
+			type: String,
+			default: "",
+		},
+	},
+	setup(props) {
+		const appStore = useAppStore();
 
-    const data = ref(monthNatData["P" as keyof typeof monthNatData]);
-    const chartKey = ref(0);
-    const color = ref("#388E3C");
+		const data = ref(monthNatData["P" as keyof typeof monthNatData]);
+		const chartKey = ref(0);
+		const color = ref("#388E3C");
 
-    const options = {
-      plugins: {
-        legend: {
-          display: true,
-          position: "top",
-        },
-      },
-    };
-    const level = ref("National")
+		const options = {
+			plugins: {
+				legend: {
+					display: true,
+					position: "top",
+				},
+			},
+		};
+		const level = ref("National");
 
-    const natureCultureFullName = computed((): string => {
-      return props.selectedNatureCulture
-        ? NatureCulture[props.selectedNatureCulture as keyof typeof NatureCulture]
-        : "";
-    });
+		const natureCultureFullName = computed((): string => {
+			return props.selectedNatureCulture
+				? NatureCulture[
+						props.selectedNatureCulture as keyof typeof NatureCulture
+					]
+				: "";
+		});
 
-    watch(() => appStore.option, (newValue: string) => {
-      data.value = monthNatData[newValue as keyof typeof monthNatData];
-      level.value = "National";
-      color.value = getColorsForNatureCulture(appStore.option)[3]
-      chartKey.value++;
-    });
+		watch(
+			() => appStore.option,
+			(newValue: string) => {
+				data.value = monthNatData[newValue as keyof typeof monthNatData];
+				level.value = "National";
+				color.value = getColorsForNatureCulture(appStore.option)[3];
+				chartKey.value++;
+			},
+		);
 
-    watch(() => appStore.mouseDep, (newValue: string) => {
-      const interData = monthDepData[appStore.option as keyof typeof monthDepData];
-      data.value = interData[newValue as keyof typeof interData];
-      level.value = appStore.mouseDepName;
-      color.value = getColorsForNatureCulture(appStore.option)[3]
-      chartKey.value++;
-    });
+		watch(
+			() => appStore.mouseDep,
+			(newValue: string) => {
+				const interData =
+					monthDepData[appStore.option as keyof typeof monthDepData];
+				data.value = interData[newValue as keyof typeof interData];
+				level.value = appStore.mouseDepName;
+				color.value = getColorsForNatureCulture(appStore.option)[3];
+				chartKey.value++;
+			},
+		);
 
-    return {
-      natureCultureFullName,
-      data,
-      options,
-      chartKey,
-      level,
-      color,
-    };
-  },
+		return {
+			natureCultureFullName,
+			data,
+			options,
+			chartKey,
+			level,
+			color,
+		};
+	},
 });
 </script>
diff --git a/frontend/src/components/ui/card/Card.vue b/frontend/src/components/ui/card/Card.vue
index 6d784dc..d0047d0 100644
--- a/frontend/src/components/ui/card/Card.vue
+++ b/frontend/src/components/ui/card/Card.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/utils'
+import { cn } from "@/utils";
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardContent.vue b/frontend/src/components/ui/card/CardContent.vue
index a6e1d1b..bfeebba 100644
--- a/frontend/src/components/ui/card/CardContent.vue
+++ b/frontend/src/components/ui/card/CardContent.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/utils'
+import { cn } from "@/utils";
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardDescription.vue b/frontend/src/components/ui/card/CardDescription.vue
index cde6c21..2e14e82 100644
--- a/frontend/src/components/ui/card/CardDescription.vue
+++ b/frontend/src/components/ui/card/CardDescription.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/utils'
+import { cn } from "@/utils";
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardFooter.vue b/frontend/src/components/ui/card/CardFooter.vue
index 125e635..f152bdb 100644
--- a/frontend/src/components/ui/card/CardFooter.vue
+++ b/frontend/src/components/ui/card/CardFooter.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/utils'
+import { cn } from "@/utils";
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardHeader.vue b/frontend/src/components/ui/card/CardHeader.vue
index f13e49a..5fe66a3 100644
--- a/frontend/src/components/ui/card/CardHeader.vue
+++ b/frontend/src/components/ui/card/CardHeader.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/utils'
+import { cn } from "@/utils";
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardTitle.vue b/frontend/src/components/ui/card/CardTitle.vue
index 58a3ce4..579df9f 100644
--- a/frontend/src/components/ui/card/CardTitle.vue
+++ b/frontend/src/components/ui/card/CardTitle.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/utils'
+import { cn } from "@/utils";
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+	class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/index.ts b/frontend/src/components/ui/card/index.ts
index 9ff6d5e..313887b 100644
--- a/frontend/src/components/ui/card/index.ts
+++ b/frontend/src/components/ui/card/index.ts
@@ -1,6 +1,6 @@
-export { default as Card } from './Card.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardFooter } from './CardFooter.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
+export { default as Card } from "./Card.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a831e4d..b2c9bde 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,76 +3,76 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 222.2 84% 4.9%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+		--muted: 210 40% 96.1%;
+		--muted-foreground: 215.4 16.3% 46.9%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 222.2 84% 4.9%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 222.2 84% 4.9%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+		--border: 214.3 31.8% 91.4%;
+		--input: 214.3 31.8% 91.4%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+		--primary: 222.2 47.4% 11.2%;
+		--primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+		--secondary: 210 40% 96.1%;
+		--secondary-foreground: 222.2 47.4% 11.2%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+		--accent: 210 40% 96.1%;
+		--accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 210 40% 98%;
 
-    --ring: 222.2 84% 4.9%;
+		--ring: 222.2 84% 4.9%;
 
-    --radius: 0.5rem;
-  }
+		--radius: 0.5rem;
+	}
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+	.dark {
+		--background: 222.2 84% 4.9%;
+		--foreground: 210 40% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+		--muted: 217.2 32.6% 17.5%;
+		--muted-foreground: 215 20.2% 65.1%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+		--popover: 222.2 84% 4.9%;
+		--popover-foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+		--card: 222.2 84% 4.9%;
+		--card-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
+		--border: 217.2 32.6% 17.5%;
+		--input: 217.2 32.6% 17.5%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+		--primary: 210 40% 98%;
+		--primary-foreground: 222.2 47.4% 11.2%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+		--secondary: 217.2 32.6% 17.5%;
+		--secondary-foreground: 210 40% 98%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+		--accent: 217.2 32.6% 17.5%;
+		--accent-foreground: 210 40% 98%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 210 40% 98%;
 
-    --ring: 212.7 26.8% 83.9%;
-  }
+		--ring: 212.7 26.8% 83.9%;
+	}
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index bea0096..f9a7361 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,9 +1,9 @@
 import "./assets/main.css";
+import { createPinia } from "pinia";
 import { createApp } from "vue";
-import { createPinia } from 'pinia';
 import App from "./App.vue";
 import router from "./router";
-import './index.css'
+import "./index.css";
 
 const app = createApp(App);
 const pinia = createPinia();
diff --git a/frontend/src/shims-vue.d.ts b/frontend/src/shims-vue.d.ts
index 40d71cc..140e810 100644
--- a/frontend/src/shims-vue.d.ts
+++ b/frontend/src/shims-vue.d.ts
@@ -1,5 +1,5 @@
-declare module '*.vue' {
-    import { DefineComponent } from 'vue';
-    const component: DefineComponent<{}, {}, any>;
-    export default component;
-  }
\ No newline at end of file
+declare module "*.vue" {
+	import type { DefineComponent } from "vue";
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
diff --git a/frontend/src/store/appStore.ts b/frontend/src/store/appStore.ts
index 85a4dd0..832a1b5 100644
--- a/frontend/src/store/appStore.ts
+++ b/frontend/src/store/appStore.ts
@@ -1,36 +1,36 @@
 import { defineStore } from "pinia";
 
-export const useAppStore = defineStore('appStore', {
-  state: () => ({
-    option: 'P',
-    mapZoom: 5.2,
-    address: [1,1],
-    mouseDep: "",
-    mouseDepName: "",
-    codeInsee: "",
-    comData: {},
-  }),
-  actions: {
-    updateOption(newOption: string) {
-      this.option = newOption;
-    },
-    updateMapZoom(zoom: number){
-        this.mapZoom = zoom;
-    },
-    updateAddress(address: any){
-        this.address = address
-    },
-    updateMouseDep(dep: string){
-        this.mouseDep = dep;
-    },
-    updateMouseDepName(depName: string){
-        this.mouseDepName = depName;
-    },
-    updateCodeInsee(code: string){
-        this.codeInsee = code;
-    },
-    updateComData(data: Object){
-        this.comData = data;
-    }
-  },
-});
\ No newline at end of file
+export const useAppStore = defineStore("appStore", {
+	state: () => ({
+		option: "P",
+		mapZoom: 5.2,
+		address: [1, 1],
+		mouseDep: "",
+		mouseDepName: "",
+		codeInsee: "",
+		comData: {},
+	}),
+	actions: {
+		updateOption(newOption: string) {
+			this.option = newOption;
+		},
+		updateMapZoom(zoom: number) {
+			this.mapZoom = zoom;
+		},
+		updateAddress(address: any) {
+			this.address = address;
+		},
+		updateMouseDep(dep: string) {
+			this.mouseDep = dep;
+		},
+		updateMouseDepName(depName: string) {
+			this.mouseDepName = depName;
+		},
+		updateCodeInsee(code: string) {
+			this.codeInsee = code;
+		},
+		updateComData(data: Object) {
+			this.comData = data;
+		},
+	},
+});
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index d32b0fe..ac680b3 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 6e83f57..4de034c 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -90,4 +90,4 @@ export default {
 		},
 	},
 	plugins: [animate],
-};
\ No newline at end of file
+};
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 73509b4..a68eb13 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -12,8 +12,7 @@
 		"types": ["vite/client"],
 		"baseUrl": ".",
 		"paths": {
-		  "@/*": ["src/*"]
+			"@/*": ["src/*"]
 		}
-	  }
+	}
 }
-  
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 916fa2b..c15cdf5 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,8 +1,8 @@
 import { URL, fileURLToPath } from "node:url";
 
 import vue from "@vitejs/plugin-vue";
-import autoprefixer from 'autoprefixer'
-import tailwind from 'tailwindcss'
+import autoprefixer from "autoprefixer";
+import tailwind from "tailwindcss";
 import { defineConfig } from "vite";
 import vueDevTools from "vite-plugin-vue-devtools";