fix(dashboard): Prevent char overflow when displaying chart description (#14467)

* Force refresh the chart on toggle display description

* Use forceUpdate instead of forceRefresh

* Instead of forceUpdate, add a state for desciption height

Co-authored-by: Ajay Mancheery <ajaymancheery@Ajays-MacBook-Pro.local>
This commit is contained in:
Ajay M 2021-05-05 16:30:10 -04:00 committed by GitHub
parent ae256a9119
commit c832542570
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 7 deletions

View File

@ -101,6 +101,7 @@ export default class Chart extends React.Component {
this.state = {
width: props.width,
height: props.height,
descriptionHeight: 0,
};
this.changeFilter = this.changeFilter.bind(this);
@ -120,7 +121,8 @@ export default class Chart extends React.Component {
// which improves performance significantly
if (
nextState.width !== this.state.width ||
nextState.height !== this.state.height
nextState.height !== this.state.height ||
nextState.descriptionHeight !== this.state.descriptionHeight
) {
return true;
}
@ -164,14 +166,20 @@ export default class Chart extends React.Component {
clearTimeout(this.resizeTimeout);
}
componentDidUpdate(prevProps) {
if (this.props.isExpanded !== prevProps.isExpanded) {
const descriptionHeight =
this.props.isExpanded && this.descriptionRef
? this.descriptionRef.offsetHeight
: 0;
// eslint-disable-next-line react/no-did-update-set-state
this.setState({ descriptionHeight });
}
}
getChartHeight() {
const headerHeight = this.getHeaderHeight();
const descriptionHeight =
this.props.isExpanded && this.descriptionRef
? this.descriptionRef.offsetHeight
: 0;
return this.state.height - headerHeight - descriptionHeight;
return this.state.height - headerHeight - this.state.descriptionHeight;
}
getHeaderHeight() {