fix(echarts): adapt y-axis ticks and padding for compact timeseries charts#38673
fix(echarts): adapt y-axis ticks and padding for compact timeseries charts#38673
Conversation
Code Review Agent Run #b0e47fActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
Sequence DiagramThis PR updates timeseries option generation to adapt chart padding and y axis rendering based on chart height tiers. The flow ensures compact and micro charts hide nonessential axis and legend elements so the plot remains readable in dense dashboard layouts. sequenceDiagram
participant User
participant Chart
participant TransformProps
participant ECharts
User->>Chart: Resize chart to a smaller height
Chart->>TransformProps: Build timeseries options with current height
TransformProps->>TransformProps: Apply height thresholds from timeseries constants
alt Height is at least 100
TransformProps->>TransformProps: Use proportional y axis ticks and keep legend
else Height is 60 to 99
TransformProps->>TransformProps: Reduce padding and hide y axis lines ticks and title
else Height is below 60
TransformProps->>TransformProps: Hide y axis labels and other decorations
end
TransformProps-->>ECharts: Return responsive chart options
ECharts-->>User: Render readable compact timeseries chart
Generated by CodeAnt AI |
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
Show resolved
Hide resolved
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
Outdated
Show resolved
Hide resolved
Code Review Agent Run #2d6b47Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
SUMMARY
When timeseries charts are rendered at small heights common in dense dashboard layouts with matrix/grid arrangements — the y-axis labels, ticks, and legends compete for the limited vertical space, often overlapping each other and making the chart unreadable.
This PR introduces a three-tier responsive behavior for the y-axis based on chart height:
Math.floor(height / 80), minimum 3), ensuring the number of axis labels scales naturally with chart size rather than using a fixed count that may crowd or underwhelm.BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION
CodeAnt-AI Description
Adapt y-axis ticks and padding for compact timeseries charts
What Changed
Impact
✅ Fewer overlapping y-axis labels on small charts✅ Clearer micro and compact timeseries visuals in dense dashboards✅ More usable plot area for tiny chart cells💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.