vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-08-23 18:43:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix(stats): improve chart tooltip truncation

Browse source
This commit is contained in:
Adam 2026-08-21 17:13:13 -05:00
parent ff3ef6e3e6
commit 34a83b27c3
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
4 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/stats/app/src/routes/[lab]/[model].tsx
View file

@ -812,7 +812,8 @@ function ModelTrendSection(props: {
<div data-slot="tooltip-divider" />
<p>
<span data-slot="tooltip-label">
<i data-kind={props.lineTone === "active" ? "users" : "tokens"} /> {props.rowLabel}
<i data-kind={props.lineTone === "active" ? "users" : "tokens"} />
<span data-slot="tooltip-name">{props.rowLabel}</span>
</span>
<b>{props.formatValue(props.value(active.point))}</b>
</p>

6
packages/stats/app/src/routes/[lab]/index.tsx
View file

@ -473,13 +473,15 @@ function LabUsageSection(props: { lab: ModelCatalogLab; data: StatsLabData | nul
<div data-slot="tooltip-divider" />
<p>
<span data-slot="tooltip-label">
<i data-kind="tokens" /> {i18n.t("lab.dailyTokens")}
<i data-kind="tokens" />
<span data-slot="tooltip-name">{i18n.t("lab.dailyTokens")}</span>
</span>
<b>{formatTokens(active.point.tokens)}</b>
</p>
<p>
<span data-slot="tooltip-label">
<i data-kind="users" /> {i18n.t("model.uniqueUsers")}
<i data-kind="users" />
<span data-slot="tooltip-name">{i18n.t("model.uniqueUsers")}</span>
</span>
<b>{formatUsers(active.point.users)}</b>
</p>

11
packages/stats/app/src/routes/index.css
View file

@ -1590,6 +1590,13 @@ body {
white-space: nowrap;
}
[data-page="stats"] [data-component="chart-tooltip"] [data-slot="tooltip-name"] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="chart-tooltip"] [data-slot="tooltip-divider"] {
height: 1px;
margin: 4px -16px 2px;
@ -1677,7 +1684,7 @@ body {
[data-page="stats"] :is([data-section="top-models"], [data-section="unique-users"]) [data-component="chart-tooltip"] p {
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px;
gap: 1ch;
height: 16px;
margin: 4px 0 0;
padding: 0 8px;
@ -4723,7 +4730,7 @@ body {
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] p {
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px;
gap: 1ch;
height: 20px;
margin: 8px 0;
padding: 0 8px;

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

@ -568,8 +568,8 @@ function TopModelsChart(props: {
style={{
background: getRankColor(item.segment.model, item.index, segmentOrder(), usageColors),
}}
/>{" "}
{item.segment.model}
/>
<span data-slot="tooltip-name">{item.segment.model}</span>
</span>
<b>{formatUsageChartValue(item.segment.value, metric())}</b>
</p>