fix: detect style changes from dashboard for re-rendering visualizati…

…on (#1667)

Key features:
Visualizations in dashboard were not rerendering to fit the item size in the following situations:
* item fullscreen
* edit item resize
* change screen width (e.g., switch to/from small screen)

Description
Dashboard and Data Visualizer apps have different approaches regarding visualization size and resizing. DV vis containers have display flex and use a counter that updates when the window is resized, to trigger a re-render of the visualization. In Dashboard, the container has a set width and height, which change on any of the above resizing scenarios. It does not use a counter.

The new effect will end up being specific to dashboard, while the existing effect that responds to renderCounter will be specific to DV. A future improvement would possibly be to use the same mechanisms for both apps. But playing it safe for now, since we are in a hard freeze.

packages/plugin/src/ChartPlugin.js

@@ -13,6 +13,7 @@ const ChartPlugin = ({
     animation: defaultAnimation,
 }) => {
     const canvasRef = useRef(undefined)
+    const prevStyle = useRef(style)
 
     const renderVisualization = useCallback(
         animation => {
@@ -61,7 +62,19 @@ const ChartPlugin = ({
         renderCounter !== null && renderVisualization(0)
 
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    }, [renderCounter, style])
+    }, [renderCounter])
+
+    useEffect(() => {
+        if (
+            style.width !== prevStyle.current.width ||
+            style.height !== prevStyle.current.height
+        ) {
+            renderVisualization(0)
+            prevStyle.current = style
+        }
+
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, [style])
 
     return <div ref={canvasRef} style={style} />
 }