fix(web): polish analytics dashboard charts#981
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughUpdated analytics UI copy and chart presentations; removed the Changes
Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📝 Coding Plan
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b6ed8c09-4e55-4eea-ba74-f3b558bae992
📒 Files selected for processing (9)
apps/web/src/app/(home)/analytics/_components/analytics-header.tsxapps/web/src/app/(home)/analytics/_components/analytics-helpers.tsapps/web/src/app/(home)/analytics/_components/chart-card.tsxapps/web/src/app/(home)/analytics/_components/dev-environment-charts.tsxapps/web/src/app/(home)/analytics/_components/metrics-cards.tsxapps/web/src/app/(home)/analytics/_components/preference-chart-card.tsxapps/web/src/app/(home)/analytics/_components/stack-configuration-charts.tsxapps/web/src/app/(home)/analytics/_components/timeline-charts.tsxapps/web/src/app/(home)/analytics/analytics-client.tsx
💤 Files with no reviewable changes (1)
- apps/web/src/app/(home)/analytics/analytics-client.tsx
| const webDeployTargets = data.webDeployDistribution; | ||
| const serverDeployTargets = data.serverDeployDistribution; | ||
| const hasDeployTargets = webDeployTargets.length > 0 || serverDeployTargets.length > 0; |
There was a problem hiding this comment.
Keep the "none" sentinel out of the deployment-provider charts.
These assignments now feed skipped deployments into cards labeled as deployment options. If "none" is common, the largest bar becomes a non-selection, which makes the “Web deployment” and “Server deployment” charts misleading and hides the real provider breakdown.
Suggested fix
- const webDeployTargets = data.webDeployDistribution;
- const serverDeployTargets = data.serverDeployDistribution;
+ const webDeployTargets = data.webDeployDistribution.filter((item) => item.name !== "none");
+ const serverDeployTargets = data.serverDeployDistribution.filter(
+ (item) => item.name !== "none",
+ );📝 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 webDeployTargets = data.webDeployDistribution; | |
| const serverDeployTargets = data.serverDeployDistribution; | |
| const hasDeployTargets = webDeployTargets.length > 0 || serverDeployTargets.length > 0; | |
| const webDeployTargets = data.webDeployDistribution.filter((item) => item.name !== "none"); | |
| const serverDeployTargets = data.serverDeployDistribution.filter( | |
| (item) => item.name !== "none", | |
| ); | |
| const hasDeployTargets = webDeployTargets.length > 0 || serverDeployTargets.length > 0; |
| contentClassName={ | ||
| chunks.length > 1 | ||
| ? cn( | ||
| "grid gap-4", | ||
| columnGridClassName ?? | ||
| (layout === "horizontal" | ||
| ? columnCount >= 3 | ||
| ? "xl:grid-cols-2 2xl:grid-cols-3" | ||
| : "xl:grid-cols-2" | ||
| : "xl:grid-cols-2"), | ||
| ) | ||
| : undefined | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find apps/web/src/app \( -name "preference-chart-card.tsx" -o -name "chart-card.tsx" \) -type fRepository: AmanVarshney01/create-better-t-stack
Length of output: 212
🏁 Script executed:
cat -n apps/web/src/app/\(home\)/analytics/_components/preference-chart-card.tsx | head -80Repository: AmanVarshney01/create-better-t-stack
Length of output: 2786
🏁 Script executed:
cat -n apps/web/src/app/\(home\)/analytics/_components/chart-card.tsxRepository: AmanVarshney01/create-better-t-stack
Length of output: 1758
🏁 Script executed:
find apps/web -name "utils.ts" -o -name "utils.js" | head -5Repository: AmanVarshney01/create-better-t-stack
Length of output: 154
🏁 Script executed:
cat -n apps/web/src/lib/utils.ts | head -50Repository: AmanVarshney01/create-better-t-stack
Length of output: 290
Clear the inherited vertical spacing when this wrapper becomes a grid.
ChartCard applies space-y-4 to its content container (line 38 of chart-card.tsx). When this container is switched to grid gap-4 in the multi-column case, both spacing mechanisms are active: space-y-4 adds direct margins to child elements while gap-4 applies grid spacing. This causes overlapping spacing that stagers the layout in the first row.
Suggested fix
contentClassName={
chunks.length > 1
? cn(
- "grid gap-4",
+ "grid gap-4 space-y-0",
columnGridClassName ??
(layout === "horizontal"
? columnCount >= 3📝 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.
| contentClassName={ | |
| chunks.length > 1 | |
| ? cn( | |
| "grid gap-4", | |
| columnGridClassName ?? | |
| (layout === "horizontal" | |
| ? columnCount >= 3 | |
| ? "xl:grid-cols-2 2xl:grid-cols-3" | |
| : "xl:grid-cols-2" | |
| : "xl:grid-cols-2"), | |
| ) | |
| : undefined | |
| } | |
| contentClassName={ | |
| chunks.length > 1 | |
| ? cn( | |
| "grid gap-4 space-y-0", | |
| columnGridClassName ?? | |
| (layout === "horizontal" | |
| ? columnCount >= 3 | |
| ? "xl:grid-cols-2 2xl:grid-cols-3" | |
| : "xl:grid-cols-2" | |
| : "xl:grid-cols-2"), | |
| ) | |
| : undefined | |
| } |
1 participant
Summary
Verification
/analytics(desktop)Summary by CodeRabbit
New Features
UI/UX Improvements