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

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

@@ -0,0 +1,259 @@
+import type { IFunnelChartColors } from '../../../GFunnelChart/types';
+import type { LabelFormatter } from '@shopify/polaris-viz-core';
+import type { GDataSeries } from '@/shared/charts/types';
+import type { ReactNode } from 'react';
+
+import { LABELS_HEIGHT, LINE_GRADIENT, LINE_OFFSET, LINE_WIDTH, GAP, SEGMENT_WIDTH_RATIO } from './constants';
+import { FunnelChartConnector, FunnelChartConnectorGradient } from '../../shared/FunnelChartConnector';
+import { uniqueId, LinearGradientWithStops, useChartContext } from '@shopify/polaris-viz-core';
+import { useBuildFunnelTrends } from './utilities/useBuildFunnelTrends';
+import { useTooltipInteraction } from './hooks/useTooltipInteraction';
+import { FunnelChartLabels, TooltipWithPortal } from './components';
+import { useTooltipPlacement } from './hooks/useTooltipPlacement';
+import { TooltipOverlay } from './components/TooltipOverlay';
+import { Fragment, useMemo, useState } from 'react';
+import { FunnelChartSegment } from '../../shared';
+import { useFunnelBarScaling } from '../../hooks';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { ChartElements } from '../ChartElements';
+
+export interface ChartProps {
+  data: GDataSeries[];
+  tooltipLabels: {
+    reached: string;
+    dropped: string;
+  };
+  showTooltip?: boolean;
+  showPercentages?: boolean;
+  isShowFirstLabel?: boolean;
+  funnelColors?: IFunnelChartColors;
+  seriesNameFormatter: LabelFormatter;
+  labelFormatter: LabelFormatter;
+  percentageFormatter?: (value: number) => string;
+  renderScaleIconTooltipContent?: () => ReactNode;
+}
+
+export function Chart({
+  data,
+  tooltipLabels,
+  showTooltip = true,
+  showPercentages = true,
+  isShowFirstLabel,
+  funnelColors,
+  seriesNameFormatter,
+  labelFormatter,
+  percentageFormatter = (value: number) => {
+    return labelFormatter(value) as string;
+  },
+  renderScaleIconTooltipContent,
+}: ChartProps) {
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+
+  const {
+    tooltipIndex,
+    showTooltipAt,
+    scheduleTooltipHide,
+    handleTooltipMouseEnter,
+    handleTooltipMouseLeave,
+    handleChartBlur,
+  } = useTooltipInteraction();
+
+  const { containerBounds } = useChartContext();
+
+  const dataSeries = data[0]!.data;
+  const calculatedTrends = useBuildFunnelTrends({ data, percentageFormatter });
+  const trends = calculatedTrends?.trends;
+  const xValues = dataSeries.map(({ key }) => key) as string[];
+  const yValues = dataSeries.map(({ value }) => value) as [number, number];
+  const sanitizedYValues = yValues.map((value) => Math.max(0, value));
+
+  const chartContainerWidth = containerBounds?.width ?? 0;
+  const barHeightAdjustment = chartContainerWidth <= 500 ? 10 : 0;
+
+  const {
+    width: drawableWidth,
+    height: drawableHeight,
+    x: chartX,
+    y: chartY,
+  } = containerBounds ?? {
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+  };
+
+  const highestYValue = Math.max(...sanitizedYValues);
+
+  const yScale = scaleLinear()
+    .range([0, drawableHeight - LABELS_HEIGHT - barHeightAdjustment])
+    .domain([0, highestYValue]);
+
+  const { getBarHeight, shouldApplyScaling } = useFunnelBarScaling({
+    yScale,
+    values: sanitizedYValues,
+  });
+
+  const labels = useMemo(
+    () =>
+      dataSeries.map((dataPoint, index) => {
+        if (!isShowFirstLabel) return { ...dataPoint, value: seriesNameFormatter(dataPoint.key) };
+        if (index === 0) return { ...dataPoint, value: 'Sessions' };
+        return { ...dataPoint, value: '' };
+      }),
+    [dataSeries, seriesNameFormatter, isShowFirstLabel],
+  );
+
+  const totalStepWidth = drawableWidth / xValues.length;
+  const connectorWidth = totalStepWidth * (1 - SEGMENT_WIDTH_RATIO);
+  const drawableWidthWithLastConnector = drawableWidth + connectorWidth;
+
+  const xScale = scaleBand().domain(xValues).range([0, drawableWidthWithLastConnector]);
+
+  const labelXScale = scaleBand()
+    .range([0, drawableWidthWithLastConnector])
+    .domain(labels.map((_, index) => index.toString()));
+
+  const sectionWidth = xScale.bandwidth();
+  const barWidth = sectionWidth * SEGMENT_WIDTH_RATIO;
+  const lineGradientId = useMemo(() => uniqueId('line-gradient'), []);
+
+  const firstPoint = dataSeries[0];
+
+  const calculatePercentage = (value: number, total: number) => {
+    const sanitizedValue = Math.max(0, value);
+    const sanitizedTotal = Math.max(0, total);
+    return sanitizedTotal === 0 ? 0 : (sanitizedValue / sanitizedTotal) * 100;
+  };
+
+  const percentages = dataSeries.map((dataPoint) => {
+    const firstValue = firstPoint?.value ?? 0;
+    return percentageFormatter(calculatePercentage(dataPoint.value ?? 0, firstValue));
+  });
+
+  const formattedValues = dataSeries.map((dataPoint) => {
+    return labelFormatter(dataPoint.value);
+  });
+
+  const { getXPosition, getYPosition } = useTooltipPlacement({
+    tooltipIndex,
+    dataSeries,
+    getBarHeight,
+    chartX,
+    chartY,
+    drawableHeight,
+    barHeightAdjustment,
+    barWidth,
+    xScale,
+  });
+
+  return (
+    <ChartElements.Svg height={drawableHeight} width={drawableWidth}>
+      <g onBlur={handleChartBlur}>
+        <FunnelChartConnectorGradient funnelColors={funnelColors} />
+
+        <LinearGradientWithStops gradient={LINE_GRADIENT} id={lineGradientId} x1="0%" x2="0%" y1="0%" y2="100%" />
+
+        {dataSeries.map((dataPoint, index: number) => {
+          const nextPoint = dataSeries[index + 1];
+          const xPosition = xScale(dataPoint.key.toString());
+          const x = xPosition == null ? 0 : xPosition;
+          const isLast = index === dataSeries.length - 1;
+          const barHeight = getBarHeight(dataPoint.value || 0);
+          const nextBarHeight = getBarHeight(nextPoint?.value || 0);
+
+          return (
+            <Fragment key={dataPoint.key}>
+              <g
+                key={dataPoint.key}
+                role="listitem"
+                onMouseEnter={() => setHoverIndex(index)}
+                onMouseLeave={() => setHoverIndex(null)}
+              >
+                {/* Rect to bounds of the chart and show action when you hover on the chart  */}
+                <rect
+                  x={x - (LINE_OFFSET - LINE_WIDTH)}
+                  y={0}
+                  width={sectionWidth + (LINE_OFFSET - LINE_WIDTH)}
+                  height={drawableHeight}
+                  fill="transparent"
+                />
+
+                <FunnelChartSegment
+                  ariaLabel={`${seriesNameFormatter(dataPoint.key)}: ${labelFormatter(dataPoint.value)}`}
+                  barHeight={barHeight}
+                  barWidth={barWidth}
+                  index={index}
+                  isLast={isLast}
+                  onMouseEnter={(index) => showTooltip && showTooltipAt(index)}
+                  onMouseLeave={() => showTooltip && scheduleTooltipHide()}
+                  shouldApplyScaling={shouldApplyScaling}
+                  x={x}
+                  funnelColors={funnelColors}
+                >
+                  {!isLast && (
+                    <FunnelChartConnector
+                      drawableHeight={drawableHeight}
+                      height={drawableHeight}
+                      index={index}
+                      nextX={(xScale(nextPoint?.key.toString() ?? '') ?? 0) - LINE_OFFSET}
+                      nextY={drawableHeight - nextBarHeight}
+                      startX={x + barWidth + GAP}
+                      startY={drawableHeight - barHeight}
+                    />
+                  )}
+                </FunnelChartSegment>
+                {index > 0 && (
+                  <rect
+                    y={0}
+                    x={x - (LINE_OFFSET - LINE_WIDTH)}
+                    width={LINE_WIDTH}
+                    height={drawableHeight}
+                    fill={`url(#${lineGradientId})`}
+                  />
+                )}
+              </g>
+            </Fragment>
+          );
+        })}
+        <g>
+          <FunnelChartLabels
+            formattedValues={formattedValues}
+            labels={labels}
+            labelWidth={sectionWidth}
+            barWidth={barWidth}
+            percentages={percentages}
+            xScale={labelXScale}
+            shouldApplyScaling={shouldApplyScaling}
+            renderScaleIconTooltipContent={renderScaleIconTooltipContent}
+            trends={trends}
+            showPercentages={showPercentages}
+            hoverIndex={hoverIndex}
+            onMouseEnter={(index) => setHoverIndex(index)}
+            onMouseLeave={() => setHoverIndex(null)}
+          />
+        </g>
+        <TooltipWithPortal>
+          {showTooltip && tooltipIndex != null && (
+            <TooltipOverlay
+              tooltipIndex={tooltipIndex}
+              dataSeries={dataSeries}
+              trends={trends}
+              tooltipLabels={tooltipLabels}
+              funnelColors={funnelColors}
+              labelFormatter={labelFormatter}
+              percentageFormatter={percentageFormatter}
+              getBarHeight={getBarHeight}
+              getXPosition={getXPosition}
+              getYPosition={getYPosition}
+              chartX={chartX}
+              barWidth={barWidth}
+              xScale={xScale}
+              onTooltipMouseEnter={handleTooltipMouseEnter}
+              onTooltipMouseLeave={handleTooltipMouseLeave}
+            />
+          )}
+        </TooltipWithPortal>
+      </g>
+    </ChartElements.Svg>
+  );
+}

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

@@ -0,0 +1,104 @@
+import type { ChartProps, LabelFormatter } from '@shopify/polaris-viz-core';
+import type { IFunnelChartColors } from '../../../GFunnelChart/types';
+import type { FunnelChartDataSeries } from './types';
+import type { ReactElement, ReactNode } from 'react';
+
+import { DEFAULT_CHART_PROPS, ChartState, useChartContext } from '@shopify/polaris-viz-core';
+import { numberWithCommas } from '@/utils';
+import { ChartContainer } from '../ChartContainer';
+import { ChartSkeleton } from '../ChartSkeleton';
+import { Chart } from './Chart';
+
+const DEFAULT_LABEL_FORMATTER: LabelFormatter = (value) => numberWithCommas(value?.toString() ?? '');
+const DEFAULT_TOOLTIP_LABELS = {
+  reached: 'Reached this step',
+  dropped: 'Dropped off',
+} as const;
+
+export type FunnelChartNextProps = {
+  data: FunnelChartDataSeries[];
+  tooltipLabels?: {
+    reached: string;
+    dropped: string;
+  };
+  showTooltip?: boolean;
+  isShowFirstLabel?: boolean;
+  showPercentages?: boolean;
+  funnelColors?: IFunnelChartColors;
+  seriesNameFormatter?: LabelFormatter;
+  labelFormatter?: LabelFormatter;
+  renderScaleIconTooltipContent?: () => ReactNode;
+  percentageFormatter?: (value: number) => string;
+} & ChartProps;
+
+export function FunnelChartNext(props: FunnelChartNextProps) {
+  const { theme: defaultTheme } = useChartContext();
+
+  const {
+    data,
+    theme = defaultTheme,
+    state,
+    errorText,
+    tooltipLabels = DEFAULT_TOOLTIP_LABELS,
+    showTooltip = true,
+    showPercentages = true,
+    isShowFirstLabel = false,
+    funnelColors,
+    seriesNameFormatter = DEFAULT_LABEL_FORMATTER,
+    labelFormatter = DEFAULT_LABEL_FORMATTER,
+    percentageFormatter,
+    renderScaleIconTooltipContent,
+  } = {
+    ...DEFAULT_CHART_PROPS,
+    ...props,
+  };
+
+  return (
+    <ChartContainerWrapper props={props}>
+      {state !== ChartState.Success ? (
+        <ChartSkeleton type="Funnel" state={state} errorText={errorText} theme={theme} />
+      ) : (
+        <Chart
+          data={data}
+          tooltipLabels={tooltipLabels}
+          showTooltip={showTooltip}
+          showPercentages={showPercentages}
+          isShowFirstLabel={isShowFirstLabel}
+          funnelColors={funnelColors}
+          seriesNameFormatter={seriesNameFormatter}
+          labelFormatter={labelFormatter}
+          percentageFormatter={percentageFormatter}
+          renderScaleIconTooltipContent={renderScaleIconTooltipContent}
+        />
+      )}
+    </ChartContainerWrapper>
+  );
+}
+
+export const ChartContainerWrapper = ({
+  props,
+  children,
+  height,
+}: {
+  props: FunnelChartNextProps;
+  children: ReactElement;
+  height?: string | number;
+}) => {
+  const { theme: defaultTheme } = useChartContext();
+
+  const {
+    data,
+    theme = defaultTheme,
+    id,
+    isAnimated,
+    onError,
+  } = {
+    ...DEFAULT_CHART_PROPS,
+    ...props,
+  };
+  return (
+    <ChartContainer data={data} id={id} isAnimated={isAnimated} onError={onError} theme={theme} height={height}>
+      {children}
+    </ChartContainer>
+  );
+};