Proposal: Shrink task metrics chart a bunch #2738
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR modernizes the task run metrics visualization by replacing the bar chart with an area chart and significantly reducing its vertical footprint from h-36 to h-24, freeing up valuable screen space on the workflow runs page.
Key Changes
- Converted the workflow run metrics chart from a bar chart to an area chart for improved visual presentation
- Reduced the chart height by 33% (from h-36/144px to h-24/96px) to optimize vertical space usage
- Adjusted chart styling by removing the cartesian grid and increasing tick spacing for a cleaner, more compact appearance
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/app/src/pages/main/v1/workflow-runs-v1/components/runs-table.tsx | Changed chart type from "bar" to "area", reduced skeleton and chart height from h-36 to h-24, and added explicit height constraints |
| frontend/app/src/components/v1/molecules/charts/zoomable.tsx | Removed CartesianGrid and increased minTickGap from 16 to 48 in the ChildAreaChart component to support the more compact design |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <XAxis | ||
| dataKey="date" | ||
| tickFormatter={formatXAxis} | ||
| tickLine={false} | ||
| axisLine={false} | ||
| tickMargin={4} | ||
| minTickGap={16} | ||
| minTickGap={48} | ||
| style={{ fontSize: '10px', userSelect: 'none' }} |
There was a problem hiding this comment.
The ChildAreaChart is missing the CartesianGrid component and uses a different minTickGap value (48) compared to ChildBarChart and ChildLineChart which both have CartesianGrid and use minTickGap of 16. This creates visual inconsistency between chart types. Consider either adding CartesianGrid and using minTickGap={16} to match the other chart types, or if the different styling is intentional for area charts, document why area charts should have different visual treatment than bar and line charts.
abelanger5
left a comment
abelanger5
left a comment
There was a problem hiding this comment.
While I am a fan of having this take up less space, I'm not a fan of the smoothing behavior here, I think it's helpful to see the discrete buckets. Is it possible to shrink it without changing the chart type?
|
yep! wdyt of this? 
|
mrkaye97
changed the title
Description
I think we can reduce the amount of vertical space that the run graph over time takes by doing something like this. Happy to just close it too, but thought it was worth a shot since right now this graph takes up like 1/3 of the vertical space we have
Type of change