@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,64 @@
+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,
+    };
+  }
+}