Merge pull request #5 from opendatateam/chart

chart

frontend/package.json

@@ -10,7 +10,11 @@
 		"type-check": "vue-tsc --build"
 	},
 	"dependencies": {
+		"@unovis/ts": "^1.4.5",
+		"@unovis/vue": "^1.4.5",
+		"@vueuse/core": "^12.0.0",
 		"axios": "^1.7.8",
+		"chart.js": "^4.4.7",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"d3-scale": "^4.0.2",

frontend/src/components/HistogramChart.vue

@@ -0,0 +1,91 @@
+<script>
+import {
+  Chart,
+  BarController,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+Chart.register(
+  BarController,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Title,
+  Tooltip,
+  Legend
+);
+
+export default {
+  name: "HistogramChart",
+  props: {
+    chartData: {
+      type: Array,
+      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);
+
+      new Chart(ctx, {
+        type: "bar",
+        data: {
+          labels: labels,
+          datasets: [
+            {
+              label: "Transactions",
+              data: values,
+              backgroundColor: "rgba(75, 192, 192, 0.2)",
+              borderColor: "rgba(75, 192, 192, 1)",
+              borderWidth: 1,
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              display: false,
+            },
+            tooltip: {
+              enabled: true,
+            },
+          },
+          scales: {
+            x: {
+              type: "category",
+            },
+            y: {
+              beginAtZero: true,
+            },
+          },
+          ...this.chartOptions,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <canvas ref="histogramChart"></canvas>
+  </div>
+</template>

frontend/src/components/MapComponent.vue

@@ -130,10 +130,12 @@ 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"];
+					appStore.updateMouseDep(depCode);
+					appStore.updateMouseDepName(depName.value);
 					tooltip.value.mode = "departement";
 					tooltip.value.value = (
 						fullPeriodData[

frontend/src/components/SidebarComponent.vue

@@ -4,9 +4,6 @@
     <div v-else>
       <TileOne :selectedNatureCulture="selectedNatureCulture" @update:selectedNatureCulture="updateSelectedNatureCulture" />
       <TileTwo :selectedNatureCulture="selectedNatureCulture" />
-      zoom for debug : {{ toto }}
-      <br />
-      addressGPS : {{  tutu  }}
     </div>
   </aside>
 </template>
@@ -17,6 +14,7 @@ import TileOne from "./sidebar/TileOne.vue";
 import TileTwo from "./sidebar/TileTwo.vue";
 import { useAppStore } from '@/store/appStore.ts';
 
+
 export default defineComponent({
   name: "SidebarComponent",
   components: {
@@ -68,7 +66,7 @@ export default defineComponent({
   position: fixed;
   top: 100px;
   left: 20px;
-  width: 250px;
+  width: 350px;
   background-color: white;
   padding: 20px;
   border-radius: 10px;

frontend/src/components/sidebar/TileTwo.vue

@@ -1,29 +1,71 @@
 <template>
   <div class="tile">
     <h2 class="font-bold mb-2">{{ natureCultureFullName }}</h2>
+    <p><b>Transactions - {{ level }}</b></p>
+    <span v-if="data.length > 0"><HistogramChart :chartData="data" :key="chartKey" /></span>
+    <span v-else>Il n'y a pas de transactions pour ce département.</span>
   </div>
 </template>
 
 <script lang="ts">
+import { defineComponent, computed, ref, watch } from "vue";
 import { NatureCulture } from "@/types/NatureCulture";
-import { defineComponent } from "vue";
+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';
 
 export default defineComponent({
-	name: "TileTwo",
-	props: {
-		selectedNatureCulture: {
-			type: String,
-			default: "",
-		},
-	},
-	computed: {
-		natureCultureFullName(): string {
-			return this.selectedNatureCulture
-				? NatureCulture[
-						this.selectedNatureCulture as keyof typeof NatureCulture
-					]
-				: "";
-		},
-	},
+  name: "TileTwo",
+  components: {
+    HistogramChart,
+  },
+  props: {
+    selectedNatureCulture: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props) {
+    const appStore = useAppStore();
+
+    const data = ref(monthNatData["P"]);
+    const chartKey = ref(0);
+
+    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]
+        : "";
+    });
+
+    watch(() => appStore.option, (newValue: string) => {
+      data.value = monthNatData[newValue];
+      chartKey.value++;
+    });
+
+    watch(() => appStore.mouseDep, (newValue: string) => {
+      data.value = monthDepData[appStore.option][newValue];
+      level.value = appStore.mouseDepName;
+      chartKey.value++;
+    });
+
+    return {
+      natureCultureFullName,
+      data,
+      options,
+      chartKey,
+      level,
+    };
+  },
 });
-</script>
+</script>

frontend/src/components/ui/card/Card.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

frontend/src/components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

frontend/src/components/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

frontend/src/components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

frontend/src/components/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

frontend/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>

frontend/src/components/ui/card/index.ts

@@ -0,0 +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'

frontend/src/store/appStore.ts

@@ -1,20 +1,28 @@
 import { defineStore } from "pinia";
 
-export const useAppStore = defineStore("appStore", {
-	state: () => ({
-		option: "P",
-		mapZoom: 5.2,
-		address: [1, 1],
-	}),
-	actions: {
-		updateOption(newOption: string) {
-			this.option = newOption;
-		},
-		updateMapZoom(zoom: number) {
-			this.mapZoom = zoom;
-		},
-		updateAddress(address: any) {
-			this.address = address;
-		},
-	},
-});
+export const useAppStore = defineStore('appStore', {
+  state: () => ({
+    option: 'P',
+    mapZoom: 5.2,
+    address: [1,1],
+    mouseDep: "",
+    mouseDepName: "",
+  }),
+  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;
+    },
+  },
+});