Add model breakdown visualization to Power User Requests chart (#24)

* Initial plan

* Add model breakdown to power user chart

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

* Fix color conflict between models and exceeding requests

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

@@ -31,6 +31,7 @@ import {
   getPowerUserDailyData,
   COPILOT_PLANS,
   getPowerUserDailyBreakdown,
+  getUniqueModelsFromBreakdown,
   getLastDateFromData,
   getExceededRequestDetails,
   getUserExceededRequestSummary
@@ -69,6 +70,12 @@ function App() {
     return getPowerUserDailyBreakdown(data, [selectedPowerUser]);
   }, [selectedPowerUser, data, powerUserDailyBreakdown]);
 
+  // Get unique models from the power user breakdown data
+  const getPowerUserModels = useCallback(() => {
+    const breakdown = getFilteredPowerUserBreakdown();
+    return getUniqueModelsFromBreakdown(breakdown);
+  }, [getFilteredPowerUserBreakdown]);
+
   const processFile = useCallback((file: File) => {
     if (!file) return;
 
@@ -307,16 +314,16 @@ function App() {
 
   // Generate colors for models in bar chart
   const getModelColors = useCallback(() => {
-    // Use a set of predefined colors that are visually distinct
+    // Use a set of predefined colors that are visually distinct from exceeding requests red (#ef4444)
     const colors = [
       "#4285F4", // Blue
-      "#EA4335", // Red
+      "#9C27B0", // Purple (changed from red to avoid confusion with exceeding requests)
       "#FBBC05", // Yellow
       "#34A853", // Green
       "#8E44AD", // Purple
       "#F39C12", // Orange
       "#16A085", // Teal
-      "#E74C3C", // Red-Orange
+      "#FF9800", // Amber (changed from red-orange to avoid confusion with exceeding requests)
       "#3498DB", // Light Blue
       "#1ABC9C"  // Turquoise
     ];
@@ -622,7 +629,7 @@ function App() {
                                   onClick={() => selectedPowerUser && handlePowerUserSelect(null)}
                                   title={selectedPowerUser ? 'Click to show all power users' : undefined}
                                 >
-                                  Power User Requests Breakdown (Compliant vs Exceeding)
+                                  Power User Requests Breakdown (By Model & Compliance)
                                   {selectedPowerUser && (
                                     <span className="text-sm font-normal text-muted-foreground ml-2">
                                       - {selectedPowerUser}
@@ -646,10 +653,21 @@ function App() {
                               </div>
                               <div className="h-[300px]">
                                 <ChartContainer 
-                                  config={{
-                                    compliantRequests: { color: "#10b981" }, // green
-                                    exceedingRequests: { color: "#ef4444" }, // red
-                                  }}
+                                  config={(() => {
+                                    const models = getPowerUserModels();
+                                    const modelColors = getModelColors();
+                                    const config: Record<string, { color: string }> = {
+                                      compliantRequests: { color: "#10b981" }, // green
+                                      exceedingRequests: { color: "#ef4444" }, // red
+                                    };
+                                    
+                                    // Add each model with its color
+                                    models.forEach((model, index) => {
+                                      config[model] = { color: modelColors[model] || "#94a3b8" };
+                                    });
+                                    
+                                    return config;
+                                  })()}
                                   className="h-full w-full"
                                 >
                                   <BarChart data={getFilteredPowerUserBreakdown()}>
@@ -739,7 +757,21 @@ function App() {
                                     />
                                     <Legend content={(props) => <CustomLegend payload={props.payload} />} />
 
-                                    {/* Stacked bars for compliant and exceeding requests */}
+                                    {/* Dynamic stacked bars for each model */}
+                                    {getPowerUserModels().map((model) => {
+                                      const modelColors = getModelColors();
+                                      return (
+                                        <Bar
+                                          key={model}
+                                          dataKey={model}
+                                          name={model}
+                                          stackId="models"
+                                          fill={modelColors[model] || "#94a3b8"}
+                                        />
+                                      );
+                                    })}
+                                    
+                                    {/* Keep the original compliant/exceeding bars but make them toggleable */}
                                     {visibleBars.includes('compliantRequests') && (
                                       <Bar
                                         dataKey="compliantRequests"

src/lib/utils.ts

@@ -283,6 +283,8 @@ export interface PowerUserDailyBreakdown {
   date: string;
   compliantRequests: number;
   exceedingRequests: number;
+  // Model breakdown - each model will have its own field for recharts stacking
+  [key: string]: string | number; // Allow dynamic model fields
 }
 
 
@@ -443,6 +445,16 @@ export function getPowerUserDailyBreakdown(data: CopilotUsageData[], powerUserNa
       };
     }
 
+    // Track model usage - create field name for this model
+    const modelFieldName = item.model;
+    if (!dailyBreakdown[date][modelFieldName]) {
+      dailyBreakdown[date][modelFieldName] = 0;
+    }
+    
+    // Add to model-specific field
+    dailyBreakdown[date][modelFieldName] = (dailyBreakdown[date][modelFieldName] as number) + item.requestsUsed;
+    
+    // Keep the existing compliant/exceeding breakdown for backwards compatibility
     if (item.exceedsQuota) {
       dailyBreakdown[date].exceedingRequests += item.requestsUsed;
     } else {
@@ -454,6 +466,22 @@ export function getPowerUserDailyBreakdown(data: CopilotUsageData[], powerUserNa
   return Object.values(dailyBreakdown).sort((a, b) => a.date.localeCompare(b.date));
 }
 
+// Helper function to extract all unique models from power user daily breakdown data
+export function getUniqueModelsFromBreakdown(breakdownData: PowerUserDailyBreakdown[]): string[] {
+  const modelSet = new Set<string>();
+  
+  breakdownData.forEach(dayData => {
+    Object.keys(dayData).forEach(key => {
+      // Skip non-model fields (date, compliantRequests, exceedingRequests)
+      if (key !== 'date' && key !== 'compliantRequests' && key !== 'exceedingRequests') {
+        modelSet.add(key);
+      }
+    });
+  });
+  
+  return Array.from(modelSet).sort();
+}
+
 // Function to get the last date from CSV data
 export function getLastDateFromData(data: CopilotUsageData[]): string | null {
   if (!data.length) return null;

src/test/power-user-breakdown.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { getPowerUserDailyBreakdown, CopilotUsageData } from '../lib/utils';
+import { getPowerUserDailyBreakdown, getUniqueModelsFromBreakdown, CopilotUsageData } from '../lib/utils';
 
 describe('Power User Daily Breakdown', () => {
   const mockData: CopilotUsageData[] = [
@@ -127,4 +127,43 @@ describe('Power User Daily Breakdown', () => {
     expect(result[0].compliantRequests).toBe(1.5);
     expect(result[0].exceedingRequests).toBe(2.3);
   });
+
+  it('should include model-specific fields in daily breakdown', () => {
+    const powerUserNames = ['power-user-1'];
+    const result = getPowerUserDailyBreakdown(mockData, powerUserNames);
+    
+    // Check that model fields are included
+    const day1 = result.find(r => r.date === '2025-01-01');
+    expect(day1).toBeDefined();
+    expect(day1?.['gpt-4']).toBe(15); // From mockData, power-user-1 used gpt-4 for 15 requests on 2025-01-01
+    expect(day1?.['claude-3']).toBe(8); // From mockData, power-user-1 used claude-3 for 8 requests on 2025-01-01
+    
+    const day2 = result.find(r => r.date === '2025-01-02');
+    expect(day2).toBeDefined(); 
+    expect(day2?.['gpt-4']).toBe(12); // From mockData, power-user-1 used gpt-4 for 12 requests on 2025-01-02
+    expect(day2?.['claude-3']).toBeUndefined(); // No claude-3 usage on 2025-01-02
+  });
+
+  it('should aggregate model usage across multiple power users', () => {
+    const powerUserNames = ['power-user-1', 'power-user-2'];
+    const result = getPowerUserDailyBreakdown(mockData, powerUserNames);
+    
+    const day1 = result.find(r => r.date === '2025-01-01');
+    expect(day1).toBeDefined();
+    // power-user-1: 15 gpt-4, power-user-2: 20 gpt-4 = 35 total
+    expect(day1?.['gpt-4']).toBe(35);
+    // power-user-1: 8 claude-3, power-user-2: 0 claude-3 = 8 total  
+    expect(day1?.['claude-3']).toBe(8);
+  });
+
+  it('should extract unique models from breakdown data', () => {
+    const powerUserNames = ['power-user-1', 'power-user-2'];
+    const result = getPowerUserDailyBreakdown(mockData, powerUserNames);
+    const models = getUniqueModelsFromBreakdown(result);
+    
+    expect(models).toContain('gpt-4');
+    expect(models).toContain('claude-3');
+    expect(models).toHaveLength(2);
+    expect(models).toEqual(['claude-3', 'gpt-4']); // Should be sorted
+  });
 });