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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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