CSS & tri départements 🎨

MTES-MCT · Oct 18, 2023 · c646cc6 · c646cc6
1 parent c757d03
commit c646cc6
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 14 deletions.
diff --git a/client/components/stats/DepartementTable.vue b/client/components/stats/DepartementTable.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 }>();
 
 const headers = ['N° Département', 'Nombre recherches', '% recherches'];
-const rows = [];
+let rows: any[] = [];
 const query: Ref<string> = ref('');
 const rowsFiltered: Ref<any[]> = ref([]);
 const componentKey = ref(0);
@@ -17,7 +17,7 @@ const sumSearches = Object.values(props.stats.departementRepartition).reduce((a:
 Object.keys(props.stats.departementRepartition).forEach((d: any) => {
   rows.push([d, `${utils.numberWithSpaces(props.stats.departementRepartition[d])}`, `${(props.stats.departementRepartition[d] * 100 / sumSearches).toFixed(2)}%`]);
 });
-rowsFiltered.value = [...rows];
+rows = rows.sort(new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'}).compare)
 
 function checkKeyboardNav($event) {
   if (['search', 'Enter'].includes($event.key)) {
@@ -31,6 +31,8 @@ function filterDepartments() {
   });
   componentKey.value += 1;
 }
+
+filterDepartments()
 </script>
 
 <template>

diff --git a/client/components/stats/LineChart.vue b/client/components/stats/LineChart.vue
@@ -11,20 +11,14 @@ const chartLineData = {
   datasets: [
     {
       label: 'Visiteurs',
-      backgroundColor: '#000091',
-      borderColor: '#000091',
       data: props.stats.statsByDay.map((s: any) => s.visits)
     },
     {
       label: 'Recherche de restrictions',
-      backgroundColor: '#c9191e',
-      borderColor: '#c9191e',
       data: props.stats.statsByDay.map((s: any) => s.restrictionsSearch)
     },
     {
       label: 'Téléchargement d\'arrêtés',
-      backgroundColor: '#18753c',
-      borderColor: '#18753c',
       data: props.stats.statsByDay.map((s: any) => s.arreteDownloads)
     }
   ]

diff --git a/client/components/stats/ProfileRepartition.vue b/client/components/stats/ProfileRepartition.vue
@@ -11,7 +11,6 @@ const props = defineProps<{
 const chartePieData = {
   labels: Object.values(Profile),
   datasets: [{
-    backgroundColor: ['#000091', '#c9191e', '#18753c', '#FEB24C'],
     data: []
   }]
 };

diff --git a/client/layouts/basic.vue b/client/layouts/basic.vue
@@ -29,9 +29,6 @@ const mandatoryLinks: any[] = [{
 }, {
   label: 'Cookies',
   to: '/cookies',
-}, {
-  label: 'Statistiques',
-  to: '/statistiques',
 }];
 const ecosystemLinks: any[] = [
   {

diff --git a/client/pages/statistiques/index.vue → client/pages/stats/index.vue b/client/pages/statistiques/index.vue → client/pages/stats/index.vue
@@ -11,7 +11,8 @@ import {
   PointElement,
   LineController,
   TimeScale,
-  ArcElement
+  ArcElement, 
+  Colors
 } from 'chart.js';
 import 'chartjs-adapter-luxon';
 import api from "../../api";
@@ -28,7 +29,7 @@ useHead({
 
 const links: Ref<any[]> = ref([{"to": "/", "text": "Accueil"}, {"text": "Statistiques"}])
 
-ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, LineController, TimeScale, ArcElement)
+ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, LineController, TimeScale, ArcElement, Colors)
 
 const {data, error} = await api.getStats();
 </script>