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

package/src/shared/charts/components/GPolarisViz/components/Labels/utilities/truncateLabels.ts

@@ -1,75 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-
-import { estimateStringWidthWithOffset } from '../../../utilities';
-import type { PreparedLabels } from '../../../types';
-
-import { endLineTruncate } from './endLineTruncate';
-import { endWordTruncate } from './endWordTruncate';
-
-interface Props {
-  labels: PreparedLabels[];
-  targetWidth: number;
-  targetHeight: number;
-  characterWidths: CharacterWidths;
-  skipEndWordTruncate?: boolean;
-}
-
-export function truncateLabels({
-  labels,
-  targetWidth,
-  targetHeight,
-  characterWidths,
-  skipEndWordTruncate = false,
-}: Props) {
-  const truncatedLabels = [...labels];
-
-  labels.forEach(({ fontSize }, index) => {
-    truncatedLabels[index]!.truncatedWords = [];
-    truncatedLabels[index]!.words = [];
-
-    const words = truncatedLabels[index]!.text.split(/(\s+)/).filter((word) => word.trim().length > 0);
-
-    if (skipEndWordTruncate) {
-      truncatedLabels[index]!.truncatedWords.push(truncatedLabels[index]!.text);
-    } else {
-      words.forEach((word) => {
-        const wordWidth = estimateStringWidthWithOffset(word, fontSize);
-
-        truncatedLabels[index]!.words.push({
-          word,
-          wordWidth,
-        });
-
-        if (wordWidth > targetWidth) {
-          truncatedLabels[index]!.truncatedWords.push(
-            endWordTruncate({
-              word,
-              targetWidth,
-              characterWidths,
-            }),
-          );
-        } else {
-          truncatedLabels[index]!.truncatedWords.push(word);
-        }
-      });
-    }
-
-    truncatedLabels[index]!.truncatedName = truncatedLabels[index]!.truncatedWords.join(' ');
-
-    truncatedLabels[index]!.truncatedName = endLineTruncate({
-      label: truncatedLabels[index]!.truncatedName,
-      targetWidth,
-      targetHeight,
-      characterWidths,
-    });
-
-    truncatedLabels[index]!.truncatedWidth = estimateStringWidthWithOffset(
-      truncatedLabels[index]!.truncatedName,
-      truncatedLabels[index]!.fontSize,
-    );
-
-    truncatedLabels[index]!.truncatedWords = truncatedLabels[index]!.truncatedName.split(' ');
-  });
-
-  return truncatedLabels;
-}

package/src/shared/charts/components/GPolarisViz/components/Labels/utilities/truncateLastLine.ts

@@ -1,61 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-
-import { formatAndAddEllipsis } from './formatAndAddEllipsis';
-import { estimateTextHeight } from './estimateTextHeight';
-
-const MAX_CYCLES = 10;
-
-interface Props {
-  characterWidths: CharacterWidths;
-  label: string;
-  targetHeight: number;
-  targetWidth: number;
-}
-
-const STEP = 1;
-
-export function truncateLastLine({ label, targetHeight, targetWidth, characterWidths }: Props) {
-  let newLabel = label;
-  let lineStart = 0;
-  let lineEnd = label.length;
-  let counter = 0;
-
-  if (lineEnd < lineStart) {
-    return newLabel;
-  }
-
-  while (lineStart <= lineEnd && counter < MAX_CYCLES) {
-    const middle = Math.floor((lineStart + lineEnd) / 2);
-    newLabel = label.substring(0, middle);
-
-    if (newLabel.length < label.length) {
-      newLabel = formatAndAddEllipsis(newLabel);
-    }
-
-    const newLabelHeight = estimateTextHeight({
-      label: newLabel,
-      targetWidth,
-      characterWidths,
-    });
-
-    if (newLabelHeight === targetHeight) {
-      break;
-    }
-
-    if (newLabelHeight > targetHeight) {
-      lineEnd = middle - STEP;
-    }
-
-    if (newLabelHeight < targetHeight) {
-      lineStart = middle + STEP;
-    }
-
-    counter += STEP;
-  }
-
-  if (newLabel.length === label.length - 1) {
-    return label;
-  } else {
-    return newLabel;
-  }
-}

package/src/shared/charts/components/GPolarisViz/components/Labels/utilities/truncateSingleLine.ts

@@ -1,39 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-import { estimateStringWidth } from '@shopify/polaris-viz-core';
-
-import { ELLIPSIS } from '../../../constants';
-
-import { formatAndAddEllipsis } from './formatAndAddEllipsis';
-
-interface Props {
-  characterWidths: CharacterWidths;
-  label: string;
-  targetWidth: number;
-}
-
-export function truncateSingleLine({ characterWidths, label, targetWidth }: Props) {
-  const estimatedWidth = estimateStringWidth(label, characterWidths);
-
-  if (estimatedWidth <= targetWidth) {
-    return label;
-  }
-
-  const characters = label.split('');
-
-  let width = 0;
-  let newLabel = '';
-  let index = 0;
-
-  while (width <= targetWidth - characterWidths[ELLIPSIS]!) {
-    width += characterWidths[characters[index]!]!;
-    newLabel += characters[index];
-
-    index++;
-  }
-
-  if (newLabel.length === label.length - 1) {
-    return label;
-  }
-
-  return formatAndAddEllipsis(newLabel);
-}

package/src/shared/charts/components/GPolarisViz/components/LinePreview/LinePreview.module.scss

@@ -1,8 +0,0 @@
-.Container {
-  display: flex;
-}
-
-.SVG {
-  display: block;
-  overflow: visible;
-}

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

@@ -1,105 +0,0 @@
-import type { Color, LineStyle } from '@shopify/polaris-viz-core';
-
-import { DASHED_LINE_PREVIEW_STROKE_DASHARRAY, PREVIEW_ICON_SIZE, XMLNS } from '../../constants';
-import { LinearGradientWithStops, isGradientType, uniqueId } from '@shopify/polaris-viz-core';
-import { DOTTED_LINE_PREVIEW_CY, DOTTED_LINE_PREVIEW_RADIUS, DOT_SPACING } from './constants';
-import { useRef } from 'react';
-
-import styles from './LinePreview.module.scss';
-
-export interface LinePreviewProps {
-  color: Color;
-  lineStyle: LineStyle;
-  width?: number;
-  strokeDasharray?: string;
-}
-
-const HEIGHT = 2;
-const WIDTH = 2;
-
-export function LinePreview({ color, lineStyle, width = WIDTH, strokeDasharray = 'none' }: LinePreviewProps) {
-  const gradientId = useRef(uniqueId('linePreviewGradient'));
-
-  const linePreviewColor = isGradientType(color) ? `url(#${gradientId.current})` : color;
-
-  return (
-    <span className={styles.Container} style={{ height: HEIGHT, width: PREVIEW_ICON_SIZE }}>
-      <svg
-        className={styles.SVG}
-        height={`${HEIGHT}px`}
-        viewBox={`0 0 ${PREVIEW_ICON_SIZE} ${HEIGHT}`}
-        width={`${PREVIEW_ICON_SIZE}px`}
-        xmlns={XMLNS}
-      >
-        {isGradientType(color) ? (
-          <defs>
-            <LinearGradientWithStops
-              id={gradientId.current}
-              gradient={color}
-              x1="0%"
-              x2="100%"
-              y1="0%"
-              y2="0%"
-              gradientUnits="userSpaceOnUse"
-            />
-          </defs>
-        ) : null}
-        {getLinePreview({
-          color: linePreviewColor,
-          lineStyle,
-          width,
-          strokeDasharray,
-        })}
-      </svg>
-    </span>
-  );
-}
-
-interface GetLinePreview {
-  color: string;
-  lineStyle: LineStyle;
-  width: number;
-  strokeDasharray: string;
-}
-
-function getLinePreview({ color, lineStyle, width, strokeDasharray }: GetLinePreview) {
-  switch (lineStyle) {
-    case 'dotted':
-      return (
-        <g fill={color}>
-          {[...Array(3)].map((_, index) => {
-            return (
-              <circle
-                key={index}
-                cx={DOTTED_LINE_PREVIEW_CY + index * DOT_SPACING}
-                cy={DOTTED_LINE_PREVIEW_CY}
-                r={DOTTED_LINE_PREVIEW_RADIUS}
-              />
-            );
-          })}
-        </g>
-      );
-    case 'dashed':
-      return (
-        <path
-          d={`M1 1 H${PREVIEW_ICON_SIZE}`}
-          stroke={color}
-          strokeLinejoin="round"
-          strokeLinecap="round"
-          strokeWidth={width}
-          strokeDasharray={DASHED_LINE_PREVIEW_STROKE_DASHARRAY}
-        />
-      );
-    default:
-      return (
-        <path
-          d={`M1 1 H${PREVIEW_ICON_SIZE}`}
-          stroke={color}
-          strokeLinejoin="round"
-          strokeLinecap="round"
-          strokeWidth={width}
-          strokeDasharray={strokeDasharray}
-        />
-      );
-  }
-}

package/src/shared/charts/components/GPolarisViz/components/LinePreview/constants.ts

@@ -1,3 +0,0 @@
-export const DOTTED_LINE_PREVIEW_CY = 1;
-export const DOTTED_LINE_PREVIEW_RADIUS = 1;
-export const DOT_SPACING = 5;

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

@@ -1,2 +0,0 @@
-export { LinePreview } from './LinePreview';
-export type { LinePreviewProps } from './LinePreview';

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

@@ -1,32 +0,0 @@
-import { Component } from 'react';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-}
-
-export class SwallowErrors extends Component<Props, State> {
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-
-  state: State = {
-    hasError: false,
-  };
-
-  // eslint-disable-next-line no-useless-constructor
-  constructor(props: Props) {
-    super(props);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null;
-    }
-
-    return this.props.children;
-  }
-}

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

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

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

@@ -1,88 +0,0 @@
-import type { FormattedLine } from '../../types';
-
-import { FONT_FAMILY, useTheme } from '@shopify/polaris-viz-core';
-import { Fragment } from 'react';
-
-interface TextLineProps {
-  index: number;
-  line: FormattedLine[];
-  color?: string;
-}
-
-export function TextLine({ color, index, line }: TextLineProps) {
-  const selectedTheme = useTheme();
-
-  return (
-    <Fragment>
-      {line.map(
-        (
-          {
-            dominantBaseline,
-            height,
-            fontSize,
-            wrappedText,
-            fullText,
-            truncatedText,
-            textAnchor,
-            transform,
-            width,
-            x,
-            y,
-          },
-          textIndex,
-        ) => {
-          const key = `${index}-${textIndex}-${truncatedText}`;
-
-          const textElement = (
-            <text
-              key={`${key}-text`}
-              textAnchor={textAnchor}
-              dominantBaseline={dominantBaseline}
-              fill={color ?? selectedTheme.xAxis.labelColor}
-              fontSize={fontSize}
-              fontFamily={FONT_FAMILY}
-              transform={transform}
-              height={height}
-              width={width}
-              x={x}
-              y={y}
-            >
-              {/* TODO: Fix this */}
-              {(wrappedText && truncatedText) || <foreignObject aria-hidden="true">{truncatedText}</foreignObject>}
-              {!wrappedText && truncatedText}
-            </text>
-          );
-          const titleElement = <title key={`${key}-title`}>{fullText}</title>;
-
-          // Otherwise, use Fragment as the wrapper
-          return (
-            <Fragment key={key}>
-              {textElement}
-              {titleElement}
-            </Fragment>
-          );
-
-          // return (
-          //   <Fragment key={key}>
-          //     <text
-          //       textAnchor={textAnchor}
-          //       dominantBaseline={dominantBaseline}
-          //       height={height}
-          //       width={width}
-          //       x={x}
-          //       y={y}
-          //       fill={color ?? selectedTheme.xAxis.labelColor}
-          //       fontSize={fontSize}
-          //       fontFamily={FONT_FAMILY}
-          //       transform={transform}
-          //     >
-          //       {truncatedText}
-          //     </text>
-          //     <title>{fullText}</title>
-          //   </Fragment>
-          // );
-        },
-      )}
-    </Fragment>
-  );
-}

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

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

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

@@ -1,109 +0,0 @@
-import type { TooltipData } from '../../types';
-
-import { getTooltipContentTemplateColumnCount } from './utilities/get-tooltip-template-content-column-count';
-import { TooltipContentContainer, TooltipRow, TooltipSeries, TooltipTitle } from './components';
-import { hasHiddenComparisonSeries } from '../../utilities/hasHiddenComparisonSeries';
-import { useGetLongestLabelFromData } from './hooks/useGetLongestLabelFromData';
-import { DEFAULT_THEME_NAME, useChartContext } from '@shopify/polaris-viz-core';
-import { SPACE_BETWEEN_LABEL_AND_VALUE } from './constants';
-import { Fragment } from 'react';
-
-export interface TooltipContentProps {
-  data: TooltipData[];
-  title?: string;
-  theme?: string;
-  ignoreColorVisionEvents?: boolean;
-}
-
-const FONT_SIZE_OFFSET = 1.061;
-const PREVIEW_WIDTH = 14;
-
-export function TooltipContent({
-  data,
-  theme = DEFAULT_THEME_NAME,
-  title,
-  ignoreColorVisionEvents = false,
-}: TooltipContentProps) {
-  const { keyWidth, valueWidth } = useGetLongestLabelFromData(data);
-  const { comparisonSeriesIndexes } = useChartContext();
-
-  const leftWidth = keyWidth * FONT_SIZE_OFFSET;
-  const rightWidth = valueWidth * FONT_SIZE_OFFSET;
-
-  const isMultiSeries = data[0]!.data.length > 2;
-
-  return (
-    <TooltipContentContainer
-      maxWidth={PREVIEW_WIDTH + leftWidth + SPACE_BETWEEN_LABEL_AND_VALUE + rightWidth}
-      theme={theme}
-      ignoreColorVisionEvents={ignoreColorVisionEvents}
-    >
-      {({ activeColorVisionIndex }) => (
-        <Fragment>
-          {title != null && <TooltipTitle theme={theme}>{title}</TooltipTitle>}
-
-          {data.map((tooltipData, dataIndex) => {
-            const { data: series, name, shape } = tooltipData;
-
-            const hasName = name != null;
-            const isEmpty = !hasName && series.length === 0;
-
-            if (isEmpty) {
-              return null;
-            }
-
-            return (
-              <TooltipSeries
-                key={dataIndex}
-                name={name}
-                templateColumnCount={getTooltipContentTemplateColumnCount(tooltipData)}
-              >
-                {series.map(({ key, value, color, isComparison, isHidden, trend }, seriesIndex) => {
-                  // This check is for when we are rendering multiple series lines
-                  // and we have an active index.
-                  // We only want to render the active series line and it's
-                  // matching comparison series line.
-                  if (
-                    !isHidden &&
-                    // If we more than 2 series lines...
-                    isMultiSeries &&
-                    // and the series is not a comparison series...
-                    isComparison !== true &&
-                    // and we have an active index...
-                    activeColorVisionIndex !== -1 &&
-                    // and the series index is not the active index, hide it.
-                    seriesIndex !== activeColorVisionIndex
-                  ) {
-                    return null;
-                  }
-
-                  if (
-                    hasHiddenComparisonSeries({
-                      index: seriesIndex,
-                      activeColorVisionIndex,
-                      comparisonSeriesIndexes,
-                    })
-                  ) {
-                    return null;
-                  }
-
-                  return (
-                    <TooltipRow
-                      color={color}
-                      isComparison={isComparison}
-                      key={`row-${seriesIndex}`}
-                      label={key}
-                      shape={shape}
-                      trend={trend}
-                      value={value}
-                    />
-                  );
-                })}
-              </TooltipSeries>
-            );
-          })}
-        </Fragment>
-      )}
-    </TooltipContentContainer>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipContentContainer/TooltipContentContainer.module.scss

@@ -1,10 +0,0 @@
-.Container {
-  padding: 8px;
-  backdrop-filter: blur(5px);
-  border-radius: 5px;
-  min-width: 180px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipContentContainer/TooltipContentContainer.tsx

@@ -1,67 +0,0 @@
-import { COLOR_VISION_SINGLE_ITEM, FONT_FAMILY, changeColorOpacity, useTheme } from '@shopify/polaris-viz-core';
-import { useRef, useState } from 'react';
-import type { ReactNode } from 'react';
-
-import { useWatchColorVisionEvents } from '../../../../hooks/useWatchColorVisionEvents';
-import { useBrowserCheck } from '../../../../hooks/useBrowserCheck';
-import { TOOLTIP_BG_OPACITY } from '../../../../constants';
-
-import styles from './TooltipContentContainer.module.scss';
-
-interface Props {
-  children: ({ activeColorVisionIndex }: { activeColorVisionIndex: number }) => ReactNode;
-  maxWidth: number;
-  minWidth?: number;
-  theme: string;
-  color?: string;
-  ignoreColorVisionEvents?: boolean;
-}
-
-export function TooltipContentContainer({
-  children,
-  maxWidth,
-  theme,
-  color,
-  ignoreColorVisionEvents = false,
-  minWidth,
-}: Props) {
-  const { isFirefox } = useBrowserCheck();
-
-  const selectedTheme = useTheme(theme);
-
-  const [activeColorVisionIndex, setActiveIndex] = useState(-1);
-
-  const resetTimer = useRef<number>(0);
-
-  useWatchColorVisionEvents({
-    type: COLOR_VISION_SINGLE_ITEM,
-    onIndexChange: ({ detail }) => {
-      window.clearTimeout(resetTimer.current);
-
-      if (detail.index === -1) {
-        resetTimer.current = window.setTimeout(() => {
-          setActiveIndex(-1);
-        }, 100);
-      } else {
-        setActiveIndex(detail.index);
-      }
-    },
-    enabled: !ignoreColorVisionEvents,
-  });
-
-  return (
-    <div
-      className={styles.Container}
-      style={{
-        background: color
-          ? color
-          : changeColorOpacity(selectedTheme.tooltip.backgroundColor, isFirefox ? 1 : TOOLTIP_BG_OPACITY),
-        maxWidth,
-        minWidth,
-        fontFamily: FONT_FAMILY,
-      }}
-    >
-      {children({ activeColorVisionIndex })}
-    </div>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipContentContainer/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipRow/TooltipRow.module.scss

@@ -1,26 +0,0 @@
-.Row {
-  line-height: 16px;
-  font-size: 11px;
-  gap: 8px;
-  display: grid;
-  grid-template-columns: subgrid;
-  align-items: center;
-  grid-column: 1 / -1;
-}
-
-.Value {
-  margin-left: auto;
-  text-align: right;
-  white-space: nowrap;
-  font-feature-settings: 'tnum';
-}
-
-.Truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.Trend {
-  margin-top: -2px;
-}