maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Wrap long text inside of TSVB chart tooltip. (#39630)

Browse source
This commit is contained in:
CJ Cenizal 2019-06-26 06:31:47 -07:00 committed by GitHub
parent 6c431e22e9
commit 32b67785b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss
View file

@ -98,10 +98,27 @@
display: flex;
}
/**
* 1. Ensure tvbTooltip__label text wraps nicely.
* 2. Create consistent space between the dot icon and the label.
*/
.tvbTooltip__labelContainer {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
min-width: 1px; /* 1 */
margin-left: $euiSizeXS; /* 2 */
}
/**
* 1. Ensure text wraps nicely.
*/
.tvbTooltip__label {
flex-grow: 1;
margin-left: $euiSizeXS;
margin-right: $euiSizeXS;
word-wrap: break-word; /* 1 */
overflow-wrap: break-word; /* 1 */
min-width: 1px; /* 1 */
}
.tvbTooltip__icon,

6
src/legacy/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
View file

@ -162,8 +162,10 @@ export class TimeseriesChart extends Component {
</div>
<div className="tvbTooltip__item">
<EuiIcon className="tvbTooltip__icon" type="dot" color={item.series.color} />
<div className="tvbTooltip__label">{item.series.label}</div>
<div className="tvbTooltip__value">{formatter(value)}</div>
<div className="tvbTooltip__labelContainer">
<div className="tvbTooltip__label">{item.series.label}</div>
<div className="tvbTooltip__value">{formatter(value)}</div>
</div>
</div>
</div>
</div>