Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable trim and wrap feature to axis label #1905

Open
wants to merge 14 commits into
base: master
Choose a base branch
from

Conversation

kedij777
Copy link

@kedij777 kedij777 commented Oct 18, 2023

What kind of change does this PR introduce? (check one with "x")

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Other... Please describe:

What is the current behavior?
The appearance of the long axis label is visually unappealing.
Issue #1904

What is the new behavior?
Applied the following feature to Vertical Bar chart and horizontal Bar chart

  1. Trim X/Y axis label according to max label length [click Show X/Y Axis Label, Trim X/Y Axis Label, and specify Max X/Y Label Length], full label text will be displayed if user hover to the label.
image
  1. Wrap X/Y axis label according to max label length [click Show X/Y Axis Label, Wrap X/Y Axis Label, and specify Max X/Y Label Length]
image
  1. Auto-wrap X/Y axis label according to graph's axis length and word [click Show X/Y Axis Label, Wrap X/Y Axis Label, and not specify Max X/Y Label Length or set it to 0] image

Does this PR introduce a breaking change? (check one with "x")

  • Yes
  • No

@kedij777 kedij777 marked this pull request as draft October 19, 2023 03:30
@kedij777 kedij777 marked this pull request as ready for review October 19, 2023 03:37
@Lyq322
Copy link

Lyq322 commented Dec 24, 2023

X axis label is moved down when wrap x axis label is enabled. The distance between the top of the x axis label and the bottom of the chart should be the same for when wrap is enabled and disabled.
Wrap enabled:
Screenshot 2023-12-24 at 2 54 10 PM
Wrap disabled:
Screenshot 2023-12-24 at 2 54 20 PM

Same thing happens to the y axis label. The distance between the right of the y axis label and the left of the chart should be the same for when wrap is enabled and disabled.
Wrap enabled:
Screenshot 2023-12-24 at 3 00 15 PM
Wrap disabled:
Screenshot 2023-12-24 at 3 00 04 PM

@@ -12,6 +12,7 @@ import {
import { XAxisTicksComponent } from './x-axis-ticks.component';
import { Orientation } from '../types/orientation.enum';
import { ViewDimensions } from '../types/view-dimension.interface';
import { select } from 'd3-selection';
Copy link

Choose a reason for hiding this comment

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

Group d3 import with other external imports (eg @angular/core)

// labelLength = number of characters
let labelLength = this.labelText.length;
this.labelTextTemp = this.labelText;
this.maxLabelLength = Number(this.maxLabelLength);
Copy link

Choose a reason for hiding this comment

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

Isn't this.maxLabelLength already a number?

Comment on lines +25 to +27
@Input() maxLabelLength: number;
@Input() trimLabel: boolean;
@Input() wrapLabel: boolean;
Copy link

Choose a reason for hiding this comment

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

What are these inputs for?

kedij777 and others added 11 commits December 24, 2023 17:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants