[Feature] Show last date available in CSV and limit chart domain (#12)

* Initial plan

* Implement last date display and chart domain limits

Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>

Author: Copilot

src/App.tsx

@@ -24,7 +24,8 @@ import {
   getModelUsageSummary,
   getDailyModelData,
   getPowerUsers,
-  getPowerUserDailyData
+  getPowerUserDailyData,
+  getLastDateFromData
 } from "@/lib/utils";
 
 function App() {
@@ -34,6 +35,7 @@ function App() {
   const [modelSummary, setModelSummary] = useState<ModelUsageSummary[]>([]);
   const [dailyModelData, setDailyModelData] = useState<DailyModelData[]>([]);
   const [powerUserSummary, setPowerUserSummary] = useState<PowerUserSummary | null>(null);
+  const [lastDateAvailable, setLastDateAvailable] = useState<string | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -94,6 +96,10 @@ function App() {
         const powerUsers = getPowerUsers(parsedData);
         setPowerUserSummary(powerUsers);
 
+        // Get the last date available in the CSV
+        const lastDate = getLastDateFromData(parsedData);
+        setLastDateAvailable(lastDate);
+        
         setIsProcessing(false);
         toast.success(`Loaded ${parsedData.length} records successfully`);
       } catch (error) {
@@ -133,6 +139,7 @@ function App() {
         setModelSummary([]);
         setDailyModelData([]);
         setPowerUserSummary(null);
+        setLastDateAvailable(null);
       }
     };
 
@@ -453,7 +460,8 @@ function App() {
                                     <XAxis 
                                       dataKey="date" 
                                       tick={{ fill: 'var(--foreground)' }}
-                                      tickLine={{ stroke: 'var(--border)' }} 
+                                      tickLine={{ stroke: 'var(--border)' }}
+                                      domain={['dataMin', lastDateAvailable || 'dataMax']}
                                     />
                                     <YAxis 
                                       tick={{ fill: 'var(--foreground)' }}
@@ -559,7 +567,14 @@ function App() {
           </div>
 
           <div>
-            <h2 className="text-2xl font-semibold mb-2">Daily Usage Overview</h2>
+            <div className="flex justify-between items-center mb-2">
+              <h2 className="text-2xl font-semibold">Daily Usage Overview</h2>
+              {lastDateAvailable && (
+                <div className="text-sm text-muted-foreground">
+                  Data available through: <span className="font-medium">{lastDateAvailable}</span>
+                </div>
+              )}
+            </div>
             <Separator className="mb-6" />
             <div className="bg-card p-4 rounded-lg border mb-8">
               <ChartContainer 
@@ -574,7 +589,8 @@ function App() {
                   <XAxis 
                     dataKey="date" 
                     tick={{ fill: 'var(--foreground)' }}
-                    tickLine={{ stroke: 'var(--border)' }} 
+                    tickLine={{ stroke: 'var(--border)' }}
+                    domain={['dataMin', lastDateAvailable || 'dataMax']}
                   />
                   <YAxis 
                     tick={{ fill: 'var(--foreground)' }}
@@ -640,7 +656,14 @@ function App() {
             </div>
 
             {/* Bar Chart - Requests per Model per Day */}
-            <h2 className="text-2xl font-semibold mb-2">Requests per Model per Day</h2>
+            <div className="flex justify-between items-center mb-2">
+              <h2 className="text-2xl font-semibold">Requests per Model per Day</h2>
+              {lastDateAvailable && (
+                <div className="text-sm text-muted-foreground">
+                  Data available through: <span className="font-medium">{lastDateAvailable}</span>
+                </div>
+              )}
+            </div>
             <Separator className="mb-6" />
             <div className="bg-card p-4 rounded-lg border">
               <ChartContainer 
@@ -653,6 +676,7 @@ function App() {
                     dataKey="date"
                     tick={{ fill: 'var(--foreground)' }}
                     tickLine={{ stroke: 'var(--border)' }}
+                    domain={['dataMin', lastDateAvailable || 'dataMax']}
                   />
                   <YAxis 
                     tick={{ fill: 'var(--foreground)' }}

src/lib/utils.ts

@@ -317,3 +317,14 @@ export function getPowerUserDailyData(powerUsers: PowerUserData[]): Array<{
     .map(([date, requests]) => ({ date, requests }))
     .sort((a, b) => a.date.localeCompare(b.date));
 }
+
+// Function to get the last date from CSV data
+export function getLastDateFromData(data: CopilotUsageData[]): string | null {
+  if (!data.length) return null;
+  
+  // Get all dates and find the maximum
+  const dates = data.map(item => item.timestamp.toISOString().split('T')[0]);
+  const sortedDates = dates.sort((a, b) => a.localeCompare(b));
+  
+  return sortedDates[sortedDates.length - 1];
+}

src/main.tsx

@@ -4,7 +4,7 @@ import App from './App.tsx'
 import "./main.css"
 import "./styles/theme.css"
 import "./index.css"
-import "@github/spark/spark"
+// @github/spark/spark import is excluded and handled externally
 
 createRoot(document.getElementById('root')!).render(
     <App />

src/test/last-date-functionality.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { getLastDateFromData, parseCSV } from '../lib/utils';
+
+describe('Last Date Functionality', () => {
+  const csvContent = `"Timestamp","User","Model","Requests Used","Exceeds Monthly Quota","Total Monthly Quota"
+"2025-06-10T05:13:27.8766440Z","user1","gpt-4.1-2025-04-14","1","False","Unlimited"
+"2025-06-11T05:09:40.8432110Z","user2","gpt-4.1-2025-04-14","1","False","Unlimited"
+"2025-06-09T10:30:00.0000000Z","user3","gpt-4.1-2025-04-14","2","True","Unlimited"
+"2025-06-12T15:45:00.0000000Z","user1","gpt-3.5-turbo","3","False","Unlimited"`;
+
+  it('should return the last date from CSV data', () => {
+    const parsedData = parseCSV(csvContent);
+    const lastDate = getLastDateFromData(parsedData);
+    
+    expect(lastDate).toBe('2025-06-12');
+  });
+
+  it('should return null for empty data', () => {
+    const lastDate = getLastDateFromData([]);
+    
+    expect(lastDate).toBeNull();
+  });
+
+  it('should handle single record data', () => {
+    const singleRecordCsv = `"Timestamp","User","Model","Requests Used","Exceeds Monthly Quota","Total Monthly Quota"
+"2025-06-15T08:00:00.0000000Z","user1","gpt-4.1-2025-04-14","1","False","Unlimited"`;
+    
+    const parsedData = parseCSV(singleRecordCsv);
+    const lastDate = getLastDateFromData(parsedData);
+    
+    expect(lastDate).toBe('2025-06-15');
+  });
+
+  it('should handle multiple records on the same day', () => {
+    const sameDayCsv = `"Timestamp","User","Model","Requests Used","Exceeds Monthly Quota","Total Monthly Quota"
+"2025-06-10T05:13:27.8766440Z","user1","gpt-4.1-2025-04-14","1","False","Unlimited"
+"2025-06-10T15:30:00.0000000Z","user2","gpt-4.1-2025-04-14","2","False","Unlimited"
+"2025-06-10T23:59:59.9999999Z","user3","gpt-3.5-turbo","1","True","Unlimited"`;
+    
+    const parsedData = parseCSV(sameDayCsv);
+    const lastDate = getLastDateFromData(parsedData);
+    
+    expect(lastDate).toBe('2025-06-10');
+  });
+});