[superset] branch master updated: Fix chart panel overflowing (#13154)

[yo...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

yongjiezhao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new da47853  Fix chart panel overflowing (#13154)
da47853 is described below

commit da478531b25b04c4442084625a4eca6ded76c448
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Wed Feb 17 02:37:35 2021 +0100

    Fix chart panel overflowing (#13154)
---
 .../src/explore/components/ExploreChartPanel.jsx      | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index 6962dfa..6191698 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -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>