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

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

@@ -0,0 +1,261 @@
+import type { Color, DataSeries, Shape, LabelFormatter, LineStyle, TrendIndicator } from '@shopify/polaris-viz-core';
+import type { TrendIndicatorProps } from './components/TrendIndicator';
+import type { Interpolation, InterpolatorFn } from '@react-spring/web';
+import type { Series, SeriesPoint } from 'd3-shape';
+import type { ScaleLinear } from 'd3-scale';
+import type { ReactNode } from 'react';
+
+export interface YAxisTick {
+  value: number;
+  formattedValue: string;
+  yOffset: number;
+}
+
+export interface SparkChartData {
+  value: number | null;
+}
+
+export type PathInterpolator = InterpolatorFn<readonly number[], string>;
+export type NumberInterpolator = InterpolatorFn<readonly number[], number>;
+
+// === Theme types === //
+export enum BarMargin {
+  Small = 0.05,
+  Medium = 0.1,
+  Large = 0.3,
+  None = 0,
+}
+
+export interface Margin {
+  Top: number;
+  Left: number;
+  Right: number;
+  Bottom: number;
+}
+
+export type StackedSeries = Series<
+  {
+    [key: string]: number;
+  },
+  string
+>;
+export type FormattedStackedSeries = SeriesPoint<{
+  [key: string]: number;
+}>[];
+
+export interface SingleIndexGap {
+  index: number;
+  gap: number;
+}
+export interface StackedBarGapDirections {
+  positive: SingleIndexGap[];
+  negative: SingleIndexGap[];
+}
+
+export type GradientUnits = 'userSpaceOnUse' | 'objectBoundingBox';
+
+export type AnimatedCoordinate = Interpolation<
+  number,
+  | DOMPoint
+  | {
+      x: number;
+      y: number;
+    }
+>;
+
+export interface RenderTooltipDataPoint {
+  color?: Color;
+  isComparison?: boolean;
+  key: number | string;
+  value: number | string | null;
+  isHidden?: boolean;
+  trend?: TrendIndicator;
+}
+
+export interface TooltipFormatters {
+  valueFormatter?: LabelFormatter;
+  keyFormatter?: LabelFormatter;
+  titleFormatter?: LabelFormatter;
+}
+
+export interface RenderTooltipContentData {
+  data: {
+    shape: Shape;
+    data: RenderTooltipDataPoint[];
+    name?: string;
+  }[];
+  activeIndex: number;
+  dataSeries: DataSeries[];
+  theme: string;
+  title?: string;
+  formatters?: TooltipFormatters;
+}
+
+export interface RenderAnnotationContentData {
+  annotation: Annotation;
+}
+
+export interface TooltipData {
+  shape: Shape;
+  data: {
+    key: string;
+    value: string;
+    color?: Color;
+    isComparison?: boolean;
+    isHidden?: boolean;
+    trend?: TrendIndicatorProps;
+  }[];
+  name?: string;
+}
+
+export interface TooltipOptions extends TooltipFormatters {
+  renderTooltipContent?: (data: RenderTooltipContentData) => React.ReactNode;
+}
+
+export interface PreparedLabels {
+  fontSize: number;
+  text: string;
+  wrappedText: React.ComponentType<{ children: ReactNode }> | keyof JSX.IntrinsicElements;
+  words: { word: string; wordWidth: number }[];
+  truncatedWords: string[];
+  truncatedName: string;
+  truncatedWidth: number;
+}
+
+export interface FormattedLine {
+  height: number;
+  truncatedText: string;
+  fontSize: number;
+  fullText: string;
+  wrappedText?: React.ComponentType<{ children: ReactNode }> | keyof JSX.IntrinsicElements;
+  textAnchor: string;
+  width: number;
+  x: number;
+  y: number;
+  dominantBaseline?: string;
+  transform?: string;
+}
+
+export interface LegendData {
+  name: string;
+  color: Color;
+  isComparison?: boolean;
+  isHidden?: boolean;
+  shape?: Shape;
+  value?: string;
+  trend?: MetaDataTrendIndicator;
+  lineStyle?: LineStyle;
+  metadata?: {
+    legendLabel?: string;
+    lineStyle?: LineStyle;
+  };
+  styleOverride?: {
+    tooltip?: {
+      shape?: Shape;
+    };
+  };
+}
+
+export interface Annotation {
+  axis: 'x' | 'y';
+  label: string;
+  startKey: string | number;
+  endKey?: string | number;
+  collapseButtonText?: string;
+  expandButtonText?: string;
+  content?: {
+    content: ReactNode;
+    linkText?: string;
+    linkUrl?: string;
+    title?: ReactNode;
+  };
+}
+
+export interface ComboAnnotation extends Omit<Annotation, 'axis'> {
+  axis: 'x' | 'y1' | 'y2';
+}
+
+export interface AnnotationLookupTable {
+  [key: number]: Annotation;
+}
+
+export type GetXPosition = ({ isCrosshair, index }: { isCrosshair: boolean; index?: number | null }) =>
+  | number
+  | Interpolation<
+      | DOMPoint
+      | {
+          x: number;
+          y: number;
+        },
+      number
+    >;
+
+export interface FormattedTicks {
+  value: number;
+  formattedValue: string;
+  yOffset: number;
+}
+
+export type LegendPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'center';
+
+export type BottomOnlyLegendPosition = 'left' | 'right' | 'center';
+
+export type MetaDataTrendIndicator = Omit<TrendIndicatorProps, 'theme'>;
+
+export interface ColorVisionInteractionMethods {
+  getColorVisionEventAttrs: (index: number) => React.HTMLAttributes<HTMLElement>;
+  getColorVisionStyles: (index: number) => React.CSSProperties;
+}
+
+export type RenderLegendContent = (
+  colorVisionInteractionMethods: ColorVisionInteractionMethods,
+  activeIndex?: number,
+) => ReactNode;
+
+export type RenderHiddenLegendLabel = (hiddenItemsCount: number) => ReactNode;
+
+export type SortedBarChartData = (number | null)[][];
+
+export interface InnerValueContents {
+  activeValue: number | null | undefined;
+  activeIndex: number;
+  animatedTotalValue: ReactNode;
+  totalValue: number;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+}
+
+export type RenderInnerValueContent = (values: InnerValueContents) => ReactNode;
+
+export interface ColorVisionEventReturn extends CustomEvent {
+  detail: {
+    index: number;
+  };
+}
+
+export interface ExternalEventReturn extends CustomEvent {
+  detail: {
+    indexes: number[];
+  };
+}
+
+export interface LineChartSlotProps {
+  drawableHeight: number;
+  drawableWidth: number;
+  xScale: ScaleLinear<number, number>;
+  yScale: ScaleLinear<number, number>;
+  theme: string;
+}
+
+export type Size = 'small' | 'medium' | 'large';

package/src/shared/charts/components/GPolarisViz/utilities/base.ts

@@ -0,0 +1,13 @@
+import { COLOR_VISION_EVENT } from '@shopify/polaris-viz-core';
+
+export function capitalize(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function getDataSetItem(dataset: DOMStringMap, name: string) {
+  return dataset[`${COLOR_VISION_EVENT.camelCaseName}${capitalize(name)}`];
+}
+
+export function getEventName(id: string, type: string) {
+  return `${id}:${COLOR_VISION_EVENT.name}:${type}`;
+}

package/src/shared/charts/components/GPolarisViz/utilities/classnames.ts

@@ -0,0 +1,3 @@
+export function classNames(...classes: (string | boolean | undefined | null | 0)[]) {
+  return classes.filter(Boolean).join(' ');
+}

package/src/shared/charts/components/GPolarisViz/utilities/createCssConicGradient.ts

@@ -0,0 +1,12 @@
+import type { GradientStop } from '@shopify/polaris-viz-core';
+
+export function createCSSConicGradient(gradient: GradientStop[]) {
+  if (gradient.length === 1) {
+    const color = gradient[0]?.color;
+    return `conic-gradient(${color} 0%, ${color} 100%)`;
+  }
+
+  const gradientStops = gradient.map(({ color, offset }) => `${color} ${offset}%`);
+
+  return `conic-gradient(${gradientStops.join(', ')})`;
+}

package/src/shared/charts/components/GPolarisViz/utilities/createCssGradient.ts

@@ -0,0 +1,7 @@
+import type { GradientStop } from '@shopify/polaris-viz-core';
+
+export const createCSSGradient = (gradient: GradientStop[], angle: number) => {
+  const gradientStops = gradient.map(({ color, offset }) => `${color} ${offset}%`);
+
+  return `linear-gradient(${angle}deg, ${gradientStops.join(',')})`;
+};

package/src/shared/charts/components/GPolarisViz/utilities/estimateStringWidthWithOffset.ts

@@ -0,0 +1,15 @@
+import { estimateStringWidth } from '@shopify/polaris-viz-core';
+
+import characterWidthOffsets from '../data/character-width-offsets.json';
+import characterWidths from '../data/character-widths.json';
+
+export function estimateStringWidthWithOffset(string: string, fontSize: number, fontWeight = 400) {
+  const width = estimateStringWidth(string, characterWidths);
+
+  const fontSizeOffset = (characterWidthOffsets.fontSize as any)[fontSize] ?? 1; // @ts-ignore
+  const fontWeightOffset = (characterWidthOffsets.fontWeight as any)[fontWeight] ?? 1; // @ts-ignore
+
+  const adjustedWidth = width * fontSizeOffset * fontWeightOffset;
+
+  return Math.round((adjustedWidth + Number.EPSILON) * 100) / 100;
+}

package/src/shared/charts/components/GPolarisViz/utilities/getAxisOptions.ts

@@ -0,0 +1,26 @@
+import type { XAxisOptions, YAxisOptions } from '@shopify/polaris-viz-core';
+import { removeFalsyValues } from '@shopify/polaris-viz-core';
+
+export function getYAxisOptionsWithDefaults(yAxisOptions: Partial<YAxisOptions> = {}): Required<YAxisOptions> {
+  const yAxisOptionsFiltered = removeFalsyValues(yAxisOptions);
+
+  return {
+    labelFormatter: (value: number | null | string) => `${value}`,
+    integersOnly: false,
+    fixedWidth: false,
+    maxYOverride: null,
+    ticksOverride: null,
+    ...yAxisOptionsFiltered,
+  };
+}
+
+export function getXAxisOptionsWithDefaults(xAxisOptions: Partial<XAxisOptions> = {}): Required<XAxisOptions> {
+  const xAxisOptionsFiltered = removeFalsyValues(xAxisOptions);
+
+  return {
+    labelFormatter: (value: number | null | string) => `${value}`,
+    hide: false,
+    allowLineWrap: true,
+    ...xAxisOptionsFiltered,
+  };
+}

package/src/shared/charts/components/GPolarisViz/utilities/getCSSBackgroundFromColor.ts

@@ -0,0 +1,8 @@
+import type { Color } from '@shopify/polaris-viz-core';
+
+import { isGradientType } from '@shopify/polaris-viz-core';
+import { createCSSGradient } from './createCssGradient';
+
+export function getCSSBackgroundFromColor(color: Color, angle = 90): string {
+  return isGradientType(color) ? createCSSGradient(color, angle) : color;
+}

package/src/shared/charts/components/GPolarisViz/utilities/getChartId.ts

@@ -0,0 +1,3 @@
+export function getChartId(id: string | null) {
+  return `chart_${id ?? ''}`;
+}

package/src/shared/charts/components/GPolarisViz/utilities/getFontSize.ts

@@ -0,0 +1,7 @@
+import { FONT_SIZE, TOUCH_FONT_SIZE } from '@shopify/polaris-viz-core';
+
+export function getFontSize() {
+  if (typeof window === 'undefined') return FONT_SIZE;
+  const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  return isMobile ? TOUCH_FONT_SIZE : FONT_SIZE;
+}

package/src/shared/charts/components/GPolarisViz/utilities/getStackedMinMax.ts

@@ -0,0 +1,43 @@
+import type { DataSeries } from '@shopify/polaris-viz-core';
+
+import type { StackedSeries } from '../types';
+import { DEFAULT_MAX_Y } from '../constants';
+
+export function getStackedMinMax({
+  stackedValues,
+  data,
+  integersOnly,
+}: {
+  stackedValues: StackedSeries[] | null;
+  data: DataSeries[];
+  integersOnly: boolean;
+}) {
+  if (stackedValues != null) {
+    const minStackedValues = stackedValues.map((value) => Math.min(...value.map(([startingValue]) => startingValue)));
+    const maxStackedValues = stackedValues.map((value) => Math.max(...value.map(([, endingValue]) => endingValue)));
+
+    const calculatedMax = Math.max(...maxStackedValues);
+    const min = Math.min(...minStackedValues);
+    const max = data.length === 0 || (calculatedMax === 0 && min === 0) ? DEFAULT_MAX_Y : Math.max(0, calculatedMax);
+
+    return {
+      min: integersOnly ? Math.floor(min) : min,
+      max: integersOnly ? Math.ceil(max) : max,
+    };
+  } else {
+    const groupedDataPoints = data.reduce<number[]>((groupedData, series): number[] => {
+      const rawValues = series.data.map(({ value }) => value).filter((value) => value !== null) as number[];
+      return groupedData.concat(rawValues);
+    }, []);
+
+    const calculatedMax = Math.max(...groupedDataPoints);
+    const min = Math.min(...groupedDataPoints, 0);
+
+    const max = data.length === 0 || (calculatedMax === 0 && min === 0) ? DEFAULT_MAX_Y : Math.max(0, calculatedMax);
+
+    return {
+      min: integersOnly ? Math.floor(min) : min,
+      max: integersOnly ? Math.ceil(max) : max,
+    };
+  }
+}

package/src/shared/charts/components/GPolarisViz/utilities/getStackedValues.ts

@@ -0,0 +1,35 @@
+import type { DataSeries } from '@shopify/polaris-viz-core';
+import { stack } from 'd3-shape';
+
+import type { StackedSeries } from '../types';
+
+function getKey(index: number, name?: string) {
+  return `${name ?? 'stack'}-${index}`;
+}
+
+interface Options {
+  series: DataSeries[];
+  labels: string[];
+  order: any;
+  offset: any;
+}
+
+export function getStackedValues({ series, labels, order, offset }: Options): StackedSeries[] {
+  const stackedValues = stack()
+    .offset(offset)
+    .order(order)
+    .keys(series.map(({ name }, index) => getKey(index, name)));
+
+  const formattedData = labels.map((_, labelIndex) =>
+    series.reduce((acc, { name, data }, index) => {
+      const indexData = data[labelIndex];
+      const namedData = {
+        [getKey(index, name)]: indexData?.value == null ? 0 : indexData.value,
+      };
+
+      return Object.assign(acc, namedData);
+    }, {}),
+  );
+
+  return stackedValues(formattedData);
+}

package/src/shared/charts/components/GPolarisViz/utilities/getStackedValuesFromDataSeries.tsx

@@ -0,0 +1,30 @@
+import { stackOrderNone, stackOffsetDiverging } from 'd3-shape';
+import type { DataSeries } from '@shopify/polaris-viz-core';
+
+import { getStackedValues } from './getStackedValues';
+
+export function getStackedValuesFromDataSeries(data: DataSeries[]) {
+  const longestSeries = data.reduce((prev, cur) => {
+    if (cur.data.length > prev!.data.length) {
+      return cur;
+    }
+    return prev;
+  }, data[0]);
+
+  const labels = longestSeries!.data.map(({ key }) => `${key}`);
+
+  const stackedValues = getStackedValues({
+    series: data,
+    labels,
+    order: stackOrderNone,
+    offset: stackOffsetDiverging,
+  });
+
+  const formattedStackedValues = labels.map((_, labelIndex) => {
+    return stackedValues.map((data) => {
+      return data[labelIndex];
+    });
+  });
+
+  return { stackedValues, formattedStackedValues };
+}

package/src/shared/charts/components/GPolarisViz/utilities/getTrendIndicatorData.ts

@@ -0,0 +1,22 @@
+import type { MetaDataTrendIndicator } from '../types';
+
+import { TREND_INDICATOR_FONT_WEIGHT } from '../components/TrendIndicator';
+import { estimateTrendIndicatorWidth } from '../components';
+import { FONT_SIZE } from '../constants';
+
+export function getTrendIndicatorData(trendMetadata: MetaDataTrendIndicator | undefined) {
+  if (trendMetadata != null) {
+    const { totalWidth } = estimateTrendIndicatorWidth(
+      trendMetadata.value ?? '',
+      FONT_SIZE,
+      TREND_INDICATOR_FONT_WEIGHT,
+    );
+
+    return {
+      trendIndicatorProps: trendMetadata,
+      trendIndicatorWidth: totalWidth,
+    };
+  }
+
+  return { trendIndicatorProps: undefined, trendIndicatorWidth: 0 };
+}

package/src/shared/charts/components/GPolarisViz/utilities/hasHiddenComparisonSeries.ts

@@ -0,0 +1,26 @@
+export interface ComparisonSeriesIndex {
+  originalIndex: number;
+  comparisonIndex: number;
+}
+
+export function hasHiddenComparisonSeries({
+  activeColorVisionIndex,
+  comparisonSeriesIndexes,
+  index,
+}: {
+  activeColorVisionIndex: number;
+  comparisonSeriesIndexes: ComparisonSeriesIndex[];
+  index: number;
+}) {
+  if (comparisonSeriesIndexes.length === 0) {
+    return false;
+  }
+
+  const comparisonSeries = comparisonSeriesIndexes.find(({ comparisonIndex }) => comparisonIndex === index);
+
+  if (comparisonSeries == null) {
+    return false;
+  }
+
+  return comparisonSeries.comparisonIndex === index && activeColorVisionIndex !== comparisonSeries.originalIndex;
+}

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

@@ -0,0 +1,6 @@
+export { estimateStringWidthWithOffset } from './estimateStringWidthWithOffset';
+export { getYAxisOptionsWithDefaults, getXAxisOptionsWithDefaults } from './getAxisOptions';
+export { createCSSGradient } from './createCssGradient';
+export { createCSSConicGradient } from './createCssConicGradient';
+export { classNames } from './classnames';
+export * from './base';

package/src/shared/charts/components/GSimpleBarChart.tsx

@@ -0,0 +1,32 @@
+import type { SimpleBarChartProps } from '@shopify/polaris-viz';
+
+import { GSkeletonDisplayText } from '@/shared/components';
+import { GChartProvider } from '../contexts/GChartProvider';
+import { SimpleBarChart } from '@shopify/polaris-viz';
+import { Box } from '@shopify/polaris';
+
+export interface GSimpleBarChartProps extends SimpleBarChartProps {
+  loading?: boolean;
+}
+export const GSimpleBarChart: React.FC<GSimpleBarChartProps> = ({ data, loading }) => {
+  if (loading) return <GSkeletonDisplayText height="92px" />;
+
+  return (
+    <Box paddingInlineEnd={'300'} paddingInlineStart={'050'}>
+      <GChartProvider minHeight={323}>
+        <SimpleBarChart
+          theme="Light"
+          renderLegendContent={() => null}
+          seriesNameFormatter={(x) => `${x}`}
+          xAxisOptions={{
+            hide: true,
+          }}
+          yAxisOptions={{
+            fixedWidth: 60,
+          }}
+          data={data}
+        />
+      </GChartProvider>
+    </Box>
+  );
+};

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

@@ -0,0 +1,7 @@
+export * from './ComboChart';
+export * from './GPolarisViz';
+export * from './GBarChart';
+export * from './GComboChart';
+export * from './GDonutChart';
+export * from './GSimpleBarChart';
+export * from './GFunnelChart';

package/src/shared/charts/constants/chart.ts

@@ -0,0 +1,14 @@
+import type { DataSeries } from '@shopify/polaris-viz';
+
+import { CAMPAIGN_BACKGROUND_MAIN } from '@/constants';
+
+export const CHART_PRESET: Record<'ORIGIN' | 'VARIANT', Pick<DataSeries, 'name' | 'color'>> = {
+  ORIGIN: {
+    name: 'Control',
+    color: CAMPAIGN_BACKGROUND_MAIN.ORIGIN,
+  },
+  VARIANT: {
+    name: 'Variant',
+    color: CAMPAIGN_BACKGROUND_MAIN.VARIANT,
+  },
+};

package/src/shared/charts/constants/index.ts

@@ -0,0 +1 @@
+export * from './chart';

package/src/shared/charts/contexts/GChartProvider.tsx

@@ -0,0 +1,48 @@
+import chartStyle from '@shopify/polaris-viz/build/esm/styles.css?url';
+import { PolarisVizProvider } from '@shopify/polaris-viz';
+import { useEffect, useState } from 'react';
+
+export const GChartProvider = ({
+  children,
+  minHeight = 228,
+  seriesColors,
+}: {
+  children: React.ReactNode;
+  minHeight?: number;
+  seriesColors?: {
+    comparison?: string;
+    single?: string;
+    all?: string[];
+  };
+}) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+  return (
+    <>
+      <link rel="stylesheet" href={chartStyle} />
+      <PolarisVizProvider
+        themes={{
+          Light: {
+            chartContainer: {
+              minHeight,
+            },
+            grid: {
+              horizontalOverflow: true,
+              verticalOverflow: true,
+              horizontalMargin: 0,
+            },
+            seriesColors: {
+              comparison: 'rgba(64, 176, 230, 1)',
+              single: 'rgba(64, 176, 230, 1)',
+              all: ['#2C7DFF', '#F34A70'],
+              ...seriesColors,
+            },
+          },
+        }}
+      >
+        {children}
+      </PolarisVizProvider>
+    </>
+  );
+};

package/src/shared/charts/contexts/index.ts

@@ -0,0 +1 @@
+export * from './GChartProvider';

package/src/shared/charts/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './components';
+export * from './contexts';
+export * from './constants';