Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe metrics widget chart was updated to compute a dynamic Y-axis width. A 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip You can validate your CodeRabbit configuration file in your editor.If your editor has YAML language server, you can enable auto-completion and validation by adding |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx`:
- Around line 16-20: yAxisWidth computation can produce NaN because formatValue
may return a number (for DATA_TYPES.OrderCount) and .length on a number is
undefined; update the logic in the yAxisWidth useMemo (which references
chartData and formatValue) to coerce the formatted result to a string before
measuring length (e.g., use String(formatted) or conditional typeof check) so
Math.max(60, formattedString.length * 7) always receives a numeric argument and
cannot become NaN.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c26df301-fe3a-46ec-9e15-ff5d54415ff4
📒 Files selected for processing (1)
packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx
packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx (1)
16-20: Add a small safety padding to the width estimate.Line 19 uses a strict
length * 7estimate; this can still clip in edge cases. Add a fixed pixel buffer (e.g., +10–12px) to make the sizing more robust.Suggested tweak
const yAxisWidth = useMemo(() => { const maxValue = Math.max(0, ...chartData.map(d => d.sales)); const formatted = String(formatValue(maxValue)); - return Math.max(60, formatted.length * 7); + return Math.max(60, formatted.length * 7 + 12); }, [chartData, formatValue]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx` around lines 16 - 20, The yAxis width calc in yAxisWidth currently uses formatted.length * 7 which can under-estimate; update the calculation in the useMemo for yAxisWidth to add a small fixed pixel buffer (e.g., +10 or +12) to the computed width and keep the Math.max(60, ...) guard; refer to the yAxisWidth variable and the formatValue/chartData usage so you change the return expression to include the extra padding.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx`:
- Around line 16-20: The yAxis width calc in yAxisWidth currently uses
formatted.length * 7 which can under-estimate; update the calculation in the
useMemo for yAxisWidth to add a small fixed pixel buffer (e.g., +10 or +12) to
the computed width and keep the Math.max(60, ...) guard; refer to the yAxisWidth
variable and the formatValue/chartData usage so you change the return expression
to include the extra padding.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 283d612a-1557-47c6-9938-37feec266cfc
📒 Files selected for processing (1)
packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx
1 participant
Description
Fixes Y-axis label clipping in the Metrics widget chart. Currency codes like
"NPR"(Nepalese Rupee) combined with large formatted values (e.g."NPR 1,200,000") were getting truncated because the Recharts<YAxis>uses a default width of 60px.A static
margin={{ left: 15 }}on the<AreaChart>I initially tried this , but it does not scale properly. While it helped with shorter labels like"NPR 80000", longer labels such as"NPR 1,200,000"were still clipped.The fix dynamically computes the
<YAxis>width based on the character length of the longest formatted tick label (derived from the maximum data value). This ensures the axis width adapts correctly to any currency code length and value magnitude.Fixes #4515
Breaking changes
None.
Checklist