mirror of
https://github.com/apache/superset.git
synced 2026-05-12 19:35:17 +00:00
Fix chart panel overflowing (#13154)
This commit is contained in:
committed by
GitHub
parent
c787f46f10
commit
da478531b2
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user