Refactor: Usage page to support fine grained client side control of usage data #171
+2,412
−1,506
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Replaced individual usage cards with new chart components in a responsive grid layout - Added UsageChartsProvider context to manage shared chart state and interactions - Implemented interactive tooltips and hover states across all usage charts - Updated layout configuration to use custom header styling for usage page - Improved mobile responsiveness with better overflow handling and chart sizing - Consolidated data fetching to single request
- Simplified data model by converting to TimeSeriesPoint interface for all metrics - Added fillTimeSeriesWithEmptyPoints utility to ensure consistent data points - Centralized display value calculations and formatting in context - Removed direct dependency on UsageData type in chart components - Updated compute usage chart to handle standardized time series format - Renamed getUsageThroughReactCache to getUsage for clarity The changes consoli
- Modified default date range to show 3 days before first data point instead of exact first date - Updated display value labels from "total" to "over range" for better clarity - Simplified timeframe filtering logic by removing redundant comments - Reorganized date range calculation to handle edge cases more consistently - Added consistent timestamp handling with 12-hour window for hover matching
- Removed endEnabled toggle and simplified TimeRangePicker interface by making time inputs optional - Added hideTime prop to allow date-only selection mode - Updated time handling to use default values (00:00:00 for start, 23:59:59 for end) when time is not specified - Renamed getUsageThroughReactCache to getUsage for clarity - Fixed time input validation to properly handle null/empty time values - Streamlined TimeRangeValues interface by
ben-fornefeld
added
improvement
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
bugbot run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
- Added brush selection component to ECharts configuration allowing users to select time ranges directly on charts - Implemented brush event handling to update timeframe when user selects a range - Added date normalization functions to snap selections to full day boundaries - Removed static ECharts config and integrated brush-specific options directly into chart options - Added onBrushEnd callback prop to ComputeUsageChart component
- Updated grid layout breakpoints from md to lg for better responsive behavior - Added conditional time range controls visibility per chart to reduce UI clutter - Enhanced date formatting using Intl.DateTimeFormat for consistent display - Improved calendar interaction by setting defaultMonth to selected date - Updated tooltips to clarify time range navigation (one-third range movement)
- Updated grid layout with better proportions using grid-rows-[4fr_2fr] for more balanced chart display - Standardized chart heights using min-h-[48svh] for consistent mobile display - Added border and padding to bottom charts in desktop view for visual separation - Refined time range controls visibility and positioning across breakpoints - Updated "Started Sandboxes" label to "Started & Resumed Sandboxes" for accuracy - Improved metric header
- Simplified x-axis configuration by moving min/max values into initial chart options - Fixed interval calculation to ensure proper tick spacing based on sampling mode - Removed unnecessary useEffect hook for setting time range - Added chartSpan variable to improve code readability and reusability - Ensured minimum interval respects weekly/daily sampling modes while maintaining proper tick display The changes make the chart more reliable by
- Updated x-axis to show only start and end labels by setting interval to MAX_SAFE_INTEGER - Added support for decimal values under 1 in formatAxisNumber with 2 decimal precision - Disabled toolbox component in chart configuration for cleaner UI - Removed unused index parameter from x-axis formatter function - Added ToolboxComponent registration to echarts configuration
- Moved chart configuration to shared constants file and added support for hourly sampling mode - Enhanced timestamp normalization logic to handle hourly, daily, and weekly sampling periods - Updated chart styling with better opacity, spacing and grid layout - Added dynamic tick intervals based on sampling mode (hourly/daily/weekly) - Improved hover display formatting to show appropriate time labels for each sampling mode - Refactored data point
|
@ben-fornefeld Any blockers for merging this? There were a few commits since the review :D |
ben-fornefeld
dismissed
tomassrnka’s stale review
there were ux decisions that needed post-addressing
yes, small fixes about how the chart behaves around the edges and how the sampling work |
- Renamed calculateYAxisMax to calculateAxisMax for clarity - Enhanced formatAxisDate function to support hourly, daily, and weekly sampling modes - Updated chart data mapping to utilize new date formatting logic - Removed unused area color variables from chart configurations for cleaner code - Adjusted HOURLY_SAMPLING_THRESHOLD_DAYS constant from 5 to 3 for better sampling accuracy
- Updated display-utils to improve timestamp formatting for daily and weekly sampling modes - Refactored sampling-utils to streamline usage data processing and normalize timestamps - Removed deprecated compute-usage-chart utilities for cleaner codebase - Improved time range controls by eliminating unnecessary props and enhancing data handling - Adjusted usage charts context to utilize new data processing logic and ensure accurate display
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
dobrac
approved these changes
Nov 3, 2025
Co-authored-by: Jakub Dobry <[email protected]>
…w-more-fine-eng-3214
ben-fornefeld
deleted the
refactor-usage-page-charts-to-be-able-to-show-more-fine-eng-3214
branch
ben-fornefeld
added a commit
that referenced
this pull request
Nov 3, 2025
…sage data (#171) <!-- CURSOR_SUMMARY --> > [!NOTE] > Replaces the usage page with ECharts-based interactive charts powered by a new context, hourly aggregation, and time-range controls; unifies axis max logic and updates API usage/formatting utilities. > > - **Usage Page (UI/UX)**: > - Replace legacy cards/charts with a 2x2 grid of `UsageMetricChart` (sandboxes, cost, vcpu, ram) backed by `UsageChartsProvider`. > - Add brush-based selection, hover-driven value display, and URL-synced timeframe via `nuqs`. > - Introduce `UsageTimeRangeControls` with date/time picker, presets, and shift navigation. > - **Charts**: > - New `compute-usage-chart` (ECharts bar) and supporting configs/types. > - Team metrics chart: switch from dataZoom to brush, remove static toolbox config, and use shared `calculateAxisMax`. > - **Data Processing & Formatting**: > - Add hourly usage processing with sampling (`hourly/daily/weekly`) in `sampling-utils` and zero-fill in `time-series`. > - New display/format helpers (`formatAxisDate/Hour/Day`, totals, empty states) and compact axis number formatting tweaks. > - Shared `calculateAxisMax` in `lib/utils/chart` with tests updated accordingly. > - **Server/API**: > - `get-usage`: fetch raw `UsageResponse`, convert `hour_usages.timestamp` to ms, and return directly (replaces prior cached transform). > - Update consumers (e.g., billing credits) to use `getUsage`. > - **Layout/Infra**: > - Mark `'/dashboard/*/usage'` as `custom` layout and adjust header/wrapper overflow behavior. > - Remove old Recharts-based components and unused toolbox/tooltip utilities. > - **New UI Primitives**: > - Add `TimeRangePicker`, `TimeRangePresets`, and enhance `TimeInput`; minor `AnimatedNumber` adjustment. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 4b10e72. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Jakub Dobry <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Note
Refactors the Usage page to an interactive, brush-selectable ECharts experience with time range presets and sampling, backed by hourly usage data and new utilities.
Cost/RAM/vCPU/Sandboxescards and Recharts with four interactive ECharts (UsageMetricChart) insideUsageChartsProvider.getUsage(UsageResponse.hour_usages), convert timestamps to ms; remove monthly aggregation/cache.nuqs).compute-usage-chart,usage-charts-context,usage-time-range-controls,time-range-picker,time-range-presets.calculateAxisMax, time-series helpers, time range/preset finder, formatting (formatDay/Hour/DateRange).calculateAxisMax; removeSTATIC_ECHARTS_CONFIGand oldcalculateYAxisMax.calculateAxisMax./dashboard/*/usageascustomlayout with optional header bottom styles; wrapper/header tweaks; small UI polish (AnimatedNumber, TimeInput).getUsage; adjust chart placeholder config.Written by Cursor Bugbot for commit 8bb233e. This will update automatically on new commits. Configure here.