fix: Align pie chart data with table data in dashboard

This commit fixes the discrepancy between the pie chart and table data in the dashboard view. The changes ensure that:

1. The pie chart now uses the same today's data as shown in the table
2. The pie chart legend now correctly displays today's usage time for each site
3. Added a helper function getTodaySummaryTime() to consistently extract today's data

This ensures consistency across all dashboard visualizations and improves the accuracy of the data representation.

Author: abyabraham93

src/components/TopSitesPieChart.vue

@@ -10,7 +10,7 @@
           <div class="site-color" :style="{ backgroundColor: chartColors[index] }"></div>
           <div class="site-info">
             <div class="site-url">{{ site.url }}</div>
-            <div class="site-time">{{ convertSummaryTimeToString(site.summaryTime) }}</div>
+            <div class="site-time">{{ convertSummaryTimeToString(getTodaySummaryTime(site)) }}</div>
           </div>
         </div>
       </div>
@@ -35,6 +35,7 @@ import { DARK_MODE_DEFAULT, StorageParams } from '../storage/storage-params';
 import { useTodayTabListSummary } from '../functions/useTodayTabListSummary';
 import { SortingBy } from '../utils/enums';
 import { Tab } from '../entity/tab';
+import { todayLocalDate } from '../utils/date';
 
 const settingsStorage = injectStorage();
 const darkMode = ref(false);
@@ -51,29 +52,33 @@ const chartColors = [
   '#e256ae',
 ];
 
-// Process tabs to get top 4 sites and combine the rest as "Others"
+// Process tabs to get top 4 sites for the pie chart using TODAY's data
 async function processTabsData() {
   isLoading.value = true;
   
-  // Get today's tab list summary
+  // Get today's tab list summary - same data source as used in TabList.vue
   const tabSummary = await useTodayTabListSummary(SortingBy.UsageTime);
   
   if (!tabSummary || !tabSummary.tabs || tabSummary.tabs.length === 0) {
     isLoading.value = false;
     return;
   }
   
+  // Get the tabs data
   const tabs = tabSummary.tabs;
-  const summaryTime = tabSummary.summaryTime || 0;
   
   // Extract top 4 sites
   const top4Sites = tabs.slice(0, 4);
   
-  // Prepare data for chart - only top 4 sites
+  // Get TODAY's data for each site - this is what's shown in the table
   const labels = top4Sites.map(tab => tab.url);
-  const timeValues = top4Sites.map(tab => tab.summaryTime);
+  const timeValues = top4Sites.map(tab => {
+    // Get today's summary time for this tab - exactly as shown in the table
+    const todayData = tab.days.find(day => day.date === todayLocalDate());
+    return todayData ? todayData.summary : 0;
+  });
   
-  // Save top sites for the list
+  // Save top sites for the list - keep the original Tab objects
   topSites.value = top4Sites;
   
   // Set chart data
@@ -132,6 +137,12 @@ function setupChartData(labels: string[], timeValues: number[]) {
   };
 }
 
+// Get today's summary time for a tab
+function getTodaySummaryTime(tab: Tab): number {
+  const todayData = tab.days.find(day => day.date === todayLocalDate());
+  return todayData ? todayData.summary : 0;
+}
+
 // Handler for refresh events
 function handleRefresh() {
   processTabsData();