[Feat]: Add Interactive productivity chart component #3624
Conversation
- Implement stacked bar chart for productivity visualization - Add interactive hover legend with date and percentages - Include color-coded categories (productive/neutral/unproductive) - Add responsive layout and dark mode support
WalkthroughThe pull request refactors the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant CB as ChartBar
participant PC as ProductivityChart
participant LG as Legend
U->>CB: Hover over a chart bar
CB->>PC: Call onHover(day data)
PC->>PC: Update hoveredDay state
PC->>LG: Render Legend with day data
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx (3)
23-28: Consider using design tokens for colorsWhile defining color constants is good practice, consider using design system tokens instead of hardcoded hex values to ensure consistency with the rest of the application and better support for theming.
const CHART_COLORS = { - productive: 'bg-[#1554E0]', - neutral: 'bg-[#F5B458]', - unproductive: 'bg-[#F56D58]' + productive: 'bg-productive', + neutral: 'bg-neutral', + unproductive: 'bg-unproductive' } as const;
31-69: Extract date formatting to a utility functionThe date formatting logic could be extracted to a reusable utility function, especially since it's used multiple times with the same configuration.
+ const formatDate = (dateString?: string) => { + const date = dateString ? new Date(dateString) : new Date(); + return date.toLocaleDateString('en-US', { + month: 'short', + day: '2-digit', + year: 'numeric' + }); + }; const Legend: React.FC<LegendProps> = ({ productivePercentage, neutralPercentage, unproductivePercentage, date }) => { - const formattedDate = date - ? new Date(date).toLocaleDateString('en-US', { - month: 'short', - day: '2-digit', - year: 'numeric' - }) - : new Date().toLocaleDateString('en-US', { - month: 'short', - day: '2-digit', - year: 'numeric' - }); + const formattedDate = formatDate(date);The Legend component is well-structured with good use of mapping for consistent rendering of different status items. The dark mode support is also well implemented.
71-111: Good separation of concerns with ChartBar componentThe ChartBar component effectively encapsulates bar rendering and hover behavior. The hover effect and legend popup provide excellent user feedback.
One suggestion to improve: consider adding accessibility attributes for screen readers:
<div className="flex relative flex-col flex-1 justify-end cursor-pointer group" onMouseEnter={() => onHover(day)} onMouseLeave={() => onHover(null)} + role="button" + aria-label={`Productivity data for ${new Date(day.date).toLocaleDateString()}: ${day.productive}% productive, ${day.neutral}% neutral, ${day.unproductive}% unproductive`} + tabIndex={0} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + onHover(day); + } + }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (4)
apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx (4)
1-2: Well-structured importsThe addition of
useStateis appropriate for managing the hover state, andcnutility is good for conditional class composition.
16-21: Good interface definitionThe
LegendPropsinterface is well-structured with appropriate types for each property. The optional date field provides flexibility for different use cases.
114-114: Good state managementThe
hoveredDaystate is appropriately managed withuseStateand is used effectively to track and control hover interactions.
120-143: Improved component structureThe refactored structure with ChartBar significantly improves the separation of concerns and code organization. The individual date numbers at the bottom of the chart enhance usability by providing context.
[Feature] Apps & URLs Dashboard | View Color-coded Charts Representing Apps & URLs Data #3263
Description
Please include a summary of the changes and the related issues.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of the previous status
Current screenshots
Please add here videos or images of the current (new) status
Summary by CodeRabbit