Merge pull request #1991 from sophiemoustard/COM-3697

COM-3697: update chart.js

Author: sophiemoustard

package-lock.json

@@ -22,7 +22,7 @@
     "@vuelidate/validators": "~2.0.4",
     "axios": "~1.6.7",
     "bignumber.js": "~9.1.2",
-    "chart.js": "~3.8.0",
+    "chart.js": "~4.4.2",
     "connect-history-api-fallback": "~2.0.0",
     "date-holidays": "~3.23.7",
     "dotenv": "~16.4.1",
@@ -39,7 +39,7 @@
     "quasar": "~2.13.1",
     "vue": "~3.4.19",
     "vue-advanced-cropper": "~2.8.1",
-    "vue-chart-3": "~3.1.8",
+    "vue-chartjs": "~5.3.1",
     "vue-router": "~4.2.5",
     "vuedraggable": "~4.1.0",
     "vuelidate": "~0.7.6",

package.json

@@ -2,15 +2,15 @@
   <div>
     <q-card flat class="q-pa-md">
       <div class="text-weight-bold q-mb-md">{{ title }}</div>
-      <vue-chart-line-chart v-bind="lineChartProps" class="line-chart" />
+      <vue-chart-line-chart :options="options" :data="chartData" class="line-chart" />
     </q-card>
   </div>
 </template>
 
 <script>
 import { getCssVar } from 'quasar';
 import { toRefs, computed } from 'vue';
-import { LineChart as VueChartLineChart, useLineChart } from 'vue-chart-3';
+import { Line as VueChartLineChart } from 'vue-chartjs';
 import { Chart, registerables } from 'chart.js';
 
 Chart.register(...registerables);
@@ -48,10 +48,10 @@ export default {
       maintainAspectRatio: false,
     }));
 
-    const { lineChartProps } = useLineChart({ options, chartData });
-
     return {
-      lineChartProps,
+      // Computed
+      options,
+      chartData,
     };
   },
 };

src/core/components/charts/LineChart.vue

@@ -8,11 +8,11 @@
           <div class="self-center justify-center column learners-data">
             <div class="row items-center">
               <ni-e-learning-indicator :indicator="traineesOnGoingCount" class="q-pr-sm" />
-              <div>apprenant{{ traineesOnGoingCount > 1 ? 's' : '' }} en cours</div>
+              <div>{{ formatQuantity('apprenant',traineesOnGoingCount, 's', false) }} en cours</div>
             </div>
             <div class="row items-center">
               <ni-e-learning-indicator :indicator="traineesFinishedCount" class="q-pr-sm" />
-              <div>apprenant{{ traineesFinishedCount > 1 ? 's' : '' }} ayant terminé</div>
+              <div>{{ formatQuantity('apprenant', traineesFinishedCount, 's', false) }} ayant terminé</div>
             </div>
           </div>
         </q-card>
@@ -33,6 +33,7 @@ import { useTraineeFollowUp } from '@composables/traineeFollowUp';
 import { useCharts } from '@composables/charts';
 import CompaniDate from '@helpers/dates/companiDates';
 import { MONTH, DAY } from '@data/constants';
+import { formatQuantity } from '@helpers/utils';
 
 export default {
   name: 'ProfileFollowUp',
@@ -85,6 +86,7 @@ export default {
       traineesOnGoingCount,
       traineesFinishedCount,
       // Methods
+      formatQuantity,
     };
   },
 };