diff --git a/app/Http/Controllers/HomePageController.php b/app/Http/Controllers/HomePageController.php index 8aed5dc..3203e4a 100644 --- a/app/Http/Controllers/HomePageController.php +++ b/app/Http/Controllers/HomePageController.php @@ -4,14 +4,13 @@ use App\Models\EloSnapshot; use App\Models\Player; -use Carbon\Carbon; use Illuminate\Support\Facades\DB; use Inertia\Inertia; use Inertia\Response; class HomePageController extends Controller { - const MAX_SNAPSHOTS = 14; + const MAX_SNAPSHOTS = 1; public function __invoke(): Response { @@ -57,22 +56,22 @@ public function __invoke(): Response return Inertia::render('HomePage', [ 'solo_snapshots' => $soloRangeSnapshots->map(fn($snapshot) => [ - 'date' => Carbon::parse($snapshot->date)->format('Y-m-d'), + 'date' => $snapshot->date, 'buckets' => json_decode($snapshot->buckets, true), 'n' => $snapshot->n, ])->toArray(), 'team_snapshots' => $teamRangeSnapshots->map(fn($snapshot) => [ - 'date' => Carbon::parse($snapshot->date)->format('Y-m-d'), + 'date' => $snapshot->date, 'buckets' => json_decode($snapshot->buckets, true), 'n' => $snapshot->n, ])->toArray(), 'solo_percentile_snapshots' => $soloPercentileSnapshots->map(fn($snapshot) => [ - 'date' => Carbon::parse($snapshot->date)->format('Y-m-d'), + 'date' => $snapshot->date, 'buckets' => json_decode($snapshot->buckets, true), 'n' => $snapshot->n, ])->toArray(), 'team_percentile_snapshots' => $teamPercentileSnapshots->map(fn($snapshot) => [ - 'date' => Carbon::parse($snapshot->date)->format('Y-m-d'), + 'date' => $snapshot->date, 'buckets' => json_decode($snapshot->buckets, true), 'n' => $snapshot->n, ])->toArray(), diff --git a/resources/js/Composables/useApiClient.ts b/resources/js/Composables/useApiClient.ts index 9cb672a..beb98a2 100644 --- a/resources/js/Composables/useApiClient.ts +++ b/resources/js/Composables/useApiClient.ts @@ -55,9 +55,11 @@ export function useApiClient() { }; const getSnapshotForDate = async ( - date: string, + date: Date, ): Promise => { - const response = await fetch(`/snapshots?date=${date}`); + const response = await fetch( + `/snapshots?date=${date.toISOString().split("T")[0]}`, + ); if (!response.ok) { return { diff --git a/resources/js/Pages/HomePage.vue b/resources/js/Pages/HomePage.vue index 9c2bf4b..3dfb8c7 100644 --- a/resources/js/Pages/HomePage.vue +++ b/resources/js/Pages/HomePage.vue @@ -121,6 +121,7 @@ interface Props { percentile_dates: string[]; leaderboard: Player[]; } + const props = defineProps(); const { getRateableHistory, getSnapshotForDate } = useApiClient(); @@ -205,62 +206,56 @@ const soloSnapshots = ref(props.solo_snapshots); const teamSnapshots = ref(props.team_snapshots); const availableDates = computed(() => { - const soloDates = props.solo_snapshots.map((s) => s.date); - const teamDates = props.team_snapshots.map((s) => s.date); + const soloDates = props.solo_snapshots.map((s) => new Date(s.date)); + const teamDates = props.team_snapshots.map((s) => new Date(s.date)); return [...new Set([...soloDates, ...teamDates])].sort().reverse(); }); const availableDatesObjects = computed(() => { return selectedGraphType.value === "elo_range" - ? props.range_dates.map(parseLocalDate) - : props.percentile_dates.map(parseLocalDate); + ? props.range_dates.map(d => new Date(d)) + : props.percentile_dates.map(d => new Date(d)); }); -const selectedDate = ref( - availableDates.value[0] - ? parseLocalDate(availableDates.value[0]) - : new Date(), -); - -function parseLocalDate(dateStr: string) { - const [year, month, day] = dateStr.split("-").map(Number); - - return new Date(year, month - 1, day); -} +const iso = (date: string) => new Date(date).toISOString(); -const formatDate = (date: Date) => date.toISOString().split("T")[0]; +const selectedDate = ref(availableDates.value[0] ?? new Date()); const currentSoloRangeSnapshot = computed(() => - soloSnapshots.value.find((s) => s.date === formatDate(selectedDate.value)), + soloSnapshots.value.find( + (s) => iso(s.date) === selectedDate.value.toISOString(), + ), ); const currentTeamRangeSnapshot = computed(() => - teamSnapshots.value.find((s) => s.date === formatDate(selectedDate.value)), + teamSnapshots.value.find( + (s) => iso(s.date) === selectedDate.value.toISOString(), + ), ); const currentSoloPercentileSnapshot = computed(() => props.solo_percentile_snapshots.find( - (s) => s.date === formatDate(selectedDate.value), + (s) => iso(s.date) === selectedDate.value.toISOString(), ), ); const currentTeamPercentileSnapshot = computed(() => props.team_percentile_snapshots.find( - (s) => s.date === formatDate(selectedDate.value), + (s) => iso(s.date) === selectedDate.value.toISOString(), ), ); watch(selectedDate, async () => { if ( soloSnapshots.value.find( - (s) => s.date === formatDate(selectedDate.value), + (s) => iso(s.date) === selectedDate.value.toISOString(), ) && teamSnapshots.value.find( - (s) => s.date === formatDate(selectedDate.value), + (s) => iso(s.date) === selectedDate.value.toISOString(), ) ) { return; } - const snapshots = await getSnapshotForDate(formatDate(selectedDate.value)); + const snapshots = await getSnapshotForDate(selectedDate.value); if (snapshots.error !== undefined) { return; @@ -274,11 +269,16 @@ const { renderRangeChart, renderPercentileChart } = useRatingChart(); const updateCharts = () => { if (selectedGraphType.value === "elo_range") { - if (!props.range_dates.includes(formatDate(selectedDate.value))) { + if ( + !props.range_dates + .map(iso) + .includes(selectedDate.value.toISOString()) + ) { selectedDate.value = new Date( props.range_dates[props.range_dates.length - 1], ); } + renderRangeChart( soloChartCanvas, currentSoloRangeSnapshot.value, @@ -295,7 +295,11 @@ const updateCharts = () => { } if (selectedGraphType.value === "percentile") { - if (!props.percentile_dates.includes(formatDate(selectedDate.value))) { + if ( + !props.percentile_dates + .map(iso) + .includes(selectedDate.value.toISOString()) + ) { selectedDate.value = new Date( props.percentile_dates[props.percentile_dates.length - 1], );