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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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