vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-05-30 20:44:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 18

fix(stats): stack largest segments at bottom

Browse source
This commit is contained in:
Adam 2026-05-29 09:30:32 -05:00
parent 0a60dbdcee
commit 16cae9a323
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
1 changed files with 25 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

37
packages/stats/app/src/routes/index.tsx
View file

@ -648,7 +648,7 @@ function TopModelsChart(props: { data: UsagePoint[]; range: UsageRange }) {
}}
>
<div data-slot="top-models-stack" style={{ "grid-template-rows": getTopModelsSegmentRows(day) }}>
<For each={visibleTopModelsSegments(day)}>
<For each={stackedTopModelsSegments(day)}>
{(item) => (
<i
data-series={item.index}
@ -729,7 +729,7 @@ function getTopModelsMaxTotal(data: UsagePoint[]) {
function getTopModelsSegmentRows(point: UsagePoint) {
const total = usageTotal(point)
if (total <= 0) return ""
return visibleTopModelsSegments(point)
return stackedTopModelsSegments(point)
.map((item) => `${(item.segment.value / total) * 100}%`)
.join(" ")
}
@ -738,6 +738,12 @@ function visibleTopModelsSegments(point: UsagePoint) {
return point.segments.map((segment, index) => ({ segment, index })).filter((item) => item.segment.value > 0)
}
function stackedTopModelsSegments(point: UsagePoint) {
return visibleTopModelsSegments(point)
.slice()
.sort((a, b) => a.segment.value - b.segment.value || a.index - b.index)
}
function getTopModelsSegmentColor(index: number, muted: boolean, activeSegment: number | undefined) {
if (activeSegment !== undefined)
return activeSegment === index ? (usageColors[index] ?? "var(--stats-text)") : "var(--stats-layer-2)"
@ -982,35 +988,35 @@ function MarketShare(props: {
onClick={() => props.onActiveIndexChange(index())}
onPointerEnter={() => props.onActiveIndexChange(index())}
>
<For each={day.authors}>
{(author, authorIndex) => (
<For each={stackedMarketAuthors(day)}>
{(item) => (
<span
data-active={props.activeAuthor === author.author ? "true" : undefined}
data-active={props.activeAuthor === item.author.author ? "true" : undefined}
data-muted={
props.activeAuthor !== undefined && props.activeAuthor !== author.author ? "true" : undefined
props.activeAuthor !== undefined && props.activeAuthor !== item.author.author ? "true" : undefined
}
style={{
"background-color": getMarketSegmentColor(
author.author,
marketColors[authorIndex()] ?? "var(--stats-text)",
item.author.author,
marketColors[item.index] ?? "var(--stats-text)",
props.activeAuthor,
),
"flex-grow": author.share,
"flex-grow": item.author.share,
}}
onPointerEnter={(event) => {
event.stopPropagation()
props.onActiveIndexChange(index())
props.onActiveAuthorChange(author.author)
props.onActiveAuthorChange(item.author.author)
}}
onPointerDown={(event) => {
event.stopPropagation()
props.onActiveIndexChange(index())
props.onActiveAuthorChange(author.author)
props.onActiveAuthorChange(item.author.author)
}}
onClick={(event) => {
event.stopPropagation()
props.onActiveIndexChange(index())
props.onActiveAuthorChange(author.author)
props.onActiveAuthorChange(item.author.author)
}}
/>
)}
@ -1063,6 +1069,13 @@ function getMarketSegmentColor(author: string, color: string, activeAuthor: stri
return "var(--stats-bar-idle)"
}
function stackedMarketAuthors(day: MarketDay) {
return day.authors
.map((author, index) => ({ author, index }))
.slice()
.sort((a, b) => a.author.share - b.author.share || a.index - b.index)
}
function isMarketMobileLabelHidden(index: number, count: number) {
return count > 7 && index % 2 === 1
}