Fix/mos 0008#13
Merged
Merged
Conversation
New hook: useCountUp(target, duration) animates numbers from 0 to target over 800ms using requestAnimationFrame with ease-out cubic easing. Respects prefers-reduced-motion for accessibility. Applied to all 5 metric cards in SimulationResults: Total Invested, Current Value, Absolute Gain, Percent Return, and CAGR. Holdings table values remain static (no animation) for readability. Test setup: added matchMedia mock defaulting to prefers-reduced-motion so useCountUp resolves immediately in jsdom all 90 tests pass.
Tooltip fix: in individual view, the crosshair now shows ALL holding values at the cursor position with colored dots matching the legend, instead of only showing the first series value. Tooltip redesign: entries display as symbol + value rows with color indicators, separated from the date by a subtle border. Works for both combined (single 'Portfolio' entry) and individual (per-holding). Watermark: added subtle 'Moshimo' text centered in chart area at 4% opacity, pointer-events: none so it doesn't interfere with interaction.
Holdings table converts to card layout at 768px breakpoint: - Table headers hidden, each row becomes a bordered card - data-label attributes on <td> elements render as left-aligned labels via CSS ::before pseudo-elements - Asset name spans full width with bottom border separator Sticky summary bar: shows Current Value and Return % at the top of the viewport when scrolling on mobile (<768px). Hidden on desktop. Additional 640px breakpoint: full-width holdings cards (no border radius, flush to edges) for narrow phone screens. Updated test to scope percentage assertion with within() to avoid duplicate match from the new mobile summary element.
New component: AllocationChart pure SVG donut chart showing each holding's percentage of total portfolio value. No external dependencies. Features: - Color-coded ring segments matching PortfolioChart holding colors - Center text showing total portfolio value - Legend with symbol, percentage, and dollar value per holding - Only rendered when there are 2+ holdings - Responsive: stacks vertically on mobile (<640px) Positioned above the holdings table in SimulationResults for a visual overview before the detailed breakdown. Updated test to scope holdings row assertions with within() to avoid duplicate matches from the allocation chart legend.
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.
No description provided.