UI Polish, Persistent Layout, and Data Correctness - #94
Closed
terryaney wants to merge 12 commits into
Closed
Conversation
1. Removed year from title to support multi-year data/reporting and made page title match content title 2. Data from... subtitle is distinct list of source 3. Include Negatives buttons hides if no negatives or has badge count showing how many negative merchants exist 4. Revamped date filter to be more functional than simply just a month list
Both bugs are the same root cause: the JS classified transactions using merchant.tags — the union of every tag across all of a merchant's transactions (analyzer.py:122 builds it that way) — instead of the transaction's own txn.tags, which report.py already emits per transaction. categorizeAmount() is a strict income -> investment -> transfer -> sign chain, so one tagged transaction re-bucketed every other transaction at that merchant. This changed reported dollar amounts; it is not cosmetic. Bug 1 — charts and the Filtered View tile (filteredViewTotals, chartAggregations). Every number in all three charts and in the Filtered View KPI tile was wrong. A merchant whose union is [monthly-bill, refund, transfer] had all of its ordinary purchases counted as transfers and vanish from spending. Now classified per transaction, the JS reconciles with the Python KPIs to the dollar. Both KPI tiles now agree line-for-line on unfiltered data. Bug 2 — Section View percentages (grossSpending). grossSpending was grandTotal + creditsTotal, and both inputs drop a whole merchant when its tag union is excluded from spending. It feeds the (X%) badge beside each section header, which renders whenever typeTotals is absent — that is, Section View always (Category/Subcategory pass server-computed typeTotals and were never affected). The denominator ran 15% low: $215,322 against a true $253,781, hiding $6,910 of Amazon spending, $2,448 of Minnesota Department of Revenue, and more. grossSpending now derives from the same per-transaction pass and equals Python's spendingTotal exactly. Monthly Bills reads 23.8% (was 28.0%), Food & Dining 20.0%. Chart identity - Renamed: "Monthly Trend" -> "Cash Flow Trend", "By Category" -> "Spending by Category", "Category Trends by Month" -> "Spending by Category Trend". - Cash Flow Trend now plots Spending, Income, Credits, and Investment. Credits were previously discarded despite being part of the cash-flow definition (income - spending + credits). Transfers stay excluded. - Removed the synthetic Income/Investment datasets from the category trend chart; it is now purely spending by category. Those datasets were built from tags, not real categories, so clicking one filed a category filter that matched nothing and blanked all three charts. Consistent interactions - Legends are visibility toggles on all three charts. The category trend legend previously added a category filter on click. - Removed the data-click filter handlers from both category charts. The Cash Flow Trend bar click (month filter) is retained. Correctness and rendering - Both category charts share one ranking: top 10 categories plus an "Other" rollup. The pie previously listed all 16 categories (legend overflowed and clipped) while the trend chart silently dropped everything past the top 8, under-reporting spending. "Other" is omitted when 10 or fewer categories are present. - Series with no data are no longer emitted, so an all-zero Investment series no longer leaves a phantom legend entry. - Months with nothing to plot are dropped per chart (a transfer-only month drew an empty column). - Cash Flow Trend bar clicks index into monthlyChartMonths — the months actually plotted — instead of availableMonths. Under a date filter the two diverged and a bar click filed the wrong month. - Added min-width: 0 to .chart-container; the grid default of min-width: auto locked tracks open and clipped canvases on re-widen. Documented, not fixed: creditMerchants has the same merchant-union bug. It is unrendered — the "Credits Applied" section was dropped from the template in ad9477e while docs/reference.html still documents it — so a comment on the computed records the bug and the two ways to fix it when the section is restored.
1. Introduce **containment** — wrap the button row + all category collapsers in one **Transaction Details** card that collapses to **header only** (fixing the "empty padded band when collapsed" that Trends shows today). 2. Left-align the view buttons; add collapse/expand controls on the right. 3. Polish each collapser: anchored header + rows-only skinny scroll, bordered table, glowing color dot, non-blue label, and Count-centered / Total-right / %-right columns.
- Unify Merchant/Subcategory category views into one keyed v-for so Vue
patches <section> nodes in place instead of remounting on a groupByMode
toggle (preserves collapse state, no DOM churn).
- Remove the staggered fadeIn entrance animation. The details <section> is the
only <section> in the report, so those global `section { animation }` +
nth-child rules only ever animated it, replaying as a cascade every time the
view toggle remounted the section-view sections.
Wrap the toggle on mobile (<=640px) — view modes on line 1, actions on line 2; Collapse becomes icon-only to fit. Verified at 360/390px; 8 container tests pass.
UI and interaction polish - Reworked merchant row action presentation: explicit info and filter links - Refined expanded transaction row structure to better separate date, account badge, description, tags, and amount. - Fixed miscellaneous CSS issues for hard coded colors, popup layout and transaction details buttons. Removed dead CSS rules - Hide app components (and added progress bar) while VUE was mounting/initializing Adaptive column sizing architecture - Introduced dynamic transaction column sizing via CSS variables for date, account, and amount tracks. - Added startup-time width profiling and debounced resize recalculation for desktop-first responsiveness. Rule Info Fixes - Added explicit rule provenance into popup data (ruleName, pattern, source) so "Why This Matched" reflects the actual classification path. - Improved fallback behavior: when no categorization rule matches, promote the first matching tag rule so popup rule details remain meaningful. - Switched popup tag display to merchant-level union tags (matching the main grid) so tags like transfer are not dropped when first-transaction match_info is incomplete. - Cleaned up tag-source reporting to avoid redundant/misleading "from [rule]" lines when the displayed rule already explains the tag. Outcome - Delivers a cleaner, more consistent UI with stronger alignment and spacing. - Makes transaction detail rows feel more intentional and legible across real data variance.
- Transaction Trends collapsed state - Transaction Details collapsed state - Details view mode (Merchant, Subcategory, View) - Include Negatives toggle - Per-section collapse state - Per-item expansion state (merchant/subcategory rows) - Per-section sort settings
getFilterDescriptor() used item.id (category-specific) instead of
item.displayName for merchant-type filters, breaking cross-category
merchant filtering when the same merchant appears in multiple categories.
Also brings the test suite in line with two intentional behavior changes
already on this branch that its own tests hadn't caught (no CI runs on
this branch's pushes):
- Category sections now default to collapsed on a fresh load ("Save
Layout Settings to Local Storage"), so tests need to expand sections
before interacting with rows. Added an autouse fixture instead of
touching every test.
- Transaction dates always show the year now (row UX polish), so the
multi-year-only assertions were stale.
PR Build AvailableVersion: Install from this PRLinux / macOS: curl -fsSL https://raw.githubusercontent.com/davidfowl/tally/main/docs/install-pr.sh | bash -s -- 94Windows PowerShell: iex "& { $(irm https://raw.githubusercontent.com/davidfowl/tally/main/docs/install-pr.ps1) } 94"Manual download: View workflow run and download artifacts. Requirements
|
Contributor
Author
|
Closing to better maintain my repo and convert to a stacked pattern (with this one later in the stack and more important ones higher in stack) |
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.
Review Order Note
If PR #91 is accepted, it should be merged first. After that lands, I'll get notification and I'll fix the known merge conflict that'll appear in this branch. This PR will then be resubmitted. Reviewers should treat this PR as the follow-on to #91 and should be merged afterwards.
Short Summary
This PR improves the generated HTML spending report across correctness, navigation, and daily usability.
There was one headline fix to data correctness: report-side charts, Filtered View totals, and Section View percentages now classify each transaction by its own tags instead of using a merchant-wide tag union.
On top of that, the report gains a richer date filter, a contained Transaction Details panel, persistent layout settings, clearer rule-provenance popups, blank-safe memo/report-field display, chart polish, mobile control wrapping, and a cleaner loading experience.
The branch is intentionally presentation-heavy. It does not change merchant rule matching semantics, and existing user configs keep their configured titles and behavior.
Mobile View Note: Given this is a locally generated html file, I feel the vast majority of users will be desktop/large display. There were several pre-existing mobile issues that I plan to address in a follow-on PR that I have planned for some improvements to charting.
At a Glance
NOTE: Screenshots from simulated data are included below to demonstrate changes without need to merge/test the branch.
localStorage, with a reset control.report_fieldsconfiguration so captured fields like memo can appear in report details without per-rule passthroughs.+1 Memoindicators.Tally Spending Analysisto support multi-year reports.Important Data Correctness Fixes
Transaction tags now drive chart and KPI classification
Previously, the JavaScript report classified transactions using
merchant.tags, which is the union of tags across all transactions for a merchant. That meant oneincome,transfer,refund, orinvestmenttransaction could cause unrelated transactions at the same merchant to be classified incorrectly.This PR changes the rendered report paths to classify with each transaction's own
txn.tags, matching the Python-side KPI logic.Affected report surfaces:
Evidence from the chart-polish notes shows the reference dataset reconciled to Python totals after the fix:
Section View percentages now use the correct spending denominator
Section View percentages previously depended on whole-merchant include/exclude decisions derived from merchant tag unions. In mixed-tag datasets, that could drop ordinary spending from the denominator. The notes record a denominator of
$215,322before the fix versus the correct$253,781after the fix.The rendered Section View denominator now comes from
filteredViewTotals.value.spending, which is already calculated per transaction.Correct totals in the default report view
The report now classifies each transaction with its own tags instead of using the merchant-wide tag union. In the default unfiltered view, the rendered KPI totals and charts now reconcile with the Python-computed report totals.
This is the strongest correctness story in the PR. It shows that the report is not just visually improved; the numbers shown in the browser now match the underlying analysis.
Default report totals now reconcile with Python-computed KPIs.
Chart Improvements
Screenshot directly above shows each of the following changes.
Cash Flow Trend
The old
Monthly Trendchart is nowCash Flow Trend. It plots spending, income, credits, and investment, while keeping transfers out of cash flow. Credits were already part of the report's cash-flow formula, but the chart previously discarded them.Empty series are omitted from the dataset and legend, so an all-zero Investment series no longer leaves a phantom legend entry.
Spending by Category
The old
By Categorychart is nowSpending by Category. It uses the same category ranking as the category trend chart (top 10 categories) and rolls smaller categories intoOther, keeping legends readable while preserving totals.Spending by Category Trend
The old
Category Trends by Monthchart is nowSpending by Category Trend. It no longer includes synthetic Income or Investment category datasets that could create filters for categories that do not exist.Other chart fixes
min-width: auto.Multi-Granularity Date Filtering
The date filter changed from a single month dropdown into an interactive popover with multiple date selection modes.
New date filter capabilities:
The underlying month source was also corrected. Available months now come from
categoryView, so a month is not lost just because its merchant was excluded from every configured view.Date filtering now supports months, quarters, years, and custom ranges in one popover.
Selected months aggregate into concise quarter/year chips, while custom ranges stay day-precise.
Multi-Year Report Polish
The default starter title now uses
Tally Spending Analysisinstead of hardcoding a year. This better reflects multi-year reports while preserving existing user-configured titles.Transaction rows also now show a year to remove cross-year transaction ambiguity.
Transaction Details Container
The report now wraps all detail views in a single
Transaction Detailscard. It mirrors the chart container pattern and collapses cleanly to header only.User-visible changes:
Transaction Details are now contained, collapsible, and easier to scan.
Collapsed sections no longer leave an empty padded band.
Transaction Details Table Polish
The section tables inside Transaction Details received a focused usability pass.
Improvements:
Headers and totals stay readable while only transaction rows scroll.
Transaction Details styling is consistent across light and dark themes.
Persistent Layout Settings
The report now saves layout preferences in
localStorageso a monthly report can reopen the way the user left it.Persisted settings include:
The implementation cross-references stored keys against the current report data on load. Stale items are pruned, and new items default to collapsed. A reset-layout-settings icon near the theme toggle clears saved report layout state without clearing the theme preference.
Local session history confirms this grew out of the earlier discussion that cookies were the wrong fit for generated local reports, and that Edge/Chrome
localStoragesupport was sufficient for the intended usage.Saved layout preferences can be reset without changing the theme.
Report Fields and Memo Display
The new
report_fieldssetting lets captured CSV fields, such asmemo, appear in transaction details without adding a per-rule passthrough directive.Behavior summary:
report_fieldscan be configured globally or per source.report_fields: [memo]by default.field:directives still win on collision.+1 Memobadges.0andFalseare retained.Docs were updated in the reference command output and generated docs.
Real memo fields appear in transaction details, while blank values no longer create phantom badges.
Rule Provenance and Row UX
Transaction rows and rule popups received several explainability and layout improvements.
Improvements:
ruleName.Expanded rows now separate transaction details into scannable columns.
Merchant rows now include explicit info and filter links for easier discovery and consistency.
Rule provenance popups now show the actual rule path more clearly.
Include Negatives Badge
The Include Negatives control is now hidden when there are no negative-total merchants to include. When negatives are hidden, the control shows a count badge based on the currently filtered view, capped at
99+.The Include Negatives badge shows how many negative-total merchants are currently hidden.
Loading and Mount Polish
The generated report now shows a clean loading shell while Vue mounts. This hides uninitialized template content and gives the page a progress indicator during startup.
Report shows a clean loading state while the app initializes.
Config and Documentation Changes
Confirmed changed files include starter config, docs, and reference output.
Notable changes:
Tally Spending Analysis.report_fields: [memo].docs/formats.html,docs/reference.html, and thetally referencecommand were updated for report fields.config/settings.yaml.exampleincludes the new report field setting.Tests and Verification Evidence
Automated coverage added or cited by the notes:
report_fieldsbehavior and blank-field suppression.898 passedduring chart/report-fields work.906 passing.91/91report tests and37/37CLI tests at that point.C:\BTR\TallySpending\tally\configdata for chart correctness, date filtering, Transaction Details, sticky headers/footers, and both themes.Current branch diff summary:
spending_report.js,spending_report.css,spending_report.html,tests/test_report_html.py, andtests/test_analyzer.py