Merge pull request #1585 from visualize-admin/feat/dashboard-improvements

bprusinowski · web-flow · commit 33f0628318cb · 2024-06-10T16:47:18.000+02:00
feat: Disable transitions when resizing dashboard charts vertically
diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
@@ -46,7 +46,7 @@ import {
 } from "@/charts/shared/stacked-helpers";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { AreaConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useTimeFormatUnit } from "@/formatters";
diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
@@ -36,7 +36,7 @@ import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { getCenteredTooltipPlacement } from "@/charts/shared/interaction/tooltip-box";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
@@ -48,7 +48,7 @@ import {
 } from "@/charts/shared/stacked-helpers";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber } from "@/formatters";
diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
@@ -29,7 +29,7 @@ import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { getCenteredTooltipPlacement } from "@/charts/shared/interaction/tooltip-box";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import {
diff --git a/app/charts/combo/combo-state.ts b/app/charts/combo/combo-state.ts
@@ -2,7 +2,7 @@ import { extent, groups, max, min, sum } from "d3-array";
 import { scaleLinear, scaleOrdinal, scaleTime } from "d3-scale";
 import { useMemo } from "react";
 
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useTimeFormatUnit } from "@/formatters";
 
diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
@@ -31,7 +31,7 @@ import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { getCenteredTooltipPlacement } from "@/charts/shared/interaction/tooltip-box";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { LineConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import {
diff --git a/app/charts/map/map-legend.tsx b/app/charts/map/map-legend.tsx
@@ -19,7 +19,7 @@ import { rgbArrayToHex } from "@/charts/shared/colors";
 import { MapLegendColor } from "@/charts/shared/legend-color";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
 import { useInteraction } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import Flex from "@/components/flex";
 import { MapConfig } from "@/configurator";
 import { ColorRamp } from "@/configurator/components/chart-controls/color-ramp";
diff --git a/app/charts/map/map-state.tsx b/app/charts/map/map-state.tsx
@@ -39,7 +39,7 @@ import {
 import { ChartContext, CommonChartState } from "@/charts/shared/chart-state";
 import { colorToRgbArray } from "@/charts/shared/colors";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import {
   BBox,
   CategoricalColorField,
diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
@@ -19,7 +19,7 @@ import {
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { PieConfig } from "@/configurator";
 import { Dimension, Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
diff --git a/app/charts/scatterplot/scatterplot-state.tsx b/app/charts/scatterplot/scatterplot-state.tsx
@@ -21,7 +21,7 @@ import {
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { TooltipScatterplot } from "@/charts/shared/interaction/tooltip-content";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { ScatterPlotConfig, SortingField } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber } from "@/formatters";
diff --git a/app/charts/shared/chart-dimensions.tsx b/app/charts/shared/chart-dimensions.tsx
@@ -5,7 +5,7 @@ import { TICK_PADDING } from "@/charts/shared/axis-height-linear";
 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-width";
+import { Bounds, Margins } from "@/charts/shared/use-size";
 import { ChartConfig } from "@/configurator";
 import { getTextWidth } from "@/utils/get-text-width";
 
diff --git a/app/charts/shared/chart-state.ts b/app/charts/shared/chart-state.ts
@@ -24,7 +24,7 @@ import {
   useTemporalEntityVariable,
   useTemporalVariable,
 } from "@/charts/shared/chart-helpers";
-import { Bounds } from "@/charts/shared/use-width";
+import { Bounds } from "@/charts/shared/use-size";
 import { TableChartState } from "@/charts/table/table-state";
 import {
   ChartConfig,
diff --git a/app/charts/shared/containers.tsx b/app/charts/shared/containers.tsx
@@ -6,7 +6,7 @@ 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 { useObserverRef } from "@/charts/shared/use-size";
 import { chartPanelLayoutGridClasses } from "@/components/chart-panel-layout-grid";
 import { ChartConfig } from "@/configurator";
 import { useTransitionStore } from "@/stores/transition";
diff --git a/app/charts/shared/interaction/ruler.tsx b/app/charts/shared/interaction/ruler.tsx
@@ -11,7 +11,7 @@ import {
   TooltipValue,
 } from "@/charts/shared/interaction/tooltip";
 import { useInteraction } from "@/charts/shared/use-interaction";
-import { Margins } from "@/charts/shared/use-width";
+import { Margins } from "@/charts/shared/use-size";
 import { Observation } from "@/domain/data";
 
 type RulerProps = {
diff --git a/app/charts/shared/interaction/tooltip-box.tsx b/app/charts/shared/interaction/tooltip-box.tsx
@@ -9,7 +9,7 @@ import React, {
 } from "react";
 import ReactDOM from "react-dom";
 
-import { Margins } from "@/charts/shared/use-width";
+import { Margins } from "@/charts/shared/use-size";
 
 const TRIANGLE_SIZE = 8;
 const TOOLTIP_OFFSET = 4;
diff --git a/app/charts/shared/use-size.tsx b/app/charts/shared/use-size.tsx
@@ -26,10 +26,13 @@ export type Bounds = {
   aspectRatio: number;
 };
 
+const RESIZE_DELAY = 500;
+
 export const Observer = ({ children }: { children: ReactNode }) => {
   const [ref, width, height] = useResizeObserver<HTMLDivElement>();
-  const prev = useTimedPrevious(width, 500);
-  const isResizing = prev !== width;
+  const prevWidth = useTimedPrevious(width, RESIZE_DELAY);
+  const prevHeight = useTimedPrevious(height, RESIZE_DELAY);
+  const isResizing = prevWidth !== width || prevHeight !== height;
   const setEnableTransition = useTransitionStore((state) => state.setEnable);
   useEffect(() => {
     setEnableTransition(!isResizing);
diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx
@@ -23,7 +23,7 @@ import {
   ChartStateData,
   CommonChartState,
 } from "@/charts/shared/chart-state";
-import { useSize } from "@/charts/shared/use-width";
+import { useSize } from "@/charts/shared/use-size";
 import { BAR_CELL_PADDING, TABLE_HEIGHT } from "@/charts/table/constants";
 import {
   TableStateVariables,
diff --git a/app/components/chart-with-filters.tsx b/app/components/chart-with-filters.tsx
@@ -3,8 +3,8 @@ import dynamic from "next/dynamic";
 import { forwardRef } from "react";
 
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
+import { Observer } from "@/charts/shared/use-size";
 import useSyncInteractiveFilters from "@/charts/shared/use-sync-interactive-filters";
-import { Observer } from "@/charts/shared/use-width";
 import { ChartConfig, DataSource } from "@/configurator";
 
 const ChartAreasVisualization = dynamic(
