feat: add PlatformStats widget with Recharts line/bar charts for tran…#384
Merged
Merged
Conversation
📝 WalkthroughWalkthroughA new ChangesPlatformStats Chart Widget
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/marketplace/PlatformStats.tsx`:
- Around line 19-42: The PlatformStats widget is currently rendering hardcoded
weekly/monthly volume series and KPI card values instead of live analytics.
Update PlatformStats and its related KPI rendering logic to source these metrics
from real data (props, API, or shared analytics state) rather than static
arrays/constants, and keep the existing chart/card components wired to those
dynamic values so the displayed platform stats reflect actual analytics.
- Around line 150-160: The transaction volume chart in PlatformStats is
rendering plain integers on both the axis and tooltip, which is inconsistent
with the currency-based headline metric. Update the chart formatting in the
stats chart section that uses XAxis, YAxis, and Tooltip so the displayed values
are formatted as currency (for example via the chart’s tick/value formatter and
tooltip formatter), and apply the same change to the second matching chart block
referenced in the review.
- Around line 89-110: The Weekly/Monthly toggle in PlatformStats currently only
communicates selection through styling, so screen readers can’t detect the
active range. Update the button controls in the view switcher to expose their
pressed state with aria-pressed (or refactor the control to a proper tabs
pattern) and keep it in sync with the existing view state used by setView and
view.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ec1df6bc-b042-4f2d-b5f3-38e17b4a3267
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
package.jsonsrc/app/marketplace/page.tsxsrc/components/marketplace/PlatformStats.tsx
Comment on lines
+19
to
+42
| const weeklyVolume = [ | ||
| { name: "Mon", volume: 2400 }, | ||
| { name: "Tue", volume: 1398 }, | ||
| { name: "Wed", volume: 3800 }, | ||
| { name: "Thu", volume: 3908 }, | ||
| { name: "Fri", volume: 4800 }, | ||
| { name: "Sat", volume: 3800 }, | ||
| { name: "Sun", volume: 4300 }, | ||
| ] | ||
|
|
||
| const monthlyVolume = [ | ||
| { name: "Jan", volume: 4000 }, | ||
| { name: "Feb", volume: 3000 }, | ||
| { name: "Mar", volume: 5000 }, | ||
| { name: "Apr", volume: 4500 }, | ||
| { name: "May", volume: 6000 }, | ||
| { name: "Jun", volume: 5500 }, | ||
| { name: "Jul", volume: 7000 }, | ||
| { name: "Aug", volume: 6500 }, | ||
| { name: "Sep", volume: 8000 }, | ||
| { name: "Oct", volume: 7500 }, | ||
| { name: "Nov", volume: 9000 }, | ||
| { name: "Dec", volume: 8500 }, | ||
| ] |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Wire this widget to real analytics instead of shipping fixed numbers.
The weekly/monthly series and the KPI cards are all hardcoded, so this will render placeholder values as if they were live public platform metrics.
Suggested direction
-const weeklyVolume = [...]
-const monthlyVolume = [...]
-
-export default function PlatformStats() {
+type VolumePoint = { name: string; volume: number }
+
+type PlatformStatsProps = {
+ weeklyVolume: VolumePoint[]
+ monthlyVolume: VolumePoint[]
+ totalVolume: number
+ totalTransactions: number
+ growthRate: number
+}
+
+export default function PlatformStats({
+ weeklyVolume,
+ monthlyVolume,
+ totalVolume,
+ totalTransactions,
+ growthRate,
+}: PlatformStatsProps) {Also applies to: 115-135
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/marketplace/PlatformStats.tsx` around lines 19 - 42, The
PlatformStats widget is currently rendering hardcoded weekly/monthly volume
series and KPI card values instead of live analytics. Update PlatformStats and
its related KPI rendering logic to source these metrics from real data (props,
API, or shared analytics state) rather than static arrays/constants, and keep
the existing chart/card components wired to those dynamic values so the
displayed platform stats reflect actual analytics.
Comment on lines
+89
to
+110
| <button | ||
| onClick={() => setView("weekly")} | ||
| className={cn( | ||
| "px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200", | ||
| view === "weekly" | ||
| ? "bg-[#9B59FF] text-white shadow-lg shadow-[#9B59FF]/25" | ||
| : "text-slate-400 hover:text-white" | ||
| )} | ||
| > | ||
| Weekly | ||
| </button> | ||
| <button | ||
| onClick={() => setView("monthly")} | ||
| className={cn( | ||
| "px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200", | ||
| view === "monthly" | ||
| ? "bg-[#9B59FF] text-white shadow-lg shadow-[#9B59FF]/25" | ||
| : "text-slate-400 hover:text-white" | ||
| )} | ||
| > | ||
| Monthly | ||
| </button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Expose the active range to assistive tech.
These buttons only show the selected state visually. Add aria-pressed (or switch to a tabs pattern) so screen readers can tell whether Weekly or Monthly is active.
Suggested fix
<button
onClick={() => setView("weekly")}
+ aria-pressed={view === "weekly"}
className={cn(
@@
<button
onClick={() => setView("monthly")}
+ aria-pressed={view === "monthly"}
className={cn(📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <button | |
| onClick={() => setView("weekly")} | |
| className={cn( | |
| "px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200", | |
| view === "weekly" | |
| ? "bg-[#9B59FF] text-white shadow-lg shadow-[#9B59FF]/25" | |
| : "text-slate-400 hover:text-white" | |
| )} | |
| > | |
| Weekly | |
| </button> | |
| <button | |
| onClick={() => setView("monthly")} | |
| className={cn( | |
| "px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200", | |
| view === "monthly" | |
| ? "bg-[#9B59FF] text-white shadow-lg shadow-[#9B59FF]/25" | |
| : "text-slate-400 hover:text-white" | |
| )} | |
| > | |
| Monthly | |
| </button> | |
| <button | |
| onClick={() => setView("weekly")} | |
| aria-pressed={view === "weekly"} | |
| className={cn( | |
| "px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200", | |
| view === "weekly" | |
| ? "bg-[`#9B59FF`] text-white shadow-lg shadow-[`#9B59FF`]/25" | |
| : "text-slate-400 hover:text-white" | |
| )} | |
| > | |
| Weekly | |
| </button> | |
| <button | |
| onClick={() => setView("monthly")} | |
| aria-pressed={view === "monthly"} | |
| className={cn( | |
| "px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200", | |
| view === "monthly" | |
| ? "bg-[`#9B59FF`] text-white shadow-lg shadow-[`#9B59FF`]/25" | |
| : "text-slate-400 hover:text-white" | |
| )} | |
| > | |
| Monthly | |
| </button> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/marketplace/PlatformStats.tsx` around lines 89 - 110, The
Weekly/Monthly toggle in PlatformStats currently only communicates selection
through styling, so screen readers can’t detect the active range. Update the
button controls in the view switcher to expose their pressed state with
aria-pressed (or refactor the control to a proper tabs pattern) and keep it in
sync with the existing view state used by setView and view.
Comment on lines
+150
to
+160
| <XAxis dataKey="name" stroke="#64748b" tick={{ fill: "#64748b", fontSize: 12 }} /> | ||
| <YAxis stroke="#64748b" tick={{ fill: "#64748b", fontSize: 12 }} /> | ||
| <Tooltip | ||
| contentStyle={{ | ||
| backgroundColor: "rgba(15, 15, 15, 0.95)", | ||
| border: "1px solid rgba(255,255,255,0.1)", | ||
| borderRadius: "12px", | ||
| color: "#fff", | ||
| }} | ||
| cursor={{ fill: "rgba(155, 89, 255, 0.1)" }} | ||
| /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Format chart output as currency.
This chart is labeled as transaction volume, but both the axis and tooltip render bare integers. That makes the units ambiguous and inconsistent with the $124,592 headline card.
Suggested fix
+ const currency = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ maximumFractionDigits: 0,
+ })
@@
- <XAxis dataKey="name" stroke="`#64748b`" tick={{ fill: "`#64748b`", fontSize: 12 }} />
- <YAxis stroke="`#64748b`" tick={{ fill: "`#64748b`", fontSize: 12 }} />
+ <XAxis dataKey="name" stroke="`#64748b`" tick={{ fill: "`#64748b`", fontSize: 12 }} />
+ <YAxis
+ stroke="`#64748b`"
+ tick={{ fill: "`#64748b`", fontSize: 12 }}
+ tickFormatter={(value) => currency.format(value)}
+ />
<Tooltip
+ formatter={(value: number) => currency.format(value)}
@@
- <XAxis dataKey="name" stroke="`#64748b`" tick={{ fill: "`#64748b`", fontSize: 12 }} />
- <YAxis stroke="`#64748b`" tick={{ fill: "`#64748b`", fontSize: 12 }} />
+ <XAxis dataKey="name" stroke="`#64748b`" tick={{ fill: "`#64748b`", fontSize: 12 }} />
+ <YAxis
+ stroke="`#64748b`"
+ tick={{ fill: "`#64748b`", fontSize: 12 }}
+ tickFormatter={(value) => currency.format(value)}
+ />
<Tooltip
+ formatter={(value: number) => currency.format(value)}Also applies to: 172-181
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/marketplace/PlatformStats.tsx` around lines 150 - 160, The
transaction volume chart in PlatformStats is rendering plain integers on both
the axis and tooltip, which is inconsistent with the currency-based headline
metric. Update the chart formatting in the stats chart section that uses XAxis,
YAxis, and Tooltip so the displayed values are formatted as currency (for
example via the chart’s tick/value formatter and tooltip formatter), and apply
the same change to the second matching chart block referenced in the review.
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
2 participants
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 #337
Summary by CodeRabbit