wip: add overflow to legend

Shopify · Jan 16, 2024 · acbaeec · acbaeec
1 parent 6ab8e5a
commit acbaeec
Show file tree

Hide file tree

Showing 4 changed files with 321 additions and 8 deletions.
diff --git a/packages/polaris-viz/src/components/Legend/Legend.tsx b/packages/polaris-viz/src/components/Legend/Legend.tsx
@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useRef, useState} from 'react';
 import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {useExternalHideEvents} from '../../hooks';
@@ -20,8 +20,22 @@ export function Legend({
   theme = DEFAULT_THEME_NAME,
 }: LegendProps) {
   const {hiddenIndexes} = useExternalHideEvents();
+  const cardDimensions = useRef([{width: 0, height: 0}]);
+  const cutOffIndex = useRef(data.length);
 
-  const items = data.map((legend, index) => {
+  cardDimensions.current.reduce((totalWidth, card, index) => {
+    if (totalWidth + card.width + index * 10 > 514 - 50) {
+      cutOffIndex.current = index;
+    } else {
+      return totalWidth + card.width;
+    }
+  }, cutOffIndex.current);
+
+  console.log(cardDimensions);
+
+  console.log(cutOffIndex);
+
+  const items = data.slice(0, cutOffIndex.current).map((legend, index) => {
     if (hiddenIndexes.includes(index)) {
       return null;
     }
@@ -34,9 +48,24 @@ export function Legend({
         colorVisionType={colorVisionType}
         index={index}
         theme={theme}
+        onDimensionChange={(dimensions) => {
+          cardDimensions.current[index] = dimensions;
+        }}
       />
     );
   });
 
-  return <Fragment>{items}</Fragment>;
+  return (
+    <Fragment>
+      {items}
+      {cutOffIndex.current < data.length ? (
+        <div
+          style={{
+            whiteSpace: 'nowrap',
+            color: 'white',
+          }}
+        >{`+ ${data.length - cutOffIndex.current} more`}</div>
+      ) : null}
+    </Fragment>
+  );
 }
diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx
@@ -2,7 +2,7 @@ import {
   getColorVisionEventAttrs,
   getColorVisionStylesForActiveIndex,
 } from '@shopify/polaris-viz-core';
-import type {ReactNode} from 'react';
+import {useEffect, type ReactNode, useState, useRef} from 'react';
 
 import {
   LEGEND_ITEM_LEFT_PADDING,
@@ -12,16 +12,20 @@ import {
 import {PREVIEW_ICON_SIZE} from '../../../../constants';
 import {SeriesIcon} from '../../../shared/SeriesIcon';
 import type {LegendData} from '../../../../types';
-import {useTheme} from '../../../../hooks';
+import {useResizeObserver, useTheme} from '../../../../hooks';
 
 import style from './LegendItem.scss';
 
+import type {RefObject} from 'react';
+import {ResizeObserver as Polyfill} from '@juggle/resize-observer';
+
 export interface LegendItemProps extends LegendData {
   index: number;
   activeIndex?: number;
   colorVisionType?: string;
   renderSeriesIcon?: () => ReactNode;
   theme?: string;
+  onDimensionChange: ({width, height}: {width: number, height: number}) => void;
 }
 
 export function LegendItem({
@@ -35,8 +39,22 @@ export function LegendItem({
   shape,
   theme,
   value,
+  onDimensionChange,
 }: LegendItemProps) {
   const selectedTheme = useTheme(theme);
+  const ref = useRef<HTMLButtonElement | null>(null)
+  const dimensions = useElementSize(ref);
+
+
+
+  useEffect(() => {
+    if (onDimensionChange && dimensions != null && ref != null) {
+      if (ref.current !== null) {
+        const {width, height} = ref.current.getBoundingClientRect();
+        onDimensionChange({width, height});
+      }
+    }
+  }, [onDimensionChange, ref, dimensions]);
 
   const colorBlindAttrs =
     colorVisionType == null
@@ -60,6 +78,7 @@ export function LegendItem({
         gap: LEGEND_ITEM_GAP,
       }}
       className={style.Legend}
+      ref={ref}
     >
       {renderSeriesIcon == null ? (
         <span
@@ -80,3 +99,68 @@ export function LegendItem({
     </button>
   );
 }
+
+
+
+
+const ResizeObserver =
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+  typeof window !== 'undefined' && (window.ResizeObserver || Polyfill);
+
+export interface Dimensions {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  offsetTop: number;
+  offsetLeft: number;
+}
+
+const getElementSize = (element: RefObject<HTMLElement | null> | null) => {
+  if (
+    element == null ||
+    element.current == null ||
+    !(element.current instanceof Element)
+  ) {
+    return null;
+  }
+
+  const {left, width, height, top} = element.current.getBoundingClientRect();
+  const {offsetTop, offsetLeft} = element.current;
+
+  return {
+    top,
+    left,
+    width,
+    height,
+    offsetTop,
+    offsetLeft,
+  };
+};
+
+export function useElementSize(
+  element: RefObject<HTMLElement | null> | null,
+): Dimensions | null {
+  const [componentSize, setComponentSize] = useState(getElementSize(element));
+
+  // Ensure we get the element size on mount
+  useEffect(() => {
+    setComponentSize(getElementSize(element));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!element?.current || !ResizeObserver) {
+      return;
+    }
+    const handleResize = () => setComponentSize(getElementSize(element));
+
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(element.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return componentSize;
+}
diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.scss b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.scss
@@ -1,5 +1,5 @@
 .Container {
   display: flex;
   gap: 10px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }