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 |
dosubot
Bot
added
viz:charts:echarts
EnxDev
added
testenv-up
and removed
viz:charts:echarts
codeant-ai-for-open-source
Bot
added
the
size:M
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 |
![codeant-ai-for-open-source[bot]](https://avatars.githubusercontent.com/u/151810221?s=60&v=4){kind=small}
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 |
sadpandajoe
added
🎪 ⚡ showtime-trigger-start
|
The application is working as expected. ScenarioThe Y axis ticks/lines appear correctly in Matrixify. Steps
Current resultAfter the step 3, the Y axis ticks/lines appear correctly in Matrixify. Variants
NOTE: the numbers on the Y Axis of each chart starting appearing at "Row height"=62. Testing chart examplechart_export_20260316T112054.zip EvidenceRow height 60 Row height 90 Row height 120 |
codeant-ai-for-open-source
Bot
added
size:L
github-actions
Bot
removed
the
🎪 ⚡ showtime-trigger-start
github-actions
Bot
added
🎪 7225ed1 🚦 building
| // Preserve bottom padding when zoomable, since getPadding() reserves space for the dataZoom slider. | ||
| if (height < TIMESERIES_CONSTANTS.compactChartHeight) { | ||
| padding.top = Math.min(padding.top, 12); | ||
| if (!zoomable) { |
There was a problem hiding this comment.
Suggestion: In compact mode the legend is hidden later, but padding is still computed as if the legend is visible, so the chart can keep large reserved margins (especially with left/right legends) and lose plot area. Recompute compact padding with legend disabled so the drawing area actually expands. [logic error]
Severity Level: Major ⚠️
- ⚠️ Compact charts waste space reserved for hidden legend.
- ⚠️ Reduced plot area in dense dashboard layouts.| if (!zoomable) { | |
| const compactPadding = getPadding( | |
| false, | |
| legendOrientation, | |
| addYAxisLabelOffset, | |
| zoomable, | |
| effectiveLegendMargin, | |
| addXAxisLabelOffset, | |
| yAxisTitlePosition, | |
| convertInteger(yAxisTitleMargin), | |
| convertInteger(xAxisTitleMargin), | |
| isHorizontal, | |
| ); | |
| Object.assign(padding, compactPadding); |
Steps of Reproduction ✅
1. Configure an ECharts time-series chart that uses `transformProps` (default export of
`superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts`) with
`showLegend = true` and a non-null `legendMargin`, and place it in a dashboard cell whose
height is below `TIMESERIES_CONSTANTS.compactChartHeight` (compact mode).
2. In `transformProps`, `padding` is first computed via `getPadding(showLegend,
legendOrientation, addYAxisLabelOffset, zoomable, effectiveLegendMargin,
addXAxisLabelOffset, ...)` (lines ~815–825), which reserves space for the legend based on
`showLegend` and `legendOrientation`.
3. Immediately after, the compact-mode block (lines 831–835) only clamps `padding.top` and
`padding.bottom` but does not recompute padding with `showLegend = false`, while the
legend configuration later passes `isSmallChart ? false : showLegend` into
`getLegendProps` (lines ~1097–1105), effectively hiding the legend in compact mode without
clearing the reserved padding.
4. Render the chart in the browser: the legend is not shown for compact heights, but the
grid (`grid: { ...defaultGrid, ...padding }` near the end of `transformProps`) still
includes space that had been reserved for the legend (especially on the side where the
legend orientation is configured), reducing the actual plot area available for the
time-series lines/bars.Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
**Line:** 832:832
**Comment:**
*Logic Error: In compact mode the legend is hidden later, but `padding` is still computed as if the legend is visible, so the chart can keep large reserved margins (especially with left/right legends) and lose plot area. Recompute compact padding with legend disabled so the drawing area actually expands.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
github-actions
Bot
added
🎪 7225ed1 🚦 deploying
|
🎪 Showtime deployed environment on GHA for 7225ed1 • Environment: http://54.244.96.75:8080 (admin/admin) |
4 participants
User description
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
Make compact timeseries charts easier to read in tight spaces
What Changed
Impact
✅ Clearer small dashboard charts✅ Fewer overlapping labels in dense layouts✅ Easier scale reading on compact charts💡 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.