Skip to content

fix(ui): trend chart gradient area renders solid black (rant 2026-08-24T12:32:18)#138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
argszero merged 1 commit into from
Aug 24, 2026
Merged

fix(ui): trend chart gradient area renders solid black (rant 2026-08-24T12:32:18) #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 0 additions & 14 deletions ui/css/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -349,20 +349,6 @@ select.input option { background: var(--bg-card); }
无网格线、无数据点圆、渐变 0.35→0、teal 主题色系——消费用主强调色区分） */
.tx-trend svg .trend-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tx-trend svg .trend-area { stroke: none; }
.tx-trend svg .tg-0 { stop-opacity: 0; }
.tx-trend svg .tg-1 { stop-opacity: 0; }
.tx-trend svg.m-exp .trend-line { stroke: var(--accent); }
.tx-trend svg.m-exp .tg-0 { stop-color: var(--accent); stop-opacity: 0.35; }
.tx-trend svg.m-exp .tg-1 { stop-color: var(--accent); }
.tx-trend svg.m-inc .trend-line { stroke: var(--ok); }
.tx-trend svg.m-inc .tg-0 { stop-color: var(--ok); stop-opacity: 0.35; }
.tx-trend svg.m-inc .tg-1 { stop-color: var(--ok); }
.tx-trend svg.m-net .trend-line { stroke: var(--accent-text); }
.tx-trend svg.m-net .tg-0 { stop-color: var(--accent-text); stop-opacity: 0.35; }
.tx-trend svg.m-net .tg-1 { stop-color: var(--accent-text); }
.tx-trend svg.m-tok .trend-line { stroke: var(--warn); }
.tx-trend svg.m-tok .tg-0 { stop-color: var(--warn); stop-opacity: 0.35; }
.tx-trend svg.m-tok .tg-1 { stop-color: var(--warn); }
/* 悬停引导线 + tooltip */
.tx-trend-guide { position: absolute; top: 2px; bottom: 6px; width: 1px; background: var(--text-dim); opacity: 0.45; display: none; pointer-events: none; }
.tx-trend-tip {
Expand Down
10 changes: 5 additions & 5 deletions ui/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AITokenPool</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234ecdc4'/%3E%3Cstop offset='1' stop-color='%232a9d8f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3Ctext x='32' y='43' font-family='-apple-system,Segoe UI,Arial,sans-serif' font-size='30' font-weight='800' text-anchor='middle' fill='%23062021'%3EAT%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="css/style.css?v=20260824-5">
<link rel="stylesheet" href="css/style.css?v=20260824-6">
</head>
<body>

Expand DownExpand Up@@ -683,9 +683,9 @@ <h3 id="chat-title">使用模型</h3>
</div>
</div>

<script src="js/api.js?v=20260824-5"></script>
<script src="js/data.js?v=20260824-5"></script>
<script src="js/i18n.js?v=20260824-5"></script>
<script src="js/app.js?v=20260824-5"></script>
<script src="js/api.js?v=20260824-6"></script>
<script src="js/data.js?v=20260824-6"></script>
<script src="js/i18n.js?v=20260824-6"></script>
<script src="js/app.js?v=20260824-6"></script>
</body>
</html>
21 changes: 13 additions & 8 deletions ui/js/app.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1257,10 +1257,10 @@
}
const bucket = tr.bucket || "day";
const METRICS = [
{ key: "expense", label: T("tx.trend.metric.expense"), pick: (b) => b.expense || 0, cls: "exp" },
{ key: "income", label: T("tx.trend.metric.income"), pick: (b) => b.income || 0, cls: "inc" },
{ key: "net", label: T("tx.trend.metric.net"), pick: (b) => (b.net === undefined ? (b.income || 0) - (b.expense || 0) : b.net) || 0, cls: "net", signed: true },
{ key: "tokens", label: T("tx.trend.metric.tokens"), pick: (b) => b.tokens || 0, cls: "tok" },
{ key: "expense", label: T("tx.trend.metric.expense"), pick: (b) => b.expense || 0, cls: "exp", stroke: "var(--accent)" },
{ key: "income", label: T("tx.trend.metric.income"), pick: (b) => b.income || 0, cls: "inc", stroke: "var(--ok)" },
{ key: "net", label: T("tx.trend.metric.net"), pick: (b) => (b.net === undefined ? (b.income || 0) - (b.expense || 0) : b.net) || 0, cls: "net", signed: true, stroke: "var(--accent-text)" },
{ key: "tokens", label: T("tx.trend.metric.tokens"), pick: (b) => b.tokens || 0, cls: "tok", stroke: "var(--warn)" },
];
const m = METRICS.find((x) => x.key === txTrendMetric) || METRICS[0];
const vals = buckets.map(m.pick);
Expand DownExpand Up@@ -1321,16 +1321,21 @@
'<button type="button" class="tsw-btn' + (x.key === m.key ? " active" : "") + '" data-metric="' + x.key + '" role="tab" aria-selected="' + (x.key === m.key) + '">' + esc(x.label) + "</button>"
).join("") +
"</div>";
const stroke = m.stroke || "var(--accent)";
const gid = "spark-grad-" + (++_sparkId); // 每实例唯一 id，防多次渲染/多图冲突（rant 12:32:18：CSS class 设 stop 色在 Chrome 不可靠 → 内联属性）
const total = vals.reduce((a, b) => a + b, 0);
const html =
'<div class="tx-trend-title">' + esc(T("tx.trend.title")) + "</div>" +
switchHtml +
'<div class="tx-trend-chart">' +
'<svg class="m-' + m.cls + '" viewBox="0 0 ' + W + " " + H + '" role="img" aria-label="' + esc(T("tx.trend.title")) + '">' +
'<defs><linearGradient id="tx-trend-grad" x1="0" y1="0" x2="0" y2="1"><stop class="tg-0" offset="0%"/><stop class="tg-1" offset="100%"/></linearGradient></defs>' +
'<svg viewBox="0 0 ' + W + " " + H + '" role="img" aria-label="' + esc(T("tx.trend.title")) + '">' +
'<defs><linearGradient id="' + gid + '" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="' + stroke + '" stop-opacity="0.35"/>' +
'<stop offset="100%" stop-color="' + stroke + '" stop-opacity="0"/>' +
"</linearGradient></defs>" +
axis + xlabels +
'<path class="trend-area" d="' + areaPath + '"/>' +
'<path class="trend-line" d="' + smoothPath(pts) + '"/>' +
'<path class="trend-area" d="' + areaPath + '" fill="url(#' + gid + ')"/>' +
'<path class="trend-line" d="' + smoothPath(pts) + '" stroke="' + stroke + '"/>' +
"</svg>" +
'<div class="tx-trend-guide" id="tx-trend-guide"></div>' +
'<div class="tx-trend-tip" id="tx-trend-tip"></div>' +
Expand Down
Loading