mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-07 01:56:53 +00:00
feat(web/default): unified UI overhaul — Base UI migration, theme presets, rankings dashboard, and table toolbar refactor (#4633)
* 🎨 feat(web/default): add shadcn-style theme presets, radius prefs, and fix selection badges Integrate the qn-platform–style OKLCH color system into the default frontend while keeping the existing blue-tinted dark tokens for the default theme. Add [data-theme-preset] palettes for seven named presets plus the default zinc-like scale, define [data-theme-radius] overrides so user radius beats preset --radius, and align the Tailwind @custom-variant dark helper with .dark usage. Introduce ThemeCustomizationProvider to own preset and radius state, persist choices in cookies (theme-preset, theme-radius), and sync data-theme-preset / data-theme-radius on <html>. Wrap the tree in main.tsx. Extend ConfigDrawer with theme preset swatches (scoped data-theme-preset) and radius previews wired to context; refactor swatch/card markup so selected CircleCheck badges sit outside clipped rows (remove outer overflow-hidden that hid the centered checkmark). Add i18n keys for preset names, radius, and accessibility labels across en, zh, fr, ja, ru, vi. * 🎨 fix(web): align segmented controls with theme radius tokens - Replace hard-coded inner pill radii (rounded-[5px]) on dashboard chart toolbars with radius-md so the active state follows --radius when users change Radius in Theme Settings. - Use nested radii consistent with TabsList/TabsTrigger: outer rounded-lg (var(--radius)) and inner rounded-md (calc(var(--radius) - 2px)) so the track and active thumb stay concentric at small scales (e.g. 0.3rem) instead of a squared “focus” block inside a rounded shell. - Apply the same pattern to pricing SegmentedControl and the segmented groups in consumption-distribution-chart, model-charts, and user-charts. Verified: bun run typecheck (web/default) * ✨ feat(pricing): enrich model details with uptime sparkline and API documentation Add a compact 30-day uptime sparkline (OpenRouter-style bars + aggregate %) with per-day tooltips, surface it in a status row under quick stats and in the per-group performance table, and extend mock data so uptime series are stable and optionally scoped by group. Introduce an API tab with Shiki-highlighted code samples (cURL, Python, TypeScript, JavaScript), endpoint-type switching, authentication guidance, a supported-parameters table, and mock per-group RPM/TPM/RPD limits. Infer vendor, tokenizer, license, and data-retention hints for a provider & data privacy card on the Overview tab (capabilities/modalities stay with model identity; rate limits stay with the API tab). Update i18n for all new user-facing strings across en, zh, fr, ja, ru, and vi. * 🏆 feat(rankings): add comprehensive rankings dashboard Add a mock-data powered rankings experience with period tabs, model, app, and vendor leaderboards, market share and history charts, movers, new releases, and per-category sections while backend analytics are pending. Link ranked models to pricing details and ranked vendors to filtered pricing results, and include localized copy for all supported frontend locales. * fix(theme): correct theme preset selection state - update Base UI Radio selectors to use data-checked/data-unchecked states. - fix unchecked theme options still showing selected indicators. - isolate the default theme preview tokens to prevent preset changes from leaking into it. * fix(setup): correct usage mode radio state - use Base UI data-checked/data-unchecked states for RadioGroup styling. - hide radio indicators when options are unchecked to avoid setup page display issues. - drive usage mode card and icon selection styles from Base UI state. * fix(auth): submit sign-in and sign-up forms * 🎨 refactor: Align default theme with shadcn Base Nova and prune legacy customization Migrate shadcn UI to Base UI primitives via CLI (`base-nova` / `components.json`) and reinstall full component registry with `--overwrite`, including Hugeicons-backed widgets and newly added registry components. - Remove custom multi-preset/theme-radius system (`ThemeCustomizationProvider`, cookies, preset UI from config drawer); rely on official semantic CSS tokens + light/dark only. - Replace `theme.css` with shadcn’s documented neutral `:root`/`.dark` palette and `@theme inline` mappings (plus skeleton token vars for existing shimmer usage). - Update global styles for Base UI: collapsible animation uses `--collapsible-panel-height`; clarify scroll-lock override comment. Application compatibility: - Keep minimal shims where app code diverged from official APIs (popover collision props, combobox legacy `options` callers, Spinner prop typing). - Switch interactive styling from Radix-era `data-state` / `--radix-*` selectors to Base UI semantics (`data-open`, `data-popup-open`, `data-panel-open`, `--anchor-width`, etc.) Tooling / docs / build: - Rename Rsbuild vendor chunk grouping to `@base-ui` + transitive `@radix-ui`. - Refresh AGENTS.md / CLAUDE.md / classic→default sync skill for Base UI stack. - Bump `package.json` / lockfile for shadcn-postinstall deps (Hugeicons, chart stack, themes, etc.) Verified: `bun run typecheck` passes. Note: `bun run lint` still reports pre-existing hooks rule violations elsewhere; not addressed in this change. * 🎨 chore(web/default): unify table toolbar, relocate usage stats, refine filters - Refactor DataTableToolbar to a single wrapping flex row with a right-aligned action cluster (Reset / Search / View / Expand) for a cleaner Ant Design Pro–style filter bar; remove the dedicated stats row and the toolbar `stats` prop. - Move Common Logs summary badges (Usage / RPM / TPM) and the sensitive- data visibility toggle into the page header via CommonLogsHeaderActions and SectionPageLayout.Actions so the toolbar stays focused on filters. - Slim CommonLogsFilterBar props (no stats / preActions eye control). - Improve CompactDateTimeRangePicker: show minute-precision labels on the trigger (seconds omitted; aligns with datetime-local inputs); widen the trigger on sm+ breakpoints so the full range is visible without truncation; apply the same width in task logs filters. - Simplify DataTableViewOptions: text-only “View” trigger, no sliders icon. - Earlier layout tweak: extra top padding on SectionPageLayout scroll content so control focus rings are not clipped by overflow. * feat(web/default): Base UI migration and component foundation Migrate from Radix UI to Base UI, rewrite core UI primitives, update dependencies (recharts, date-fns, next-themes), add shadcn agent skill documentation, and refresh AI element components. This is the foundational work from the v2/localmain lineage that was not covered by the individual feature commits above. --------- Co-authored-by: t0ng7u <dev@aiass.cc> Co-authored-by: QuentinHsu <xuquentinyang@gmail.com>
This commit is contained in:
Calcium-Ion
co-authored by
t0ng7u
QuentinHsu
t0ng7u
QuentinHsu
parent
dac55f0fde
commit
8b2b03d276
@@ -0,0 +1,97 @@
|
||||
import { ExternalLink, Rocket } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { formatTokens } from '../lib/format'
|
||||
import type { AppListing } from '../types'
|
||||
import { GrowthText } from './growth-text'
|
||||
|
||||
type AppsSectionProps = {
|
||||
rows: AppListing[]
|
||||
}
|
||||
|
||||
/**
|
||||
* "Top Apps" card — clean two-column listing of the apps consuming the
|
||||
* most tokens through new-api in the active period. Apps don't get a
|
||||
* dedicated chart (each app has too much variance to plot meaningfully);
|
||||
* instead we keep the focus on the leaderboard itself.
|
||||
*/
|
||||
export function AppsSection(props: AppsSectionProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const half = Math.ceil(props.rows.length / 2)
|
||||
const left = props.rows.slice(0, half)
|
||||
const right = props.rows.slice(half)
|
||||
|
||||
return (
|
||||
<section className='bg-card overflow-hidden rounded-lg border'>
|
||||
<header className='px-5 py-4'>
|
||||
<h2 className='text-foreground inline-flex items-center gap-2 text-base font-semibold'>
|
||||
<Rocket className='text-primary size-4' />
|
||||
{t('Top Apps')}
|
||||
</h2>
|
||||
<p className='text-muted-foreground mt-1 text-sm'>
|
||||
{t('Apps using the most tokens through new-api')}
|
||||
</p>
|
||||
</header>
|
||||
{props.rows.length === 0 ? (
|
||||
<div className='text-muted-foreground/80 border-t px-5 py-8 text-center text-sm'>
|
||||
{t('No apps match the selected filters')}
|
||||
</div>
|
||||
) : (
|
||||
<div className='grid grid-cols-1 gap-x-8 border-t px-5 pt-3 pb-4 md:grid-cols-2'>
|
||||
<AppList rows={left} />
|
||||
{right.length > 0 && <AppList rows={right} />}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function AppList(props: { rows: AppListing[] }) {
|
||||
return (
|
||||
<ul>
|
||||
{props.rows.map((row) => (
|
||||
<li key={row.name} className='flex items-center gap-3 py-2.5'>
|
||||
<span className='text-muted-foreground/80 w-6 shrink-0 text-right font-mono text-xs tabular-nums'>
|
||||
{row.rank}.
|
||||
</span>
|
||||
<span className='bg-muted text-muted-foreground inline-flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-bold uppercase'>
|
||||
{row.initial}
|
||||
</span>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<div className='flex items-center gap-2 text-sm font-semibold'>
|
||||
{row.url ? (
|
||||
<a
|
||||
href={row.url}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='text-foreground hover:text-primary inline-flex items-center gap-1 truncate transition-colors'
|
||||
>
|
||||
<span className='truncate'>{row.name}</span>
|
||||
<ExternalLink className='text-muted-foreground/60 size-3 shrink-0' />
|
||||
</a>
|
||||
) : (
|
||||
<span className='text-foreground truncate'>{row.name}</span>
|
||||
)}
|
||||
<Badge
|
||||
variant='outline'
|
||||
className='h-4 shrink-0 rounded-sm px-1 text-[10px] font-normal'
|
||||
>
|
||||
{row.category}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className='text-muted-foreground/80 truncate text-xs'>
|
||||
{row.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className='shrink-0 text-right'>
|
||||
<div className='text-foreground font-mono text-sm font-semibold tabular-nums'>
|
||||
{formatTokens(row.total_tokens)}
|
||||
</div>
|
||||
<GrowthText value={row.growth_pct} className='text-[11px]' />
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
import { useMemo } from 'react'
|
||||
import { VChart } from '@visactor/react-vchart'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useChartTheme } from '@/lib/use-chart-theme'
|
||||
import { VCHART_OPTION } from '@/lib/vchart'
|
||||
import { formatTokens } from '../lib/format'
|
||||
import type { CategorySection as CategorySectionData } from '../types'
|
||||
import { ModelLeaderboard } from './model-leaderboard'
|
||||
|
||||
const TOOLTIP_MAX_ROWS = 8
|
||||
const MAX_LEADERBOARD_ROWS = 8
|
||||
|
||||
type CategorySectionProps = {
|
||||
section: CategorySectionData
|
||||
}
|
||||
|
||||
/**
|
||||
* Per-category ranking unit: a compact stacked-bar chart of token usage
|
||||
* over time paired with a 2-column leaderboard of the top models in that
|
||||
* category. Renders as a self-contained card; the rankings page stacks
|
||||
* one of these per category for quick browsing.
|
||||
*/
|
||||
export function CategorySection(props: CategorySectionProps) {
|
||||
const { t } = useTranslation()
|
||||
const { resolvedTheme, themeReady } = useChartTheme()
|
||||
|
||||
const orderedPoints = useMemo(() => {
|
||||
const order = new Map(
|
||||
props.section.models_history.models.map(
|
||||
(m, idx) => [m.name, idx] as const
|
||||
)
|
||||
)
|
||||
return [...props.section.models_history.points].sort((a, b) => {
|
||||
const tsCmp = a.ts.localeCompare(b.ts)
|
||||
if (tsCmp !== 0) return tsCmp
|
||||
return (order.get(a.model) ?? 999) - (order.get(b.model) ?? 999)
|
||||
})
|
||||
}, [props.section.models_history])
|
||||
|
||||
const spec = useMemo(() => {
|
||||
if (orderedPoints.length === 0) return null
|
||||
return {
|
||||
type: 'bar' as const,
|
||||
data: [{ id: 'category-history', values: orderedPoints }],
|
||||
xField: 'label',
|
||||
yField: 'tokens',
|
||||
seriesField: 'model',
|
||||
stack: true,
|
||||
bar: { style: { cornerRadius: 1 } },
|
||||
legends: { visible: false },
|
||||
axes: [
|
||||
{
|
||||
orient: 'bottom',
|
||||
label: {
|
||||
style: { fill: 'currentColor', fontSize: 9 },
|
||||
autoHide: true,
|
||||
autoLimit: true,
|
||||
},
|
||||
tick: { visible: false },
|
||||
},
|
||||
{
|
||||
orient: 'left',
|
||||
label: {
|
||||
formatMethod: (val: number | string) => formatTokens(Number(val)),
|
||||
style: { fill: 'currentColor', fontSize: 9 },
|
||||
},
|
||||
grid: { visible: true, style: { lineDash: [3, 3] } },
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
mark: {
|
||||
content: [
|
||||
{
|
||||
key: (datum: Record<string, unknown>) =>
|
||||
String(datum?.model ?? ''),
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
formatTokens(Number(datum?.tokens) || 0),
|
||||
},
|
||||
],
|
||||
},
|
||||
dimension: {
|
||||
title: {
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
String(datum?.label ?? ''),
|
||||
},
|
||||
content: [
|
||||
{
|
||||
key: (datum: Record<string, unknown>) =>
|
||||
String(datum?.model ?? ''),
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
Number(datum?.tokens) || 0,
|
||||
},
|
||||
],
|
||||
updateContent: (
|
||||
array: Array<{ key: string; value: string | number }>
|
||||
) => {
|
||||
array.sort((a, b) => Number(b.value) - Number(a.value))
|
||||
const visible = array.slice(0, TOOLTIP_MAX_ROWS)
|
||||
return visible.map((item) => ({
|
||||
key: item.key,
|
||||
value: formatTokens(Number(item.value) || 0),
|
||||
}))
|
||||
},
|
||||
},
|
||||
},
|
||||
animationAppear: { duration: 400 },
|
||||
}
|
||||
}, [orderedPoints])
|
||||
|
||||
return (
|
||||
<article
|
||||
id={`category-${props.section.category}`}
|
||||
className='bg-card scroll-mt-20 overflow-hidden rounded-lg border'
|
||||
>
|
||||
<header className='flex items-start justify-between gap-4 px-5 py-3.5'>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<h3 className='text-foreground text-base font-semibold'>
|
||||
{t(props.section.label)}
|
||||
</h3>
|
||||
<p className='text-muted-foreground/80 mt-0.5 truncate text-xs'>
|
||||
{t(props.section.description)}
|
||||
</p>
|
||||
</div>
|
||||
<div className='shrink-0 text-right'>
|
||||
<div className='text-foreground font-mono text-base font-semibold tabular-nums'>
|
||||
{formatTokens(props.section.total_tokens)}
|
||||
</div>
|
||||
<div className='text-muted-foreground/80 text-[10px] tracking-widest uppercase'>
|
||||
{t('tokens')}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className='px-5 pb-4'>
|
||||
<div className='h-44 sm:h-48'>
|
||||
{themeReady && spec ? (
|
||||
<VChart
|
||||
key={`category-history-${props.section.category}-${resolvedTheme}`}
|
||||
spec={{
|
||||
...spec,
|
||||
theme: resolvedTheme === 'dark' ? 'dark' : 'light',
|
||||
background: 'transparent',
|
||||
}}
|
||||
option={VCHART_OPTION}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-muted-foreground/80 flex h-full items-center justify-center text-xs'>
|
||||
{t('No history data available')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{props.section.models.length === 0 ? (
|
||||
<div className='text-muted-foreground/80 border-t px-5 py-6 text-center text-sm'>
|
||||
{t('No models match the selected filters')}
|
||||
</div>
|
||||
) : (
|
||||
<div className='border-t px-5 pt-2 pb-4'>
|
||||
<ModelLeaderboard
|
||||
rows={props.section.models}
|
||||
limit={MAX_LEADERBOARD_ROWS}
|
||||
variant='compact'
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
type CategorySectionsProps = {
|
||||
sections: CategorySectionData[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the per-category rankings strip (one card per category).
|
||||
* Includes a strip header so users understand the page structure shifts
|
||||
* from the global view to category drill-downs.
|
||||
*/
|
||||
export function CategorySections(props: CategorySectionsProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
if (props.sections.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className='space-y-5'>
|
||||
<header className='space-y-1'>
|
||||
<p className='text-muted-foreground text-[11px] font-medium tracking-widest uppercase'>
|
||||
{t('By category')}
|
||||
</p>
|
||||
<h2 className='text-foreground text-xl font-semibold tracking-tight'>
|
||||
{t('Browse rankings by category')}
|
||||
</h2>
|
||||
<p className='text-muted-foreground/80 max-w-2xl text-sm'>
|
||||
{t('Discover the leading models in each domain')}
|
||||
</p>
|
||||
</header>
|
||||
<div className='grid grid-cols-1 gap-5 lg:grid-cols-2'>
|
||||
{props.sections.map((section) => (
|
||||
<CategorySection key={section.category} section={section} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
type EntityLinkBaseProps = {
|
||||
className?: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
type ModelLinkProps = EntityLinkBaseProps & {
|
||||
/** model_name as it appears in the pricing API. Used as the route param. */
|
||||
modelName: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Link wrapping a model name. Navigates to the existing model details
|
||||
* page (`/pricing/{modelName}`). Renders the model name itself by
|
||||
* default; pass `children` to wrap arbitrary content.
|
||||
*
|
||||
* A subtle persistent underline acts as the link affordance (so
|
||||
* clickability is obvious in lists with dozens of entries) and brightens
|
||||
* on hover.
|
||||
*/
|
||||
export function ModelLink(props: ModelLinkProps) {
|
||||
return (
|
||||
<Link
|
||||
to='/pricing/$modelId'
|
||||
params={{ modelId: props.modelName }}
|
||||
className={cn(
|
||||
'decoration-foreground/30 hover:decoration-foreground underline decoration-1 underline-offset-4 transition-colors',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
{props.children ?? props.modelName}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
type VendorLinkProps = EntityLinkBaseProps & {
|
||||
/** Display name of the vendor (e.g. "Google", "OpenAI"). */
|
||||
vendor: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Link wrapping a vendor name. Navigates to the pricing page filtered by
|
||||
* that vendor (`/pricing?vendor={vendor}`). Renders the vendor name
|
||||
* itself by default. Uses the same subtle persistent underline as
|
||||
* {@link ModelLink}, scaled for the smaller secondary text it usually
|
||||
* wraps.
|
||||
*/
|
||||
export function VendorLink(props: VendorLinkProps) {
|
||||
return (
|
||||
<Link
|
||||
to='/pricing'
|
||||
search={{ vendor: props.vendor }}
|
||||
className={cn(
|
||||
'hover:text-foreground underline decoration-current/40 decoration-1 underline-offset-2 transition-colors hover:decoration-current',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
{props.children ?? props.vendor}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
type GrowthTextProps = {
|
||||
value: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a period-over-period growth percent as `↑303%`, `↓12.4%`, or
|
||||
* `0%` (when no change). The arrow is encoded in the text so the value
|
||||
* still aligns inside a tabular column.
|
||||
*/
|
||||
export function GrowthText(props: GrowthTextProps) {
|
||||
const v = props.value
|
||||
if (!Number.isFinite(v) || v === 0) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'text-muted-foreground/80 font-mono tabular-nums',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
0%
|
||||
</span>
|
||||
)
|
||||
}
|
||||
const isUp = v > 0
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'font-mono tabular-nums',
|
||||
isUp
|
||||
? 'text-emerald-600 dark:text-emerald-400'
|
||||
: 'text-rose-600 dark:text-rose-400',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
{isUp ? '↑' : '↓'}
|
||||
{Math.abs(v).toFixed(Math.abs(v) >= 100 ? 0 : 1)}%
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export * from './apps-section'
|
||||
export * from './category-section'
|
||||
export * from './entity-links'
|
||||
export * from './growth-text'
|
||||
export * from './market-share-section'
|
||||
export * from './model-leaderboard'
|
||||
export * from './models-section'
|
||||
export * from './pulse-section'
|
||||
export * from './rankings-hero'
|
||||
@@ -0,0 +1,284 @@
|
||||
import { useMemo } from 'react'
|
||||
import { VChart } from '@visactor/react-vchart'
|
||||
import { PieChart } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useChartTheme } from '@/lib/use-chart-theme'
|
||||
import { VCHART_OPTION } from '@/lib/vchart'
|
||||
import { formatShare, formatTokens } from '../lib/format'
|
||||
import type { RankingPeriod, VendorRanking, VendorShareSeries } from '../types'
|
||||
import { VendorLink } from './entity-links'
|
||||
|
||||
const PERIOD_DESCRIPTIONS: Record<RankingPeriod, string> = {
|
||||
today: 'Token share by model author across the last 24 hours',
|
||||
week: 'Token share by model author across the past few weeks',
|
||||
month: 'Token share by model author across the past month',
|
||||
year: 'Token share by model author across the past year',
|
||||
all: 'Token share by model author since launch',
|
||||
}
|
||||
|
||||
/** Stable colour palette for vendors, used in both the area chart and the
|
||||
* legend dots. Falls back to a neutral palette for unknown vendors so that
|
||||
* future additions still render. */
|
||||
const VENDOR_COLOURS: Record<string, string> = {
|
||||
OpenAI: '#10a37f',
|
||||
Anthropic: '#d97757',
|
||||
Google: '#4285f4',
|
||||
DeepSeek: '#7c5cff',
|
||||
Alibaba: '#ff9900',
|
||||
xAI: '#1f2937',
|
||||
Meta: '#1877f2',
|
||||
Moonshot: '#ec4899',
|
||||
Zhipu: '#06b6d4',
|
||||
Mistral: '#ff7000',
|
||||
ByteDance: '#3b82f6',
|
||||
Tencent: '#22c55e',
|
||||
MiniMax: '#a855f7',
|
||||
Cohere: '#fb923c',
|
||||
Baidu: '#ef4444',
|
||||
Others: '#94a3b8',
|
||||
}
|
||||
|
||||
const FALLBACK_PALETTE = [
|
||||
'#0ea5e9',
|
||||
'#22c55e',
|
||||
'#a855f7',
|
||||
'#f97316',
|
||||
'#14b8a6',
|
||||
'#eab308',
|
||||
'#ec4899',
|
||||
'#84cc16',
|
||||
'#6366f1',
|
||||
'#10b981',
|
||||
'#f43f5e',
|
||||
'#0891b2',
|
||||
'#94a3b8',
|
||||
]
|
||||
|
||||
function buildVendorColourMap(names: string[]): Record<string, string> {
|
||||
const result: Record<string, string> = {}
|
||||
let fallbackIdx = 0
|
||||
for (const name of names) {
|
||||
if (VENDOR_COLOURS[name]) {
|
||||
result[name] = VENDOR_COLOURS[name]
|
||||
} else {
|
||||
result[name] = FALLBACK_PALETTE[fallbackIdx % FALLBACK_PALETTE.length]
|
||||
fallbackIdx += 1
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const MAX_VENDORS_IN_LIST = 12
|
||||
|
||||
type MarketShareSectionProps = {
|
||||
history: VendorShareSeries
|
||||
rows: VendorRanking[]
|
||||
period: RankingPeriod
|
||||
}
|
||||
|
||||
/**
|
||||
* Combined "Market Share" card: a 100%-stacked area chart showing each
|
||||
* vendor's slice of total token volume, paired below with a two-column
|
||||
* vendor list.
|
||||
*/
|
||||
export function MarketShareSection(props: MarketShareSectionProps) {
|
||||
const { t } = useTranslation()
|
||||
const { resolvedTheme, themeReady } = useChartTheme()
|
||||
|
||||
const colourMap = useMemo(
|
||||
() => buildVendorColourMap(props.history.vendors.map((v) => v.name)),
|
||||
[props.history]
|
||||
)
|
||||
|
||||
const orderedPoints = useMemo(() => {
|
||||
const order = new Map(
|
||||
props.history.vendors.map((v, idx) => [v.name, idx] as const)
|
||||
)
|
||||
return [...props.history.points].sort((a, b) => {
|
||||
const tsCmp = a.ts.localeCompare(b.ts)
|
||||
if (tsCmp !== 0) return tsCmp
|
||||
return (order.get(a.vendor) ?? 999) - (order.get(b.vendor) ?? 999)
|
||||
})
|
||||
}, [props.history])
|
||||
|
||||
const spec = useMemo(() => {
|
||||
if (orderedPoints.length === 0) return null
|
||||
return {
|
||||
type: 'area' as const,
|
||||
data: [{ id: 'vendor-share', values: orderedPoints }],
|
||||
xField: 'label',
|
||||
yField: 'share',
|
||||
seriesField: 'vendor',
|
||||
stack: true,
|
||||
legends: { visible: false },
|
||||
area: {
|
||||
style: { fillOpacity: 0.85, curveType: 'monotone' },
|
||||
},
|
||||
line: { style: { lineWidth: 0, curveType: 'monotone' } },
|
||||
point: { visible: false },
|
||||
color: { specified: colourMap },
|
||||
axes: [
|
||||
{
|
||||
orient: 'bottom',
|
||||
label: {
|
||||
style: { fill: 'currentColor', fontSize: 10 },
|
||||
autoHide: true,
|
||||
autoLimit: true,
|
||||
},
|
||||
tick: { visible: false },
|
||||
},
|
||||
{
|
||||
orient: 'left',
|
||||
min: 0,
|
||||
max: 1,
|
||||
label: {
|
||||
formatMethod: (val: number | string) =>
|
||||
`${Math.round(Number(val) * 100)}%`,
|
||||
style: { fill: 'currentColor', fontSize: 10 },
|
||||
},
|
||||
grid: { visible: true, style: { lineDash: [3, 3] } },
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
mark: {
|
||||
content: [
|
||||
{
|
||||
key: (datum: Record<string, unknown>) =>
|
||||
String(datum?.vendor ?? ''),
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
`${(Number(datum?.share) * 100).toFixed(1)}% · ${formatTokens(Number(datum?.tokens) || 0)}`,
|
||||
},
|
||||
],
|
||||
},
|
||||
dimension: {
|
||||
title: {
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
String(datum?.label ?? ''),
|
||||
},
|
||||
content: [
|
||||
{
|
||||
key: (datum: Record<string, unknown>) =>
|
||||
String(datum?.vendor ?? ''),
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
Number(datum?.share) || 0,
|
||||
},
|
||||
],
|
||||
updateContent: (
|
||||
array: Array<{ key: string; value: string | number }>
|
||||
) => {
|
||||
return array
|
||||
.filter((item) => Number(item.value) > 0.001)
|
||||
.sort((a, b) => Number(b.value) - Number(a.value))
|
||||
.map((item) => ({
|
||||
key: item.key,
|
||||
value: `${(Number(item.value) * 100).toFixed(1)}%`,
|
||||
}))
|
||||
},
|
||||
},
|
||||
},
|
||||
animationAppear: { duration: 500 },
|
||||
}
|
||||
}, [colourMap, orderedPoints])
|
||||
|
||||
const visible = props.rows.slice(0, MAX_VENDORS_IN_LIST)
|
||||
const half = Math.ceil(visible.length / 2)
|
||||
const left = visible.slice(0, half)
|
||||
const right = visible.slice(half)
|
||||
|
||||
return (
|
||||
<section className='bg-card overflow-hidden rounded-lg border'>
|
||||
{/* Chart block ----------------------------------------------------- */}
|
||||
<header className='px-5 py-4'>
|
||||
<h2 className='text-foreground inline-flex items-center gap-2 text-base font-semibold'>
|
||||
<PieChart className='text-primary size-4' />
|
||||
{t('Market Share')}
|
||||
</h2>
|
||||
<p className='text-muted-foreground mt-1 text-sm'>
|
||||
{t(PERIOD_DESCRIPTIONS[props.period])}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className='px-5 pb-5'>
|
||||
<div className='h-60 sm:h-72'>
|
||||
{themeReady && spec ? (
|
||||
<VChart
|
||||
key={`vendor-share-${resolvedTheme}-${props.period}`}
|
||||
spec={{
|
||||
...spec,
|
||||
theme: resolvedTheme === 'dark' ? 'dark' : 'light',
|
||||
background: 'transparent',
|
||||
}}
|
||||
option={VCHART_OPTION}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-muted-foreground/80 flex h-full items-center justify-center text-xs'>
|
||||
{t('No history data available')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vendor list block ----------------------------------------------- */}
|
||||
<div className='border-t'>
|
||||
<header className='px-5 pt-4 pb-2'>
|
||||
<h3 className='text-foreground text-sm font-semibold'>
|
||||
{t('By model author')}
|
||||
</h3>
|
||||
<p className='text-muted-foreground/80 mt-0.5 text-xs'>
|
||||
{t('Vendors ranked by aggregated token volume')}
|
||||
</p>
|
||||
</header>
|
||||
{visible.length === 0 ? (
|
||||
<div className='text-muted-foreground/80 px-5 py-8 text-center text-sm'>
|
||||
{t('No vendor data available')}
|
||||
</div>
|
||||
) : (
|
||||
<div className='grid grid-cols-1 gap-x-8 px-5 pt-1 pb-4 md:grid-cols-2'>
|
||||
<VendorList rows={left} colourMap={colourMap} />
|
||||
{right.length > 0 && (
|
||||
<VendorList rows={right} colourMap={colourMap} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function VendorList(props: {
|
||||
rows: VendorRanking[]
|
||||
colourMap: Record<string, string>
|
||||
}) {
|
||||
return (
|
||||
<ul>
|
||||
{props.rows.map((vendor) => (
|
||||
<li key={vendor.vendor} className='flex items-center gap-3 py-2.5'>
|
||||
<span className='text-muted-foreground/80 w-6 shrink-0 text-right font-mono text-xs tabular-nums'>
|
||||
{vendor.rank}.
|
||||
</span>
|
||||
<span
|
||||
aria-hidden
|
||||
className='size-2.5 shrink-0 rounded-full'
|
||||
style={{
|
||||
backgroundColor: props.colourMap[vendor.vendor] ?? '#94a3b8',
|
||||
}}
|
||||
/>
|
||||
<VendorLink
|
||||
vendor={vendor.vendor}
|
||||
className='text-foreground min-w-0 flex-1 truncate text-sm font-medium'
|
||||
>
|
||||
{vendor.vendor}
|
||||
</VendorLink>
|
||||
<div className='shrink-0 text-right'>
|
||||
<div className='text-foreground font-mono text-sm font-semibold tabular-nums'>
|
||||
{formatTokens(vendor.total_tokens)}
|
||||
</div>
|
||||
<div className='text-muted-foreground/80 font-mono text-[11px] tabular-nums'>
|
||||
{formatShare(vendor.share)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { getLobeIcon } from '@/lib/lobe-icon'
|
||||
import { formatTokens } from '../lib/format'
|
||||
import type { ModelRanking } from '../types'
|
||||
import { ModelLink, VendorLink } from './entity-links'
|
||||
import { GrowthText } from './growth-text'
|
||||
|
||||
type ModelLeaderboardProps = {
|
||||
rows: ModelRanking[]
|
||||
/** Density variant. `compact` is used inside per-category sections; the
|
||||
* default fits the larger overall "Top Models" section. */
|
||||
variant?: 'default' | 'compact'
|
||||
/** Optional cap (rows beyond this are dropped). */
|
||||
limit?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Two-column model leaderboard list: "rank · model
|
||||
* (with vendor below) · tokens (with growth below)" rendering. Splits
|
||||
* `rows` evenly between the two columns so the visual rhythm matches a
|
||||
* single ranked list rather than two independent lists.
|
||||
*
|
||||
* Both the model name and vendor name are clickable: model jumps to
|
||||
* `/pricing/{modelName}` and vendor jumps to `/pricing?vendor={vendor}`.
|
||||
*/
|
||||
export function ModelLeaderboard(props: ModelLeaderboardProps) {
|
||||
const limited = props.limit ? props.rows.slice(0, props.limit) : props.rows
|
||||
const half = Math.ceil(limited.length / 2)
|
||||
const left = limited.slice(0, half)
|
||||
const right = limited.slice(half)
|
||||
const variant = props.variant ?? 'default'
|
||||
|
||||
if (limited.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='grid grid-cols-1 gap-x-8 md:grid-cols-2'>
|
||||
<ModelList rows={left} variant={variant} />
|
||||
{right.length > 0 && <ModelList rows={right} variant={variant} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelList(props: {
|
||||
rows: ModelRanking[]
|
||||
variant: 'default' | 'compact'
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const compact = props.variant === 'compact'
|
||||
return (
|
||||
<ul>
|
||||
{props.rows.map((row) => (
|
||||
<li
|
||||
key={row.model_name}
|
||||
className={
|
||||
compact
|
||||
? 'flex items-center gap-3 py-2'
|
||||
: 'flex items-center gap-3 py-2.5'
|
||||
}
|
||||
>
|
||||
<span className='text-muted-foreground/80 w-6 shrink-0 text-right font-mono text-xs tabular-nums'>
|
||||
{row.rank}.
|
||||
</span>
|
||||
<span className='shrink-0'>
|
||||
{getLobeIcon(row.vendor_icon, compact ? 20 : 22)}
|
||||
</span>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<ModelLink
|
||||
modelName={row.model_name}
|
||||
className={
|
||||
compact
|
||||
? 'text-foreground block truncate font-mono text-xs font-medium'
|
||||
: 'text-foreground block truncate font-mono text-sm font-medium'
|
||||
}
|
||||
>
|
||||
{row.model_name}
|
||||
</ModelLink>
|
||||
<p
|
||||
className={
|
||||
compact
|
||||
? 'text-muted-foreground/80 truncate text-[11px] italic'
|
||||
: 'text-muted-foreground/80 truncate text-xs italic'
|
||||
}
|
||||
>
|
||||
by{' '}
|
||||
<VendorLink vendor={row.vendor}>
|
||||
{row.vendor.toLowerCase()}
|
||||
</VendorLink>
|
||||
</p>
|
||||
</div>
|
||||
<div className='shrink-0 text-right'>
|
||||
<div
|
||||
className={
|
||||
compact
|
||||
? 'text-foreground font-mono text-xs font-semibold tabular-nums'
|
||||
: 'text-foreground font-mono text-sm font-semibold tabular-nums'
|
||||
}
|
||||
>
|
||||
{formatTokens(row.total_tokens)}
|
||||
{!compact && (
|
||||
<>
|
||||
{' '}
|
||||
<span className='text-muted-foreground/80 font-normal'>
|
||||
{t('tokens')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<GrowthText
|
||||
value={row.growth_pct}
|
||||
className={compact ? 'text-[10px]' : 'text-[11px]'}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
import { useMemo } from 'react'
|
||||
import { VChart } from '@visactor/react-vchart'
|
||||
import { BarChart3, Trophy } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useChartTheme } from '@/lib/use-chart-theme'
|
||||
import { VCHART_OPTION } from '@/lib/vchart'
|
||||
import { formatTokens } from '../lib/format'
|
||||
import type { ModelHistorySeries, ModelRanking, RankingPeriod } from '../types'
|
||||
import { ModelLeaderboard } from './model-leaderboard'
|
||||
|
||||
const PERIOD_DESCRIPTIONS: Record<RankingPeriod, string> = {
|
||||
today: 'Hourly token usage by model across the last 24 hours',
|
||||
week: 'Weekly token usage by model across the past few weeks',
|
||||
month: 'Daily token usage by model across the past month',
|
||||
year: 'Weekly token usage by model across the past year',
|
||||
all: 'Token usage by model since launch',
|
||||
}
|
||||
|
||||
const TOOLTIP_MAX_ROWS = 10
|
||||
|
||||
type ModelsSectionProps = {
|
||||
history: ModelHistorySeries
|
||||
rows: ModelRanking[]
|
||||
period: RankingPeriod
|
||||
}
|
||||
|
||||
/**
|
||||
* Combined "Top Models" card: a stacked bar chart showing token usage by
|
||||
* model over time, paired below with a two-column LLM Leaderboard. The
|
||||
* chart anchors the eye while the leaderboard provides the detailed key.
|
||||
*/
|
||||
export function ModelsSection(props: ModelsSectionProps) {
|
||||
const { t } = useTranslation()
|
||||
const { resolvedTheme, themeReady } = useChartTheme()
|
||||
|
||||
// Order points so the largest model appears at the bottom of every stack.
|
||||
const orderedPoints = useMemo(() => {
|
||||
const order = new Map(
|
||||
props.history.models.map((m, idx) => [m.name, idx] as const)
|
||||
)
|
||||
return [...props.history.points].sort((a, b) => {
|
||||
const tsCmp = a.ts.localeCompare(b.ts)
|
||||
if (tsCmp !== 0) return tsCmp
|
||||
return (order.get(a.model) ?? 999) - (order.get(b.model) ?? 999)
|
||||
})
|
||||
}, [props.history])
|
||||
|
||||
const totalTokens = useMemo(
|
||||
() => props.rows.reduce((s, r) => s + r.total_tokens, 0),
|
||||
[props.rows]
|
||||
)
|
||||
|
||||
const spec = useMemo(() => {
|
||||
if (orderedPoints.length === 0) return null
|
||||
return {
|
||||
type: 'bar' as const,
|
||||
data: [{ id: 'models-history', values: orderedPoints }],
|
||||
xField: 'label',
|
||||
yField: 'tokens',
|
||||
seriesField: 'model',
|
||||
stack: true,
|
||||
bar: { style: { cornerRadius: 1 } },
|
||||
legends: { visible: false },
|
||||
axes: [
|
||||
{
|
||||
orient: 'bottom',
|
||||
label: {
|
||||
style: { fill: 'currentColor', fontSize: 10 },
|
||||
autoHide: true,
|
||||
autoLimit: true,
|
||||
},
|
||||
tick: { visible: false },
|
||||
},
|
||||
{
|
||||
orient: 'left',
|
||||
label: {
|
||||
formatMethod: (val: number | string) => formatTokens(Number(val)),
|
||||
style: { fill: 'currentColor', fontSize: 10 },
|
||||
},
|
||||
grid: { visible: true, style: { lineDash: [3, 3] } },
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
mark: {
|
||||
content: [
|
||||
{
|
||||
key: (datum: Record<string, unknown>) =>
|
||||
String(datum?.model ?? ''),
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
formatTokens(Number(datum?.tokens) || 0),
|
||||
},
|
||||
],
|
||||
},
|
||||
dimension: {
|
||||
title: {
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
String(datum?.label ?? ''),
|
||||
},
|
||||
content: [
|
||||
{
|
||||
key: (datum: Record<string, unknown>) =>
|
||||
String(datum?.model ?? ''),
|
||||
value: (datum: Record<string, unknown>) =>
|
||||
Number(datum?.tokens) || 0,
|
||||
},
|
||||
],
|
||||
updateContent: (
|
||||
array: Array<{ key: string; value: string | number }>
|
||||
) => {
|
||||
array.sort((a, b) => Number(b.value) - Number(a.value))
|
||||
const sum = array.reduce((s, x) => s + (Number(x.value) || 0), 0)
|
||||
const visible = array.slice(0, TOOLTIP_MAX_ROWS)
|
||||
const overflow = array.slice(TOOLTIP_MAX_ROWS)
|
||||
const result = visible.map((item) => ({
|
||||
key: item.key,
|
||||
value: formatTokens(Number(item.value) || 0),
|
||||
}))
|
||||
if (overflow.length > 0) {
|
||||
const otherSum = overflow.reduce(
|
||||
(s, item) => s + (Number(item.value) || 0),
|
||||
0
|
||||
)
|
||||
result.push({
|
||||
key: t('+{{count}} more', { count: overflow.length }),
|
||||
value: formatTokens(otherSum),
|
||||
})
|
||||
}
|
||||
result.unshift({ key: t('Total:'), value: formatTokens(sum) })
|
||||
return result
|
||||
},
|
||||
},
|
||||
},
|
||||
animationAppear: { duration: 500 },
|
||||
}
|
||||
}, [orderedPoints, t])
|
||||
|
||||
return (
|
||||
<section className='bg-card overflow-hidden rounded-lg border'>
|
||||
{/* Chart block ----------------------------------------------------- */}
|
||||
<header className='flex items-start justify-between gap-4 px-5 py-4'>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<h2 className='text-foreground inline-flex items-center gap-2 text-base font-semibold'>
|
||||
<BarChart3 className='text-primary size-4' />
|
||||
{t('Top Models')}
|
||||
</h2>
|
||||
<p className='text-muted-foreground mt-1 text-sm'>
|
||||
{t(PERIOD_DESCRIPTIONS[props.period])}
|
||||
</p>
|
||||
</div>
|
||||
<div className='shrink-0 text-right'>
|
||||
<div className='text-foreground font-mono text-2xl font-semibold tabular-nums'>
|
||||
{formatTokens(totalTokens)}
|
||||
</div>
|
||||
<div className='text-muted-foreground/80 text-[10px] font-medium tracking-widest uppercase'>
|
||||
{t('tokens')}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className='px-5 pb-5'>
|
||||
<div className='h-60 sm:h-72'>
|
||||
{themeReady && spec ? (
|
||||
<VChart
|
||||
key={`models-history-${resolvedTheme}-${props.period}`}
|
||||
spec={{
|
||||
...spec,
|
||||
theme: resolvedTheme === 'dark' ? 'dark' : 'light',
|
||||
background: 'transparent',
|
||||
}}
|
||||
option={VCHART_OPTION}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-muted-foreground/80 flex h-full items-center justify-center text-xs'>
|
||||
{t('No history data available')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboard block ----------------------------------------------- */}
|
||||
<div className='border-t'>
|
||||
<header className='px-5 pt-4 pb-2'>
|
||||
<h3 className='text-foreground inline-flex items-center gap-2 text-sm font-semibold'>
|
||||
<Trophy className='size-3.5 text-amber-500' />
|
||||
{t('LLM Leaderboard')}
|
||||
</h3>
|
||||
<p className='text-muted-foreground/80 mt-0.5 text-xs'>
|
||||
{t('Compare the most popular models on the platform')}
|
||||
</p>
|
||||
</header>
|
||||
{props.rows.length === 0 ? (
|
||||
<div className='text-muted-foreground/80 px-5 py-8 text-center text-sm'>
|
||||
{t('No models match the selected filters')}
|
||||
</div>
|
||||
) : (
|
||||
<div className='px-5 pt-1 pb-4'>
|
||||
<ModelLeaderboard rows={props.rows} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
import {
|
||||
ArrowDownRight,
|
||||
ArrowUpRight,
|
||||
Sparkles,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
} from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { getLobeIcon } from '@/lib/lobe-icon'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { formatReleaseDate, formatTokens } from '../lib/format'
|
||||
import type { NewModelEntry, RankingMover } from '../types'
|
||||
import { ModelLink, VendorLink } from './entity-links'
|
||||
|
||||
type PulseSectionProps = {
|
||||
movers: RankingMover[]
|
||||
droppers: RankingMover[]
|
||||
newModels: NewModelEntry[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Three-up "Pulse" panel: rank gainers, rank losers, and recently released
|
||||
* models — the "what's changing" footer of the rankings page. Each card
|
||||
* is intentionally compact so the trio fits in one row on desktop.
|
||||
*/
|
||||
export function PulseSection(props: PulseSectionProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<section className='grid grid-cols-1 gap-4 lg:grid-cols-3'>
|
||||
<PulseCard
|
||||
title={t('Trending up')}
|
||||
description={t('Models climbing the leaderboard')}
|
||||
icon={<TrendingUp className='size-4 text-emerald-500' />}
|
||||
>
|
||||
{props.movers.length === 0 ? (
|
||||
<PulseEmpty label={t('No notable climbers right now')} />
|
||||
) : (
|
||||
<ul>
|
||||
{props.movers.map((row) => (
|
||||
<MoverRow key={row.model_name} row={row} intent='up' />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</PulseCard>
|
||||
|
||||
<PulseCard
|
||||
title={t('Trending down')}
|
||||
description={t('Models losing positions')}
|
||||
icon={<TrendingDown className='size-4 text-rose-500' />}
|
||||
>
|
||||
{props.droppers.length === 0 ? (
|
||||
<PulseEmpty label={t('No notable drops right now')} />
|
||||
) : (
|
||||
<ul>
|
||||
{props.droppers.map((row) => (
|
||||
<MoverRow key={row.model_name} row={row} intent='down' />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</PulseCard>
|
||||
|
||||
<PulseCard
|
||||
title={t('Newly released')}
|
||||
description={t('Recently launched models')}
|
||||
icon={<Sparkles className='size-4 text-amber-500' />}
|
||||
>
|
||||
{props.newModels.length === 0 ? (
|
||||
<PulseEmpty label={t('No new models yet')} />
|
||||
) : (
|
||||
<ul>
|
||||
{props.newModels.slice(0, 6).map((row) => (
|
||||
<NewModelRow key={row.model_name} row={row} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</PulseCard>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function PulseCard(props: {
|
||||
title: string
|
||||
description: string
|
||||
icon: React.ReactNode
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className='bg-card overflow-hidden rounded-lg border'>
|
||||
<header className='border-b px-4 py-3'>
|
||||
<h3 className='text-foreground inline-flex items-center gap-2 text-sm font-semibold'>
|
||||
{props.icon}
|
||||
{props.title}
|
||||
</h3>
|
||||
<p className='text-muted-foreground/80 mt-0.5 text-xs'>
|
||||
{props.description}
|
||||
</p>
|
||||
</header>
|
||||
<div className='py-1'>{props.children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PulseEmpty(props: { label: string }) {
|
||||
return (
|
||||
<div className='text-muted-foreground/80 px-4 py-6 text-center text-xs'>
|
||||
{props.label}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MoverRow(props: { row: RankingMover; intent: 'up' | 'down' }) {
|
||||
return (
|
||||
<li className='flex items-center gap-3 px-4 py-2'>
|
||||
<span className='shrink-0'>{getLobeIcon(props.row.vendor_icon, 20)}</span>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<ModelLink
|
||||
modelName={props.row.model_name}
|
||||
className='text-foreground block truncate font-mono text-xs font-medium'
|
||||
>
|
||||
{props.row.model_name}
|
||||
</ModelLink>
|
||||
<p className='text-muted-foreground/80 truncate text-[11px]'>
|
||||
#{props.row.current_rank} ·{' '}
|
||||
<VendorLink vendor={props.row.vendor}>
|
||||
{props.row.vendor.toLowerCase()}
|
||||
</VendorLink>
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex shrink-0 items-center gap-0.5 font-mono text-xs font-semibold tabular-nums',
|
||||
props.intent === 'up'
|
||||
? 'text-emerald-600 dark:text-emerald-400'
|
||||
: 'text-rose-600 dark:text-rose-400'
|
||||
)}
|
||||
>
|
||||
{props.intent === 'up' ? (
|
||||
<ArrowUpRight className='size-3' />
|
||||
) : (
|
||||
<ArrowDownRight className='size-3' />
|
||||
)}
|
||||
{Math.abs(props.row.rank_delta)}
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
function NewModelRow(props: { row: NewModelEntry }) {
|
||||
return (
|
||||
<li className='flex items-center gap-3 px-4 py-2'>
|
||||
<span className='shrink-0'>{getLobeIcon(props.row.vendor_icon, 20)}</span>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<ModelLink
|
||||
modelName={props.row.model_name}
|
||||
className='text-foreground block truncate font-mono text-xs font-medium'
|
||||
>
|
||||
{props.row.model_name}
|
||||
</ModelLink>
|
||||
<p className='text-muted-foreground/80 truncate text-[11px]'>
|
||||
{formatReleaseDate(props.row.release_date)} ·{' '}
|
||||
<VendorLink vendor={props.row.vendor}>
|
||||
{props.row.vendor.toLowerCase()}
|
||||
</VendorLink>
|
||||
</p>
|
||||
</div>
|
||||
<span className='text-foreground shrink-0 font-mono text-xs font-semibold tabular-nums'>
|
||||
{formatTokens(props.row.total_tokens)}
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { RankingPeriod } from '../types'
|
||||
|
||||
const PERIODS: { id: RankingPeriod; labelKey: string }[] = [
|
||||
{ id: 'today', labelKey: 'Today' },
|
||||
{ id: 'week', labelKey: 'Week' },
|
||||
{ id: 'month', labelKey: 'Month' },
|
||||
{ id: 'year', labelKey: 'Year' },
|
||||
{ id: 'all', labelKey: 'All-time' },
|
||||
]
|
||||
|
||||
type RankingsHeroProps = {
|
||||
period: RankingPeriod
|
||||
onPeriodChange: (period: RankingPeriod) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Hero strip for the rankings page. Intentionally minimal — title +
|
||||
* subtitle + period tabs only. Category filtering is no longer needed
|
||||
* because every category is rendered inline as its own section further
|
||||
* down the page.
|
||||
*/
|
||||
export function RankingsHero(props: RankingsHeroProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<section className='space-y-5'>
|
||||
<div className='space-y-2'>
|
||||
<p className='text-muted-foreground text-xs font-medium tracking-widest uppercase'>
|
||||
{t('Leaderboards')}
|
||||
</p>
|
||||
<h1 className='text-[clamp(1.75rem,4vw,2.5rem)] leading-[1.15] font-bold tracking-tight'>
|
||||
{t('Rankings')}
|
||||
</h1>
|
||||
<p className='text-muted-foreground/80 max-w-2xl text-sm'>
|
||||
{t(
|
||||
'Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Underline tabs for period — clean and unobtrusive. */}
|
||||
<div
|
||||
role='tablist'
|
||||
aria-label={t('Period')}
|
||||
className='border-border/60 flex items-center border-b'
|
||||
>
|
||||
{PERIODS.map((p) => {
|
||||
const isActive = props.period === p.id
|
||||
return (
|
||||
<button
|
||||
key={p.id}
|
||||
role='tab'
|
||||
type='button'
|
||||
aria-selected={isActive}
|
||||
onClick={() => props.onPeriodChange(p.id)}
|
||||
className={cn(
|
||||
'focus-visible:ring-ring/40 relative -mb-px rounded-sm px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',
|
||||
isActive
|
||||
? 'text-foreground'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{t(p.labelKey)}
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'bg-foreground absolute inset-x-3 -bottom-px h-[2px] rounded-full transition-opacity',
|
||||
isActive ? 'opacity-100' : 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useMemo } from 'react'
|
||||
import { buildRankingsSnapshot } from '../lib/mock-rankings'
|
||||
import type { RankingPeriod, RankingsSnapshot } from '../types'
|
||||
|
||||
/**
|
||||
* Memoised rankings snapshot for a period.
|
||||
*
|
||||
* Currently this synchronously builds deterministic mock data. When the
|
||||
* backend ships real analytics endpoints, swap the body to a
|
||||
* `useQuery`-based fetch — the consuming components don't care which side
|
||||
* produced the data as long as it conforms to {@link RankingsSnapshot}.
|
||||
*/
|
||||
export function useRankings(period: RankingPeriod): RankingsSnapshot {
|
||||
return useMemo(() => buildRankingsSnapshot(period), [period])
|
||||
}
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
import { useNavigate, useSearch } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { PublicLayout } from '@/components/layout'
|
||||
import { PageTransition } from '@/components/page-transition'
|
||||
import {
|
||||
AppsSection,
|
||||
CategorySections,
|
||||
MarketShareSection,
|
||||
ModelsSection,
|
||||
PulseSection,
|
||||
RankingsHero,
|
||||
} from './components'
|
||||
import { useRankings } from './hooks/use-rankings'
|
||||
import type { RankingPeriod } from './types'
|
||||
|
||||
const VALID_PERIODS: RankingPeriod[] = ['today', 'week', 'month', 'year', 'all']
|
||||
|
||||
export function Rankings() {
|
||||
const { t } = useTranslation()
|
||||
const search = useSearch({ from: '/rankings/' })
|
||||
const navigate = useNavigate()
|
||||
|
||||
const period: RankingPeriod = VALID_PERIODS.includes(
|
||||
search.period as RankingPeriod
|
||||
)
|
||||
? (search.period as RankingPeriod)
|
||||
: 'week'
|
||||
|
||||
const snapshot = useRankings(period)
|
||||
|
||||
const handlePeriodChange = (next: RankingPeriod) => {
|
||||
navigate({
|
||||
to: '/rankings',
|
||||
search: (prev) => ({ ...prev, period: next }),
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<PublicLayout showMainContainer={false}>
|
||||
<div className='relative'>
|
||||
<div
|
||||
aria-hidden
|
||||
className='pointer-events-none absolute inset-x-0 top-0 h-[600px] opacity-20 dark:opacity-[0.10]'
|
||||
style={{
|
||||
background: [
|
||||
'radial-gradient(ellipse 60% 50% at 20% 20%, oklch(0.72 0.18 250 / 80%) 0%, transparent 70%)',
|
||||
'radial-gradient(ellipse 50% 40% at 80% 15%, oklch(0.65 0.15 200 / 60%) 0%, transparent 70%)',
|
||||
'radial-gradient(ellipse 40% 35% at 50% 70%, oklch(0.70 0.12 280 / 40%) 0%, transparent 70%)',
|
||||
].join(', '),
|
||||
maskImage:
|
||||
'linear-gradient(to bottom, black 40%, transparent 100%)',
|
||||
WebkitMaskImage:
|
||||
'linear-gradient(to bottom, black 40%, transparent 100%)',
|
||||
}}
|
||||
/>
|
||||
<PageTransition className='relative mx-auto w-full max-w-[1280px] space-y-8 px-3 pt-16 pb-10 sm:px-6 sm:pt-20 sm:pb-12 xl:px-8'>
|
||||
<RankingsHero period={period} onPeriodChange={handlePeriodChange} />
|
||||
|
||||
{/* Overall (all-categories) view ----------------------------- */}
|
||||
<ModelsSection
|
||||
history={snapshot.models_history}
|
||||
rows={snapshot.models}
|
||||
period={period}
|
||||
/>
|
||||
|
||||
<MarketShareSection
|
||||
history={snapshot.vendor_share_history}
|
||||
rows={snapshot.vendors}
|
||||
period={period}
|
||||
/>
|
||||
|
||||
<AppsSection rows={snapshot.apps} />
|
||||
|
||||
<PulseSection
|
||||
movers={snapshot.top_movers}
|
||||
droppers={snapshot.top_droppers}
|
||||
newModels={snapshot.new_models}
|
||||
/>
|
||||
|
||||
{/* Per-category drill-downs --------------------------------- */}
|
||||
<CategorySections sections={snapshot.category_sections} />
|
||||
|
||||
<p className='text-muted-foreground/60 mx-auto max-w-3xl text-center text-[11px] leading-relaxed'>
|
||||
{t(
|
||||
'Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.'
|
||||
)}
|
||||
</p>
|
||||
</PageTransition>
|
||||
</div>
|
||||
</PublicLayout>
|
||||
)
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rankings formatting helpers
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/** Format a token count as `1.2B`, `42M`, `980K`, or `512`. */
|
||||
export function formatTokens(value: number): string {
|
||||
if (!Number.isFinite(value) || value <= 0) return '0'
|
||||
if (value >= 1_000_000_000_000)
|
||||
return `${(value / 1_000_000_000_000).toFixed(2)}T`
|
||||
if (value >= 1_000_000_000)
|
||||
return `${(value / 1_000_000_000).toFixed(value >= 10_000_000_000 ? 1 : 2)}B`
|
||||
if (value >= 1_000_000)
|
||||
return `${(value / 1_000_000).toFixed(value >= 10_000_000 ? 1 : 2)}M`
|
||||
if (value >= 1_000)
|
||||
return `${(value / 1_000).toFixed(value >= 10_000 ? 0 : 1)}K`
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
/** Format a 0..1 share as a percentage with two decimals. */
|
||||
export function formatShare(share: number): string {
|
||||
if (!Number.isFinite(share) || share <= 0) return '0%'
|
||||
if (share < 0.001) return '<0.1%'
|
||||
return `${(share * 100).toFixed(share < 0.01 ? 2 : 1)}%`
|
||||
}
|
||||
|
||||
/** Format a release date like `Oct 12, 2025`. */
|
||||
export function formatReleaseDate(iso: string): string {
|
||||
const ts = Date.parse(iso)
|
||||
if (!Number.isFinite(ts)) return iso
|
||||
return new Date(ts).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './format'
|
||||
export * from './mock-rankings'
|
||||
+1048
File diff suppressed because it is too large
Load Diff
+199
@@ -0,0 +1,199 @@
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rankings types
|
||||
// ----------------------------------------------------------------------------
|
||||
//
|
||||
// Shape of the data shown on the /rankings page. The backend has not yet
|
||||
// implemented these analytics endpoints, so the helpers in
|
||||
// `lib/mock-rankings.ts` produce deterministic mock values seeded from the
|
||||
// (period, category) tuple. When the real APIs land, these types double as
|
||||
// the response shape the UI expects.
|
||||
|
||||
export type RankingPeriod = 'today' | 'week' | 'month' | 'year' | 'all'
|
||||
|
||||
export type RankingCategoryId =
|
||||
| 'all'
|
||||
| 'programming'
|
||||
| 'roleplay'
|
||||
| 'marketing'
|
||||
| 'translation'
|
||||
| 'science'
|
||||
| 'finance'
|
||||
| 'health'
|
||||
| 'legal'
|
||||
| 'education'
|
||||
| 'productivity'
|
||||
| 'multimodal'
|
||||
|
||||
export type RankingCategory = {
|
||||
id: RankingCategoryId
|
||||
/** Default English label, fed through i18n at render time. */
|
||||
label: string
|
||||
description: string
|
||||
}
|
||||
|
||||
export type ModelRanking = {
|
||||
rank: number
|
||||
/** Previous rank in the same period; undefined means "new". */
|
||||
previous_rank?: number
|
||||
model_name: string
|
||||
vendor: string
|
||||
vendor_icon?: string
|
||||
category: RankingCategoryId
|
||||
/** Total tokens routed through this model in the period. */
|
||||
total_tokens: number
|
||||
/** Share of all tokens served (0..1). */
|
||||
share: number
|
||||
/** Period-over-period change in token volume (%). */
|
||||
growth_pct: number
|
||||
}
|
||||
|
||||
export type AppCategory =
|
||||
| 'Coding'
|
||||
| 'Chat'
|
||||
| 'Productivity'
|
||||
| 'Education'
|
||||
| 'Creative'
|
||||
| 'Roleplay'
|
||||
| 'Translation'
|
||||
| 'Marketing'
|
||||
| 'Health'
|
||||
| 'Finance'
|
||||
| 'Research'
|
||||
| 'Other'
|
||||
|
||||
export type AppListing = {
|
||||
rank: number
|
||||
previous_rank?: number
|
||||
name: string
|
||||
description: string
|
||||
category: AppCategory
|
||||
url?: string
|
||||
/** Total tokens this app sent through new-api in the period. */
|
||||
total_tokens: number
|
||||
/** Period-over-period change. */
|
||||
growth_pct: number
|
||||
/** Top model used by this app (model_name). */
|
||||
top_model: string
|
||||
/** Logo letter / initial. */
|
||||
initial: string
|
||||
}
|
||||
|
||||
export type VendorRanking = {
|
||||
rank: number
|
||||
vendor: string
|
||||
vendor_icon?: string
|
||||
total_tokens: number
|
||||
share: number
|
||||
growth_pct: number
|
||||
/** Number of distinct models from this vendor with traffic. */
|
||||
models_count: number
|
||||
/** Top model from this vendor in the period. */
|
||||
top_model: string
|
||||
}
|
||||
|
||||
export type RankingMover = {
|
||||
model_name: string
|
||||
vendor: string
|
||||
vendor_icon?: string
|
||||
/** Positive = climbed, negative = dropped. */
|
||||
rank_delta: number
|
||||
current_rank: number
|
||||
/** Token-volume change percent. */
|
||||
growth_pct: number
|
||||
}
|
||||
|
||||
export type NewModelEntry = {
|
||||
model_name: string
|
||||
vendor: string
|
||||
vendor_icon?: string
|
||||
category: RankingCategoryId
|
||||
release_date: string
|
||||
total_tokens: number
|
||||
/** % growth since the model launched. */
|
||||
growth_pct: number
|
||||
}
|
||||
|
||||
/**
|
||||
* One sample of a model's token usage at a given timestamp.
|
||||
* Flat shape ready to feed VChart's stacked-bar spec.
|
||||
*/
|
||||
export type ModelHistoryPoint = {
|
||||
ts: string
|
||||
/** Pre-formatted x-axis label (e.g. "May 5", "12:00"). */
|
||||
label: string
|
||||
/** Model display name shown in tooltip / legend. */
|
||||
model: string
|
||||
vendor: string
|
||||
/** Token count routed through the model in this bucket. */
|
||||
tokens: number
|
||||
}
|
||||
|
||||
export type ModelHistorySeries = {
|
||||
/** Flat points ready for VChart, ordered oldest → newest. */
|
||||
points: ModelHistoryPoint[]
|
||||
/** Models that appear in the series, sorted by total tokens desc. */
|
||||
models: Array<{ name: string; vendor: string; total: number }>
|
||||
/** Bucket count (used for sizing axis ticks). */
|
||||
buckets: number
|
||||
}
|
||||
|
||||
/**
|
||||
* One sample of a vendor's market share at a given timestamp. `share` is
|
||||
* normalised within the bucket (sums to 1.0 across all vendors at the same
|
||||
* `ts`); `tokens` is preserved for tooltip use.
|
||||
*/
|
||||
export type VendorSharePoint = {
|
||||
ts: string
|
||||
label: string
|
||||
vendor: string
|
||||
share: number
|
||||
tokens: number
|
||||
}
|
||||
|
||||
export type VendorShareSeries = {
|
||||
/** Flat points ready for VChart, ordered oldest → newest. */
|
||||
points: VendorSharePoint[]
|
||||
/** Vendors that appear in the series, sorted by aggregate tokens desc. */
|
||||
vendors: Array<{ name: string; total: number; share: number }>
|
||||
buckets: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Self-contained ranking unit for a single category. Pairs the small
|
||||
* stacked-bar chart with the leaderboard data it summarises so
|
||||
* `<CategorySection>` can render both halves from one prop. Every
|
||||
* category gets one of these rendered inline on the rankings page.
|
||||
*/
|
||||
export type CategorySection = {
|
||||
category: RankingCategoryId
|
||||
/** English source label, fed through i18n at render time. */
|
||||
label: string
|
||||
/** English source description, fed through i18n at render time. */
|
||||
description: string
|
||||
/** Top models in this category, ordered by total tokens desc. */
|
||||
models: ModelRanking[]
|
||||
/** Stacked-bar history of token usage by model in this category. */
|
||||
models_history: ModelHistorySeries
|
||||
/** Sum of all `models[].total_tokens` (cached for the section header). */
|
||||
total_tokens: number
|
||||
}
|
||||
|
||||
export type RankingsSnapshot = {
|
||||
// Overall (all categories) ------------------------------------------------
|
||||
models: ModelRanking[]
|
||||
apps: AppListing[]
|
||||
vendors: VendorRanking[]
|
||||
/** Largest rank gainers in this period. */
|
||||
top_movers: RankingMover[]
|
||||
/** Largest rank losers in this period. */
|
||||
top_droppers: RankingMover[]
|
||||
/** Newly launched / recently added models. */
|
||||
new_models: NewModelEntry[]
|
||||
/** Stacked-bar history of token usage by model over the period. */
|
||||
models_history: ModelHistorySeries
|
||||
/** 100%-stacked area history of token share by vendor over the period. */
|
||||
vendor_share_history: VendorShareSeries
|
||||
// Per-category sections ---------------------------------------------------
|
||||
/** Independent ranking sections, one per non-`all` category. */
|
||||
category_sections: CategorySection[]
|
||||
}
|
||||
Reference in New Issue
Block a user