Feat | Calendar activity | Legend |Add not hours worked flag #3526
Conversation
|
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/lib/features/integrations/activity-calendar/index.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. WalkthroughThe pull request introduces modifications to multiple components and localization files across the web application. The primary changes involve updating the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 (
|
![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 (3)
apps/web/lib/features/integrations/activity-calendar/index.tsx (3)
130-151: Consider extracting color constants to avoid duplication.The color values are currently duplicated between
ActivityCalendarandActivityLegend. Consider extracting these into a shared constant to maintain consistency and improve maintainability.// Create a new constants file or add to existing one export const ACTIVITY_COLORS = { NOT_WORKED: '#FFFFFF', HOURS_0_4: '#9370DB', HOURS_4_10: '#0000FF', HOURS_10_18: '#FFA500', HOURS_18_24: '#FF4500', } as const;
158-164: Enhance accessibility with ARIA labels.The legend items could benefit from improved accessibility. Consider adding appropriate ARIA labels to make the legend more accessible to screen readers.
-<div className="flex items-center" id={`legend-${item.color.slice(1)}`}> +<div + className="flex items-center" + id={`legend-${item.color.slice(1)}`} + role="listitem" + aria-label={`${item.label} activity level`} +>
130-151: Optimize useMemo usage.The
useMemohook might be unnecessary here since the data structure is static and only the translations change. Consider either:
- Moving the data structure outside the component if it's truly static
- Or keeping the current implementation if you expect the data structure to change in the future
If you choose option 1, you could refactor it like this:
const LEGEND_DATA = [ { color: '#FFFFFF', labelKey: 'common.NOT_HOURS_WORKED' }, { color: '#9370DB', labelKey: 'common.HOURS', range: '0 - 4' }, // ... other items ]; function ActivityLegend() { const t = useTranslations(); return ( // ... render using LEGEND_DATA.map(item => ({ // ...item, // label: item.range ? `${item.range} ${t(item.labelKey)}` : t(item.labelKey) // })) ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/lib/features/integrations/activity-calendar/index.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (2)
apps/web/lib/features/integrations/activity-calendar/index.tsx (2)
4-4: LGTM! Import statements are well-organized.The new imports are properly utilized in the code changes and follow the project's conventions.
Also applies to: 9-10
154-166: LGTM! Well-structured legend implementation.The legend implementation is well-structured with:
- Proper internationalization support
- Efficient list rendering using Fragment
- Good handling of the white color edge case
- Clear and maintainable JSX structure
CREDO23
changed the title
evereq
deleted the
3478-update-stats-legend-to-include-time-not-worked
branch
Description
Fix #3478
Type of Change
Checklist
Current screenshots
Summary by CodeRabbit
New Features
Localization
Improvements