fix: inject style in props passed to VisualizationPlugin (DHIS2-15126) (

#2322)

* fix: inject style in props passed to VisualizationPlugin

style is used to compute the correct width when toggling the legend
panel in dashboard.
style is not passed in props from dashboard because doing so can cause
re-rendering of the whole iframe tag which causes refetching of the
plugin and everything else (analytics included).

* refactor: move the size logic from the plugin wrapper

This is because eventually the PluginWrapper component will be replaced
by the generic one from app-platform.
If possible all custom logic should not be put in other components at
the app level.

* fix: observe size changes for legend positioning

* refactor: rename const for clarity

It's a callback ref, not a normal ref.

---------

Co-authored-by: Jan Henrik Øverland <[email protected]>
Co-authored-by: Martin <[email protected]>

src/components/VisualizationPlugin/VisualizationPlugin.js

@@ -41,6 +41,26 @@ export const VisualizationPlugin = ({
     const [contextualMenuConfig, setContextualMenuConfig] = useState({})
     const [showLegendKey, setShowLegendKey] = useState(false)
     const [renderId, setRenderId] = useState(id)
+    const [size, setSize] = useState({ width: 0, height: 0 })
+
+    const containerCallbackRef = useCallback((node) => {
+        if (node === null) {
+            return
+        }
+
+        const adjustSize = () =>
+            setSize({
+                width: node.clientWidth,
+                height: node.clientHeight,
+            })
+
+        const sizeObserver = new window.ResizeObserver(adjustSize)
+        sizeObserver.observe(node)
+
+        adjustSize()
+
+        return sizeObserver.disconnect
+    }, [])
 
     useEffect(() => setRenderId(id), [id])
 
@@ -283,7 +303,7 @@ export const VisualizationPlugin = ({
         forDashboard && hasLegendSet
             ? {
                   ...style,
-                  width: style.width - (showLegendKey ? 200 : 36),
+                  width: style.width || size.width - (showLegendKey ? 200 : 36),
                   // 200: width of legend key component with margin and scrollbar
                   // 36: width of the toggle button with margin
               }
@@ -292,7 +312,7 @@ export const VisualizationPlugin = ({
     // force height when no value available otherwise the PivotTable container sets 0 as height hiding the table content
     // and Highcharts does not render correctly the chart/legend
     if (!transformedStyle.height) {
-        transformedStyle.height = '100%'
+        transformedStyle.height = size.height || '100%'
     }
 
     const getLegendKey = () => {
@@ -343,7 +363,7 @@ export const VisualizationPlugin = ({
     }
 
     return (
-        <div className={styles.container}>
+        <div className={styles.container} ref={containerCallbackRef}>
             <div className={styles.chartWrapper}>
                 {!fetchResult.visualization.type ||
                 fetchResult.visualization.type === VIS_TYPE_PIVOT_TABLE ? (