plotly - revise sizing implementation

Author: vxsl

src/components/plotly/shared/custom-plot.js

@@ -54,22 +54,37 @@ const CustomPlot = ({
   // also, ref helps force plotly to redraw during padding transitions 
   const { ref, width, height } = useResizeDetector()
 
+  const renderTitle = (title = '') => (
+    showVizTitles &&
+    <styles.PlotTitle
+      x={titlePosition[0]}
+      y={titlePosition[1]}
+    >
+      {title}
+    </styles.PlotTitle>
+  )
+
   // render a dummy element with the ref from react-resize-detector.
   const renderDummy = (
-    <styles.DynamicPadding size={size}>
-      <styles.RefDummy ref={ref} />
-    </styles.DynamicPadding>
+    <styles.PlotContainer>
+      <styles.DynamicSize ref={ref} size={size} >
+        {renderTitle(' ')}
+        <styles.Plot />
+      </styles.DynamicSize>,
+    </styles.PlotContainer>
   )
 
   // set manual height and width for special cases
   const [manualDimensions, setManualDimensions] = useState()
   useLayoutEffect(() => {
     if (type === 'pie') {
-      setManualDimensions(
-        width <= height
-          ? { height: `${width}px` }
-          : { width: `${height}px` },
-      )
+      if (width && height) {
+        setManualDimensions(
+          width <= height
+            ? { height: `${width}px` }
+            : { width: `${height}px` },
+        )
+      }
     } else {
       setManualDimensions(null)
     }
@@ -88,18 +103,11 @@ const CustomPlot = ({
 
   // render a plotly.js visualization with a title and dynamic padding
   const renderPlot = (data, title, key) => (
-    <styles.DynamicPadding size={size} key={key}>
+    <styles.PlotContainer key={key}>
       {
         applyManualDimensions(
-          <styles.PlotContainer >
-            {showVizTitles &&
-              <styles.PlotTitle
-                x={titlePosition[0]}
-                y={titlePosition[1]}
-              >
-                {title}
-              </styles.PlotTitle>
-            }
+          <styles.DynamicSize size={size} >
+            {renderTitle(title)}
             <Plot
               data={data}
               layout={finalLayout}
@@ -108,10 +116,10 @@ const CustomPlot = ({
                 responsive: true,
               }}
             />
-          </styles.PlotContainer >,
+          </styles.DynamicSize>,
         )
       }
-    </styles.DynamicPadding>
+    </styles.PlotContainer>
   )
 
   return (

src/components/plotly/shared/styles/plot.js

@@ -14,8 +14,8 @@ export default {
     color: '#4d4d4d',
     fontWeight: 'bold',
     zIndex: '10',
-    width: '100%',
     overflow: 'visible',
+    whiteSpace: 'nowrap',
     textAlign:
       x === 0
         ? 'left'
@@ -34,20 +34,21 @@ export default {
     ),
   })),
 
-  PlotContainer: styled('div')({
-    width: 'inherit',
-    height: 'inherit',
-    justifyContent: 'center',
+  PlotContainer: styled('div', forwardRef)({
+    width: '100%',
+    height: '100%',
     display: 'flex',
-    flexDirection: 'column',
-    overflow: 'visible',
+    justifyContent: 'center',
+    alignItems: 'center',
   }),
 
   Plot: styled('div', forwardRef)({
     '& svg': {
       overflow: 'visible !important', // plotly.js override
     },
-    height: 'inherit',
-    width: 'inherit',
+    flex: 1,
+    minHeight: '10px',
+    minWidth: '10px',
+    width: '100%',
   }),
 }

src/components/plotly/shared/styles/util.js

@@ -1,23 +1,28 @@
 import { forwardRef } from 'react'
 import { styled } from 'goober'
 
+const MIN_SIZE = 50
+const MAX_PADDING = 100 - MIN_SIZE
+
 export default {
-  DynamicPadding: styled('div')(({ size }) => {
-    const padding = 1 - size
+  DynamicSize: styled('div', forwardRef)(({ size }) => {
+    const finalSize = `${MIN_SIZE + (size * MAX_PADDING)}%`
     return {
       display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '100%',
-      height: '100%',
-      transition: 'padding 0.3s ease',
-      padding: `min(${padding * 30}%, 14rem)`,
+      flexDirection: 'column',
+      alignContent: 'center',
+      position: 'relative',
+      width: finalSize,
+      height: finalSize,
+      maxWidth: '100%',
+      maxHeight: '100%',
+      transition: 'width 0.3s, height 0.3s',
     }
   }),
 
   HiddenContainer: styled('div')({
     pointerEvents: 'none',
-    display: 'hidden',
+    visibility: 'hidden',
     position: 'absolute',
     width: '100%',
     height: '100%',
@@ -31,5 +36,8 @@ export default {
   ManualDimensions: styled('div')(({ width = '100%', height = '100%' }) => ({
     width,
     height,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
   })),
 }