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

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipRow/TooltipRow.tsx

@@ -1,57 +0,0 @@
-import type { Shape, Color, TrendIndicator as TrendIndicatorType } from '@shopify/polaris-viz-core';
-
-import { SeriesIcon } from '../../../../shared/SeriesIcon';
-import { PREVIEW_ICON_SIZE } from '../../../../constants';
-import { TrendIndicator } from '../../../TrendIndicator';
-import { useTheme } from '@shopify/polaris-viz-core';
-import { TITLE_MARGIN } from '../../constants';
-
-import styles from './TooltipRow.module.scss';
-
-export interface Props {
-  label: string;
-  shape: Shape;
-  value: string;
-  color?: Color;
-  isComparison?: boolean;
-  renderSeriesIcon?: () => React.ReactNode;
-  trend?: TrendIndicatorType;
-}
-
-export function TooltipRow({ color, isComparison = false, label, renderSeriesIcon, shape, trend, value }: Props) {
-  const selectedTheme = useTheme();
-
-  return (
-    <div className={styles.Row}>
-      {color != null && (
-        <div style={{ width: PREVIEW_ICON_SIZE }}>
-          {renderSeriesIcon?.() ?? (
-            <SeriesIcon color={color} shape={shape} lineStyle={isComparison ? 'dotted' : 'solid'} />
-          )}
-        </div>
-      )}
-      <span
-        className={styles.Truncate}
-        style={{
-          color: selectedTheme.tooltip.textColor,
-          marginRight: TITLE_MARGIN,
-        }}
-      >
-        {label}
-      </span>
-      <span
-        className={styles.Value}
-        style={{
-          color: selectedTheme.tooltip.textColor,
-        }}
-      >
-        {value}
-      </span>
-      {trend != null && (
-        <div className={styles.Trend}>
-          <TrendIndicator {...trend} />
-        </div>
-      )}
-    </div>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipRow/index.ts

@@ -1 +0,0 @@
-export { TooltipRow } from './TooltipRow';

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipSeries/TooltipSeries.module.scss

@@ -1,4 +0,0 @@
-.Series {
-  gap: 4px;
-  display: grid;
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipSeries/TooltipSeries.tsx

@@ -1,26 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { useChartContext } from '@shopify/polaris-viz-core';
-import { TooltipSeriesName } from '../TooltipSeriesName';
-import { Fragment } from 'react';
-
-import styles from './TooltipSeries.module.scss';
-
-export interface Props {
-  children: ReactNode;
-  name?: string;
-  templateColumnCount?: number;
-}
-
-export function TooltipSeries({ children, templateColumnCount = 2, name }: Props) {
-  const { theme } = useChartContext();
-
-  return (
-    <Fragment>
-      {name != null && <TooltipSeriesName theme={theme}>{name}</TooltipSeriesName>}
-      <div className={styles.Series} style={{ gridTemplateColumns: `repeat(${templateColumnCount}, auto)` }}>
-        {children}
-      </div>
-    </Fragment>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipSeries/index.ts

@@ -1 +0,0 @@
-export { TooltipSeries } from './TooltipSeries';

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipSeriesName/TooltipSeriesName.module.scss

@@ -1,4 +0,0 @@
-.AxisTitle {
-  line-height: 16px;
-  margin: 0;
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipSeriesName/TooltipSeriesName.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { FONT_SIZE, useTheme } from '@shopify/polaris-viz-core';
-import styles from './TooltipSeriesName.module.scss';
-
-export function TooltipSeriesName({ children, theme }: { children: ReactNode; theme: string }) {
-  const selectedTheme = useTheme(theme);
-
-  return (
-    <p
-      className={styles.AxisTitle}
-      style={{
-        color: selectedTheme.tooltip.titleColor,
-        fontSize: FONT_SIZE,
-      }}
-    >
-      {children}
-    </p>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipSeriesName/index.ts

@@ -1 +0,0 @@
-export { TooltipSeriesName } from './TooltipSeriesName';

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipTitle/TooltipTitle.module.scss

@@ -1,7 +0,0 @@
-.Title {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 20px;
-  margin: 0;
-  overflow-wrap: break-word;
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipTitle/TooltipTitle.tsx

@@ -1,15 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { useTheme } from '@shopify/polaris-viz-core';
-
-import styles from './TooltipTitle.module.scss';
-
-export function TooltipTitle({ children, theme, color }: { children: ReactNode; theme: string; color?: string }) {
-  const selectedTheme = useTheme(theme);
-
-  return (
-    <p className={styles.Title} style={{ color: color ?? selectedTheme.tooltip.titleColor }}>
-      {children}
-    </p>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipTitle/index.ts

@@ -1 +0,0 @@
-export { TooltipTitle } from './TooltipTitle';

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

@@ -1,5 +0,0 @@
-export { TooltipRow } from './TooltipRow';
-export { TooltipContentContainer } from './TooltipContentContainer';
-export { TooltipTitle } from './TooltipTitle';
-export { TooltipSeriesName } from './TooltipSeriesName';
-export { TooltipSeries } from './TooltipSeries';

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

@@ -1,2 +0,0 @@
-export const SPACE_BETWEEN_LABEL_AND_VALUE = 48;
-export const TITLE_MARGIN = 10;

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/hooks/useGetLongestLabelFromData.ts

@@ -1,56 +0,0 @@
-import { estimateStringWidth, useChartContext } from '@shopify/polaris-viz-core';
-
-import type { TooltipData } from '../../../types';
-
-interface Size {
-  width: number;
-  keyWidth: number;
-  valueWidth: number;
-}
-
-export function useGetLongestLabelFromData(tooltipData: TooltipData[] = []) {
-  const { characterWidths } = useChartContext();
-
-  const sizes: Size[] = [];
-
-  if (tooltipData.length === 0) {
-    return {
-      keyWidth: 0,
-      valueWidth: 0,
-    };
-  }
-
-  tooltipData.forEach(({ data }) => {
-    if (!data.length) {
-      sizes.push({
-        width: 0,
-        keyWidth: 0,
-        valueWidth: 0,
-      });
-    } else {
-      data.forEach(({ key, value }) => {
-        const keyWidth = estimateStringWidth(key, characterWidths);
-        const valueWidth = estimateStringWidth(value, characterWidths);
-
-        sizes.push({
-          width: keyWidth + valueWidth,
-          keyWidth,
-          valueWidth,
-        });
-      });
-    }
-  });
-
-  const { keyWidth, valueWidth } = sizes.reduce((prev, cur) => {
-    if (prev!.width < cur.width) {
-      return cur;
-    }
-
-    return prev;
-  }, sizes[0])!;
-
-  return {
-    keyWidth,
-    valueWidth,
-  };
-}

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

@@ -1,4 +0,0 @@
-export { TooltipContent } from './TooltipContent';
-export type { TooltipContentProps } from './TooltipContent';
-export { TooltipContentContainer, TooltipTitle, TooltipSeriesName, TooltipRow, TooltipSeries } from './components';
-export { getTooltipContentTemplateColumnCount } from './utilities/get-tooltip-template-content-column-count';

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/utilities/get-tooltip-template-content-column-count.ts

@@ -1,10 +0,0 @@
-import type { TooltipData } from '../../../types';
-
-const DEFAULT_COLUMN_COUNT = 2;
-
-export function getTooltipContentTemplateColumnCount(data: TooltipData) {
-  const hasTrend = data.data.some(({ trend }) => trend != null);
-  const hasColor = data.data.some(({ color }) => color != null);
-
-  return DEFAULT_COLUMN_COUNT + (hasColor ? 1 : 0) + (hasTrend ? 1 : 0);
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/utilities/tests/get-tooltip-template-content-column-count.test.ts

@@ -1,48 +0,0 @@
-import { getTooltipContentTemplateColumnCount } from '../get-tooltip-template-content-column-count';
-import type { TooltipData } from '../../../../types';
-
-describe('getTooltipContentTemplateColumnCount()', () => {
-  it('returns the default column count when data does not have a trend or color', () => {
-    const data: TooltipData = {
-      shape: 'Line',
-      data: [
-        {
-          key: 'Sessions from Google ads',
-          value: '5250',
-        },
-      ],
-    };
-    expect(getTooltipContentTemplateColumnCount(data)).toBe(2);
-  });
-
-  it('adds a column when data has a color', () => {
-    const data: TooltipData = {
-      shape: 'Line',
-      data: [{ key: 'Sessions from Google ads', value: '5250', color: 'red' }],
-    };
-    expect(getTooltipContentTemplateColumnCount(data)).toBe(3);
-  });
-
-  it('adds a column when data has a trend', () => {
-    const data: TooltipData = {
-      shape: 'Line',
-      data: [{ key: 'Sessions from Google ads', value: '5250', trend: { value: '10%' } }],
-    };
-    expect(getTooltipContentTemplateColumnCount(data)).toBe(3);
-  });
-
-  it('returns all columns when data has a color and trend', () => {
-    const data: TooltipData = {
-      shape: 'Line',
-      data: [
-        {
-          key: 'Sessions from Google ads with color and trend',
-          value: '5250',
-          color: 'red',
-          trend: { value: '10%' },
-        },
-      ],
-    };
-    expect(getTooltipContentTemplateColumnCount(data)).toBe(4);
-  });
-});

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

@@ -1,338 +0,0 @@
-import type { DataType, BoundingRect, DataSeries, ChartType } from '@shopify/polaris-viz-core';
-import type { ScaleBand, ScaleLinear } from 'd3-scale';
-import type { TooltipPosition } from './types';
-import type { Margin } from '../../types';
-import type { ReactNode } from 'react';
-
-import { getHorizontalBarChartTooltipPosition } from './utilities/getHorizontalBarChartTooltipPosition';
-import { getVerticalBarChartTooltipPosition } from './utilities/getVerticalBarChartTooltipPosition';
-import { getDonutChartTooltipPosition } from './utilities/getDonutChartTooltipPosition';
-import { getLineChartTooltipPosition } from './utilities/getLineChartTooltipPosition';
-import { TooltipAnimatedContainer } from './components/TooltipAnimatedContainer';
-import { shouldBlockTooltipEvents } from './utilities/shouldBlockTooltipEvents';
-import { InternalChartType, useChartContext } from '@shopify/polaris-viz-core';
-import { useEffect, useRef, useState, useMemo, useCallback } from 'react';
-import { useRootContainer } from '../../hooks/useRootContainer';
-import { DEFAULT_TOOLTIP_POSITION } from './constants';
-import { SwallowErrors } from '../SwallowErrors';
-import { TOOLTIP_ID } from '../../constants';
-import { createPortal } from 'react-dom';
-
-const TOUCH_START_DELAY = 300;
-
-interface BaseProps {
-  chartBounds: BoundingRect;
-  chartType: InternalChartType;
-  focusElementDataType: DataType;
-  getMarkup: (index: number) => ReactNode;
-  margin: Margin;
-  parentElement: SVGSVGElement | null;
-  bandwidth?: number;
-  data?: DataSeries[];
-  forceActiveIndex?: number | null;
-  onIndexChange?: (index: number | null) => void;
-  id?: string;
-  longestSeriesIndex?: number;
-  type?: ChartType;
-  xScale?: ScaleLinear<number, number> | ScaleBand<string>;
-  yScale?: ScaleLinear<number, number>;
-}
-
-function TooltipWrapperRaw(props: BaseProps) {
-  const {
-    bandwidth = 0,
-    chartBounds,
-    chartType,
-    data,
-    forceActiveIndex,
-    focusElementDataType,
-    id,
-    longestSeriesIndex,
-    onIndexChange,
-    parentElement,
-    type,
-    xScale,
-    yScale,
-  } = props;
-  const { scrollContainer, isTouchDevice, containerBounds } = useChartContext();
-  const [position, setPosition] = useState<TooltipPosition>({
-    x: 0,
-    y: 0,
-    activeIndex: -1,
-    position: DEFAULT_TOOLTIP_POSITION,
-  });
-
-  const activeIndexRef = useRef<number | null>(null);
-  const touchStartTimer = useRef<number>(0);
-  const isLongTouch = useRef(false);
-
-  const focusElements = useMemo<NodeListOf<SVGPathElement> | undefined>(() => {
-    return parentElement?.querySelectorAll(`[data-type="${focusElementDataType}"][aria-hidden="false"]`);
-  }, [focusElementDataType, parentElement]);
-
-  useEffect(() => {
-    activeIndexRef.current = position.activeIndex;
-  }, [position.activeIndex]);
-
-  const alwaysUpdatePosition = [InternalChartType.Line, InternalChartType.Donut].includes(chartType) && !isTouchDevice;
-
-  const getPosition = useCallback(
-    ({
-      event,
-      eventType,
-      index,
-    }: {
-      eventType: 'mouse' | 'focus';
-      event?: MouseEvent | TouchEvent | FocusEvent;
-      index?: number;
-    }) => {
-      const scrollY = scrollContainer == null ? 0 : scrollContainer.scrollTop;
-
-      switch (chartType) {
-        case InternalChartType.Line:
-          return getLineChartTooltipPosition({
-            chartBounds,
-            containerBounds,
-            scrollY,
-            data: data ?? [],
-            event,
-            eventType,
-            index,
-            isTouchDevice,
-            longestSeriesIndex: longestSeriesIndex ?? 0,
-            xScale: xScale as ScaleLinear<number, number>,
-          });
-        case InternalChartType.HorizontalBar:
-          return getHorizontalBarChartTooltipPosition({
-            chartBounds,
-            data: data ?? [],
-            event,
-            eventType,
-            index,
-            longestSeriesIndex: longestSeriesIndex ?? 0,
-            type,
-            xScale: xScale as ScaleLinear<number, number>,
-          });
-        case InternalChartType.Donut:
-          return getDonutChartTooltipPosition({
-            containerBounds,
-            event,
-            eventType,
-            index: index ?? forceActiveIndex ?? undefined,
-            parentElement,
-          });
-        case InternalChartType.Bar:
-        default:
-          return getVerticalBarChartTooltipPosition({
-            chartBounds,
-            containerBounds,
-            data: data ?? [],
-            event,
-            eventType,
-            index,
-            longestSeriesIndex: longestSeriesIndex ?? 0,
-            type,
-            xScale: xScale as ScaleBand<string>,
-            yScale: yScale as ScaleLinear<number, number>,
-          });
-      }
-    },
-    [
-      chartBounds,
-      containerBounds,
-      chartType,
-      data,
-      forceActiveIndex,
-      longestSeriesIndex,
-      isTouchDevice,
-      type,
-      xScale,
-      yScale,
-      scrollContainer,
-      parentElement,
-    ],
-  );
-
-  const showAndPositionTooltip = useCallback(
-    (event: MouseEvent | TouchEvent) => {
-      const newPosition = getPosition({ event, eventType: 'mouse' });
-
-      const scrollContainerTop = Number(scrollContainer?.scrollTop ?? 0);
-      const y = newPosition.y + scrollContainerTop;
-
-      if (alwaysUpdatePosition && (newPosition.x < chartBounds.x || y < chartBounds.y)) {
-        return;
-      }
-
-      if (!alwaysUpdatePosition && activeIndexRef.current === newPosition.activeIndex) {
-        return;
-      }
-
-      if (shouldBlockTooltipEvents(event)) {
-        return;
-      }
-
-      setPosition(newPosition);
-      onIndexChange?.(newPosition.activeIndex);
-    },
-    [alwaysUpdatePosition, chartBounds, getPosition, onIndexChange, scrollContainer],
-  );
-
-  const onMouseMove = useCallback(
-    (event: MouseEvent | TouchEvent) => {
-      window.clearTimeout(touchStartTimer.current);
-
-      if (typeof TouchEvent !== 'undefined' && event instanceof TouchEvent) {
-        if (isLongTouch.current === true) {
-          // prevents scrolling after long touch (since it is supposed to move the tooltip/datapoint vs scroll)
-          event?.preventDefault();
-        } else {
-          return;
-        }
-      }
-
-      showAndPositionTooltip(event);
-    },
-    [showAndPositionTooltip],
-  );
-
-  const onMouseLeave = useCallback(() => {
-    isLongTouch.current = false;
-    window.clearTimeout(touchStartTimer.current);
-    onIndexChange?.(null);
-    setPosition((prevState) => {
-      return { ...prevState, activeIndex: -1 };
-    });
-  }, [onIndexChange]);
-
-  const onTouchStart = useCallback(
-    (event: TouchEvent) => {
-      touchStartTimer.current = window.setTimeout(() => {
-        event.preventDefault();
-
-        isLongTouch.current = true;
-
-        showAndPositionTooltip(event);
-      }, TOUCH_START_DELAY);
-    },
-    [showAndPositionTooltip],
-  );
-
-  const onFocus = useCallback(
-    (event: FocusEvent) => {
-      const target = event.currentTarget as SVGSVGElement;
-
-      if (!target) {
-        return;
-      }
-
-      const index = Number(target.dataset.index);
-      const newPosition = getPosition({ event, index, eventType: 'focus' });
-
-      setPosition(newPosition);
-      onIndexChange?.(newPosition.activeIndex);
-    },
-    [getPosition, onIndexChange],
-  );
-
-  const onFocusIn = useCallback(() => {
-    if (!parentElement?.contains(document.activeElement)) {
-      onMouseLeave();
-    }
-  }, [parentElement, onMouseLeave]);
-
-  const setFocusListeners = useCallback(
-    (attach: boolean) => {
-      if (!focusElements) {
-        return;
-      }
-
-      focusElements.forEach((el: SVGPathElement) => {
-        if (attach) {
-          el.addEventListener('focus', onFocus);
-        } else {
-          el.removeEventListener('focus', onFocus);
-        }
-      });
-    },
-    [focusElements, onFocus],
-  );
-
-  useEffect(() => {
-    if (!parentElement) {
-      return;
-    }
-
-    parentElement.addEventListener('mousemove', onMouseMove);
-    parentElement.addEventListener('mouseleave', onMouseLeave);
-    parentElement.addEventListener('touchstart', onTouchStart);
-    parentElement.addEventListener('touchmove', onMouseMove);
-    parentElement.addEventListener('touchend', onMouseLeave);
-
-    setFocusListeners(true);
-
-    return () => {
-      parentElement.removeEventListener('mousemove', onMouseMove);
-      parentElement.removeEventListener('mouseleave', onMouseLeave);
-      parentElement.removeEventListener('touchstart', onTouchStart);
-      parentElement.removeEventListener('touchmove', onMouseMove);
-      parentElement.removeEventListener('touchend', onMouseLeave);
-
-      setFocusListeners(false);
-    };
-  }, [parentElement, onMouseLeave, onTouchStart, setFocusListeners, onMouseMove]);
-
-  useEffect(() => {
-    document.addEventListener('focusin', onFocusIn);
-
-    return () => {
-      document.removeEventListener('focusin', onFocusIn);
-    };
-  }, [parentElement, onFocusIn]);
-
-  if (position.activeIndex == null || position.activeIndex < 0) {
-    return null;
-  }
-
-  return (
-    <TooltipAnimatedContainer
-      bandwidth={bandwidth}
-      chartBounds={chartBounds}
-      chartType={chartType}
-      currentX={position.x}
-      currentY={position.y}
-      id={id}
-      margin={props.margin}
-      position={position.position}
-    >
-      {props.getMarkup(position.activeIndex)}
-    </TooltipAnimatedContainer>
-  );
-}
-
-interface TooltipWrapperProps extends BaseProps {
-  usePortal?: boolean;
-}
-
-export function TooltipWrapper({ usePortal = false, ...props }: TooltipWrapperProps) {
-  if (usePortal) {
-    return <TooltipWithPortal {...props} />;
-  }
-
-  return <TooltipWithErrors {...props} />;
-}
-
-function TooltipWithErrors(props: BaseProps) {
-  return (
-    <SwallowErrors>
-      <TooltipWrapperRaw {...props} />
-    </SwallowErrors>
-  );
-}
-
-function TooltipWithPortal(props: BaseProps) {
-  const container = useRootContainer(TOOLTIP_ID);
-
-  if (!container) return null;
-  return createPortal(<TooltipWithErrors {...props} />, container);
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/components/TooltipAnimatedContainer.module.scss

@@ -1,6 +0,0 @@
-.Container {
-  position: absolute;
-  pointer-events: none;
-  z-index: 520;
-  max-width: 70%;
-}