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.

Sign up for GitHub

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

Jump to bottom

Add Negative Y Value Support and Example for Vertical Bar Chart #33377

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

Add Negative Y Value Support and Example for Vertical Bar Chart #33377

wants to merge 17 commits into from

Conversation

Anush2303
Copy link
Contributor

@Anush2303 Anush2303 commented Dec 1, 2024 •
edited
Loading

mix of positive and negative y:
image

All negative y:
image

All positive y:
image

All y positive and yMax/yMin set
image

Some y positive, some y negative, yMax/yMin set
image

All y negative, yMax/yMin set
image

Related Issue(s)

  • Fixes #

@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 1, 2024 •
edited
Loading

📊 Bundle size report

✅ No changes found

@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 1, 2024

Pull request demo site: URL

@Anush2303 Anush2303 mentioned this pull request Dec 1, 2024
Closed
@Anush2303 Anush2303 marked this pull request as ready for review December 1, 2024 16:02
@Anush2303 Anush2303 requested a review from a team as a code owner December 1, 2024 16:02
@AtishayMsft
Copy link
Contributor

Test snapshots have changed. It should not change if the negative value prop is not used.

@AtishayMsft
Copy link
Contributor

Add a test for negative values.

@AtishayMsft
Copy link
Contributor

What is the output when all negative and yMax < 0

@Anush2303
Copy link
Contributor Author

What is the output when all negative and yMax < 0

image

@AtishayMsft
Copy link
Contributor

CI build is failing

AtishayMsft
AtishayMsft reviewed Dec 3, 2024
View reviewed changes
packages/charts/react-charting/src/utilities/utilities.ts Outdated
const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset);
const yAxisScale = d3ScaleLinear()
.domain([finalYmin, domainValues[domainValues.length - 1]])
.domain([domainValues[0], domainValues[domainValues.length - 1]])
Copy link
Contributor

Choose a reason for hiding this comment

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

.domain([domainValues[0],

this change looks unnecessary

Copy link
Contributor Author

Choose a reason for hiding this comment

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

domainValues[0] can be less than finalYmin ( for negative y value cases )

AtishayMsft
AtishayMsft reviewed Dec 3, 2024
View reviewed changes
packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx Outdated
@@ -693,25 +700,40 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
const { xBarScale, yBarScale } = this._getScales(containerHeight, containerWidth);
const colorScale = this._createColors();

const baselinePoint = this._yMax < 0 ? this._yMax : 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

this._yMax

This should be < 0 only in case this.props.yMaxValue < 0 and yMax < this.props.yMaxValue

Copy link
Contributor Author

Choose a reason for hiding this comment

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

this._ymax is calculated as max(all y points, this.props.yMaxValue). So won't this._ymax < 0 be sufficient condition?

AtishayMsft
AtishayMsft reviewed Dec 3, 2024
View reviewed changes
packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx Outdated
barHeight = Math.abs(barHeight);
// Calculate threshold for minimum visible bar height
const maxHeightFromBaseline =
this._yMax < 0 ? Math.abs(this._yMin - baselinePoint) : Math.abs(this._yMax - baselinePoint);
Copy link
Contributor

Choose a reason for hiding this comment

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

this._yMin - baselinePoint)

this should be max of (abs(ymin - baseline), abs(ymax - baseline))

Copy link
Contributor Author

@Anush2303 Anush2303 Dec 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

for the case this._ymax<0 , abs(ymin) will always be greater than abs(ymax). Hence we don't need max for this.
But yes, for other case, we must take that. Do you agree?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AtishayMsft AtishayMsft AtishayMsft left review comments

@fabricteam fabricteam fabricteam left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@AtishayMsft AtishayMsft

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Anush2303 @AtishayMsft @fabricteam