feat(markets): add sparkline preview#522
Open
ebubeb683-ship-it wants to merge 1 commit into
Open
Conversation
|
@superman32432432 is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@ebubeb683-ship-it Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
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.
Closes #438
Overview
Introduce a compact sparkline preview to each market card, giving users a quick visual cue of recent market trends. This enhances the UI/UX for the GrantFox FWC26 campaign without affecting existing functionality.
Changes Made
File / Directory
Description
app/components/Sparkline.tsx
New reusable component that renders a minimalist SVG line chart. Accepts data: number[], optional className, and data-testid. Theme‑aware via stroke-current.
app/(marketing)/_components/markets-widget.tsx
Imports Sparkline and adds it beneath the market description. Passes market.sparklineData and a test‑id (sparkline-${market.id}).
app/content/markets.sample.ts
Extends the Market interface with sparklineData: number[] and supplies sample arrays for each market.
app/components/tests/Sparkline.test.tsx
Unit test that renders the component, checks for the SVG element, and verifies the generated contains a non‑empty points attribute.
Updated imports & typings wherever necessary to accommodate the new prop.
Testing
Unit Tests: npm test now includes Sparkline.test.tsx and passes alongside the existing suite.
Manual Verification: Sparkline appears under each market card in both light and dark modes, inheriting parent text colour via stroke-current.
Lint / Type‑check: npm run lint and npm run type-check produce no errors.
Documentation
Added JSDoc comment to Sparkline.tsx explaining its purpose, props, and behavior.
Updated the Market type definition with the new sparklineData field comment.
Impact
UI: Improves visual feedback for market trends while maintaining existing layout and accessibility.
Performance: Negligible impact; renders a simple SVG with few points.
Backwards Compatibility: No breaking changes; existing markets without sparklineData will render nothing (component returns null).
Checklist
New component added and integrated.
Sample data updated.
Unit tests added and passing.
Linting and TypeScript checks clean.
Documentation/comments added.
Branch pushed and set to track upstream (task/market-sparkline).