fix: charts rerender with zero-height during tab switch (apache#703)

zhaoyongjie · Nov 25, 2021 · e68b4ac · e68b4ac
1 parent 5ba155b
commit e68b4ac
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/...d/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/...d/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
@@ -41,13 +41,10 @@ const propTypes = {
 const formatter = getNumberFormatter();
 
 function WorldMap(element, props) {
-  const { data, height, maxBubbleSize, showBubbles } = props;
+  const { data, width, height, maxBubbleSize, showBubbles } = props;
 
   const div = d3.select(element);
   div.classed('superset-legacy-chart-world-map', true);
-
-  const container = element;
-  container.style.height = `${height}px`;
   div.selectAll('*').remove();
 
   // Ignore XXX's to get better normalization
@@ -76,6 +73,8 @@ function WorldMap(element, props) {
 
   const map = new Datamap({
     element,
+    width,
+    height,
     data: processedData,
     fills: {
       defaultFill: '#eee',

diff --git a/...orary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/transformProps.js b/...orary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/transformProps.js
@@ -17,11 +17,12 @@
  * under the License.
  */
 export default function transformProps(chartProps) {
-  const { height, formData, queryData } = chartProps;
+  const { width, height, formData, queryData } = chartProps;
   const { maxBubbleSize, showBubbles } = formData;
 
   return {
     data: queryData.data,
+    width,
     height,
     maxBubbleSize: parseInt(maxBubbleSize, 10),
     showBubbles,

diff --git a/...rary_superset_ui/superset-ui/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx b/...rary_superset_ui/superset-ui/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
@@ -152,6 +152,9 @@ function StickyWrap({
     if (theadRef.current) {
       const bodyThead = theadRef.current;
       const theadHeight = bodyThead.clientHeight;
+      if (!theadHeight) {
+        return;
+      }
       const fullTableHeight = (bodyThead.parentNode as HTMLTableElement).clientHeight;
       const ths = bodyThead.childNodes[0].childNodes as NodeListOf<HTMLTableHeaderCellElement>;
       const widths = Array.from(ths).map(th => th.clientWidth);