Skip to content

fix(GlSparklineChart): Render flat lines with gradient enabled

Alex Pennells requested to merge 471586-fix-flat-sparklines into main

What does this MR do?

When using the optional GlSparklineChart.gradient prop, if the input line is flat (same value for each data point) then the sparkline will not render. As far as I can tell, this behaviour may be related to the SVG element. The gradientUnits attribute defaults to objectBoundingBox, which appears to describe a similar shortcoming:

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

Since there doesn't seem to be a workaround for this via the ECharts API, this change will detect this scenario and disable the gradient. Instead of the gradient being applied, the first gradient value will be used as the colour for the entire line.

Screenshots or screen recordings

Before After
Screenshot_2024-07-16_at_9.08.24_PM Screenshot_2024-07-16_at_9.07.57_PM

Integration merge requests

Does this MR meet the acceptance criteria?

This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.

Toggle the acceptance checklist

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidelines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above).
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

  • All actions and functionality can be done with a keyboard.
  • Links, buttons, and controls have a visible focus state.
  • All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • Color combinations have sufficient contrast.
Edited by Alex Pennells

Merge request reports