@levi-gemcommerce/analytics 0.0.1-dev.0

package/README.md

@@ -0,0 +1,37 @@
+# @gem-sdk/analytic
+
+GemX-specific analytic components, hooks, and types — extracted from `gemx-shopify-app`
+so they can be shared across repos (dev / staging apps, and future consumers).
+
+> Migration is **incremental, bottom-up**: pure types and helpers first, then leaf
+> presentational charts, then the orchestration components. We do **not** move the whole
+> feature at once — each slice is moved only after its dependencies already live here.
+
+## Status
+
+| Slice | Source in app | Status |
+| --- | --- | --- |
+| `types/chart` | `app/modules/page-analytic/modules/analytic/types/chart.ts` | ✅ migrated |
+
+## Extraction order (planned)
+
+1. **Pure types / helpers** — zero app coupling (`types/chart`, chart transform helpers).
+2. **Leaf charts** — depend only on `@shopify/polaris-viz` + the types above
+   (`PAFunnelChart`, `PALineChartTooltip`, `PAPercent`).
+3. **Shared foundations** — decide per dependency whether to extract, inject, or keep:
+   `~/types/metric`, `~/core/gemxql` types, design-system primitives.
+4. **Composite charts** — `PALineChart`, `PACardLineChart`, `PADonutChart`, grids.
+5. **Orchestration** — `PageAnalyticDetail` and providers (last; depends on everything).
+
+## Consuming from the app
+
+The app consumes published dev versions (e.g. `"@gem-sdk/analytic": "0.0.1-dev.x"`),
+the same way it consumes `@gem-sdk/heatmap-react`. After migrating a slice:
+
+```
+yarn build && yarn changeset   # publish a dev version
+# then bump the version in the app's package.json and rewire imports
+```
+
+`@shopify/polaris-viz`, `@shopify/polaris-viz-core`, `react` and `react-dom` are
+**peerDependencies** — provided by the consuming app, never bundled.

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

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+import type { AllChartsDataMap, IMetricCardItem } from '../../types';
+export interface IProps {
+    data: IMetricCardItem[];
+    dataChart: AllChartsDataMap;
+    defaultActiveTab?: string;
+    isLoading?: boolean;
+    isEmptyMetricData?: boolean;
+    hideComparison?: boolean;
+    currentPeriodLabel?: string;
+    previousPeriodLabel?: string;
+    onclickMetric?: (key: string) => void;
+}
+export declare const GMultipleMetricChartCard: ({ data, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel, previousPeriodLabel, }: IProps) => ReactElement;

package/dist/esm/components/GMultipleMetricChartCard/MetricCard.d.ts

@@ -0,0 +1,10 @@
+import type { IMetricCardItem } from '../../types';
+import type { ReactElement } from 'react';
+export interface IProps {
+    item: IMetricCardItem;
+    isActive: boolean;
+    isLoading?: boolean;
+    hideComparison?: boolean;
+    onSelect: (key: string) => void;
+}
+export declare const MetricCard: ({ item, isActive, isLoading, hideComparison, onSelect }: IProps) => ReactElement;

package/dist/esm/components/GMultipleMetricChartCard/MetricChart.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import type { AllChartsDataMap } from '../../types';
+export interface IProps {
+    activeTab?: string;
+    dataChart: AllChartsDataMap;
+    isLoading?: boolean;
+    isEmptyMetricData?: boolean;
+    hideComparison?: boolean;
+    currentPeriodLabel: string;
+    previousPeriodLabel: string;
+}
+export declare const MetricChart: ({ activeTab, dataChart, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel, previousPeriodLabel, }: IProps) => ReactElement;

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

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

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

@@ -0,0 +1,14 @@
+import type { AllChartsDataMap, IMetricCardItem } from '../../types';
+import type { ReactElement } from 'react';
+export interface IProps {
+    metricInfo: IMetricCardItem[];
+    dataChart: AllChartsDataMap;
+    defaultActiveTab?: string;
+    isLoading?: boolean;
+    isEmptyMetricData?: boolean;
+    hideComparison?: boolean;
+    currentPeriodLabel?: string;
+    previousPeriodLabel?: string;
+    onclickMetric?: (key: string) => void;
+}
+export declare const GSelectableMetricChartCard: ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel, previousPeriodLabel, }: IProps) => ReactElement;

package/dist/esm/components/GSelectableMetricChartCard/MetricCard.d.ts

@@ -0,0 +1,10 @@
+import type { IMetricCardItem } from '../../types';
+import type { ReactElement } from 'react';
+export interface IProps {
+    item: IMetricCardItem;
+    isActive: boolean;
+    isLoading?: boolean;
+    hideComparison?: boolean;
+    onSelect: (key: string) => void;
+}
+export declare const MetricCard: ({ item, isActive, isLoading, hideComparison, onSelect }: IProps) => ReactElement;

package/dist/esm/components/GSelectableMetricChartCard/MetricChart.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import type { AllChartsDataMap } from '../../types';
+export interface IProps {
+    activeTab?: string;
+    dataChart: AllChartsDataMap;
+    isLoading?: boolean;
+    isEmptyMetricData?: boolean;
+    hideComparison?: boolean;
+    currentPeriodLabel: string;
+    previousPeriodLabel: string;
+}
+export declare const MetricChart: ({ activeTab, dataChart, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel, previousPeriodLabel, }: IProps) => ReactElement;

package/dist/esm/components/GSelectableMetricChartCard/MetricChartTab.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+import type { IMetricCardItem } from '../../types';
+export interface IProps {
+    item: IMetricCardItem;
+    isActive: boolean;
+    isLoading?: boolean;
+    hideComparison?: boolean;
+    onSelect: (key: string) => void;
+    onClickTitle?: (key: string) => void;
+}
+export declare const MetricChartTab: ({ item, isActive, isLoading, hideComparison, onSelect, onClickTitle, }: IProps) => ReactElement;

package/dist/esm/components/GSelectableMetricChartCard/MetricChartTabs.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+import type { IMetricCardItem } from '../../types';
+export interface IProps {
+    item: IMetricCardItem;
+    isActive: boolean;
+    isLoading?: boolean;
+    hideComparison?: boolean;
+    onSelect: (key: string) => void;
+    onClickTitle?: (key: string) => void;
+}
+export declare const MetricChartTabs: ({ item, isActive, isLoading, hideComparison, onSelect, onClickTitle, }: IProps) => ReactElement;

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

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

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

@@ -0,0 +1,32 @@
+import type { BoxProps } from '@shopify/polaris';
+type CloseTarget = 'activator' | 'next-node';
+export interface PopoverPublicAPI {
+    forceUpdatePosition(): void;
+    close(target?: CloseTarget): void;
+}
+export interface GTooltipCardPublicAPI {
+    onClose(): void;
+}
+type Width = 'default' | 'wide' | 'large';
+export interface GTooltipCardData {
+    title: string;
+    content: string | TrustedHTML;
+    formula?: React.ReactNode;
+    contentList?: string[];
+    width?: Width;
+}
+export interface IProps {
+    children: React.ReactNode;
+    delay?: number;
+    tooltip?: GTooltipCardData;
+    activatorProps?: BoxProps;
+    wrapper?: 'span' | 'div';
+    isHideBorder?: boolean;
+    alignment?: 'start' | 'center' | 'end';
+    textDecoration?: 'underline' | 'none';
+    preferredAlignment?: 'left' | 'center' | 'right';
+    popoverRef?: React.RefObject<PopoverPublicAPI>;
+    showArrow?: boolean;
+}
+export declare const GTooltipCard: import("react").ForwardRefExoticComponent<IProps & import("react").RefAttributes<GTooltipCardPublicAPI>>;
+export {};

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

@@ -0,0 +1,2 @@
+export { GTooltipCard } from './GTooltipCard';
+export type { GTooltipCardData, GTooltipCardPublicAPI, IProps as IGTooltipCardProps, PopoverPublicAPI, } from './GTooltipCard';

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

@@ -0,0 +1,7 @@
+import { type ReactElement } from 'react';
+export interface IProps {
+    label: string;
+    value: string;
+    changePercent?: number;
+}
+export declare const PATrendBadge: ({ label, value, changePercent }: IProps) => ReactElement;

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

@@ -0,0 +1 @@
+export * from './PATrendBadge';

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

@@ -0,0 +1,12 @@
+import type { DataSeries } from '@shopify/polaris-viz-core';
+import type { ReactElement } from 'react';
+import type { IMetricCardItem } from '../../types';
+export interface IProps {
+    metricInfo: IMetricCardItem;
+    isLoading?: boolean;
+    hideComparison?: boolean;
+    isEmptyMetricData?: boolean;
+    lineChartData: DataSeries[];
+    onClickTitle?: (key: string) => void;
+}
+export declare const SingleMetricChartCard: ({ metricInfo, lineChartData, isLoading, hideComparison, isEmptyMetricData, onClickTitle, }: IProps) => ReactElement;

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import type { DataSeries } from '@shopify/polaris-viz';
+import type { ReactElement } from 'react';
+export interface IProps {
+    lineChartData: DataSeries[];
+    isLoading?: boolean;
+    isEmptyMetricData?: boolean;
+}
+export declare const MetricChart: ({ lineChartData, isLoading, isEmptyMetricData }: IProps) => ReactElement;

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

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

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

@@ -0,0 +1,6 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface IProps {
+    children: ReactNode;
+    minHeight?: number;
+}
+export declare const MetricChartProvider: ({ children, minHeight }: IProps) => ReactElement;

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+export interface IProps {
+    change: number | string;
+}
+export declare const MetricTrend: ({ change }: IProps) => ReactElement;

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

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

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

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

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

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

package/dist/esm/components/common/icons/DownIcon8px.d.ts

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

package/dist/esm/components/common/icons/UpIcon8px.d.ts

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

package/dist/esm/components/common/icons/index.d.ts

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

package/dist/esm/components/common/percent/MetricPercentage.d.ts

@@ -0,0 +1,4 @@
+export interface MetricPercentageProps {
+    change: number | string;
+}
+export declare const MetricPercentage: React.FC<MetricPercentageProps>;

package/dist/esm/components/common/percent/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './GSelectableMetricChartCard';
+export * from './SingleMetricChartCard';

package/dist/esm/constants/analytic-metric-tooltip.d.ts

@@ -0,0 +1,5 @@
+import type { GTooltipCardData } from '../shared';
+import { EMetricKey } from '../types/metric';
+type IMetricKeyValue = Record<EMetricKey, GTooltipCardData>;
+export declare const ANALYTICS_METRIC_TOOLTIP: IMetricKeyValue;
+export {};

package/dist/esm/constants/chart.d.ts

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

package/dist/esm/constants/g-multiple-metric-chart-card.d.ts

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

package/dist/esm/constants/g-selectable-metric-chart-card.d.ts

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

package/dist/esm/constants/index.d.ts

@@ -0,0 +1,3 @@
+export * from './analytic-metric-tooltip';
+export * from './chart';
+export * from './thumbnail';

package/dist/esm/constants/pa-trend-badge.d.ts

@@ -0,0 +1,9 @@
+export declare const TREND_DIRECTION: {
+    readonly UP: "up";
+    readonly DOWN: "down";
+    readonly NEUTRAL: "neutral";
+};
+export type ITrendDirection = (typeof TREND_DIRECTION)[keyof typeof TREND_DIRECTION];
+export declare const TREND_COLOR: Record<ITrendDirection, string>;
+export declare const TREND_SYMBOL: Record<ITrendDirection, string>;
+export declare const PERCENT_DECIMALS = 2;

package/dist/esm/constants/thumbnail.d.ts

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

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';