Skip to content

Commit 2840d38

Browse files
gzgz
committed
[benchmarking] add dashboard to display scalebench results
Signed-off-by: Gerd Zellweger <mail@gerdzellweger.com>
1 parent c1fc164 commit 2840d38

File tree

2 files changed

+1624
-0
lines changed

2 files changed

+1624
-0
lines changed

‎scripts/dashboard.css‎

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=DM+Sans+Mono:wght@400;500;600&display=swap");
2+
3+
:root {
4+
--bg: #F3F3F3;
5+
--bg-2: #F2F9F9;
6+
--card: #FFFFFF;
7+
--ink: #1E1E1E;
8+
--muted: #717171;
9+
--accent: #C533B9;
10+
--accent-2: #FCAF4F;
11+
--border: #D9D9D9;
12+
--shadow: 0 12px 24px #D9D9D9;
13+
}
14+
15+
* {
16+
box-sizing: border-box;
17+
}
18+
19+
body {
20+
margin: 0;
21+
font-family: "DM Sans", "Segoe UI", sans-serif;
22+
color: var(--ink);
23+
background:
24+
radial-gradient(900px 420px at 10% 0%, #F3D6F1 0%, #FFFFFF 70%),
25+
radial-gradient(1100px 520px at 90% 10%, #FFF9ED 0%, #FFFFFF 70%),
26+
linear-gradient(180deg, var(--bg), var(--bg-2));
27+
}
28+
29+
.app {
30+
padding: 1.6rem 2.2rem 2.6rem;
31+
min-height: 100vh;
32+
}
33+
34+
.app-header {
35+
display: flex;
36+
flex-wrap: wrap;
37+
gap: 1.5rem;
38+
align-items: flex-end;
39+
justify-content: space-between;
40+
}
41+
42+
.header-left {
43+
display: flex;
44+
align-items: center;
45+
gap: 1.2rem;
46+
}
47+
48+
.header-right {
49+
display: flex;
50+
align-items: center;
51+
gap: 1.2rem;
52+
}
53+
54+
.brand-logo {
55+
width: 88px;
56+
height: 88px;
57+
object-fit: contain;
58+
}
59+
60+
.app-title {
61+
margin: 0;
62+
font-size: 2.4rem;
63+
letter-spacing: -0.02em;
64+
}
65+
66+
.app-subtitle {
67+
margin: 0.2rem 0 0;
68+
color: var(--muted);
69+
}
70+
71+
.status-pill {
72+
background: var(--card);
73+
border: 1px solid var(--border);
74+
border-radius: 999px;
75+
padding: 0.4rem 0.9rem;
76+
font-size: 0.85rem;
77+
box-shadow: var(--shadow);
78+
}
79+
80+
.layout {
81+
display: grid;
82+
grid-template-columns: 320px 1fr;
83+
gap: 1.6rem;
84+
align-items: start;
85+
margin-top: 1.8rem;
86+
}
87+
88+
@media (max-width: 980px) {
89+
.layout {
90+
grid-template-columns: 1fr;
91+
}
92+
}
93+
94+
.controls {
95+
background: var(--card);
96+
border: 1px solid var(--border);
97+
border-radius: 18px;
98+
padding: 1.2rem;
99+
box-shadow: var(--shadow);
100+
position: sticky;
101+
top: 1.2rem;
102+
}
103+
104+
.control-group + .control-group {
105+
margin-top: 1.4rem;
106+
}
107+
108+
.control-label {
109+
display: block;
110+
font-size: 0.72rem;
111+
font-weight: 600;
112+
letter-spacing: 0.12em;
113+
text-transform: uppercase;
114+
color: var(--muted);
115+
margin-bottom: 0.45rem;
116+
}
117+
118+
.control-label-small {
119+
font-size: 0.65rem;
120+
margin-top: 0.3rem;
121+
}
122+
123+
.control-subgroup + .control-subgroup {
124+
margin-top: 0.6rem;
125+
}
126+
127+
.gauge-worker-select {
128+
margin: 0.6rem 0.6rem 0.3rem;
129+
}
130+
131+
.gauge-worker-select .rc-slider {
132+
margin: 0.25rem 0.2rem 0.1rem;
133+
}
134+
135+
.control-input {
136+
width: 100%;
137+
padding: 0.55rem 0.7rem;
138+
border: 1px solid var(--border);
139+
border-radius: 10px;
140+
font-size: 0.95rem;
141+
background: #FFFFFF;
142+
}
143+
144+
.button {
145+
margin-top: 0.7rem;
146+
padding: 0.55rem 1.1rem;
147+
border: none;
148+
border-radius: 999px;
149+
background: var(--accent);
150+
color: #FFFFFF;
151+
font-weight: 600;
152+
cursor: pointer;
153+
transition: transform 0.2s ease, box-shadow 0.2s ease;
154+
}
155+
156+
.button-outline {
157+
background: transparent;
158+
color: var(--accent);
159+
border: 1px solid var(--accent);
160+
}
161+
162+
.button:hover {
163+
transform: translateY(-1px);
164+
background: #A52B9A;
165+
}
166+
167+
.button-outline:hover {
168+
background: rgba(197, 51, 185, 0.1);
169+
}
170+
171+
.upload {
172+
display: inline-block;
173+
margin-top: 0.6rem;
174+
}
175+
176+
.control-help {
177+
margin-top: 0.5rem;
178+
font-size: 0.75rem;
179+
color: var(--muted);
180+
}
181+
182+
.tabs-card {
183+
background: var(--card);
184+
border: 1px solid var(--border);
185+
border-radius: 16px;
186+
padding: 0.4rem 0.6rem;
187+
box-shadow: var(--shadow);
188+
}
189+
190+
.tabs {
191+
border-bottom: none;
192+
}
193+
194+
.tab {
195+
border: none !important;
196+
border-radius: 999px !important;
197+
padding: 0.35rem 0.95rem !important;
198+
margin-right: 0.35rem !important;
199+
font-weight: 600 !important;
200+
color: var(--muted) !important;
201+
background: transparent !important;
202+
}
203+
204+
.tab--selected {
205+
color: #FFFFFF !important;
206+
background: var(--accent) !important;
207+
box-shadow: none;
208+
}
209+
210+
.grid {
211+
display: grid;
212+
grid-template-columns: repeat(2, minmax(280px, 1fr));
213+
gap: 1.2rem;
214+
margin-top: 1.6rem;
215+
}
216+
217+
@media (max-width: 1200px) {
218+
.grid {
219+
grid-template-columns: 1fr;
220+
}
221+
}
222+
223+
.card {
224+
background: var(--card);
225+
border: 1px solid var(--border);
226+
border-radius: 18px;
227+
padding: 0.6rem;
228+
box-shadow: var(--shadow);
229+
animation: floatIn 0.5s ease both;
230+
}
231+
232+
.card-title {
233+
font-size: 0.9rem;
234+
font-weight: 600;
235+
letter-spacing: 0.04em;
236+
text-transform: uppercase;
237+
color: var(--muted);
238+
margin: 0.4rem 0.6rem 0;
239+
}
240+
241+
.info-tooltip {
242+
position: relative;
243+
}
244+
245+
.info-tooltip::after {
246+
content: attr(data-tooltip);
247+
position: absolute;
248+
bottom: 140%;
249+
left: 50%;
250+
transform: translateX(-50%);
251+
background: #1F2937;
252+
color: #F9FAFB;
253+
padding: 0.4rem 0.55rem;
254+
border-radius: 8px;
255+
font-size: 0.7rem;
256+
text-transform: none;
257+
letter-spacing: 0;
258+
white-space: nowrap;
259+
opacity: 0;
260+
visibility: hidden;
261+
transition: opacity 0.05s ease-out, visibility 0.05s ease-out;
262+
pointer-events: none;
263+
z-index: 10;
264+
}
265+
266+
.info-tooltip:hover::after {
267+
opacity: 1;
268+
visibility: visible;
269+
}
270+
271+
.card.empty {
272+
padding: 1.4rem;
273+
color: var(--muted);
274+
}
275+
276+
.graph {
277+
height: 320px;
278+
width: 100%;
279+
}
280+
281+
.gauge-grid {
282+
display: grid;
283+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
284+
gap: 0.6rem;
285+
padding: 0.2rem 0.4rem 0.4rem;
286+
}
287+
288+
.sql-card {
289+
background: var(--card);
290+
border: 1px solid var(--border);
291+
border-radius: 18px;
292+
padding: 1rem 1.2rem;
293+
margin-top: 1.4rem;
294+
box-shadow: var(--shadow);
295+
}
296+
297+
.sql-card pre {
298+
margin: 0.8rem 0 0;
299+
padding: 0.9rem 1rem;
300+
border-radius: 12px;
301+
background: #F3F3F3;
302+
color: #1E1E1E;
303+
border: none;
304+
box-shadow: none;
305+
overflow-x: auto;
306+
font-size: 0.9rem;
307+
}
308+
309+
.sql-card code {
310+
font-family: "DM Sans Mono", "JetBrains Mono", monospace;
311+
font-size: 0.9rem;
312+
display: block;
313+
white-space: pre-wrap;
314+
}
315+
316+
.sql-markdown {
317+
margin: 0;
318+
}
319+
320+
.sql-empty {
321+
color: var(--muted);
322+
padding: 0.8rem 0;
323+
}
324+
325+
.control-dropdown .Select-control,
326+
.control-dropdown .select__control {
327+
border: 1px solid var(--border) !important;
328+
border-radius: 10px !important;
329+
background: #FFFFFF !important;
330+
}
331+
332+
.control-dropdown .Select-placeholder,
333+
.control-dropdown .select__placeholder {
334+
color: var(--muted) !important;
335+
}
336+
337+
@keyframes floatIn {
338+
from {
339+
opacity: 0;
340+
transform: translateY(10px);
341+
}
342+
to {
343+
opacity: 1;
344+
transform: translateY(0);
345+
}
346+
}

0 commit comments

Comments
 (0)