From 924391fefe20596fc7a6e525c063b356a6af67c9 Mon Sep 17 00:00:00 2001
From: julwrites <mail@tehj.io>
Date: Sat, 7 Sep 2024 10:08:02 +0800
Subject: [PATCH] Fixing data direction and filters, and adding numbers to
 charts

---
 pages/components/ExpenseFilters.vue          | 45 ++++++--------------
 pages/components/ExpensesByCategoryChart.vue | 17 ++++++++
 pages/components/IncomeExpenseChart.vue      | 17 ++++++++
 pages/expense-list.vue                       | 35 +++++++--------
 4 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/pages/components/ExpenseFilters.vue b/pages/components/ExpenseFilters.vue
index 789429a..57799c0 100644
--- a/pages/components/ExpenseFilters.vue
+++ b/pages/components/ExpenseFilters.vue
@@ -1,25 +1,23 @@
 <template>
   <div class="filters">
-    <UFormGroup>
-      <USelectMenu v-model="localSelectedPeriod" :options="periodOptions" placeholder="Select time period" />
-      <USelectMenu v-model="localSelectedCategory" :options="categoryOptions" placeholder="Select category" />
-    </UFormGroup>
+    <USelectMenu v-model="localSelectedPeriod" :options="periodOptions" placeholder="Select time period" />
+    <USelectMenu v-model="localSelectedCategory" :options="categoryOptions" placeholder="Select category" />
     <div class="filter-actions">
-      <UButton @click="$emit('apply-filters')">Apply Filters</UButton>
-      <UButton @click="$emit('reset-filters')" variant="outline">Reset Filters</UButton>
+      <UButton class="filter-reset" @click="$emit('reset-filters')" variant="outline">Reset Filters</UButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
-  selectedPeriod: String,
-  selectedCategory: String,
+  selectedPeriod: Object,
+  selectedCategory: Object,
+  categoryOptions: Array,
 });
 
-const emit = defineEmits(['update:selectedPeriod', 'update:selectedCategory', 'apply-filters', 'reset-filters']);
+const emit = defineEmits(['update:selectedPeriod', 'update:selectedCategory', 'reset-filters']);
 
 const localSelectedPeriod = computed({
   get: () => props.selectedPeriod,
@@ -32,33 +30,12 @@ const localSelectedCategory = computed({
 });
 
 const periodOptions = [
+  { label: 'All Time', value: '' },
   { label: 'This Week', value: 'week' },
   { label: 'This Month', value: 'month' },
   { label: 'This Year', value: 'year' },
 ];
 
-const categoryOptions = ref<string[]>([]);
-
-onMounted(async () => {
-  await fetchCategories();
-});
-
-async function fetchCategories() {
-  try {
-    const response = await fetch('/api/categories');
-    if (response.ok) {
-      const json = await response.json();
-      categoryOptions.value = json.map((category: { id: number, name: string }) => ({
-        label: category.name,
-        value: category.name
-      }));
-    } else {
-      console.error('Failed to fetch categories');
-    }
-  } catch (error) {
-    console.error('Error fetching categories:', error);
-  }
-}
 </script>
 
 <style scoped>
@@ -75,6 +52,10 @@ async function fetchCategories() {
   align-items: flex-end;
 }
 
+.filter-reset {
+  color: var(--color-danger);
+}
+
 :deep(.form-group) {
   flex: 1;
   min-width: 200px;
diff --git a/pages/components/ExpensesByCategoryChart.vue b/pages/components/ExpensesByCategoryChart.vue
index 90dbc91..db50fa2 100644
--- a/pages/components/ExpensesByCategoryChart.vue
+++ b/pages/components/ExpensesByCategoryChart.vue
@@ -6,6 +6,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { Pie } from 'vue-chartjs';
 import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement } from 'chart.js';
 
@@ -18,9 +19,25 @@ const props = defineProps({
   }
 });
 
+const totalExpenses = computed(() => 
+  props.chartData.datasets[0].data.reduce((acc, curr) => acc + curr, 0)
+);
+
 const chartOptions = {
   responsive: true,
   maintainAspectRatio: false,
+  plugins: {
+    tooltip: {
+      callbacks: {
+        label: (context) => {
+          const label = context.label || '';
+          const value = context.raw || 0;
+          const percentage = ((value / totalExpenses.value) * 100).toFixed(2);
+          return `${label}: $${value.toFixed(2)} (${percentage}%)`;
+        }
+      }
+    }
+  }
 };
 </script>
 
diff --git a/pages/components/IncomeExpenseChart.vue b/pages/components/IncomeExpenseChart.vue
index dc7fe81..c0405d9 100644
--- a/pages/components/IncomeExpenseChart.vue
+++ b/pages/components/IncomeExpenseChart.vue
@@ -6,6 +6,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { Bar } from 'vue-chartjs';
 import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
 
@@ -18,9 +19,25 @@ const props = defineProps({
   }
 });
 
+const totalIncome = computed(() => props.chartData.datasets[0].data[0] || 0);
+const totalExpenses = computed(() => props.chartData.datasets[0].data[1] || 0);
+
 const chartOptions = {
   responsive: true,
   maintainAspectRatio: false,
+  plugins: {
+    tooltip: {
+      callbacks: {
+        label: (context) => {
+          const label = context.dataset.label || '';
+          const value = context.raw || 0;
+          const total = context.dataset.data[0] + context.dataset.data[1];
+          const percentage = ((value / total) * 100).toFixed(2);
+          return `${label}: $${value.toFixed(2)} (${percentage}%)`;
+        }
+      }
+    }
+  }
 };
 </script>
 
diff --git a/pages/expense-list.vue b/pages/expense-list.vue
index a9a5d73..4f488f3 100644
--- a/pages/expense-list.vue
+++ b/pages/expense-list.vue
@@ -3,10 +3,11 @@
     <h3 class="page-title">Past Records</h3>
 
     <ExpenseFilters
-      v-model:selectedPeriod="selectedPeriod"
-      v-model:selectedCategory="selectedCategory"
+      :selectedPeriod="selectedPeriod"
+      :selectedCategory="selectedCategory"
       :categoryOptions="categoryOptions"
-      @apply-filters="applyFilters"
+      @update:selectedPeriod="selectedPeriod = $event"
+      @update:selectedCategory="selectedCategory = $event"
       @reset-filters="resetFilters"
     />
 
@@ -74,8 +75,8 @@ const isEditModalOpen = ref(false);
 const editForm = ref({});
 const currentPage = ref(1);
 const itemsPerPage = 10;
-const selectedPeriod = ref('');
-const selectedCategory = ref('');
+const selectedPeriod = ref({ label: 'All Time', value: '' });
+const selectedCategory = ref({ label: 'All Categories', value: '' });
 const activeTab = ref('table');
 const isMobile = ref(false);
 const activeChartTab = ref('income-expense');
@@ -108,26 +109,26 @@ const categoryOptions = computed(() => [
 const filteredEntries = computed(() => {
   let filtered = [...entries.value];
 
-  if (selectedPeriod.value) {
+  if (selectedPeriod.value.value) {
     const now = new Date();
-    const startDate = new Date();
-    
-    if (selectedPeriod.value === 'week') {
+    let startDate = new Date(now);
+
+    if (selectedPeriod.value.value === 'week') {
       startDate.setDate(now.getDate() - 7);
-    } else if (selectedPeriod.value === 'month') {
+    } else if (selectedPeriod.value.value === 'month') {
       startDate.setMonth(now.getMonth() - 1);
-    } else if (selectedPeriod.value === 'year') {
+    } else if (selectedPeriod.value.value === 'year') {
       startDate.setFullYear(now.getFullYear() - 1);
     }
 
     filtered = filtered.filter(entry => new Date(entry.date) >= startDate);
   }
 
-  if (selectedCategory.value) {
-    filtered = filtered.filter(entry => entry.category === selectedCategory.value);
+  if (selectedCategory.value.value) {
+    filtered = filtered.filter(entry => entry.category === selectedCategory.value.value);
   }
 
-  return filtered.reverse();
+  return filtered;
 });
 
 const paginatedEntries = computed(() => {
@@ -197,12 +198,12 @@ function onChartTabChange(index: number) {
 }
 
 function applyFilters() {
-  currentPage.value = 1;
+  currentPage.value = 1; // Goes back to first page if the filters changed
 }
 
 function resetFilters() {
-  selectedPeriod.value = '';
-  selectedCategory.value = '';
+  selectedPeriod.value = { label: 'All Time', value: '' };
+  selectedCategory.value = { label: 'All Categories', value: '' };
   currentPage.value = 1;
 }