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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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