feat: add Engine Cloud analytics to project overview #7195
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe changes introduce a new analytics feature that fetches and visualizes engine cloud method usage statistics. This includes the addition of a new API function, a corresponding data type, a bar chart UI component, a Storybook story for the chart, and integration of the chart card into the project analytics page. Additionally, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProjectAnalytics
participant EngineCloudChartCard
participant getEngineCloudMethodUsage
participant EngineCloudBarChartCardUI
User->>ProjectAnalytics: Render page
ProjectAnalytics->>EngineCloudChartCard: Render with query params
EngineCloudChartCard->>getEngineCloudMethodUsage: Fetch engine cloud stats
getEngineCloudMethodUsage-->>EngineCloudChartCard: Return EngineCloudStats[]
EngineCloudChartCard->>EngineCloudBarChartCardUI: Render chart with stats
EngineCloudBarChartCardUI-->>User: Display stacked bar chart
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (7)
🚧 Files skipped from review as they are similar to previous changes (7)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ Finishing Touches
🪧 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 (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via 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. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7195 +/- ##
=======================================
Coverage 55.63% 55.63%
=======================================
Files 908 908
Lines 58546 58546
Branches 4128 4128
=======================================
Hits 32572 32572
Misses 25868 25868
Partials 106 106
🚀 New features to boost your workflow:
|
arcoraven
force-pushed
the
05-29-feat_add_engine_cloud_analytics_to_project_overview
branch
from
2ad8cc1 to
296d445
Compare
arcoraven
force-pushed
the
05-29-feat_add_engine_cloud_analytics_to_project_overview
branch
from
296d445 to
fd4e030
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx (1)
21-25: LGTM! Clean separation of concerns.The async component properly handles data fetching and passes the raw data to the UI component. The separation between the sync wrapper and async implementation follows React best practices.
Consider adding explicit error handling if the
getEngineCloudMethodUsageAPI call could fail, though this may already be handled by the Suspense boundary or global error boundaries.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx (1)
66-66: Remove debug console.logThe debug console.log should be removed before production deployment.
- console.log("[DEBUG] data:", data);
🛑 Comments failed to post (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx (1)
68-70:
⚠️ Potential issueFix incorrect metric name in empty state
The empty state card shows "RPC" as the metric, but this component is for Engine Cloud analytics.
- return <EmptyStateCard metric="RPC" link="https://portal.thirdweb.com/" />; + return <EmptyStateCard metric="Engine Cloud" link="https://portal.thirdweb.com/" />;📝 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.if (data.length === 0 || isAllEmpty) { return <EmptyStateCard metric="Engine Cloud" link="https://portal.thirdweb.com/" />; }🤖 Prompt for AI Agents
In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx around lines 68 to 70, the EmptyStateCard component incorrectly uses the metric name "RPC". Update the metric prop to reflect the correct context by changing "RPC" to "Engine Cloud" or another appropriate name that matches the Engine Cloud analytics theme of this component.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx (2)
66-66: Remove debug logging for production.The console.log statement should be removed before merging to production to avoid cluttering the browser console.
- console.log("[DEBUG] data:", data);
68-70: Consider updating the metric name for accuracy.The EmptyStateCard uses "RPC" as the metric name, but this component displays "Engine Cloud Requests". Consider using a more descriptive metric name that matches the actual data being visualized.
- return <EmptyStateCard metric="RPC" link="https://portal.thirdweb.com/" />; + return <EmptyStateCard metric="Engine Cloud Requests" link="https://portal.thirdweb.com/" />;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
.gitignore(1 hunks)apps/dashboard/src/@/api/analytics.ts(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCard.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(2 hunks)apps/dashboard/src/types/analytics.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- .gitignore
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
- apps/dashboard/src/types/analytics.ts
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx
- apps/dashboard/src/@/api/analytics.ts
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCard.stories.tsx
🧰 Additional context used
🪛 GitHub Check: Lint Packages
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx
[failure] 113-113:
'_item' is defined but never used
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx (3)
23-64: LGTM: Well-structured data processing logic.The useMemo implementation efficiently processes the raw data:
- Correctly filters out empty pathnames
- Properly groups data by date and pathname
- Handles missing values with sensible defaults
- Creates appropriate chart configuration
- Includes empty state detection
The logic is robust and handles edge cases well.
72-140: LGTM: Comprehensive chart implementation.The chart implementation includes:
- Proper responsive design with aspect ratio controls
- Accessible features with
accessibilityLayer- Well-formatted tooltips and axis labels
- Appropriate margin and styling configuration
- Dynamic color assignment using CSS variables
The overall structure follows React and recharts best practices.
🧰 Tools
🪛 GitHub Check: Lint Packages
[failure] 113-113:
'_item' is defined but never used
125-130:❓ Verification inconclusive
Verify bar radius logic for stacked bars.
The radius configuration might not render as expected for stacked bars. The current logic applies radius to the first and last pathnames, but in stacked bars, this should apply to the bottom and top segments of each bar, not the first and last data series.
Consider testing this with multiple pathnames to ensure the visual appearance is correct. You might need to adjust the radius logic or use a different approach for stacked bar styling.
🏁 Script executed:
#!/bin/bash # Search for similar stacked bar implementations to compare patterns rg -A 10 -B 5 "stackId.*radius" --type tsx --type tsLength of output: 82
Check radius logic for stacked bar segments
It looks like the current radius array is keyed to the first and last data series, but for stacked bars you’ll want the bottom and top segments of each individual bar to be rounded instead. No other instances of
radiuson stacked bars were found, so please manually verify and adjust as needed:• File
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx
– Lines 125–130:
ts radius={[ idx === pathnames.length - 1 ? 4 : 0, // currently rounds “last” series idx === pathnames.length - 1 ? 4 : 0, idx === 0 ? 4 : 0, // currently rounds “first” series idx === 0 ? 4 : 0, ]}Please test with multiple stacked segments to ensure the correct segments are rounded (bottom vs. top), and adjust the condition or approach (e.g. targeting segment index within each bar) accordingly.
...slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
...slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx
Outdated
Show resolved
Hide resolved
arcoraven
force-pushed
the
05-29-feat_add_engine_cloud_analytics_to_project_overview
branch
from
fd4e030 to
aec4b06
Compare
jnsdls
force-pushed
the
05-29-feat_add_engine_cloud_analytics_to_project_overview
branch
from
aec4b06 to
6e6de24
Compare
jnsdls
force-pushed
the
05-29-feat_add_engine_cloud_analytics_to_project_overview
branch
from
6e6de24 to
03449f2
Compare
Merge activity
|
# [Dashboard] Feature: Add Engine Cloud Analytics Charts Example screenshot:  ## Notes for the reviewer This PR adds Engine Cloud analytics to the dashboard, displaying request data in a bar chart visualization. The implementation includes: 1. A new API endpoint to fetch Engine Cloud method usage data 2. New UI components for displaying Engine Cloud analytics: - `EngineCloudBarChartCardUI` - Shows Engine Cloud requests by pathname - `EngineCloudChartCardUI` - Shows Engine Cloud methods usage with percentage breakdown 3. Integration of the new chart into the project analytics page ## How to test - View the Storybook component at "Analytics/EngineCloudBarChartCard" - Navigate to a project dashboard to see the Engine Cloud analytics chart - Verify data is properly fetched and displayed in the chart <!-- start pr-codex --> --- ## PR-Codex overview This PR introduces a new feature to track and visualize `EngineCloud` statistics in the dashboard, enhancing analytics capabilities with new components and API integrations. ### Detailed summary - Added `EngineCloudStats` interface in `analytics.ts`. - Implemented `getEngineCloudMethodUsage` API function. - Created `EngineCloudChartCard` component for displaying cloud stats. - Developed `EngineCloudBarChartCardUI` for rendering bar charts. - Added storybook entries for `EngineCloudBarChartCardUI`. - Enhanced existing analytics with new data visualizations. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a stacked bar chart visualization for engine cloud request statistics in the analytics dashboard. - Added a chart card displaying engine cloud method usage data with loading state support. - Enhanced analytics with time series data for multiple API pathnames. - Included engine cloud method usage data in the project analytics view. - **Chores** - Updated `.gitignore` to exclude the `.pnpm-store/` directory from version control. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
05-29-feat_add_engine_cloud_analytics_to_project_overview
branch
from
03449f2 to
f2e8b9e
Compare
graphite-app
bot
deleted the
05-29-feat_add_engine_cloud_analytics_to_project_overview
branch
[Dashboard] Feature: Add Engine Cloud Analytics Charts
Example screenshot:
Notes for the reviewer
This PR adds Engine Cloud analytics to the dashboard, displaying request data in a bar chart visualization. The implementation includes:
EngineCloudBarChartCardUI- Shows Engine Cloud requests by pathnameEngineCloudChartCardUI- Shows Engine Cloud methods usage with percentage breakdownHow to test
PR-Codex overview
This PR introduces new features related to engine cloud analytics, including a new interface for engine cloud statistics and components for displaying this data in charts.
Detailed summary
EngineCloudStatsinterface to define engine cloud statistics.EngineCloudChartCardcomponent for displaying engine cloud data.getEngineCloudMethodUsageAPI function to fetch engine cloud usage data.EngineCloudBarChartCardUIfor rendering bar charts with engine cloud data.EngineCloudBarChartCardUIto demonstrate its usage.Summary by CodeRabbit
New Features
Chores
.gitignoreto exclude the.pnpm-store/directory from version control.