feat: revenue graph#25
Conversation
WalkthroughA new kitchen revenue chart component was added to the web app, using the Unovis visualization library. The kitchen finance page was updated to use this chart, with new types for period and date range introduced. Dependencies for Unovis were added to the UI package and workspace configuration. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant KitchenFinancePage
participant ChartKitchenRevenue
participant DataSource
User->>KitchenFinancePage: Visits kitchen finance page
KitchenFinancePage->>DataSource: Fetch revenue data
DataSource-->>KitchenFinancePage: Return revenue data
KitchenFinancePage->>ChartKitchenRevenue: Pass period, range, values props
ChartKitchenRevenue->>ChartKitchenRevenue: Normalize and compute chart data
ChartKitchenRevenue-->>User: Render chart with revenue and checks
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/web-app/app/components/chart/KitchenRevenue.client.vue (2)
72-88: Consider optimizing the date comparison logic.The current date comparison logic compares year, month, and date separately, which could have timezone issues and is inefficient for large datasets.
Consider this optimization using date string comparison:
-const value = values.find((d) => new Date(d.date).getFullYear() === date.getFullYear() && new Date(d.date).getMonth() === date.getMonth() && new Date(d.date).getDate() === date.getDate()) +const dateStr = format(date, 'yyyy-MM-dd') +const value = values.find((d) => d.date.startsWith(dateStr))Alternatively, create a Map for O(1) lookups:
+const valuesByDate = new Map(values.map(v => [v.date.split('T')[0], v])) + data.value = dates.map((date) => { - const value = values.find((d) => new Date(d.date).getFullYear() === date.getFullYear() && new Date(d.date).getMonth() === date.getMonth() && new Date(d.date).getDate() === date.getDate()) + const dateStr = format(date, 'yyyy-MM-dd') + const value = valuesByDate.get(dateStr)
84-85: Simplify the conditional assignment.The conditional checks can be simplified using nullish coalescing.
-total: value?.total ? value.total : 0, -checks: value?.checks ? value.checks : 0, +total: value?.total ?? 0, +checks: value?.checks ?? 0,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
apps/web-app/app/components/chart/KitchenRevenue.client.vue(1 hunks)apps/web-app/app/pages/kitchen/[id]/finance.vue(1 hunks)apps/web-app/shared/types/index.ts(1 hunks)packages/ui/package.json(1 hunks)pnpm-workspace.yaml(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (12)
pnpm-workspace.yaml (1)
29-30: LGTM! Clean dependency additions for visualization library.The Unovis visualization library dependencies are properly added to the catalog with appropriate version constraints.
packages/ui/package.json (1)
14-15: LGTM! Proper dependency management using workspace catalog.The Unovis dependencies are correctly added to the runtime dependencies section with proper catalog references.
apps/web-app/shared/types/index.ts (1)
48-53: LGTM! Well-defined types for date range functionality.The
Periodunion type andRangeinterface provide clear type safety for date-based chart filtering and display operations.apps/web-app/app/pages/kitchen/[id]/finance.vue (3)
3-7: LGTM! Clean integration of the chart component.The template correctly passes the required props to the chart component with proper fallback for the values prop.
12-13: LGTM! Proper imports and dependencies.The type imports and date-fns import are correctly structured for the component's needs.
19-23: LGTM! Sensible default values for date range and period.The 14-day default range and 'daily' period provide a good starting point for users. Using
shallowReffor the range object is appropriate.apps/web-app/app/components/chart/KitchenRevenue.client.vue (6)
1-12: LGTM! Clean card layout with proper header information.The header effectively displays the total revenue and period description with proper localization and formatting.
14-45: LGTM! Comprehensive chart setup with good visual elements.The chart configuration includes all necessary components (line, area, axis, crosshair, tooltip) with proper theming using CSS variables.
48-64: LGTM! Well-structured component props and imports.The props are properly typed using the shared types, and all necessary Unovis and date-fns imports are included.
90-113: LGTM! Well-implemented chart accessors and formatting functions.The x/y accessors, total calculation, number formatting, and date formatting functions are all properly implemented with good localization support.
116-129: LGTM! Comprehensive CSS variable theming.The scoped styles properly integrate with the UI theme system using CSS variables for consistent visual appearance.
113-113: KitchenRevenue.client.vue tooltip interpolation is safeThe
templatefunction only formats and concatenates a date (d.date), numeric totals (d.total), and a count (d.checks) viaformatDate,formatNumber, andpluralizationRu. None of these functions render HTML or inject untrusted markup—they return plain text for chart tooltips. Since the fields are strictlyDate/numbertypes and not user-entered HTML, there’s no XSS vector here. You can safely ignore the sanitization recommendation for this component.Likely an incorrect or invalid review comment.
|
1 participant
Summary by CodeRabbit
New Features
Enhancements
Other Changes