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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/shared/charts/index.ts

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