Ajout stat visites site ✨

MTES-MCT · Oct 23, 2024 · e8f6a5d · e8f6a5d
1 parent 09f62bc
commit e8f6a5d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 22 deletions.
diff --git a/client/components/stats/DepartementMap.vue b/client/components/stats/DepartementMap.vue
@@ -60,16 +60,16 @@ onMounted(() => {
     const matchDepartementExpression = ['match', ['get', 'code']];
     Object.keys(props.stats.departementRepartition).forEach((d: any) => {
       const searches = props.stats.departementRepartition[d];
-      const color = ((maxDepartementSearches - searches) / (maxDepartementSearches - minDepartementSearches)) * 230;
-      matchDepartementExpression.push(d, `rgb(${color}, ${color}, 255)`);
+      const color = (searches - minDepartementSearches) / (maxDepartementSearches - minDepartementSearches);
+      matchDepartementExpression.push(d, `rgb(${color * (49 - 255) + 255}, ${color * (49 - 255) + 255}, ${color * (120 - 255) + 255})`);
     });
     matchDepartementExpression.push('rgba(0, 0, 0, 0)');
 
     const matchRegionExpression = ['match', ['get', 'code']];
     Object.keys(props.stats.regionRepartition).forEach((r: any) => {
       const searches = props.stats.regionRepartition[r];
-      const color = ((maxRegionSearches - searches) / (maxRegionSearches - minRegionSearches)) * 230;
-      matchRegionExpression.push(r, `rgb(${color}, ${color}, 255)`);
+      const color = (searches - minRegionSearches) / (maxRegionSearches - minRegionSearches);
+      matchRegionExpression.push(r, `rgb(${color * (49 - 255) + 255}, ${color * (49 - 255) + 255}, ${color * (120 - 255) + 255})`);
     });
     matchRegionExpression.push('rgba(0, 0, 0, 0)');
 
@@ -272,7 +272,7 @@ const updateLayerFilter = () => {
       height: 20px;
       min-width: 200px;
       width: 100%;
-      background: linear-gradient(0.25turn, rgb(230, 230, 255), rgb(0, 0, 255));
+      background: linear-gradient(0.25turn, rgba(255, 255, 255), rgb(49, 49, 120));
     }
 
     &-text {

diff --git a/client/components/stats/LineChart.vue b/client/components/stats/LineChart.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ChartOptions } from "chart.js";
 import { Line } from "vue-chartjs";
+import moment from 'moment';
 
 const props = defineProps<{
   stats: any
@@ -25,19 +26,7 @@ const chartLineData = {
 };
 
 const tooltipTitle = (tooltipItems: any[]): string => {
-  const date = new Date(tooltipItems[0].parsed.x);
-  const year: string | number = date.getFullYear();
-  let month: string | number = date.getMonth() + 1;
-  let dt: string | number = date.getDate();
-
-  if (dt < 10) {
-    dt = '0' + dt;
-  }
-  if (month < 10) {
-    month = '0' + month;
-  }
-
-  return `${dt}/${month}/${year}`;
+  return moment(tooltipItems[0].parsed.x).format('DD/MM/YYYY');
 };
 
 const chartLineOptions: ChartOptions = {

diff --git a/client/pages/stats/index.vue b/client/pages/stats/index.vue
@@ -28,10 +28,18 @@ useHead({
 });
 
 const links: Ref<any[]> = ref([{ 'to': '/', 'text': 'Accueil' }, { 'text': 'Statistiques' }]);
+const cumulativeVisits = ref(0);
 
 ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, LineController, TimeScale, ArcElement, Colors);
 
 const { data, error } = await api.getStats();
+if (data.value) {
+  cumulativeVisits.value = data.value.statsByDay
+    .reduce((acc, value) => {
+      acc += value.visits;
+      return acc;
+    }, 0);
+}
 </script>
 
 <template>
@@ -47,10 +55,17 @@ const { data, error } = await api.getStats();
           <div class="fr-col-12 fr-col-md-6">
             <StatsProfileRepartition :stats="data" />
           </div>
-          <div class="fr-col-12 fr-col-md-6">
-            <DsfrCallout :title="utils.numberWithSpaces(data.subscriptions)"
-                         content="personnes abonnées aux alertes mail - qui informent l'usager sur un changement de niveau de gravité sur sa zone"
-            />
+          <div class="fr-col-12 fr-col-md-6 fr-grid-row fr-grid-row--gutters">
+            <div class="fr-col-12">
+              <DsfrCallout :title="utils.numberWithSpaces(data.subscriptions)"
+                           content="personnes abonnées aux alertes mail - qui informent l'usager sur un changement de niveau de gravité sur sa zone"
+              />
+            </div>
+            <div class="fr-col-12">
+              <DsfrCallout :title="utils.numberWithSpaces(cumulativeVisits)"
+                           content="nombres de visites cumulées sur le site VigiEau"
+              />
+            </div>
           </div>
           <div class="fr-col-12">
             <StatsDepartementWrapper :stats="data" />