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

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/Tooltip.tsx

@@ -1,149 +0,0 @@
-import type { IFunnelChartColors } from '@/shared/charts/components/GFunnelChart/types';
-import type { Color, DataPoint, LabelFormatter } from '@shopify/polaris-viz-core';
-import type { FunnelChartMetaData, MetaDataTrendIndicator } from '../../types';
-
-import { DEFAULT_THEME_NAME, useTheme } from '@shopify/polaris-viz-core';
-import { Fragment } from 'react';
-import { FUNNEL_CHART_CONNECTOR_GRADIENT } from '../../../../shared/FunnelChartConnector';
-import { FUNNEL_CHART_SEGMENT_FILL } from '../../../../shared/FunnelChartSegment';
-import { SeriesIcon } from '../../../../shared/SeriesIcon';
-import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData';
-import { TooltipContentContainer, TooltipTitle } from '../../../TooltipContent';
-import { TrendIndicator } from '../../../TrendIndicator';
-import { TOOLTIP_WIDTH } from '../../constants';
-import { calculateDropOff } from '../../utilities/calculate-dropoff';
-
-export interface TooltipContentProps {
-  activeIndex: number;
-  dataSeries: DataPoint[];
-  trends: FunnelChartMetaData['trends'];
-  tooltipLabels: {
-    reached: string;
-    dropped: string;
-  };
-  funnelColors?: IFunnelChartColors;
-  labelFormatter: LabelFormatter;
-  percentageFormatter: (value: number) => string;
-}
-
-interface Data {
-  key: string;
-  value: string;
-  color: Color;
-  percent: number | null;
-  trendKey: string;
-}
-
-export function Tooltip({
-  activeIndex,
-  dataSeries,
-  trends,
-  tooltipLabels,
-  funnelColors,
-  labelFormatter,
-  percentageFormatter,
-}: TooltipContentProps) {
-  const selectedTheme = useTheme(DEFAULT_THEME_NAME);
-
-  const point = dataSeries[activeIndex];
-  const previousPoint = dataSeries[activeIndex - 1];
-  const isFirst = activeIndex === 0;
-
-  const currentValue = point?.value ?? null;
-  const previousValue = previousPoint?.value ?? null;
-  const hasValidValues = currentValue !== null && previousValue !== null;
-
-  const getDropOffPercent = () => {
-    if (isFirst || !hasValidValues || previousValue === 0) return null;
-
-    return Math.abs(calculateDropOff(previousValue, currentValue));
-  };
-
-  const getReachedPercent = (percDropOff: number | null) => {
-    if (isFirst) return 100;
-    if (!hasValidValues) return null;
-    return 100 - percDropOff!;
-  };
-
-  const percDropOffage = getDropOffPercent();
-  const reachedPercent = getReachedPercent(percDropOffage);
-
-  const data: Data[] = [
-    {
-      key: tooltipLabels.reached,
-      value: currentValue === null ? '-' : (labelFormatter(currentValue) as string),
-      color: funnelColors?.segment.fill ?? FUNNEL_CHART_SEGMENT_FILL,
-      percent: reachedPercent,
-      trendKey: 'reached',
-    },
-  ];
-
-  if (!isFirst && hasValidValues) {
-    let value = '0';
-    if (previousValue > 0 && previousValue >= currentValue) {
-      value = labelFormatter(previousValue - currentValue) as string;
-    }
-
-    data.push({
-      key: tooltipLabels.dropped,
-      value,
-      percent: percDropOffage,
-      color: funnelColors?.connector ?? FUNNEL_CHART_CONNECTOR_GRADIENT,
-      trendKey: 'dropped',
-    });
-  }
-
-  return (
-    <TooltipContentContainer
-      maxWidth={TOOLTIP_WIDTH}
-      minWidth={TOOLTIP_WIDTH}
-      theme={DEFAULT_THEME_NAME}
-      color={selectedTheme.tooltip.backgroundColor}
-    >
-      {() => (
-        <Fragment>
-          <TooltipTitle
-            theme={DEFAULT_THEME_NAME}
-            color={selectedTheme.tooltip.textColor}
-            aria-label={`Step: ${point!.key}`}
-          >
-            {point!.key}
-          </TooltipTitle>
-          <div className="GFunnelChartNextTooltip-rows">
-            {data.map(({ key, value, color, percent, trendKey }, index) => {
-              const formattedPercent = percent === null ? '-' : percentageFormatter(percent);
-              const ariaLabel = `${key}: ${value}, ${formattedPercent}`;
-
-              const { trendIndicatorProps } = getTrendIndicatorData(
-                (trends as MetaDataTrendIndicator[])?.[activeIndex],
-              );
-              const trendByKey = (trendIndicatorProps as any)[trendKey];
-
-              return (
-                <div className="GFunnelChartNextTooltip-row" key={`row-${index}-${key}`} aria-label={ariaLabel}>
-                  <div className="GFunnelChartNextTooltip-keys">
-                    <SeriesIcon color={color!} />
-                    <span>{key}</span>
-                  </div>
-                  <div className="GFunnelChartNextTooltip-values">
-                    <span>
-                      <strong>{value}</strong>
-                    </span>
-                    <span>
-                      <strong>{formattedPercent}</strong>
-                    </span>
-                    {trendIndicatorProps && (
-                      <div className="GFunnelChartNextTooltip-trendIndicator">
-                        <TrendIndicator {...trendByKey} />
-                      </div>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </Fragment>
-      )}
-    </TooltipContentContainer>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipOverlay.tsx

@@ -1,117 +0,0 @@
-import type { IFunnelChartColors } from '../../../../GFunnelChart/types';
-import type { TooltipPlacement } from './FunnelTooltip/FunnelTooltip';
-import type { LabelFormatter } from '@shopify/polaris-viz-core';
-import type { GDataPoint } from '@/shared/charts/types';
-import type { ScaleBand } from 'd3-scale';
-
-import { TOOLTIP_WIDTH, TOOLTIP_GAP_FROM_BAR, TOOLTIP_HEIGHT, SHORT_TOOLTIP_HEIGHT } from '../constants';
-import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip';
-import { CustomTooltip } from './Tooltip/CustomTooltip';
-import { Tooltip } from './Tooltip/Tooltip';
-
-interface TooltipOverlayProps {
-  tooltipIndex: number;
-  dataSeries: GDataPoint[];
-  trends: ReturnType<any> | undefined;
-  tooltipLabels: { reached: string; dropped: string };
-  funnelColors?: IFunnelChartColors;
-  labelFormatter: LabelFormatter;
-  percentageFormatter: (value: number) => string;
-  getBarHeight: (value: number) => number;
-  getXPosition: (dataPoint: GDataPoint) => number;
-  getYPosition: (dataPoint: GDataPoint, height: number) => { y: number; placement: TooltipPlacement };
-  chartX: number;
-  barWidth: number;
-  xScale: ScaleBand<string>;
-  onTooltipMouseEnter: () => void;
-  onTooltipMouseLeave: () => void;
-}
-
-export function TooltipOverlay({
-  tooltipIndex,
-  dataSeries,
-  trends,
-  tooltipLabels,
-  funnelColors,
-  labelFormatter,
-  percentageFormatter,
-  getBarHeight,
-  getXPosition,
-  getYPosition,
-  chartX,
-  barWidth,
-  xScale,
-  onTooltipMouseEnter,
-  onTooltipMouseLeave,
-}: TooltipOverlayProps) {
-  const activeDataSeries = dataSeries[tooltipIndex];
-  if (!activeDataSeries) return null;
-
-  const xPosition = getXPosition(activeDataSeries);
-  const chartTooltip = activeDataSeries.chartTooltip;
-  const tooltipHeight = chartTooltip ? TOOLTIP_HEIGHT : SHORT_TOOLTIP_HEIGHT;
-  const { y: yPosition, placement } = getYPosition(activeDataSeries, tooltipHeight);
-  const chartTooltipPrimaryAction = activeDataSeries.chartTooltipPrimaryAction;
-
-  // Hover bridge: covers area between tooltip and bar so mouse can travel between them
-  const activeBarHeight = getBarHeight(activeDataSeries.value ?? 0);
-  const bridgeHeight = TOOLTIP_GAP_FROM_BAR + activeBarHeight;
-
-  // Compute union of tooltip and section edges (relative to tooltip left)
-  const currentX = xScale(activeDataSeries.key.toString()) ?? 0;
-  const sectionLeftRel = chartX + currentX - xPosition;
-  const sectionRightRel = sectionLeftRel + barWidth;
-  const bridgeLeft = Math.min(0, sectionLeftRel);
-  const bridgeRight = Math.max(TOOLTIP_WIDTH, sectionRightRel);
-  const bridgeWidth = bridgeRight - bridgeLeft;
-
-  const isBelow = placement === 'below';
-
-  return (
-    <FunnelTooltip key={`${tooltipIndex}-${placement}`} x={xPosition} y={yPosition} placement={placement}>
-      <div
-        role="presentation"
-        style={{
-          position: 'relative',
-          overflow: 'visible',
-          pointerEvents: 'auto',
-          ...(isBelow ? { paddingTop: TOOLTIP_GAP_FROM_BAR } : { paddingBottom: TOOLTIP_GAP_FROM_BAR }),
-        }}
-        onMouseEnter={onTooltipMouseEnter}
-        onMouseLeave={onTooltipMouseLeave}
-      >
-        {chartTooltip ? (
-          <CustomTooltip data={chartTooltip} primaryAction={chartTooltipPrimaryAction} item={activeDataSeries} />
-        ) : (
-          <Tooltip
-            activeIndex={tooltipIndex}
-            dataSeries={dataSeries}
-            trends={trends}
-            tooltipLabels={tooltipLabels}
-            funnelColors={funnelColors}
-            labelFormatter={labelFormatter}
-            percentageFormatter={percentageFormatter}
-          />
-        )}
-        {/* Invisible trapezoidal hover bridge between tooltip and bar */}
-        <div
-          style={{
-            position: 'absolute',
-            ...(isBelow
-              ? {
-                  top: -bridgeHeight,
-                  clipPath: `polygon(${sectionLeftRel - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 100%, ${-bridgeLeft}px 100%)`,
-                }
-              : {
-                  bottom: -bridgeHeight,
-                  clipPath: `polygon(${-bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 100%, ${sectionLeftRel - bridgeLeft}px 100%)`,
-                }),
-            left: bridgeLeft,
-            width: bridgeWidth,
-            height: bridgeHeight,
-          }}
-        />
-      </div>
-    </FunnelTooltip>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipWithPortal.tsx

@@ -1,12 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { useRootContainer } from '../../../hooks/useRootContainer';
-import { TOOLTIP_ID } from '../../../constants';
-import { createPortal } from 'react-dom';
-
-export function TooltipWithPortal({ children }: { children: ReactNode }) {
-  const container = useRootContainer(TOOLTIP_ID);
-
-  if (!container) return null;
-  return createPortal(children, container);
-}

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

@@ -1,8 +0,0 @@
-export type { TooltipPlacement } from './FunnelTooltip';
-
-export { FunnelChartLabels } from './FunnelChartLabels';
-export { FunnelTooltip } from './FunnelTooltip';
-export { TooltipWithPortal } from './TooltipWithPortal';
-export { ScaleIcon } from './ScaleIcon';
-export { ScaleIconTooltip } from './ScaleIconTooltip';
-export { Tooltip } from './Tooltip';

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

@@ -1,28 +0,0 @@
-export const FUNNEL_CONNECTOR_Y_OFFSET = 30;
-export const TOOLTIP_WIDTH = 286;
-export const SEGMENT_WIDTH_RATIO = 0.75;
-export const TOOLTIP_HORIZONTAL_OFFSET = 10;
-export const LINE_OFFSET = 3;
-export const LINE_WIDTH = 1;
-export const TOOLTIP_HEIGHT = 225;
-export const TOOLTIP_BOTTOM_OFFSET = 5;
-export const TOOLTIP_RIGHT_POSITION_THRESHOLD = 65;
-export const SHORT_TOOLTIP_HEIGHT = 139;
-export const GAP = 1;
-
-export const PERCENTAGE_COLOR = 'rgba(48, 48, 48, 1)';
-export const LINE_GRADIENT = [
-  {
-    color: 'rgba(227, 227, 227, 1)',
-    offset: 0,
-  },
-  {
-    color: 'rgba(227, 227, 227, 0)',
-    offset: 100,
-  },
-];
-
-export const TOOLTIP_GAP_FROM_BAR = 4;
-
-export const LABELS_HEIGHT = 80;
-export const PERCENTAGE_SUMMARY_HEIGHT = 30;

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/hooks/useTooltipInteraction.ts

@@ -1,59 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-
-/**
- * Manages tooltip show/hide state with delayed hiding to support
- * mouse travel between bar and tooltip (hover bridge pattern).
- */
-export function useTooltipInteraction() {
-  const [tooltipIndex, setTooltipIndex] = useState<number | null>(null);
-  const isTooltipHoveredRef = useRef(false);
-  const hideTimerRef = useRef<number | null>(null);
-
-  const clearHideTimer = useCallback(() => {
-    if (hideTimerRef.current) {
-      window.clearTimeout(hideTimerRef.current);
-      hideTimerRef.current = null;
-    }
-  }, []);
-
-  const showTooltipAt = useCallback(
-    (index: number) => {
-      clearHideTimer();
-      setTooltipIndex(index);
-    },
-    [clearHideTimer],
-  );
-
-  const scheduleTooltipHide = useCallback(() => {
-    clearHideTimer();
-    hideTimerRef.current = window.setTimeout(() => {
-      if (!isTooltipHoveredRef.current) setTooltipIndex(null);
-    }, 0);
-  }, [clearHideTimer]);
-
-  const handleTooltipMouseEnter = useCallback(() => {
-    isTooltipHoveredRef.current = true;
-  }, []);
-
-  const handleTooltipMouseLeave = useCallback(() => {
-    isTooltipHoveredRef.current = false;
-    scheduleTooltipHide();
-  }, [scheduleTooltipHide]);
-
-  const handleChartBlur = useCallback((event: React.FocusEvent) => {
-    const currentTarget = event.currentTarget;
-    const relatedTarget = event.relatedTarget as Node;
-    if (!currentTarget.contains(relatedTarget)) {
-      setTooltipIndex(null);
-    }
-  }, []);
-
-  return {
-    tooltipIndex,
-    showTooltipAt,
-    scheduleTooltipHide,
-    handleTooltipMouseEnter,
-    handleTooltipMouseLeave,
-    handleChartBlur,
-  };
-}

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/hooks/useTooltipPlacement.ts

@@ -1,113 +0,0 @@
-import type { GDataPoint } from '@/shared/charts/types';
-import type { TooltipPlacement } from '../components';
-import type { ScaleBand } from 'd3-scale';
-
-import {
-  TOOLTIP_HORIZONTAL_OFFSET,
-  TOOLTIP_WIDTH,
-  TOOLTIP_GAP_FROM_BAR,
-  TOOLTIP_HEIGHT,
-  SHORT_TOOLTIP_HEIGHT,
-} from '../constants';
-import { SCROLLBAR_WIDTH } from '../../TooltipWrapper';
-import { useEffect, useRef, useState } from 'react';
-import { clamp } from '@shopify/polaris-viz-core';
-
-interface UseTooltipPlacementParams {
-  tooltipIndex: number | null;
-  dataSeries: GDataPoint[];
-  getBarHeight: (value: number) => number;
-  chartX: number;
-  chartY: number;
-  drawableHeight: number;
-  barHeightAdjustment: number;
-  barWidth: number;
-  xScale: ScaleBand<string>;
-}
-
-/**
- * Computes tooltip x/y position and placement (above/below bar).
- * Listens to scroll events via rAF and only triggers re-render
- * when placement actually flips — not on every scroll frame.
- */
-export function useTooltipPlacement({
-  tooltipIndex,
-  dataSeries,
-  getBarHeight,
-  chartX,
-  chartY,
-  drawableHeight,
-  barHeightAdjustment,
-  barWidth,
-  xScale,
-}: UseTooltipPlacementParams) {
-  const rafRef = useRef<number | null>(null);
-  const lastPlacementRef = useRef<TooltipPlacement | null>(null);
-  const [, setPlacementTick] = useState(0);
-
-  useEffect(() => {
-    if (tooltipIndex == null) {
-      lastPlacementRef.current = null;
-      return;
-    }
-
-    const onScroll = () => {
-      if (rafRef.current != null) return;
-      rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = null;
-        const activeData = dataSeries[tooltipIndex];
-        if (!activeData) return;
-
-        const barHeight = getBarHeight(activeData.value ?? 0);
-        const barTopY = chartY + (drawableHeight - barHeightAdjustment) - barHeight;
-        const tooltipHeight = activeData.chartTooltip ? TOOLTIP_HEIGHT : SHORT_TOOLTIP_HEIGHT;
-
-        const hasSpaceAbove = barTopY - window.scrollY - tooltipHeight - TOOLTIP_GAP_FROM_BAR >= 0;
-        const newPlacement: TooltipPlacement = hasSpaceAbove ? 'above' : 'below';
-
-        if (newPlacement !== lastPlacementRef.current) {
-          lastPlacementRef.current = newPlacement;
-          setPlacementTick((t) => t + 1);
-        }
-      });
-    };
-
-    window.addEventListener('scroll', onScroll, { passive: true });
-    return () => {
-      window.removeEventListener('scroll', onScroll);
-      if (rafRef.current != null) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [tooltipIndex, dataSeries, getBarHeight, chartY, drawableHeight, barHeightAdjustment]);
-
-  const getXPosition = (activeDataSeries: GDataPoint) => {
-    const currentX = xScale(activeDataSeries.key.toString()) ?? 0;
-    const xPosition = chartX + currentX + (barWidth - TOOLTIP_WIDTH) / 2;
-
-    return clamp({
-      amount: xPosition,
-      min: TOOLTIP_HORIZONTAL_OFFSET,
-      max: window.innerWidth - TOOLTIP_WIDTH - TOOLTIP_HORIZONTAL_OFFSET - SCROLLBAR_WIDTH,
-    });
-  };
-
-  const getYPosition = (
-    activeDataSeries: GDataPoint,
-    tooltipHeight: number,
-  ): { y: number; placement: TooltipPlacement } => {
-    const barHeight = getBarHeight(activeDataSeries.value ?? 0);
-    const barTopY = chartY + (drawableHeight - barHeightAdjustment) - barHeight;
-    const barBottomY = chartY + (drawableHeight - barHeightAdjustment);
-
-    const hasSpaceAbove = barTopY - window.scrollY - tooltipHeight - TOOLTIP_GAP_FROM_BAR >= 0;
-
-    if (hasSpaceAbove) {
-      return { y: barTopY, placement: 'above' };
-    }
-    return { y: barBottomY, placement: 'below' };
-  };
-
-  return { getXPosition, getYPosition };
-}

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

@@ -1,6 +0,0 @@
-export { FunnelChartNext } from './FunnelChartNext';
-export type { FunnelChartNextProps } from './FunnelChartNext';
-
-export { ChartContainerWrapper } from './FunnelChartNext';
-
-export * from './constants';

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

@@ -1,13 +0,0 @@
-import type { DataSeries } from '@shopify/polaris-viz-core';
-
-import type { TrendIndicatorProps } from '../TrendIndicator';
-
-export type MetaDataTrendIndicator = Omit<TrendIndicatorProps, 'theme'>;
-
-export interface FunnelChartMetaData {
-  trends?: MetaDataTrendIndicator;
-}
-
-export type FunnelChartDataSeries = DataSeries & {
-  metadata?: FunnelChartMetaData;
-};

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/utilities/calculate-dropoff.ts

@@ -1,4 +0,0 @@
-export function calculateDropOff(value: number, nextValue: number) {
-  if (!value) return 0;
-  return ((nextValue - value) / value) * 100;
-}

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/utilities/useBuildFunnelTrends.ts

@@ -1,108 +0,0 @@
-import type { MetaDataTrendIndicator, FunnelChartMetaData } from '../types';
-import type { GDataSeries } from '@/shared/charts/types';
-import type { FunnelChartNextProps } from '../FunnelChartNext';
-
-import { useMemo } from 'react';
-
-export interface UseBuildFunnelTrendsProps {
-  data: GDataSeries[];
-  percentageFormatter: FunnelChartNextProps['percentageFormatter'];
-}
-
-export function useBuildFunnelTrends({ data, percentageFormatter }: UseBuildFunnelTrendsProps) {
-  return useMemo(() => {
-    const primarySeries = data.find((series) => !series.isComparison);
-    const comparisonSeries = data.find((series) => series.isComparison);
-
-    if (!primarySeries || !comparisonSeries || !primarySeries.metadata?.trends) {
-      return undefined;
-    }
-
-    const trends: FunnelChartMetaData['trends'] = {};
-
-    primarySeries.data.forEach((_, index) => {
-      const reachedTrend = primarySeries.metadata?.trends[index];
-
-      if (!reachedTrend) return;
-
-      const droppedPercentageChange = calculateDroppedPercentageChange({
-        previousStepValue: primarySeries.data[index - 1]?.value,
-        currentStepValue: primarySeries.data[index]?.value,
-        comparisonPreviousStepValue: comparisonSeries.data[index - 1]?.value,
-        comparisonCurrentStepValue: comparisonSeries.data[index]?.value,
-      });
-
-      const droppedTrend =
-        index === 0 || comparisonSeries.isEmptyData
-          ? undefined
-          : formatDroppedTrend(droppedPercentageChange, percentageFormatter);
-
-      (trends as any)[index] = {
-        reached: reachedTrend,
-        ...(droppedTrend && { dropped: droppedTrend }),
-      };
-    });
-
-    return { trends };
-  }, [data, percentageFormatter]);
-}
-
-interface DropOffCalculationParams {
-  previousStepValue: number | null | undefined;
-  currentStepValue: number | null | undefined;
-  comparisonPreviousStepValue: number | null | undefined;
-  comparisonCurrentStepValue: number | null | undefined;
-}
-
-function calculateDroppedPercentageChange({
-  previousStepValue,
-  currentStepValue,
-  comparisonPreviousStepValue,
-  comparisonCurrentStepValue,
-}: DropOffCalculationParams): number | null {
-  const hasEmptyValues =
-    previousStepValue == null ||
-    currentStepValue == null ||
-    comparisonPreviousStepValue == null ||
-    comparisonCurrentStepValue == null;
-
-  if (hasEmptyValues) return null;
-
-  const currentDropped = previousStepValue! - currentStepValue!;
-  const comparisonDropped = comparisonPreviousStepValue! - comparisonCurrentStepValue!;
-
-  if (comparisonDropped === 0) return null;
-
-  return ((currentDropped - comparisonDropped) / Math.abs(comparisonDropped)) * 100;
-}
-
-function formatDroppedTrend(
-  percentageChange: number | null,
-  percentageFormatter: FunnelChartNextProps['percentageFormatter'],
-): MetaDataTrendIndicator {
-  if (percentageChange == null) {
-    return {
-      value: null,
-    };
-  }
-
-  const absolutePercentageChange = Math.abs(percentageChange);
-  const defaultFormattedPercentage = `${absolutePercentageChange}%`;
-  const formattedPercentage = percentageFormatter
-    ? percentageFormatter(absolutePercentageChange)
-    : defaultFormattedPercentage;
-
-  if (percentageChange === 0) {
-    return {
-      value: formattedPercentage,
-      trend: 'neutral',
-      direction: 'upward',
-    };
-  }
-
-  return {
-    value: formattedPercentage,
-    trend: percentageChange < 0 ? 'positive' : 'negative',
-    direction: percentageChange < 0 ? 'downward' : 'upward',
-  };
-}

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

@@ -1,27 +0,0 @@
-import type { YAxisTick } from '../../types';
-
-import { useTheme } from '@shopify/polaris-viz-core';
-import { memo, Fragment } from 'react';
-
-export interface Props {
-  ticks: YAxisTick[];
-  transform: { x: number; y: number };
-  width: number;
-}
-
-export const HorizontalGridLines = memo(function HorizontalGridLines({ ticks, transform, width }: Props) {
-  const selectedTheme = useTheme();
-
-  return (
-    <Fragment>
-      {ticks.map(({ yOffset }, index) => (
-        <line
-          key={index}
-          x2={width}
-          stroke={selectedTheme.grid.color}
-          transform={`translate(${transform.x},${transform.y + yOffset})`}
-        />
-      ))}
-    </Fragment>
-  );
-});

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

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