@levi-gemcommerce/analytics 3.0.1-dev.3 → 3.0.1-dev.5

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx

@@ -1,139 +0,0 @@
-import type { BoundingRect, Dimensions } from '@shopify/polaris-viz-core';
-import type { TooltipPositionOffset } from '../types';
-import type { Margin } from '../../../types';
-import type { ReactNode } from 'react';
-
-import { getAlteredHorizontalBarPosition } from '../utilities/getAlteredHorizontalBarPosition';
-import { getAlteredVerticalBarPosition } from '../utilities/getAlteredVerticalBarPosition';
-import { getAlteredLineChartPosition } from '../utilities/getAlteredLineChartPosition';
-import { useChartContext, InternalChartType } from '@shopify/polaris-viz-core';
-import { useResizeObserver } from '../../../hooks/useResizeObserver';
-import { useEffect, useRef, useState, useMemo } from 'react';
-import { DEFAULT_TOOLTIP_POSITION } from '../constants';
-
-import styles from './TooltipAnimatedContainer.module.scss';
-
-export interface TooltipAnimatedContainerProps {
-  children: ReactNode;
-  margin: Margin;
-  currentX: number;
-  currentY: number;
-  chartBounds: BoundingRect;
-  chartType: InternalChartType;
-  position?: TooltipPositionOffset;
-  id?: string;
-  bandwidth?: number;
-}
-
-export function TooltipAnimatedContainer({
-  bandwidth = 0,
-  chartBounds,
-  chartType,
-  children,
-  currentX,
-  currentY,
-  id = '',
-  margin,
-  position = DEFAULT_TOOLTIP_POSITION,
-}: TooltipAnimatedContainerProps) {
-  const { isPerformanceImpacted, scrollContainer, containerBounds, isTouchDevice } = useChartContext();
-
-  const [tooltipDimensions, setTooltipDimensions] = useState<Dimensions | null>(null);
-  const firstRender = useRef(true);
-
-  const { setRef, entry } = useResizeObserver();
-
-  const getAlteredPositionFunction = useMemo(() => {
-    switch (chartType) {
-      case InternalChartType.Line:
-      case InternalChartType.Donut:
-        return getAlteredLineChartPosition;
-      case InternalChartType.HorizontalBar:
-        return getAlteredHorizontalBarPosition;
-      case InternalChartType.Bar:
-      default:
-        return getAlteredVerticalBarPosition;
-    }
-  }, [chartType]);
-
-  const { x, y, opacity, immediate } = useMemo(() => {
-    if (tooltipDimensions == null) {
-      return { x: 0, y: 0, opacity: 0 };
-    }
-
-    const { x, y } = getAlteredPositionFunction({
-      currentX,
-      currentY,
-      position,
-      tooltipDimensions,
-      chartBounds,
-      margin,
-      bandwidth,
-      isPerformanceImpacted,
-      isTouchDevice,
-      containerBounds,
-      scrollContainer,
-    });
-
-    const shouldRenderImmediate = firstRender.current;
-    firstRender.current = false;
-
-    return {
-      x,
-      y,
-      opacity: 1,
-      immediate: isPerformanceImpacted || shouldRenderImmediate,
-    };
-  }, [
-    bandwidth,
-    chartBounds,
-    currentX,
-    currentY,
-    getAlteredPositionFunction,
-    margin,
-    position,
-    isPerformanceImpacted,
-    tooltipDimensions,
-    containerBounds,
-    scrollContainer,
-    isTouchDevice,
-  ]);
-
-  useEffect(() => {
-    if (entry == null) {
-      return;
-    }
-
-    setTooltipDimensions((previous: Dimensions | null) => {
-      const { width, height } = entry.target.getBoundingClientRect();
-
-      if (previous?.width === width && previous?.height === height) {
-        return previous;
-      }
-
-      return {
-        width,
-        height,
-      };
-    });
-  }, [entry]);
-
-  return (
-    <div
-      id={id}
-      className={styles.Container}
-      data-tooltip
-      style={{
-        top: 0,
-        left: 0,
-        opacity,
-        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0px)`,
-        transition: immediate ? 'none' : 'opacity 300ms ease, transform 150ms',
-      }}
-      ref={setRef}
-      aria-hidden="true"
-    >
-      {children}
-    </div>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/constants.ts

@@ -1,18 +0,0 @@
-import { TooltipHorizontalOffset, TooltipVerticalOffset } from './types';
-import type { TooltipPosition } from './types';
-
-export const DEFAULT_TOOLTIP_POSITION = {
-  horizontal: TooltipHorizontalOffset.Center,
-  vertical: TooltipVerticalOffset.Above,
-};
-
-export const TOOLTIP_POSITION_DEFAULT_RETURN: TooltipPosition = {
-  x: 0,
-  y: 0,
-  position: DEFAULT_TOOLTIP_POSITION,
-  activeIndex: null,
-};
-
-// The space between the cursor and the tooltip
-export const TOOLTIP_MARGIN = 20;
-export const SCROLLBAR_WIDTH = 20;

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/index.ts

@@ -1,5 +0,0 @@
-export { TooltipWrapper } from './TooltipWrapper';
-export { TooltipAnimatedContainer } from './components/TooltipAnimatedContainer';
-export { TOOLTIP_MARGIN, TOOLTIP_POSITION_DEFAULT_RETURN, SCROLLBAR_WIDTH } from './constants';
-export type { TooltipPosition, TooltipPositionParams } from './types';
-export { eventPointNative } from './utilities/eventPoint';

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/types.ts

@@ -1,62 +0,0 @@
-import type { BoundingRect, ChartType, DataSeries, Dimensions } from '@shopify/polaris-viz-core';
-import type { ScaleBand, ScaleLinear } from 'd3-scale';
-
-import type { Margin } from '../../types';
-
-export enum TooltipHorizontalOffset {
-  Left,
-  Right,
-  Center,
-}
-
-export enum TooltipVerticalOffset {
-  Above,
-  Below,
-  Inline,
-  Center,
-}
-
-export interface TooltipPositionOffset {
-  horizontal: TooltipHorizontalOffset;
-  vertical: TooltipVerticalOffset;
-}
-
-export interface TooltipPosition {
-  x: number;
-  y: number;
-  activeIndex: number | null;
-  position?: TooltipPositionOffset;
-}
-
-export interface TooltipPositionParams {
-  chartBounds: Required<BoundingRect>;
-  data: DataSeries[];
-  eventType: 'mouse' | 'focus';
-  longestSeriesIndex: number;
-  xScale: ScaleBand<string> | ScaleLinear<number, number>;
-  event?: MouseEvent | TouchEvent | FocusEvent;
-  index?: number;
-  type?: ChartType;
-  yScale?: ScaleLinear<number, number>;
-}
-
-export interface AlteredPositionProps {
-  bandwidth: number;
-  chartBounds: BoundingRect;
-  currentX: number;
-  currentY: number;
-  containerBounds: BoundingRect;
-  isPerformanceImpacted: boolean;
-  isTouchDevice: boolean;
-  margin: Margin;
-  position: TooltipPositionOffset;
-  tooltipDimensions: Dimensions;
-  scrollContainer?: Element | null;
-}
-
-export interface AlteredPositionReturn {
-  x: number;
-  y: number;
-}
-
-export type AlteredPosition = (props: AlteredPositionProps) => AlteredPositionReturn;

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/eventPoint.ts

@@ -1,84 +0,0 @@
-import type { Position } from '@shopify/polaris-viz-core';
-import type React from 'react';
-
-export function eventPoint(event: React.MouseEvent<SVGSVGElement> | React.TouchEvent<SVGSVGElement>) {
-  const svgNode = event.currentTarget;
-
-  if (svgNode == null) {
-    return;
-  }
-
-  const screenCTM = svgNode.getScreenCTM();
-
-  if (screenCTM == null) {
-    return;
-  }
-
-  const point = svgNode.createSVGPoint();
-  if (isMouseEvent(event)) {
-    point.x = event.clientX;
-    point.y = event.clientY;
-  } else if (isTouchEvent(event)) {
-    const touch = event.changedTouches[0];
-    point.x = touch!.clientX;
-    point.y = touch!.clientY;
-  }
-
-  const transformedSVGPoint = point.matrixTransform(screenCTM.inverse());
-
-  return {
-    clientX: point.x,
-    clientY: point.y,
-    svgX: transformedSVGPoint.x,
-    svgY: transformedSVGPoint.y,
-  };
-}
-
-export function eventPointNative(event: MouseEvent | TouchEvent) {
-  const svgNode = getSVGNodeFromTarget(event);
-
-  if (svgNode == null) {
-    return;
-  }
-
-  const screenCTM = svgNode.getScreenCTM();
-
-  if (screenCTM == null) {
-    return;
-  }
-
-  const point = svgNode.createSVGPoint();
-  const { x, y } = getXYFromEventType(event);
-
-  point.x = x;
-  point.y = y;
-
-  const transformedSVGPoint = point.matrixTransform(screenCTM.inverse());
-
-  return {
-    svgX: transformedSVGPoint.x,
-    svgY: transformedSVGPoint.y,
-  };
-
-  function getSVGNodeFromTarget(event: MouseEvent | TouchEvent) {
-    if (event.currentTarget == null) {
-      return (event.target as SVGElement)?.closest('svg');
-    }
-
-    return event.currentTarget as SVGSVGElement;
-  }
-}
-
-export function getXYFromEventType(event: MouseEvent | TouchEvent): Position {
-  return 'touches' in event
-    ? { x: event.touches[0]!.pageX, y: event.touches[0]!.pageY }
-    : { x: event.pageX, y: event.pageY };
-}
-
-export function isMouseEvent(event: React.SyntheticEvent): event is React.MouseEvent {
-  return event.nativeEvent instanceof MouseEvent;
-}
-
-export function isTouchEvent(event: React.SyntheticEvent): event is React.TouchEvent {
-  return typeof TouchEvent !== 'undefined' && event.nativeEvent instanceof TouchEvent;
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getAlteredHorizontalBarPosition.ts

@@ -1,110 +0,0 @@
-import type { BoundingRect, Dimensions } from '@shopify/polaris-viz-core';
-import { HORIZONTAL_GROUP_LABEL_HEIGHT } from '@shopify/polaris-viz-core';
-
-import type { AlteredPositionProps, AlteredPositionReturn } from '../types';
-import { TOOLTIP_MARGIN } from '../constants';
-
-export function getAlteredHorizontalBarPosition(props: AlteredPositionProps): AlteredPositionReturn {
-  if (props.currentX < 0) {
-    return getNegativeOffset(props);
-  }
-  return getPositiveOffset(props);
-}
-
-function getNegativeOffset(props: AlteredPositionProps): AlteredPositionReturn {
-  const { bandwidth, currentX, currentY, tooltipDimensions } = props;
-
-  const flippedX = currentX * -1;
-  const yOffset = (bandwidth - tooltipDimensions.height) / 2;
-
-  const y = currentY - tooltipDimensions.height;
-  if (flippedX - tooltipDimensions.width < 0) {
-    return { x: flippedX, y: y < 0 ? 0 : y };
-  }
-
-  return {
-    x: flippedX - tooltipDimensions.width - TOOLTIP_MARGIN,
-    y: currentY + HORIZONTAL_GROUP_LABEL_HEIGHT + yOffset,
-  };
-}
-
-function getPositiveOffset(props: AlteredPositionProps): AlteredPositionReturn {
-  const { bandwidth, currentX, currentY, tooltipDimensions, chartBounds } = props;
-
-  const isOutside = isOutsideBounds({
-    x: currentX,
-    y: currentY,
-    tooltipDimensions,
-    chartBounds,
-  });
-
-  if (isOutside.top && isOutside.right) {
-    return {
-      x: chartBounds.width - tooltipDimensions.width,
-      y: 0,
-    };
-  }
-
-  if (isOutside.top && !isOutside.right) {
-    return {
-      x: currentX + TOOLTIP_MARGIN,
-      y: 0,
-    };
-  }
-
-  if (!isOutside.right && !isOutside.bottom) {
-    const yOffset = (bandwidth - tooltipDimensions.height) / 2;
-    return {
-      x: currentX + TOOLTIP_MARGIN,
-      y: currentY + HORIZONTAL_GROUP_LABEL_HEIGHT + yOffset,
-    };
-  }
-
-  if (isOutside.right) {
-    const x = currentX - tooltipDimensions.width;
-    const y = currentY - tooltipDimensions.height + HORIZONTAL_GROUP_LABEL_HEIGHT - TOOLTIP_MARGIN;
-
-    if (y < 0) {
-      return {
-        x,
-        y: bandwidth + HORIZONTAL_GROUP_LABEL_HEIGHT + TOOLTIP_MARGIN,
-      };
-    }
-
-    return {
-      x,
-      y,
-    };
-  }
-
-  if (isOutside.bottom) {
-    return {
-      x: currentX + TOOLTIP_MARGIN,
-      y: chartBounds.height - tooltipDimensions.height - HORIZONTAL_GROUP_LABEL_HEIGHT,
-    };
-  }
-
-  return { x: currentX, y: currentY };
-}
-
-function isOutsideBounds({
-  x,
-  y,
-  tooltipDimensions,
-  chartBounds,
-}: {
-  x: number;
-  y: number;
-  tooltipDimensions: Dimensions;
-  chartBounds: BoundingRect;
-}) {
-  const right = x + TOOLTIP_MARGIN + tooltipDimensions.width;
-  const bottom = y + tooltipDimensions.height;
-
-  return {
-    left: x <= 0,
-    right: right > chartBounds.width,
-    bottom: bottom > chartBounds.height,
-    top: y <= 0,
-  };
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getAlteredLineChartPosition.ts

@@ -1,115 +0,0 @@
-import { clamp } from '@shopify/polaris-viz-core';
-
-import type { AlteredPositionProps } from '../types';
-
-// The space between the cursor and the tooltip
-export const TOOLTIP_MARGIN = 20;
-export const SCROLLBAR_WIDTH = 20;
-
-export interface AlteredPositionReturn {
-  x: number;
-  y: number;
-}
-
-export type AlteredPosition = (props: AlteredPositionProps) => AlteredPositionReturn;
-
-export function getAlteredLineChartPosition(props: AlteredPositionProps): AlteredPositionReturn {
-  const { currentX, currentY, containerBounds, scrollContainer } = props;
-
-  let x = currentX;
-  let y = currentY;
-
-  //
-  // Y POSITIONING
-  //
-
-  if (props.isPerformanceImpacted || props.isTouchDevice) {
-    y = containerBounds.y - ((scrollContainer as HTMLElement)?.scrollTop ?? 0);
-
-    if (props.isTouchDevice) {
-      y -= props.tooltipDimensions.height;
-    }
-  }
-
-  //
-  // X POSITIONING
-  //
-
-  const right = getRightPosition(x, props);
-
-  x = right.value;
-
-  if (right.wasOutsideBounds) {
-    const left = getLeftPosition(x, props);
-
-    x = left.value;
-  }
-
-  return {
-    x: clamp({
-      amount: x,
-      min: TOOLTIP_MARGIN,
-      max: window.innerWidth - props.tooltipDimensions.width - TOOLTIP_MARGIN - SCROLLBAR_WIDTH,
-    }),
-    y: clamp({
-      amount: y,
-      min: window.scrollY + TOOLTIP_MARGIN,
-      max: window.scrollY + window.innerHeight - props.tooltipDimensions.height - TOOLTIP_MARGIN,
-    }),
-  };
-}
-
-interface IsOutsideBoundsData {
-  current: number;
-  alteredPosition: AlteredPositionProps;
-}
-
-function isOutsideBounds(data: IsOutsideBoundsData) {
-  const { current, alteredPosition } = data;
-
-  const min = TOOLTIP_MARGIN;
-  const max = window.innerWidth - TOOLTIP_MARGIN - SCROLLBAR_WIDTH;
-
-  const isLeft = current < min;
-  const isRight = current + alteredPosition.tooltipDimensions.width > max;
-
-  return { left: isLeft, right: isRight };
-}
-
-type getFunction = (value: number, props: AlteredPositionProps) => { value: number; wasOutsideBounds: boolean };
-
-function getLeftPosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
-  const [value] = args;
-
-  return { value: value - TOOLTIP_MARGIN, wasOutsideBounds: false };
-}
-
-function getRightPosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
-  const [value, props] = args;
-
-  let x = value;
-
-  if (props.isTouchDevice) {
-    x += props.chartBounds.x + props.containerBounds.x;
-    x -= props.tooltipDimensions.width / 2;
-  } else {
-    x += props.bandwidth;
-  }
-
-  const wasOutsideBounds = isOutsideBounds({
-    current: x,
-    alteredPosition: props,
-  });
-
-  if (wasOutsideBounds.right) {
-    if (props.isTouchDevice) {
-      x = props.containerBounds.x + props.containerBounds.width - props.tooltipDimensions.width;
-    } else {
-      x -= props.tooltipDimensions.width + props.bandwidth + TOOLTIP_MARGIN;
-    }
-  } else {
-    x += TOOLTIP_MARGIN;
-  }
-
-  return { value: x, wasOutsideBounds: wasOutsideBounds.right };
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getAlteredVerticalBarPosition.ts

@@ -1,105 +0,0 @@
-import { clamp } from '@shopify/polaris-viz-core';
-
-import {
-  getAbovePosition,
-  getBelowPosition,
-  getCenterPosition,
-  getInlinePosition,
-  getLeftPosition,
-  getRightPosition,
-  getVerticalCenterPosition,
-} from '../utilities';
-import type { AlteredPositionProps, AlteredPositionReturn } from '../types';
-import { TooltipHorizontalOffset, TooltipVerticalOffset } from '../types';
-import { TOOLTIP_MARGIN, SCROLLBAR_WIDTH } from '../constants';
-
-// Keep the tooltip within the bounds of the chart.
-// Based on "position" the tooltip will be placed
-// around the chart item so the item should never
-// be obscured by the tooltip.
-export function getAlteredVerticalBarPosition(props: AlteredPositionProps): AlteredPositionReturn {
-  const { currentX, currentY, position, scrollContainer } = props;
-
-  const newPosition = { ...position };
-
-  let x = currentX;
-  let y = currentY - (scrollContainer?.scrollTop ?? 0);
-
-  //
-  // Y POSITIONING
-  //
-  if (props.isPerformanceImpacted || props.isTouchDevice) {
-    y = clamp({
-      amount: props.containerBounds.y - props.tooltipDimensions.height - (scrollContainer?.scrollTop ?? 0),
-      min: 0,
-      max: window.scrollY + window.innerHeight - props.tooltipDimensions.height - TOOLTIP_MARGIN,
-    });
-  } else {
-    if (newPosition.vertical === TooltipVerticalOffset.Inline) {
-      newPosition.horizontal = TooltipHorizontalOffset.Left;
-
-      const inline = getInlinePosition(y, props);
-      y = inline.value;
-    }
-
-    if (newPosition.vertical === TooltipVerticalOffset.Center) {
-      const verticalCenter = getVerticalCenterPosition(y, props);
-      y = verticalCenter.value;
-    }
-
-    if (newPosition.vertical === TooltipVerticalOffset.Above) {
-      const above = getAbovePosition(y, props);
-      y = above.value;
-
-      if (above.wasOutsideBounds) {
-        newPosition.horizontal = TooltipHorizontalOffset.Left;
-      }
-    }
-
-    if (newPosition.vertical === TooltipVerticalOffset.Below) {
-      const below = getBelowPosition(y, props);
-      y = below.value;
-
-      if (below.wasOutsideBounds) {
-        newPosition.horizontal = TooltipHorizontalOffset.Left;
-      }
-    }
-  }
-
-  //
-  // X POSITIONING
-  //
-
-  if (newPosition.horizontal === TooltipHorizontalOffset.Left) {
-    const left = getLeftPosition(x, props);
-
-    if (left.wasOutsideBounds) {
-      newPosition.horizontal = TooltipHorizontalOffset.Right;
-    } else {
-      x = left.value;
-    }
-  }
-
-  if (newPosition.horizontal === TooltipHorizontalOffset.Right) {
-    const right = getRightPosition(x, props);
-    x = right.value;
-  }
-
-  if (newPosition.horizontal === TooltipHorizontalOffset.Center) {
-    const center = getCenterPosition(x, props);
-    x = center.value;
-  }
-
-  return {
-    x: clamp({
-      amount: x,
-      min: TOOLTIP_MARGIN,
-      max: window.innerWidth - props.tooltipDimensions.width - TOOLTIP_MARGIN - SCROLLBAR_WIDTH,
-    }),
-    y: clamp({
-      amount: y,
-      min: window.scrollY + TOOLTIP_MARGIN,
-      max: window.scrollY + window.innerHeight - props.tooltipDimensions.height - TOOLTIP_MARGIN,
-    }),
-  };
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getDonutChartTooltipPosition.ts

@@ -1,64 +0,0 @@
-import type { BoundingRect } from '@shopify/polaris-viz-core';
-
-import { TOOLTIP_POSITION_DEFAULT_RETURN } from '../constants';
-import type { TooltipPositionParams } from '../types';
-
-import { eventPointNative, getXYFromEventType } from './eventPoint';
-
-interface Props extends Pick<TooltipPositionParams, 'event' | 'eventType' | 'index'> {
-  containerBounds: BoundingRect;
-  parentElement: SVGSVGElement | null;
-}
-
-export function getDonutChartTooltipPosition({ containerBounds, event, eventType, index, parentElement }: Props) {
-  if (index == null) {
-    return TOOLTIP_POSITION_DEFAULT_RETURN;
-  }
-
-  if (eventType === 'mouse' && (event instanceof MouseEvent || event instanceof TouchEvent)) {
-    if (index == null || event == null) {
-      return TOOLTIP_POSITION_DEFAULT_RETURN;
-    }
-
-    const point = eventPointNative(event!);
-
-    if (point == null) {
-      return TOOLTIP_POSITION_DEFAULT_RETURN;
-    }
-
-    const { x, y } = getXYFromEventType(event);
-
-    return {
-      x,
-      y,
-      activeIndex: index,
-    };
-  } else {
-    if (event?.target == null || parentElement == null) {
-      return TOOLTIP_POSITION_DEFAULT_RETURN;
-    }
-
-    const parentWidth = parentElement.clientWidth;
-
-    const startAngle = (event.target as SVGElement).getAttribute('data-start-angle');
-    const endAngle = (event.target as SVGElement).getAttribute('data-end-angle');
-
-    const leftOffset = containerBounds.width - parentWidth;
-
-    const radius = Math.min(containerBounds.width - leftOffset, containerBounds.height) / 2;
-
-    const centerX = containerBounds.x + leftOffset + radius;
-    const centerY = containerBounds.y + containerBounds.height / 2;
-
-    const midAngle = (Number(startAngle) + Number(endAngle)) / 2;
-
-    const x = centerX + radius * Math.cos(midAngle - Math.PI / 2);
-    const y = centerY + radius * Math.sin(midAngle - Math.PI / 2);
-
-    return {
-      x,
-      y,
-      activeIndex: index,
-    };
-  }
-}