feat(ui): trend chart polish + metric switcher (rant 2026-08-23T16:17:18) - #133
Merged
Merged
Conversation
…:18) - Metric switcher (Spend/Income/Net/Tokens, default Spend) with delegated click binding - Smooth Catmull-Rom line, gradient area fill, per-metric theme colors - Adaptive nice-scale axis (1/2/5x10^n; symmetric zero-axis for Net) - Hover tooltip + guide line (replaces <title>), dashed grid, legend total - i18n keys zh+en, cache-bust 20260824-1
This was referenced Aug 24, 2026
13 tasks
argszero
added a commit
that referenced
this pull request
Sep 25, 2026
…raws (#301) The dashboard card "Consumption & earnings, last 14 days" binds its green bar to the backend `income` series -- the direction whitelist `earn + topup + gift` (`TX_INCOME_TYPES`, src/routes/wallet.rs) -- but labelled that bar `dash.trend.earn` = "共享收益" / "Sharing earnings". On the same screen the `dash.earnings` stat card uses that same name for a different fact: true `earn` only (`month_earn`, SQL `type = 'earn'`). So one screen carries two facts under one name: a user with a top-up sees the green bar at 5000 while the card beside it reads 0. The transactions page already calls this series "收入" / "Income" (`tx.trend.metric.income`), and its own subtitle for the total says "共享分成**等**收益" -- it states that the total is a superset of earnings. Birth order agrees this is drift, not a tradeoff: "收入" dates from #133, and #155 gave the same series a narrower name 22 PRs later, in a commit whose comment claimed the same scope as the transactions page. Fix is a name, not the data: key `dash.trend.earn` -> `dash.trend.income`, values "收入" / "Income". The bar still draws `income`; no series, query or number changed. All three carriers of that series in this card (legend in `index.html`, tooltip in `renderDashTrend`, transactions-page legend) now share one key, whose pack values are identical to the transactions page's. Gate `state_gate::the_dashboard_trend_names_its_series_the_way_the_transactions_trend_names_it` pins four derived rules: the bar reads `income` (not `.earn`), the three carriers are one key, that key's values equal the transactions page's, and the earn-only card keeps its own name and its own `month_earn` supply. The gate is lexical by design -- it proves the declaration, not the pixel; the jsdom probe side is out of scope here. Co-authored-by: argszero <argszero@argszerodeMac-mini.local>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Polish the transaction-page trend chart and add a metric switcher (host rant
2026-08-23T16:17:18):Requirement 1 — chart aesthetics:
<title>)Requirement 2 — selectable metric:
/api/transactions/trendalready returns all metrics)Related Issue
Host rant
2026-08-23T16:17:18(trend chart polish + metric switcher) — no GitHub issue.Changes
ui/js/app.js:renderTxTrendrewrite (switcher, smooth path, gradient area, adaptive scale, tooltip context) + delegated click/mousemove/mouseleave bindings +txTrendMetricstateui/css/style.css: switcher, chart wrapper, guide line, tooltip, gradient stops, per-metric colorsui/js/i18n.js: zh/en keystx.trend.metric.*ui/index.html: cache-bust20260823-3→20260824-1Tests
cargo testall pass (146/146)cargo fmt --checkpasscargo clippy --all-targets -- -D warningspass (no new warnings)node --checkonapp.js/i18n.jsChecklist
feat/trend-chart-polish)