fix(echarts-timeseries): make dataZoom slider bottom offset responsive (#37286)#38657
fix(echarts-timeseries): make dataZoom slider bottom offset responsive (#37286)#38657manojshetty2004 wants to merge 1 commit intoapache:masterfrom
Conversation
codeant-ai-for-open-source
bot
added
the
size:XS
dosubot
bot
added
viz:charts:echarts
Sequence DiagramThis PR updates the time series chart option builder to compute the data zoom slider bottom offset from chart height instead of always using a fixed value. The result is that zoom controls stay visible in shorter chart panels while preserving the previous minimum spacing. sequenceDiagram
participant User
participant Chart
participant TransformProps
participant ECharts
User->>Chart: Open small time series panel with zoom enabled
Chart->>TransformProps: Build chart options with panel height
TransformProps->>TransformProps: Compute zoom bottom as max of minimum and height based offset
TransformProps-->>Chart: Return options with data zoom slider bottom
Chart->>ECharts: Render chart using updated options
ECharts-->>User: Show visible zoom slider in panel
Generated by CodeAnt AI |
![bito-code-review[bot]](https://avatars.githubusercontent.com/in/1061978?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review Agent Run #eb5663
Actionable Suggestions - 1
-
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts - 1
- Inconsistent zoom bottom across charts · Line 802-805
Review Details
-
Files reviewed - 1 · Commit Range:
1abdd35..1abdd35- superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
-
Files skipped - 0
-
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
- Eslint (Linter) - ✔︎ Successful
Bito Usage Guide
Commands
Type the following command in the pull request comment and save the comment.
-
/review- Manually triggers a full AI review. -
/pause- Pauses automatic reviews on this pull request. -
/resume- Resumes automatic reviews. -
/resolve- Marks all Bito-posted review comments as resolved. -
/abort- Cancels all in-progress reviews.
Refer to the documentation for additional commands.
Configuration
This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.
Documentation & Help
AI Code Review powered by
| const dynamicZoomBottom = Math.max( | ||
| TIMESERIES_CONSTANTS.zoomBottom, | ||
| Math.floor(height * 0.08), | ||
| ); |
There was a problem hiding this comment.
The change introduces a dynamic zoom bottom calculation for Timeseries charts based on height, but Gantt and MixedTimeseries charts still use the fixed TIMESERIES_CONSTANTS.zoomBottom value. This creates inconsistency in zoom control positioning across different chart types, potentially leading to a confusing user experience. Consider applying the same dynamic calculation to other chart types for consistency.
Code Review Run #eb5663
Should Bito avoid suggestions like this for future reviews? (Manage Rules)
- Yes, avoid them
1 participant
User description
SUMMARY
This change makes the
dataZoomslider bottom offset responsive to the chart height in ECharts time-series charts.Previously, the slider used a fixed offset:
TIMESERIES_CONSTANTS.zoomBottom
In smaller chart panels or dashboards with limited height, this could cause the zoom slider to appear clipped or overflow outside the visible chart area.
This PR replaces the fixed offset with a responsive calculation based on the chart height:
Math.max(TIMESERIES_CONSTANTS.zoomBottom, Math.floor(height * 0.08))
This ensures:
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
The zoom slider could overflow or appear clipped when the chart panel height is small.
After:
The zoom slider position adjusts dynamically based on chart height and remains visible.
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION
CodeAnt-AI Description
Make dataZoom slider position responsive to chart height
What Changed
Impact
✅ Zoom slider remains visible in small panels✅ Fewer clipped or overflowing chart controls✅ Clearer zoom interaction on compact dashboards💡 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.