rlei-odes opened a new pull request, #43661:
URL: https://github.com/apache/superset/pull/43661
### SUMMARY
On a bar chart with **Orientation: Horizontal** and a time x-axis, the first
date label sits out of line with the rest and is partly cut off. Every other
label on that axis is fine.
The cause is an alignment written for a bottom axis being applied to one that
has moved to the side. The transform forces the boundary labels on a time
axis
so the first and last dates stay visible, and aligns them inward so they do
not
overhang the plot area:
```ts
...(showMaxLabel && {
showMaxLabel: true,
alignMaxLabel: 'right',
showMinLabel: true,
alignMinLabel: 'left',
}),
```
`alignMinLabel: 'left'` / `alignMaxLabel: 'right'` are horizontal text
alignments, correct for an axis running along the bottom: they pull the first
and last labels inward, away from the left and right edges.
But the condition that emits them tests the axis *type*, never the
orientation:
```ts
const showMaxLabel =
xAxisType === AxisType.Time && xAxisLabelRotation === 0 &&
!!resolvedTimeGrain;
```
A horizontal chart then swaps the axes (`[xAxis, yAxis] = [yAxis, xAxis]`),
so
that block lands on a **vertical** axis, where labels normally sit
right-aligned
against the axis line. Re-anchoring the minimum label to `'left'` shifts it
out
of column with its neighbours. Only the minimum receives `alignMinLabel`,
which
is why only the first label moves.
The fix keeps `showMinLabel`/`showMaxLabel` in both orientations — forcing
the
boundary dates visible is wanted either way — and applies the alignment only
when the axis is actually along the bottom. There is precedent a few lines
below, where the rotated-label padding compensation is already guarded with
`!isHorizontal`.
Vertical charts are unaffected: `!isHorizontal` is true there, so both
spreads
apply and the axis receives the same four properties as before.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Every label is identically right-aligned in both, except the bottom one:
clipped to "2…" before, a clean "2003" after.
<img width="882" height="1197" alt="label_misplaced_before_after"
src="https://github.com/user-attachments/assets/501ab332-bbe7-45ee-8c9a-ce7e967935b4";
/>
### TESTING INSTRUCTIONS
Unit test: `npm run test --
plugins/plugin-chart-echarts/test/Timeseries/transformProps`
Manually:
1. Build a Bar chart on a temporal column with a time grain set (Month
works),
leave **X Axis label rotation** at 0, and set **Orientation: Horizontal**.
The first date label lines up with the others.
2. On master, the same chart shows that label shifted sideways and partly cut
off.
3. Switch back to **Vertical** and confirm nothing has changed: the first and
last labels are still pulled inward, away from the chart edges.
4. Set **X Axis label rotation** to a non-zero value in either orientation.
Boundary labels are not forced at all in that case, before or after this
change.
Note the rotation control is a quick way to confirm the diagnosis rather than
part of the fix: a non-zero rotation makes `showMaxLabel` false, which
disables
the whole block.
### ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [ ] 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]
