Merge pull request #1734 from visualize-admin/fix/minimum-dashboard-c…

…hart-sizes

fix: Minimum dashboard chart sizes

app/charts/shared/containers.tsx

@@ -15,6 +15,7 @@ import { useTransitionStore } from "@/stores/transition";
 
 export const useStyles = makeStyles<{}, {}, "chartContainer">(() => ({
   chartContainer: {
+    overflow: "hidden",
     position: "relative",
     width: "100%",
     flexGrow: 1,

app/charts/table/chart-table.tsx

@@ -1,6 +1,7 @@
 import { memo } from "react";
 
 import { ChartDataWrapper } from "@/charts/chart-data-wrapper";
+import { ChartContainer } from "@/charts/shared/containers";
 import { Table } from "@/charts/table/table";
 import { TableChart } from "@/charts/table/table-state";
 import { TableConfig } from "@/configurator";
@@ -28,7 +29,9 @@ export const ChartTableVisualization = (
 const ChartTable = memo(function ChartTable(props: ChartProps<TableConfig>) {
   return (
     <TableChart {...props}>
-      <Table />
+      <ChartContainer>
+        <Table />
+      </ChartContainer>
     </TableChart>
   );
 });

app/charts/table/table.tsx

@@ -10,18 +10,17 @@ import {
   useSortBy,
   useTable,
 } from "react-table";
+import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList, VariableSizeList } from "react-window";
 
 import { useChartState } from "@/charts/shared/chart-state";
 import { CellDesktop } from "@/charts/table/cell-desktop";
 import { DDContent } from "@/charts/table/cell-mobile";
-import { TABLE_HEIGHT } from "@/charts/table/constants";
 import { GroupHeader } from "@/charts/table/group-header";
 import {
   TableContent,
   TableContentProvider,
 } from "@/charts/table/table-content";
-import { scrollbarWidth } from "@/charts/table/table-helpers";
 import { TableChartState } from "@/charts/table/table-state";
 import Flex from "@/components/flex";
 import { Input, Switch } from "@/components/form";
@@ -305,21 +304,26 @@ export const Table = () => {
         <Box
           sx={{
             width: "100%",
+            height: "100%",
             position: "relative",
             backgroundColor: "grey.100",
             mb: 4,
             fontSize: "0.875rem",
           }}
         >
-          <VariableSizeList
-            key={rows.length} // Reset when groups are toggled because itemSize remains cached per index
-            height={TABLE_HEIGHT}
-            itemCount={rows.length}
-            itemSize={getMobileItemSize}
-            width={bounds.width}
-          >
-            {renderMobileRow}
-          </VariableSizeList>
+          <AutoSizer disableWidth>
+            {({ height }: { height: number }) => (
+              <VariableSizeList
+                key={rows.length} // Reset when groups are toggled because itemSize remains cached per index
+                height={height}
+                itemCount={rows.length}
+                itemSize={getMobileItemSize}
+                width={bounds.width}
+              >
+                {renderMobileRow}
+              </VariableSizeList>
+            )}
+          </AutoSizer>
         </Box>
       ) : (
         /* Regular table view */
@@ -330,27 +334,28 @@ export const Table = () => {
             mb: 4,
             fontSize: "0.875rem",
           }}
-          {...getTableProps({ style: { minWidth: "100%" } })}
+          {...getTableProps({ style: { minWidth: "100%", height: "100%" } })}
         >
-          <div {...getTableBodyProps()}>
+          <div {...getTableBodyProps()} style={{ height: "100%" }}>
             <TableContentProvider
               headerGroups={headerGroups}
               tableColumnsMeta={tableColumnsMeta}
               customSortCount={customSortCount}
               totalColumnsWidth={totalColumnsWidth}
             >
-              <FixedSizeList
-                outerElementType={TableContentWrapper}
-                height={Math.min(
-                  TABLE_HEIGHT,
-                  rows.length * rowHeight + scrollbarWidth()
+              <AutoSizer disableWidth>
+                {({ height }: { height: number }) => (
+                  <FixedSizeList
+                    outerElementType={TableContentWrapper}
+                    height={height}
+                    itemCount={rows.length}
+                    itemSize={rowHeight} // depends on whether a column has bars (40px or 56px)
+                    width="100%"
+                  >
+                    {renderDesktopRow}
+                  </FixedSizeList>
                 )}
-                itemCount={rows.length}
-                itemSize={rowHeight} // depends on whether a column has bars (40px or 56px)
-                width="100%"
-              >
-                {renderDesktopRow}
-              </FixedSizeList>
+              </AutoSizer>
             </TableContentProvider>
           </div>
         </Box>

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

@@ -5,10 +5,7 @@ import { useState } from "react";
 import { Layouts } from "react-grid-layout";
 
 import { ChartPanelLayoutTypeProps } from "@/components/chart-panel";
-import ChartGridLayout, {
-  getInitialTileHeight,
-  getInitialTileWidth,
-} from "@/components/react-grid";
+import ChartGridLayout from "@/components/react-grid";
 import { ReactGridLayoutsType, hasChartConfigs } from "@/configurator";
 import { useConfiguratorState } from "@/src";
 import { assert } from "@/utils/assert";
@@ -75,12 +72,6 @@ const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => {
       resize={state.state === "LAYOUTING"}
       draggableHandle={`.${chartPanelLayoutGridClasses.dragHandle}`}
       onLayoutChange={(_l, allLayouts) => handleChangeLayouts(allLayouts)}
-      initialize={layouts["lg"].every((layout) => {
-        return (
-          layout.w === getInitialTileWidth() &&
-          layout.h === getInitialTileHeight()
-        );
-      })}
     >
       {chartConfigs.map((chartConfig) => props.renderChart(chartConfig))}
     </ChartGridLayout>

app/components/chart-preview.tsx

@@ -10,13 +10,7 @@ import { Trans } from "@lingui/macro";
 import { Box } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import Head from "next/head";
-import React, {
-  forwardRef,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+import { forwardRef, ReactNode, useCallback, useMemo, useState } from "react";
 
 import { DataSetTable } from "@/browse/datatable";
 import { LoadingStateProvider } from "@/charts/shared/chart-loading-state";
@@ -70,12 +64,7 @@ import { useTransitionStore } from "@/stores/transition";
 import { useTheme } from "@/themes";
 import { createSnapCornerToCursor } from "@/utils/dnd";
 
-type ChartPreviewProps = {
-  dataSource: DataSource;
-};
-
-export const ChartPreview = (props: ChartPreviewProps) => {
-  const { dataSource } = props;
+export const ChartPreview = ({ dataSource }: { dataSource: DataSource }) => {
   const [state] = useConfiguratorState(hasChartConfigs);
   const editing = isConfiguring(state);
   const { layout } = state;
@@ -128,13 +117,15 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const DashboardPreview = (
-  props: ChartPreviewProps & {
-    layoutType: Extract<Layout, { type: "dashboard" }>["layout"];
-    editing?: boolean;
-  }
-) => {
-  const { dataSource, layoutType, editing } = props;
+const DashboardPreview = ({
+  dataSource,
+  layoutType,
+  editing,
+}: {
+  dataSource: DataSource;
+  layoutType: Extract<Layout, { type: "dashboard" }>["layout"];
+  editing?: boolean;
+}) => {
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
   const theme = useTheme();
   const transition = useTransitionStore();
@@ -331,12 +322,13 @@ const DndChartPreview = (props: CommonChartPreviewProps) => {
   );
 };
 
-type SingleURLsPreviewProps = ChartPreviewProps & {
+const SingleURLsPreview = ({
+  dataSource,
+  layout,
+}: {
+  dataSource: DataSource;
   layout: Extract<Layout, { type: "singleURLs" }>;
-};
-
-const SingleURLsPreview = (props: SingleURLsPreviewProps) => {
-  const { dataSource, layout } = props;
+}) => {
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
   const renderChart = useCallback(
     (chartConfig: ChartConfig) => {
@@ -386,14 +378,17 @@ const SingleURLsPreview = (props: SingleURLsPreviewProps) => {
   );
 };
 
-type ChartPreviewInnerProps = ChartPreviewProps & {
+const ChartPreviewInner = ({
+  children,
+  dataSource,
+  chartKey,
+  actionElementSlot,
+}: {
+  children?: ReactNode;
+  dataSource: DataSource;
   chartKey?: string | null;
   actionElementSlot?: ReactNode;
-  children?: React.ReactNode;
-};
-
-const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
-  const { dataSource, chartKey, actionElementSlot } = props;
+}) => {
   const [state, dispatch] = useConfiguratorState();
   const configuring = isConfiguring(state);
   const chartConfig = getChartConfig(state, chartKey);
@@ -435,7 +430,7 @@ const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
 
   return (
     <Box className={chartClasses.root}>
-      {props.children}
+      {children}
       <ChartErrorBoundary resetKeys={[state]}>
         {hasChartConfigs(state) && (
           <>

app/components/chart-selection-tabs.tsx

@@ -6,7 +6,7 @@ import {
   Stack,
   tabClasses,
   Theme,
-  Typography
+  Typography,
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
@@ -145,13 +145,12 @@ const TabsEditable = (props: TabsEditableProps) => {
 
   const addNewDatasetFlag = useFlag("configurator.add-dataset.new");
 
-
   const switchChart = (key: string) => {
     dispatch({
       type: "SWITCH_ACTIVE_CHART",
       value: key,
     });
-  }
+  };
 
   return (
     <>
@@ -276,20 +275,23 @@ const TabsEditable = (props: TabsEditableProps) => {
           }}
           onClose={handleClose}
         >
-      {isConfiguringChart &&  <MenuActionItem 
-          as="menuitem"
-          type="button"
-          iconName="text"
-          label={<Trans id="chart-controls.edit-tab-label" >Edit tab label</Trans>}
-          onClick={() => {
+          {isConfiguringChart && (
+            <MenuActionItem
+              as="menuitem"
+              type="button"
+              iconName="text"
+              label={
+                <Trans id="chart-controls.edit-tab-label">Edit tab label</Trans>
+              }
+              onClick={() => {
                 switchChart(tabsState.activeChartKey);
                 dispatch({
                   type: "CHART_ACTIVE_FIELD_CHANGED",
-                  value: 'label'
+                  value: "label",
                 });
-          }}
-
-        />}
+              }}
+            />
+          )}
           <DuplicateChartMenuActionItem
             chartConfig={getChartConfig(state, tabsState.activeChartKey)}
             onSuccess={handleClose}
@@ -590,8 +592,8 @@ export const useIconStyles = makeStyles<
   },
   chartIconWrapper: {
     minWidth: "fit-content",
-    display: 'flex',
-    alignItems: 'center',
+    display: "flex",
+    alignItems: "center",
     gap: spacing(2),
     color: (d) => (d.active ? palette.primary.main : palette.secondary.active),
   },
@@ -652,28 +654,32 @@ const TabContent = (props: {
   });
   return (
     <Flex className={classes.root}>
-      {label || showAddLabel ? (
-          <Button
-            variant="text"
-            className={classes.chartIconWrapper}  
-            onClick={() => {
-              onSwitchClick?.();
-           if (editable) {
-              dispatch({
-                type: "CHART_ACTIVE_FIELD_CHANGED",
-                value: undefined
-              });
-            }}
+      <Button
+        variant="text"
+        className={classes.chartIconWrapper}
+        onClick={() => {
+          onSwitchClick?.();
+          if (editable) {
+            dispatch({
+              type: "CHART_ACTIVE_FIELD_CHANGED",
+              value: undefined,
+            });
           }
-            sx={{
-              color: (t) =>
-                label ? "inherit" : `${t.palette.grey[500]} !important`,
-            }}
-          >
-             <Icon name={iconName} />
-           {label || `[ ${addLabel} ]`}
-          </Button>
-      ) : null}
+        }}
+      >
+        <Icon name={iconName} />
+        <Typography
+          variant="body2"
+          sx={{
+            color: (t) =>
+              label || !editable
+                ? "inherit"
+                : `${t.palette.grey[500]} !important`,
+          }}
+        >
+          {label || showAddLabel ? label || `[ ${addLabel} ]` : null}
+        </Typography>
+      </Button>
       {editable && (
         <Button
           variant="text"

app/components/react-grid.stories.tsx

@@ -91,7 +91,6 @@ export const Example = () => {
         onLayoutChange={(_layouts, allLayouts) => setLayouts(allLayouts)}
         layouts={layouts}
         resize
-        initialize={false}
       >
         {generateDOM({ count })}
       </ChartGridLayout>