diff --git a/src/components/plotly/shared/custom-plot.js b/src/components/plotly/shared/custom-plot.js
index 587ae2ab..993a00d3 100644
--- a/src/components/plotly/shared/custom-plot.js
+++ b/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 &&
+
+ {title}
+
+ )
+
// render a dummy element with the ref from react-resize-detector.
const renderDummy = (
-
-
-
+
+
+ {renderTitle(' ')}
+
+ ,
+
)
// 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) => (
-
+
{
applyManualDimensions(
-
- {showVizTitles &&
-
- {title}
-
- }
+
+ {renderTitle(title)}
- ,
+ ,
)
}
-
+
)
return (
diff --git a/src/components/plotly/shared/styles/plot.js b/src/components/plotly/shared/styles/plot.js
index a589b684..c72c1634 100644
--- a/src/components/plotly/shared/styles/plot.js
+++ b/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%',
}),
}
diff --git a/src/components/plotly/shared/styles/util.js b/src/components/plotly/shared/styles/util.js
index e001869a..00fe5c45 100644
--- a/src/components/plotly/shared/styles/util.js
+++ b/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',
})),
}