s1ny1998 opened a new pull request, #43064:
URL: https://github.com/apache/superset/pull/43064
### SUMMARY
On mobile, timeseries charts render with a large blank strip on the left:
the plot area starts roughly a third of the way into the card, well outside the
tick labels.
The cause is in `getPadding()`
(`plugins/plugin-chart-echarts/src/Timeseries/transformers.ts`):
```ts
left:
yAxisTitlePosition === 'Left'
? TIMESERIES_CONSTANTS.gridOffsetLeft + (Number(yAxisTitleMargin) || 0)
: TIMESERIES_CONSTANTS.gridOffsetLeft,
```
The Y-axis title margin is added whenever the title position is `'Left'`,
without checking that a title is actually rendered. The control defaults
(`sections/chartTitle.tsx`) are position `'Left'` and margin `50`, so every
chart with an empty `y_axis_title` — the default — reserves `20 + 50 = 70px` on
the left. Because `grid.containLabel` is enabled, that reservation sits
*outside* the axis labels, so it is pure dead space.
The guard already exists: callers compute `addYAxisTitleOffset =
!!yAxisTitle && convertInteger(yAxisTitleMargin) !== 0`, and the `'Top'`
position branch consumes it. Only the `'Left'` branch ignored it.
Changes:
- Gate the left title margin on `addYAxisTitleOffset`. Charts with a Y-axis
title keep exactly the spacing they have today; charts without one reclaim 50px
of plot area.
- `Gantt/transformProps.ts` hardcoded `false` for that flag at both
`getPadding()` call sites while relying on the `'Left'` branch for its left
padding, so it now computes the flag properly and passes it to both. Without
this, Gantt charts that do have a title would lose their title padding.
- Add a `getPadding()` unit test for the no-title case.
Affected chart families: Timeseries (line/bar/area/scatter/smooth), Mixed
Timeseries, Box Plot, Gantt. Bubble already passed `true` unconditionally and
is unchanged.
This is negligible on wide desktop charts and very visible on narrow ones,
which is why it surfaced in mobile consumption mode.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
_Before:_ plot area begins ~95px into a ~320px-wide mobile chart (70px
reserved margin + tick-label width), leaving the series squeezed into the right
portion of the card.
_After:_ only `gridOffsetLeft` (20px) plus the tick-label width is reserved,
and the series fills the card.
### TESTING INSTRUCTIONS
1. Open any timeseries line chart on a dashboard and leave **Customize →
Chart Title → Y Axis Title** empty (the default).
2. View the dashboard at a mobile width (~390px). The plot area should start
just after the Y-axis tick labels, with no blank strip before them.
3. Set a **Y Axis Title** with position `Left` and a non-zero margin. The
reserved space returns and the rotated title renders inside it, unchanged from
before.
4. Repeat step 3 with position `Top` to confirm top spacing is untouched.
5. Check a Gantt chart both with and without a Y-axis title.
Unit tests:
```
npm run test -- plugins/plugin-chart-echarts/test
```
56 suites / 655 tests pass, including the new `getPadding` case.
### ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
