fix: build issues

Author: darcyclarke

app/src/components/leaderboard.tsx

@@ -69,10 +69,10 @@ export const Leaderboard = ({ chartData }: LeaderboardProps) => {
                      </div>
 
               {/* Package manager logo - right aligned for balance */}
-              {getPackageManagerLogo(item.packageManager, theme) && (
+              {getPackageManagerLogo(item.packageManager, theme === 'system' ? 'light' : theme) && (
                 <div className="flex-shrink-0">
                   <img
-                    src={getPackageManagerLogo(item.packageManager, theme)}
+                    src={getPackageManagerLogo(item.packageManager, theme === 'system' ? 'light' : theme)}
                     alt={`${item.packageManager} logo`}
                     className={cn(
                       "w-6 h-6",

app/src/components/variation/chart.tsx

@@ -423,7 +423,7 @@ export const VariationChart = ({
                     <CartesianGrid strokeDasharray="3 3" />
                                                                                                                                                                 <XAxis
                       dataKey="name"
-                      tick={<CustomXAxisTick />}
+                      tick={<CustomXAxisTick x={0} y={0} payload={{ value: "" }} />}
                       height={70}
                       interval={0}
                     />

app/src/contexts/package-manager-filter-context.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, ReactNode } from "react";
+import { createContext, useContext, useState, type ReactNode } from "react";
 import type { PackageManager } from "@/types/chart-data";
 
 interface PackageManagerFilterContextType {

app/src/lib/utils.ts

@@ -1,6 +1,6 @@
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
-import type { Variation, Fixture, PackageManager, PackageManagerVersions, BenchmarkChartData, FixtureResult } from "@/types/chart-data"
+import type { Variation, Fixture, PackageManager, PackageManagerVersions, BenchmarkChartData, FixtureResult, PackageCountData } from "@/types/chart-data"
 
 interface VariationCategory {
   title: string;
@@ -14,7 +14,7 @@ export const isTaskExecutionVariation = (variation: string): boolean => {
 };
 
 export const getVariationCategories = (variations: Variation[]): VariationCategory[] => {
-  const packageManagementVariations: Variation[] = [
+  const packageManagementVariations = [
     "clean",
     "node_modules",
     "cache",
@@ -23,11 +23,11 @@ export const getVariationCategories = (variations: Variation[]): VariationCatego
     "cache+lockfile+node_modules",
     "lockfile",
     "lockfile+node_modules"
-  ].filter(v => variations.includes(v as Variation));
+  ].filter(v => variations.includes(v as Variation)) as Variation[];
 
-  const taskExecutionVariations: Variation[] = [
+  const taskExecutionVariations = [
     "run"
-  ].filter(v => variations.includes(v as Variation));
+  ].filter(v => variations.includes(v as Variation)) as Variation[];
 
   const categories: VariationCategory[] = [];
 
@@ -89,8 +89,11 @@ export const calculateLeaderboard = (chartData: BenchmarkChartData): RankingData
         if (typeof time === 'number' && time > 0) {
           times.push({ pm, time });
           // Add to total time and count
-          packageManagerStats[pm].totalTime += time;
-          packageManagerStats[pm].testCount++;
+          const stats = packageManagerStats[pm];
+          if (stats) {
+            stats.totalTime += time;
+            stats.testCount++;
+          }
         }
       });
 
@@ -99,14 +102,25 @@ export const calculateLeaderboard = (chartData: BenchmarkChartData): RankingData
 
       // Award win to fastest
       if (times.length > 0) {
-        packageManagerStats[times[0].pm].wins++;
+        const winnerStats = packageManagerStats[times[0].pm];
+        if (winnerStats) {
+          winnerStats.wins++;
+        }
       }
     });
   });
 
   // Calculate final rankings based on average performance
   const leaderboard: RankingData[] = availablePackageManagers.map(pm => {
     const stats = packageManagerStats[pm];
+    if (!stats) {
+      return {
+        packageManager: pm,
+        wins: 0,
+        averageTime: Number.MAX_SAFE_INTEGER,
+        totalTests: 0
+      };
+    }
     const averageTime = stats.testCount > 0 ? stats.totalTime / stats.testCount : Number.MAX_SAFE_INTEGER;
 
     return {
@@ -354,15 +368,15 @@ export const getAvailablePackageManagers = (
 };
 
 export const getAvailablePackageManagersFromPackageCount = (
-  packageCountData: Array<{ packageCounts?: Record<string, { count: number }> }>,
+  packageCountData: Array<{ packageCounts?: PackageCountData }>,
   allPackageManagers: PackageManager[]
 ): PackageManager[] => {
   const availablePackageManagers = new Set<PackageManager>();
 
   packageCountData.forEach(item => {
     if (item.packageCounts) {
       allPackageManagers.forEach(pm => {
-        const entry = item.packageCounts[pm];
+        const entry = item.packageCounts?.[pm as keyof PackageCountData];
         // Check if the package manager has valid data (entry exists and has count > 0)
         if (entry && typeof entry === 'object' && entry.count && entry.count > 0) {
           availablePackageManagers.add(pm);