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

Add ellipsis to TopN table (#30931) (#33483)

Browse source 
* Add ellipsis to TopN table

* Change max-width calculation from 20% to 35%

* Support window resizing
This commit is contained in:
Daniil Suleiman 2019-03-19 13:31:15 +03:00 • committed by GitHub
parent f126b4fc5f
commit 8abb75f3d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/legacy/core_plugins/metrics/public/visualizations/components/_top_n.scss
View file

@ -24,6 +24,9 @@
.tvbVisTopN__label {
color: $tvbTextColor;
padding: $euiSizeXS 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tvbVisTopN__bar {

38
src/legacy/core_plugins/metrics/public/visualizations/components/top_n.js
View file

@ -23,6 +23,33 @@ import getLastValue from '../../../common/get_last_value';
import reactcss from 'reactcss';
class TopN extends Component {
constructor(props) {
super(props);
this.tableRef = React.createRef();
this.state = {
labelMaxWidth: 150
};
}
get labelMaxWidth() {
// calculate max-width of a label column as 35% of the table
return this.tableRef.current.offsetWidth * 0.35;
}
componentDidMount() {
this.setState({
labelMaxWidth: this.labelMaxWidth
});
}
componentDidUpdate(prevProps, prevState) {
if (prevState.labelMaxWidth !== this.labelMaxWidth) {
this.setState({
labelMaxWidth: this.labelMaxWidth
});
}
}
handleClick(item) {
return () => {
@ -45,6 +72,9 @@ class TopN extends Component {
innerBar: {
width,
backgroundColor
},
label: {
maxWidth: this.state.labelMaxWidth
}
},
onClick: {
@ -59,14 +89,16 @@ class TopN extends Component {
onClick={this.handleClick({ lastValue, ...item })}
style={styles.row}
>
<td width="1*" className="tvbVisTopN__label">{ item.label }</td>
<td title={item.label} className="tvbVisTopN__label" style={styles.label}>
{ item.label }
</td>
<td width="100%" className="tvbVisTopN__bar">
<div
className="tvbVisTopN__innerBar"
style={styles.innerBar}
/>
</td>
<td width="1*" className="tvbVisTopN__value" data-test-subj="tsvbTopNValue">{ value }</td>
<td className="tvbVisTopN__value" data-test-subj="tsvbTopNValue">{ value }</td>
</tr>
);
};
@ -87,7 +119,7 @@ class TopN extends Component {
return (
<div className={className}>
<table className="tvbVisTopN__table">
<table className="tvbVisTopN__table" ref={this.tableRef}>
<tbody>
{ rows }
</tbody>