Skip to content

Fix/multi y axis clip - #321

Open
colivi wants to merge 9 commits into
perses:mainfrom
colivi:fix/multi-y-axis-clip
Open

colivi wants to merge 9 commits into
perses:mainfrom
colivi:fix/multi-y-axis-clip

Conversation

@colivi

@colivi colivi commented Sep 25, 2026

Copy link
Copy Markdown
Contributor

Description

Right-side multi-Y axes with "offset > 0" sit outside ECharts "containLabel", so the outermost axis tick labels were clipped (including fullscreen).

Changes

  • "getFormattedMultipleYAxesLayout()" always accumulates per-axis label widths and returns "rightGridPadding" for "grid.right"
  • "getFormattedMultipleYAxes()" kept as a thin wrapper (compat)
  • Unit tests for layout / padding

Follow-up

timeserieschart should set "grid.right" from this padding (see companion plugins PR perses/plugins#837).

Checklist

  • Pull request has a descriptive title and context useful to a reviewer.
  • Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
    following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
  • All commits have DCO signoffs.

ECharts containLabel does not cover right axes with offset>0, so the
outermost axis tick labels were clipped. Return rightGridPadding from
layout helper and always accumulate per-axis label widths.

Signed-off-by: colivi <charles.olivi@gmail.com>
Signed-off-by: colivi <charles.olivi@gmail.com>
Signed-off-by: colivi <charles.olivi@gmail.com>
Signed-off-by: colivi <charles.olivi@gmail.com>
@colivi
colivi requested a review from a team as a code owner September 25, 2026 20:17
@shahrokni
shahrokni requested review from shahrokni and removed request for a team September 28, 2026 07:52
Comment thread components/src/utils/axis.ts Outdated
Comment on lines +33 to +36
const fallback = Math.max(formattedLabel.length * CHAR_WIDTH_BASE, 28);
if (typeof document === 'undefined') {
return fallback;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 28 is a Magic number, it should be replaced with a descriptive const variable. Why 28 is the appropriate value?
  • fallback is a vague name. It should be replaced with fallbackLabelWidth

additionalFormats.forEach((format, index) => {
const rightAxisConfig: YAXisComponentOption = {
const labelWidth = estimateLabelWidth(format, maxValues?.[index] ?? 1000) + AXIS_LABEL_PADDING;
axes.push({

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using magic number.

Comment thread components/src/utils/axis.ts Outdated
Comment on lines +117 to +118
axes,
rightGridPadding: cumulativeOffset > 0 ? cumulativeOffset : 20,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using magic number.

@jgbernalp

Copy link
Copy Markdown
Contributor

@colivi this changes the UI, please attach screenshots of the before and after

Rename fallback width and extract MIN_AXIS_LABEL_WIDTH,
DEFAULT_AXIS_MAX_VALUE, and DEFAULT_RIGHT_GRID_PADDING.

Signed-off-by: colivi <charles.olivi@gmail.com>
@shahrokni

Copy link
Copy Markdown
Contributor

@colivi this changes the UI, please attach screenshots of the before and after

@colivi

@colivi

colivi commented Oct 2, 2026

Copy link
Copy Markdown
Contributor Author

Hello,
2 pictures, before and after, same in perses/plugins#837

before-narrow after-narrow

colivi added 2 commits October 2, 2026 17:10
MIN_AXIS_LABEL_WIDTH is four average characters, which answers the
review note on the previous literal 28. 1000 and 20 stay named
DEFAULT_AXIS_MAX_VALUE and DEFAULT_RIGHT_GRID_PADDING.

Signed-off-by: colivi <charles.olivi@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

3 participants