Fixing data direction and filters, and adding numbers to charts

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;

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>
 

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>
 

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;
 }