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

fix tsvb flickering more robustly (#122921)

Browse source
This commit is contained in:
Joe Reuter 2022-01-14 12:33:05 +01:00 • committed by GitHub
parent 46196f2bc5
commit 41806bab77
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/plugins/vis_types/timeseries/public/application/visualizations/views/gauge.js
View file

@ -9,6 +9,7 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { EuiResizeObserver } from '@elastic/eui';
import classNames from 'classnames';
import { isBackgroundInverted, isBackgroundDark } from '../../lib/set_is_reversed';
import { getLastValue } from '../../../../common/last_value_utils';
@ -29,19 +30,12 @@ export class Gauge extends Component {
};
this.handleResize = this.handleResize.bind(this);
}
UNSAFE_componentWillMount() {
const check = () => {
this.timeout = setTimeout(() => {
const newState = calculateCoordinates(this.inner, this.resize, this.state);
if (newState && this.state && !_.isEqual(newState, this.state)) {
this.handleResize();
}
check();
}, 500);
};
check();
this.checkResizeThrottled = _.throttle(() => {
const newState = calculateCoordinates(this.inner, this.resize, this.state);
if (newState && this.state && !_.isEqual(newState, this.state)) {
this.handleResize();
}
}, 200);
}
componentWillUnmount() {
@ -155,16 +149,20 @@ export class Gauge extends Component {
});
return (
<div className={classes}>
<div
ref={(el) => (this.resize = el)}
className={`tvbVisGauge__resize`}
data-test-subj="tvbVisGaugeContainer"
>
{metrics}
<GaugeVis {...gaugeProps} />
</div>
</div>
<EuiResizeObserver onResize={this.checkResizeThrottled}>
{(resizeRef) => (
<div className={classes} ref={resizeRef}>
<div
ref={(el) => (this.resize = el)}
className={`tvbVisGauge__resize`}
data-test-subj="tvbVisGaugeContainer"
>
{metrics}
<GaugeVis {...gaugeProps} />
</div>
</div>
)}
</EuiResizeObserver>
);
}
}

40
src/plugins/vis_types/timeseries/public/application/visualizations/views/gauge_vis.js
View file

@ -9,6 +9,7 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import _ from 'lodash';
import { EuiResizeObserver } from '@elastic/eui';
import reactcss from 'reactcss';
import { calculateCoordinates } from '../lib/calculate_coordinates';
import { COLORS } from '../constants/chart';
@ -25,19 +26,12 @@ export class GaugeVis extends Component {
translateY: 1,
};
this.handleResize = this.handleResize.bind(this);
}
UNSAFE_componentWillMount() {
const check = () => {
this.timeout = setTimeout(() => {
const newState = calculateCoordinates(this.inner, this.resize, this.state);
if (newState && this.state && !_.isEqual(newState, this.state)) {
this.handleResize();
}
check();
}, 500);
};
check();
this.checkResizeThrottled = _.throttle(() => {
const newState = calculateCoordinates(this.inner, this.resize, this.state);
if (newState && this.state && !_.isEqual(newState, this.state)) {
this.handleResize();
}
}, 200);
}
componentWillUnmount() {
@ -148,11 +142,21 @@ export class GaugeVis extends Component {
);
}
return (
<div ref={(el) => (this.resize = el)} style={styles.resize}>
<div style={styles.svg} ref={(el) => (this.inner = el)}>
{svg}
</div>
</div>
<EuiResizeObserver onResize={this.checkResizeThrottled}>
{(resizeRef) => (
<div
ref={(el) => {
this.resize = el;
resizeRef(el);
}}
style={styles.resize}
>
<div style={styles.svg} ref={(el) => (this.inner = el)}>
{svg}
</div>
</div>
)}
</EuiResizeObserver>
);
}
}

56
src/plugins/vis_types/timeseries/public/application/visualizations/views/metric.js
View file

@ -9,6 +9,7 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import _ from 'lodash';
import { EuiResizeObserver } from '@elastic/eui';
import reactcss from 'reactcss';
import { getLastValue } from '../../../../common/last_value_utils';
@ -25,19 +26,12 @@ export class Metric extends Component {
translateY: 1,
};
this.handleResize = this.handleResize.bind(this);
}
UNSAFE_componentWillMount() {
const check = () => {
this.timeout = setTimeout(() => {
const newState = calculateCoordinates(this.inner, this.resize, this.state);
if (newState && this.state && !_.isEqual(newState, this.state)) {
this.handleResize();
}
check();
}, 500);
};
check();
this.checkResizeThrottled = _.throttle(() => {
const newState = calculateCoordinates(this.inner, this.resize, this.state);
if (newState && this.state && !_.isEqual(newState, this.state)) {
this.handleResize();
}
}, 200);
}
componentWillUnmount() {
@ -123,25 +117,33 @@ export class Metric extends Component {
className += ' tvbVisMetric--reversed';
}
return (
<div className={className} style={styles.container}>
<div ref={(el) => (this.resize = el)} className="tvbVisMetric__resize">
<div ref={(el) => (this.inner = el)} className="tvbVisMetric__inner" style={styles.inner}>
<div className="tvbVisMetric__primary">
{primaryLabel}
<EuiResizeObserver onResize={this.checkResizeThrottled}>
{(resizeRef) => (
<div className={className} ref={resizeRef} style={styles.container}>
<div ref={(el) => (this.resize = el)} className="tvbVisMetric__resize">
<div
style={styles.primary_value}
data-test-subj="tsvbMetricValue"
className="tvbVisMetric__value--primary"
ref={(el) => (this.inner = el)}
className="tvbVisMetric__inner"
style={styles.inner}
>
{/* eslint-disable-next-line react/no-danger */}
<span dangerouslySetInnerHTML={{ __html: primaryValue }} />
<div className="tvbVisMetric__primary">
{primaryLabel}
<div
style={styles.primary_value}
data-test-subj="tsvbMetricValue"
className="tvbVisMetric__value--primary"
>
{/* eslint-disable-next-line react/no-danger */}
<span dangerouslySetInnerHTML={{ __html: primaryValue }} />
</div>
</div>
{secondarySnippet}
{additionalLabel}
</div>
</div>
{secondarySnippet}
{additionalLabel}
</div>
</div>
</div>
)}
</EuiResizeObserver>
);
}
}