Fix chart panel overflowing (#13154)

This commit is contained in:
Kamil Gabryjelski
2021-02-17 02:37:35 +01:00
committed by GitHub
parent c787f46f10
commit da478531b2

View File

@@ -118,7 +118,7 @@ const ExploreChartPanel = props => {
refreshMode: 'debounce',
refreshRate: 300,
});
const { width: chartWidth, ref: chartRef } = useResizeDetector({
const { width: chartPanelWidth, ref: chartPanelRef } = useResizeDetector({
refreshMode: 'debounce',
refreshRate: 300,
});
@@ -183,6 +183,7 @@ const ExploreChartPanel = props => {
const renderChart = useCallback(() => {
const { chart } = props;
const newHeight = calcSectionHeight(splitSizes[0]) - CHART_PANEL_PADDING;
const chartWidth = chartPanelWidth - CHART_PANEL_PADDING;
return (
chartWidth > 0 && (
<ChartContainer
@@ -208,16 +209,20 @@ const ExploreChartPanel = props => {
/>
)
);
}, [calcSectionHeight, chartWidth, props, splitSizes]);
}, [calcSectionHeight, chartPanelWidth, props, splitSizes]);
const panelBody = useMemo(
() => <div className="panel-body">{renderChart()}</div>,
[renderChart],
() => (
<div className="panel-body" ref={chartPanelRef}>
{renderChart()}
</div>
),
[chartPanelRef, renderChart],
);
const standaloneChartBody = useMemo(
() => <div ref={chartRef}>{renderChart()}</div>,
[chartRef, renderChart],
() => <div ref={chartPanelRef}>{renderChart()}</div>,
[chartPanelRef, renderChart],
);
if (props.standalone) {
@@ -252,7 +257,7 @@ const ExploreChartPanel = props => {
});
return (
<Styles className="panel panel-default chart-container" ref={chartRef}>
<Styles className="panel panel-default chart-container" ref={chartPanelRef}>
<div className="panel-heading" ref={headerRef}>
{header}
</div>