Reimagined charts and KPI experience [4/6] - #101
Open
terryaney wants to merge 9 commits into
Open
Conversation
- Add glob pattern examples in settings.yaml.example, clarify formats docs for file globs. - Add CLI tests covering multi-file matching, no-match behavior, diag visibility, and sorted processing order.
This was referenced Aug 4, 2026
terryaney
marked this pull request as ready for review
August 4, 2026 16:37
There was a problem hiding this comment.
Pull request overview
Reworks Tally’s HTML report with richer KPIs, interactive charts, date filtering, transaction details, and supporting configuration/documentation.
Changes:
- Adds interactive chart, KPI, date-filter, and peek-mode experiences.
- Introduces recurrence inference, fixed/variable overrides, and report fields.
- Expands automated tests and user documentation.
Reviewed changes
Copilot reviewed 26 out of 39 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/tally/analyzer.py |
Adds recurrence classification and deterministic tags. |
src/tally/cli_utils.py |
Updates starter configuration generation. |
src/tally/commands/diag.py |
Reports additional special tags. |
src/tally/commands/reference.py |
Documents report fields and recurrence tags. |
src/tally/commands/run.py |
Deduplicates report source names. |
src/tally/commands/workflow.py |
Describes fixed and variable tags. |
src/tally/config_loader.py |
Resolves global and per-source report fields. |
src/tally/format_parser.py |
Adds report-field metadata. |
src/tally/merchant_engine.py |
Suppresses empty computed fields. |
src/tally/merchant_utils.py |
Adds rule provenance metadata. |
src/tally/parsers.py |
Promotes configured captures into report details. |
src/tally/report.py |
Exports recurrence data and report titles. |
src/tally/spending_report.css |
Styles the redesigned report experience. |
src/tally/spending_report.html |
Defines new KPI, chart, filter, and details UI. |
src/tally/spending_report.js |
Implements charting and interaction behavior. |
src/tally/templates.py |
Updates starter settings and tag guidance. |
config/settings.yaml.example |
Documents globs, report fields, and overrides. |
docs/charts.html |
Adds the chart walkthrough. |
docs/formats.html |
Documents globs and report fields. |
docs/guide.html |
Links the chart guide. |
docs/index.html |
Updates assets and chart navigation. |
docs/quickstart.html |
Adds chart-guide navigation. |
docs/reference.html |
Documents report fields. |
docs/sitemap.xml |
Registers chart documentation and assets. |
tests/test_analyzer.py |
Tests determinism, fields, and recurrence. |
tests/test_cli.py |
Tests glob behavior. |
tests/test_report_html.py |
Covers the redesigned report interactions. |
Suppressed comments (1)
src/tally/spending_report.html:90
- Each month is implemented as a clickable
div, making the primary custom-date selection control unreachable from the keyboard. Use a button and expose whether the month is selected.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Open
The data-source table's file row used markdown backticks, which render literally in an HTML page. Every other cell in that table already uses <code> elements.
`tally up` writes <output>.json beside the HTML and diffs the next run against it, so the same config and data must produce the same bytes. It did not: pattern.tags serialized in arbitrary order. - analyzer.py: sort pattern.tags unconditionally. The isinstance(set) guard was dead - merchant_utils.normalize_merchant already does list(result.tags), so the value arrives as a list carrying the set's arbitrary iteration order. Mirrors the top-level merchant tags field, which was already sorted. - run.py: extract collect_source_names() and dedupe the report subtitle sources while preserving settings.yaml declaration order. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…le Info
1. BIGGEST UI GAIN: Revamped date filter to be more functional than simply just a month list
2. IMPORTANT DATA FIX: Two data-correctness bugs - in both, the JS classified transactions using
merchant.tags — the union of every tag across all of a merchant's transactions — instead of the
transaction's own txn.tags (see Bug Fix Details below))
3. Removed year from title to support multi-year data/reporting and made page title match content title
4. Data from... subtitle is distinct list of source
5. `Include Negatives` has badge count and hides when 0
6. Hide all app components (and added progress bar) while VUE was mounting/initializing
7. Charts UI Polish/Changes
- Renamed: "Monthly Trend" -> "Cash Flow Trend", "By Category" -> "Spending
by Category", "Category Trends by Month" -> "Spending by Category Trend".
- Cash Flow Trend now includes Credits to match cash-flow definition.
- Removed the synthetic Income/Investment datasets from the category trend chart;
it is now purely spending by category.
- 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.
- Both category charts share one ranking: top 10 categories plus an "Other" rollup.
- 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.
8. Transaction Details - container + collapser polish
- Introduce **containment** — wrap the button row + all category collapsers in one **Transaction Details**
- Left-align the view buttons; add collapse/expand controls on the right and polish each collapser
- Fix view-toggle animation cascade in Transaction Details
- Unify Merchant/Subcategory category views into one keyed v-for
- Vue patches <section> nodes in place instead of remounting on a groupByMode toggle
- Wrap the toggle on mobile (<=640px) — view modes on line 1, actions on line 2; Collapse becomes icon-only
- Reworked merchant row action presentation: explicit info and filter links
- Refined expanded transaction row structure for better presentation
- Fixed 'report fields' badge in transaction detail rendering
- 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.
9. 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)
- Cleaned up tag-source reporting to avoid redundant/misleading "from [rule]"
lines when the displayed rule already explains the tag.
10. Save Layout Settings to Local Storage
- 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
11. Fix merchant filter regression and stale tests from row-UX/date polish
- 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.
- Test suite is in line with two intentional behavior changes
already on this branch that its own tests hadn't caught:
- Category sections now default to collapsed on a fresh load
(regardless of "Save Layout Settings to Local Storage")
- Transaction dates always show the year now
Bug Fix Details:
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%.
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.
Report title (report.py, spending_report.js) - Escape the title before it is interpolated into the loading shell's <title> and <h1>; a title carrying markup was executable output. - Escape '</' in the embedded spendingData JSON, so a value containing '</script>' cannot close the script element it is embedded in. - Coerce a non-string title: 'title: 2025' arrives from YAML as an int and raised TypeError inside str.replace(). - Resolve the title once and store it back on spendingData, so the static shell and the mounted app cannot disagree. The two fallbacks differed, so an untitled report was renamed on mount. Date handling (spending_report.js) - parseTypedDate now rejects dates a calendar does not have. 2/31/2026, month 13 and 99/99/2026 passed the shape regexes and became chips that could never match a transaction. - expandMonthRange validates both halves are YYYY-MM before iterating. A hand-edited '#+dr:garbage..garbage' walked to 'NaN-NaN', which compares less than 'garba' forever - the report hung with the array growing without bound. - The date popover now edits include-mode filters only. An excluded month or range rehydrated into the pending set and came back out of Apply as an inclusion, silently inverting the filter. Percentages (spending_report.js, spending_report.html) - Section percentages divided a raw total, which includes income, investment and transfers, by grossSpending, which excludes them. Carry a spending-only subtotal on the same per-transaction basis and use it as the numerator. Performance (spending_report.js) - Cache transaction column measurements by string. Every transaction forced three synchronous layouts, repeated across all three profiles; large reports stalled. Cleared per recompute so a resize re-measures. Accessibility (spending_report.html, spending_report.css) - Year tabs and month cells are buttons rather than click-only divs, so they are keyboard-reachable and announce their selected state. - Name the reset control with aria-label rather than leaving the glyph as its only accessible name. Config and docs - Validate report_fields. A bare 'report_fields: memo' was iterated as four capture names and an empty value raised TypeError; accept the bare string, treat empty as none, and reject other types by name. - Correct the reference: a field: directive's output is not an input to other rules, but the captured column report_fields surfaces is available to every rule as field.<name>.
Reimagines the KPI and chart experience in the HTML spending report while preserving the same core budgeting and analysis intent. The functionality is still there, but presented with a different interaction model. - New KPI dashboard sparkline and consistency layout - New charts: Spending Seasonality, Expense Volatility, Fixed Spending Audit, and Fixed vs Variable Spending - Chart Changes - By Category becomes Spending By Category column chart (for consistency) - Monthly Trend becomes Cash Flow - All column charts have 'group by' buttons, compare-year toggles, and 'focused' line chart mode - Improve responsive label behavior, resize rerendering, and compare-year paging - Debounced chart rerender on viewport/layout changes via resize + ResizeObserver - Disable re-animation for resize-triggered rerenders to avoid redraw jitter - Make x-axis labels adaptive (horizontal/angled/vertical) with autoskip under tight widths - Expand Playwright chart coverage for compare-year windowing/paging and updated chart controls
- KPI Sparklines are based on last month containing data
- Changed KPI to be month based instead of all time
- Reconcile KPI detail math with trend baseline and clarify secondary labels
- align 12 Month Avg detail row with trend prior-12 baseline window
- keep trend on prior-window comparison while preserving anchor-month behavior
- include credits in Income detail primary values; keep gray secondary informational
- add a tooltip spelling out what the gray secondary value contributes
- update KPI styling and report_html coverage for new semantics
- Make Spending by Category legend chips filter the report
- chips are tri-state (regular / selected / not-selected) rather than show/hide;
selection is stored as ordinary category filters, so chips and the filter bar
are the same state. All-on and all-off both collapse back to no filter.
- clicking a bar segment drills into that category plus that bucket's date range
- the "Other" chip renders inert; it can never be filtered on
- the chart's own bars source from a category-exempt aggregation, so selecting a
category dims its peers instead of dropping them off the canvas
- a chip toggle flips dataset visibility on the live chart instead of rebuilding
it, so the stack does not reanimate on every click
- Treat chart-driven filters as transient "peek" state
- tagged source: 'chart' and deliberately not persisted to the URL hash
- a Peek Mode badge on the chart title and a Clear Filters button expose and
clear them; the badge stays visible while the panel is collapsed
- adding any filter by hand (search, table filter button, date apply) ends peek
- Exclude transfer-only merchants from fixed outputs
- Build recurring merchant lists from spending-classified transactions only;
transfer/income/investment-only merchants do not appear in fixed calculations.
- Update Recurring vs Variable footnote to Top 10 Fixed: ..., + N more, ranked
by monthly cost so the "+ N more" tail is the cheap end.
- Update charts documentation wording to match fixed terminology.
- Stabilize chart behavior and default-hide empty legend series
- Remove split-row and single-expanded reactive layout logic
- Rerender when a collapsed panel or the whole Transaction Trends section
expands: a chart measured at zero width bakes rotated, skipped x-axis ticks
into its config that a plain resize never recomputes
- Otherwise rerender only when chart-section width changes, or chart toggles change
- Make chip legends hide zero-data items by default when values are provided
- Fix cash-flow tooltip Net math to exclude Investments
- Fix subcategory filter chips picking up the "N merchants" summary as their text
Recurrence inference (analyzer.py) - months_active counts the months a merchant appears in, which says nothing about how far apart they are. Require the charges to be dense over the merchant's own lifespan as well as covering enough of the reporting period. Three January charges span twenty-five months but read as three active months, so in a January-only export they cleared the existing test and an annual premium was booked as a monthly cost - twelve times its real value. The classification also no longer depends on unrelated merchants' data; the existing tests needed a dummy monthly merchant present purely to hold num_months high enough. Accessibility (spending_report.html, spending_report.css, spending_report.js) - Chart panel collapse controls are buttons inside their headings, carrying aria-expanded and aria-controls, rather than click handlers on the <h3>. Applies to all six panels: category, seasonality, cash, volatility, fixed and audit. The heading stays a heading, so document navigation is unchanged. - The peek badge is a real button rather than a span with role="button", so it is reachable and operable from the keyboard. - A disabled legend chip is now natively disabled instead of only carrying a disabled class. The class dropped the click listener but left the control focusable and announcing as enabled. Documentation (docs/charts.html) - Fixed vs Variable described a mapping of categories. It is a per-merchant split driven by inferred recurrence, with fixed/variable rule tags as overrides. Document what it actually does, including how the cadence is inferred and how to override it.
terryaney
force-pushed
the
feature/charts-reimagined
branch
from
August 4, 2026 22:21
c45fc76 to
76a1b73
Compare
terryaney
added a commit
to terryaney/OpenSource.tally
that referenced
this pull request
Aug 4, 2026
21 code issues fixed across rungs 98/100/101/103, 31 review threads replied to and resolved, behavior changes added to the davidfowl#100, davidfowl#101 and davidfowl#103 bodies and pushed. Records two findings that changed the answer (100-1 was wider than reported, 101-2's stated scenario does not reproduce) and the rebase failure mode that stranded two fix commits.
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
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.
Title: Reimagined charts and KPI experience [4/6]
Reimagines the KPI strip and chart experience in the HTML spending report.
Full walkthrough: charts.html — that page documents every chart/KPI behavior implemented on this branch.
Changes
docs/charts.htmldocumentation pageKey implementation details
categoryExemptAggregations/passesFilters(txn, merchant, { skipCategory })— category chart bars use an aggregation that ignores include-mode category filters, so selecting a category dims peers rather than removing themtoggleCategoryChip/applyCategorySelection—activeFiltersis the single source of truth; no separate hidden-setapplyCategoryChartFastVisibility— chip toggles flip dataset visibility on the live Chart instance instead of rebuilding itBehavior changes
Added while addressing review feedback. These change what the charts say, not just how they look.
Fewer merchants are classified as monthly recurring. Monthly inference tested only how many distinct months a merchant appeared in, against a threshold derived from how many distinct months the whole data set covered. That measures presence, not spread, and it made one merchant's classification depend on unrelated merchants' data. A merchant now also has to be dense over its own first-to-last span, so three charges spread across twenty-five months can no longer read as monthly.
The failure this fixes: with a data set as sparse as the merchant — three Januaries in a January-only export — an annual premium cleared the old threshold and was booked as a monthly cost, twelve times its real value, in both Fixed vs Variable and the Fixed Spending Audit. On a dense data set the old check was already correct, so most reports will not move.
It is a pure tightening: it can only remove false
monthlyclassifications, never add one.fixed/variablerule tags still override the inference entirely.Chart panel headings are buttons. The collapse toggles were click handlers on
<h3>, so they were unreachable by keyboard across all six panels. The heading stays a heading — document navigation is unchanged — with a chrome-stripped button inside it. Rendering is unchanged.A disabled legend chip is genuinely disabled. The "Other" chip carried a
disabledclass that removed its click listener but left it focusable and announced as an enabled control.Stack
feature/globbing-documentationfeature/report-json-determinismfeature/ui-tweaksfeature/charts-reimaginedfeature/merchant-composite-keysfeature/categorizationIndependent:
feature/ci-repair— #97 — fixes fork PR builds.