feat(CategoriesStats): add more stats

frontend/js/components/dashboard/CategoriesStats.vue

@@ -19,28 +19,31 @@
           <BTh
             width="170px"
             class="text-end"
-            >Total</BTh
+            v-html="renderLabelWithSum('Total', computed(data, dateFrom, dateTo, order), 'sum')"></BTh
           >
           <BTh
             width="250px"
             class="text-end"
+            valign="top"
             >Débit moyen / transaction</BTh
           >
           <BTh
             width="210px"
             class="text-end"
+            valign="top"
             >Débit moyen / mois</BTh
           >
           <BTh
             width="170px"
             class="text-end"
+            valign="top"
             >Transactions</BTh
           >
         </BTr>
       </BThead>
       <BTbody>
         <BTr
-          v-for="item in compute(data, dateFrom, dateTo, order)"
+          v-for="item in computed(data, dateFrom, dateTo, order)"
           :key="item.category.id"
         >
           <BTd
@@ -76,7 +79,11 @@ import {
   BTd,
 } from 'bootstrap-vue-next'
 import {compute} from '../../chart/debitAverage'
-import {renderCategory, renderEuro} from '../../lib/renderers'
+import {
+  renderLabelWithSum,
+  renderCategory,
+  renderEuro
+} from '../../lib/renderers'
 
 const order = ref(getStorage('dashboard:debitAverage:order', 'sum'))
 const orders = [
@@ -86,6 +93,22 @@ const orders = [
   {value: 'count', text: 'Transactions'},
 ]
 
+let cache = null
+let cacheKey = null
+
+const computed = (data, dateFrom, dateTo, order) => {
+  const key = `${dateFrom}-${dateTo}-${order}`
+
+  if (cache !== null && cacheKey === key) {
+    return cache
+  }
+
+  cacheKey = key
+  cache = compute(data, dateFrom, dateTo, order)
+
+  return cache
+}
+
 watch(order, (v) => saveStorage('dashboard:debitAverage:order', v))
 
 defineProps(['data', 'dateFrom', 'dateTo'])