You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "msyavuz (via GitHub)" <gi...@apache.org> on 2025/07/18 16:20:44 UTC
[PR] fix(Chart): Calculate chart height correctly [superset]
msyavuz opened a new pull request, #34224:
URL: https://github.com/apache/superset/pull/34224
<!---
Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/
Example:
fix(dashboard): load charts correctly
-->
### SUMMARY
<!--- Describe the change below, including rationale and design decisions -->
When applying a filter to a chart that has multiple tabs charts on other tabs had their x-axis invisible due to incorrect height calculation. This fixes that by providing the correct header height.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
<!--- Skip this if not applicable -->
Before:
https://github.com/user-attachments/assets/7441e59f-7499-4043-a76a-f14fc076c9a1
After:
https://github.com/user-attachments/assets/fbdf5862-2532-448f-a21f-e3ae89de5146
### TESTING INSTRUCTIONS
<!--- Required! What steps can be taken to manually verify the changes? -->
1. Open the Sales Dashboard
2. Move between tabs and apply filters to observe height doesn't change
### ADDITIONAL INFORMATION
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ ] 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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(Chart): Calculate chart height correctly [superset]
Posted by "geido (via GitHub)" <gi...@apache.org>.
geido merged PR #34224:
URL: https://github.com/apache/superset/pull/34224
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(Chart): Calculate chart height correctly [superset]
Posted by "korbit-ai[bot] (via GitHub)" <gi...@apache.org>.
korbit-ai[bot] commented on code in PR #34224:
URL: https://github.com/apache/superset/pull/34224#discussion_r2216438897
##########
superset-frontend/src/dashboard/components/gridComponents/Chart.jsx:
##########
@@ -213,11 +213,15 @@
const getHeaderHeight = useCallback(() => {
if (headerRef.current) {
- const computedStyle = getComputedStyle(
+ const computedMarginBottom = getComputedStyle(
headerRef.current,
).getPropertyValue('margin-bottom');
- const marginBottom = parseInt(computedStyle, 10) || 0;
- return headerRef.current.offsetHeight + marginBottom;
+ const marginBottom = parseInt(computedMarginBottom, 10) || 0;
+ const computedHeight = getComputedStyle(
+ headerRef.current,
+ ).getPropertyValue('height');
+ const height = parseInt(computedHeight, 10) || DEFAULT_HEADER_HEIGHT;
Review Comment:
### Invalid CSS Height Parsing <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The fallback to DEFAULT_HEADER_HEIGHT when parseInt fails could be incorrect if there's a valid non-pixel CSS height value (e.g., 'auto', '100%', 'inherit')
###### Why this matters
This could lead to incorrect chart height calculations when header heights are specified using non-pixel units, potentially causing rendering issues or visual glitches.
###### Suggested change ∙ *Feature Preview*
Replace with a more robust height calculation that considers non-pixel values:
```javascript
const height = computedHeight === 'auto' || computedHeight.endsWith('%')
? headerRef.current.offsetHeight
: parseInt(computedHeight, 10) || DEFAULT_HEADER_HEIGHT;
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/76087eaf-02a5-412e-8996-786b4adac4a0/upvote) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/76087eaf-02a5-412e-8996-786b4adac4a0?what_not_true=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/76087eaf-02a5-412e-8996-786b4adac4a0?what_out_of_scope=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/76087eaf-02a5-412e-8996-786b4adac4a0?what_not_in_standard=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/76087eaf-02a5-412e-8996-786b4adac4a0)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:c1a18160-b86f-4e52-a217-43ff0f0581d0 -->
[](c1a18160-b86f-4e52-a217-43ff0f0581d0)
##########
superset-frontend/src/dashboard/components/gridComponents/Chart.jsx:
##########
@@ -213,11 +213,15 @@ const Chart = props => {
const getHeaderHeight = useCallback(() => {
if (headerRef.current) {
- const computedStyle = getComputedStyle(
+ const computedMarginBottom = getComputedStyle(
headerRef.current,
).getPropertyValue('margin-bottom');
- const marginBottom = parseInt(computedStyle, 10) || 0;
- return headerRef.current.offsetHeight + marginBottom;
+ const marginBottom = parseInt(computedMarginBottom, 10) || 0;
+ const computedHeight = getComputedStyle(
+ headerRef.current,
+ ).getPropertyValue('height');
+ const height = parseInt(computedHeight, 10) || DEFAULT_HEADER_HEIGHT;
+ return height + marginBottom;
}
return DEFAULT_HEADER_HEIGHT;
}, [headerRef]);
Review Comment:
### Duplicated Style Computation Logic <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The getHeaderHeight function contains repeated calls to getComputedStyle which could be extracted into a reusable helper function.
###### Why this matters
Having duplicate getComputedStyle logic makes the code less maintainable and violates the DRY principle. Future changes would need to be made in multiple places.
###### Suggested change ∙ *Feature Preview*
Extract the getComputedStyle logic into a reusable helper function:
```javascript
const getComputedStyleValue = (element, property) => {
const value = getComputedStyle(element).getPropertyValue(property);
return parseInt(value, 10) || 0;
};
const getHeaderHeight = useCallback(() => {
if (headerRef.current) {
const marginBottom = getComputedStyleValue(headerRef.current, 'margin-bottom');
const height = getComputedStyleValue(headerRef.current, 'height') || DEFAULT_HEADER_HEIGHT;
return height + marginBottom;
}
return DEFAULT_HEADER_HEIGHT;
}, [headerRef]);
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/20a06e0b-7f30-4c46-8d22-7e6614b646e9/upvote) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/20a06e0b-7f30-4c46-8d22-7e6614b646e9?what_not_true=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/20a06e0b-7f30-4c46-8d22-7e6614b646e9?what_out_of_scope=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/20a06e0b-7f30-4c46-8d22-7e6614b646e9?what_not_in_standard=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/20a06e0b-7f30-4c46-8d22-7e6614b646e9)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:e84f216e-b993-4233-93cc-f6cf6f3ba480 -->
[](e84f216e-b993-4233-93cc-f6cf6f3ba480)
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(Chart): Calculate chart height correctly [superset]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #34224:
URL: https://github.com/apache/superset/pull/34224#issuecomment-3090016678
@geido Ephemeral environment spinning up at http://35.91.74.66:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] fix(Chart): Calculate chart height correctly [superset]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #34224:
URL: https://github.com/apache/superset/pull/34224#issuecomment-3090000089
@geido Processing your ephemeral environment request [here](https://github.com/apache/superset/actions/runs/16375462391). Action: **up**. More information on [how to use or configure ephemeral environments](https://superset.apache.org/docs/contributing/howtos/#github-ephemeral-environments)
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org