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

Center value in number visualization properly. #12424

Merged
merged 2 commits into from Apr 11, 2022

Conversation

dennisoelkers
Copy link
Member

@dennisoelkers dennisoelkers commented Apr 8, 2022

Description

Motivation and Context

Prior to this PR, the number visualization of the search did not properly center the values it displays. Values were slightly misaligned towards the top of the widget.

This change is now making sure that values in a number visualization are always centered vertically and horizontally.

How Has This Been Tested?

Screenshots (if appropriate):

Before:

image

image

After:

image

image

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.

height: 100%;
width: 100%;
font-size: ${(props) => `${props.fontSize}px`};
${(props) => (props.$center ? `
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's use css from styled-components for the template string, this way stylelint and e.g. the css autocompletion will work properly.

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks! :)

@dennisoelkers dennisoelkers force-pushed the fix/properly-center-value-in-number-vis branch from e060dd0 to 4393c71 Compare April 8, 2022 13:19
@linuspahl linuspahl merged commit 18bb168 into master Apr 11, 2022
@linuspahl linuspahl deleted the fix/properly-center-value-in-number-vis branch April 11, 2022 14:06
linuspahl pushed a commit that referenced this pull request Apr 11, 2022
* Center value in number visualization properly.

* Using `css` to generate CSS from template string.
linuspahl pushed a commit that referenced this pull request Apr 11, 2022
* Center value in number visualization properly.

* Using `css` to generate CSS from template string.
linuspahl pushed a commit that referenced this pull request Apr 11, 2022
* Center value in number visualization properly.

* Using `css` to generate CSS from template string.
dennisoelkers added a commit that referenced this pull request Apr 12, 2022
* Center value in number visualization properly.

* Using `css` to generate CSS from template string.

Co-authored-by: Dennis Oelkers <dennis@graylog.com>
dennisoelkers added a commit that referenced this pull request Apr 12, 2022
* Center value in number visualization properly.

* Using `css` to generate CSS from template string.

Co-authored-by: Dennis Oelkers <dennis@graylog.com>
dennisoelkers added a commit that referenced this pull request Apr 12, 2022
* Center value in number visualization properly.

* Using `css` to generate CSS from template string.

Co-authored-by: Dennis Oelkers <dennis@graylog.com>
linuspahl pushed a commit that referenced this pull request Apr 21, 2022
* Center value in number visualization properly.

* Using `css` to generate CSS from template string.
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.

None yet

2 participants