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

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

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

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