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

update text inside donut based on highlighted arc #33301

Conversation

Anush2303
Copy link
Contributor

Previous Behavior

New Behavior

Related Issue(s)

  • Fixes #

@Anush2303 Anush2303 marked this pull request as ready for review November 20, 2024 10:08
@Anush2303 Anush2303 requested a review from a team as a code owner November 20, 2024 10:08
Copy link

Pull request demo site: URL

const lineHeight = this._textInsideDonut.getBoundingClientRect().height;
wrapText(this._textInsideDonut, 2 * this.innerRadius);
const lines = this._textInsideDonut.getElementsByTagName('tspan');
const start = -Math.trunc((lines.length - 1) / 2);
Copy link
Contributor

Choose a reason for hiding this comment

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

is this a minus sign?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes

Copy link
Contributor

Choose a reason for hiding this comment

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

This is error prone. Make it -1*Math.trunc

const start = -Math.trunc((lines.length - 1) / 2);
for (let i = 0; i < lines.length; i++) {
lines[i].setAttribute('dy', `${(start + i) * lineHeight}`);
this._textInsideDonut = document.createElementNS(SVG_NAMESPACE_URI, 'text');
Copy link
Contributor

Choose a reason for hiding this comment

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

can we make this part of the template?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@krkshitij can u answer this.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, it can be done. But then all arc paths should be inserted before this text to ensure that the text appears on top when it overflows.

@AtishayMsft
Copy link
Contributor

Make sure the build, test lint steps are passing by running yarn nx run chart-web-components:build and similar for other steps.

@Anush2303 Anush2303 closed this Nov 20, 2024
@Anush2303 Anush2303 reopened this Nov 25, 2024
@Anush2303 Anush2303 closed this Nov 25, 2024
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.

3 participants