Merge pull request #1757 from Shopify/envex/container-bounds

Rename dimensions to containerBounds
Shopify · Nov 20, 2024 · c6dc305 · c6dc305
2 parents b786bd7 + be8999c
commit c6dc305
Show file tree

Hide file tree

Showing 50 changed files with 297 additions and 234 deletions.
diff --git a/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx b/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx
@@ -19,7 +19,7 @@ import {useTheme, usePrefersReducedMotion} from '../../hooks';
 import type {SkeletonType} from '../ChartSkeleton';
 
 import styles from './ChartContainer.scss';
-import {ChartDimensions} from './components/';
+import {ContainerBounds} from './components/';
 
 interface Props {
   children: ReactElement;
@@ -87,7 +87,7 @@ export const ChartContainer = (props: Props) => {
         }}
         id={getChartId(value.id)}
       >
-        <ChartDimensions
+        <ContainerBounds
           data={props.data}
           onError={props.onError}
           onIsPrintingChange={setIsPrinting}
@@ -96,7 +96,7 @@ export const ChartContainer = (props: Props) => {
           scrollContainer={props.scrollContainer}
         >
           {props.children}
-        </ChartDimensions>
+        </ContainerBounds>
       </div>
     </ChartContext.Provider>
   );

diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts
diff --git a/...ents/ChartDimensions/ChartDimensions.scss → ...ents/ContainerBounds/ContainerBounds.scss b/...ents/ChartDimensions/ChartDimensions.scss → ...ents/ContainerBounds/ContainerBounds.scss
@@ -1,4 +1,4 @@
-.ChartDimensions {
+.ContainerBounds {
   height: 100%;
   width: 100%;
 }

diff --git a/...nents/ChartDimensions/ChartDimensions.tsx → ...nents/ContainerBounds/ContainerBounds.tsx b/...nents/ChartDimensions/ChartDimensions.tsx → ...nents/ContainerBounds/ContainerBounds.tsx
@@ -3,7 +3,6 @@ import {cloneElement, useCallback, useLayoutEffect, useState} from 'react';
 import type {
   DataGroup,
   DataSeries,
-  Dimensions,
   ErrorBoundaryResponse,
   BoundingRect,
 } from '@shopify/polaris-viz-core';
@@ -18,9 +17,9 @@ import type {SkeletonType} from 'components/ChartSkeleton';
 import {ChartErrorBoundary} from '../../../ChartErrorBoundary';
 import {usePrintResizing, useResizeObserver} from '../../../../hooks';
 
-import styles from './ChartDimensions.scss';
+import styles from './ContainerBounds.scss';
 
-interface ChartDimensionsProps {
+interface ContainerBoundsProps {
   children: ReactElement;
   data: DataSeries[] | DataGroup[];
   onIsPrintingChange: Dispatch<SetStateAction<boolean>>;
@@ -30,19 +29,19 @@ interface ChartDimensionsProps {
   onError?: ErrorBoundaryResponse;
 }
 
-export function ChartDimensions({
+export function ContainerBounds({
   children,
   data,
   onIsPrintingChange,
   scrollContainer,
   sparkChart = false,
   skeletonType = 'Default',
   onError,
-}: ChartDimensionsProps) {
+}: ContainerBoundsProps) {
   const {chartContainer} = useTheme();
   const {onError: onErrorProvider} = usePolarisVizContext();
 
-  const [chartDimensions, setChartDimensions] =
+  const [containerBounds, setContainerBounds] =
     useState<BoundingRect | null>(null);
 
   const {ref, setRef, entry} = useResizeObserver();
@@ -51,7 +50,7 @@ export function ChartDimensions({
 
   usePrintResizing({
     ref,
-    setChartDimensions,
+    setContainerBounds,
     onIsPrintingChange,
   });
 
@@ -70,7 +69,7 @@ export function ChartDimensions({
     const scrollY =
       scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
 
-    setChartDimensions({width, height, x, y: y + scrollY});
+    setContainerBounds({width, height, x, y: y + scrollY});
   }, [entry, previousEntry?.contentRect, scrollContainer]);
 
   const debouncedUpdateDimensions = useDebouncedCallback(() => {
@@ -80,8 +79,8 @@ export function ChartDimensions({
   useLayoutEffect(() => {
     updateDimensions();
 
-    if (chartDimensions === null) {
-      setChartDimensions({
+    if (containerBounds === null) {
+      setContainerBounds({
         width: 0,
         height: sparkChart
           ? chartContainer.sparkChartMinHeight
@@ -106,7 +105,7 @@ export function ChartDimensions({
     entry,
     updateDimensions,
     debouncedUpdateDimensions,
-    chartDimensions,
+    containerBounds,
     chartContainer.minHeight,
     sparkChart,
     chartContainer.sparkChartMinHeight,
@@ -122,7 +121,7 @@ export function ChartDimensions({
 
     const bounds = ref.getBoundingClientRect();
 
-    setChartDimensions((prev) => {
+    setContainerBounds((prev) => {
       if (bounds.y === prev?.y && bounds.x === prev?.x) {
         return prev;
       }
@@ -138,7 +137,7 @@ export function ChartDimensions({
 
   return (
     <div
-      className={styles.ChartDimensions}
+      className={styles.ContainerBounds}
       ref={setRef}
       style={{
         minHeight: sparkChart
@@ -148,24 +147,24 @@ export function ChartDimensions({
       onMouseEnter={onMouseEnter}
       onFocus={onMouseEnter}
     >
-      {!hasValidDimensions(chartDimensions) ? null : (
+      {containerBounds == null || !hasValidBounds(containerBounds) ? null : (
         <ChartErrorBoundary
           type={skeletonType ?? 'Default'}
-          dimensions={chartDimensions!}
+          containerBounds={containerBounds}
           data={data}
           onError={onError ?? onErrorProvider}
         >
           <div
             className={styles.Chart}
             style={{
-              height: chartDimensions!.height,
-              width: chartDimensions!.width,
+              height: containerBounds.height,
+              width: containerBounds.width,
             }}
           >
             {cloneElement<{
-              dimensions: Dimensions;
+              containerBounds: BoundingRect;
             }>(children, {
-              dimensions: chartDimensions!,
+              containerBounds,
             })}
           </div>
         </ChartErrorBoundary>
@@ -174,10 +173,6 @@ export function ChartDimensions({
   );
 }
 
-function hasValidDimensions(chartDimensions: Dimensions | null) {
-  if (chartDimensions == null) {
-    return false;
-  }
-
-  return chartDimensions.width > 0 && chartDimensions.height > 0;
+function hasValidBounds(containerBounds: BoundingRect) {
+  return containerBounds.width > 0 && containerBounds.height > 0;
 }
diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts
@@ -0,0 +1 @@
+export {ContainerBounds} from './ContainerBounds';
diff --git a/packages/polaris-viz/src/components/ChartContainer/components/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/index.ts
@@ -1 +1 @@
-export {ChartDimensions} from './ChartDimensions/';
+export {ContainerBounds} from './ContainerBounds/';
diff --git a/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx b/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx
@@ -1,7 +1,7 @@
 import type {
+  BoundingRect,
   DataGroup,
   DataSeries,
-  Dimensions,
   ErrorBoundaryResponse,
 } from '@shopify/polaris-viz-core';
 import {ChartState} from '@shopify/polaris-viz-core';
@@ -15,9 +15,9 @@ import {checkForMismatchedData} from './utilities/checkForMismatchedData';
 
 interface ErrorBoundaryProps {
   data: DataSeries[] | DataGroup[];
-  dimensions: Dimensions;
   type: SkeletonType;
   children?: ReactNode;
+  containerBounds?: BoundingRect;
   onError?: ErrorBoundaryResponse;
 }
 
@@ -60,7 +60,7 @@ export class ChartErrorBoundary extends Component<
         <ChartSkeleton
           type={this.props.type}
           state={ChartState.Error}
-          dimensions={this.props.dimensions}
+          containerBounds={this.props.containerBounds}
         />
       );
     }

diff --git a/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx b/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx
@@ -8,7 +8,7 @@ import {BarChart} from '../../BarChart';
 
 const MOCK_PROPS = {
   data: [],
-  dimensions: {
+  containerDimensions: {
     width: 900,
     height: 400,
   },

diff --git a/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx
@@ -1,4 +1,4 @@
-import type {Dimensions} from '@shopify/polaris-viz-core';
+import type {BoundingRect} from '@shopify/polaris-viz-core';
 import {ChartState, useTheme} from '@shopify/polaris-viz-core';
 
 import type {Size} from '../SimpleNormalizedChart';
@@ -23,7 +23,9 @@ export type SkeletonType =
   | 'SimpleNormalized';
 
 interface ChartSkeletonProps {
-  dimensions?: Dimensions;
+  // containerBounds is optional because it's passed down
+  // from ContainerBounds with cloneElement.
+  containerBounds?: BoundingRect;
   errorText?: string;
   state?: ChartState;
   theme?: string;
@@ -55,7 +57,7 @@ export interface SimpleNormalizedSkeletonProps extends ChartSkeletonProps {
   size?: Size;
 }
 
-type Props =
+export type Props =
   | DefaultSkeletonProps
   | DonutSkeletonProps
   | FunnelSkeletonProps
@@ -65,7 +67,7 @@ type Props =
 
 export function ChartSkeleton(props: Props) {
   const {
-    dimensions,
+    containerBounds,
     errorText = 'Could not load the chart',
     state = ChartState.Loading,
     theme,
@@ -76,39 +78,33 @@ export function ChartSkeleton(props: Props) {
     chartContainer: {backgroundColor},
   } = useTheme(theme);
 
-  const {width, height} = dimensions || {width: 0, height: 0};
+  const containerDimensions = {
+    height: containerBounds?.height ?? 0,
+    width: containerBounds?.width ?? 0,
+  };
 
   const SkeletonMarkup = () => {
     switch (type) {
       case 'Donut':
         return (
           <DonutSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
         );
       case 'Funnel':
         return (
           <FunnelSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
         );
       case 'SimpleBar':
         return (
           <SimpleBarSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
@@ -117,10 +113,7 @@ export function ChartSkeleton(props: Props) {
         const {showLegend = true, size = 'small'} = props;
         return (
           <SimpleNormalizedSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
             showLegend={showLegend}
@@ -131,10 +124,7 @@ export function ChartSkeleton(props: Props) {
       case 'Spark':
         return (
           <SparkSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
@@ -143,27 +133,24 @@ export function ChartSkeleton(props: Props) {
       default:
         return (
           <GridSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
         );
     }
   };
 
-  if (width === 0) return null;
+  if (containerDimensions.width === 0) return null;
 
   return (
     <div className={styles.Container}>
       <SkeletonMarkup />
       {state === ChartState.Loading && (
         <Shimmer
           backgroundColor={backgroundColor}
-          width={width}
-          height={height}
+          width={containerDimensions.width}
+          height={containerDimensions.height}
         />
       )}
     </div>

diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx
@@ -16,13 +16,13 @@ const RADIUS_PADDING = 20;
 const SECONDARY_DELAY = 200;
 
 interface Props {
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   state: ChartState;
   errorText: string;
 }
 
 export function DonutSkeleton({
-  dimensions: {height, width},
+  containerDimensions: {height, width},
   state,
   errorText,
 }: Props) {

diff --git a/...ges/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx b/...ges/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx
@@ -11,13 +11,13 @@ import {Bar} from '../../../shared';
 import {ErrorText} from '../ErrorText';
 
 interface Props {
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   state: ChartState;
   errorText: string;
 }
 
-export function FunnelSkeleton({dimensions, state, errorText}: Props) {
-  const {width, height} = dimensions;
+export function FunnelSkeleton({containerDimensions, state, errorText}: Props) {
+  const {width, height} = containerDimensions;
 
   const {
     grid: {color: gridColor},
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {ContainerBounds} from './ContainerBounds';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export {ChartDimensions} from './ChartDimensions/';
		export {ContainerBounds} from './ContainerBounds/';