diff --git a/packages/stats/app/src/routes/index.css b/packages/stats/app/src/routes/index.css index 9cc3bfe13b8..472280cca33 100644 --- a/packages/stats/app/src/routes/index.css +++ b/packages/stats/app/src/routes/index.css @@ -1545,6 +1545,25 @@ body { background: var(--stats-layer-2); } +[data-page="stats"] [data-slot="leaderboard-period"] { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 12px; + margin-top: 24px; + color: var(--stats-muted); + font-size: 13px; +} + +[data-page="stats"] [data-slot="leaderboard-period"] [data-component="usage-filter"] button { + width: auto; + padding: 0 8px; +} + +[data-page="stats"] [data-slot="leaderboard-period"] + [data-component="leaderboard"] { + margin-top: 12px; +} + [data-page="stats"] [data-component="chart-tooltip"] { position: absolute; right: auto; diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx index b31df5e832d..45cb4d5972c 100644 --- a/packages/stats/app/src/routes/index.tsx +++ b/packages/stats/app/src/routes/index.tsx @@ -65,7 +65,7 @@ type StatsHomePageData = { updatedAt: string | null usage: UsagePoint[] users: UsagePoint[] - leaderboard: LeaderboardEntry[] + leaderboard: { daily: LeaderboardEntry[]; weekly: LeaderboardEntry[] } market: MarketDay[] tokenCost: TokenCostEntry[] cacheRatio: CacheRatioEntry[] @@ -86,7 +86,7 @@ const getData = query(async () => { updatedAt: stats.updatedAt, usage: stats.usage.Go["2M"], users: stats.users.Go["2M"], - leaderboard: stats.leaderboard.Go["2M"], + leaderboard: { daily: stats.leaderboard.Go["1D"], weekly: stats.leaderboard.Go["1W"] }, market: stats.market["2M"], tokenCost: priceTokenCostFromCatalog(stats.tokenCost.Go, catalog), cacheRatio: stats.cacheRatio.Go, @@ -162,7 +162,7 @@ export default function StatsHome() { () + const [period, setPeriod] = createSignal<"weekly" | "daily">("weekly") + const leaderboard = createMemo(() => props.leaderboard[period()]) return (
@@ -397,14 +399,40 @@ function TopModelsSection(props: { > +
+
+ + +
+
0} + when={leaderboard().length > 0} fallback={ } > isKnownCatalogLab(props.entry.provider, props.catalogLabs) + const icon = () => (hasProvider() ? getProviderIconId(props.entry.author) : "synthetic") return ( props.onActiveModelChange(props.entry.model)} > {String(props.entry.rank).padStart(2, "0")} - - +