search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
feat: consistent colors for timing endpoints in table and chart
+8
-6
+8
-6
site/dashboard.js
+8
-6
site/dashboard.js
···
84
84
return Math.round(ms * 1000) + 'µs';
85
85
}
86
86
87
+
const ENDPOINT_COLORS = { search: '#8b5cf6', similar: '#06b6d4', tags: '#10b981', popular: '#f59e0b' };
88
+
87
89
function renderTiming(timing) {
88
90
const el = document.getElementById('timing');
89
91
if (!timing) return;
···
95
97
96
98
const row = document.createElement('div');
97
99
row.className = 'timing-row';
100
+
const color = ENDPOINT_COLORS[name];
98
101
99
102
if (t.count === 0) {
100
-
row.innerHTML = '<span class="timing-name">' + name + '</span><span class="timing-value dim">--</span>';
103
+
row.innerHTML = '<span class="timing-name" style="color:' + color + '">' + name + '</span><span class="timing-value dim">--</span>';
101
104
} else {
102
-
row.innerHTML = '<span class="timing-name">' + name + '</span>' +
105
+
row.innerHTML = '<span class="timing-name" style="color:' + color + '">' + name + '</span>' +
103
106
'<span class="timing-value">' + formatMs(t.p50_ms) + ' <span class="dim">p50</span> · ' +
104
107
formatMs(t.p95_ms) + ' <span class="dim">p95</span></span>';
105
108
}
···
114
117
const container = document.getElementById('latency-history');
115
118
if (!container) return;
116
119
117
-
const endpoints = ['search', 'similar'];
118
-
const colors = { search: '#8b5cf6', similar: '#06b6d4' };
120
+
const endpoints = ['search', 'similar', 'tags', 'popular'];
119
121
120
122
// check if any endpoint has history data
121
123
const hasData = endpoints.some(name => timing[name]?.history?.some(h => h.count > 0));
···
156
158
const history = timing[name]?.history || [];
157
159
if (history.length === 0) return;
158
160
159
-
const color = colors[name];
161
+
const color = ENDPOINT_COLORS[name];
160
162
const points = history.map((p, i) => ({
161
163
x: padding.left + (i / (history.length - 1)) * chartW,
162
164
y: padding.top + chartH - (p.avg_ms / maxVal) * chartH
···
187
189
legend.className = 'latency-legend';
188
190
endpoints.forEach(name => {
189
191
const span = document.createElement('span');
190
-
span.innerHTML = '<span class="dot" style="background:' + colors[name] + '"></span>' + name;
192
+
span.innerHTML = '<span class="dot" style="background:' + ENDPOINT_COLORS[name] + '"></span>' + name;
191
193
legend.appendChild(span);
192
194
});
193
195
container.appendChild(legend);