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

package/src/components/common/chart/MetricChartTooltip.tsx

@@ -0,0 +1,74 @@
+import type { RenderTooltipContentData } from '@shopify/polaris-viz';
+
+import { Card, BlockStack, InlineStack, Text } from '@shopify/polaris';
+import { PLACEHOLDER_VALUE } from '@/constants';
+import { MetricPercentage } from '../percent';
+
+export interface MetricChartTooltipProps {
+  data: RenderTooltipContentData;
+  formatValue: (value: number) => string;
+}
+export const MetricChartTooltip: React.FC<MetricChartTooltipProps> = ({ data, formatValue }) => {
+  const { activeIndex } = data;
+  const currentData = data?.dataSeries?.[0]?.data?.[activeIndex] as any;
+  const previousData = data?.dataSeries?.[1]?.data?.[activeIndex] as any;
+
+  const formatPercent = () => {
+    const value = currentData.trend?.value;
+    if (!value) return PLACEHOLDER_VALUE;
+
+    const valueNumber = Number(value.replace(/[%~]/g, ''));
+    if (!Number.isFinite(valueNumber)) return PLACEHOLDER_VALUE;
+
+    if (currentData.trend?.trend === 'negative') {
+      return valueNumber * -1;
+    }
+
+    return valueNumber;
+  };
+
+  return (
+    <div className="w-fit min-w-[175px]">
+      <Card padding={'200'}>
+        <BlockStack gap={'100'}>
+          <Text as="p" variant="bodySm" fontWeight="semibold">
+            {data.formatters?.titleFormatter?.(data.title || '') || data.title}
+          </Text>
+          <BlockStack gap={'100'}>
+            <InlineStack gap={'400'} align="space-between" blockAlign="center">
+              <InlineStack gap={'100'} blockAlign="center">
+                <div className="h-[2px] w-[12px] rounded-[10px] bg-[#4FA9EA]"></div>
+                <Text as="p" variant="bodySm" fontWeight="medium" tone="subdued">
+                  {currentData.tooltipKey}
+                </Text>
+              </InlineStack>
+              <InlineStack blockAlign="center" gap="100">
+                <Text as="span" variant="bodySm" fontWeight="semibold">
+                  {formatValue(currentData.value)}
+                </Text>
+                <MetricPercentage change={formatPercent()} />
+              </InlineStack>
+            </InlineStack>
+
+            <InlineStack gap={'400'} align="space-between" blockAlign="center">
+              <InlineStack gap={'100'} blockAlign="center">
+                <div className="w-[12px] border border-dashed border-[#A1CAE7]" />
+                <Text as="p" variant="bodySm" tone="subdued" fontWeight="medium">
+                  {previousData.tooltipKey}
+                </Text>
+              </InlineStack>
+              <InlineStack blockAlign="center" gap="100">
+                <Text as="span" variant="bodySm" fontWeight="semibold">
+                  {formatValue(previousData.value)}
+                </Text>
+                <div className="opacity-0">
+                  <MetricPercentage change={formatPercent()} />
+                </div>
+              </InlineStack>
+            </InlineStack>
+          </BlockStack>
+        </BlockStack>
+      </Card>
+    </div>
+  );
+};

package/src/components/common/chart/MetricDonutChartSkeleton.tsx

@@ -0,0 +1,14 @@
+import { BlockStack, Card } from '@shopify/polaris';
+import { GChartSkeleton } from './GChartSkeleton';
+import { MetricInfoSkeleton } from './MetricInfoSkeleton';
+
+export const MetricDonutChartSkeleton = () => {
+  return (
+    <Card>
+      <BlockStack gap="400">
+        <MetricInfoSkeleton isShowOneLine />
+        <GChartSkeleton />
+      </BlockStack>
+    </Card>
+  );
+};

package/src/components/common/chart/MetricInfoBlock.tsx

@@ -0,0 +1,66 @@
+import type { TextProps } from '@shopify/polaris';
+import type { ReactElement } from 'react';
+import type { IMetricCardItem } from '../../../types';
+
+import { GTooltipCard } from '@/shared';
+import { BlockStack, Box, Icon, InlineStack, Text } from '@shopify/polaris';
+import { ChevronRightIcon } from '@shopify/polaris-icons';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../../constants';
+import { MetricInfoSkeleton } from './MetricInfoSkeleton';
+import { MetricValueSummary } from './MetricValueSummary';
+
+export interface IProps {
+  item: IMetricCardItem;
+  isHovered: boolean;
+  isLoading?: boolean;
+  hideComparison?: boolean;
+  titleVariant?: TextProps['variant'];
+  titleFontWeight?: TextProps['fontWeight'];
+  isMockData?: boolean;
+  onClickTitle?: (key: string) => void;
+}
+
+export const MetricInfoBlock = ({
+  item,
+  isHovered,
+  isLoading,
+  hideComparison,
+  titleVariant = 'headingMd',
+  titleFontWeight,
+  isMockData,
+  onClickTitle,
+}: IProps): ReactElement => {
+  const { key, title, totalValue } = item;
+  const tooltip = ANALYTICS_METRIC_TOOLTIP[key];
+
+  if (isLoading) return <MetricInfoSkeleton />;
+
+  return (
+    <BlockStack gap="200">
+      <div
+        className={isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]'}
+        onClick={(e) => {
+          if (isMockData) return;
+          e?.stopPropagation();
+          onClickTitle?.(key);
+        }}
+      >
+        <InlineStack wrap={false}>
+          <Box maxWidth="100%" overflowX="hidden">
+            <GTooltipCard tooltip={tooltip}>
+              <Text as="span" variant={titleVariant} fontWeight={titleFontWeight} truncate>
+                {title}
+              </Text>
+            </GTooltipCard>
+          </Box>
+          {isHovered && !isMockData && (
+            <div className="flex h-[20px] w-[20px] items-center">
+              <Icon source={ChevronRightIcon} tone="inherit" />
+            </div>
+          )}
+        </InlineStack>
+      </div>
+      <MetricValueSummary totalValue={totalValue} hideComparison={hideComparison} />
+    </BlockStack>
+  );
+};

package/src/components/common/chart/MetricInfoSkeleton.tsx

@@ -0,0 +1,25 @@
+import { SkeletonBodyText, BlockStack, Box } from '@shopify/polaris';
+
+export interface MetricInfoSkeletonProps {
+  isShowOneLine?: boolean;
+}
+export const MetricInfoSkeleton: React.FC<MetricInfoSkeletonProps> = ({ isShowOneLine }) => {
+  if (isShowOneLine) {
+    return (
+      <Box width="40%">
+        <SkeletonBodyText lines={1} />
+      </Box>
+    );
+  }
+
+  return (
+    <BlockStack gap="200">
+      <Box width="60%">
+        <SkeletonBodyText lines={1} />
+      </Box>
+      <Box width="40%">
+        <SkeletonBodyText lines={1} />
+      </Box>
+    </BlockStack>
+  );
+};

package/src/components/common/chart/MetricValueSummary.tsx

@@ -0,0 +1,23 @@
+import type { ReactElement } from 'react';
+import type { IMetricControl } from '../../../types';
+
+import { BlockStack, InlineStack, Text } from '@shopify/polaris';
+import { MetricPercentage } from '../percent';
+
+interface IProps {
+  totalValue: IMetricControl;
+  hideComparison?: boolean;
+}
+
+export const MetricValueSummary = ({ totalValue, hideComparison }: IProps): ReactElement => (
+  <BlockStack gap="200">
+    <InlineStack blockAlign="center" gap="200">
+      <InlineStack blockAlign="center" gap="200">
+        <Text as="span" variant="headingSm">
+          {totalValue.value}
+        </Text>
+      </InlineStack>
+      {!hideComparison && <MetricPercentage change={totalValue.change} />}
+    </InlineStack>
+  </BlockStack>
+);

package/src/components/common/chart/index.ts

@@ -0,0 +1,8 @@
+export { GChartSkeleton } from './GChartSkeleton';
+export { MetricChart } from './MetricChart';
+export { MetricChartEmpty } from './MetricChartEmpty';
+export { MetricChartTooltip } from './MetricChartTooltip';
+export { MetricDonutChartSkeleton } from './MetricDonutChartSkeleton';
+export { MetricInfoBlock } from './MetricInfoBlock';
+export { MetricInfoSkeleton } from './MetricInfoSkeleton';
+export { MetricValueSummary } from './MetricValueSummary';

package/src/components/common/icons/DownIcon8px.tsx

@@ -0,0 +1,14 @@
+export const DownIcon8px = () => {
+  return (
+    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_18114_1160)">
+        <path d="M1 1L6.5 6.5M6.5 6.5V1.5M6.5 6.5H1.5" stroke="#8A8A8A" strokeWidth="1.5" />
+      </g>
+      <defs>
+        <clipPath id="clip0_18114_1160">
+          <rect width="8" height="8" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/common/icons/UpIcon8px.tsx

@@ -0,0 +1,14 @@
+export const UpIcon8px = () => {
+  return (
+    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_18114_1146)">
+        <path d="M1 7L6.5 1.5M6.5 1.5H1.5M6.5 1.5V6.5" stroke="#29845A" strokeWidth="1.5" />
+      </g>
+      <defs>
+        <clipPath id="clip0_18114_1146">
+          <rect width="8" height="8" fill="white" transform="matrix(0 -1 1 0 0 8)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/common/icons/index.ts

@@ -0,0 +1,2 @@
+export { DownIcon8px } from './DownIcon8px';
+export { UpIcon8px } from './UpIcon8px';

package/src/components/common/percent/MetricPercentage.tsx

@@ -0,0 +1,42 @@
+import { InlineStack, Text } from '@shopify/polaris';
+import { formatPercentage } from '@/utils';
+import { DownIcon8px, UpIcon8px } from '../icons';
+import { TREND_TONE } from '@/constants';
+
+export interface MetricPercentageProps {
+  change: number | string;
+}
+
+export const MetricPercentage: React.FC<MetricPercentageProps> = ({ change }) => {
+  if (typeof change !== 'number') {
+    return <div style={{ height: '2px', width: '11px', backgroundColor: '#8A8A8A' }} />;
+  }
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxHeight: '20px',
+        width: 'fit-content',
+        alignItems: 'center',
+        gap: '4px',
+        borderRadius: '8px',
+        fontSize: '12px',
+        color: change > 0 ? TREND_TONE.POSITIVE : TREND_TONE.NEUTRAL,
+      }}
+    >
+      {change < 0 && (
+        <InlineStack align="center">
+          <DownIcon8px />
+        </InlineStack>
+      )}
+      {change > 0 && (
+        <InlineStack align="center">
+          <UpIcon8px />
+        </InlineStack>
+      )}
+      <Text as="span" variant="bodyXs" fontWeight="semibold">
+        {formatPercentage(Math.abs(change || 0))}
+      </Text>
+    </div>
+  );
+};

package/src/components/common/percent/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './GSelectableMetricChartCard';
+export * from './MetricDonutChartCard';
+export * from './SingleMetricChartCard';
+export * from './AnalyticMode';
+export * from './CurrencySelector';
+export * from './GTimePicker';
+export * from './CardPathAnalysis';
+export * from './OrderAnalytic';
+export * from './GModalOrderJourney';

package/src/constants/analytic-metric-tooltip.tsx

@@ -0,0 +1,164 @@
+import type { GTooltipCardData } from '@/shared';
+
+import { EMetricKey } from '../types/metric';
+
+type IMetricKeyValue = Record<EMetricKey, GTooltipCardData>;
+
+export const ANALYTICS_METRIC_TOOLTIP: IMetricKeyValue = {
+  [EMetricKey.SESSION]: {
+    title: 'Sessions',
+    content: 'A period during which a visitor interacts with your online store',
+  },
+  [EMetricKey.VISITORS]: {
+    title: 'Visitors',
+    content: 'Number of unique individuals who visit your online store',
+  },
+  [EMetricKey.BOUNCE_RATE]: {
+    title: 'Bounce rate',
+    content: 'Percentage of visitors who leave your store after viewing only one page, without interacting further',
+    formula: (
+      <>
+        <span className="formula-variable">Bounce rate</span>
+        <span> = </span>
+        <span className="formula-input">sessions with a pageview</span>
+        <span className="formula-operator"> / </span>
+        <span className="formula-input">total sessions</span>
+      </>
+    ),
+  },
+  [EMetricKey.CTR]: {
+    title: 'Click-through rate',
+    content: 'Percentage of clicks to open new page, compared to the number of times the page was viewed',
+    formula: (
+      <>
+        <span className="formula-variable">Click-through rate</span>
+        <span> = </span>
+        <span className="formula-input">total clicks</span>
+        <span className="formula-operator"> / </span>
+        <span className="formula-input">total pageviews</span>
+      </>
+    ),
+  },
+  [EMetricKey.AVG_TIME_ON_PAGE]: {
+    title: 'Average time on page',
+    content: 'Average duration that visitors spend on a page before clicking to open new page',
+    formula: (
+      <>
+        <span className="formula-variable">Average time on page</span>
+        <span> = </span>
+        <span className="formula-input">total time on page</span>
+        <span className="formula-operator"> / </span>
+        <span className="formula-input">(total pageviews - total exits)</span>
+      </>
+    ),
+  },
+  [EMetricKey.PAGE_VIEWS]: {
+    title: 'Pageviews',
+    content: 'Number of times a page on your online store has been viewed by visitors',
+  },
+  [EMetricKey.RPV]: {
+    title: 'Revenue per visitor',
+    content: 'Average revenue generated from each visitor',
+    formula: (
+      <>
+        <span className="formula-variable">Revenue per visitor</span>
+        <span> = </span>
+        <span className="formula-input">total revenue</span>
+        <span className="formula-operator"> / </span>
+        <span className="formula-input">total visitors</span>
+      </>
+    ),
+  },
+  [EMetricKey.ADDED_TO_CART]: {
+    title: 'Added to cart',
+    content: 'Total number of the event when a customer adds a product to their cart on your online store',
+  },
+  [EMetricKey.REACHED_CHECKOUT]: {
+    title: 'Sessions that reached checkout',
+    content: 'Sessions in your online store in which the checkout page was reached',
+  },
+  [EMetricKey.COMPLETE_CHECKOUT]: {
+    title: 'Sessions that completed checkout',
+    content: 'Sessions in your online store in which a purchase was completed',
+  },
+  [EMetricKey.ORDERS]: {
+    title: 'Orders',
+    content: 'Number of orders that went through this pages',
+  },
+  [EMetricKey.CONVERSION_RATE]: {
+    title: 'Conversion rate',
+    content: 'Percentage of online store sessions that completed an order',
+    formula: (
+      <>
+        <span className="formula-variable">Conversion rate</span>
+        <span> = </span>
+        <span className="formula-input">sessions that completed checkout</span>
+        <span className="formula-operator"> / </span>
+        <span className="formula-input">total sessions</span>
+      </>
+    ),
+  },
+  [EMetricKey.AOV]: {
+    title: 'Average order value',
+    content: 'Average value of orders placed in your online store',
+    formula: (
+      <>
+        <span className="formula-variable">Average order value</span>
+        <span> = </span>
+        <span className="formula-input">total revenue</span>
+        <span className="formula-operator"> / </span>
+        <span className="formula-input">total orders</span>
+      </>
+    ),
+  },
+  [EMetricKey.REVENUE]: {
+    title: 'Revenue',
+    content: 'Total income generated from sales after discounts',
+    formula: (
+      <>
+        <span className="formula-variable">Revenue</span>
+        <span> = </span>
+        <span className="formula-input">gross sales</span>
+        <span className="formula-operator"> - </span>
+        <span className="formula-input">discounts</span>
+      </>
+    ),
+  },
+  [EMetricKey.ADD_TO_CART_RATE]: {
+    title: 'Add to cart rate',
+    content: 'Percentage of sessions in which the customer added item to the cart',
+    formula: (
+      <>
+        <span className="formula-variable">Added to cart rate</span>
+        <span> = </span>
+        <span className="formula-input">sessions with cart additions</span>
+        <span className="formula-operator"> / </span>
+        <span className="formula-input">total sessions</span>
+      </>
+    ),
+  },
+  [EMetricKey.CART_ADDITION]: {
+    title: 'Sessions with cart additions',
+    content: 'Sessions in your online store in which a visitor added item to the cart',
+  },
+  [EMetricKey.VISITOR_ITEMS]: {
+    title: 'Sessions by visitor type',
+    content: '<p>Numbers of new and returning visitors</p>',
+    contentList: [
+      'New visitor: who accesses your store for the first time after GemX installation',
+      'Returning visitor: who comes back to your store after GemX installation',
+    ],
+  },
+  [EMetricKey.DEVICE_ITEMS]: {
+    title: 'Sessions by device type',
+    content: `Sessions in your online store by the visitor's device type`,
+  },
+  [EMetricKey.TRAFFIC_SOURCE_ITEMS]: {
+    title: 'Sessions by traffic source',
+    content: 'Sessions on your page by where visitors come from',
+  },
+  [EMetricKey.PAGE_PATH_ANALYSIS]: {
+    title: 'Journey analysis',
+    content: 'Journey analysis tracks the journey from entry to purchase and shows where visitors leave the store',
+  },
+};

package/src/constants/breakdown-targets.ts

@@ -0,0 +1,25 @@
+import type { IDonutTarget } from '@/types';
+
+import { EDeviceType, ETrafficSourceType, EVisitorType } from '@/types';
+
+export const TARGET_VISITOR: IDonutTarget<EVisitorType>[] = [
+  { value: EVisitorType.NEW, label: 'New' },
+  { value: EVisitorType.RETURNING, label: 'Returning' },
+];
+
+export const TARGET_DEVICES: IDonutTarget<EDeviceType>[] = [
+  { value: EDeviceType.DESKTOP, label: 'Desktop' },
+  { value: EDeviceType.TABLET, label: 'Tablet' },
+  { value: EDeviceType.MOBILE, label: 'Mobile' },
+];
+
+export const TARGET_CHANNEL: IDonutTarget<ETrafficSourceType>[] = [
+  { 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' },
+];

package/src/constants/campaign.ts

@@ -0,0 +1,4 @@
+export const CAMPAIGN_BACKGROUND_MAIN: Record<string, string> = {
+  ORIGIN: '#2C7DFF',
+  VARIANT: '#F34A70',
+};

package/src/constants/chart.ts

@@ -0,0 +1,17 @@
+export const DEFAULT_CURRENT_PERIOD_LABEL = 'Current';
+export const DEFAULT_PREVIOUS_PERIOD_LABEL = 'Previous';
+
+export const CHART_MIN_HEIGHT = 228;
+
+export const SERIES_COLORS = {
+  current: 'rgba(64, 176, 230, 1)',
+  comparison: 'rgba(161, 202, 231, 1)',
+  all: ['#2C7DFF', '#F34A70'],
+} as const;
+
+export const TREND_TONE = {
+  POSITIVE: '#007F5F',
+  NEUTRAL: '#4A4A4A',
+} as const;
+
+export const PLACEHOLDER_VALUE = '-';

package/src/constants/currency.ts

@@ -0,0 +1,3 @@
+import type { CurrencyCode } from '@/types';
+
+export const DEFAULT_CURRENCY_ANALYTIC: CurrencyCode = 'USD';

package/src/constants/index.ts

@@ -0,0 +1,6 @@
+export * from './analytic-metric-tooltip';
+export * from './breakdown-targets';
+export * from './campaign';
+export * from './chart';
+export * from './currency';
+export * from './thumbnail';

package/src/constants/thumbnail.ts

@@ -0,0 +1,3 @@
+import THUMB_PRODUCT_DEFAULT from '@/assets/svg/product.svg';
+
+export { THUMB_PRODUCT_DEFAULT };

package/src/core/gemxql/api/index.ts

@@ -0,0 +1,2 @@
+export * from './useCustomGemXQlQuery';
+export * from './useGemxQlNamedQuery';

package/src/core/gemxql/api/useCustomGemXQlQuery.ts

@@ -0,0 +1,35 @@
+import type { QueryKey, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import type { GemxQlQueryResponse, GemxQlQueryVariables } from '../graphql';
+
+import { useQuery } from '@tanstack/react-query';
+import { GemxQlDocument } from '../graphql';
+
+type GemXQlCustomFetcher<TData, TVariables> = (document: string, variables: TVariables) => () => Promise<TData>;
+
+export interface BaseHeaderResponse {
+  'x-cache'?: string;
+  'x-request-id'?: string;
+}
+
+export interface CustomGemXQlResponse extends GemxQlQueryResponse {
+  headers: BaseHeaderResponse;
+}
+
+type GemXQlQueryOptions<TData, TError> = Omit<
+  UseQueryOptions<CustomGemXQlResponse, TError, TData, QueryKey>,
+  'queryKey' | 'queryFn'
+>;
+
+export const useCustomGemXQlQuery = <TData = CustomGemXQlResponse, TError = unknown>(
+  variables: GemxQlQueryVariables,
+  fetcher: GemXQlCustomFetcher<CustomGemXQlResponse, GemxQlQueryVariables>,
+  options?: GemXQlQueryOptions<TData, TError>,
+): UseQueryResult<TData, TError> => {
+  return useQuery({
+    queryKey: ['GemXQlCustom', variables],
+    queryFn: fetcher(GemxQlDocument, variables),
+    ...(options as object),
+  } as UseQueryOptions<CustomGemXQlResponse, TError, TData, QueryKey>) as UseQueryResult<TData, TError>;
+};
+
+useCustomGemXQlQuery.getKey = (variables: GemxQlQueryVariables) => ['GemXQlCustom', variables];

package/src/core/gemxql/api/useGemxQlNamedQuery.ts

@@ -0,0 +1,34 @@
+import type { QueryKey, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import type { GemxQlQueryResponse, GemxQlQueryVariables } from '../graphql';
+
+import { useQuery } from '@tanstack/react-query';
+import { GemxQlDocument } from '../graphql';
+
+type GemXQlFetcher<TData, TVariables> = (document: string, variables: TVariables) => () => Promise<TData>;
+
+interface UseGemxQlNamedQueryParams {
+  name: string;
+  variables: GemxQlQueryVariables;
+  fetcher: GemXQlFetcher<GemxQlQueryResponse, GemxQlQueryVariables>;
+}
+
+type GemXQlNamedQueryOptions<TData, TError> = Omit<
+  UseQueryOptions<GemxQlQueryResponse, TError, TData, QueryKey>,
+  'queryKey' | 'queryFn'
+>;
+
+export const useGemxQlNamedQuery = <TData = GemxQlQueryResponse, TError = unknown>(
+  { name, variables, fetcher }: UseGemxQlNamedQueryParams,
+  options?: GemXQlNamedQueryOptions<TData, TError>,
+): UseQueryResult<TData, TError> => {
+  const document = GemxQlDocument.replace(/query\s+GemxQL\b/, `query ${name}`);
+
+  return useQuery({
+    queryKey: [name, variables],
+    queryFn: fetcher(document, variables),
+    retry: 0,
+    ...(options as object),
+  } as UseQueryOptions<GemxQlQueryResponse, TError, TData, QueryKey>) as UseQueryResult<TData, TError>;
+};
+
+useGemxQlNamedQuery.getKey = (name: string, variables: GemxQlQueryVariables) => [name, variables];