import { Meta, Title } from "@solidjs/meta" import { ProviderIcon } from "@opencode-ai/ui/provider-icon" import { geoEquirectangular, geoPath } from "d3-geo" import { scaleSqrt } from "d3-scale" import countryCodesSource from "i18n-iso-countries/codes.json?raw" import { feature, mesh } from "topojson-client" import countriesTopologySource from "world-atlas/countries-50m.json?raw" import { getStatsModelData, type CountryEntry, type ModelPeerEntry, type ModelUsagePoint, type StatsModelData, type UsageRange, } from "@opencode-ai/stats-core/domain/home" import { createAsync, query, useParams } from "@solidjs/router" import { createMemo, createSignal, createUniqueId, For, onMount, Show, type JSX } from "solid-js" import { getRequestEvent } from "solid-js/web" import type { FeatureCollection, GeometryObject, GeoJsonProperties } from "geojson" import type { GeometryCollection, Topology } from "topojson-specification" import { LocaleLinks } from "../../component/locale-links" import { useI18n } from "../../context/i18n" import { useLanguage } from "../../context/language" import { localizedUrl } from "../../lib/language" import { findModelCatalogEntry, formatCatalogLabName, getModelCatalog, type ModelCatalog, type ModelCatalogEntry, } from "../model-catalog" import { SectionHeading } from "../section-heading" import { runStatsEffect } from "../../stats-runtime" import { setStatsPageCacheHeaders } from "../stats-cache" import { ComparisonCardsSection, modelRefFromCatalog, uniqueComparisonPairs, type ComparisonModelRef, } from "../compare-cards" import { BreadcrumbSelect } from "../breadcrumb-select" import { applyThemePreference, Footer, getGitHubStars, Header, isThemePreference, themeStorageKey, type HeaderLink, type ThemePreference, } from "../stats-shell" const statsUnfurlPath = "banner.png" const geoMapWidth = 960 const geoMapHeight = 430 const shortMonths = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"] as const type IsoCountryCode = readonly [string, string, string] type WorldCountryProperties = GeoJsonProperties & { name?: string } type WorldTopology = Topology<{ countries: GeometryCollection }> const countryNumericIds = new Map( (JSON.parse(countryCodesSource) as IsoCountryCode[]).map((country) => [country[0], country[2]] as const), ) const worldTopology = JSON.parse(countriesTopologySource) as WorldTopology const worldCountryGeometries: GeometryCollection = { ...worldTopology.objects.countries, geometries: worldTopology.objects.countries.geometries.filter((country) => String(country.id ?? "") !== "010"), } const worldCountries = feature(worldTopology, worldCountryGeometries) as FeatureCollection< GeometryObject, WorldCountryProperties > const worldProjection = geoEquirectangular().fitExtent( [ [10, 12], [geoMapWidth - 10, geoMapHeight - 12], ], worldCountries, ) const worldPath = geoPath(worldProjection) const worldCountryPaths = worldCountries.features.map((country) => ({ id: String(country.id ?? "").padStart(3, "0"), path: worldPath(country) ?? "", marker: geoCountryMarker(country), })) const worldBorderPath = worldPath(mesh(worldTopology, worldCountryGeometries, (a, b) => a !== b)) ?? "" const getModelData = query(async (lab: string, model: string) => { "use server" return runStatsEffect(getStatsModelData(model, lab)) }, "getStatsModelData") export default function StatsModel() { const i18n = useI18n() const language = useLanguage() const event = getRequestEvent() setStatsPageCacheHeaders(event?.response.headers) const params = useParams() const labParam = createMemo(() => params.lab ?? "") const modelParam = createMemo(() => params.model ?? "") const catalog = createAsync(() => getModelCatalog()) const catalogEntry = createMemo(() => { const data = catalog() if (!data) return undefined return findModelCatalogEntry(data, modelParam(), labParam()) ?? null }) const stats = createAsync(() => { const entry = catalogEntry() if (catalog() === undefined || entry === undefined) return Promise.resolve(undefined) if (!entry && (!labParam() || !modelParam())) return Promise.resolve(null) return getModelData(labParam(), entry?.slug ?? modelParam()) }) const githubStars = createAsync(() => getGitHubStars()) const [themePreference, setThemePreference] = createSignal("system") const modelName = createMemo(() => catalogEntry()?.name ?? stats()?.model ?? modelParam() ?? i18n.t("model.fallback")) const labName = createMemo(() => formatCatalogLabName(catalogEntry()?.lab ?? stats()?.provider ?? labParam())) const modelTitle = createMemo(() => i18n.t("model.title", { model: modelName() })) const modelDescription = createMemo(() => i18n.t("model.description", { model: modelName() })) const modelPath = createMemo( () => `/data/${catalogEntry()?.id ?? [labParam(), stats()?.slug ?? modelParam()].filter((part) => part.length > 0).join("/")}`, ) const modelUrl = createMemo(() => localizedUrl(language.locale(), modelPath())) const statsUnfurlUrl = new URL(statsUnfurlPath, localizedUrl("en", "/data/")).toString() const modelHeaderLinks = createMemo(() => [ { href: "#overview", label: i18n.t("nav.overview") }, { href: "#momentum", label: i18n.t("model.momentum") }, { href: "#usage", label: i18n.t("nav.usage") }, { href: "#unique-users", label: i18n.t("model.uniqueUsers") }, { href: "#efficiency", label: i18n.t("nav.efficiency") }, { href: "#geo-breakdown", label: i18n.t("nav.geoBreakdown") }, { href: "#peers", label: i18n.t("nav.peers") }, ]) const modelFooterLinks = createMemo(() => [ { href: import.meta.env.BASE_URL, label: i18n.t("nav.dataHome") }, { href: `${import.meta.env.BASE_URL}#top-models`, label: i18n.t("nav.topModels") }, { href: `${import.meta.env.BASE_URL}#session-cost`, label: i18n.t("nav.sessionCost") }, { href: `${import.meta.env.BASE_URL}#token-cost`, label: i18n.t("nav.tokenCost") }, { href: `${import.meta.env.BASE_URL}#cache-ratio`, label: i18n.t("nav.cacheRatio") }, { href: `${import.meta.env.BASE_URL}#market-share`, label: i18n.t("nav.marketShare") }, { href: `${import.meta.env.BASE_URL}#geo-breakdown`, label: i18n.t("nav.geoBreakdown") }, ]) const updateThemePreference = (preference: ThemePreference) => { applyThemePreference(preference) setThemePreference(preference) if (typeof window === "undefined") return window.localStorage.setItem(themeStorageKey, preference) } onMount(() => { if (typeof window === "undefined") return const preference = window.localStorage.getItem(themeStorageKey) const nextPreference = isThemePreference(preference) ? preference : "system" applyThemePreference(nextPreference) setThemePreference(nextPreference) }) return (
{modelTitle()}
}> }> <>
) } function ModelLoading() { const i18n = useI18n() const language = useLanguage() return ( <>
) } function ModelNotFound(props: { lab: string; model: string }) { const i18n = useI18n() const language = useLanguage() return ( <>
{i18n.t("footer.modelData")}

{props.model || i18n.t("model.fallback")}

{i18n.t("model.noMatched", { id: props.lab ? `${props.lab}/${props.model}` : props.model })}

) } function ModelHero(props: { data: StatsModelData | null catalog: ModelCatalogEntry | null catalogData: ModelCatalog | null labName: string }) { const i18n = useI18n() const language = useLanguage() const labId = () => props.catalog?.lab ?? props.data?.provider ?? props.labName const modelName = () => props.catalog?.name ?? props.data?.model ?? i18n.t("model.fallback") const weights = () => props.catalog?.weights[0] const labs = () => props.catalogData?.labs ?? [] const labModels = () => props.catalogData?.labs.find((lab) => lab.id === providerSlug(labId()))?.models ?? (props.catalog ? [props.catalog] : []) return (

{modelName()}

{(weight) => ( Model weights )}
) } function ModelHeroActionIcon(props: { kind: "weights" | "compare" }) { if (props.kind === "weights") return ( ) return ( ) } function ModelHeroSparkline(props: { data: StatsModelData }) { const values = () => props.data.usage.slice(-14).map((point) => point.tokens) return ( ) } function ChevronDownIcon() { return ( ) } function ModelOverview(props: { catalog: ModelCatalogEntry | null }) { const i18n = useI18n() const language = useLanguage() const specs = createMemo(() => [ { label: i18n.t("model.context"), value: formatCatalogLimit(props.catalog?.limit?.context, i18n.t("home.unknown")), }, { label: i18n.t("model.output"), value: formatCatalogLimit(props.catalog?.limit?.output, i18n.t("home.unknown")), }, { label: i18n.t("model.knowledge"), value: formatCatalogMonth(props.catalog?.knowledge, language.tag(language.locale()), i18n.t("home.unknown")), }, { label: i18n.t("model.release"), value: formatCatalogMonth(props.catalog?.releaseDate, language.tag(language.locale()), i18n.t("home.unknown")), }, { label: i18n.t("model.inputs"), value: formatCatalogModalities( props.catalog?.modalities.input ?? [], language.tag(language.locale()), i18n.t("home.unknown"), ), }, ]) return (
{(spec) => (
{spec.label} {spec.value}
)}
) } function ModelMomentumSection(props: { data: StatsModelData | null }) { const i18n = useI18n() const language = useLanguage() return (

{i18n.t("model.momentum")}. {i18n.t("model.overviewDescription")}

) } function MomentumChart(props: { data: StatsModelData; locale: string }) { const chart = createMemo(() => momentumChart(props.data.usage, props.data.updatedAt)) const changeState = createMemo(() => (props.data.tokenChange < 0 ? "negative" : "positive")) return (
{formatTokens(props.data.totals.tokens)} tokens {formatChange(props.data.tokenChange)}

{formatMomentumDate(chart().startDate, props.locale, props.data.updatedAt)} {formatMomentumDate(chart().endDate, props.locale, props.data.updatedAt)}

{formatChange(props.data.tokenChange)}
) } function MomentumMetric(props: { label: string; value: string; watermark?: string }) { return (
{(watermark) => } {props.label} {props.value}
) } function ModelUsageSection(props: { data: StatsModelData | null }) { const i18n = useI18n() return ( point.tokens} formatValue={formatTokens} valueUnit={i18n.t("lab.tokens")} rowLabel={i18n.t("lab.dailyTokens")} lineTone="muted" /> ) } function ModelUniqueUsersSection(props: { data: StatsModelData | null }) { const i18n = useI18n() return ( point.users} formatValue={formatUsers} valueUnit={i18n.t("format.users")} rowLabel={i18n.t("model.uniqueUsers")} lineTone="active" activeLineBaseTone="muted" highlightBars={false} area /> ) } function ModelTrendSection(props: { data: StatsModelData | null id: string title: string description: string ariaLabel: string emptyTitle: string emptyDescription: string value: (point: ModelUsagePoint) => number formatValue: (value: number) => string valueUnit: string rowLabel: string lineTone: "muted" | "active" activeLineBaseTone?: "muted" | "active" highlightBars?: boolean area?: boolean }) { const activeLineClipId = createUniqueId() const activeLineMaskId = createUniqueId() const areaGradientId = createUniqueId() const [activeIndex, setActiveIndex] = createSignal() const highlightBars = createMemo(() => props.highlightBars ?? true) const lineScale = 326 / 450 const areaBottom = 100 / lineScale const usage = createMemo(() => props.data?.usage ?? []) const valueMax = createMemo(() => Math.max(0, ...usage().map((item) => props.value(item))) || 1) const linePoints = createMemo(() => usage().map((point, index) => ({ point, x: modelUsagePointX(index, usage().length), y: modelUsageLineY(props.value(point), valueMax()), })), ) const linePath = createMemo(() => modelUsageLinePath(linePoints())) const areaPath = createMemo(() => modelUsageAreaPath(linePoints(), areaBottom)) const activeLineBreak = createMemo(() => { const index = activeIndex() if (index === undefined || linePoints().length < 2) return undefined return modelUsageColumnBounds(index, linePoints().length) }) const activeLineClip = createMemo(() => { const index = activeIndex() if (index === undefined || linePoints().length < 2) return undefined return modelUsageColumnInnerBounds(index, linePoints().length) }) const activeTooltip = createMemo(() => { const index = activeIndex() const point = index === undefined ? undefined : usage()[index] if (index === undefined || !point) return undefined const bounds = modelUsageColumnBounds(index, usage().length) return { bounds, index, point, tooltipY: (linePoints()[index]?.y ?? 100) * lineScale, } }) const monthTicks = createMemo(() => modelUsageMonthTicks(usage(), props.data?.updatedAt ?? null)) return (
props.value(item) > 0)} fallback={} >
{ if (event.pointerType === "touch") return setActiveIndex(undefined) }} >
{(path) => ( <> {(area) => ( )} {(clip) => ( )} )} {(point) => (
{(point, index) => (
{ if (event.pointerType !== "touch") return setActiveIndex(index()) }} onPointerEnter={() => setActiveIndex(index())} onPointerMove={(event) => { if (event.pointerType === "touch") return setActiveIndex(index()) }} onClick={() => setActiveIndex(index())} onFocus={() => setActiveIndex(index())} onBlur={() => setActiveIndex(undefined)} onKeyDown={(event) => { if (event.key !== "Enter" && event.key !== " ") return event.preventDefault() setActiveIndex(index()) }} >
)}
{(active) => (
usage().length * 0.62 ? "left" : "right"} style={ { "--model-trend-tooltip-left": `${active.bounds.x}%`, "--model-trend-tooltip-right": `${active.bounds.x + active.bounds.width}%`, "--model-trend-tooltip-y": `${active.tooltipY}`, } as JSX.CSSProperties } > {formatModelUsageTooltipDate(active.point.date, props.data?.updatedAt ?? null)} {props.formatValue(props.value(active.point))} {props.valueUnit}

{props.rowLabel} {props.formatValue(props.value(active.point))}

)}
) } function ModelEfficiencySection(props: { data: StatsModelData | null; catalog: ModelCatalogEntry | null }) { const i18n = useI18n() return (
} > {(data) => ( <>
) } function ModelGeoBreakdownSection(props: { data: Record }) { const i18n = useI18n() const language = useLanguage() const [activeCountry, setActiveCountry] = createSignal() const data = createMemo(() => props.data["2M"]) const countryById = createMemo( () => new Map( data().flatMap((country) => { const id = countryNumericId(country.country) return id ? [[id, country] as const] : [] }), ), ) const maxTokens = createMemo(() => Math.max(0, ...data().map((country) => country.tokens)) || 1) const topCountries = createMemo(() => data().slice(0, 15)) const active = createMemo(() => data().find((country) => country.country === activeCountry()) ?? data()[0]) return (
{ if (event.pointerType === "touch") return setActiveCountry(undefined) }} > 0} fallback={} >
{(country) => (
#{String(country().rank).padStart(2, "0")} {formatCountryName(country().country, language.tag(language.locale()), i18n)}

{formatGeoTokens(country().tokens)} {formatGeoShare(country().share)}

)}
) } function GeoWorldMap(props: { countryById: Map activeCountry: string | undefined maxTokens: number onActiveCountryChange: (country: string | undefined) => void }) { const i18n = useI18n() const opacityScale = createMemo(() => scaleSqrt().domain([0, props.maxTokens]).range([0.26, 0.96]).clamp(true)) const countryOpacity = (country: CountryEntry | undefined) => { if (!country) return 0 const opacity = opacityScale()(country.tokens) if (!props.activeCountry || props.activeCountry === country.country) return opacity return Math.max(0.18, opacity * 0.36) } return ( {i18n.t("home.geoMapTitle")} {(country) => { const entry = () => props.countryById.get(country.id) return ( {(country) => { const entry = () => props.countryById.get(country.id) return ( {(marker) => ( ) }} ) } function GeoCountryList(props: { data: CountryEntry[] activeCountry: string | undefined maxTokens: number onActiveCountryChange: (country: string | undefined) => void }) { const i18n = useI18n() const language = useLanguage() const opacityScale = createMemo(() => scaleSqrt().domain([0, props.maxTokens]).range([0.26, 0.96]).clamp(true)) return (
    {(country) => (
    2. )}
) } function ModelPeersSection(props: { data: StatsModelData | null }) { const i18n = useI18n() return (
} >
    {(peer) => }
) } function MetricCard(props: { label: string; value: string; detail?: string; state?: "positive" | "negative" }) { return (
{props.label} {props.value} {(detail) =>

{detail()}

}
) } function PeerRow(props: { peer: ModelPeerEntry; active: boolean }) { const language = useLanguage() return (
  • {String(props.peer.rank).padStart(2, "0")} {props.peer.model} {props.peer.author} {formatTokens(props.peer.tokens)}
    • ) } function SectionTitle(props: { href: string; title: string; description: string }) { return } function ModelEmptyState(props: { title: string; description: string; compact?: boolean }) { return (
    {props.title}

    {props.description}

    ) } function modelComparisonPairs( catalog: ModelCatalog | undefined, catalogEntry: ModelCatalogEntry | null, data: StatsModelData | null, ) { const current = modelComparisonRef(catalogEntry, data) if (!current) return [] const peerPairs = (data?.peers ?? []) .filter((peer) => peer.model !== data?.model) .slice(0, 3) .map((peer) => ({ first: current, second: { name: peer.model, lab: peer.provider, slug: peer.slug, labName: peer.author, metric: `#${peer.rank} / ${formatTokens(peer.tokens)}`, }, detail: "Usage peer", })) const catalogPairs = ( catalogEntry && catalog ? (catalog.labs.find((lab) => lab.id === catalogEntry.lab)?.models ?? []) : [] ) .filter((model) => model.id !== catalogEntry?.id) .slice(0, 3) .map((model) => ({ first: current, second: modelRefFromCatalog(model), detail: "Same lab pair", })) return uniqueComparisonPairs([...peerPairs, ...catalogPairs]) } function modelComparisonRef( catalogEntry: ModelCatalogEntry | null, data: StatsModelData | null, ): ComparisonModelRef | undefined { if (catalogEntry) return modelRefFromCatalog(catalogEntry) if (!data) return undefined return { name: data.model, lab: data.provider, slug: data.slug, labName: data.author, metric: `#${data.rank}`, } } function getProviderIconId(author: string) { if (author === "MiniMax") return "minimax" if (author === "Moonshot") return "moonshotai" if (author === "Zhipu") return "zhipuai" return author.toLowerCase().replace(/[^a-z0-9]+/g, "") } function emptyCountryRecord(): Record { return { "1D": [], "1W": [], "2W": [], "1M": [], "2M": [], "3M": [], YTD: [], ALL: [], } } function countryNumericId(country: string) { return countryNumericIds.get(country.toUpperCase())?.padStart(3, "0") } function geoCountryMarker(country: (typeof worldCountries.features)[number]) { const bounds = worldPath.bounds(country) const [x, y] = worldPath.centroid(country) if (!Number.isFinite(x) || !Number.isFinite(y)) return undefined if (bounds[1][0] - bounds[0][0] >= 3 && bounds[1][1] - bounds[0][1] >= 3) return undefined return { x, y } } function formatCountryName(country: string, locale: string, i18n: ReturnType) { const code = country.toUpperCase() if (code === "ZZ") return i18n.t("home.unknown") if (!countryNumericId(code)) return code return new Intl.DisplayNames([locale], { type: "region" }).of(code) ?? code } function formatGeoTokens(value: number) { return formatTokens(value * 1_000_000_000_000) } function formatGeoShare(value: number) { return `${value.toFixed(value > 0 && value < 1 ? 1 : 0)}%` } function momentumChart(data: ModelUsagePoint[], updatedAt: string | null) { const fallbackDate = updatedAt ? formatMomentumDateLabel(updatedAt) : "JAN 1" const points = data.length > 1 ? data : [data[0] ?? emptyUsagePoint(fallbackDate), data[0] ?? emptyUsagePoint(fallbackDate)] const max = Math.max(1, ...points.map((point) => point.tokens)) const split = Math.max(1, Math.floor((points.length - 1) / 2)) const coordinates = points.map((point, index) => ({ date: point.date, tokens: point.tokens, x: (index / Math.max(1, points.length - 1)) * 1200, y: 364 - (point.tokens / max) * 364, })) const end = coordinates[coordinates.length - 1] return { startDate: coordinates[0].date, endDate: end.date, previousPath: smoothLinePath(coordinates.slice(0, split + 1)), currentPath: smoothLinePath(coordinates.slice(split)), markers: [ { ...coordinates[0], active: false }, { ...coordinates[split], active: true }, { ...end, active: true }, ], endStyle: { "--momentum-end-x": `${Math.min(94, Math.max(0, ((end.x + 8) / 1200) * 100))}%`, "--momentum-end-y": `${Math.min(96, Math.max(0, ((end.y - 7) / 370) * 100))}%`, } as JSX.CSSProperties, } } function emptyUsagePoint(date: string): ModelUsagePoint { return { date, tokens: 0, users: 0, sessions: 0, cost: 0 } } function smoothLinePath(points: { x: number; y: number }[]) { if (points.length === 0) return "" if (points.length === 1) return `M${formatSparklinePoint(points[0].x)} ${formatSparklinePoint(points[0].y)}` return points .map((point, index) => { if (index === 0) return `M${formatSparklinePoint(point.x)} ${formatSparklinePoint(point.y)}` const previous = points[index - 1] const next = points[index + 1] ?? point const beforePrevious = points[index - 2] ?? previous const controlStart = { x: previous.x + (point.x - beforePrevious.x) / 6, y: previous.y + (point.y - beforePrevious.y) / 6, } const controlEnd = { x: point.x - (next.x - previous.x) / 6, y: point.y - (next.y - previous.y) / 6, } return `C${formatSparklinePoint(controlStart.x)} ${formatSparklinePoint(controlStart.y)} ${formatSparklinePoint(controlEnd.x)} ${formatSparklinePoint(controlEnd.y)} ${formatSparklinePoint(point.x)} ${formatSparklinePoint(point.y)}` }) .join(" ") } function momentumMonthLabels(startDate: string, locale: string, updatedAt: string | null) { const start = parseMomentumDate(startDate, updatedAt) const first = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth() - 1, 1)) return Array.from({ length: 5 }, (_, index) => { const date = new Date(Date.UTC(first.getUTCFullYear(), first.getUTCMonth() + index, 1)) return { label: new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" }).format(date).toUpperCase(), x: index === 4 ? 98 : index * 24.5, } }) } function formatMomentumDate(date: string, locale: string, updatedAt: string | null) { return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", year: "numeric", timeZone: "UTC", }) .format(parseMomentumDate(date, updatedAt)) .toUpperCase() } function parseMomentumDate(date: string, updatedAt: string | null): Date { const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(date) if (iso) return new Date(Date.UTC(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]))) const label = /^([A-Za-z]{3})\s+(\d{1,2})$/.exec(date.trim()) const month = label ? shortMonths.findIndex((item) => item.toLowerCase() === label[1].toLowerCase()) : -1 if (!label || month < 0) return new Date(Date.UTC(1970, 0, 1)) const anchor = updatedAt ? parseMomentumDate(updatedAt, null) : new Date(Date.UTC(1970, 0, 1)) const year = month > anchor.getUTCMonth() + 1 ? anchor.getUTCFullYear() - 1 : anchor.getUTCFullYear() return new Date(Date.UTC(year, month, Number(label[2]))) } function formatMomentumDateLabel(date: string) { const parsed = parseMomentumDate(date, null) if (parsed.getUTCFullYear() === 1970) return "JAN 1" return `${shortMonths[parsed.getUTCMonth()]} ${parsed.getUTCDate()}` } function modelUsageStripHeight(value: number, max: number) { if (value <= 0 || max <= 0) return "0px" return `max(2px, ${(value / max) * 100}%)` } function modelUsageLineY(value: number, max: number) { if (value <= 0 || max <= 0) return 100 return Math.max(0, 100 - (value / max) * 100) } function modelUsagePointX(index: number, count: number) { if (count <= 1) return 50 return ((index + 0.5) / count) * 100 } function modelUsageColumnBounds(index: number, count: number) { if (count <= 0) return { x: 0, width: 100 } return { x: (index / count) * 100, width: 100 / count } } function modelUsageColumnInnerBounds(index: number, count: number) { const bounds = modelUsageColumnBounds(index, count) const inset = Math.min(bounds.width * 0.1, 0.24) return { x: bounds.x + inset, width: Math.max(0.001, bounds.width - inset * 2) } } type ModelUsageLinePoint = { x: number; y: number } function modelUsageLinePath(points: ModelUsageLinePoint[]) { if (points.length === 0) return "" if (points.length === 1) return `M ${formatUsagePathNumber(points[0].x)} ${formatUsagePathNumber(points[0].y)}` return points.slice(0, -1).reduce( (path, point, index) => { const next = points[index + 1] const previous = points[index - 1] ?? point const afterNext = points[index + 2] ?? next const controlA = { x: point.x + (next.x - previous.x) / 6, y: clampUsagePercent(point.y + (next.y - previous.y) / 6), } const controlB = { x: next.x - (afterNext.x - point.x) / 6, y: clampUsagePercent(next.y - (afterNext.y - point.y) / 6), } return `${path} C ${formatUsagePathNumber(controlA.x)} ${formatUsagePathNumber(controlA.y)}, ${formatUsagePathNumber(controlB.x)} ${formatUsagePathNumber(controlB.y)}, ${formatUsagePathNumber(next.x)} ${formatUsagePathNumber(next.y)}` }, `M ${formatUsagePathNumber(points[0].x)} ${formatUsagePathNumber(points[0].y)}`, ) } function modelUsageAreaPath(points: ModelUsageLinePoint[], bottom: number) { const path = modelUsageLinePath(points) if (!path || points.length === 0) return "" const first = points[0] const last = points[points.length - 1] return `${path} L ${formatUsagePathNumber(last.x)} ${formatUsagePathNumber(bottom)} L ${formatUsagePathNumber(first.x)} ${formatUsagePathNumber(bottom)} Z` } function formatUsagePathNumber(value: number) { return Number(value.toFixed(3)) } function clampUsagePercent(value: number) { return Math.max(0, Math.min(100, value)) } function modelUsageMonthTicks(points: ModelUsagePoint[], updatedAt: string | null) { const seen = new Set() return points.flatMap((point, index) => { const parsed = parseMomentumDate(point.date, updatedAt) const label = shortMonths[parsed.getUTCMonth()] if (!label || seen.has(label)) return [] seen.add(label) return [ { label, left: modelUsagePointX(index, points.length), align: index === 0 ? "start" : index >= points.length - 2 ? "end" : "center", }, ] }) } function formatModelUsageTooltipDate(value: string, updatedAt: string | null) { const date = parseMomentumDate(value, updatedAt) if (date.getUTCFullYear() === 1970) return value return new Intl.DateTimeFormat("en", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC", }).format(date) } function formatRankLabel(rank: number | null) { if (rank === null) return "--" return `#${String(rank).padStart(2, "0")}` } function capitalizeLabel(value: string) { return value.charAt(0).toUpperCase() + value.slice(1) } function formatRankMove(change: number) { if (change > 0) return `+${change}` return `${change}` } function formatHeroRank(rank: number | null) { if (rank === null) return "--" return String(rank).padStart(2, "0") } function sparklineLinePath(values: number[]) { return sparklinePoints(values) .map( (point, index) => `${index === 0 ? "M" : "L"}${formatSparklinePoint(point.x)} ${formatSparklinePoint(point.y)}`, ) .join(" ") } function sparklineAreaPath(values: number[]) { const points = sparklinePoints(values) return `M${formatSparklinePoint(points[0].x)} 18 ${points .map((point) => `L${formatSparklinePoint(point.x)} ${formatSparklinePoint(point.y)}`) .join(" ")} L${formatSparklinePoint(points[points.length - 1].x)} 18 Z` } function sparklinePoints(values: number[]) { const normalized = values.length > 1 ? values : [values[0] ?? 0, values[0] ?? 0] const min = Math.min(...normalized) const max = Math.max(...normalized) return normalized.map((value, index) => ({ x: 8 + (index / Math.max(1, normalized.length - 1)) * 20, y: min === max ? 12 : 18 - ((value - min) / (max - min)) * 12, })) } function formatSparklinePoint(value: number) { return Number(value.toFixed(2)).toString() } function formatModelRankMoveLabel(data: StatsModelData, i18n: ReturnType) { if (data.rank === null) return i18n.t("model.noUsageLastWeek") if (data.previousRank === null) return i18n.t("model.newThisWeek") const change = data.previousRank - data.rank if (change === 0) return i18n.t("model.sameAsPreviousWeek") return i18n.t("model.vsPreviousWeek", { change: formatRankMove(change) }) } function formatTokens(value: number) { if (value >= 1_000_000_000_000) return `${trimNumber(value / 1_000_000_000_000, value >= 10_000_000_000_000 ? 0 : 1)}T` if (value >= 1_000_000_000) return `${trimNumber(value / 1_000_000_000, value >= 10_000_000_000 ? 0 : 1)}B` if (value >= 1_000_000) return `${trimNumber(value / 1_000_000, value >= 10_000_000 ? 0 : 1)}M` if (value >= 1_000) return `${trimNumber(value / 1_000, value >= 10_000 ? 0 : 1)}K` return String(Math.round(value)) } function formatCatalogLimit(value: number | undefined, unknown: string) { return value === undefined ? unknown : formatTokens(value) } function formatCatalogMonth(value: string | undefined, locale: string, unknown: string) { if (!value) return unknown const match = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/.exec(value) if (!match) return value return new Intl.DateTimeFormat(locale, { month: match[2] ? "short" : undefined, year: "numeric", timeZone: "UTC", }).format(new Date(Date.UTC(Number(match[1]), match[2] ? Number(match[2]) - 1 : 0, 1))) } function formatCatalogModalities(values: string[], locale: string, unknown: string) { if (values.length === 0) return unknown const labels = values.map((value) => value.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase())) if (labels.length === 1) return labels[0] ?? unknown return new Intl.ListFormat(locale, { style: "long", type: "conjunction" }).format(labels) } function formatInteger(value: number) { return new Intl.NumberFormat("en").format(value) } function formatUsers(value: number) { if (value >= 1_000_000) return `${trimNumber(value / 1_000_000, value >= 10_000_000 ? 0 : 1)}M` if (value >= 1_000) return `${trimNumber(value / 1_000, value >= 10_000 ? 0 : 1)}K` return formatInteger(Math.round(value)) } function formatPercent(value: number) { return `${value.toFixed(value > 0 && value < 10 ? 1 : 0)}%` } function formatMoney(value: number) { if (value >= 1_000_000) return `$${trimNumber(value / 1_000_000, value >= 10_000_000 ? 0 : 1)}M` if (value >= 1_000) return `$${trimNumber(value / 1_000, value >= 10_000 ? 0 : 1)}K` return `$${value.toFixed(value >= 10 ? 0 : 2)}` } function formatCatalogUnitPrice(value: number | undefined) { if (value === undefined) return "-" return `${formatModelPrice(value)} / 1M` } function formatModelPrice(value: number) { if (value > 0 && value < 0.01) return `$${value.toFixed(4)}` return formatMoney(value) } function formatSessionCost(value: number) { return `$${value.toFixed(value > 0 && value < 0.01 ? 4 : 2)}` } function formatChange(value: number) { if (value > 0) return `+${value}%` return `${value}%` } function trimNumber(value: number, digits: number) { return Number(value.toFixed(digits)).toLocaleString("en") } function providerSlug(provider: string) { return provider .trim() .toLowerCase() .replace(/[^a-z0-9]+/g, "-") .replace(/^-+|-+$/g, "") .replace(/-{2,}/g, "-") }