EnterpriseAI/ClosedCode
1
0
Fork 0
Code Issues Pull Requests Actions 31 Packages Projects Releases Wiki Activity

feat(stats): redesign lab usage

Browse Source
This commit is contained in:
Adam
2026-07-01 14:41:28 -05:00
parent 262ef4fdc2
commit 91ca75c4dc
3 changed files with 515 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stats/app/src/routes/index.css
+245 -1
View File
@@ -2848,7 +2848,7 @@
align-content: start;
gap: 24px;
min-height: 312px;
padding: 128px 40px 40px;
padding: 128px 0 40px;
box-shadow: none;
}
@@ -3583,6 +3583,189 @@
font-weight: 500;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] {
--lab-usage-gap: 4px;
--lab-usage-column-gutter: calc(var(--lab-usage-gap) / 2);
--lab-usage-bar-height: 40px;
--lab-usage-line-bottom: 80px;
--lab-usage-bar: #dbdbdb;
--lab-usage-line: #808080;
--lab-usage-active: #3b5cf6;
--lab-usage-band: #f2f2f2;
grid-template-rows: minmax(0, 450px) 14px;
gap: 40px;
height: 504px;
}
[data-page="stats"] [data-slot="lab-usage-plot"] {
position: relative;
min-width: 0;
min-height: 0;
overflow: visible;
}
[data-page="stats"] [data-slot="lab-usage-plot"]::after {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to bottom, transparent 42%, color-mix(in srgb, var(--stats-text) 3%, transparent));
content: "";
pointer-events: none;
}
[data-page="stats"] [data-slot="lab-usage-line"] {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
display: block;
width: 100%;
height: calc(100% - var(--lab-usage-line-bottom));
overflow: visible;
pointer-events: none;
}
[data-page="stats"] [data-slot="lab-usage-line"][data-layer="base"] {
z-index: 2;
}
[data-page="stats"] [data-slot="lab-usage-line"][data-layer="active"] {
z-index: 4;
}
[data-page="stats"] [data-slot="lab-usage-line"] path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
[data-page="stats"] [data-slot="lab-usage-line-base"] {
stroke: var(--lab-usage-line);
}
[data-page="stats"] [data-slot="lab-usage-line-active"] {
stroke: var(--lab-usage-active);
}
[data-page="stats"] [data-slot="lab-usage-bars"] {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
gap: 0;
min-width: 0;
}
[data-page="stats"] [data-slot="lab-usage-column"] {
position: relative;
box-sizing: border-box;
flex: 1 1 0;
min-width: 0;
height: 100%;
outline: none;
cursor: pointer;
}
[data-page="stats"] [data-slot="lab-usage-column"]::before {
position: absolute;
inset: 0;
z-index: 1;
background: transparent;
content: "";
pointer-events: none;
transition: background 120ms ease;
}
[data-page="stats"] [data-slot="lab-usage-column"][data-active="true"]::before,
[data-page="stats"] [data-slot="lab-usage-column"]:focus-visible::before {
background: var(--lab-usage-band);
box-shadow:
inset var(--lab-usage-column-gutter) 0 0 var(--stats-bg),
inset calc(var(--lab-usage-column-gutter) * -1) 0 0 var(--stats-bg);
}
[data-page="stats"] [data-slot="lab-usage-token-bar"] {
position: absolute;
right: var(--lab-usage-column-gutter);
bottom: 0;
left: var(--lab-usage-column-gutter);
z-index: 2;
height: var(--lab-usage-token-height);
background: var(--lab-usage-bar);
transition:
background 120ms ease,
opacity 120ms ease;
}
[data-page="stats"] [data-slot="lab-usage-column"][data-active="true"] [data-slot="lab-usage-token-bar"] {
background: var(--lab-usage-active);
}
[data-page="stats"] [data-slot="lab-usage-column"][data-muted="true"] [data-slot="lab-usage-token-bar"] {
opacity: 0.64;
}
[data-page="stats"] [data-slot="lab-usage-months"] {
position: relative;
height: 14px;
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-slot="lab-usage-months"] span {
position: absolute;
top: 0;
left: var(--lab-usage-month-left);
transform: translateX(-50%);
}
[data-page="stats"] [data-slot="lab-usage-months"] span[data-align="start"] {
transform: none;
}
[data-page="stats"] [data-slot="lab-usage-months"] span[data-align="end"] {
transform: translateX(-100%);
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"] {
z-index: 6;
top: clamp(12px, calc(var(--lab-usage-user-y) * 1% - 38px), calc(100% - 92px));
width: 192px;
min-width: 192px;
background: var(--stats-bg);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"][data-placement="right"] {
right: auto;
left: calc(var(--lab-usage-tooltip-right) + 8px);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"][data-placement="left"] {
right: calc(100% - var(--lab-usage-tooltip-left) + 8px);
left: auto;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"] p {
height: 16px;
margin: 8px 0;
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"]
i[data-kind="tokens"] {
background: var(--lab-usage-active);
}
[data-page="stats"] [data-component="model-peer-list"] {
display: grid;
gap: 8px;
@@ -3669,6 +3852,15 @@
--stats-logo-stroke: #211e1e;
}
[data-page="stats"][data-theme="dark"] [data-component="model-usage-chart"][data-variant="lab-usage"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="lab-usage"] {
--lab-usage-bar: #3a3a3a;
--lab-usage-line: #a3a3a3;
--lab-usage-band: #242424;
}
[data-page="stats"][data-theme="dark"] [data-component="chart-tooltip"],
:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-component="chart-tooltip"] {
background: #242424f2;
@@ -3820,6 +4012,14 @@
--stats-logo-stroke: #211e1e;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="lab-usage"] {
--lab-usage-bar: #3a3a3a;
--lab-usage-line: #a3a3a3;
--lab-usage-band: #242424;
}
:root:not([data-stats-theme="light"]) [data-page="stats"]:not([data-theme="light"]) [data-component="chart-tooltip"] {
background: #242424f2;
}
@@ -3915,6 +4115,21 @@
}
}
[data-page="stats"][data-theme="dark"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"],
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"],
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"] {
background: var(--stats-bg);
}
@media (min-width: 48rem) {
[data-page="stats"] [data-slot="header-button"][data-variant="neutral"] {
display: inline-flex;
@@ -4372,6 +4587,35 @@
left: 0;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] {
--model-usage-mobile-bar-width: 20px;
--model-usage-mobile-edge-space: 48px;
--model-usage-mobile-track-width: calc(
var(--model-usage-count) * var(--model-usage-mobile-bar-width) + var(--model-usage-mobile-edge-space)
);
--lab-usage-line-bottom: 64px;
grid-template-rows: minmax(0, 360px) 14px;
gap: 24px;
height: 398px;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-slot="lab-usage-plot"],
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-slot="lab-usage-months"] {
direction: ltr;
width: var(--model-usage-mobile-track-width);
min-width: var(--model-usage-mobile-track-width);
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-slot="lab-usage-column"] {
flex: 0 0 var(--model-usage-mobile-bar-width);
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"] {
top: auto;
width: auto;
min-width: 0;
}
[data-page="stats"] [data-component="model-peer-list"] a {
grid-template-columns: 30px minmax(0, 1fr) minmax(64px, auto);
}