@levi-gemcommerce/analytics 0.0.0-test.1

package/dist/esm/components/GTimePicker/hooks/useDateTimeFilter.mjs

@@ -0,0 +1,76 @@
+"use client"
+import '../constants/compareDateTimePicker.mjs';
+import { getDateTimeFilterMapping, MainDateTimePickerAlias } from '../constants/mainDataTimePicker.mjs';
+import { useTimezoneContext } from '../../../providers/TimezoneProvider.mjs';
+import { dayjsTzToLocalTZ } from '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+
+const useDateTimeFilter = () => {
+    useTimezoneContext();
+    const currentDate = dayjsTzToLocalTZ().startOf('day');
+    const mappings = getDateTimeFilterMapping();
+    const TODAY_CONFIG = mappings[MainDateTimePickerAlias.TODAY];
+    const TODAY_DATE_RANGE = {
+        ...TODAY_CONFIG,
+        ...TODAY_CONFIG.getDateRange(currentDate),
+    };
+    const YESTERDAY_CONFIG = mappings[MainDateTimePickerAlias.YESTERDAY];
+    const YESTERDAY_DATE_RANGE = {
+        ...YESTERDAY_CONFIG,
+        ...YESTERDAY_CONFIG.getDateRange(currentDate),
+    };
+    const LAST_7_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_7_DAYS];
+    const LAST_7_DAYS_DATE_RANGE = {
+        ...LAST_7_DAYS_CONFIG,
+        ...LAST_7_DAYS_CONFIG.getDateRange(currentDate),
+    };
+    const LAST_30_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_30_DAYS];
+    const LAST_30_DAYS_DATE_RANGE = {
+        ...LAST_30_DAYS_CONFIG,
+        ...LAST_30_DAYS_CONFIG.getDateRange(currentDate),
+    };
+    const LAST_90_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_90_DAYS];
+    const LAST_90_DAYS_DATE_RANGE = {
+        ...LAST_90_DAYS_CONFIG,
+        ...LAST_90_DAYS_CONFIG.getDateRange(currentDate),
+    };
+    const LAST_365_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_365_DAYS];
+    const LAST_365_DAYS_DATE_RANGE = {
+        ...LAST_365_DAYS_CONFIG,
+        ...LAST_365_DAYS_CONFIG.getDateRange(currentDate),
+    };
+    const LAST_MONTH_CONFIG = mappings[MainDateTimePickerAlias.LAST_MONTH];
+    const LAST_MONTH_DATE_RANGE = {
+        ...LAST_MONTH_CONFIG,
+        ...LAST_MONTH_CONFIG.getDateRange(currentDate),
+    };
+    const LAST_12_MONTHS_CONFIG = mappings[MainDateTimePickerAlias.LAST_12_MONTHS];
+    const LAST_12_MONTHS_DATE_RANGE = {
+        ...LAST_12_MONTHS_CONFIG,
+        ...LAST_12_MONTHS_CONFIG.getDateRange(currentDate),
+    };
+    const LAST_YEAR_CONFIG = mappings[MainDateTimePickerAlias.LAST_YEAR];
+    const LAST_YEAR_DATE_RANGE = {
+        ...LAST_YEAR_CONFIG,
+        ...LAST_YEAR_CONFIG.getDateRange(currentDate),
+    };
+    const DATE_TIME_FILTERS = [
+        TODAY_DATE_RANGE,
+        YESTERDAY_DATE_RANGE,
+        LAST_7_DAYS_DATE_RANGE,
+        LAST_30_DAYS_DATE_RANGE,
+        LAST_90_DAYS_DATE_RANGE,
+        LAST_365_DAYS_DATE_RANGE,
+        LAST_MONTH_DATE_RANGE,
+        LAST_12_MONTHS_DATE_RANGE,
+        LAST_YEAR_DATE_RANGE,
+    ];
+    return {
+        DATE_TIME_FILTERS,
+        LAST_7_DAYS_DATE_RANGE,
+        LAST_30_DAYS_DATE_RANGE,
+    };
+};
+
+export { useDateTimeFilter };

package/dist/esm/components/GTimePicker/hooks/useDateTimePicker.d.ts

@@ -0,0 +1,30 @@
+import type { BaseTimePickerProps } from '../components/BaseTimePicker';
+import type { DateTimeFilter } from '../types';
+export interface IDateRangeState {
+    alias?: DateTimeFilter['alias'];
+    start: Date;
+    end: Date;
+}
+export interface IDateTimePickerProps {
+    ranges?: DateTimeFilter[];
+    initialPicked?: DateTimeFilter;
+    onApply?: BaseTimePickerProps['onApply'];
+}
+export declare const useDateTimePicker: ({ ranges, initialPicked, onApply }: IDateTimePickerProps) => {
+    month: number;
+    year: number;
+    setDate: import("react").Dispatch<import("react").SetStateAction<{
+        month: number;
+        year: number;
+    }>>;
+    dateRange: DateTimeFilter;
+    apply: () => void;
+    cancel: () => void;
+    dateTimePicked: DateTimeFilter;
+    onChange: ({ end }: {
+        start: Date;
+        end: Date;
+    }) => void;
+    onMonthChange: (month: number, year: number) => void;
+    onCalendarChange: (value: IDateRangeState) => void;
+};

package/dist/esm/components/GTimePicker/hooks/useDateTimePicker.js

@@ -0,0 +1,76 @@
+"use client"
+import '../constants/mainDataTimePicker.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import { getMonthAndYearByDateFilter } from '../helpers/time-picker.js';
+import { useDateTimePickerContext } from '../contexts/DateTimePickerProvider.js';
+import { useDateTimeFilter } from './useDateTimeFilter.js';
+import { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+
+const useDateTimePicker = ({ ranges, initialPicked, onApply }) => {
+    const { DATE_TIME_FILTERS } = useDateTimeFilter();
+    const allRanges = ranges || DATE_TIME_FILTERS;
+    const { dateTimePicked, setDateTimePicked } = useDateTimePickerContext();
+    const [dateRange, setDateRange] = useState(dateTimePicked);
+    const [{ month, year }, setDate] = useState({
+        month: dayjs(dateTimePicked.since).month(),
+        year: dayjs(dateTimePicked.since).year(),
+    });
+    const onMonthChange = (month, year) => {
+        setDate({ month, year });
+    };
+    const onCalendarChange = (value) => {
+        const { start, end, alias } = value;
+        const customDateRange = {
+            alias: 'custom',
+            title: 'Custom',
+            since: start.getTime(),
+            until: end.getTime(),
+        };
+        const newDateRange = allRanges.find((range) => {
+            const isSameAlias = range.alias === alias;
+            const isSameUntil = range.until === end.getTime();
+            const isSameSince = range.since === start.getTime();
+            // const isSameVersionId = !!range.versionId && !!versionId && range.versionId === versionId;
+            const isSameTime = isSameSince && isSameUntil;
+            return isSameAlias || isSameTime;
+        });
+        const finalDateRange = newDateRange || initialPicked || customDateRange;
+        setDateRange(finalDateRange);
+    };
+    const onChange = ({ end }) => {
+        setDate(getMonthAndYearByDateFilter(month, year, end));
+    };
+    const apply = () => {
+        setDateTimePicked(dateRange);
+        onApply?.(dateRange);
+    };
+    const cancel = () => {
+        setDateRange(dateTimePicked);
+    };
+    useEffect(() => {
+        if (dateTimePicked) {
+            setDateRange(dateTimePicked);
+            setDate({
+                month: dayjs(dateTimePicked.since).month(),
+                year: dayjs(dateTimePicked.since).year(),
+            });
+        }
+    }, [dateTimePicked]);
+    return {
+        month,
+        year,
+        setDate,
+        dateRange,
+        apply,
+        cancel,
+        dateTimePicked,
+        onChange,
+        onMonthChange,
+        onCalendarChange,
+    };
+};
+
+export { useDateTimePicker };

package/dist/esm/components/GTimePicker/hooks/useDateTimePicker.mjs

@@ -0,0 +1,76 @@
+"use client"
+import '../constants/mainDataTimePicker.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import { getMonthAndYearByDateFilter } from '../helpers/time-picker.mjs';
+import { useDateTimePickerContext } from '../contexts/DateTimePickerProvider.mjs';
+import { useDateTimeFilter } from './useDateTimeFilter.mjs';
+import { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+
+const useDateTimePicker = ({ ranges, initialPicked, onApply }) => {
+    const { DATE_TIME_FILTERS } = useDateTimeFilter();
+    const allRanges = ranges || DATE_TIME_FILTERS;
+    const { dateTimePicked, setDateTimePicked } = useDateTimePickerContext();
+    const [dateRange, setDateRange] = useState(dateTimePicked);
+    const [{ month, year }, setDate] = useState({
+        month: dayjs(dateTimePicked.since).month(),
+        year: dayjs(dateTimePicked.since).year(),
+    });
+    const onMonthChange = (month, year) => {
+        setDate({ month, year });
+    };
+    const onCalendarChange = (value) => {
+        const { start, end, alias } = value;
+        const customDateRange = {
+            alias: 'custom',
+            title: 'Custom',
+            since: start.getTime(),
+            until: end.getTime(),
+        };
+        const newDateRange = allRanges.find((range) => {
+            const isSameAlias = range.alias === alias;
+            const isSameUntil = range.until === end.getTime();
+            const isSameSince = range.since === start.getTime();
+            // const isSameVersionId = !!range.versionId && !!versionId && range.versionId === versionId;
+            const isSameTime = isSameSince && isSameUntil;
+            return isSameAlias || isSameTime;
+        });
+        const finalDateRange = newDateRange || initialPicked || customDateRange;
+        setDateRange(finalDateRange);
+    };
+    const onChange = ({ end }) => {
+        setDate(getMonthAndYearByDateFilter(month, year, end));
+    };
+    const apply = () => {
+        setDateTimePicked(dateRange);
+        onApply?.(dateRange);
+    };
+    const cancel = () => {
+        setDateRange(dateTimePicked);
+    };
+    useEffect(() => {
+        if (dateTimePicked) {
+            setDateRange(dateTimePicked);
+            setDate({
+                month: dayjs(dateTimePicked.since).month(),
+                year: dayjs(dateTimePicked.since).year(),
+            });
+        }
+    }, [dateTimePicked]);
+    return {
+        month,
+        year,
+        setDate,
+        dateRange,
+        apply,
+        cancel,
+        dateTimePicked,
+        onChange,
+        onMonthChange,
+        onCalendarChange,
+    };
+};
+
+export { useDateTimePicker };

package/dist/esm/components/GTimePicker/hooks/useVersionDateTimeFilters.d.ts

@@ -0,0 +1,9 @@
+import type { IDateTimeFilterAddition } from '../components';
+import type { IBaseCampaignVersion } from '../types';
+type MaybeVersion = IBaseCampaignVersion | null | undefined;
+type IVersionDateTimeFiltersProps = MaybeVersion[] | null | undefined;
+interface IVersionDateTimeFiltersReturn {
+    rangeAddition: IDateTimeFilterAddition;
+}
+export declare const useVersionDateTimeFilters: (versions: IVersionDateTimeFiltersProps) => IVersionDateTimeFiltersReturn;
+export {};

package/dist/esm/components/GTimePicker/hooks/useVersionDateTimeFilters.js

@@ -0,0 +1,24 @@
+"use client"
+import '../constants/mainDataTimePicker.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import { convertToDateTimeFilters } from '../helpers/version.js';
+import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+
+const useVersionDateTimeFilters = (versions) => {
+    const { t } = useTranslation();
+    const rangers = useMemo(() => {
+        if (!versions?.length)
+            return [];
+        return convertToDateTimeFilters(versions);
+    }, [versions]);
+    const rangeAddition = {
+        title: t('Experiment periods'),
+        rangers,
+    };
+    return { rangeAddition };
+};
+
+export { useVersionDateTimeFilters };

package/dist/esm/components/GTimePicker/hooks/useVersionDateTimeFilters.mjs

@@ -0,0 +1,24 @@
+"use client"
+import '../constants/mainDataTimePicker.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import { convertToDateTimeFilters } from '../helpers/version.mjs';
+import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+
+const useVersionDateTimeFilters = (versions) => {
+    const { t } = useTranslation();
+    const rangers = useMemo(() => {
+        if (!versions?.length)
+            return [];
+        return convertToDateTimeFilters(versions);
+    }, [versions]);
+    const rangeAddition = {
+        title: t('Experiment periods'),
+        rangers,
+    };
+    return { rangeAddition };
+};
+
+export { useVersionDateTimeFilters };

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

@@ -0,0 +1,7 @@
+export * from './hooks';
+export * from './contexts';
+export * from './types';
+export * from './constants';
+export * from './components';
+export * from './helpers';
+export * from './GTimePicker';

package/dist/esm/components/GTimePicker/types/index.d.ts

@@ -0,0 +1,38 @@
+import type { Dayjs } from '../../../utils';
+export interface DateTimeFilterBase {
+    title: string;
+    alias: string;
+}
+export interface IDateTimeFilterValue {
+    since: string | number;
+    until: string | number;
+}
+export interface DateTimeFilterVersionMeta {
+    versionId?: string;
+    isVersion?: boolean;
+    isCurrentVersion?: boolean;
+    description?: string;
+}
+export interface DateTimeFilter extends DateTimeFilterBase, IDateTimeFilterValue, DateTimeFilterVersionMeta {
+}
+export interface IDateTimeFilterMapping extends DateTimeFilterBase {
+    getDateRange: (date: Dayjs) => IDateTimeFilterValue;
+}
+export interface AnalyticDateFilter {
+    versionId?: string;
+    startDate: Dayjs;
+    endDate: Dayjs;
+    alias: string;
+    since?: string | number;
+    until?: string | number;
+    title?: string;
+}
+export type IGetCompareDateByAlias = (value: IDateTimeFilterValue & {
+    alias?: string;
+}) => IDateTimeFilterValue;
+export interface IBaseCampaignVersion {
+    id: string;
+    version: string;
+    startedAt?: string | null;
+    completedAt?: string | null;
+}

package/dist/esm/components/MetricDonutChartCard/MetricDonutChartCard.d.ts

@@ -0,0 +1,17 @@
+import type { IDonutMetricRow, IDonutTarget } from '../../types';
+import type { EMetricKey } from '../../types';
+import type { ReactElement } from 'react';
+export interface IProps {
+    label: string;
+    metricKey: EMetricKey;
+    targets: IDonutTarget[];
+    totalsRow?: IDonutMetricRow;
+    comparisonTotalsRow?: IDonutMetricRow;
+    sort?: boolean;
+    isLoading?: boolean;
+    isEmptyMetricData?: boolean;
+    minHeight?: number;
+    isMockData?: boolean;
+    onClick: () => void;
+}
+export declare const MetricDonutChartCard: ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight, isMockData, onClick, }: IProps) => ReactElement;

package/dist/esm/components/MetricDonutChartCard/MetricDonutChartCard.js

@@ -0,0 +1,69 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../constants/analytic-metric-tooltip.js';
+import '../../constants/breakdown-targets.js';
+import { numberWithCommas } from '../../utils/number.js';
+import { cls } from '../../utils/cls.js';
+import '../../utils/dayjs.js';
+import '../../utils/analytics.js';
+import '../../types/template.js';
+import { useState, useMemo } from 'react';
+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 '../../shared/components/GPagination/GPagination.js';
+import { useWindowSize } from '../../hooks/publish/useWindowSize.js';
+import { MetricChartProvider } from '../../providers/MetricChartProvider.js';
+import '../../providers/TimezoneProvider.js';
+import { Card, BlockStack, InlineStack, Text, Icon } from '@shopify/polaris';
+import { ChevronRightIcon } from '@shopify/polaris-icons';
+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/charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import { DonutChart } from '@shopify/polaris-viz';
+import { MetricChartEmpty } from '../common/chart/MetricChartEmpty.js';
+import { MetricDonutChartSkeleton } from '../common/chart/MetricDonutChartSkeleton.js';
+import { buildBreakdownDonutData } from './utils/donut-chart.js';
+
+const DONUT_CHART_MIN_HEIGHT = 294;
+const COMPACT_MAX_WIDTH = 1500;
+const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, isMockData, onClick, }) => {
+    const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
+    const { windowWidth, windowSize } = useWindowSize();
+    const [isHovered, setIsHovered] = useState(false);
+    const data = useMemo(() => buildBreakdownDonutData({ targets, metricKey, totalsRow, comparisonTotalsRow, sort }), [targets, metricKey, totalsRow, comparisonTotalsRow, sort]);
+    if (isLoading) {
+        return jsx(MetricDonutChartSkeleton, {});
+    }
+    const formatValue = (value) => {
+        return numberWithCommas(`${value}`);
+    };
+    const handleClickTitle = (event) => {
+        if (isMockData)
+            return;
+        event.stopPropagation();
+        onClick();
+    };
+    const isCompactView = windowWidth.lg && windowSize.width < COMPACT_MAX_WIDTH;
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className: isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]', onClick: handleClickTitle, children: jsxs(InlineStack, { children: [jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "h3", variant: "headingMd", children: label }) }), isHovered && !isMockData && jsx(Icon, { source: ChevronRightIcon, tone: "inherit" })] }) }) }), jsx("div", { className: cls('flex items-center justify-center', {
+                            'max-h-[250px] overflow-hidden': isCompactView,
+                        }), children: isEmptyMetricData ? (jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" })) : (jsx(MetricChartProvider, { minHeight: minHeight, seriesColors: {}, children: jsx(DonutChart, { data: data, legendPosition: "left", showLegendValues: true, showLegend: true, theme: "Light", tooltipOptions: {
+                                    valueFormatter: formatValue,
+                                }, labelFormatter: formatValue }) })) })] }) }) }));
+};
+
+export { MetricDonutChartCard };

package/dist/esm/components/MetricDonutChartCard/MetricDonutChartCard.mjs

@@ -0,0 +1,69 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../constants/analytic-metric-tooltip.mjs';
+import '../../constants/breakdown-targets.mjs';
+import { numberWithCommas } from '../../utils/number.mjs';
+import { cls } from '../../utils/cls.mjs';
+import '../../utils/dayjs.mjs';
+import '../../utils/analytics.mjs';
+import '../../types/template.mjs';
+import { useState, useMemo } from 'react';
+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 '../../shared/components/GPagination/GPagination.mjs';
+import { useWindowSize } from '../../hooks/publish/useWindowSize.mjs';
+import { MetricChartProvider } from '../../providers/MetricChartProvider.mjs';
+import '../../providers/TimezoneProvider.mjs';
+import { Card, BlockStack, InlineStack, Text, Icon } from '@shopify/polaris';
+import { ChevronRightIcon } from '@shopify/polaris-icons';
+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/charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import { DonutChart } from '@shopify/polaris-viz';
+import { MetricChartEmpty } from '../common/chart/MetricChartEmpty.mjs';
+import { MetricDonutChartSkeleton } from '../common/chart/MetricDonutChartSkeleton.mjs';
+import { buildBreakdownDonutData } from './utils/donut-chart.mjs';
+
+const DONUT_CHART_MIN_HEIGHT = 294;
+const COMPACT_MAX_WIDTH = 1500;
+const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, isMockData, onClick, }) => {
+    const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
+    const { windowWidth, windowSize } = useWindowSize();
+    const [isHovered, setIsHovered] = useState(false);
+    const data = useMemo(() => buildBreakdownDonutData({ targets, metricKey, totalsRow, comparisonTotalsRow, sort }), [targets, metricKey, totalsRow, comparisonTotalsRow, sort]);
+    if (isLoading) {
+        return jsx(MetricDonutChartSkeleton, {});
+    }
+    const formatValue = (value) => {
+        return numberWithCommas(`${value}`);
+    };
+    const handleClickTitle = (event) => {
+        if (isMockData)
+            return;
+        event.stopPropagation();
+        onClick();
+    };
+    const isCompactView = windowWidth.lg && windowSize.width < COMPACT_MAX_WIDTH;
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className: isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]', onClick: handleClickTitle, children: jsxs(InlineStack, { children: [jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "h3", variant: "headingMd", children: label }) }), isHovered && !isMockData && jsx(Icon, { source: ChevronRightIcon, tone: "inherit" })] }) }) }), jsx("div", { className: cls('flex items-center justify-center', {
+                            'max-h-[250px] overflow-hidden': isCompactView,
+                        }), children: isEmptyMetricData ? (jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" })) : (jsx(MetricChartProvider, { minHeight: minHeight, seriesColors: {}, children: jsx(DonutChart, { data: data, legendPosition: "left", showLegendValues: true, showLegend: true, theme: "Light", tooltipOptions: {
+                                    valueFormatter: formatValue,
+                                }, labelFormatter: formatValue }) })) })] }) }) }));
+};
+
+export { MetricDonutChartCard };

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

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

package/dist/esm/components/MetricDonutChartCard/utils/donut-chart.d.ts

@@ -0,0 +1,20 @@
+import type { EMetricKey, IDonutMetricRow, IDonutTarget, IMetricDonutChartData } from '../../../types';
+import type { IBreakdownItem } from '../../../core/gemxql';
+interface IComputeDonutDataParams {
+    name: string;
+    currentValue: number;
+    prevValue: number;
+    hasPreviousData: boolean;
+}
+interface IBuildBreakdownDonutDataParams<T extends string> {
+    targets: IDonutTarget<T>[];
+    metricKey: EMetricKey;
+    totalsRow?: IDonutMetricRow;
+    comparisonTotalsRow?: IDonutMetricRow;
+    sort?: boolean;
+}
+export declare const calculatePercentageChange: (current: number, previous: number) => string | undefined;
+export declare const computeDonutData: ({ name, currentValue, prevValue, hasPreviousData, }: IComputeDonutDataParams) => IMetricDonutChartData;
+export declare const getTotalCountByType: (stats: IBreakdownItem[] | undefined, type: string) => number;
+export declare const buildBreakdownDonutData: <T extends string>({ targets, metricKey, totalsRow, comparisonTotalsRow, sort, }: IBuildBreakdownDonutDataParams<T>) => IMetricDonutChartData[];
+export {};

package/dist/esm/components/MetricDonutChartCard/utils/donut-chart.js

@@ -0,0 +1,65 @@
+"use client"
+import '../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../core/gemxql/builder/configs/keywords.js';
+import '../../../core/gemxql/builder/filters/build-extra-conditions.js';
+import '../../../core/gemxql/builder/filters/build-filter-conditions.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 '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import { parseBreakdownItems } from '../../../core/gemxql/helpers/parseJsonFields.js';
+import '../../../core/gemxql/api/useCustomGemXQlQuery.js';
+import '../../../core/gemxql/api/useGemxQlNamedQuery.js';
+import '../../../providers/ConvertMoneyProvider.js';
+import '../../../shared/components/GPagination/GPagination.js';
+import 'react';
+
+const calculatePercentageChange = (current, previous) => {
+    if (current === 0 && previous === 0) {
+        return undefined;
+    }
+    if (previous === 0) {
+        return current > 0 ? '100%' : '0%';
+    }
+    const change = ((current - previous) / previous) * 100;
+    return `${Math.abs(change).toFixed(0)}%`;
+};
+const computeDonutData = ({ name, currentValue, prevValue, hasPreviousData, }) => ({
+    name,
+    data: [{ key: 'value', value: currentValue }],
+    metadata: {
+        trend: {
+            value: hasPreviousData ? calculatePercentageChange(currentValue, prevValue) : undefined,
+            direction: currentValue >= prevValue ? 'upward' : 'downward',
+            trend: currentValue >= prevValue ? 'positive' : 'negative',
+        },
+    },
+});
+const getTotalCountByType = (stats, type) => {
+    const item = stats?.find((stat) => stat?.type?.toLowerCase() === type.toLowerCase());
+    return item?.total ?? 0;
+};
+const buildBreakdownDonutData = ({ targets, metricKey, totalsRow, comparisonTotalsRow, sort, }) => {
+    const items = parseBreakdownItems(totalsRow?.[metricKey]);
+    const comparisonItems = parseBreakdownItems(comparisonTotalsRow?.[metricKey]);
+    const hasPreviousData = !!comparisonTotalsRow?.[metricKey];
+    const result = targets.map(({ value, label }) => computeDonutData({
+        name: label,
+        currentValue: getTotalCountByType(items, value),
+        prevValue: getTotalCountByType(comparisonItems, value),
+        hasPreviousData,
+    }));
+    const getValue = (item) => item.data[0]?.value ?? 0;
+    return sort ? [...result].sort((a, b) => getValue(b) - getValue(a)) : result;
+};
+
+export { buildBreakdownDonutData, calculatePercentageChange, computeDonutData, getTotalCountByType };