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

package/src/shared/charts/components/GPolarisViz/components/Labels/SingleTextLine.tsx

@@ -1,64 +0,0 @@
-import { FONT_FAMILY, LINE_HEIGHT, useChartContext } from '@shopify/polaris-viz-core';
-import { Fragment } from 'react';
-
-import { endLineTruncate } from './utilities/endLineTruncate';
-
-interface SingleTextLineProps {
-  color: string;
-  fontSize: number;
-  fontWeight?: number;
-  targetWidth: number;
-  text: string;
-  x?: number;
-  y?: number;
-  ariaHidden?: boolean;
-  dominantBaseline?: 'middle' | 'hanging';
-  textAnchor?: 'start' | 'middle' | 'end';
-}
-
-const DEFAULT_LABEL_FONT_WEIGHT = 400;
-
-export function SingleTextLine({
-  ariaHidden = false,
-  color,
-  dominantBaseline = 'hanging',
-  fontSize,
-  fontWeight = DEFAULT_LABEL_FONT_WEIGHT,
-  targetWidth,
-  text,
-  textAnchor = 'middle',
-  y = 0,
-  x = 0,
-}: SingleTextLineProps) {
-  const { characterWidths } = useChartContext();
-
-  const truncated = endLineTruncate({
-    label: text,
-    targetWidth,
-    targetHeight: LINE_HEIGHT,
-    characterWidths,
-  });
-
-  const isStringTruncated = truncated !== text;
-
-  return (
-    <Fragment>
-      <text
-        aria-hidden={ariaHidden}
-        textAnchor={textAnchor}
-        dominantBaseline={dominantBaseline}
-        height={LINE_HEIGHT}
-        width={targetWidth}
-        fill={color}
-        fontSize={fontSize}
-        fontWeight={fontWeight}
-        fontFamily={FONT_FAMILY}
-        y={y}
-        x={x}
-      >
-        {truncated}
-      </text>
-      {isStringTruncated && <title>{text}</title>}
-    </Fragment>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/Labels/hooks/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/Labels/hooks/useLabels.tsx

@@ -1,131 +0,0 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
-
-import {
-  LINE_HEIGHT,
-  DIAGONAL_LABEL_MIN_WIDTH,
-  HORIZONTAL_LABEL_MIN_WIDTH,
-  HORIZONTAL_LABEL_TARGET_HEIGHT,
-  VERTICAL_LABEL_MIN_WIDTH,
-} from '../../../constants';
-import { getHorizontalLabels } from '../utilities/getHorizontalLabels';
-import { getDiagonalLabels } from '../utilities/getDiagonalLabels';
-import { getVerticalLabels } from '../utilities/getVerticalLabels';
-import { estimateStringWidthWithOffset } from '../../../utilities';
-import { getFontSize } from '../../../utilities/getFontSize';
-import { useChartContext } from '@shopify/polaris-viz-core';
-import { Fragment, useEffect, useMemo } from 'react';
-
-export interface XAxisLabel {
-  text: string;
-  wrappedText: React.ComponentType<{ children: ReactNode }> | keyof JSX.IntrinsicElements;
-}
-
-interface Props {
-  allowLineWrap: boolean;
-  labels: string[];
-  targetWidth: number;
-  onHeightChange?: Dispatch<SetStateAction<number>> | (() => void);
-  align?: 'center' | 'left';
-}
-
-export function useLabels({ allowLineWrap, align = 'center', labels, onHeightChange = () => {}, targetWidth }: Props) {
-  const { characterWidths } = useChartContext();
-
-  const fontSize = getFontSize();
-
-  const preparedLabels = useMemo(() => {
-    return labels.map((label) => {
-      return {
-        text: label,
-        wrappedText: Fragment,
-        fontSize,
-        words: [],
-        truncatedWords: [],
-        truncatedName: '',
-        truncatedWidth: 0,
-      };
-    });
-  }, [labels, fontSize]);
-
-  const longestLabelWidth = useMemo(() => {
-    return labels.reduce((prev, label) => {
-      const newWidth = estimateStringWidthWithOffset(label, fontSize);
-
-      if (newWidth > prev) {
-        return newWidth;
-      }
-
-      return prev;
-    }, 0);
-  }, [labels, fontSize]);
-
-  const { lines, containerHeight } = useMemo(() => {
-    const shouldDrawHorizontal = checkIfShouldDrawHorizontal({
-      allowLineWrap,
-      longestLabelWidth,
-      targetWidth,
-    });
-    const shouldDrawDiagonal = targetWidth > DIAGONAL_LABEL_MIN_WIDTH;
-    const shouldDrawVertical = targetWidth > VERTICAL_LABEL_MIN_WIDTH;
-
-    switch (true) {
-      case shouldDrawHorizontal: {
-        return getHorizontalLabels({
-          align,
-          fontSize,
-          labels: preparedLabels,
-          targetWidth,
-          targetHeight: HORIZONTAL_LABEL_TARGET_HEIGHT,
-          characterWidths,
-        });
-      }
-      case shouldDrawDiagonal: {
-        return getDiagonalLabels({
-          characterWidths,
-          labels: preparedLabels,
-          longestLabelWidth,
-          targetHeight: LINE_HEIGHT,
-          targetWidth,
-        });
-      }
-      case shouldDrawVertical: {
-        return getVerticalLabels({
-          characterWidths,
-          labels: preparedLabels,
-          longestLabelWidth,
-          targetWidth,
-        });
-      }
-      default: {
-        return {
-          lines: [],
-          containerHeight: 0,
-        };
-      }
-    }
-  }, [align, allowLineWrap, fontSize, targetWidth, characterWidths, preparedLabels, longestLabelWidth]);
-
-  useEffect(() => {
-    onHeightChange(containerHeight);
-  }, [containerHeight, onHeightChange]);
-
-  return { lines, containerHeight };
-}
-
-function checkIfShouldDrawHorizontal({
-  allowLineWrap,
-  longestLabelWidth,
-  targetWidth,
-}: {
-  allowLineWrap: boolean;
-  longestLabelWidth: number;
-  targetWidth: number;
-}) {
-  const isLabelLongerThanTarget = targetWidth > longestLabelWidth;
-
-  if (allowLineWrap === false) {
-    return isLabelLongerThanTarget;
-  }
-
-  return targetWidth >= HORIZONTAL_LABEL_MIN_WIDTH || isLabelLongerThanTarget;
-}

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

@@ -1,3 +0,0 @@
-export { useLabels } from './hooks';
-export { shouldSkipLabel } from './utilities/shouldSkipLabel';
-export { SingleTextLine } from './SingleTextLine';

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

@@ -1,23 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-
-import { LINE_HEIGHT } from '../../../constants';
-
-import { truncateSingleLine } from './truncateSingleLine';
-import { truncateLastLine } from './truncateLastLine';
-
-interface Props {
-  label: string;
-  targetWidth: number;
-  targetHeight: number;
-  characterWidths: CharacterWidths;
-}
-
-export function endLineTruncate({ label, targetWidth, targetHeight, characterWidths }: Props) {
-  const isSingleLine = targetHeight <= LINE_HEIGHT;
-
-  if (isSingleLine) {
-    return truncateSingleLine({ label, targetWidth, characterWidths });
-  }
-
-  return truncateLastLine({ label, targetWidth, targetHeight, characterWidths });
-}

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

@@ -1,34 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-import { estimateStringWidth } from '@shopify/polaris-viz-core';
-
-import { ELLIPSIS } from '../../../constants';
-
-interface Props {
-  word: string;
-  targetWidth: number;
-  characterWidths: CharacterWidths;
-}
-
-export function endWordTruncate({ word, targetWidth, characterWidths }: Props) {
-  let nextCharacterIndex = 1;
-  let newWord = '';
-
-  if (estimateStringWidth(word, characterWidths) + characterWidths.W! <= targetWidth) {
-    return word;
-  }
-
-  while (
-    newWord.length < word.length &&
-    estimateStringWidth(newWord, characterWidths) + characterWidths.W! < targetWidth
-  ) {
-    nextCharacterIndex += 1;
-    newWord = word.substring(0, nextCharacterIndex);
-    newWord = `${newWord}${ELLIPSIS}`;
-  }
-
-  if (newWord.length === word.length - 1) {
-    return word;
-  }
-
-  return newWord;
-}

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

@@ -1,31 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-
-import { estimateStringWidth } from '@shopify/polaris-viz-core';
-import { LINE_HEIGHT } from '../../../constants';
-
-interface Props {
-  label: string;
-  targetWidth: number;
-  characterWidths: CharacterWidths;
-}
-
-export function estimateTextHeight({ characterWidths, targetWidth, label }: Props) {
-  const words = label.split(' ');
-
-  let lines = 0;
-  let lineWidth = 0;
-
-  words.forEach((_, index) => {
-    const wordParts = words[index]!.split('-');
-    lines += wordParts.length;
-    const wordWidth = estimateStringWidth(words[index]!, characterWidths);
-
-    lineWidth += wordWidth;
-    if (lineWidth > targetWidth) {
-      lines += 1;
-      lineWidth = wordWidth;
-    }
-  });
-
-  return lines * LINE_HEIGHT;
-}

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

@@ -1,12 +0,0 @@
-import { ELLIPSIS } from '../../../constants';
-
-export function formatAndAddEllipsis(label: string) {
-  let newLabel = label.trimEnd();
-
-  // remove space or dash at end of string before adding an ellipsis
-  if (newLabel.endsWith('-')) {
-    newLabel = newLabel.substring(0, newLabel.length - 1);
-  }
-
-  return `${newLabel}${ELLIPSIS}`;
-}

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

@@ -1,70 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-import { clamp } from '@shopify/polaris-viz-core';
-
-import { LINE_HEIGHT, MAX_DIAGONAL_LABEL_WIDTH, MAX_DIAGONAL_VISIBLE_HEIGHT } from '../../../constants';
-import type { FormattedLine, PreparedLabels } from '../../../types';
-
-import { getWidestLabel } from './getWidestLabel';
-import { truncateLabels } from './truncateLabels';
-
-interface Props {
-  labels: PreparedLabels[];
-  longestLabelWidth: number;
-  targetHeight: number;
-  targetWidth: number;
-  characterWidths: CharacterWidths;
-}
-
-export function getDiagonalLabels({ characterWidths, labels, longestLabelWidth, targetHeight, targetWidth }: Props) {
-  const clampedTargetWidth = clamp({
-    amount: longestLabelWidth,
-    min: targetWidth,
-    max: MAX_DIAGONAL_LABEL_WIDTH,
-  });
-
-  const truncatedLabels = truncateLabels({
-    labels,
-    targetWidth: clampedTargetWidth,
-    targetHeight,
-    characterWidths,
-    skipEndWordTruncate: true,
-  });
-
-  const lines: FormattedLine[][] = [];
-  const centerPoint = targetWidth / 2 - LINE_HEIGHT / 2;
-
-  for (let i = 0; i < labels.length; i++) {
-    lines[i] = [];
-    lines[i]!.push({
-      truncatedText: truncatedLabels[i]!.truncatedName,
-      fullText: truncatedLabels[i]!.text,
-      fontSize: labels[i]!.fontSize,
-      y: centerPoint,
-      x: centerPoint,
-      dominantBaseline: 'hanging',
-      width: clampedTargetWidth,
-      height: LINE_HEIGHT,
-      textAnchor: 'end',
-      transform: `rotate(-45)`,
-    });
-  }
-
-  const { truncatedWidth } = getWidestLabel(truncatedLabels)!;
-
-  return {
-    lines,
-    containerHeight: clamp({
-      amount: getRotatedHeight(truncatedWidth, 45, targetHeight),
-      min: 0,
-      max: MAX_DIAGONAL_VISIBLE_HEIGHT,
-    }),
-  };
-}
-
-function getRotatedHeight(width: number, angle: number, originalHeight: number) {
-  const radians = (Math.PI / 180) * angle;
-  const hypotenuse = width * Math.sin(radians);
-  const opp = originalHeight * Math.cos(radians);
-
-  return Math.round(hypotenuse + opp);
-}

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

@@ -1,90 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-
-import type { FormattedLine, PreparedLabels } from '../../../types';
-import { estimateStringWidthWithOffset } from '../../../utilities';
-import { LINE_HEIGHT } from '../../../constants';
-
-import { endWordTruncate } from './endWordTruncate';
-import { truncateLabels } from './truncateLabels';
-
-const NEXT_INDEX = 1;
-
-interface Props {
-  align: 'center' | 'left';
-  fontSize: number;
-  labels: PreparedLabels[];
-  targetHeight: number;
-  targetWidth: number;
-  characterWidths: CharacterWidths;
-}
-
-export function getHorizontalLabels({ align, fontSize, labels, targetHeight, targetWidth, characterWidths }: Props) {
-  const truncatedLabels = truncateLabels({
-    labels,
-    targetWidth,
-    targetHeight,
-    characterWidths,
-  });
-
-  const lines: FormattedLine[][] = [];
-  let longestLineCount = 0;
-
-  truncatedLabels.forEach((label, index) => {
-    lines[index] = [];
-
-    let line = '';
-    let lineNumber = 0;
-    const words = label.truncatedWords;
-
-    // The reason we use a for loop here is we want
-    // to be able to advance the loop below if we
-    // are able to add multiple words to a line.
-    // In that case, the while loop below will keep
-    // skipping indexes until we need to break onto
-    // another line.
-    for (let wordIndex = 0; wordIndex < words.length; wordIndex++) {
-      if (label.words[wordIndex] && label.words[wordIndex]!.wordWidth > targetWidth) {
-        words[wordIndex] = endWordTruncate({
-          word: words[wordIndex]!,
-          targetWidth,
-          characterWidths,
-        });
-      }
-
-      line += words[wordIndex];
-
-      while (
-        words[wordIndex + 1] != null &&
-        estimateStringWidthWithOffset(`${line} ${words[wordIndex + NEXT_INDEX]}`, fontSize) < targetWidth
-      ) {
-        line += ` ${words[wordIndex + NEXT_INDEX]}`;
-        wordIndex += 1;
-      }
-
-      lines[index].push({
-        wrappedText: truncatedLabels[index]!.wrappedText,
-        truncatedText: line,
-        fullText: truncatedLabels[index]!.text,
-        x: align === 'left' ? 0 : targetWidth / 2,
-        y: lineNumber * LINE_HEIGHT,
-        fontSize: label.fontSize,
-        width: targetWidth,
-        height: LINE_HEIGHT,
-        textAnchor: align === 'left' ? 'start' : 'middle',
-        dominantBaseline: 'hanging',
-      });
-
-      lineNumber += 1;
-      line = '';
-
-      if (lineNumber > longestLineCount) {
-        longestLineCount = lineNumber;
-      }
-    }
-  });
-
-  return {
-    lines,
-    containerHeight: longestLineCount * LINE_HEIGHT,
-  };
-}

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

@@ -1,58 +0,0 @@
-import type { CharacterWidths } from '@shopify/polaris-viz-core';
-import { clamp } from '@shopify/polaris-viz-core';
-
-import { LINE_HEIGHT, VERTICAL_LABEL_TARGET_WIDTH } from '../../../constants';
-import type { FormattedLine, PreparedLabels } from '../../../types';
-
-import { truncateLabels } from './truncateLabels';
-
-const QUARTER = 4;
-
-interface Props {
-  targetWidth: number;
-  longestLabelWidth: number;
-  labels: PreparedLabels[];
-  characterWidths: CharacterWidths;
-}
-
-export function getVerticalLabels({ labels, characterWidths, longestLabelWidth, targetWidth }: Props) {
-  const clampedTargetWidth = clamp({
-    amount: longestLabelWidth,
-    min: targetWidth,
-    max: VERTICAL_LABEL_TARGET_WIDTH,
-  });
-  const truncatedLabels = truncateLabels({
-    labels,
-    targetWidth: clampedTargetWidth,
-    targetHeight: LINE_HEIGHT,
-    characterWidths,
-    skipEndWordTruncate: true,
-  });
-
-  const lines: FormattedLine[][] = [];
-  let longestString = 0;
-
-  for (let i = 0; i < labels.length; i++) {
-    lines[i] = [];
-    lines[i]!.push({
-      truncatedText: truncatedLabels[i]!.truncatedName,
-      fontSize: labels[i]!.fontSize,
-      fullText: truncatedLabels[i]!.text,
-      y: LINE_HEIGHT / QUARTER,
-      x: 0,
-      width: clampedTargetWidth,
-      height: LINE_HEIGHT,
-      textAnchor: 'end',
-      transform: `translate(${targetWidth / 2}) rotate(-90)`,
-    });
-
-    if (truncatedLabels[i]!.truncatedWidth > longestString) {
-      longestString = truncatedLabels[i]!.truncatedWidth;
-    }
-  }
-
-  return {
-    lines,
-    containerHeight: longestString,
-  };
-}

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

@@ -1,15 +0,0 @@
-import type { PreparedLabels } from '../../../types';
-
-export function getWidestLabel(labels: PreparedLabels[]) {
-  let longestIndex = -1;
-  let longestWidth = 0;
-
-  labels.forEach(({ truncatedWidth }, index) => {
-    if (truncatedWidth > longestWidth) {
-      longestIndex = index;
-      longestWidth = truncatedWidth;
-    }
-  });
-
-  return labels[longestIndex];
-}

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

@@ -1,11 +0,0 @@
-export function shouldSkipLabel(index: number, reducedLabelIndexes?: number[]) {
-  if (reducedLabelIndexes == null || reducedLabelIndexes.length === 0) {
-    return false;
-  }
-
-  if (!reducedLabelIndexes.includes(index)) {
-    return true;
-  }
-
-  return false;
-}

package/src/shared/charts/components/GPolarisViz/components/Labels/utilities/tests/endWordTruncate.test.ts

@@ -1,16 +0,0 @@
-import characterWidths from '../../../../data/character-widths.json';
-import { endWordTruncate } from '../endWordTruncate';
-
-describe('endWordTruncate()', () => {
-  it.each`
-    word           | targetWidth | expected
-    ${'Wednesday'} | ${40}       | ${'Wed…'}
-    ${'Wednesday'} | ${60}       | ${'Wedne…'}
-    ${'Wednesday'} | ${65}       | ${'Wednes…'}
-    ${'Wednesday'} | ${70}       | ${'Wednesday'}
-  `('truncates word at target width of $targetWidth', ({ word, targetWidth, expected }) => {
-    const actual = endWordTruncate({ word, targetWidth, characterWidths });
-
-    expect(actual).toStrictEqual(expected);
-  });
-});

package/src/shared/charts/components/GPolarisViz/components/Labels/utilities/tests/estimateTextHeight.test.ts

@@ -1,19 +0,0 @@
-import characterWidths from '../../../../data/character-widths.json';
-import { estimateTextHeight } from '../estimateTextHeight';
-
-describe('estimateTextHeight()', () => {
-  it.each`
-    string                               | targetWidth | expected
-    ${'Single'}                          | ${100}      | ${14}
-    ${'Two Lines'}                       | ${100}      | ${28}
-    ${'Multiple lines from this string'} | ${100}      | ${84}
-  `('return width for $string', ({ string, targetWidth, expected }) => {
-    const actual = estimateTextHeight({
-      characterWidths,
-      targetWidth,
-      label: string,
-    });
-
-    expect(actual).toStrictEqual(expected);
-  });
-});

package/src/shared/charts/components/GPolarisViz/components/Labels/utilities/tests/formatAndAddEllipsis.test.ts

@@ -1,9 +0,0 @@
-import { formatAndAddEllipsis } from '../formatAndAddEllipsis';
-
-describe('formatAndAddEllipsis()', () => {
-  it.each(['Monday', 'Monday ', 'Monday-'])('formats %s', (label) => {
-    const actual = formatAndAddEllipsis(label);
-
-    expect(actual).toStrictEqual('Monday…');
-  });
-});

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

@@ -1,22 +0,0 @@
-import characterWidths from '../../../../data/character-widths.json';
-import { truncateLastLine } from '../truncateLastLine';
-
-const TARGET_WIDTH = 50;
-
-describe('truncateLastLine()', () => {
-  it.each`
-    label                         | targetHeight | expected
-    ${'Monday pickles and stuff'} | ${14}        | ${'Monda…'}
-    ${'Monday pickles and stuff'} | ${80}        | ${'Monday pickles and s…'}
-    ${'Monday pickles and stuff'} | ${100}       | ${'Monday pickles and stuff'}
-  `('truncates a label with a target height of $targetHeight', ({ label, targetHeight, expected }) => {
-    const actual = truncateLastLine({
-      label,
-      targetWidth: TARGET_WIDTH,
-      targetHeight,
-      characterWidths,
-    });
-
-    expect(actual).toStrictEqual(expected);
-  });
-});

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

@@ -1,15 +0,0 @@
-import characterWidths from '../../../../data/character-widths.json';
-import { truncateSingleLine } from '../truncateSingleLine';
-
-describe('truncateSingleLine()', () => {
-  it.each`
-    label                                  | targetWidth | expected
-    ${'Long label that will truncate'}     | ${50}       | ${'Long la…'}
-    ${'Long label that will truncate'}     | ${100}      | ${'Long label that w…'}
-    ${'Long label that will NOT truncate'} | ${185}      | ${'Long label that will NOT truncate'}
-  `('truncates a label with a target width of $targetWidth', ({ label, targetWidth, expected }) => {
-    const actual = truncateSingleLine({ label, targetWidth, characterWidths });
-
-    expect(actual).toStrictEqual(expected);
-  });
-});