# All files / src/components/stats StatComparison.tsx

0% Statements 0/65
100% Branches 1/1
100% Functions 1/1
0% Lines 0/65

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92

     import React from 'react';

    interface StatComparisonProps {
      homeStats?: Record<string, any>;
      awayStats?: Record<string, any>;
      homeTeam?: string;
      awayTeam?: string;
    }

    export default function StatComparison({ homeStats, awayStats, homeTeam, awayTeam }: StatComparisonProps) {
      if (!homeStats || !awayStats) {
        return (
          <div className="bg-gray-800 rounded-lg p-6">
            <h3 className="text-xl font-bold text-white mb-4">Team Statistics</h3>
            <p className="text-gray-400">No team statistics available</p>
          </div>
        );
      }

      // Extract common stat keys
      const statKeys = Array.from(new Set([
        ...Object.keys(homeStats),
        ...Object.keys(awayStats)
      ])).filter(key => typeof homeStats[key] === 'object' || typeof awayStats[key] === 'object');

      const renderStatRow = (label: string, homeValue: any, awayValue: any) => {
        const homeNum = typeof homeValue === 'number' ? homeValue :
                        homeValue?.total !== undefined ? homeValue.total : 0;
        const awayNum = typeof awayValue === 'number' ? awayValue :
                        awayValue?.total !== undefined ? awayValue.total : 0;

        const total = homeNum + awayNum;
        const homePercent = total > 0 ? (homeNum / total) * 100 : 50;
        const awayPercent = total > 0 ? (awayNum / total) * 100 : 50;

        return (
          <div key={label} className="mb-4">
            <div className="flex justify-between items-center mb-1">
              <span className="text-blue-400 font-medium">{awayNum}</span>
              <span className="text-gray-300 font-semibold">{label}</span>
              <span className="text-red-400 font-medium">{homeNum}</span>
            </div>
            <div className="flex h-2 rounded-full overflow-hidden bg-gray-700">
              <div
                className="bg-blue-500 transition-all duration-300"
                style={{ width: `${awayPercent}%` }}
              />
              <div
                className="bg-red-500 transition-all duration-300"
                style={{ width: `${homePercent}%` }}
              />
            </div>
          </div>
        );
      };

      const formatStatLabel = (key: string): string => {
        return key.split('_').map(word =>
          word.charAt(0).toUpperCase() + word.slice(1)
        ).join(' ');
      };

      return (
        <div className="bg-gray-800 rounded-lg p-6">
          <h3 className="text-xl font-bold text-white mb-4">Team Statistics</h3>

          <div className="flex justify-between items-center mb-6 text-sm">
            <span className="text-blue-400 font-bold">{awayTeam || 'Away'}</span>
            <span className="text-gray-500">vs</span>
            <span className="text-red-400 font-bold">{homeTeam || 'Home'}</span>
          </div>

          <div className="space-y-4">
            {statKeys.map(key => {
              const homeValue = homeStats[key];
              const awayValue = awayStats[key];

              if (!homeValue && !awayValue) return null;

              return renderStatRow(formatStatLabel(key), homeValue, awayValue);
            })}

            {statKeys.length === 0 && (
              <p className="text-gray-400 text-center py-4">
                No comparable statistics available
              </p>
            )}
          </div>
        </div>
      );
    }