Skip to content

Hide gauge labels when value is hidden - #34171

Merged
timroes merged 4 commits into
elastic:masterfrom
timroes:fix-gauge-labels
Apr 1, 2019
Merged

timroes merged 4 commits into
elastic:masterfrom
timroes:fix-gauge-labels

Conversation

@timroes

@timroes timroes commented Mar 29, 2019 •

Copy link
Copy Markdown
Contributor

Summary

Fixes #33110.

The behavior described in this issue was actually present since forever, it was just triggered now most likely for Bhavya, because we changed the font in 7.0, thus leading to different widths of elements and triggering that. I've actually seen the same behavior on other machines with the same sample data already in 6.7.

Until now the Gauge chart checked for each of the possible three labels (above value, value, below value) independently if they fit within the gauge and hide them if not. I think that behavior is very weird, since it leaves you with charts, like Bhavya reported, where you only have the "below value" label which kind of looks like the chart is just broken and the value is missing.

I changed the behavior now in a way, that each of the above/below labels can be hidden individually if they don't fit, but as soon as the value label is hidden, those the below label will always be hidden too, so it never stay there as long as the value label are hidden. The above value actually will still show independently, since it's used to show the label e.g. for a chart split that makes sense to also show without the value.

You can see in the below screencast, that the "average spend" vanishes as soon as it doesn't have space anymore, and the "per order" even though it would have space vanishes together with the value itself.

gauge

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

For maintainers

@timroes timroes added release_note:fix v7.0.0 Feature:Gauge Vis Gauge and goal visualization Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v8.0.0 v7.2.0 labels Mar 29, 2019
@elasticmachine

Copy link
Copy Markdown
Contributor

Pinging @elastic/kibana-app

});
}

gauges

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This (value label) has just been moved above the other two labels, so we know whether or not that's shown.

@elasticmachine

Copy link
Copy Markdown
Contributor

💔 Build Failed

@ppisljar ppisljar left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

code LGTM

@timroes

timroes commented Apr 1, 2019

Copy link
Copy Markdown
Contributor Author

I actually modified the behavior slightly. Since the label above the value is usually shown for the labels of "Split Group" it makes sense to have that even if the value label doesn't fit anymore. That was also what the test failed on. So I decided to only hide the below value label in case the value cannot be shown anymore.

@elasticmachine

Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@markov00

markov00 commented Apr 1, 2019 •

Copy link
Copy Markdown
Contributor

@timroes I've also seen something else that can prevent us from hiding labels too early

 const textTooLong = textLength > maxRadius;

For each text, the textTooLong computes as the above mean that we will display the text only of the text width is less than the radius and not less than the diameter, that I think it's what we want.
This is with existing and your PR:
Screenshot 2019-04-01 at 13 06 06

and this is specifying the following: (btw I'm not sure the totalWidth is the right value to use, I mean we need that check against the diameter - 2 times the width of the gauge path.

const textTooLong = textLength > (2 * maxRadius  - 2 * totalWidth);

Screenshot 2019-04-01 at 13 06 32

Apr-01-2019 13-12-27

@markov00 markov00 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code LGTM. Tested locally on chrome, safari and firefox and works fine.

@elasticmachine

Copy link
Copy Markdown
Contributor

💔 Build Failed

@elasticmachine

Copy link
Copy Markdown
Contributor

💔 Build Failed

@timroes

timroes commented Apr 1, 2019

Copy link
Copy Markdown
Contributor Author

Jenkins, test this - CI failure

@elasticmachine

Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@timroes
timroes merged commit 71e61e3 into elastic:master Apr 1, 2019
@timroes
timroes deleted the fix-gauge-labels branch April 1, 2019 16:04
timroes added a commit to timroes/kibana that referenced this pull request Apr 1, 2019
* Hide gauge labels when value is hidden

* Only hide subtext when value is hidden

* Use better free space calculation

* Fix tests
timroes added a commit to timroes/kibana that referenced this pull request Apr 1, 2019
* Hide gauge labels when value is hidden

* Only hide subtext when value is hidden

* Use better free space calculation

* Fix tests
timroes added a commit that referenced this pull request Apr 2, 2019
* Hide gauge labels when value is hidden

* Only hide subtext when value is hidden

* Use better free space calculation

* Fix tests
timroes added a commit that referenced this pull request Apr 2, 2019
* Hide gauge labels when value is hidden

* Only hide subtext when value is hidden

* Use better free space calculation

* Fix tests
patrykkopycinski pushed a commit to patrykkopycinski/kibana that referenced this pull request May 6, 2026
* Hide gauge labels when value is hidden

* Only hide subtext when value is hidden

* Use better free space calculation

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

Labels

Feature:Gauge Vis Gauge and goal visualization release_note:fix Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.0.0 v7.2.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants