IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

UPlot: don't use state to hold reference to uplot instance (#96630)

Browse Source 
don't use state to hold reference to uplot instance
This commit is contained in:
Ashley Harrison 2024-11-18 15:15:04 +00:00 committed by GitHub
parent 984fbac1ad
commit a049183ecd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/grafana-ui/src/components/uPlot/Plot.tsx
View File

@ -31,19 +31,16 @@ type UPlotChartState = {
export class UPlotChart extends Component<PlotProps, UPlotChartState> { export class UPlotChart extends Component<PlotProps, UPlotChartState> {
plotContainer = createRef<HTMLDivElement>(); plotContainer = createRef<HTMLDivElement>();
plotCanvasBBox = createRef<DOMRect>(); plotCanvasBBox = createRef<DOMRect>();
plotInstance: uPlot | null = null;
constructor(props: PlotProps) { constructor(props: PlotProps) {
super(props); super(props);
this.state = {
plot: null,
};
} }
reinitPlot() { reinitPlot() {
let { width, height, plotRef } = this.props; let { width, height, plotRef } = this.props;
this.state.plot?.destroy(); this.plotInstance?.destroy();
if (width === 0 && height === 0) { if (width === 0 && height === 0) {
return; return;
@ -69,7 +66,7 @@ export class UPlotChart extends Component<PlotProps, UPlotChartState> {
plotRef(plot); plotRef(plot);
} }
this.setState({ plot }); this.plotInstance = plot;
} }
componentDidMount() { componentDidMount() {
@ -77,21 +74,19 @@ export class UPlotChart extends Component<PlotProps, UPlotChartState> {
} }
componentWillUnmount() { componentWillUnmount() {
this.state.plot?.destroy(); this.plotInstance?.destroy();
} }
componentDidUpdate(prevProps: PlotProps) { componentDidUpdate(prevProps: PlotProps) {
let { plot } = this.state;
if (!sameDims(prevProps, this.props)) { if (!sameDims(prevProps, this.props)) {
plot?.setSize({ this.plotInstance?.setSize({
width: Math.floor(this.props.width), width: Math.floor(this.props.width),
height: Math.floor(this.props.height), height: Math.floor(this.props.height),
}); });
} else if (!sameConfig(prevProps, this.props)) { } else if (!sameConfig(prevProps, this.props)) {
this.reinitPlot(); this.reinitPlot();
} else if (!sameData(prevProps, this.props)) { } else if (!sameData(prevProps, this.props)) {
plot?.setData(this.props.data as AlignedData); this.plotInstance?.setData(this.props.data as AlignedData);
} }
} }