Repository navigation
fix: redesign financial dashboard with Evil Charts - #99
Conversation
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configuration
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe dashboard now has a client-side view for its loading, empty, error, and populated states. Monthly trends use a responsive Recharts chart. The changes also add reusable chart components, brush controls, and dashboard presentation components. ChangesDashboard and charting
Estimated code review effort: 4 (Complex) | ~60 minutes Change: Feature 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation Docstring coverage is 48.89% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 45 functions across 12 files. (3 skipped: 3 unsupported.)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://gurbinder-dashboard-design.preview.invoicely.gg (commit 4a13414)This URL reflects your latest Preview deploymentPreview Deployments by commit
|
![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
ℹ️ Review info
⚙️ Run configuration
- Configuration used: Organization UI
- Review profile: CHILL
- Plan: Advanced
- Run ID:
ce43a507-09ba-445b-9a2f-6895f4701f68
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (15)
apps/web/package.jsonapps/web/src/app/(dashboard)/dashboard/dashboard-panels.tsxapps/web/src/app/(dashboard)/dashboard/dashboard-view.client.tsxapps/web/src/app/(dashboard)/dashboard/dashboard.client.tsxapps/web/src/app/(dashboard)/dashboard/monthly-trend.client.tsxapps/web/src/components/evilcharts/LICENSEapps/web/src/components/evilcharts/README.mdapps/web/src/components/evilcharts/charts/recharts-composed-chart.tsxapps/web/src/components/evilcharts/ui/recharts-background.tsxapps/web/src/components/evilcharts/ui/recharts-brush.tsxapps/web/src/components/evilcharts/ui/recharts-chart.tsxapps/web/src/components/evilcharts/ui/recharts-dot.tsxapps/web/src/components/evilcharts/ui/recharts-legend.tsxapps/web/src/components/evilcharts/ui/recharts-tooltip.tsxapps/web/src/components/ui/empty.tsx
Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.
| } | ||
| const descriptionId = useId(); | ||
| const values = data.monthly.flatMap((month) => [new Money(month.billed), new Money(month.collected)]); | ||
| const magnitude = Money.max(1, ...values.map((value) => value.abs())); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Scale the chart by a power of ten so Y-axis ticks show round amounts.
magnitude is the largest exact absolute amount. After normalization, the largest value is always exactly 1 or -1, so the domain is [0, 1] or [-1, 1] in normalized units. With tickCount={5}, Recharts places ticks at 0, 0.25, 0.5, 0.75 and 1. compactAmount(magnitude.times(value)) then maps those ticks to fractions of an arbitrary total. Example: a maximum of 12,345.67 gives the labels "3.1K", "6.2K", "9.3K" and "12.3K". These labels do not show round amounts, so the axis is harder to read.
Normalize by the next power of ten instead. The normalized maximum then falls between 0.1 and 1. Recharts' rounded ticks in that range map back to round currency amounts. Tooltips, totals and the table keep using the exact strings.
🐛 Proposed fix
- const magnitude = Money.max(1, ...values.map((value) => value.abs()));
+ const maxAbs = Money.max(0, ...values.map((value) => value.abs()));
+ // Power-of-ten scale keeps normalized ticks aligned with round currency amounts.
+ const magnitude = maxAbs.lte(1) ? new Money(1) : new Money(10).pow(maxAbs.log(10).ceil());📝 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.
| const magnitude = Money.max(1, ...values.map((value) => value.abs())); | |
| const maxAbs = Money.max(0, ...values.map((value) => value.abs())); | |
| // Power-of-ten scale keeps normalized ticks aligned with round currency amounts. | |
| const magnitude = maxAbs.lte(1) ? new Money(1) : new Money(10).pow(maxAbs.log(10).ceil()); |
|
Preview database and deployment Commit: Migration command and Cloudflare build/deploy completed successfully. There may have been no pending migrations. Migration status is inferred from the required migration hook and the overall Cloudflare result. Build logs contain the individual migration output. |
|
Production database and deployment Commit: Migration command and Cloudflare build/deploy completed successfully. There may have been no pending migrations. Migration status is inferred from the required migration hook and the overall Cloudflare result. Build logs contain the individual migration output. |
The financial dashboard used oversized summary cards, a tall custom SVG chart, and a spacious client table that made the figures harder to scan. Redesign it using the compact headers, grouped metrics, subtle borders, and table density observed in Cloudflare's account analytics and Workers dashboard, while retaining Invoicely's purple theme and custom dashboard icon.
Use the official Evil Charts composed-chart registry components for billed bars and a collected line. The chart has a fixed height, exact decimal totals and tooltips, keyboard-accessible values, and a monthly figures disclosure. Add touch-accessible financial help, responsive controls, and loading/empty states. All amounts remain separated by currency and existing financial aggregation is unchanged.
Database migrations: 0. No tests added.
Validation: