+analytics update

src/components/ToolBar.vue

@@ -5,6 +5,12 @@
 <!--    <TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="'INSTANT'"-->
 <!--                     :category-type="'EXPENSE'" @close-drawer="closeDrawer"/>-->
     <div class="flex flex-row rounded-full px-2 justify-between overflow-x">
+      <div class="flex flex-col gap-2 p-2">
+        <router-link to="/analytics" class="items-center flex flex-col gap-2">
+          <i class="pi pi-briefcase text-2xl" style="font-size: 1.5rem"></i>
+          <p>Аналитика</p>
+        </router-link>
+      </div>
       <div class="flex flex-col gap-2 p-2">
         <router-link to="/budgets" class="items-center flex flex-col gap-2">
           <i class="pi pi-briefcase text-2xl" style="font-size: 1.5rem"></i>

src/components/analytics/AnalyticsView.vue

@@ -135,9 +135,9 @@ const prepareTableData = (categories) => {
     ...allDates.map((dateStr) => ({field: dateStr, header: dateStr})),
   ];
   console.log(tableColumns.value[0].field);
-
+  const sums = {}
   // 4. Формируем строки (для каждой категории)
-  return categories.map((category) => {
+  const rows = categories.map((category) => {
     // Начинаем со строки, где есть поле с именем категории
     const row = {category: category.categoryIcon + " " + category.categoryName};
 
@@ -146,20 +146,42 @@ const prepareTableData = (categories) => {
       const found = category.monthlySums.find((m) => m.date === dateStr);
       if (found.difference != 0) {
         if (found.difference > 0) {
-          row[dateStr] = found ? formatter.value.format(found.total) + "<p class='text-green-600 text-sm'> (+ " + found.difference + "%)</p>" : 0;
+          row[dateStr] = found ? formatter.value.format(found.total) + "<p class='text-red-500 text-sm'> (+ " + found.difference + "%)</p>" : 0;
         } else {
-          row[dateStr] = found ? formatter.value.format(found.total) + "<p class='text-red-500 text-sm'>  (" + found.difference + "%)</p>" : 0;
+          row[dateStr] = found ? formatter.value.format(found.total) + "<p class='text-green-600 text-sm'>  (" + found.difference + "%)</p>" : 0;
         }
       } else {
-
         row[dateStr] = found ? formatter.value.format(found.total) : 0;
       }
-
+      if (!sums[dateStr]) {
-
+        sums[dateStr] = 0
+      }
+      sums[dateStr] += found.total
     });
 
     return row;
   });
+
+
+  let previousSum = 0;
+  Object.keys(sums).forEach(key => {
+
+    console.log(previousSum)
+    let difference = previousSum != 0 ? ((sums[key] - previousSum) / previousSum) * 100 : 0
+    if (sums[key] != previousSum) {
+      previousSum = sums[key];
+    }
+    let color = ""
+    if (difference > 0) {
+      color = "text-red-500"
+    } else color = "text-green-600"
+    sums[key] = formatter.value.format(sums[key]) + `<p class='${color}'>(` + difference.toFixed(0) + "%)</p>";
+
+  });
+
+
+  rows.push(sums);
+  return rows;
 };
 
 
@@ -223,7 +245,7 @@ onMounted(async () => {
     </Accordion>
 
 
-    <DataTable :value="dataTableCategories" responsiveLayout="scroll" stripedRows class="w-5/6   items-center">
+    <DataTable :value="dataTableCategories" responsiveLayout="scroll" filter stripedRows class="w-5/6   items-center">
       <Column
           :field="tableColumns[0].field"
           :header="tableColumns[0].header"