Skip to content

Commit 16cb77c

Browse files
author
Frank
committed
zen: add usage graph
1 parent a5564f7 commit 16cb77c

File tree

8 files changed

+598
-6
lines changed

8 files changed

+598
-6
lines changed

‎bun.lock‎

Lines changed: 5 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/console/app/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@
1111
},
1212
"dependencies": {
1313
"@ibm/plex": "6.4.1",
14+
"@jsx-email/render": "1.1.1",
15+
"@kobalte/core": "catalog:",
16+
"@openauthjs/openauth": "catalog:",
1417
"@opencode-ai/console-core": "workspace:*",
1518
"@opencode-ai/console-mail": "workspace:*",
16-
"@openauthjs/openauth": "catalog:",
17-
"@kobalte/core": "catalog:",
18-
"@jsx-email/render": "1.1.1",
1919
"@opencode-ai/console-resource": "workspace:*",
2020
"@solidjs/meta": "^0.29.4",
2121
"@solidjs/router": "^0.15.0",
2222
"@solidjs/start": "^1.1.0",
23+
"chart.js": "4.5.1",
2324
"solid-js": "catalog:",
2425
"vinxi": "^0.5.7",
2526
"zod": "catalog:"

‎packages/console/app/src/component/icon.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,3 +212,19 @@ export function IconStealth(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
212212
</svg>
213213
)
214214
}
215+
216+
export function IconChevronLeft(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
217+
return (
218+
<svg {...props} viewBox="0 0 20 20" fill="none">
219+
<path d="M12 15L7 10L12 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
220+
</svg>
221+
)
222+
}
223+
224+
export function IconChevronRight(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
225+
return (
226+
<svg {...props} viewBox="0 0 20 20" fill="none">
227+
<path d="M8 5L13 10L8 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
228+
</svg>
229+
)
230+
}

‎packages/console/app/src/routes/workspace/[id]/graph-section.module.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
[data-component="empty-state"] {
2+
padding: var(--space-20) var(--space-6);
3+
text-align: center;
4+
border: 1px dashed var(--color-border);
5+
border-radius: var(--border-radius-sm);
6+
height: 400px;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
}
11+
12+
[data-component="empty-state"] p {
13+
font-size: var(--font-size-sm);
14+
color: var(--color-text-muted);
15+
}
16+
17+
[data-slot="filter-container"] {
18+
margin-bottom: 0;
19+
display: flex;
20+
align-items: center;
21+
gap: var(--space-3);
22+
}
23+
24+
[data-slot="month-picker"] {
25+
display: flex;
26+
align-items: center;
27+
background-color: var(--color-bg);
28+
border: 1px solid var(--color-border);
29+
border-radius: var(--border-radius-sm);
30+
padding: 0;
31+
}
32+
33+
[data-slot="month-button"] {
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
background: none;
38+
border: none !important;
39+
color: var(--color-text);
40+
cursor: pointer;
41+
padding: var(--space-2) var(--space-3);
42+
border-radius: var(--border-radius-xs);
43+
transition: background-color 0.2s;
44+
line-height: 1;
45+
}
46+
47+
[data-slot="month-button"]:hover {
48+
background-color: var(--color-bg-hover);
49+
}
50+
51+
[data-slot="month-button"] svg {
52+
display: block;
53+
width: 16px;
54+
height: 16px;
55+
stroke-width: 2;
56+
}
57+
58+
[data-slot="month-label"] {
59+
font-size: var(--font-size-sm);
60+
font-weight: 500;
61+
color: var(--color-text);
62+
line-height: 1.5;
63+
min-width: 140px;
64+
text-align: center;
65+
white-space: nowrap;
66+
}
67+
68+
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="trigger"] {
69+
border: 1px solid var(--color-border);
70+
background-color: var(--color-bg);
71+
padding: var(--space-2) var(--space-3);
72+
border-radius: var(--border-radius-sm);
73+
color: var(--color-text);
74+
font-size: var(--font-size-sm);
75+
line-height: 1.5;
76+
77+
&:hover {
78+
border-color: var(--color-accent);
79+
}
80+
81+
&:focus {
82+
outline: none;
83+
border-color: var(--color-accent);
84+
box-shadow: 0 0 0 3px var(--color-accent-alpha);
85+
}
86+
}
87+
88+
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="chevron"] {
89+
opacity: 0.6;
90+
}
91+
92+
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="dropdown"] {
93+
min-width: 200px;
94+
max-height: 300px;
95+
overflow-y: auto;
96+
padding: var(--space-1);
97+
}
98+
99+
[data-slot="model-item"] {
100+
display: flex;
101+
align-items: center;
102+
gap: var(--space-2);
103+
padding: var(--space-2) var(--space-3);
104+
cursor: pointer;
105+
transition: background-color 0.2s;
106+
font-size: var(--font-size-sm);
107+
color: var(--color-text);
108+
border: none !important;
109+
background: none;
110+
width: 100%;
111+
text-align: left;
112+
white-space: nowrap;
113+
}
114+
115+
[data-slot="model-item"]:hover {
116+
background: var(--color-bg-hover);
117+
}
118+
119+
[data-slot="model-item"] span {
120+
flex: 1;
121+
user-select: none;
122+
}
123+
124+
[data-slot="chart-container"] {
125+
padding: var(--space-6);
126+
background: var(--color-bg-secondary);
127+
border: 1px solid var(--color-border);
128+
border-radius: var(--border-radius-sm);
129+
height: 400px;
130+
}
131+
132+
@media (max-width: 40rem) {
133+
[data-slot="chart-container"] {
134+
height: 300px;
135+
padding: var(--space-4);
136+
}
137+
138+
[data-component="empty-state"] {
139+
height: 300px;
140+
}
141+
}

0 commit comments

Comments
 (0)