@levi-gemcommerce/analytics 2.0.5-dev.1 → 2.1.0-test.0

package/dist/esm/shared/charts/components/GPolarisViz/components/Labels/utilities/truncateSingleLine.js

@@ -0,0 +1,25 @@
+import { estimateStringWidth, ELLIPSIS } from '@shopify/polaris-viz-core';
+import '../../../constants.js';
+import { formatAndAddEllipsis } from './formatAndAddEllipsis.js';
+
+function truncateSingleLine({ characterWidths, label, targetWidth }) {
+    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);
+}
+
+export { truncateSingleLine };

package/dist/esm/shared/charts/components/GPolarisViz/components/Labels/utilities/truncateSingleLine.mjs

@@ -0,0 +1,25 @@
+import { estimateStringWidth, ELLIPSIS } from '@shopify/polaris-viz-core';
+import '../../../constants.mjs';
+import { formatAndAddEllipsis } from './formatAndAddEllipsis.mjs';
+
+function truncateSingleLine({ characterWidths, label, targetWidth }) {
+    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);
+}
+
+export { truncateSingleLine };

package/dist/esm/shared/charts/components/GPolarisViz/components/LinePreview/LinePreview.d.ts

@@ -5,4 +5,4 @@ export interface LinePreviewProps {
     width?: number;
     strokeDasharray?: string;
 }
-export declare function LinePreview({ color, lineStyle, width, strokeDasharray }: LinePreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinePreview({ color, lineStyle, width, strokeDasharray, }: LinePreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/charts/components/GPolarisViz/components/LinePreview/LinePreview.js

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

package/dist/esm/shared/charts/components/GPolarisViz/components/LinePreview/LinePreview.mjs

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

package/dist/esm/shared/charts/components/GPolarisViz/components/LinePreview/LinePreview.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".LinePreview-module_Container__NyUnM{display:flex}.LinePreview-module_SVG__dEbcp{display:block;overflow:visible}";
+var styles = {"Container":"LinePreview-module_Container__NyUnM","SVG":"LinePreview-module_SVG__dEbcp"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/LinePreview/LinePreview.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".LinePreview-module_Container__NyUnM{display:flex}.LinePreview-module_SVG__dEbcp{display:block;overflow:visible}";
+var styles = {"Container":"LinePreview-module_Container__NyUnM","SVG":"LinePreview-module_SVG__dEbcp"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/LinePreview/constants.js

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

package/dist/esm/shared/charts/components/GPolarisViz/components/LinePreview/constants.mjs

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

package/dist/esm/shared/charts/components/GPolarisViz/components/TextLine/TextLine.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme, FONT_FAMILY } from '@shopify/polaris-viz-core';
+import { Fragment } from 'react';
+
+function TextLine({ color, index, line }) {
+    const selectedTheme = useTheme();
+    return (jsx(Fragment, { children: line.map(({ dominantBaseline, height, fontSize, wrappedText, fullText, truncatedText, textAnchor, transform, width, x, y, }, textIndex) => {
+            const key = `${index}-${textIndex}-${truncatedText}`;
+            const textElement = (jsxs("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, children: [(wrappedText && truncatedText) || (jsx("foreignObject", { "aria-hidden": "true", children: truncatedText })), !wrappedText && truncatedText] }, `${key}-text`));
+            const titleElement = jsx("title", { children: fullText }, `${key}-title`);
+            // Otherwise, use Fragment as the wrapper
+            return (jsxs(Fragment, { children: [textElement, titleElement] }, key));
+            // 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>
+            // );
+        }) }));
+}
+
+export { TextLine };

package/dist/esm/shared/charts/components/GPolarisViz/components/TextLine/TextLine.mjs

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme, FONT_FAMILY } from '@shopify/polaris-viz-core';
+import { Fragment } from 'react';
+
+function TextLine({ color, index, line }) {
+    const selectedTheme = useTheme();
+    return (jsx(Fragment, { children: line.map(({ dominantBaseline, height, fontSize, wrappedText, fullText, truncatedText, textAnchor, transform, width, x, y, }, textIndex) => {
+            const key = `${index}-${textIndex}-${truncatedText}`;
+            const textElement = (jsxs("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, children: [(wrappedText && truncatedText) || (jsx("foreignObject", { "aria-hidden": "true", children: truncatedText })), !wrappedText && truncatedText] }, `${key}-text`));
+            const titleElement = jsx("title", { children: fullText }, `${key}-title`);
+            // Otherwise, use Fragment as the wrapper
+            return (jsxs(Fragment, { children: [textElement, titleElement] }, key));
+            // 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>
+            // );
+        }) }));
+}
+
+export { TextLine };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipContentContainer/TooltipContentContainer.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, changeColorOpacity, FONT_FAMILY, COLOR_VISION_SINGLE_ITEM } from '@shopify/polaris-viz-core';
+import { useState, useRef } from 'react';
+import { useWatchColorVisionEvents } from '../../../../hooks/useWatchColorVisionEvents.js';
+import { useBrowserCheck } from '../../../../hooks/useBrowserCheck.js';
+import { TOOLTIP_BG_OPACITY } from '../../../../constants.js';
+import styles from './TooltipContentContainer.module.scss.js';
+
+function TooltipContentContainer({ children, maxWidth, theme, color, ignoreColorVisionEvents = false, minWidth, }) {
+    const { isFirefox } = useBrowserCheck();
+    const selectedTheme = useTheme(theme);
+    const [activeColorVisionIndex, setActiveIndex] = useState(-1);
+    const resetTimer = useRef(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 (jsx("div", { className: styles.Container, style: {
+            background: color
+                ? color
+                : changeColorOpacity(selectedTheme.tooltip.backgroundColor, isFirefox ? 1 : TOOLTIP_BG_OPACITY),
+            maxWidth,
+            minWidth,
+            fontFamily: FONT_FAMILY,
+        }, children: children({ activeColorVisionIndex }) }));
+}
+
+export { TooltipContentContainer };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipContentContainer/TooltipContentContainer.mjs

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, changeColorOpacity, FONT_FAMILY, COLOR_VISION_SINGLE_ITEM } from '@shopify/polaris-viz-core';
+import { useState, useRef } from 'react';
+import { useWatchColorVisionEvents } from '../../../../hooks/useWatchColorVisionEvents.mjs';
+import { useBrowserCheck } from '../../../../hooks/useBrowserCheck.mjs';
+import { TOOLTIP_BG_OPACITY } from '../../../../constants.mjs';
+import styles from './TooltipContentContainer.module.scss.mjs';
+
+function TooltipContentContainer({ children, maxWidth, theme, color, ignoreColorVisionEvents = false, minWidth, }) {
+    const { isFirefox } = useBrowserCheck();
+    const selectedTheme = useTheme(theme);
+    const [activeColorVisionIndex, setActiveIndex] = useState(-1);
+    const resetTimer = useRef(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 (jsx("div", { className: styles.Container, style: {
+            background: color
+                ? color
+                : changeColorOpacity(selectedTheme.tooltip.backgroundColor, isFirefox ? 1 : TOOLTIP_BG_OPACITY),
+            maxWidth,
+            minWidth,
+            fontFamily: FONT_FAMILY,
+        }, children: children({ activeColorVisionIndex }) }));
+}
+
+export { TooltipContentContainer };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipContentContainer/TooltipContentContainer.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".TooltipContentContainer-module_Container__uzwU-{backdrop-filter:blur(5px);border-radius:5px;box-shadow:0 0 2px rgba(0,0,0,.2),0 2px 10px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:8px;min-width:180px;padding:8px}";
+var styles = {"Container":"TooltipContentContainer-module_Container__uzwU-"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipContentContainer/TooltipContentContainer.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".TooltipContentContainer-module_Container__uzwU-{backdrop-filter:blur(5px);border-radius:5px;box-shadow:0 0 2px rgba(0,0,0,.2),0 2px 10px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:8px;min-width:180px;padding:8px}";
+var styles = {"Container":"TooltipContentContainer-module_Container__uzwU-"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipRow/TooltipRow.d.ts

@@ -8,4 +8,4 @@ export interface Props {
     renderSeriesIcon?: () => React.ReactNode;
     trend?: TrendIndicatorType;
 }
-export declare function TooltipRow({ color, isComparison, label, renderSeriesIcon, shape, trend, value }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipRow({ color, isComparison, label, renderSeriesIcon, shape, trend, value, }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipTitle/TooltipTitle.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-export declare function TooltipTitle({ children, theme, color }: {
+export declare function TooltipTitle({ children, theme, color, }: {
     children: ReactNode;
     theme: string;
     color?: string;

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipTitle/TooltipTitle.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme } from '@shopify/polaris-viz-core';
+import styles from './TooltipTitle.module.scss.js';
+
+function TooltipTitle({ children, theme, color, }) {
+    const selectedTheme = useTheme(theme);
+    return (jsx("p", { className: styles.Title, style: { color: color ?? selectedTheme.tooltip.titleColor }, children: children }));
+}
+
+export { TooltipTitle };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipTitle/TooltipTitle.mjs

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme } from '@shopify/polaris-viz-core';
+import styles from './TooltipTitle.module.scss.mjs';
+
+function TooltipTitle({ children, theme, color, }) {
+    const selectedTheme = useTheme(theme);
+    return (jsx("p", { className: styles.Title, style: { color: color ?? selectedTheme.tooltip.titleColor }, children: children }));
+}
+
+export { TooltipTitle };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipTitle/TooltipTitle.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".TooltipTitle-module_Title__TAicT{font-size:12px;font-weight:500;line-height:20px;margin:0;overflow-wrap:break-word}";
+var styles = {"Title":"TooltipTitle-module_Title__TAicT"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/components/TooltipTitle/TooltipTitle.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".TooltipTitle-module_Title__TAicT{font-size:12px;font-weight:500;line-height:20px;margin:0;overflow-wrap:break-word}";
+var styles = {"Title":"TooltipTitle-module_Title__TAicT"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipContent/index.d.ts

@@ -1,4 +1,4 @@
 export { TooltipContent } from './TooltipContent';
 export type { TooltipContentProps } from './TooltipContent';
-export { TooltipContentContainer, TooltipTitle, TooltipSeriesName, TooltipRow, TooltipSeries } from './components';
+export { TooltipContentContainer, TooltipTitle, TooltipSeriesName, TooltipRow, TooltipSeries, } from './components';
 export { getTooltipContentTemplateColumnCount } from './utilities/get-tooltip-template-content-column-count';

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipWrapper/constants.js

@@ -0,0 +1,9 @@
+import { TooltipHorizontalOffset, TooltipVerticalOffset } from './types.js';
+
+({
+    horizontal: TooltipHorizontalOffset.Center,
+    vertical: TooltipVerticalOffset.Above,
+});
+const SCROLLBAR_WIDTH = 20;
+
+export { SCROLLBAR_WIDTH };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipWrapper/constants.mjs

@@ -0,0 +1,9 @@
+import { TooltipHorizontalOffset, TooltipVerticalOffset } from './types.mjs';
+
+({
+    horizontal: TooltipHorizontalOffset.Center,
+    vertical: TooltipVerticalOffset.Above,
+});
+const SCROLLBAR_WIDTH = 20;
+
+export { SCROLLBAR_WIDTH };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipWrapper/types.js

@@ -0,0 +1,15 @@
+var TooltipHorizontalOffset;
+(function (TooltipHorizontalOffset) {
+    TooltipHorizontalOffset[TooltipHorizontalOffset["Left"] = 0] = "Left";
+    TooltipHorizontalOffset[TooltipHorizontalOffset["Right"] = 1] = "Right";
+    TooltipHorizontalOffset[TooltipHorizontalOffset["Center"] = 2] = "Center";
+})(TooltipHorizontalOffset || (TooltipHorizontalOffset = {}));
+var TooltipVerticalOffset;
+(function (TooltipVerticalOffset) {
+    TooltipVerticalOffset[TooltipVerticalOffset["Above"] = 0] = "Above";
+    TooltipVerticalOffset[TooltipVerticalOffset["Below"] = 1] = "Below";
+    TooltipVerticalOffset[TooltipVerticalOffset["Inline"] = 2] = "Inline";
+    TooltipVerticalOffset[TooltipVerticalOffset["Center"] = 3] = "Center";
+})(TooltipVerticalOffset || (TooltipVerticalOffset = {}));
+
+export { TooltipHorizontalOffset, TooltipVerticalOffset };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipWrapper/types.mjs

@@ -0,0 +1,15 @@
+var TooltipHorizontalOffset;
+(function (TooltipHorizontalOffset) {
+    TooltipHorizontalOffset[TooltipHorizontalOffset["Left"] = 0] = "Left";
+    TooltipHorizontalOffset[TooltipHorizontalOffset["Right"] = 1] = "Right";
+    TooltipHorizontalOffset[TooltipHorizontalOffset["Center"] = 2] = "Center";
+})(TooltipHorizontalOffset || (TooltipHorizontalOffset = {}));
+var TooltipVerticalOffset;
+(function (TooltipVerticalOffset) {
+    TooltipVerticalOffset[TooltipVerticalOffset["Above"] = 0] = "Above";
+    TooltipVerticalOffset[TooltipVerticalOffset["Below"] = 1] = "Below";
+    TooltipVerticalOffset[TooltipVerticalOffset["Inline"] = 2] = "Inline";
+    TooltipVerticalOffset[TooltipVerticalOffset["Center"] = 3] = "Center";
+})(TooltipVerticalOffset || (TooltipVerticalOffset = {}));
+
+export { TooltipHorizontalOffset, TooltipVerticalOffset };

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getDonutChartTooltipPosition.d.ts

@@ -4,5 +4,5 @@ interface Props extends Pick<TooltipPositionParams, 'event' | 'eventType' | 'ind
     containerBounds: BoundingRect;
     parentElement: SVGSVGElement | null;
 }
-export declare function getDonutChartTooltipPosition({ containerBounds, event, eventType, index, parentElement }: Props): import("..").TooltipPosition;
+export declare function getDonutChartTooltipPosition({ containerBounds, event, eventType, index, parentElement, }: Props): import("..").TooltipPosition;
 export {};

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/TrendIndicator.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { NO_VALUE_WIDTH, HEIGHT, NO_VALUE_ICON_HEIGHT, ICON_SIZE, TEXT_ICON_SPACING, Y_OFFSET } from './constants.js';
+import { estimateTrendIndicatorWidth } from './utilities/estimateTrendIndicatorWidth.js';
+import { useTheme, FONT_FAMILY } from '@shopify/polaris-viz-core';
+import { getFontSize } from '../../utilities/getFontSize.js';
+import { ArrowUp } from './components/Arrows/ArrowUp.js';
+import { ArrowDown } from './components/Arrows/ArrowDown.js';
+import { Svg } from './components/Svg/Svg.js';
+
+const TREND_FONT_WEIGHT = 650;
+function TrendIndicator({ accessibilityLabel, direction = 'upward', tabIndex = -1, theme = 'Light', trend = 'neutral', value, }) {
+    const selectedTheme = useTheme(theme);
+    const fontSize = getFontSize();
+    const svgProps = {
+        accessibilityLabel,
+        height: HEIGHT,
+        tabIndex,
+    };
+    if (value == null) {
+        return (jsx(Svg, { ...svgProps, width: NO_VALUE_WIDTH, children: jsx("path", { d: "M0.519531 1.79395H12.0039V0.249023H0.519531V1.79395Z", fill: selectedTheme.trendIndicator.neutral, transform: `translate(${(NO_VALUE_WIDTH - NO_VALUE_WIDTH) / 2}, ${(HEIGHT - NO_VALUE_ICON_HEIGHT) / 2})` }) }));
+    }
+    const { textWidth, totalWidth } = estimateTrendIndicatorWidth(value, fontSize, TREND_FONT_WEIGHT);
+    return (jsx(Svg, { ...svgProps, width: totalWidth, children: jsxs("g", { color: selectedTheme.trendIndicator[trend], children: [value !== '0%' && (jsx("g", { transform: `translate(0, ${(HEIGHT - ICON_SIZE) / 2})`, children: direction === 'upward' ? jsx(ArrowUp, {}) : jsx(ArrowDown, {}) })), jsx("text", { x: ICON_SIZE + TEXT_ICON_SPACING, y: (HEIGHT + Y_OFFSET) / 2, fontSize: fontSize, fill: "currentColor", fontWeight: TREND_FONT_WEIGHT, dominantBaseline: "middle", fontFamily: FONT_FAMILY, textRendering: "geometricPrecision", width: textWidth, children: value })] }) }));
+}
+
+export { TrendIndicator };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/TrendIndicator.mjs

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { NO_VALUE_WIDTH, HEIGHT, NO_VALUE_ICON_HEIGHT, ICON_SIZE, TEXT_ICON_SPACING, Y_OFFSET } from './constants.mjs';
+import { estimateTrendIndicatorWidth } from './utilities/estimateTrendIndicatorWidth.mjs';
+import { useTheme, FONT_FAMILY } from '@shopify/polaris-viz-core';
+import { getFontSize } from '../../utilities/getFontSize.mjs';
+import { ArrowUp } from './components/Arrows/ArrowUp.mjs';
+import { ArrowDown } from './components/Arrows/ArrowDown.mjs';
+import { Svg } from './components/Svg/Svg.mjs';
+
+const TREND_FONT_WEIGHT = 650;
+function TrendIndicator({ accessibilityLabel, direction = 'upward', tabIndex = -1, theme = 'Light', trend = 'neutral', value, }) {
+    const selectedTheme = useTheme(theme);
+    const fontSize = getFontSize();
+    const svgProps = {
+        accessibilityLabel,
+        height: HEIGHT,
+        tabIndex,
+    };
+    if (value == null) {
+        return (jsx(Svg, { ...svgProps, width: NO_VALUE_WIDTH, children: jsx("path", { d: "M0.519531 1.79395H12.0039V0.249023H0.519531V1.79395Z", fill: selectedTheme.trendIndicator.neutral, transform: `translate(${(NO_VALUE_WIDTH - NO_VALUE_WIDTH) / 2}, ${(HEIGHT - NO_VALUE_ICON_HEIGHT) / 2})` }) }));
+    }
+    const { textWidth, totalWidth } = estimateTrendIndicatorWidth(value, fontSize, TREND_FONT_WEIGHT);
+    return (jsx(Svg, { ...svgProps, width: totalWidth, children: jsxs("g", { color: selectedTheme.trendIndicator[trend], children: [value !== '0%' && (jsx("g", { transform: `translate(0, ${(HEIGHT - ICON_SIZE) / 2})`, children: direction === 'upward' ? jsx(ArrowUp, {}) : jsx(ArrowDown, {}) })), jsx("text", { x: ICON_SIZE + TEXT_ICON_SPACING, y: (HEIGHT + Y_OFFSET) / 2, fontSize: fontSize, fill: "currentColor", fontWeight: TREND_FONT_WEIGHT, dominantBaseline: "middle", fontFamily: FONT_FAMILY, textRendering: "geometricPrecision", width: textWidth, children: value })] }) }));
+}
+
+export { TrendIndicator };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Arrows/ArrowDown.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function ArrowDown() {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "6", height: "6", fill: "none", viewBox: "0 0 6 6", children: jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.75 1a.75.75 0 0 0-1.5 0v2.19L1.655.594a.75.75 0 1 0-1.06 1.06L3.189 4.25H1a.75.75 0 0 0 0 1.5h4a.748.748 0 0 0 .529-.218l.001-.002.002-.001A.748.748 0 0 0 5.75 5V1Z", clipRule: "evenodd" }) }));
+}
+
+export { ArrowDown };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Arrows/ArrowDown.mjs

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function ArrowDown() {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "6", height: "6", fill: "none", viewBox: "0 0 6 6", children: jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.75 1a.75.75 0 0 0-1.5 0v2.19L1.655.594a.75.75 0 1 0-1.06 1.06L3.189 4.25H1a.75.75 0 0 0 0 1.5h4a.748.748 0 0 0 .529-.218l.001-.002.002-.001A.748.748 0 0 0 5.75 5V1Z", clipRule: "evenodd" }) }));
+}
+
+export { ArrowDown };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Arrows/ArrowUp.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function ArrowUp() {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "6", height: "6", fill: "none", viewBox: "0 0 6 6", children: jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M1 .25a.75.75 0 1 0 0 1.5h2.19L.594 4.345a.75.75 0 0 0 1.06 1.06L4.25 2.811V5a.75.75 0 0 0 1.5 0V1A.748.748 0 0 0 5 .25H1Z", clipRule: "evenodd" }) }));
+}
+
+export { ArrowUp };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Arrows/ArrowUp.mjs

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function ArrowUp() {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "6", height: "6", fill: "none", viewBox: "0 0 6 6", children: jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M1 .25a.75.75 0 1 0 0 1.5h2.19L.594 4.345a.75.75 0 0 0 1.06 1.06L4.25 2.811V5a.75.75 0 0 0 1.5 0V1A.748.748 0 0 0 5 .25H1Z", clipRule: "evenodd" }) }));
+}
+
+export { ArrowUp };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Svg/Svg.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Svg({ accessibilityLabel, children, height, width, tabIndex = 0 }) {
+    const hasLabel = accessibilityLabel != null;
+    return (jsxs("svg", { viewBox: `0 0 ${width} ${height}`, height: height, width: width, role: hasLabel ? 'img' : undefined, className: 'SVG', tabIndex: tabIndex, children: [hasLabel && jsx("title", { children: accessibilityLabel }), children] }));
+}
+
+export { Svg };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Svg/Svg.mjs

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Svg({ accessibilityLabel, children, height, width, tabIndex = 0 }) {
+    const hasLabel = accessibilityLabel != null;
+    return (jsxs("svg", { viewBox: `0 0 ${width} ${height}`, height: height, width: width, role: hasLabel ? 'img' : undefined, className: 'SVG', tabIndex: tabIndex, children: [hasLabel && jsx("title", { children: accessibilityLabel }), children] }));
+}
+
+export { Svg };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/constants.js

@@ -0,0 +1,9 @@
+const NO_VALUE_WIDTH = 11;
+const NO_VALUE_ICON_HEIGHT = 2;
+const TEXT_ICON_SPACING = 4;
+const ICON_SIZE = 5.5;
+const FONT_WEIGHT = 450;
+const HEIGHT = 16;
+const Y_OFFSET = 3;
+
+export { FONT_WEIGHT, HEIGHT, ICON_SIZE, NO_VALUE_ICON_HEIGHT, NO_VALUE_WIDTH, TEXT_ICON_SPACING, Y_OFFSET };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/constants.mjs

@@ -0,0 +1,9 @@
+const NO_VALUE_WIDTH = 11;
+const NO_VALUE_ICON_HEIGHT = 2;
+const TEXT_ICON_SPACING = 4;
+const ICON_SIZE = 5.5;
+const FONT_WEIGHT = 450;
+const HEIGHT = 16;
+const Y_OFFSET = 3;
+
+export { FONT_WEIGHT, HEIGHT, ICON_SIZE, NO_VALUE_ICON_HEIGHT, NO_VALUE_WIDTH, TEXT_ICON_SPACING, Y_OFFSET };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/utilities/estimateTrendIndicatorWidth.js

@@ -0,0 +1,13 @@
+import { NO_VALUE_WIDTH, ICON_SIZE, TEXT_ICON_SPACING } from '../constants.js';
+import { estimateStringWidthWithOffset } from '../../../utilities/estimateStringWidthWithOffset.js';
+import '@shopify/polaris-viz-core';
+
+function estimateTrendIndicatorWidth(value, fontSize, fontWeight) {
+    const textWidth = value
+        ? estimateStringWidthWithOffset(value, fontSize, fontWeight)
+        : NO_VALUE_WIDTH;
+    const totalWidth = Math.round(ICON_SIZE + TEXT_ICON_SPACING + textWidth);
+    return { totalWidth, textWidth };
+}
+
+export { estimateTrendIndicatorWidth };

package/dist/esm/shared/charts/components/GPolarisViz/components/TrendIndicator/utilities/estimateTrendIndicatorWidth.mjs

@@ -0,0 +1,13 @@
+import { NO_VALUE_WIDTH, ICON_SIZE, TEXT_ICON_SPACING } from '../constants.mjs';
+import { estimateStringWidthWithOffset } from '../../../utilities/estimateStringWidthWithOffset.mjs';
+import '@shopify/polaris-viz-core';
+
+function estimateTrendIndicatorWidth(value, fontSize, fontWeight) {
+    const textWidth = value
+        ? estimateStringWidthWithOffset(value, fontSize, fontWeight)
+        : NO_VALUE_WIDTH;
+    const totalWidth = Math.round(ICON_SIZE + TEXT_ICON_SPACING + textWidth);
+    return { totalWidth, textWidth };
+}
+
+export { estimateTrendIndicatorWidth };