jianf/ModelRouter
1
0
Fork 0
mirror of https://gitcode.com/JianFeeeee/ModelRouter.git synced 2026-09-20 00:48:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): status pie — draw true annulus slices (hollow center), fixes yellow blob

Browse Source 
The center 'hole' was faked by overpainting a small circle with var(--card), which exposed a yellow/warm card background blob and a visible seam. Now each slice is a real ring sector (outer+inner arc, reverse) so the center is genuinely transparent and matches the card. Deployed (bak .bak.20260811p), server active.
This commit is contained in:
root
2026-08-11 17:06:53 +08:00
parent 4b75a88247
commit eee0122092
1 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
internal/gateway/ui/index.html
View File

@ -966,24 +966,22 @@ function drawStatusChart(rows) {
const total = (rows||[]).reduce((a,x)=>a+x.reqs,0);
if (!total) return;
const palette = ['#3fb27f', '#4fa3d8', '#f0a45c', '#e06c6c', '#b06ce0', '#8a9bb5', '#6fbfa0', '#d0a45c'];
const r = Math.min(rect.width, H) / 2 - 2;
const rOut = Math.min(rect.width, H) / 2 - 2;
const rIn = Math.max(rOut * 0.45, 1);
const cx = rect.width / 2, cy = H / 2;
let a0 = -Math.PI / 2;
rows.forEach((row, i) => {
const sweep = row.reqs / total * Math.PI * 2;
const a1 = a0 + sweep;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(cx, cy, r, a0, a0 + sweep);
// outer arc, then inner arc reversed -> true annulus slice (hollow center)
ctx.arc(cx, cy, rOut, a0, a1);
ctx.arc(cx, cy, rIn, a1, a0, true);
ctx.closePath();
ctx.fillStyle = palette[i % palette.length];
ctx.fill();
a0 += sweep;
a0 = a1;
});
// carve a clean center hole (donut) instead of a solid pie with a number
ctx.beginPath();
ctx.arc(cx, cy, Math.max(r * 0.45, 1), 0, Math.PI * 2);
ctx.fillStyle = 'var(--card)';
ctx.fill();
}
function paintKeyTable(rows, keyNames) {
const el = $('#tb-key'); if (!el) return;