Dashboard tiles layout

app/charts/chart-data-wrapper.tsx

@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   dataWrapper: {
     position: "relative",
     width: "100%",
+    height: "100%",
     display: "flex",
     flexDirection: "column",
   },

app/charts/shared/containers.tsx

@@ -5,6 +5,8 @@ import { ReactNode, useEffect, useRef } from "react";
 
 import { useChartState } from "@/charts/shared/chart-state";
 import { CalculationToggle } from "@/charts/shared/interactive-filter-calculation-toggle";
+import { useObserverRef } from "@/charts/shared/use-width";
+import { chartPanelLayoutGridClasses } from "@/components/chart-panel-layout-grid";
 import { useTransitionStore } from "@/stores/transition";
 
 const useStyles = makeStyles(() => ({
@@ -13,11 +15,16 @@ const useStyles = makeStyles(() => ({
     width: "100%",
     overflow: "hidden",
     flexGrow: 1,
+    aspectRatio: "5 / 2",
+
+    [`.${chartPanelLayoutGridClasses.root} &`]: {
+      aspectRatio: "auto",
+    },
   },
 }));
 
 export const ChartContainer = ({ children }: { children: ReactNode }) => {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useObserverRef();
   const classes = useStyles();
 
   return (

app/charts/shared/use-width.tsx

@@ -1,4 +1,3 @@
-import { makeStyles } from "@mui/styles";
 import {
   createContext,
   ReactNode,
@@ -27,32 +26,29 @@ export type Bounds = {
   aspectRatio: number;
 };
 
-const useStyles = makeStyles(() => ({
-  chartObserver: {
-    display: "flex",
-    minHeight: "100%",
-  },
-}));
-
 export const Observer = ({ children }: { children: ReactNode }) => {
   const [ref, width, height] = useResizeObserver<HTMLDivElement>();
   const prev = useTimedPrevious(width, 500);
   const isResizing = prev !== width;
   const setEnableTransition = useTransitionStore((state) => state.setEnable);
-  const classes = useStyles();
   useEffect(
     () => setEnableTransition(!isResizing),
     [isResizing, setEnableTransition]
   );
 
-  const size = useMemo(() => ({ width, height }), [width, height]);
+  const size = useMemo(
+    () => ({
+      width,
+      height,
+      ref,
+    }),
+    [width, height, ref]
+  );
 
   return (
-    <div ref={ref} className={classes.chartObserver}>
-      <ChartObserverContext.Provider value={size}>
-        {children}
-      </ChartObserverContext.Provider>
-    </div>
+    <ChartObserverContext.Provider value={size}>
+      {children}
+    </ChartObserverContext.Provider>
   );
 };
 
@@ -62,6 +58,7 @@ const ChartObserverContext = createContext(
     | {
         width: number;
         height: number;
+        ref: (node: HTMLDivElement) => void;
       }
 );
 
@@ -88,3 +85,15 @@ export const useHeight = () => {
 
   return ctx.height;
 };
+
+export const useObserverRef = () => {
+  const ctx = useContext(ChartObserverContext);
+
+  if (ctx === undefined) {
+    throw Error(
+      "You need to wrap your component in <ChartObserverContextProvider /> to useWidth()"
+    );
+  }
+
+  return ctx.ref;
+};

app/components/chart-panel-layout-grid.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { fold } from "fp-ts/lib/Either";
 import { pipe } from "fp-ts/lib/function";
 import { useState } from "react";
@@ -9,6 +10,10 @@ import ChartGridLayout, { generateLayout } from "@/components/react-grid";
 import { ReactGridLayoutsType, isLayouting } from "@/configurator";
 import { useConfiguratorState } from "@/src";
 
+export const chartPanelLayoutGridClasses = {
+  root: "chart-panel-grid-layout",
+};
+
 const ChartPanelLayoutGrid = (props: ChartPanelLayoutTypeProps) => {
   const { chartConfigs } = props;
   const [config, dispatch] = useConfiguratorState(isLayouting);
@@ -63,7 +68,7 @@ const ChartPanelLayoutGrid = (props: ChartPanelLayoutTypeProps) => {
   return (
     <>
       <ChartGridLayout
-        className={"layout"}
+        className={clsx("layout", chartPanelLayoutGridClasses.root)}
         layouts={layouts}
         resize
         onLayoutChange={(_l, allLayouts) => handleChangeLayouts(allLayouts)}

app/components/chart-utils.ts

@@ -1,6 +1,8 @@
 import { Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 
+import { chartPanelLayoutGridClasses } from "@/components/chart-panel-layout-grid";
+
 /** Generic styles shared between `ChartPreview` and `ChartPublished`. */
 export const useChartStyles = makeStyles<Theme>((theme) => ({
   root: {
@@ -14,7 +16,10 @@ export const useChartStyles = makeStyles<Theme>((theme) => ({
     border: "1px solid",
     borderColor: theme.palette.divider,
     color: theme.palette.grey[800],
-    display: "flex",
-    flexDirection: "column",
+
+    [`.${chartPanelLayoutGridClasses.root} &`]: {
+      display: "flex",
+      flexDirection: "column",
+    },
   },
 }));

app/utils/use-resize-observer.ts

@@ -1,13 +1,14 @@
 import { ResizeObserver } from "@juggle/resize-observer";
-import { useEffect, useState, useRef } from "react";
+import { useEventCallback } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
 
 export const useResizeObserver = <T extends Element>() => {
   const roRef = useRef<ResizeObserver>();
   const elRef = useRef<T>();
   const [width, changeWidth] = useState(1);
   const [height, changeHeight] = useState(1);
 
-  const handleRef = (node: T) => {
+  const handleRef = useEventCallback((node: T) => {
     if (!node) {
       return;
     }
@@ -29,23 +30,28 @@ export const useResizeObserver = <T extends Element>() => {
         // Prevent flickering when scrollbars appear and triggers another resize
         // by only resizing when difference to current measurement is above a certain threshold
         changeWidth((width) =>
-          Math.abs(newWidth - width) > 16 ? newWidth : width
+          Math.abs(newWidth - width) > 16 && newWidth > 0 ? newWidth : width
         );
         changeHeight((height) =>
-          Math.abs(newHeight - height) > 16 ? newHeight : height
+          Math.abs(newHeight - height) > 16 && newHeight > 0
+            ? newHeight
+            : height
         );
       });
     }
 
     roRef.current.observe(elRef.current);
-  };
+  });
 
   useEffect(() => {
+    if (elRef.current) {
+      handleRef(elRef.current);
+    }
     return () => {
       roRef.current?.disconnect();
       roRef.current = undefined;
     };
-  }, []);
+  }, [handleRef]);
 
   return [handleRef, width, height] as const;
 };