@levi-gemcommerce/analytics 0.0.0-test.1

package/dist/esm/components/SingleMetricChartCard/SingleMetricChartCard.js

@@ -0,0 +1,40 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Card, BlockStack } from '@shopify/polaris';
+import { useState } from 'react';
+import '@shopify/polaris-icons';
+import '../../utils/dayjs.js';
+import '../../utils/analytics.js';
+import '../../types/template.js';
+import '../../shared/components/GTooltip/components/GTooltipCard.js';
+import '../../shared/components/GDiv/GDiv.js';
+import 'react-i18next';
+import '../../shared/components/GFeatureLocked/constants.js';
+import '../../shared/components/GFeatureLocked/types.js';
+import '../../shared/components/GPagination/GPagination.js';
+import '../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import '../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../providers/ConvertMoneyProvider.js';
+import '../../core/gemxql/constants/row-reader-mode.js';
+import '../../core/gemxql/types/analytic-data.js';
+import '../../core/gemxql/types/analytic-source.js';
+import '../../core/gemxql/types/extra-condition.js';
+import '../../core/gemxql/types/field-filters.js';
+import '../../core/gemxql/types/field-operators.js';
+import '../../core/gemxql/types/group-with-clause.js';
+import '../../core/gemxql/types/order-by.js';
+import '../../core/gemxql/types/page-fields.js';
+import '../../core/gemxql/types/row-reader-mode.js';
+import '../../core/gemxql/types/time-dimension.js';
+import { MetricChart } from '../common/chart/MetricChart.js';
+import '../../constants/analytic-metric-tooltip.js';
+import '../../constants/breakdown-targets.js';
+import { MetricInfoBlock } from '../common/chart/MetricInfoBlock.js';
+
+const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, isMockData, onClickTitle, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(MetricInfoBlock, { item: metricInfo, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, isMockData: isMockData, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, columnTypes: columnTypes, metricKey: metricInfo.key })] }) }) }));
+};
+
+export { SingleMetricChartCard };

package/dist/esm/components/SingleMetricChartCard/SingleMetricChartCard.mjs

@@ -0,0 +1,40 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Card, BlockStack } from '@shopify/polaris';
+import { useState } from 'react';
+import '@shopify/polaris-icons';
+import '../../utils/dayjs.mjs';
+import '../../utils/analytics.mjs';
+import '../../types/template.mjs';
+import '../../shared/components/GTooltip/components/GTooltipCard.mjs';
+import '../../shared/components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import '../../shared/components/GFeatureLocked/constants.mjs';
+import '../../shared/components/GFeatureLocked/types.mjs';
+import '../../shared/components/GPagination/GPagination.mjs';
+import '../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../providers/ConvertMoneyProvider.mjs';
+import '../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../core/gemxql/types/analytic-data.mjs';
+import '../../core/gemxql/types/analytic-source.mjs';
+import '../../core/gemxql/types/extra-condition.mjs';
+import '../../core/gemxql/types/field-filters.mjs';
+import '../../core/gemxql/types/field-operators.mjs';
+import '../../core/gemxql/types/group-with-clause.mjs';
+import '../../core/gemxql/types/order-by.mjs';
+import '../../core/gemxql/types/page-fields.mjs';
+import '../../core/gemxql/types/row-reader-mode.mjs';
+import '../../core/gemxql/types/time-dimension.mjs';
+import { MetricChart } from '../common/chart/MetricChart.mjs';
+import '../../constants/analytic-metric-tooltip.mjs';
+import '../../constants/breakdown-targets.mjs';
+import { MetricInfoBlock } from '../common/chart/MetricInfoBlock.mjs';
+
+const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, isMockData, onClickTitle, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(MetricInfoBlock, { item: metricInfo, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, isMockData: isMockData, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, columnTypes: columnTypes, metricKey: metricInfo.key })] }) }) }));
+};
+
+export { SingleMetricChartCard };

package/dist/esm/components/SingleMetricChartCard/index.d.ts

@@ -0,0 +1,2 @@
+export { SingleMetricChartCard } from './SingleMetricChartCard';
+export type { IProps as ISingleMetricChartCardProps } from './SingleMetricChartCard';

package/dist/esm/components/common/chart/GChartSkeleton.d.ts

@@ -0,0 +1 @@
+export declare const GChartSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/common/chart/GChartSkeleton.js

@@ -0,0 +1,36 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import '@shopify/polaris';
+import '@shopify/polaris-icons';
+import 'react';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import '../../../shared/components/GTooltip/components/GTooltipCard.js';
+import '../../../shared/components/GDiv/GDiv.js';
+import 'react-i18next';
+import { GSkeletonDisplayText } from '../../../shared/components/GSkeletonDisplayText/GSkeletonDisplayText.js';
+import '../../../shared/components/GFeatureLocked/constants.js';
+import '../../../shared/components/GFeatureLocked/types.js';
+import '../../../shared/components/GPagination/GPagination.js';
+import '../../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import '../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.js';
+import '../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../core/gemxql/types/analytic-data.js';
+import '../../../core/gemxql/types/analytic-source.js';
+import '../../../core/gemxql/types/extra-condition.js';
+import '../../../core/gemxql/types/field-filters.js';
+import '../../../core/gemxql/types/field-operators.js';
+import '../../../core/gemxql/types/group-with-clause.js';
+import '../../../core/gemxql/types/order-by.js';
+import '../../../core/gemxql/types/page-fields.js';
+import '../../../core/gemxql/types/row-reader-mode.js';
+import '../../../core/gemxql/types/time-dimension.js';
+
+const GChartSkeleton = () => {
+    return jsx(GSkeletonDisplayText, { height: "188px" });
+};
+
+export { GChartSkeleton };

package/dist/esm/components/common/chart/GChartSkeleton.mjs

@@ -0,0 +1,36 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import '@shopify/polaris';
+import '@shopify/polaris-icons';
+import 'react';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import '../../../shared/components/GTooltip/components/GTooltipCard.mjs';
+import '../../../shared/components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import { GSkeletonDisplayText } from '../../../shared/components/GSkeletonDisplayText/GSkeletonDisplayText.mjs';
+import '../../../shared/components/GFeatureLocked/constants.mjs';
+import '../../../shared/components/GFeatureLocked/types.mjs';
+import '../../../shared/components/GPagination/GPagination.mjs';
+import '../../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.mjs';
+import '../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../core/gemxql/types/analytic-data.mjs';
+import '../../../core/gemxql/types/analytic-source.mjs';
+import '../../../core/gemxql/types/extra-condition.mjs';
+import '../../../core/gemxql/types/field-filters.mjs';
+import '../../../core/gemxql/types/field-operators.mjs';
+import '../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../core/gemxql/types/order-by.mjs';
+import '../../../core/gemxql/types/page-fields.mjs';
+import '../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../core/gemxql/types/time-dimension.mjs';
+
+const GChartSkeleton = () => {
+    return jsx(GSkeletonDisplayText, { height: "188px" });
+};
+
+export { GChartSkeleton };

package/dist/esm/components/common/chart/MetricChart.d.ts

@@ -0,0 +1,12 @@
+import type { DataSeries } from '@shopify/polaris-viz';
+import type { ReactElement } from 'react';
+import type { ColumnTypesMap } from '../../../core/gemxql';
+import type { EMetricKey } from '../../../types';
+export interface IProps {
+    lineChartData: DataSeries[];
+    isLoading?: boolean;
+    isEmptyMetricData?: boolean;
+    columnTypes?: ColumnTypesMap;
+    metricKey?: EMetricKey;
+}
+export declare const MetricChart: ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }: IProps) => ReactElement;

package/dist/esm/components/common/chart/MetricChart.js

@@ -0,0 +1,42 @@
+"use client"
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '../../../providers/ConvertMoneyProvider.js';
+import { MetricChartProvider } from '../../../providers/MetricChartProvider.js';
+import '../../../providers/TimezoneProvider.js';
+import { LineChart } from '@shopify/polaris-viz';
+import { GChartSkeleton } from './GChartSkeleton.js';
+import { MetricChartEmpty } from './MetricChartEmpty.js';
+import { MetricChartTooltip } from './MetricChartTooltip.js';
+import 'react';
+import '../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import { useFormatLineChartData } from '../../../hooks/useFormatLineChartData.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../../constants/analytic-metric-tooltip.js';
+import '../../../constants/breakdown-targets.js';
+
+const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }) => {
+    const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
+    if (!metricKey) {
+        return jsx(Fragment, {});
+    }
+    if (isLoading) {
+        return jsx(GChartSkeleton, {});
+    }
+    if (isEmptyMetricData) {
+        return jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" });
+    }
+    return (jsx(MetricChartProvider, { children: jsx(LineChart, { data: lineChartData, yAxisOptions: yAxisOptions, theme: "Light", tooltipOptions: {
+                titleFormatter: () => `${ANALYTICS_METRIC_TOOLTIP[metricKey]?.title ?? ''}`,
+                keyFormatter: (value) => {
+                    return value;
+                },
+                renderTooltipContent(data) {
+                    return jsx(MetricChartTooltip, { data: data, formatValue: formatValue });
+                },
+            }, showLegend: true }) }));
+};
+
+export { MetricChart };

package/dist/esm/components/common/chart/MetricChart.mjs

@@ -0,0 +1,42 @@
+"use client"
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '../../../providers/ConvertMoneyProvider.mjs';
+import { MetricChartProvider } from '../../../providers/MetricChartProvider.mjs';
+import '../../../providers/TimezoneProvider.mjs';
+import { LineChart } from '@shopify/polaris-viz';
+import { GChartSkeleton } from './GChartSkeleton.mjs';
+import { MetricChartEmpty } from './MetricChartEmpty.mjs';
+import { MetricChartTooltip } from './MetricChartTooltip.mjs';
+import 'react';
+import '../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import { useFormatLineChartData } from '../../../hooks/useFormatLineChartData.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../../constants/analytic-metric-tooltip.mjs';
+import '../../../constants/breakdown-targets.mjs';
+
+const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }) => {
+    const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
+    if (!metricKey) {
+        return jsx(Fragment, {});
+    }
+    if (isLoading) {
+        return jsx(GChartSkeleton, {});
+    }
+    if (isEmptyMetricData) {
+        return jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" });
+    }
+    return (jsx(MetricChartProvider, { children: jsx(LineChart, { data: lineChartData, yAxisOptions: yAxisOptions, theme: "Light", tooltipOptions: {
+                titleFormatter: () => `${ANALYTICS_METRIC_TOOLTIP[metricKey]?.title ?? ''}`,
+                keyFormatter: (value) => {
+                    return value;
+                },
+                renderTooltipContent(data) {
+                    return jsx(MetricChartTooltip, { data: data, formatValue: formatValue });
+                },
+            }, showLegend: true }) }));
+};
+
+export { MetricChart };

package/dist/esm/components/common/chart/MetricChartEmpty.d.ts

@@ -0,0 +1,8 @@
+import type { BoxProps } from '@shopify/polaris';
+export interface MetricChartEmptyProps {
+    boxProps?: BoxProps;
+    minHeight?: string;
+    description?: string;
+    title: string;
+}
+export declare const MetricChartEmpty: React.FC<MetricChartEmptyProps>;

package/dist/esm/components/common/chart/MetricChartEmpty.js

@@ -0,0 +1,38 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import ANALYTIC_EMPTY from '../../../assets/img/analytic-empty.png.js';
+import { Box, BlockStack, Text } from '@shopify/polaris';
+import '@shopify/polaris-icons';
+import 'react';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import { GBlockCenter } from '../../../shared/components/GBlockCenter/GBlockCenter.js';
+import '../../../shared/components/GTooltip/components/GTooltipCard.js';
+import '../../../shared/components/GDiv/GDiv.js';
+import 'react-i18next';
+import { GThumbnail } from '../../../shared/components/GThumbnail/GThumbnail.js';
+import '../../../shared/components/GFeatureLocked/constants.js';
+import '../../../shared/components/GFeatureLocked/types.js';
+import '../../../shared/components/GPagination/GPagination.js';
+import '../../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import '../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.js';
+import '../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../core/gemxql/types/analytic-data.js';
+import '../../../core/gemxql/types/analytic-source.js';
+import '../../../core/gemxql/types/extra-condition.js';
+import '../../../core/gemxql/types/field-filters.js';
+import '../../../core/gemxql/types/field-operators.js';
+import '../../../core/gemxql/types/group-with-clause.js';
+import '../../../core/gemxql/types/order-by.js';
+import '../../../core/gemxql/types/page-fields.js';
+import '../../../core/gemxql/types/row-reader-mode.js';
+import '../../../core/gemxql/types/time-dimension.js';
+
+const MetricChartEmpty = ({ boxProps, minHeight, description, title }) => {
+    return (jsx(Box, { minWidth: "100%", ...boxProps, children: jsx(GBlockCenter, { minHeight: minHeight, children: jsx(Box, { padding: '400', children: jsxs(BlockStack, { gap: "400", align: "center", inlineAlign: "center", children: [jsx("div", { className: "h-[80px] w-[80px]", children: jsx(GThumbnail, { source: ANALYTIC_EMPTY, width: "80px", height: "80px", alt: title, classRemoved: true }) }), jsxs(BlockStack, { gap: "200", align: "center", inlineAlign: "center", children: [jsx(Text, { as: "h4", variant: "headingSm", fontWeight: "semibold", children: title }), jsx(Text, { as: "h4", variant: "bodyMd", tone: "subdued", children: description })] })] }) }) }) }));
+};
+
+export { MetricChartEmpty };

package/dist/esm/components/common/chart/MetricChartEmpty.mjs

@@ -0,0 +1,38 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import ANALYTIC_EMPTY from '../../../assets/img/analytic-empty.png.mjs';
+import { Box, BlockStack, Text } from '@shopify/polaris';
+import '@shopify/polaris-icons';
+import 'react';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import { GBlockCenter } from '../../../shared/components/GBlockCenter/GBlockCenter.mjs';
+import '../../../shared/components/GTooltip/components/GTooltipCard.mjs';
+import '../../../shared/components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import { GThumbnail } from '../../../shared/components/GThumbnail/GThumbnail.mjs';
+import '../../../shared/components/GFeatureLocked/constants.mjs';
+import '../../../shared/components/GFeatureLocked/types.mjs';
+import '../../../shared/components/GPagination/GPagination.mjs';
+import '../../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.mjs';
+import '../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../core/gemxql/types/analytic-data.mjs';
+import '../../../core/gemxql/types/analytic-source.mjs';
+import '../../../core/gemxql/types/extra-condition.mjs';
+import '../../../core/gemxql/types/field-filters.mjs';
+import '../../../core/gemxql/types/field-operators.mjs';
+import '../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../core/gemxql/types/order-by.mjs';
+import '../../../core/gemxql/types/page-fields.mjs';
+import '../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../core/gemxql/types/time-dimension.mjs';
+
+const MetricChartEmpty = ({ boxProps, minHeight, description, title }) => {
+    return (jsx(Box, { minWidth: "100%", ...boxProps, children: jsx(GBlockCenter, { minHeight: minHeight, children: jsx(Box, { padding: '400', children: jsxs(BlockStack, { gap: "400", align: "center", inlineAlign: "center", children: [jsx("div", { className: "h-[80px] w-[80px]", children: jsx(GThumbnail, { source: ANALYTIC_EMPTY, width: "80px", height: "80px", alt: title, classRemoved: true }) }), jsxs(BlockStack, { gap: "200", align: "center", inlineAlign: "center", children: [jsx(Text, { as: "h4", variant: "headingSm", fontWeight: "semibold", children: title }), jsx(Text, { as: "h4", variant: "bodyMd", tone: "subdued", children: description })] })] }) }) }) }));
+};
+
+export { MetricChartEmpty };

package/dist/esm/components/common/chart/MetricChartTooltip.d.ts

@@ -0,0 +1,6 @@
+import type { RenderTooltipContentData } from '@shopify/polaris-viz';
+export interface MetricChartTooltipProps {
+    data: RenderTooltipContentData;
+    formatValue: (value: number) => string;
+}
+export declare const MetricChartTooltip: React.FC<MetricChartTooltipProps>;

package/dist/esm/components/common/chart/MetricChartTooltip.js

@@ -0,0 +1,28 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Card, BlockStack, Text, InlineStack } from '@shopify/polaris';
+import '../../../constants/analytic-metric-tooltip.js';
+import '../../../constants/breakdown-targets.js';
+import { PLACEHOLDER_VALUE } from '../../../constants/chart.js';
+import { MetricPercentage } from '../percent/MetricPercentage.js';
+
+const MetricChartTooltip = ({ data, formatValue }) => {
+    const { activeIndex } = data;
+    const currentData = data?.dataSeries?.[0]?.data?.[activeIndex];
+    const previousData = data?.dataSeries?.[1]?.data?.[activeIndex];
+    const formatPercent = () => {
+        const value = currentData.trend?.value;
+        if (!value)
+            return PLACEHOLDER_VALUE;
+        const valueNumber = Number(value.replace(/[%~]/g, ''));
+        if (!Number.isFinite(valueNumber))
+            return PLACEHOLDER_VALUE;
+        if (currentData.trend?.trend === 'negative') {
+            return valueNumber * -1;
+        }
+        return valueNumber;
+    };
+    return (jsx("div", { className: "w-fit min-w-[175px]", children: jsx(Card, { padding: '200', children: jsxs(BlockStack, { gap: '100', children: [jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: data.formatters?.titleFormatter?.(data.title || '') || data.title }), jsxs(BlockStack, { gap: '100', children: [jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "h-[2px] w-[12px] rounded-[10px] bg-[#4FA9EA]" }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", tone: "subdued", children: currentData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(currentData.value) }), jsx(MetricPercentage, { change: formatPercent() })] })] }), jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "w-[12px] border border-dashed border-[#A1CAE7]" }), jsx(Text, { as: "p", variant: "bodySm", tone: "subdued", fontWeight: "medium", children: previousData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(previousData.value) }), jsx("div", { className: "opacity-0", children: jsx(MetricPercentage, { change: formatPercent() }) })] })] })] })] }) }) }));
+};
+
+export { MetricChartTooltip };

package/dist/esm/components/common/chart/MetricChartTooltip.mjs

@@ -0,0 +1,28 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Card, BlockStack, Text, InlineStack } from '@shopify/polaris';
+import '../../../constants/analytic-metric-tooltip.mjs';
+import '../../../constants/breakdown-targets.mjs';
+import { PLACEHOLDER_VALUE } from '../../../constants/chart.mjs';
+import { MetricPercentage } from '../percent/MetricPercentage.mjs';
+
+const MetricChartTooltip = ({ data, formatValue }) => {
+    const { activeIndex } = data;
+    const currentData = data?.dataSeries?.[0]?.data?.[activeIndex];
+    const previousData = data?.dataSeries?.[1]?.data?.[activeIndex];
+    const formatPercent = () => {
+        const value = currentData.trend?.value;
+        if (!value)
+            return PLACEHOLDER_VALUE;
+        const valueNumber = Number(value.replace(/[%~]/g, ''));
+        if (!Number.isFinite(valueNumber))
+            return PLACEHOLDER_VALUE;
+        if (currentData.trend?.trend === 'negative') {
+            return valueNumber * -1;
+        }
+        return valueNumber;
+    };
+    return (jsx("div", { className: "w-fit min-w-[175px]", children: jsx(Card, { padding: '200', children: jsxs(BlockStack, { gap: '100', children: [jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: data.formatters?.titleFormatter?.(data.title || '') || data.title }), jsxs(BlockStack, { gap: '100', children: [jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "h-[2px] w-[12px] rounded-[10px] bg-[#4FA9EA]" }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", tone: "subdued", children: currentData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(currentData.value) }), jsx(MetricPercentage, { change: formatPercent() })] })] }), jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "w-[12px] border border-dashed border-[#A1CAE7]" }), jsx(Text, { as: "p", variant: "bodySm", tone: "subdued", fontWeight: "medium", children: previousData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(previousData.value) }), jsx("div", { className: "opacity-0", children: jsx(MetricPercentage, { change: formatPercent() }) })] })] })] })] }) }) }));
+};
+
+export { MetricChartTooltip };

package/dist/esm/components/common/chart/MetricDonutChartSkeleton.d.ts

@@ -0,0 +1 @@
+export declare const MetricDonutChartSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/common/chart/MetricDonutChartSkeleton.js

@@ -0,0 +1,11 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Card, BlockStack } from '@shopify/polaris';
+import { GChartSkeleton } from './GChartSkeleton.js';
+import { MetricInfoSkeleton } from './MetricInfoSkeleton.js';
+
+const MetricDonutChartSkeleton = () => {
+    return (jsx(Card, { children: jsxs(BlockStack, { gap: "400", children: [jsx(MetricInfoSkeleton, { isShowOneLine: true }), jsx(GChartSkeleton, {})] }) }));
+};
+
+export { MetricDonutChartSkeleton };

package/dist/esm/components/common/chart/MetricDonutChartSkeleton.mjs

@@ -0,0 +1,11 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Card, BlockStack } from '@shopify/polaris';
+import { GChartSkeleton } from './GChartSkeleton.mjs';
+import { MetricInfoSkeleton } from './MetricInfoSkeleton.mjs';
+
+const MetricDonutChartSkeleton = () => {
+    return (jsx(Card, { children: jsxs(BlockStack, { gap: "400", children: [jsx(MetricInfoSkeleton, { isShowOneLine: true }), jsx(GChartSkeleton, {})] }) }));
+};
+
+export { MetricDonutChartSkeleton };

package/dist/esm/components/common/chart/MetricInfoBlock.d.ts

@@ -0,0 +1,14 @@
+import type { TextProps } from '@shopify/polaris';
+import type { ReactElement } from 'react';
+import type { IMetricCardItem } from '../../../types';
+export interface IProps {
+    item: IMetricCardItem;
+    isHovered: boolean;
+    isLoading?: boolean;
+    hideComparison?: boolean;
+    titleVariant?: TextProps['variant'];
+    titleFontWeight?: TextProps['fontWeight'];
+    isMockData?: boolean;
+    onClickTitle?: (key: string) => void;
+}
+export declare const MetricInfoBlock: ({ item, isHovered, isLoading, hideComparison, titleVariant, titleFontWeight, isMockData, onClickTitle, }: IProps) => ReactElement;

package/dist/esm/components/common/chart/MetricInfoBlock.js

@@ -0,0 +1,48 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BlockStack, InlineStack, Box, Text, Icon } from '@shopify/polaris';
+import { ChevronRightIcon } from '@shopify/polaris-icons';
+import 'react';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import { GTooltipCard } from '../../../shared/components/GTooltip/components/GTooltipCard.js';
+import '../../../shared/components/GDiv/GDiv.js';
+import 'react-i18next';
+import '../../../shared/components/GFeatureLocked/constants.js';
+import '../../../shared/components/GFeatureLocked/types.js';
+import '../../../shared/components/GPagination/GPagination.js';
+import '../../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import '../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.js';
+import '../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../core/gemxql/types/analytic-data.js';
+import '../../../core/gemxql/types/analytic-source.js';
+import '../../../core/gemxql/types/extra-condition.js';
+import '../../../core/gemxql/types/field-filters.js';
+import '../../../core/gemxql/types/field-operators.js';
+import '../../../core/gemxql/types/group-with-clause.js';
+import '../../../core/gemxql/types/order-by.js';
+import '../../../core/gemxql/types/page-fields.js';
+import '../../../core/gemxql/types/row-reader-mode.js';
+import '../../../core/gemxql/types/time-dimension.js';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../../constants/analytic-metric-tooltip.js';
+import '../../../constants/breakdown-targets.js';
+import { MetricInfoSkeleton } from './MetricInfoSkeleton.js';
+import { MetricValueSummary } from './MetricValueSummary.js';
+
+const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, isMockData, onClickTitle, }) => {
+    const { key, title, totalValue } = item;
+    const tooltip = ANALYTICS_METRIC_TOOLTIP[key];
+    if (isLoading)
+        return jsx(MetricInfoSkeleton, {});
+    return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className: isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]', onClick: (e) => {
+                    if (isMockData)
+                        return;
+                    e?.stopPropagation();
+                    onClickTitle?.(key);
+                }, children: jsxs(InlineStack, { wrap: false, children: [jsx(Box, { maxWidth: "100%", overflowX: "hidden", children: jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "span", variant: titleVariant, fontWeight: titleFontWeight, truncate: true, children: title }) }) }), isHovered && !isMockData && (jsx("div", { className: "flex h-[20px] w-[20px] items-center", children: jsx(Icon, { source: ChevronRightIcon, tone: "inherit" }) }))] }) }), jsx(MetricValueSummary, { totalValue: totalValue, hideComparison: hideComparison })] }));
+};
+
+export { MetricInfoBlock };

package/dist/esm/components/common/chart/MetricInfoBlock.mjs

@@ -0,0 +1,48 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BlockStack, InlineStack, Box, Text, Icon } from '@shopify/polaris';
+import { ChevronRightIcon } from '@shopify/polaris-icons';
+import 'react';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import { GTooltipCard } from '../../../shared/components/GTooltip/components/GTooltipCard.mjs';
+import '../../../shared/components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import '../../../shared/components/GFeatureLocked/constants.mjs';
+import '../../../shared/components/GFeatureLocked/types.mjs';
+import '../../../shared/components/GPagination/GPagination.mjs';
+import '../../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.mjs';
+import '../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../core/gemxql/types/analytic-data.mjs';
+import '../../../core/gemxql/types/analytic-source.mjs';
+import '../../../core/gemxql/types/extra-condition.mjs';
+import '../../../core/gemxql/types/field-filters.mjs';
+import '../../../core/gemxql/types/field-operators.mjs';
+import '../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../core/gemxql/types/order-by.mjs';
+import '../../../core/gemxql/types/page-fields.mjs';
+import '../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../core/gemxql/types/time-dimension.mjs';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../../constants/analytic-metric-tooltip.mjs';
+import '../../../constants/breakdown-targets.mjs';
+import { MetricInfoSkeleton } from './MetricInfoSkeleton.mjs';
+import { MetricValueSummary } from './MetricValueSummary.mjs';
+
+const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, isMockData, onClickTitle, }) => {
+    const { key, title, totalValue } = item;
+    const tooltip = ANALYTICS_METRIC_TOOLTIP[key];
+    if (isLoading)
+        return jsx(MetricInfoSkeleton, {});
+    return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className: isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]', onClick: (e) => {
+                    if (isMockData)
+                        return;
+                    e?.stopPropagation();
+                    onClickTitle?.(key);
+                }, children: jsxs(InlineStack, { wrap: false, children: [jsx(Box, { maxWidth: "100%", overflowX: "hidden", children: jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "span", variant: titleVariant, fontWeight: titleFontWeight, truncate: true, children: title }) }) }), isHovered && !isMockData && (jsx("div", { className: "flex h-[20px] w-[20px] items-center", children: jsx(Icon, { source: ChevronRightIcon, tone: "inherit" }) }))] }) }), jsx(MetricValueSummary, { totalValue: totalValue, hideComparison: hideComparison })] }));
+};
+
+export { MetricInfoBlock };

package/dist/esm/components/common/chart/MetricInfoSkeleton.d.ts

@@ -0,0 +1,4 @@
+export interface MetricInfoSkeletonProps {
+    isShowOneLine?: boolean;
+}
+export declare const MetricInfoSkeleton: React.FC<MetricInfoSkeletonProps>;

package/dist/esm/components/common/chart/MetricInfoSkeleton.js

@@ -0,0 +1,12 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, SkeletonBodyText, BlockStack } from '@shopify/polaris';
+
+const MetricInfoSkeleton = ({ isShowOneLine }) => {
+    if (isShowOneLine) {
+        return (jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) }));
+    }
+    return (jsxs(BlockStack, { gap: "200", children: [jsx(Box, { width: "60%", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) })] }));
+};
+
+export { MetricInfoSkeleton };

package/dist/esm/components/common/chart/MetricInfoSkeleton.mjs

@@ -0,0 +1,12 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, SkeletonBodyText, BlockStack } from '@shopify/polaris';
+
+const MetricInfoSkeleton = ({ isShowOneLine }) => {
+    if (isShowOneLine) {
+        return (jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) }));
+    }
+    return (jsxs(BlockStack, { gap: "200", children: [jsx(Box, { width: "60%", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) })] }));
+};
+
+export { MetricInfoSkeleton };

package/dist/esm/components/common/chart/MetricValueSummary.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+import type { IMetricControl } from '../../../types';
+interface IProps {
+    totalValue: IMetricControl;
+    hideComparison?: boolean;
+}
+export declare const MetricValueSummary: ({ totalValue, hideComparison }: IProps) => ReactElement;
+export {};