Add bounce-rate color to MetricToggle color map.#107
Add bounce-rate color to MetricToggle color map.#107izadoesdev merged 1 commit intodatabuddy-analytics:mainfrom
Conversation
|
@sbansal1999 is attempting to deploy a commit to the Databuddy Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdds 'amber-500' (#fd9a00) to the MetricToggle colorMap in ui-components.tsx so colorName 'amber-500' resolves to amber; default fallback remains '#3b82f6'. No control-flow, error-handling, API, or exported signature changes. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Assessment against linked issues
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 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
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd the label Main to this PR to add it to the merge queue. You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
sbansal1999
force-pushed
the
fix-bounce-rate-color
branch
from
16599e8 to
b36dc70
Compare
![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/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx (3)
47-50: Amber token added — verify hex matches Tailwind’s amber-500 or rename to avoid confusionYou’ve mapped 'amber-500' to '#fd9a00'. Tailwind’s canonical amber-500 is '#f59e0b'. If the intent is to use the Tailwind token, update the hex. If '#fd9a00' is a brand-specific variant, consider a distinct key (e.g., 'amber-brand' or 'warning-500') to prevent future confusion and accidental mixing with Tailwind scales.
Optional diff if you want to align with Tailwind:
- 'amber-500': '#fd9a00', + 'amber-500': '#f59e0b',
35-51: Hoist color map and tighten types to prevent typos and per-render allocationgetColorMap reconstructs the same dictionary every render and accepts any string. Moving the map to a module-level const and deriving a ColorName union improves performance (minor) and type-safety (major), catching misspelled tokens at compile time.
Apply within these ranges:
- // Get proper hex values for the colors - const getColorMap = (colorName: string) => { - const colorMap: Record<string, string> = { - 'blue-500': '#3b82f6', - 'green-500': '#22c55e', - 'emerald-500': '#10b981', - 'yellow-500': '#eab308', - 'red-500': '#ef4444', - 'purple-500': '#a855f7', - 'pink-500': '#ec4899', - 'indigo-500': '#6366f1', - 'orange-500': '#f97316', - 'sky-500': '#0ea5e9', - 'amber-500': '#fd9a00', - }; - - return colorMap[colorName] || '#3b82f6'; // Default to blue if color not found - }; + // See COLOR_MAP at module scope- const colorHex = getColorMap(color); + const colorHex = COLOR_MAP[color] ?? COLOR_MAP['blue-500'];And add these outside the selected ranges (module scope and prop type):
// Module scope (top of file, after imports) export const COLOR_MAP = { 'blue-500': '#3b82f6', 'green-500': '#22c55e', 'emerald-500': '#10b981', 'yellow-500': '#eab308', 'red-500': '#ef4444', 'purple-500': '#a855f7', 'pink-500': '#ec4899', 'indigo-500': '#6366f1', 'orange-500': '#f97316', 'sky-500': '#0ea5e9', 'amber-500': '#fd9a00', // or '#f59e0b' if aligning to Tailwind } as const; export type ColorName = keyof typeof COLOR_MAP;// Update prop type interface MetricToggleProps { label: string; checked: boolean; onChange: () => void; color: ColorName; }Also applies to: 53-54
1-1: Icons: project guideline prefers Phosphor over Lucide; also mark decorative SVGs as hiddenPer repo guidelines, use Phosphor icons (duotone by default) and append “Icon” to names. The file currently imports from 'lucide-react'. If you’re not switching icon sets in this PR, at least make the decorative icons invisible to AT.
Immediate a11y tweak:
- <ExternalLink className="h-3 w-3 opacity-70" /> + <ExternalLink className="h-3 w-3 opacity-70" aria-hidden="true" focusable="false" />- <HelpCircle className="absolute top-2 right-2 h-3 w-3 text-muted-foreground/50" /> + <HelpCircle className="absolute top-2 right-2 h-3 w-3 text-muted-foreground/50" aria-hidden="true" focusable="false" />If/when migrating, replace Lucide with Phosphor equivalents (e.g., ArrowSquareOutIcon, QuestionIcon), set weight="duotone", and rename usages accordingly. I can prep a follow-up PR to do this repo-wide.
Also applies to: 151-152, 204-205
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/ultracite.mdc)
**/*.{jsx,tsx}: Don't useelements in Next.js projects.
Don't use elements in Next.js projects.
Don't pass children as props.
Don't use the return value of React.render.
Make sure all dependencies are correctly specified in React hooks.
Make sure all React hooks are called from the top level of component functions.
Don't forget key props in iterators and collection literals.
Don't destructure props inside JSX components in Solid projects.
Don't define React components inside other components.
Don't use event handlers on non-interactive elements.
Don't assign to React component props.
Don't use both children and dangerouslySetInnerHTML props on the same element.
Don't use dangerous JSX props.
Don't use Array index in keys.
Don't insert comments as text nodes.
Don't assign JSX properties multiple times.
Don't add extra closing tags for components without children.
Use <>...</> instead of ....
Watch out for possible "wrong" semicolons inside JSX elements.
Don't use accessKey attribute on any HTML element.
Don't set aria-hidden="true" on focusable elements.
Don't add ARIA roles, states, and properties to elements that don't support them.
Don't use distracting elements like or .
Only use the scope prop on elements.
Don't assign non-interactive ARIA roles to interactive HTML elements.
Make sure label elements have text content and are associated with an input.
Don't assign interactive ARIA roles to non-interactive HTML elements.
Don't assign tabIndex to non-interactive HTML elements.
Don't use positive integers for tabIndex property.
Don't include "image", "picture", or "photo" in img alt prop.
Don't use explicit role property that's the same as the implicit/default role.
Make static elements with click handlers use a valid role attribute.
Always include a title element for SVG elements.
Give all elements requiring alt text meaningful information for screen readers.
Make sure anchors have content that's accessible ...Files:
apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx**/*.{js,ts,jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/ultracite.mdc)
**/*.{js,ts,jsx,tsx}: Don't import next/document outside of pages/_document.jsx in Next.js projects.
Don't use global eval().
Don't use var.
Don't use console.
Don't use debugger.
Don't assign directly to document.cookie.
Don't use duplicate case labels.
Don't use duplicate class members.
Don't use duplicate function parameter names.
Don't use empty block statements and static blocks.
Don't use with statements in non-strict contexts.
Don't use the arguments object.
Don't use the comma operator.
Don't use unnecessary boolean casts.
Use for...of statements instead of Array.forEach.
Use arrow functions instead of function expressions.
Use Date.now() to get milliseconds since the Unix Epoch.
Use .flatMap() instead of map().flat() when possible.
Use literal property access instead of computed property access.
Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.
Use concise optional chaining instead of chained logical expressions.
Use regular expression literals instead of the RegExp constructor when possible.
Don't use number literal object member names that aren't base 10 or use underscore separators.
Remove redundant terms from logical expressions.
Use while loops instead of for loops when you don't need initializer and update expressions.
Don't reassign const variables.
Don't use constant expressions in conditions.
Don't use Math.min and Math.max to clamp values when the result is constant.
Don't return a value from a constructor.
Don't use empty character classes in regular expression literals.
Don't use empty destructuring patterns.
Don't call global object properties as functions.
Don't declare functions and vars that are accessible outside their block.
Don't use variables and function parameters before they're declared.
Don't use 8 and 9 escape sequences in string literals.
Don't use literal numbers that lose precision.
Don't use duplicate conditions in if-else-if chains.
Don't use two keys with the same name inside objects...Files:
apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/ultracite.mdc)
**/*.{ts,tsx}: Don't use TypeScript enums.
Don't use TypeScript const enum.
Don't use TypeScript namespaces.
Don't use the TypeScript directive @ts-ignore.
Don't use any type.
Don't use implicit any type on variable declarations.
Don't use non-null assertions with the ! postfix operator.
Don't misuse the non-null assertion operator (!) in TypeScript files.
Don't declare empty interfaces.
Use export type for types.
Use import type for types.
Don't use primitive type aliases or misleading types.
Don't use empty type parameters in type aliases and interfaces.
**/*.{ts,tsx}: Ensure TypeScript type-safety; avoidanyunless absolutely necessary
Create proper interfaces/types for APIs, responses, and components; place them in shared types folders rather than in the same fileFiles:
apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
**/*.{js,jsx,ts,tsx}: Usebun <file>instead ofnode <file>orts-node <file>
Do not use dotenv; Bun automatically loads .env files
Do not useexpress; useBun.serve()for HTTP servers
Do not usebetter-sqlite3; usebun:sqlitefor SQLite
Do not useioredis; useBun.redisfor Redis
Do not usepgorpostgres.js; useBun.sqlfor Postgres
Do not usews; use built-inWebSocket
PreferBun.fileovernode:fs's readFile/writeFile
UseBun.$instead of execa for running shell commandsFiles:
apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx**/*.{tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/01-MUST-DO.mdc)
**/*.{tsx,jsx}: In Tailwind CSS usage, useroundedonly; do not userounded-mdorrounded-xl
Use Phosphor icons, not Lucide; default to weight="duotone", use fill for arrows, and for plus icons do not set weight
In view components, decouple state management, data transformations, and API interactions from the React lifecycle
Simplify data flow in components to avoid prop drilling and callback chains
Prioritize modularity and testability in all React components
Use React Error Boundaries appropriately
Avoid useEffect in React unless it is truly criticalFiles:
apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/01-MUST-DO.mdc)
**/*.{ts,tsx,js,jsx}: Use console methods appropriately (e.g., console.error, console.time, console.table, console.json)
Use Dayjs instead of date-fns
Use TanStack Query for hooks; do not use SWR
When adding debugging, use JSON.stringify() for structured outputFiles:
apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx**/*.{tsx,jsx,ts,js}
📄 CodeRabbit Inference Engine (.cursor/rules/01-MUST-DO.mdc)
When using Phosphor React icons, append 'Icon' to component names (e.g., CaretIcon, not Caret)
Files:
apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx
sbansal1999
force-pushed
the
fix-bounce-rate-color
branch
from
8f73bb3 to
5e655a7
Compare
|
@izadoesdev this should be easy merge |
2 participants
Fixed
Fixes #104
Summary by CodeRabbit
New Features
Style