Merge pull request #1666 from visualize-admin/fix/container-size

fix: Container size
visualize-admin · Jul 23, 2024 · 4319c83 · 4319c83
2 parents d16964c + 6674899
commit 4319c83
Show file tree

Hide file tree

Showing 26 changed files with 74 additions and 92 deletions.
diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
@@ -23,7 +23,7 @@ import {
   useAreasStateVariables,
 } from "@/charts/area/areas-state-props";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import {
@@ -336,7 +336,7 @@ const useAreasState = (
     bottom,
     left,
   };
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
 
   /** Adjust scales according to dimensions */

diff --git a/app/charts/area/chart-area.tsx b/app/charts/area/chart-area.tsx
@@ -31,7 +31,7 @@ const ChartAreas = memo((props: ChartProps<AreaConfig>) => {
 
   return (
     <AreaChart {...props}>
-      <ChartContainer type="area">
+      <ChartContainer>
         <ChartSvg>
           <AxisTime /> <AxisHeightLinear />
           <Areas /> <AxisTimeDomain />

diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
@@ -49,7 +49,7 @@ const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
     <>
       {fields.segment?.componentIri && fields.segment.type === "stacked" ? (
         <StackedColumnsChart {...props}>
-          <ChartContainer type="column">
+          <ChartContainer>
             <ChartSvg>
               <AxisHeightLinear /> <AxisWidthBand />
               <ColumnsStacked /> <AxisWidthBandDomain />
@@ -77,7 +77,7 @@ const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
         </StackedColumnsChart>
       ) : fields.segment?.componentIri && fields.segment.type === "grouped" ? (
         <GroupedColumnChart {...props}>
-          <ChartContainer type="column">
+          <ChartContainer>
             <ChartSvg>
               <AxisHeightLinear />
               <AxisWidthBand />
@@ -108,7 +108,7 @@ const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
         </GroupedColumnChart>
       ) : (
         <ColumnChart {...props}>
-          <ChartContainer type="column">
+          <ChartContainer>
             <ChartSvg>
               <AxisHeightLinear />
               <AxisWidthBand />

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
@@ -23,7 +23,7 @@ import {
   PADDING_WITHIN,
 } from "@/charts/column/constants";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import {
@@ -339,7 +339,7 @@ const useColumnsGroupedState = (
     bottom,
     left,
   };
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
 
   // Adjust of scales based on chart dimensions

diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
@@ -27,7 +27,7 @@ import {
 } from "@/charts/column/columns-stacked-state-props";
 import { PADDING_INNER, PADDING_OUTER } from "@/charts/column/constants";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import {
@@ -397,7 +397,7 @@ const useColumnsStackedState = (
     bottom,
     left,
   };
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
 
   xScale.range([0, chartWidth]);

diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/charts/column/columns-state-props";
 import { PADDING_INNER, PADDING_OUTER } from "@/charts/column/constants";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import {
@@ -199,7 +199,7 @@ const useColumnsState = (
     left,
   };
 
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
 
   xScale.range([0, chartWidth]);

diff --git a/app/charts/combo/chart-combo-line-column.tsx b/app/charts/combo/chart-combo-line-column.tsx
@@ -29,7 +29,7 @@ const ChartComboLineColumn = memo(
     const dashboardFilters = useDashboardInteractiveFilters();
     return (
       <ComboLineColumnChart {...props}>
-        <ChartContainer type="comboLineColumn">
+        <ChartContainer>
           <ChartSvg>
             <AxisHeightLinearDual orientation="left" />
             <AxisHeightLinearDual orientation="right" />

diff --git a/app/charts/combo/chart-combo-line-dual.tsx b/app/charts/combo/chart-combo-line-dual.tsx
@@ -28,7 +28,7 @@ const ChartComboLineDual = memo((props: ChartProps<ComboLineDualConfig>) => {
   const dashboardFilters = useDashboardInteractiveFilters();
   return (
     <ComboLineDualChart {...props}>
-      <ChartContainer type="comboLineDual">
+      <ChartContainer>
         <ChartSvg>
           <AxisHeightLinearDual orientation="left" />
           <AxisHeightLinearDual orientation="right" /> <AxisTime />

diff --git a/app/charts/combo/chart-combo-line-single.tsx b/app/charts/combo/chart-combo-line-single.tsx
@@ -29,7 +29,7 @@ const ChartComboLineSingle = memo(
     const dashboardFilters = useDashboardInteractiveFilters();
     return (
       <ComboLineSingleChart {...props}>
-        <ChartContainer type="comboLineSingle">
+        <ChartContainer>
           <ChartSvg>
             <AxisHeightLinear /> <AxisTime /> <AxisTimeDomain />
             <ComboLineSingle />

diff --git a/app/charts/combo/combo-line-column-state.tsx b/app/charts/combo/combo-line-column-state.tsx
@@ -17,7 +17,7 @@ import {
 } from "@/charts/combo/combo-state";
 import { TICK_PADDING } from "@/charts/shared/axis-height-linear";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import {
@@ -145,7 +145,7 @@ const useComboLineColumnState = (
   );
   const right = Math.max(maxRightTickWidth, 40);
   const margins = getMargins({ left, right, bottom });
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
   const xScales = [xScale, xScaleTime, xScaleTimeRange];
   const yScales = [yScale, yScaleLeft, yScaleRight];

diff --git a/app/charts/combo/combo-line-dual-state.tsx b/app/charts/combo/combo-line-dual-state.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/charts/combo/combo-state";
 import { TICK_PADDING } from "@/charts/shared/axis-height-linear";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import {
@@ -128,7 +128,7 @@ const useComboLineDualState = (
   );
   const right = Math.max(maxRightTickWidth, 40);
   const margins = getMargins({ left, right, bottom });
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
   const xScales = [xScale, xScaleTimeRange];
   const yScales = [yScale, yScaleLeft, yScaleRight];

diff --git a/app/charts/combo/combo-line-single-state.tsx b/app/charts/combo/combo-line-single-state.tsx
@@ -14,7 +14,7 @@ import {
   useYScales,
 } from "@/charts/combo/combo-state";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import {
@@ -109,7 +109,7 @@ const useComboLineSingleState = (
     formatNumber,
   });
   const margins = getMargins({ left, bottom });
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
   const xScales = [xScale, xScaleTimeRange];
   const yScales = [yScale];

diff --git a/app/charts/line/chart-lines.tsx b/app/charts/line/chart-lines.tsx
@@ -33,7 +33,7 @@ const ChartLines = memo((props: ChartProps<LineConfig>) => {
   const dashboardFilters = useDashboardInteractiveFilters();
   return (
     <LineChart {...props}>
-      <ChartContainer type="line">
+      <ChartContainer>
         <ChartSvg>
           <AxisHeightLinear /> <AxisTime /> <AxisTimeDomain />
           <Lines />

diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
@@ -17,7 +17,7 @@ import {
   useLinesStateVariables,
 } from "@/charts/line/lines-state-props";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import { getWideData } from "@/charts/shared/chart-helpers";
@@ -228,7 +228,7 @@ const useLinesState = (
     bottom,
     left,
   };
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
 
   xScale.range([0, chartWidth]);

diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
@@ -136,7 +136,7 @@ const ChartMap = memo((props: ChartMapProps) => {
   const filters = useChartConfigFilters(chartConfig);
   return (
     <MapChart {...props}>
-      <ChartContainer type="map">
+      <ChartContainer>
         <MapComponent />
         <MapTooltip />
       </ChartContainer>

diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
@@ -34,7 +34,7 @@ const ChartPie = memo((props: ChartProps<PieConfig>) => {
 
   return (
     <PieChart {...props}>
-      <ChartContainer type="pie">
+      <ChartContainer>
         <ChartSvg>
           <Pie />
         </ChartSvg>

diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
@@ -10,7 +10,7 @@ import {
   usePieStateData,
   usePieStateVariables,
 } from "@/charts/pie/pie-state-props";
-import { getChartBounds } from "@/charts/shared/chart-dimensions";
+import { useChartBounds } from "@/charts/shared/chart-dimensions";
 import {
   ChartContext,
   ChartStateData,
@@ -147,7 +147,7 @@ const usePieState = (
     bottom: 40,
     left: 40,
   };
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
 
   // Pie values

diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -36,7 +36,7 @@ const ChartScatterplot = memo((props: ChartProps<ScatterPlotConfig>) => {
   const filters = useChartConfigFilters(chartConfig);
   return (
     <ScatterplotChart {...props}>
-      <ChartContainer type="scatterplot">
+      <ChartContainer>
         <ChartSvg>
           <AxisWidthLinear />
           <AxisHeightLinear />

diff --git a/app/charts/scatterplot/scatterplot-state.tsx b/app/charts/scatterplot/scatterplot-state.tsx
@@ -10,7 +10,7 @@ import {
   useScatterplotStateVariables,
 } from "@/charts/scatterplot//scatterplot-state-props";
 import {
-  getChartBounds,
+  useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
 import {
@@ -158,7 +158,7 @@ const useScatterplotState = (
     bottom,
     left,
   };
-  const bounds = getChartBounds(width, margins, height);
+  const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;
 
   xScale.range([0, chartWidth]);

diff --git a/app/charts/shared/chart-dimensions.tsx b/app/charts/shared/chart-dimensions.tsx
@@ -6,7 +6,13 @@ import { BRUSH_BOTTOM_SPACE } from "@/charts/shared/brush/constants";
 import { getTickNumber } from "@/charts/shared/ticks";
 import { TICK_FONT_SIZE } from "@/charts/shared/use-chart-theme";
 import { Bounds, Margins } from "@/charts/shared/use-size";
-import { ChartConfig } from "@/configurator";
+import { CHART_GRID_MIN_HEIGHT } from "@/components/react-grid";
+import {
+  ChartConfig,
+  hasChartConfigs,
+  isLayoutingFreeCanvas,
+  useConfiguratorState,
+} from "@/configurator";
 import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
 import { getTextWidth } from "@/utils/get-text-width";
 
@@ -107,20 +113,25 @@ export const useChartPadding = (props: ComputeChartPaddingProps) => {
   ]);
 };
 
-export const getChartBounds = (
+const ASPECT_RATIO = 2 / 5;
+
+export const useChartBounds = (
   width: number,
   margins: Margins,
   height: number
 ): Bounds => {
+  const [state] = useConfiguratorState(hasChartConfigs);
   const { left, top, right, bottom } = margins;
 
   const chartWidth = width - left - right;
-  const chartHeight = height - top - bottom;
+  const chartHeight = isLayoutingFreeCanvas(state)
+    ? Math.max(CHART_GRID_MIN_HEIGHT, height - top - bottom)
+    : chartWidth * ASPECT_RATIO;
 
   return {
     width,
     height: chartHeight + top + bottom,
-    aspectRatio: chartHeight / chartWidth,
+    aspectRatio: ASPECT_RATIO,
     margins,
     chartWidth,
     chartHeight,