github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[TSVB] Multi-metric gauge doesn't like vertical sizing (#33245) (#33286)

Browse source
This commit is contained in:
Alexey Antonov 2019-03-15 11:39:42 +03:00 • committed by GitHub
parent 8bf9ccbb1a
commit 6e7877915c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/legacy/core_plugins/metrics/public/_variables.scss
View file

@ -9,3 +9,5 @@ $tvbValueColorReversed: transparentize($euiColorEmptyShade, .2);
$tvbHoverBackgroundColor: transparentize($euiColorFullShade, .9);
$tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade, .9);
$tvbSplitBlockVisMinSize: $euiSize * 12;

22
src/legacy/core_plugins/metrics/public/components/_vis_with_splits.scss
View file

@ -1,11 +1,25 @@
.tvbSplitVis {
width: 100%;
display: flex;
flex: 1 0 auto;
// Allow wrapping beyond 4 in a row
flex-wrap: wrap;
// Space out each vis instead of clumping in the center to utilize more hoizontal space
justify-content: space-around;
// Stretch the all the heights so that prior to wrapping the vis' take up the full panel height
align-items: stretch;
}
.tvbSplitVis__split {
// This maintains that each vis will be at least 1/4 of the panel's width
// but it will also grow to fill the space if there are less than 4 in a row
flex: 1 0 25%;
// Ensure a minimum width is acheived on smaller width panels
min-width: $tvbSplitBlockVisMinSize;
display: flex;
flex: 1 0 0;
flex-direction: column;
overflow: hidden;
> .tvbVis {
// Apply the minimum height on the vis itself so it doesn't interfere with flex calculations
// Gauges are not completely square, so the height is just slightly less than the width
min-height: $tvbSplitBlockVisMinSize / 1.25;
}
}