@levi-gemcommerce/analytics 1.0.0-dev.13 → 1.0.0-dev.15

package/dist/esm/index.mjs

@@ -1,15 +1,15 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import '@tanstack/react-query';
+import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip, Button, BlockStack, Checkbox, RadioButton, Popover, ActionList, Link, SkeletonDisplayText, List, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup } from '@shopify/polaris';
+import React, { useMemo, useCallback, useState, useEffect, forwardRef, Fragment as Fragment$1, useRef, useImperativeHandle, createContext, useContext } from 'react';
 import dayjs from 'dayjs';
 export { default as dayjs } from 'dayjs';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear.js';
 import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
-import React, { useMemo, useCallback, useState, useEffect, forwardRef, Fragment as Fragment$1, useRef, useImperativeHandle, createContext, useContext } from 'react';
-import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip, Button, BlockStack, Checkbox, RadioButton, Popover, ActionList, Link, SkeletonDisplayText, List, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup } from '@shopify/polaris';
 import { useTranslation } from 'react-i18next';
 import { PolarisVizProvider, LineChart, DonutChart } from '@shopify/polaris-viz';
+import '@tanstack/react-query';
 
 var EMetricKey;
 (function (EMetricKey) {
@@ -125,53 +125,12 @@ const ANALYTICS_METRIC_TOOLTIP = {
     },
 };
 
-const NONE_VALUE = 'None';
-const PLACEHOLDER_VALUE$1 = '-';
-
-const TOTALS_SUFFIX = '___totals';
-const COMPARE_PREFIX = 'comparison___';
-const COMPARE_SUFFIX = '___previous_period';
-const COMPARE_TOTALS_SUFFIX = `${COMPARE_SUFFIX}${TOTALS_SUFFIX}`;
-
-const OPERATOR_IS = 'is';
-
-var EAnalyticDataType;
-(function (EAnalyticDataType) {
-    EAnalyticDataType["DATE"] = "DATE";
-    EAnalyticDataType["ARRAY"] = "ARRAY";
-    EAnalyticDataType["OBJECT"] = "OBJECT";
-    EAnalyticDataType["STRING"] = "STRING";
-    EAnalyticDataType["INTEGER"] = "INTEGER";
-    EAnalyticDataType["CURRENCY"] = "CURRENCY";
-    EAnalyticDataType["PERCENT"] = "PERCENT";
-    EAnalyticDataType["DURATION"] = "DURATION";
-    EAnalyticDataType["MONTH"] = "MONTH_TIMESTAMP";
-    EAnalyticDataType["QUARTER"] = "QUARTER_TIMESTAMP";
-    EAnalyticDataType["DAY"] = "DAY_TIMESTAMP";
-    EAnalyticDataType["WEEK"] = "WEEK_TIMESTAMP";
-    EAnalyticDataType["YEAR"] = "YEAR_TIMESTAMP";
-    EAnalyticDataType["HOUR"] = "HOUR_TIMESTAMP";
-})(EAnalyticDataType || (EAnalyticDataType = {}));
-var EAnalyticColumnKey;
-(function (EAnalyticColumnKey) {
-    EAnalyticColumnKey["CAMPAIGNS"] = "experiments";
-    EAnalyticColumnKey["VISITOR_ITEMS"] = "visitor_items";
-    EAnalyticColumnKey["DEVICE_ITEMS"] = "device_items";
-    EAnalyticColumnKey["TRAFFIC_SOURCE_ITEMS"] = "traffic_source_items";
-})(EAnalyticColumnKey || (EAnalyticColumnKey = {}));
-
-var EAnalyticMode$1;
+var EAnalyticMode;
 (function (EAnalyticMode) {
     EAnalyticMode["ALL_SESSION"] = "ALL_SESSION";
     EAnalyticMode["FIRST_SESSION"] = "FIRST_SESSION";
     EAnalyticMode["PAGE_ONLY"] = "PAGE_ONLY";
-})(EAnalyticMode$1 || (EAnalyticMode$1 = {}));
-
-var EAnalyticSource;
-(function (EAnalyticSource) {
-    EAnalyticSource["SESSIONS"] = "sessions";
-    EAnalyticSource["SALES"] = "sales";
-})(EAnalyticSource || (EAnalyticSource = {}));
+})(EAnalyticMode || (EAnalyticMode = {}));
 
 var EVisitorType;
 (function (EVisitorType) {
@@ -196,158 +155,108 @@ var ETrafficSourceType;
     ETrafficSourceType["SMS"] = "sms";
 })(ETrafficSourceType || (ETrafficSourceType = {}));
 
-var EComparisonOperator;
-(function (EComparisonOperator) {
-    EComparisonOperator["EQ"] = "=";
-    EComparisonOperator["IN"] = "IN";
-    EComparisonOperator["LIKE"] = "LIKE";
-})(EComparisonOperator || (EComparisonOperator = {}));
-var EGroupOperator;
-(function (EGroupOperator) {
-    EGroupOperator["OR"] = "OR";
-    EGroupOperator["AND"] = "AND";
-})(EGroupOperator || (EGroupOperator = {}));
+const TARGET_VISITOR = [
+    { value: EVisitorType.NEW, label: 'New' },
+    { value: EVisitorType.RETURNING, label: 'Returning' },
+];
+const TARGET_DEVICES = [
+    { value: EDeviceType.DESKTOP, label: 'Desktop' },
+    { value: EDeviceType.TABLET, label: 'Tablet' },
+    { value: EDeviceType.MOBILE, label: 'Mobile' },
+];
+const TARGET_CHANNEL = [
+    { value: ETrafficSourceType.DIRECT, label: 'Direct' },
+    { value: ETrafficSourceType.EMAIL, label: 'Email' },
+    { value: ETrafficSourceType.REFERRAL, label: 'Referral' },
+    { value: ETrafficSourceType.ORGANIC_SOCIAL, label: 'Organic social' },
+    { value: ETrafficSourceType.ORGANIC_SEARCH, label: 'Organic search' },
+    { value: ETrafficSourceType.PAID_SOCIAL, label: 'Paid social' },
+    { value: ETrafficSourceType.PAID_SEARCH, label: 'Paid search' },
+    { value: ETrafficSourceType.SMS, label: 'SMS' },
+];
 
-var EFilterField;
-(function (EFilterField) {
-    EFilterField["DEVICE"] = "device";
-    EFilterField["DEVICES"] = "devices";
-    EFilterField["VISITOR"] = "visitor_type";
-    EFilterField["VISITORS"] = "visitor_types";
-    EFilterField["TRAFFIC_SOURCE"] = "traffic_source";
-    EFilterField["TRAFFIC_SOURCES"] = "traffic_sources";
-    EFilterField["VERSION"] = "version";
-    EFilterField["VERSIONS"] = "versions";
-    EFilterField["SINGLE_PAGE"] = "page_path";
-    EFilterField["LIST_PAGE"] = "page_paths";
-    EFilterField["GROUP_CAMPAIGN_ITEM"] = "group_campaign_item";
-    EFilterField["GROUP_CAMPAIGN_ITEMS"] = "group_campaign_items";
-    EFilterField["SINGLE_CAMPAIGN"] = "experiment_id";
-    EFilterField["GROUP_CAMPAIGN"] = "experiment_group_id";
-    EFilterField["CAMPAIGN_VERSION_ID"] = "version_id";
-    EFilterField["GROUP_CAMPAIGN_VERSION_ID"] = "group_version_id";
-})(EFilterField || (EFilterField = {}));
+const CAMPAIGN_BACKGROUND_MAIN = {
+    ORIGIN: '#2C7DFF',
+    VARIANT: '#F34A70',
+};
 
-var EOperatorField;
-(function (EOperatorField) {
-    EOperatorField["DEVICE_OPERATOR"] = "deviceOperator";
-    EOperatorField["VISITOR_OPERATOR"] = "visitorOperator";
-    EOperatorField["TRAFFIC_SOURCE_OPERATOR"] = "trafficSourceOperator";
-    EOperatorField["VERSION_OPERATOR"] = "versionOperator";
-    EOperatorField["PAGE_OPERATOR"] = "pageOperator";
-    EOperatorField["CAMPAIGN_ITEM_OPERATOR"] = "campaignItemOperator";
-})(EOperatorField || (EOperatorField = {}));
+const DEFAULT_CURRENT_PERIOD_LABEL = 'Current';
+const DEFAULT_PREVIOUS_PERIOD_LABEL = 'Previous';
+const CHART_MIN_HEIGHT = 228;
+const SERIES_COLORS = {
+    current: 'rgba(64, 176, 230, 1)',
+    comparison: 'rgba(161, 202, 231, 1)',
+    all: ['#2C7DFF', '#F34A70'],
+};
+const TREND_TONE = {
+    POSITIVE: '#007F5F',
+    NEUTRAL: '#4A4A4A',
+};
+const PLACEHOLDER_VALUE$1 = '-';
 
-/**
- * Controls which totals columns are appended to the query result.
- *
- * - NONE   → no totals, GROUP BY only.
- * - TOTALS → adds `<metric>___totals` (grand total only). Use with single-dimension GROUP BY.
- * - ALL    → adds subtotals per dimension group + grand total. Use with multi-dimension GROUP BY.
- */
-var EGroupWithClause;
-(function (EGroupWithClause) {
-    EGroupWithClause["NONE"] = "";
-    EGroupWithClause["TOTALS"] = "TOTALS";
-    EGroupWithClause["ALL"] = "WITH GROUP_TOTALS, TOTALS";
-})(EGroupWithClause || (EGroupWithClause = {}));
+const DEFAULT_CURRENCY_ANALYTIC = 'USD';
 
-var EOrderDirectionType;
-(function (EOrderDirectionType) {
-    EOrderDirectionType["ASC"] = "ASC";
-    EOrderDirectionType["DESC"] = "DESC";
-})(EOrderDirectionType || (EOrderDirectionType = {}));
+var THUMB_PRODUCT_DEFAULT = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSI5MCIKICBoZWlnaHQ9IjcyIgogIHZpZXdCb3g9IjAgMCA5MCA3MiIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNDguNzUgMzQuNUM0OS45OTI2IDM0LjUgNTEgMzMuNDkyNiA1MSAzMi4yNUM1MSAzMS4wMDc0IDQ5Ljk5MjYgMzAgNDguNzUgMzBDNDcuNTA3NCAzMCA0Ni41IDMxLjAwNzQgNDYuNSAzMi4yNUM0Ni41IDMzLjQ5MjYgNDcuNTA3NCAzNC41IDQ4Ljc1IDM0LjVaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgogIDxwYXRoCiAgICBmaWxsUnVsZT0iZXZlbm9kZCIKICAgIGNsaXBSdWxlPSJldmVub2RkIgogICAgZD0iTTQzLjUyNjggMjYuMjVINDYuNDczMkM0Ny42OTI0IDI2LjI1IDQ4LjY3NTggMjYuMjUgNDkuNDcyMiAyNi4zMTVDNTAuMjkyMiAyNi4zODIgNTEuMDEyNCAyNi41MjM2IDUxLjY3ODcgMjYuODYzMUM1Mi43MzcxIDI3LjQwMjQgNTMuNTk3NiAyOC4yNjI5IDU0LjEzNjkgMjkuMzIxM0M1NC40NzY0IDI5Ljk4NzYgNTQuNjE4IDMwLjcwNzggNTQuNjg1IDMxLjUyNzhDNTQuNzUgMzIuMzI0MiA1NC43NSAzMy4zMDc2IDU0Ljc1IDM0LjUyNjhWMzcuNDczMkM1NC43NSAzOC42OTI0IDU0Ljc1IDM5LjY3NTggNTQuNjg1IDQwLjQ3MjJDNTQuNjE4IDQxLjI5MjIgNTQuNDc2NCA0Mi4wMTI0IDU0LjEzNjkgNDIuNjc4N0M1My41OTc2IDQzLjczNzEgNTIuNzM3MSA0NC41OTc2IDUxLjY3ODcgNDUuMTM2OUM1MS4wMTI0IDQ1LjQ3NjQgNTAuMjkyMiA0NS42MTggNDkuNDcyMiA0NS42ODVDNDguNjc1OCA0NS43NSA0Ny42OTI0IDQ1Ljc1IDQ2LjQ3MzIgNDUuNzVINDMuNTI2OEM0Mi4zMDc2IDQ1Ljc1IDQxLjMyNDIgNDUuNzUgNDAuNTI3OCA0NS42ODVDMzkuNzA3OCA0NS42MTggMzguOTg3NiA0NS40NzY0IDM4LjMyMTMgNDUuMTM2OUMzNy4yNjI5IDQ0LjU5NzYgMzYuNDAyNCA0My43MzcxIDM1Ljg2MzEgNDIuNjc4N0MzNS41MjM2IDQyLjAxMjQgMzUuMzgyIDQxLjI5MjIgMzUuMzE1IDQwLjQ3MjJDMzUuMjUgMzkuNjc1OCAzNS4yNSAzOC42OTI0IDM1LjI1IDM3LjQ3MzJWMzQuNTI2OEMzNS4yNSAzMy4zMDc2IDM1LjI1IDMyLjMyNDIgMzUuMzE1IDMxLjUyNzhDMzUuMzgyIDMwLjcwNzggMzUuNTIzNiAyOS45ODc2IDM1Ljg2MzEgMjkuMzIxM0MzNi40MDI0IDI4LjI2MjkgMzcuMjYyOSAyNy40MDI0IDM4LjMyMTMgMjYuODYzMUMzOC45ODc2IDI2LjUyMzYgMzkuNzA3OCAyNi4zODIgNDAuNTI3OCAyNi4zMTVDNDEuMzI0MiAyNi4yNSA0Mi4zMDc2IDI2LjI1IDQzLjUyNjggMjYuMjVaTTQwLjcxMSAyOC41NTc2QzQwLjAzMDIgMjguNjEzMiAzOS42MzkxIDI4LjcxNjkgMzkuMzQyOCAyOC44Njc5QzM4LjcwNzcgMjkuMTkxNCAzOC4xOTE0IDI5LjcwNzcgMzcuODY3OSAzMC4zNDI4QzM3LjcxNjkgMzAuNjM5MSAzNy42MTMyIDMxLjAzMDIgMzcuNTU3NiAzMS43MTFDMzcuNTAwOSAzMi40MDUgMzcuNSAzMy4yOTYzIDM3LjUgMzQuNTc1VjM2LjcxNzdMMzguNTg0MiAzNS40MTY3QzM5LjU3MjQgMzQuMjMwOSA0MS4zNjU1IDM0LjE0OTYgNDIuNDU2OSAzNS4yNDFMNDYuNSAzOS4yODQxTDQ4LjI2OTQgMzcuNTE0NkM0OS4zNzU3IDM2LjQwODMgNTEuMTk4IDM2LjUwOTMgNTIuMTc1NCAzNy43MzA5TDUyLjQ5OTUgMzguMTM2MUM1Mi41IDM3LjkxMzEgNTIuNSAzNy42NzY1IDUyLjUgMzcuNDI1VjM0LjU3NUM1Mi41IDMzLjI5NjMgNTIuNDk5MSAzMi40MDUgNTIuNDQyNCAzMS43MTFDNTIuMzg2OCAzMS4wMzAyIDUyLjI4MzEgMzAuNjM5MSA1Mi4xMzIxIDMwLjM0MjhDNTEuODA4NiAyOS43MDc3IDUxLjI5MjMgMjkuMTkxNCA1MC42NTcyIDI4Ljg2NzlDNTAuMzYwOSAyOC43MTY5IDQ5Ljk2OTggMjguNjEzMiA0OS4yODkgMjguNTU3NkM0OC41OTUgMjguNTAwOSA0Ny43MDM3IDI4LjUgNDYuNDI1IDI4LjVINDMuNTc1QzQyLjI5NjMgMjguNSA0MS40MDUgMjguNTAwOSA0MC43MTEgMjguNTU3NlpNMzcuNTU3NiA0MC4yODlDMzcuNTU0MyA0MC4yNDkyIDM3LjU1MTMgNDAuMjA4OCAzNy41NDg0IDQwLjE2NzhDMzcuNTcxMSA0MC4xNDQ4IDM3LjU5MzEgNDAuMTIwNiAzNy42MTQyIDQwLjA5NTNMNDAuMzEyNyAzNi44NTcxQzQwLjQ1MzkgMzYuNjg3NyA0MC43MSAzNi42NzYxIDQwLjg2NTkgMzYuODMyTDQ1LjcwNDUgNDEuNjcwNkM0Ni4xNDM4IDQyLjEwOTkgNDYuODU2MSA0Mi4xMDk5IDQ3LjI5NTUgNDEuNjcwNkw0OS44NjA0IDM5LjEwNTZDNTAuMDE4NSAzOC45NDc2IDUwLjI3ODggMzguOTYyIDUwLjQxODQgMzkuMTM2NUw1Mi4yMzc3IDQxLjQxMDdDNTIuMjA1NiA0MS41MDEgNTIuMTcwNCA0MS41ODIyIDUyLjEzMjEgNDEuNjU3MkM1MS44MDg2IDQyLjI5MjMgNTEuMjkyMyA0Mi44MDg2IDUwLjY1NzIgNDMuMTMyMUM1MC4zNjA5IDQzLjI4MzEgNDkuOTY5OCA0My4zODY4IDQ5LjI4OSA0My40NDI0QzQ4LjU5NSA0My40OTkxIDQ3LjcwMzcgNDMuNSA0Ni40MjUgNDMuNUg0My41NzVDNDIuMjk2MyA0My41IDQxLjQwNSA0My40OTkxIDQwLjcxMSA0My40NDI0QzQwLjAzMDIgNDMuMzg2OCAzOS42MzkxIDQzLjI4MzEgMzkuMzQyOCA0My4xMzIxQzM4LjcwNzcgNDIuODA4NiAzOC4xOTE0IDQyLjI5MjMgMzcuODY3OSA0MS42NTcyQzM3LjcxNjkgNDEuMzYwOSAzNy42MTMyIDQwLjk2OTggMzcuNTU3NiA0MC4yODlaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgo8L3N2Zz4K";
 
-var EPageMetric;
-(function (EPageMetric) {
-    EPageMetric["PAGE_ITEMS"] = "page_items";
-    EPageMetric["PAGE_PATHS"] = "page_paths";
-})(EPageMetric || (EPageMetric = {}));
-var EPageDimension;
-(function (EPageDimension) {
-    EPageDimension["PAGE_PATH"] = "page_path";
-})(EPageDimension || (EPageDimension = {}));
-var EPageField;
-(function (EPageField) {
-    EPageField["SHOPIFY_PAGE_ID"] = "shopify_page_id";
-    EPageField["LOCATION_PATH"] = "location_path";
-    EPageField["PAGE_TYPE"] = "page_type";
-    EPageField["PAGE_TITLE"] = "page_title";
-    EPageField["PAGE_PATH"] = "page_path";
-    EPageField["TEMPLATE_SUFFIX"] = "template_suffix";
-})(EPageField || (EPageField = {}));
+var SvgArrowRightIcon = function SvgArrowRightIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M3.5 10a.75.75 0 0 1 .75-.75h9.69l-2.72-2.72a.75.75 0 1 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72h-9.69a.75.75 0 0 1-.75-.75Z"
+  }));
+};
+SvgArrowRightIcon.displayName = "ArrowRightIcon";
 
-var ERowReaderMode;
-(function (ERowReaderMode) {
-    ERowReaderMode["DEFAULT"] = "DEFAULT";
-    ERowReaderMode["COMPARISON"] = "COMPARISON";
-    ERowReaderMode["TOTALS"] = "TOTALS";
-    ERowReaderMode["COMPARISON_TOTALS"] = "COMPARISON_TOTALS";
-})(ERowReaderMode || (ERowReaderMode = {}));
+var SvgCalendarIcon = function SvgCalendarIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.75 3.5a.75.75 0 0 0-1.5 0v.407a3.075 3.075 0 0 0-.702.252 3.75 3.75 0 0 0-1.64 1.639c-.226.444-.32.924-.365 1.47-.043.531-.043 1.187-.043 2v1.464c0 .813 0 1.469.043 2 .045.546.14 1.026.366 1.47a3.75 3.75 0 0 0 1.639 1.64c.444.226.924.32 1.47.365.531.043 1.187.043 2 .043h3.383c.323 0 .542 0 .735-.02a3.75 3.75 0 0 0 3.344-3.344c.02-.193.02-.412.02-.735v-2.883c0-.813 0-1.469-.043-2-.045-.546-.14-1.026-.366-1.47a3.75 3.75 0 0 0-1.639-1.64 3.076 3.076 0 0 0-.702-.251v-.407a.75.75 0 0 0-1.5 0v.259c-.373-.009-.794-.009-1.268-.009h-1.964c-.474 0-.895 0-1.268.009v-.259Zm-1.521 1.995c.197-.1.458-.17.912-.207.462-.037 1.057-.038 1.909-.038h1.9c.853 0 1.447 0 1.91.038.453.037.714.107.912.207.423.216.767.56.983.984.1.197.17.458.207.912.014.18.024.38.029.609h-9.982c.006-.228.015-.429.03-.61.036-.453.106-.714.206-.911a2.25 2.25 0 0 1 .984-.984Zm-1.229 4.005v1.2c0 .853 0 1.447.038 1.91.037.453.107.714.207.912.216.423.56.767.984.983.197.1.458.17.912.207.462.037 1.057.038 1.909.038h3.306c.385 0 .52-.001.626-.012a2.25 2.25 0 0 0 2.006-2.006c.011-.106.012-.241.012-.626v-2.606h-10Z"
+  }));
+};
+SvgCalendarIcon.displayName = "CalendarIcon";
 
-var ETimeDimension;
-(function (ETimeDimension) {
-    ETimeDimension["HOUR"] = "hour";
-    ETimeDimension["DAY"] = "day";
-    ETimeDimension["WEEK"] = "week";
-    ETimeDimension["MONTH"] = "month";
-    ETimeDimension["QUARTER"] = "quarter";
-    ETimeDimension["YEAR"] = "year";
-})(ETimeDimension || (ETimeDimension = {}));
+var SvgCheckIcon = function SvgCheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0Z"
+  }));
+};
+SvgCheckIcon.displayName = "CheckIcon";
 
-({
-    [ERowReaderMode.DEFAULT]: { prefix: '', suffix: '' },
-    [ERowReaderMode.COMPARISON]: { prefix: COMPARE_PREFIX, suffix: COMPARE_SUFFIX },
-    [ERowReaderMode.TOTALS]: { prefix: '', suffix: TOTALS_SUFFIX },
-    [ERowReaderMode.COMPARISON_TOTALS]: { prefix: COMPARE_PREFIX, suffix: COMPARE_TOTALS_SUFFIX },
-});
+var SvgChevronDownIcon = function SvgChevronDownIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"
+  }));
+};
+SvgChevronDownIcon.displayName = "ChevronDownIcon";
 
-EGroupOperator.OR;
+var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.72 14.53a.75.75 0 0 1 0-1.06l3.47-3.47-3.47-3.47a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0Z"
+  }));
+};
+SvgChevronRightIcon.displayName = "ChevronRightIcon";
 
-[
-    {
-        operator: EOperatorField.DEVICE_OPERATOR,
-        singleField: EFilterField.DEVICE,
-        multiField: EFilterField.DEVICES,
-        fieldName: EFilterField.DEVICE,
-    },
-    {
-        operator: EOperatorField.VISITOR_OPERATOR,
-        singleField: EFilterField.VISITOR,
-        multiField: EFilterField.VISITORS,
-        fieldName: EFilterField.VISITOR,
-    },
-    {
-        operator: EOperatorField.TRAFFIC_SOURCE_OPERATOR,
-        singleField: EFilterField.TRAFFIC_SOURCE,
-        multiField: EFilterField.TRAFFIC_SOURCES,
-        fieldName: EFilterField.TRAFFIC_SOURCE,
-    },
-    {
-        operator: EOperatorField.VERSION_OPERATOR,
-        singleField: EFilterField.VERSION,
-        multiField: EFilterField.VERSIONS,
-        fieldName: EFilterField.VERSION,
-    },
-    {
-        operator: EOperatorField.PAGE_OPERATOR,
-        singleField: EFilterField.SINGLE_PAGE,
-        multiField: EFilterField.LIST_PAGE,
-        fieldName: EFilterField.SINGLE_PAGE,
-    },
-    {
-        operator: EOperatorField.CAMPAIGN_ITEM_OPERATOR,
-        singleField: EFilterField.GROUP_CAMPAIGN_ITEM,
-        multiField: EFilterField.GROUP_CAMPAIGN_ITEMS,
-        condition: EFilterField.GROUP_CAMPAIGN,
-        fieldName: EFilterField.SINGLE_CAMPAIGN,
-    },
-    {
-        operatorVal: OPERATOR_IS,
-        singleField: EFilterField.SINGLE_CAMPAIGN,
-        multiField: EFilterField.GROUP_CAMPAIGN,
-    },
-];
+var SvgChevronUpIcon = function SvgChevronUpIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14.53 12.28a.75.75 0 0 1-1.06 0l-3.47-3.47-3.47 3.47a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1 0 1.06Z"
+  }));
+};
+SvgChevronUpIcon.displayName = "ChevronUpIcon";
 
 const TRIM_DECIMAL_ZEROS_REGEX = /\.0+$/;
 const DEFAULT_DECIMALS = 2;
@@ -361,6 +270,9 @@ const semverToNum = (v) => {
     const [major, minor, patch] = v.split('.').map((n) => Number(n));
     return (major ?? 0) * 1_000_000 + (minor ?? 0) * 1_000 + (patch ?? 0);
 };
+const numberWithCommas = (x) => {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
 
 /**
  * Utility function to calculate percentage and format it.
@@ -517,9 +429,6 @@ var AnalyticInterval;
     AnalyticInterval["WEEK"] = "WEEK";
     AnalyticInterval["YEAR"] = "YEAR";
 })(AnalyticInterval || (AnalyticInterval = {}));
-function numberWithCommas(x) {
-    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
 const SECONDS_IN_MINUTE = 60;
 const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * SECONDS_IN_MINUTE;
 const getTimeDurationLabel = (valueInSeconds) => {
@@ -577,238 +486,6 @@ const getFormattedByInterval = (value, interval, options) => {
     return dayjsTz(value).format(optionFormat.formatMonth);
 };
 
-const formatAnalyticDate = (dateString) => {
-    if (!dateString)
-        return 'None';
-    const date = dayjsTz(dateString);
-    const now = dayjsTz();
-    const yesterday = dayjsTz().subtract(1, 'day');
-    const isToday = date.format('YYYY-MM-DD') === now.format('YYYY-MM-DD');
-    const isYesterday = date.format('YYYY-MM-DD') === yesterday.format('YYYY-MM-DD');
-    if (isToday) {
-        return `Today at ${date.format('HH:mm')}`;
-    }
-    if (isYesterday) {
-        return `Yesterday at ${date.format('HH:mm')}`;
-    }
-    const daysDiff = now.diff(date, 'day');
-    const isWithinWeek = daysDiff >= 0 && daysDiff < 7;
-    if (isWithinWeek) {
-        return `${date.format('dddd')} at ${date.format('HH:mm')}`;
-    }
-    return `${date.format('MMM D')} at ${date.format('hh:mm a')}`;
-};
-
-const formatAnalyticData = ({ value, formatter, getTextPrice, name, }) => {
-    const dataTypeIsObjectOrArray = value !== null && (typeof value === 'object' || Array.isArray(value));
-    if (dataTypeIsObjectOrArray)
-        return value;
-    switch (formatter) {
-        case EAnalyticDataType.INTEGER: {
-            return numberWithCommas((value ?? 0).toString());
-        }
-        case EAnalyticDataType.CURRENCY: {
-            if (!getTextPrice)
-                return `${value ?? 0}`;
-            return getTextPrice(value, false);
-        }
-        case EAnalyticDataType.DATE: {
-            return formatAnalyticDate(value);
-        }
-        case EAnalyticDataType.PERCENT: {
-            if (typeof value !== 'number')
-                return calcPercentageString(0, 1, 2) ?? '';
-            return calcPercentageString(value / 100, 1, 2) ?? '';
-        }
-        case EAnalyticDataType.DURATION: {
-            return getTimeDurationLabel(Number(value));
-        }
-        case EAnalyticDataType.STRING: {
-            const fallbackValue = name === EAnalyticColumnKey.CAMPAIGNS ? '' : NONE_VALUE;
-            return value ?? fallbackValue;
-        }
-        case EAnalyticDataType.DAY: {
-            return getFormattedByInterval(value, AnalyticInterval.DAY, { isExpandDetail: true });
-        }
-        case EAnalyticDataType.HOUR: {
-            return getFormattedByInterval(value, AnalyticInterval.HOUR, { isExpandDetail: true });
-        }
-        case EAnalyticDataType.MONTH: {
-            return getFormattedByInterval(value, AnalyticInterval.MONTH, { isExpandDetail: true });
-        }
-        case EAnalyticDataType.YEAR: {
-            return getFormattedByInterval(value, AnalyticInterval.YEAR);
-        }
-        case EAnalyticDataType.WEEK: {
-            return getFormattedByInterval(value, AnalyticInterval.WEEK, { isExpandDetail: true });
-        }
-        case EAnalyticDataType.QUARTER: {
-            return getFormattedByInterval(value, AnalyticInterval.QUARTER, {
-                isExpandDetail: true,
-            });
-        }
-        case EAnalyticDataType.OBJECT:
-        case EAnalyticDataType.ARRAY: {
-            return value;
-        }
-        default:
-            return `${value}`;
-    }
-};
-
-const SESSION_KEY = 'sessions';
-const hasMetricData = (metric) => {
-    const sessions = metric?.[SESSION_KEY];
-    return typeof sessions === 'number' && sessions > 0;
-};
-
-const parseRawJson = (raw) => {
-    if (!raw)
-        return undefined;
-    return typeof raw === 'string' ? JSON.parse(raw) : raw;
-};
-const parseJsonArray = (raw) => {
-    try {
-        const parsed = parseRawJson(raw);
-        if (!Array.isArray(parsed))
-            return undefined;
-        return parsed;
-    }
-    catch {
-        return undefined;
-    }
-};
-const parseBreakdownItems = (raw) => parseJsonArray(raw)?.map((item) => ({ ...item, total: Number(item.total) }));
-
-const readNumeric = (metric, key) => {
-    const raw = metric?.[key];
-    return typeof raw === 'number' ? raw : 0;
-};
-
-const useAnalyticData = (getTextPrice) => {
-    const formatData = ({ value, formatter, name }) => {
-        return formatAnalyticData({ value, formatter, getTextPrice, name });
-    };
-    const computeMetric = ({ metric, previousMetric, metricKey, formatter, }) => {
-        if (!hasMetricData(metric))
-            return { value: 0, change: PLACEHOLDER_VALUE$1 };
-        const currentValue = readNumeric(metric, metricKey);
-        const previousValue = readNumeric(previousMetric, metricKey);
-        const value = formatData({ value: currentValue, formatter, name: metricKey });
-        if (currentValue === 0 && previousValue !== 0)
-            return { value, change: -100 };
-        if (previousValue === 0)
-            return { value, change: PLACEHOLDER_VALUE$1 };
-        const change = ((currentValue - previousValue) / previousValue) * 100;
-        return { value, change };
-    };
-    return { formatData, computeMetric };
-};
-
-var GPaginationDirection;
-(function (GPaginationDirection) {
-    GPaginationDirection["NEXT"] = "NEXT";
-    GPaginationDirection["PREV"] = "PREV";
-})(GPaginationDirection || (GPaginationDirection = {}));
-
-[
-    { value: EVisitorType.NEW, label: 'New' },
-    { value: EVisitorType.RETURNING, label: 'Returning' },
-];
-[
-    { value: EDeviceType.DESKTOP, label: 'Desktop' },
-    { value: EDeviceType.TABLET, label: 'Tablet' },
-    { value: EDeviceType.MOBILE, label: 'Mobile' },
-];
-[
-    { value: ETrafficSourceType.DIRECT, label: 'Direct' },
-    { value: ETrafficSourceType.EMAIL, label: 'Email' },
-    { value: ETrafficSourceType.REFERRAL, label: 'Referral' },
-    { value: ETrafficSourceType.ORGANIC_SOCIAL, label: 'Organic social' },
-    { value: ETrafficSourceType.ORGANIC_SEARCH, label: 'Organic search' },
-    { value: ETrafficSourceType.PAID_SOCIAL, label: 'Paid social' },
-    { value: ETrafficSourceType.PAID_SEARCH, label: 'Paid search' },
-    { value: ETrafficSourceType.SMS, label: 'SMS' },
-];
-
-const DEFAULT_CURRENT_PERIOD_LABEL = 'Current';
-const DEFAULT_PREVIOUS_PERIOD_LABEL = 'Previous';
-const CHART_MIN_HEIGHT = 228;
-const SERIES_COLORS = {
-    current: 'rgba(64, 176, 230, 1)',
-    comparison: 'rgba(161, 202, 231, 1)',
-    all: ['#2C7DFF', '#F34A70'],
-};
-const TREND_TONE = {
-    POSITIVE: '#007F5F',
-    NEUTRAL: '#4A4A4A',
-};
-const PLACEHOLDER_VALUE = '-';
-
-const DEFAULT_CURRENCY_ANALYTIC = 'USD';
-
-var THUMB_PRODUCT_DEFAULT = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSI5MCIKICBoZWlnaHQ9IjcyIgogIHZpZXdCb3g9IjAgMCA5MCA3MiIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNDguNzUgMzQuNUM0OS45OTI2IDM0LjUgNTEgMzMuNDkyNiA1MSAzMi4yNUM1MSAzMS4wMDc0IDQ5Ljk5MjYgMzAgNDguNzUgMzBDNDcuNTA3NCAzMCA0Ni41IDMxLjAwNzQgNDYuNSAzMi4yNUM0Ni41IDMzLjQ5MjYgNDcuNTA3NCAzNC41IDQ4Ljc1IDM0LjVaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgogIDxwYXRoCiAgICBmaWxsUnVsZT0iZXZlbm9kZCIKICAgIGNsaXBSdWxlPSJldmVub2RkIgogICAgZD0iTTQzLjUyNjggMjYuMjVINDYuNDczMkM0Ny42OTI0IDI2LjI1IDQ4LjY3NTggMjYuMjUgNDkuNDcyMiAyNi4zMTVDNTAuMjkyMiAyNi4zODIgNTEuMDEyNCAyNi41MjM2IDUxLjY3ODcgMjYuODYzMUM1Mi43MzcxIDI3LjQwMjQgNTMuNTk3NiAyOC4yNjI5IDU0LjEzNjkgMjkuMzIxM0M1NC40NzY0IDI5Ljk4NzYgNTQuNjE4IDMwLjcwNzggNTQuNjg1IDMxLjUyNzhDNTQuNzUgMzIuMzI0MiA1NC43NSAzMy4zMDc2IDU0Ljc1IDM0LjUyNjhWMzcuNDczMkM1NC43NSAzOC42OTI0IDU0Ljc1IDM5LjY3NTggNTQuNjg1IDQwLjQ3MjJDNTQuNjE4IDQxLjI5MjIgNTQuNDc2NCA0Mi4wMTI0IDU0LjEzNjkgNDIuNjc4N0M1My41OTc2IDQzLjczNzEgNTIuNzM3MSA0NC41OTc2IDUxLjY3ODcgNDUuMTM2OUM1MS4wMTI0IDQ1LjQ3NjQgNTAuMjkyMiA0NS42MTggNDkuNDcyMiA0NS42ODVDNDguNjc1OCA0NS43NSA0Ny42OTI0IDQ1Ljc1IDQ2LjQ3MzIgNDUuNzVINDMuNTI2OEM0Mi4zMDc2IDQ1Ljc1IDQxLjMyNDIgNDUuNzUgNDAuNTI3OCA0NS42ODVDMzkuNzA3OCA0NS42MTggMzguOTg3NiA0NS40NzY0IDM4LjMyMTMgNDUuMTM2OUMzNy4yNjI5IDQ0LjU5NzYgMzYuNDAyNCA0My43MzcxIDM1Ljg2MzEgNDIuNjc4N0MzNS41MjM2IDQyLjAxMjQgMzUuMzgyIDQxLjI5MjIgMzUuMzE1IDQwLjQ3MjJDMzUuMjUgMzkuNjc1OCAzNS4yNSAzOC42OTI0IDM1LjI1IDM3LjQ3MzJWMzQuNTI2OEMzNS4yNSAzMy4zMDc2IDM1LjI1IDMyLjMyNDIgMzUuMzE1IDMxLjUyNzhDMzUuMzgyIDMwLjcwNzggMzUuNTIzNiAyOS45ODc2IDM1Ljg2MzEgMjkuMzIxM0MzNi40MDI0IDI4LjI2MjkgMzcuMjYyOSAyNy40MDI0IDM4LjMyMTMgMjYuODYzMUMzOC45ODc2IDI2LjUyMzYgMzkuNzA3OCAyNi4zODIgNDAuNTI3OCAyNi4zMTVDNDEuMzI0MiAyNi4yNSA0Mi4zMDc2IDI2LjI1IDQzLjUyNjggMjYuMjVaTTQwLjcxMSAyOC41NTc2QzQwLjAzMDIgMjguNjEzMiAzOS42MzkxIDI4LjcxNjkgMzkuMzQyOCAyOC44Njc5QzM4LjcwNzcgMjkuMTkxNCAzOC4xOTE0IDI5LjcwNzcgMzcuODY3OSAzMC4zNDI4QzM3LjcxNjkgMzAuNjM5MSAzNy42MTMyIDMxLjAzMDIgMzcuNTU3NiAzMS43MTFDMzcuNTAwOSAzMi40MDUgMzcuNSAzMy4yOTYzIDM3LjUgMzQuNTc1VjM2LjcxNzdMMzguNTg0MiAzNS40MTY3QzM5LjU3MjQgMzQuMjMwOSA0MS4zNjU1IDM0LjE0OTYgNDIuNDU2OSAzNS4yNDFMNDYuNSAzOS4yODQxTDQ4LjI2OTQgMzcuNTE0NkM0OS4zNzU3IDM2LjQwODMgNTEuMTk4IDM2LjUwOTMgNTIuMTc1NCAzNy43MzA5TDUyLjQ5OTUgMzguMTM2MUM1Mi41IDM3LjkxMzEgNTIuNSAzNy42NzY1IDUyLjUgMzcuNDI1VjM0LjU3NUM1Mi41IDMzLjI5NjMgNTIuNDk5MSAzMi40MDUgNTIuNDQyNCAzMS43MTFDNTIuMzg2OCAzMS4wMzAyIDUyLjI4MzEgMzAuNjM5MSA1Mi4xMzIxIDMwLjM0MjhDNTEuODA4NiAyOS43MDc3IDUxLjI5MjMgMjkuMTkxNCA1MC42NTcyIDI4Ljg2NzlDNTAuMzYwOSAyOC43MTY5IDQ5Ljk2OTggMjguNjEzMiA0OS4yODkgMjguNTU3NkM0OC41OTUgMjguNTAwOSA0Ny43MDM3IDI4LjUgNDYuNDI1IDI4LjVINDMuNTc1QzQyLjI5NjMgMjguNSA0MS40MDUgMjguNTAwOSA0MC43MTEgMjguNTU3NlpNMzcuNTU3NiA0MC4yODlDMzcuNTU0MyA0MC4yNDkyIDM3LjU1MTMgNDAuMjA4OCAzNy41NDg0IDQwLjE2NzhDMzcuNTcxMSA0MC4xNDQ4IDM3LjU5MzEgNDAuMTIwNiAzNy42MTQyIDQwLjA5NTNMNDAuMzEyNyAzNi44NTcxQzQwLjQ1MzkgMzYuNjg3NyA0MC43MSAzNi42NzYxIDQwLjg2NTkgMzYuODMyTDQ1LjcwNDUgNDEuNjcwNkM0Ni4xNDM4IDQyLjEwOTkgNDYuODU2MSA0Mi4xMDk5IDQ3LjI5NTUgNDEuNjcwNkw0OS44NjA0IDM5LjEwNTZDNTAuMDE4NSAzOC45NDc2IDUwLjI3ODggMzguOTYyIDUwLjQxODQgMzkuMTM2NUw1Mi4yMzc3IDQxLjQxMDdDNTIuMjA1NiA0MS41MDEgNTIuMTcwNCA0MS41ODIyIDUyLjEzMjEgNDEuNjU3MkM1MS44MDg2IDQyLjI5MjMgNTEuMjkyMyA0Mi44MDg2IDUwLjY1NzIgNDMuMTMyMUM1MC4zNjA5IDQzLjI4MzEgNDkuOTY5OCA0My4zODY4IDQ5LjI4OSA0My40NDI0QzQ4LjU5NSA0My40OTkxIDQ3LjcwMzcgNDMuNSA0Ni40MjUgNDMuNUg0My41NzVDNDIuMjk2MyA0My41IDQxLjQwNSA0My40OTkxIDQwLjcxMSA0My40NDI0QzQwLjAzMDIgNDMuMzg2OCAzOS42MzkxIDQzLjI4MzEgMzkuMzQyOCA0My4xMzIxQzM4LjcwNzcgNDIuODA4NiAzOC4xOTE0IDQyLjI5MjMgMzcuODY3OSA0MS42NTcyQzM3LjcxNjkgNDEuMzYwOSAzNy42MTMyIDQwLjk2OTggMzcuNTU3NiA0MC4yODlaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgo8L3N2Zz4K";
-
-var SvgArrowRightIcon = function SvgArrowRightIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M3.5 10a.75.75 0 0 1 .75-.75h9.69l-2.72-2.72a.75.75 0 1 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72h-9.69a.75.75 0 0 1-.75-.75Z"
-  }));
-};
-SvgArrowRightIcon.displayName = "ArrowRightIcon";
-
-var SvgCalendarIcon = function SvgCalendarIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M7.75 3.5a.75.75 0 0 0-1.5 0v.407a3.075 3.075 0 0 0-.702.252 3.75 3.75 0 0 0-1.64 1.639c-.226.444-.32.924-.365 1.47-.043.531-.043 1.187-.043 2v1.464c0 .813 0 1.469.043 2 .045.546.14 1.026.366 1.47a3.75 3.75 0 0 0 1.639 1.64c.444.226.924.32 1.47.365.531.043 1.187.043 2 .043h3.383c.323 0 .542 0 .735-.02a3.75 3.75 0 0 0 3.344-3.344c.02-.193.02-.412.02-.735v-2.883c0-.813 0-1.469-.043-2-.045-.546-.14-1.026-.366-1.47a3.75 3.75 0 0 0-1.639-1.64 3.076 3.076 0 0 0-.702-.251v-.407a.75.75 0 0 0-1.5 0v.259c-.373-.009-.794-.009-1.268-.009h-1.964c-.474 0-.895 0-1.268.009v-.259Zm-1.521 1.995c.197-.1.458-.17.912-.207.462-.037 1.057-.038 1.909-.038h1.9c.853 0 1.447 0 1.91.038.453.037.714.107.912.207.423.216.767.56.983.984.1.197.17.458.207.912.014.18.024.38.029.609h-9.982c.006-.228.015-.429.03-.61.036-.453.106-.714.206-.911a2.25 2.25 0 0 1 .984-.984Zm-1.229 4.005v1.2c0 .853 0 1.447.038 1.91.037.453.107.714.207.912.216.423.56.767.984.983.197.1.458.17.912.207.462.037 1.057.038 1.909.038h3.306c.385 0 .52-.001.626-.012a2.25 2.25 0 0 0 2.006-2.006c.011-.106.012-.241.012-.626v-2.606h-10Z"
-  }));
-};
-SvgCalendarIcon.displayName = "CalendarIcon";
-
-var SvgCheckIcon = function SvgCheckIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0Z"
-  }));
-};
-SvgCheckIcon.displayName = "CheckIcon";
-
-var SvgChevronDownIcon = function SvgChevronDownIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"
-  }));
-};
-SvgChevronDownIcon.displayName = "ChevronDownIcon";
-
-var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M7.72 14.53a.75.75 0 0 1 0-1.06l3.47-3.47-3.47-3.47a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0Z"
-  }));
-};
-SvgChevronRightIcon.displayName = "ChevronRightIcon";
-
-var SvgChevronUpIcon = function SvgChevronUpIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M14.53 12.28a.75.75 0 0 1-1.06 0l-3.47-3.47-3.47 3.47a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1 0 1.06Z"
-  }));
-};
-SvgChevronUpIcon.displayName = "ChevronUpIcon";
-
 const GClickable = ({ children, fullWidth = false, cursor = 'pointer', onClick, onMouseEnter, onMouseLeave, }) => {
     return (jsx("div", { role: "button", tabIndex: 0, className: cls({
             'w-full': fullWidth,
@@ -1125,117 +802,398 @@ const GThumbnail = ({ source, alt, size, grayscale, defaultSource = THUMB_PRODUC
     return jsx("span", { className: className, children: thumbnail });
 };
 
-const SIZE_CLASS = {
-    default: 'w-[210px]',
-    wide: 'w-[320px]',
-    large: 'w-[328px]',
-};
-const ALIGNMENT_MAP = {
-    start: 'flex justify-start',
-    center: 'flex justify-center',
-    end: 'flex justify-end',
-};
-const GTooltipCard = forwardRef((props, ref) => {
-    const { tooltip, wrapper = 'div', activatorProps, isHideBorder, alignment, delay = 500, textDecoration = 'none', popoverRef, preferredAlignment = 'left', showArrow = false, } = props;
-    const { width = 'default' } = tooltip ?? {};
-    const [isMouseEnter, setIsMouseEnter] = useState(false);
-    const TooltipCardWrapper = wrapper;
-    const sizeClass = SIZE_CLASS[width];
-    const timeoutRef = useRef(null);
-    const handleMouseEnter = () => {
-        timeoutRef.current = setTimeout(() => {
-            setIsMouseEnter(true);
-        }, delay);
-    };
-    const handleMouseLeave = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
+const SIZE_CLASS = {
+    default: 'w-[210px]',
+    wide: 'w-[320px]',
+    large: 'w-[328px]',
+};
+const ALIGNMENT_MAP = {
+    start: 'flex justify-start',
+    center: 'flex justify-center',
+    end: 'flex justify-end',
+};
+const GTooltipCard = forwardRef((props, ref) => {
+    const { tooltip, wrapper = 'div', activatorProps, isHideBorder, alignment, delay = 500, textDecoration = 'none', popoverRef, preferredAlignment = 'left', showArrow = false, } = props;
+    const { width = 'default' } = tooltip ?? {};
+    const [isMouseEnter, setIsMouseEnter] = useState(false);
+    const TooltipCardWrapper = wrapper;
+    const sizeClass = SIZE_CLASS[width];
+    const timeoutRef = useRef(null);
+    const handleMouseEnter = () => {
+        timeoutRef.current = setTimeout(() => {
+            setIsMouseEnter(true);
+        }, delay);
+    };
+    const handleMouseLeave = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsMouseEnter(false);
+    };
+    useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
+    return (jsx(TooltipCardWrapper, { className: cls('GTooltipCard cursor-pointer', alignment && ALIGNMENT_MAP[alignment], {
+            'GTooltipCard--text-underline': textDecoration === 'underline',
+        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(Popover, { ref: popoverRef, activator: !isHideBorder ? (jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", as: wrapper, ...activatorProps, children: props.children })) : (jsx(InlineStack, { children: props.children })), activatorWrapper: wrapper, onClose: () => { }, active: isMouseEnter, preferredPosition: "below", preferredAlignment: preferredAlignment, children: tooltip && (jsx("div", { className: cls(sizeClass, { 'GTooltipCard-arrow': showArrow }), children: jsx(Box, { padding: "400", children: jsxs(BlockStack, { gap: "200", children: [jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "headingSm", fontWeight: "semibold", children: tooltip.title }), jsxs(BlockStack, { gap: "200", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: jsx("span", { dangerouslySetInnerHTML: { __html: tooltip.content } }) }), tooltip.contentList && (jsx(List, { type: "bullet", children: tooltip.contentList.map((item) => (jsx(List.Item, { children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: item }) }, item))) }))] })] }), tooltip.formula && (jsx("div", { className: "rounded-md font-mono", style: { fontSize: '12px' }, children: tooltip.formula }))] }) }) })) }) }));
+});
+GTooltipCard.displayName = 'GTooltipCard';
+
+const GViewBySelector = ({ activatorText, selected, options, minWidth, maxWidth, preferredAlignment = 'right', onSelect, }) => {
+    const [popoverActive, setPopoverActive] = useState(false);
+    const [itemHover, setItemHover] = useState(null);
+    const togglePopoverActive = () => setPopoverActive((prev) => !prev);
+    const selectedOption = useMemo(() => {
+        return options.find((item) => item.id === selected);
+    }, [options, selected]);
+    const activatorContent = useMemo(() => {
+        if (selectedOption) {
+            const content = selectedOption.title ?? selectedOption.content;
+            return activatorText ? `${activatorText}: ${content}` : content;
+        }
+        return activatorText;
+    }, [selectedOption, activatorText]);
+    const handleSelect = (value) => {
+        onSelect(value);
+        setPopoverActive(false);
+    };
+    return (jsx(Popover, { active: popoverActive, activator: jsx(GActivatorPopover, { active: popoverActive, content: activatorContent, textProps: { variant: 'bodySm' }, onClick: togglePopoverActive }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, padding: "200", children: jsx(BlockStack, { gap: "200", children: options.map((option) => {
+                    const isSelected = option.id === selected;
+                    const isHover = itemHover === option.id;
+                    const borderColor = isSelected ? 'input-border' : isHover ? 'border-hover' : 'transparent';
+                    return (jsx(Box, { padding: "150", borderWidth: "025", borderColor: borderColor, borderRadius: "100", children: jsx("div", { onClick: () => handleSelect(option.id), className: "cursor-pointer", onMouseEnter: () => setItemHover(option.id), onMouseLeave: () => setItemHover(null), children: jsxs(InlineStack, { gap: "300", align: "space-between", blockAlign: "center", wrap: false, children: [jsxs(InlineStack, { gap: "300", blockAlign: "center", wrap: false, children: [jsx("div", { className: "bg-surface-secondary flex items-center justify-center rounded-md min-w-[184px] h-[92px]", children: jsx("img", { src: option.icon, alt: option.content, className: "w-full h-full object-contain" }) }), jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "semibold", children: option.content }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: option.helpText })] })] }), isSelected && (jsx(Box, { children: jsx(Icon, { source: SvgCheckIcon }) }))] }) }) }, option.id));
+                }) }) }) }));
+};
+
+const ChoiceHelpText = ({ item }) => {
+    return (jsxs(Text, { as: "p", variant: "bodyMd", children: [item.description, item.inlineAction && (jsx(Link, { monochrome: true, onClick: () => {
+                    if (item.inlineAction?.onAction) {
+                        item.inlineAction?.onAction();
+                    }
+                    else {
+                        window.open(item.inlineAction?.url, item.inlineAction?.target ?? '_blank');
+                    }
+                }, children: item.inlineAction?.content }))] }));
+};
+
+const GChartSkeleton = () => {
+    return jsx(GSkeletonDisplayText, { height: "188px" });
+};
+
+const LINE_SERIES_COLORS = {
+    comparison: SERIES_COLORS.comparison,
+    single: SERIES_COLORS.current,
+    all: [...SERIES_COLORS.all],
+};
+const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesColors = LINE_SERIES_COLORS, }) => {
+    return (jsx(PolarisVizProvider, { themes: {
+            Light: {
+                chartContainer: {
+                    minHeight,
+                },
+                grid: {
+                    horizontalOverflow: true,
+                    verticalOverflow: true,
+                    horizontalMargin: 0,
+                },
+                seriesColors,
+            },
+        }, children: children }));
+};
+
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+function useToggle(initialState) {
+    const [value, setState] = useState(initialState);
+    return {
+        value,
+        toggle: useCallback(() => setState((state) => !state), []),
+        setTrue: useCallback(() => setState(true), []),
+        setFalse: useCallback(() => setState(false), []),
+    };
+}
+
+const NONE_VALUE = 'None';
+const PLACEHOLDER_VALUE = '-';
+
+const TOTALS_SUFFIX = '___totals';
+const COMPARE_PREFIX = 'comparison___';
+const COMPARE_SUFFIX = '___previous_period';
+const COMPARE_TOTALS_SUFFIX = `${COMPARE_SUFFIX}${TOTALS_SUFFIX}`;
+
+const OPERATOR_IS = 'is';
+
+var EAnalyticDataType;
+(function (EAnalyticDataType) {
+    EAnalyticDataType["DATE"] = "DATE";
+    EAnalyticDataType["ARRAY"] = "ARRAY";
+    EAnalyticDataType["OBJECT"] = "OBJECT";
+    EAnalyticDataType["STRING"] = "STRING";
+    EAnalyticDataType["INTEGER"] = "INTEGER";
+    EAnalyticDataType["CURRENCY"] = "CURRENCY";
+    EAnalyticDataType["PERCENT"] = "PERCENT";
+    EAnalyticDataType["DURATION"] = "DURATION";
+    EAnalyticDataType["MONTH"] = "MONTH_TIMESTAMP";
+    EAnalyticDataType["QUARTER"] = "QUARTER_TIMESTAMP";
+    EAnalyticDataType["DAY"] = "DAY_TIMESTAMP";
+    EAnalyticDataType["WEEK"] = "WEEK_TIMESTAMP";
+    EAnalyticDataType["YEAR"] = "YEAR_TIMESTAMP";
+    EAnalyticDataType["HOUR"] = "HOUR_TIMESTAMP";
+})(EAnalyticDataType || (EAnalyticDataType = {}));
+var EAnalyticColumnKey;
+(function (EAnalyticColumnKey) {
+    EAnalyticColumnKey["CAMPAIGNS"] = "experiments";
+    EAnalyticColumnKey["VISITOR_ITEMS"] = "visitor_items";
+    EAnalyticColumnKey["DEVICE_ITEMS"] = "device_items";
+    EAnalyticColumnKey["TRAFFIC_SOURCE_ITEMS"] = "traffic_source_items";
+})(EAnalyticColumnKey || (EAnalyticColumnKey = {}));
+
+var EAnalyticSource;
+(function (EAnalyticSource) {
+    EAnalyticSource["SESSIONS"] = "sessions";
+    EAnalyticSource["SALES"] = "sales";
+})(EAnalyticSource || (EAnalyticSource = {}));
+
+var EComparisonOperator;
+(function (EComparisonOperator) {
+    EComparisonOperator["EQ"] = "=";
+    EComparisonOperator["IN"] = "IN";
+    EComparisonOperator["LIKE"] = "LIKE";
+})(EComparisonOperator || (EComparisonOperator = {}));
+var EGroupOperator;
+(function (EGroupOperator) {
+    EGroupOperator["OR"] = "OR";
+    EGroupOperator["AND"] = "AND";
+})(EGroupOperator || (EGroupOperator = {}));
+
+var EFilterField;
+(function (EFilterField) {
+    EFilterField["DEVICE"] = "device";
+    EFilterField["DEVICES"] = "devices";
+    EFilterField["VISITOR"] = "visitor_type";
+    EFilterField["VISITORS"] = "visitor_types";
+    EFilterField["TRAFFIC_SOURCE"] = "traffic_source";
+    EFilterField["TRAFFIC_SOURCES"] = "traffic_sources";
+    EFilterField["VERSION"] = "version";
+    EFilterField["VERSIONS"] = "versions";
+    EFilterField["SINGLE_PAGE"] = "page_path";
+    EFilterField["LIST_PAGE"] = "page_paths";
+    EFilterField["GROUP_CAMPAIGN_ITEM"] = "group_campaign_item";
+    EFilterField["GROUP_CAMPAIGN_ITEMS"] = "group_campaign_items";
+    EFilterField["SINGLE_CAMPAIGN"] = "experiment_id";
+    EFilterField["GROUP_CAMPAIGN"] = "experiment_group_id";
+    EFilterField["CAMPAIGN_VERSION_ID"] = "version_id";
+    EFilterField["GROUP_CAMPAIGN_VERSION_ID"] = "group_version_id";
+})(EFilterField || (EFilterField = {}));
+
+var EOperatorField;
+(function (EOperatorField) {
+    EOperatorField["DEVICE_OPERATOR"] = "deviceOperator";
+    EOperatorField["VISITOR_OPERATOR"] = "visitorOperator";
+    EOperatorField["TRAFFIC_SOURCE_OPERATOR"] = "trafficSourceOperator";
+    EOperatorField["VERSION_OPERATOR"] = "versionOperator";
+    EOperatorField["PAGE_OPERATOR"] = "pageOperator";
+    EOperatorField["CAMPAIGN_ITEM_OPERATOR"] = "campaignItemOperator";
+})(EOperatorField || (EOperatorField = {}));
+
+/**
+ * Controls which totals columns are appended to the query result.
+ *
+ * - NONE   → no totals, GROUP BY only.
+ * - TOTALS → adds `<metric>___totals` (grand total only). Use with single-dimension GROUP BY.
+ * - ALL    → adds subtotals per dimension group + grand total. Use with multi-dimension GROUP BY.
+ */
+var EGroupWithClause;
+(function (EGroupWithClause) {
+    EGroupWithClause["NONE"] = "";
+    EGroupWithClause["TOTALS"] = "TOTALS";
+    EGroupWithClause["ALL"] = "WITH GROUP_TOTALS, TOTALS";
+})(EGroupWithClause || (EGroupWithClause = {}));
+
+var EOrderDirectionType;
+(function (EOrderDirectionType) {
+    EOrderDirectionType["ASC"] = "ASC";
+    EOrderDirectionType["DESC"] = "DESC";
+})(EOrderDirectionType || (EOrderDirectionType = {}));
+
+var EPageMetric;
+(function (EPageMetric) {
+    EPageMetric["PAGE_ITEMS"] = "page_items";
+    EPageMetric["PAGE_PATHS"] = "page_paths";
+})(EPageMetric || (EPageMetric = {}));
+var EPageDimension;
+(function (EPageDimension) {
+    EPageDimension["PAGE_PATH"] = "page_path";
+})(EPageDimension || (EPageDimension = {}));
+var EPageField;
+(function (EPageField) {
+    EPageField["SHOPIFY_PAGE_ID"] = "shopify_page_id";
+    EPageField["LOCATION_PATH"] = "location_path";
+    EPageField["PAGE_TYPE"] = "page_type";
+    EPageField["PAGE_TITLE"] = "page_title";
+    EPageField["PAGE_PATH"] = "page_path";
+    EPageField["TEMPLATE_SUFFIX"] = "template_suffix";
+})(EPageField || (EPageField = {}));
+
+var ERowReaderMode;
+(function (ERowReaderMode) {
+    ERowReaderMode["DEFAULT"] = "DEFAULT";
+    ERowReaderMode["COMPARISON"] = "COMPARISON";
+    ERowReaderMode["TOTALS"] = "TOTALS";
+    ERowReaderMode["COMPARISON_TOTALS"] = "COMPARISON_TOTALS";
+})(ERowReaderMode || (ERowReaderMode = {}));
+
+var ETimeDimension;
+(function (ETimeDimension) {
+    ETimeDimension["HOUR"] = "hour";
+    ETimeDimension["DAY"] = "day";
+    ETimeDimension["WEEK"] = "week";
+    ETimeDimension["MONTH"] = "month";
+    ETimeDimension["QUARTER"] = "quarter";
+    ETimeDimension["YEAR"] = "year";
+})(ETimeDimension || (ETimeDimension = {}));
+
+({
+    [ERowReaderMode.DEFAULT]: { prefix: '', suffix: '' },
+    [ERowReaderMode.COMPARISON]: { prefix: COMPARE_PREFIX, suffix: COMPARE_SUFFIX },
+    [ERowReaderMode.TOTALS]: { prefix: '', suffix: TOTALS_SUFFIX },
+    [ERowReaderMode.COMPARISON_TOTALS]: { prefix: COMPARE_PREFIX, suffix: COMPARE_TOTALS_SUFFIX },
+});
+
+const formatAnalyticDate = (dateString) => {
+    if (!dateString)
+        return 'None';
+    const date = dayjsTz(dateString);
+    const now = dayjsTz();
+    const yesterday = dayjsTz().subtract(1, 'day');
+    const isToday = date.format('YYYY-MM-DD') === now.format('YYYY-MM-DD');
+    const isYesterday = date.format('YYYY-MM-DD') === yesterday.format('YYYY-MM-DD');
+    if (isToday) {
+        return `Today at ${date.format('HH:mm')}`;
+    }
+    if (isYesterday) {
+        return `Yesterday at ${date.format('HH:mm')}`;
+    }
+    const daysDiff = now.diff(date, 'day');
+    const isWithinWeek = daysDiff >= 0 && daysDiff < 7;
+    if (isWithinWeek) {
+        return `${date.format('dddd')} at ${date.format('HH:mm')}`;
+    }
+    return `${date.format('MMM D')} at ${date.format('hh:mm a')}`;
+};
+
+const formatAnalyticData = ({ value, formatter, getTextPrice, name, }) => {
+    const dataTypeIsObjectOrArray = value !== null && (typeof value === 'object' || Array.isArray(value));
+    if (dataTypeIsObjectOrArray)
+        return value;
+    switch (formatter) {
+        case EAnalyticDataType.INTEGER: {
+            return numberWithCommas((value ?? 0).toString());
         }
-        setIsMouseEnter(false);
-    };
-    useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
-    return (jsx(TooltipCardWrapper, { className: cls('GTooltipCard cursor-pointer', alignment && ALIGNMENT_MAP[alignment], {
-            'GTooltipCard--text-underline': textDecoration === 'underline',
-        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(Popover, { ref: popoverRef, activator: !isHideBorder ? (jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", as: wrapper, ...activatorProps, children: props.children })) : (jsx(InlineStack, { children: props.children })), activatorWrapper: wrapper, onClose: () => { }, active: isMouseEnter, preferredPosition: "below", preferredAlignment: preferredAlignment, children: tooltip && (jsx("div", { className: cls(sizeClass, { 'GTooltipCard-arrow': showArrow }), children: jsx(Box, { padding: "400", children: jsxs(BlockStack, { gap: "200", children: [jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "headingSm", fontWeight: "semibold", children: tooltip.title }), jsxs(BlockStack, { gap: "200", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: jsx("span", { dangerouslySetInnerHTML: { __html: tooltip.content } }) }), tooltip.contentList && (jsx(List, { type: "bullet", children: tooltip.contentList.map((item) => (jsx(List.Item, { children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: item }) }, item))) }))] })] }), tooltip.formula && (jsx("div", { className: "rounded-md font-mono", style: { fontSize: '12px' }, children: tooltip.formula }))] }) }) })) }) }));
-});
-GTooltipCard.displayName = 'GTooltipCard';
-
-const GViewBySelector = ({ activatorText, selected, options, minWidth, maxWidth, preferredAlignment = 'right', onSelect, }) => {
-    const [popoverActive, setPopoverActive] = useState(false);
-    const [itemHover, setItemHover] = useState(null);
-    const togglePopoverActive = () => setPopoverActive((prev) => !prev);
-    const selectedOption = useMemo(() => {
-        return options.find((item) => item.id === selected);
-    }, [options, selected]);
-    const activatorContent = useMemo(() => {
-        if (selectedOption) {
-            const content = selectedOption.title ?? selectedOption.content;
-            return activatorText ? `${activatorText}: ${content}` : content;
+        case EAnalyticDataType.CURRENCY: {
+            if (!getTextPrice)
+                return `${value ?? 0}`;
+            return getTextPrice(value, false);
         }
-        return activatorText;
-    }, [selectedOption, activatorText]);
-    const handleSelect = (value) => {
-        onSelect(value);
-        setPopoverActive(false);
-    };
-    return (jsx(Popover, { active: popoverActive, activator: jsx(GActivatorPopover, { active: popoverActive, content: activatorContent, textProps: { variant: 'bodySm' }, onClick: togglePopoverActive }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, padding: "200", children: jsx(BlockStack, { gap: "200", children: options.map((option) => {
-                    const isSelected = option.id === selected;
-                    const isHover = itemHover === option.id;
-                    const borderColor = isSelected ? 'input-border' : isHover ? 'border-hover' : 'transparent';
-                    return (jsx(Box, { padding: "150", borderWidth: "025", borderColor: borderColor, borderRadius: "100", children: jsx("div", { onClick: () => handleSelect(option.id), className: "cursor-pointer", onMouseEnter: () => setItemHover(option.id), onMouseLeave: () => setItemHover(null), children: jsxs(InlineStack, { gap: "300", align: "space-between", blockAlign: "center", wrap: false, children: [jsxs(InlineStack, { gap: "300", blockAlign: "center", wrap: false, children: [jsx("div", { className: "bg-surface-secondary flex items-center justify-center rounded-md min-w-[184px] h-[92px]", children: jsx("img", { src: option.icon, alt: option.content, className: "w-full h-full object-contain" }) }), jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "semibold", children: option.content }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: option.helpText })] })] }), isSelected && (jsx(Box, { children: jsx(Icon, { source: SvgCheckIcon }) }))] }) }) }, option.id));
-                }) }) }) }));
+        case EAnalyticDataType.DATE: {
+            return formatAnalyticDate(value);
+        }
+        case EAnalyticDataType.PERCENT: {
+            if (typeof value !== 'number')
+                return calcPercentageString(0, 1, 2) ?? '';
+            return calcPercentageString(value / 100, 1, 2) ?? '';
+        }
+        case EAnalyticDataType.DURATION: {
+            return getTimeDurationLabel(Number(value));
+        }
+        case EAnalyticDataType.STRING: {
+            const fallbackValue = name === EAnalyticColumnKey.CAMPAIGNS ? '' : NONE_VALUE;
+            return value ?? fallbackValue;
+        }
+        case EAnalyticDataType.DAY: {
+            return getFormattedByInterval(value, AnalyticInterval.DAY, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.HOUR: {
+            return getFormattedByInterval(value, AnalyticInterval.HOUR, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.MONTH: {
+            return getFormattedByInterval(value, AnalyticInterval.MONTH, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.YEAR: {
+            return getFormattedByInterval(value, AnalyticInterval.YEAR);
+        }
+        case EAnalyticDataType.WEEK: {
+            return getFormattedByInterval(value, AnalyticInterval.WEEK, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.QUARTER: {
+            return getFormattedByInterval(value, AnalyticInterval.QUARTER, {
+                isExpandDetail: true,
+            });
+        }
+        case EAnalyticDataType.OBJECT:
+        case EAnalyticDataType.ARRAY: {
+            return value;
+        }
+        default:
+            return `${value}`;
+    }
 };
 
-const ChoiceHelpText = ({ item }) => {
-    return (jsxs(Text, { as: "p", variant: "bodyMd", children: [item.description, item.inlineAction && (jsx(Link, { monochrome: true, onClick: () => {
-                    if (item.inlineAction?.onAction) {
-                        item.inlineAction?.onAction();
-                    }
-                    else {
-                        window.open(item.inlineAction?.url, item.inlineAction?.target ?? '_blank');
-                    }
-                }, children: item.inlineAction?.content }))] }));
+const SESSION_KEY = 'sessions';
+const hasMetricData = (metric) => {
+    const sessions = metric?.[SESSION_KEY];
+    return typeof sessions === 'number' && sessions > 0;
 };
 
-const GChartSkeleton = () => {
-    return jsx(GSkeletonDisplayText, { height: "188px" });
+const parseRawJson = (raw) => {
+    if (!raw)
+        return undefined;
+    return typeof raw === 'string' ? JSON.parse(raw) : raw;
 };
-
-const LINE_SERIES_COLORS = {
-    comparison: SERIES_COLORS.comparison,
-    single: SERIES_COLORS.current,
-    all: [...SERIES_COLORS.all],
+const parseJsonArray = (raw) => {
+    try {
+        const parsed = parseRawJson(raw);
+        if (!Array.isArray(parsed))
+            return undefined;
+        return parsed;
+    }
+    catch {
+        return undefined;
+    }
 };
-const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesColors = LINE_SERIES_COLORS, }) => {
-    return (jsx(PolarisVizProvider, { themes: {
-            Light: {
-                chartContainer: {
-                    minHeight,
-                },
-                grid: {
-                    horizontalOverflow: true,
-                    verticalOverflow: true,
-                    horizontalMargin: 0,
-                },
-                seriesColors,
-            },
-        }, children: children }));
+const parseBreakdownItems = (raw) => parseJsonArray(raw)?.map((item) => ({ ...item, total: Number(item.total) }));
+
+const readNumeric = (metric, key) => {
+    const raw = metric?.[key];
+    return typeof raw === 'number' ? raw : 0;
 };
 
-/**
- * Returns a stateful value, and a set of memoized functions to toggle it,
- * set it to true and set it to false
- */
-function useToggle(initialState) {
-    const [value, setState] = useState(initialState);
-    return {
-        value,
-        toggle: useCallback(() => setState((state) => !state), []),
-        setTrue: useCallback(() => setState(true), []),
-        setFalse: useCallback(() => setState(false), []),
+const useAnalyticData = (getTextPrice) => {
+    const formatData = ({ value, formatter, name }) => {
+        return formatAnalyticData({ value, formatter, getTextPrice, name });
     };
-}
+    const computeMetric = ({ metric, previousMetric, metricKey, formatter, }) => {
+        if (!hasMetricData(metric))
+            return { value: 0, change: PLACEHOLDER_VALUE };
+        const currentValue = readNumeric(metric, metricKey);
+        const previousValue = readNumeric(previousMetric, metricKey);
+        const value = formatData({ value: currentValue, formatter, name: metricKey });
+        if (currentValue === 0 && previousValue !== 0)
+            return { value, change: -100 };
+        if (previousValue === 0)
+            return { value, change: PLACEHOLDER_VALUE };
+        const change = ((currentValue - previousValue) / previousValue) * 100;
+        return { value, change };
+    };
+    return { formatData, computeMetric };
+};
+
+var GPaginationDirection;
+(function (GPaginationDirection) {
+    GPaginationDirection["NEXT"] = "NEXT";
+    GPaginationDirection["PREV"] = "PREV";
+})(GPaginationDirection || (GPaginationDirection = {}));
 
 const useFormatLineChartData = ({ metricKey, columnTypes }) => {
     const { formatData } = useAnalyticData();
@@ -1339,7 +1297,7 @@ const MetricChartTooltip = ({ data, formatValue }) => {
     const formatPercent = () => {
         const value = currentData.trend?.value;
         if (!value)
-            return PLACEHOLDER_VALUE;
+            return PLACEHOLDER_VALUE$1;
         const valueNumber = Number(value.replace(/[%~]/g, ''));
         if (currentData.trend?.trend === 'negative') {
             return valueNumber * -1;
@@ -1398,6 +1356,53 @@ const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, i
                 }, children: metricInfo.map((item) => (jsx(MetricChartTab, { item: item, isActive: activeTab === item.key, isLoading: isLoading, hideComparison: hideComparison, onSelect: setActiveTab }, item.key))) }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, metricKey: activeTab, columnTypes: columnTypes })] }));
 };
 
+EGroupOperator.OR;
+
+[
+    {
+        operator: EOperatorField.DEVICE_OPERATOR,
+        singleField: EFilterField.DEVICE,
+        multiField: EFilterField.DEVICES,
+        fieldName: EFilterField.DEVICE,
+    },
+    {
+        operator: EOperatorField.VISITOR_OPERATOR,
+        singleField: EFilterField.VISITOR,
+        multiField: EFilterField.VISITORS,
+        fieldName: EFilterField.VISITOR,
+    },
+    {
+        operator: EOperatorField.TRAFFIC_SOURCE_OPERATOR,
+        singleField: EFilterField.TRAFFIC_SOURCE,
+        multiField: EFilterField.TRAFFIC_SOURCES,
+        fieldName: EFilterField.TRAFFIC_SOURCE,
+    },
+    {
+        operator: EOperatorField.VERSION_OPERATOR,
+        singleField: EFilterField.VERSION,
+        multiField: EFilterField.VERSIONS,
+        fieldName: EFilterField.VERSION,
+    },
+    {
+        operator: EOperatorField.PAGE_OPERATOR,
+        singleField: EFilterField.SINGLE_PAGE,
+        multiField: EFilterField.LIST_PAGE,
+        fieldName: EFilterField.SINGLE_PAGE,
+    },
+    {
+        operator: EOperatorField.CAMPAIGN_ITEM_OPERATOR,
+        singleField: EFilterField.GROUP_CAMPAIGN_ITEM,
+        multiField: EFilterField.GROUP_CAMPAIGN_ITEMS,
+        condition: EFilterField.GROUP_CAMPAIGN,
+        fieldName: EFilterField.SINGLE_CAMPAIGN,
+    },
+    {
+        operatorVal: OPERATOR_IS,
+        singleField: EFilterField.SINGLE_CAMPAIGN,
+        multiField: EFilterField.GROUP_CAMPAIGN,
+    },
+];
+
 const calculatePercentageChange = (current, previous) => {
     if (current === 0 && previous === 0) {
         return undefined;
@@ -1471,13 +1476,6 @@ var IMAGE_FIRST_SESSION = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXAAAAC
 
 var IMAGE_ALL_SESSION = "data:image/png;base64,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";
 
-var EAnalyticMode;
-(function (EAnalyticMode) {
-    EAnalyticMode["ALL_SESSION"] = "ALL_SESSION";
-    EAnalyticMode["FIRST_SESSION"] = "FIRST_SESSION";
-    EAnalyticMode["PAGE_ONLY"] = "PAGE_ONLY";
-})(EAnalyticMode || (EAnalyticMode = {}));
-
 const VIEW_BY_OPTIONS = [
     {
         id: EAnalyticMode.ALL_SESSION,
@@ -2527,4 +2525,4 @@ const GTimePicker = (props) => {
     return (jsxs(InlineStack, { gap: "200", children: [jsx(MainTimePicker, { ...timePickerProps }), isCompare && (jsx(CompareTimePicker, { rangeAddition: timePickerProps.rangeAddition, popoverProps: timePickerProps.popoverProps }))] }));
 };
 
-export { AnalyticModeSelector, COMPARE_DATE_TIME_FILTERS_MAP, CompareDateTimePickerAlias, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, GSelectableMetricChartCard, GTimePicker, MainDateTimePickerAlias, MetricDonutChartCard, PREVIOUS_PERIOD_FILTER, SingleMetricChartCard, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useVersionDateTimeFilters };
+export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CompareDateTimePickerAlias, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, GSelectableMetricChartCard, GTimePicker, MainDateTimePickerAlias, MetricDonutChartCard, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, SERIES_COLORS, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useVersionDateTimeFilters };