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

Graph: Fix legend overlapping graph area (#67912)

Browse Source 
use render callback instead of requestIdleTimeout
This commit is contained in:
Ashley Harrison 2023-05-09 15:26:17 +01:00 committed by GitHub
parent 65c1505415
commit 8e752439c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/plugins/panel/graph/Legend/Legend.tsx
View File

@ -32,6 +32,7 @@ interface LegendDisplayProps {
alignAsTable?: boolean; alignAsTable?: boolean;
rightSide?: boolean; rightSide?: boolean;
sideWidth?: number; sideWidth?: number;
renderCallback?: () => void;
} }
interface LegendValuesProps { interface LegendValuesProps {
@ -176,6 +177,7 @@ export class GraphLegend extends PureComponent<GraphLegendProps, LegendState> {
avg, avg,
current, current,
total, total,
renderCallback,
} = this.props; } = this.props;
const seriesValuesProps = { values, min, max, avg, current, total }; const seriesValuesProps = { values, min, max, avg, current, total };
const hiddenSeries = this.state.hiddenSeries; const hiddenSeries = this.state.hiddenSeries;
@ -205,7 +207,7 @@ export class GraphLegend extends PureComponent<GraphLegendProps, LegendState> {
}; };
return ( return (
<div className={`graph-legend-content ${legendClass}`} style={legendStyle}> <div className={`graph-legend-content ${legendClass}`} ref={renderCallback} style={legendStyle}>
{this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />} {this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
</div> </div>
); );

2
public/app/plugins/panel/graph/graph.ts
View File

@ -155,13 +155,13 @@ class GraphElement {
onToggleSort: this.ctrl.onToggleSort, onToggleSort: this.ctrl.onToggleSort,
onColorChange: this.ctrl.onColorChange, onColorChange: this.ctrl.onColorChange,
onToggleAxis: this.ctrl.onToggleAxis, onToggleAxis: this.ctrl.onToggleAxis,
renderCallback: this.renderPanel.bind(this),
}; };
const legendReactElem = React.createElement(LegendWithThemeProvider, legendProps); const legendReactElem = React.createElement(LegendWithThemeProvider, legendProps);
// render callback isn't supported in react 18+, see: https://github.com/reactwg/react-18/discussions/5 // render callback isn't supported in react 18+, see: https://github.com/reactwg/react-18/discussions/5
this.legendElemRoot.render(legendReactElem); this.legendElemRoot.render(legendReactElem);
requestIdleCallback(() => this.renderPanel());
} }
onGraphHover(evt: LegacyGraphHoverEventPayload | DataHoverPayload) { onGraphHover(evt: LegacyGraphHoverEventPayload | DataHoverPayload) {