Skip to content

Commit 8ccc88a

Browse files
ThomasJButlerThomasJButler
committed
feat: swap Goals Trend with Team Performance and add Highest Scoring Match stat
Chart Layout Changes: - Move Team Performance radar chart to full-width top position - Move Goals Trend to 4th position in 2-column grid (more horizontal space) - Goals Trend now has better room to display full season data Stats Section Changes: - Remove 'Queries Run' stat (not relevant to football data) - Add 'Highest Scoring Match' stat showing: - Total goals in highest scoring match - Score breakdown (e.g., '5-4') - Zap icon for high-energy feel - Calculate highest scoring match from season data Result: Better chart layout giving Goals Trend more space, and more relevant football statistics
1 parent d2abbb1 commit 8ccc88a

2 files changed

Lines changed: 68 additions & 44 deletions

File tree

‎src/components/Dashboard.svelte‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
import { format } from 'date-fns';
2828
import { tweened } from 'svelte/motion';
2929
import { cubicOut } from 'svelte/easing';
30-
import { TrendingUp, Users, Target, BarChart2 } from 'lucide-svelte';
30+
import { TrendingUp, Users, Target, Zap } from 'lucide-svelte';
3131
import { supabase, hasValidSupabaseConfig, getRecentMatches } from '../lib/supabase';
3232
import { apiService } from '../services/apiService';
3333
import EnhancedVisualizations from './EnhancedVisualizations.svelte';
@@ -59,13 +59,13 @@
5959
let totalMatches = tweened(0, { duration: 1500, easing: cubicOut });
6060
let totalGoals = tweened(0, { duration: 1800, easing: cubicOut });
6161
let averageGoals = tweened(0, { duration: 1200, easing: cubicOut });
62-
let queriesExecuted = tweened(0, { duration: 1400, easing: cubicOut });
6362
6463
// Statistics
6564
let homeWinPercentage = 0;
6665
let mostCommonScore = '0-0';
6766
let topScoringTeam = '';
6867
let totalTeams = 0;
68+
let highestScoringMatch = { goals: 0, score: '0-0' };
6969
7070
let goalsChart: ChartData<"line", number[], string> = {
7171
labels: [],
@@ -116,6 +116,18 @@
116116
const last15 = dashboardData.recent_matches.slice(0, 15).reverse();
117117
goalsChart.labels = last15.map(m => format(new Date(m.match_date), 'MMM d'));
118118
goalsChart.datasets[0].data = last15.map(m => (m.home_score || 0) + (m.away_score || 0));
119+
120+
// Calculate highest scoring match
121+
let highestMatchGoals = 0;
122+
let highestMatchScore = '0-0';
123+
dashboardData.recent_matches.forEach(m => {
124+
const totalGoals = (m.home_score || 0) + (m.away_score || 0);
125+
if (totalGoals > highestMatchGoals) {
126+
highestMatchGoals = totalGoals;
127+
highestMatchScore = `${m.home_score || 0}-${m.away_score || 0}`;
128+
}
129+
});
130+
highestScoringMatch = { goals: highestMatchGoals, score: highestMatchScore };
119131
}
120132
121133
console.log('Dashboard loaded from API:', {
@@ -230,6 +242,18 @@
230242
}
231243
});
232244
245+
// Calculate highest scoring match
246+
let highestMatchGoals = 0;
247+
let highestMatchScore = '0-0';
248+
validMatches.forEach(m => {
249+
const totalGoals = (m.home_score || 0) + (m.away_score || 0);
250+
if (totalGoals > highestMatchGoals) {
251+
highestMatchGoals = totalGoals;
252+
highestMatchScore = `${m.home_score || 0}-${m.away_score || 0}`;
253+
}
254+
});
255+
highestScoringMatch = { goals: highestMatchGoals, score: highestMatchScore };
256+
233257
// Count unique teams (should be close to 397 from European leagues)
234258
const teams = new Set<string>();
235259
validMatches.forEach(m => {
@@ -587,17 +611,17 @@
587611
<div class="bg-white dark:bg-slate-900 rounded-xl p-3 sm:p-6 shadow-lg hover:shadow-xl transition-shadow">
588612
<div class="flex items-start justify-between mb-2 sm:mb-4">
589613
<div class="bg-amber-500/10 dark:bg-amber-500/20 p-2 sm:p-3 rounded-lg">
590-
<BarChart2 class="w-4 h-4 sm:w-6 sm:h-6 text-amber-600 dark:text-amber-400" />
614+
<Zap class="w-4 h-4 sm:w-6 sm:h-6 text-amber-600 dark:text-amber-400" />
591615
</div>
592616
</div>
593617
<div class="text-xs sm:text-sm font-medium text-slate-600 dark:text-slate-400 mb-1">
594-
Queries Run
618+
Highest Scoring Match
595619
</div>
596620
<div class="text-lg sm:text-2xl font-bold text-slate-900 dark:text-white mb-1">
597-
{$queriesExecuted.toFixed(0)}
621+
{highestScoringMatch.goals} Goals
598622
</div>
599623
<div class="text-xs text-slate-500 dark:text-slate-500 leading-tight">
600-
Today
624+
{highestScoringMatch.score}
601625
</div>
602626
</div>
603627
</div>

‎src/components/EnhancedVisualizations.svelte‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -830,29 +830,29 @@
830830
</div>
831831
</div>
832832

833-
<!-- Charts Grid -->
834-
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 transition-opacity duration-500 {isLoading ? 'opacity-50' : 'opacity-100'}">
835-
<!-- Goals Over Time -->
836-
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20">
837-
<div class="flex items-center justify-between mb-4">
838-
<div class="flex items-center gap-2">
839-
<TrendingUp class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
840-
<h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">Goals Trend</h3>
841-
</div>
842-
<button
843-
on:click={() => handleQueryClick('goals_trend', 'Goals Trend')}
844-
class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
845-
title="Generate SQL query for this chart"
846-
>
847-
<Sparkles class="w-3.5 h-3.5" />
848-
<span>Query</span>
849-
</button>
850-
</div>
851-
<div class="h-48 sm:h-64">
852-
<Line data={goalsOverTimeData} options={chartOptions} />
833+
<!-- Team Performance Radar - Full Width -->
834+
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20 transition-opacity duration-500 {isLoading ? 'opacity-50' : 'opacity-100'}">
835+
<div class="flex items-center justify-between mb-4">
836+
<div class="flex items-center gap-2">
837+
<Activity class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
838+
<h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">Team Performance</h3>
853839
</div>
840+
<button
841+
on:click={() => handleQueryClick('team_performance', 'Team Performance')}
842+
class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
843+
title="Generate SQL query for this chart"
844+
>
845+
<Sparkles class="w-3.5 h-3.5" />
846+
<span>Query</span>
847+
</button>
854848
</div>
849+
<div class="h-64 sm:h-80">
850+
<Radar data={teamPerformanceData} options={radarOptions} />
851+
</div>
852+
</div>
855853

854+
<!-- Charts Grid -->
855+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 transition-opacity duration-500 {isLoading ? 'opacity-50' : 'opacity-100'}">
856856
<!-- League Table (Top Teams) -->
857857
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20">
858858
<div class="flex items-center justify-between mb-4">
@@ -915,26 +915,26 @@
915915
<Bar data={goalDistributionData} options={chartOptions} />
916916
</div>
917917
</div>
918-
</div>
919918

920-
<!-- Team Performance Radar - Full Width on Mobile -->
921-
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20 transition-opacity duration-500 {isLoading ? 'opacity-50' : 'opacity-100'}">
922-
<div class="flex items-center justify-between mb-4">
923-
<div class="flex items-center gap-2">
924-
<Activity class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
925-
<h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">Team Performance</h3>
919+
<!-- Goals Over Time - Now with more space! -->
920+
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 sm:p-6 border border-slate-200 dark:border-green-500/20">
921+
<div class="flex items-center justify-between mb-4">
922+
<div class="flex items-center gap-2">
923+
<TrendingUp class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
924+
<h3 class="text-base sm:text-lg font-bold text-slate-900 dark:text-green-400 font-mono">Goals Trend</h3>
925+
</div>
926+
<button
927+
on:click={() => handleQueryClick('goals_trend', 'Goals Trend')}
928+
class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
929+
title="Generate SQL query for this chart"
930+
>
931+
<Sparkles class="w-3.5 h-3.5" />
932+
<span>Query</span>
933+
</button>
934+
</div>
935+
<div class="h-48 sm:h-64">
936+
<Line data={goalsOverTimeData} options={chartOptions} />
926937
</div>
927-
<button
928-
on:click={() => handleQueryClick('team_performance', 'Team Performance')}
929-
class="flex items-center gap-1.5 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm"
930-
title="Generate SQL query for this chart"
931-
>
932-
<Sparkles class="w-3.5 h-3.5" />
933-
<span>Query</span>
934-
</button>
935-
</div>
936-
<div class="h-64 sm:h-80">
937-
<Radar data={teamPerformanceData} options={radarOptions} />
938938
</div>
939939
</div>
940940

0 commit comments

Comments
 (0)