@eric-emg/symphiq-components 1.2.59 → 1.2.61

package/fesm2022/symphiq-components.mjs

@@ -193,24 +193,11 @@ class TooltipService {
         // Insight tooltips can be quite tall, so need more space
         const HORIZONTAL_THRESHOLD = 200;
         const VERTICAL_THRESHOLD = type === 'insight' ? 350 : 200;
-        // Calculate effective boundaries
-        let leftBound = 0;
-        let rightBound = window.innerWidth;
-        let topBound = 0;
-        let bottomBound = window.innerHeight;
-        // If there's a scroll container, adjust boundaries relative to it
-        if (this.scrollContainer) {
-            const containerRect = this.scrollContainer.getBoundingClientRect();
-            leftBound = containerRect.left;
-            rightBound = containerRect.right;
-            topBound = containerRect.top;
-            bottomBound = containerRect.bottom;
-        }
-        // Calculate space available around target element
-        const spaceLeft = targetRect.left - leftBound;
-        const spaceRight = rightBound - targetRect.right;
-        const spaceTop = targetRect.top - topBound;
-        const spaceBelow = bottomBound - targetRect.bottom;
+        // Calculate space available around target element (using window bounds)
+        const spaceLeft = targetRect.left;
+        const spaceRight = window.innerWidth - targetRect.right;
+        const spaceTop = targetRect.top;
+        const spaceBelow = window.innerHeight - targetRect.bottom;
         // Check left edge
         if (position === 'left' && spaceLeft < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'right';
@@ -1027,6 +1014,35 @@ class ChartThemeService {
             }]
     }], null, null); })();
 
+class MetricFormatterService {
+    constructor() {
+        this.cache = new Map();
+    }
+    formatMetricName(name) {
+        if (!name)
+            return '';
+        if (!this.cache.has(name)) {
+            const formatted = name
+                .replace(/_/g, ' ')
+                .toLowerCase()
+                .replace(/\b\w/g, l => l.toUpperCase());
+            this.cache.set(name, formatted);
+        }
+        return this.cache.get(name);
+    }
+    clearCache() {
+        this.cache.clear();
+    }
+    static { this.ɵfac = function MetricFormatterService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricFormatterService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MetricFormatterService, factory: MetricFormatterService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetricFormatterService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, null); })();
+
 const _c0$b = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
 const _c1$3 = a0 => ["skeleton-shimmer-overlay", "absolute", "inset-0", "bg-gradient-to-r", a0];
 class SkeletonLoaderComponent {
@@ -11096,8 +11112,7 @@ class TooltipContainerComponent {
                 return true;
             const position = this.tooltipPosition();
             const tooltipWidth = 384;
-            const container = this.scrollContainer();
-            const viewportWidth = container?.clientWidth || window.innerWidth;
+            const padding = 10;
             // For 'auto' positioning, always center horizontally
             if (position === 'auto') {
                 return true;
@@ -11105,8 +11120,8 @@ class TooltipContainerComponent {
             if (position === 'top' || position === 'bottom') {
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
-                const wouldGoOffLeft = centerPosition - halfWidth < 10;
-                const wouldGoOffRight = centerPosition + halfWidth > viewportWidth - 10;
+                const wouldGoOffLeft = centerPosition - halfWidth < padding;
+                const wouldGoOffRight = centerPosition + halfWidth > window.innerWidth - padding;
                 return !wouldGoOffLeft && !wouldGoOffRight;
             }
             return false;
@@ -11156,26 +11171,17 @@ class TooltipContainerComponent {
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
         const tooltipWidth = 384;
-        const container = this.scrollContainer();
-        // Calculate effective viewport boundaries
-        let leftBound = 10;
-        let rightBound = window.innerWidth - 10;
-        // If there's a scroll container, constrain to its boundaries
-        if (container) {
-            const containerRect = container.getBoundingClientRect();
-            leftBound = Math.max(10, containerRect.left + 10);
-            rightBound = Math.min(window.innerWidth - 10, containerRect.right - 10);
-        }
+        const padding = 10;
         // Handle 'auto' positioning with mouse coordinates
         if (position === 'auto' && mousePos) {
             const halfWidth = tooltipWidth / 2;
             let leftPos = mousePos.x;
             // Keep tooltip in bounds
-            if (leftPos - halfWidth < leftBound) {
-                leftPos = leftBound + halfWidth;
+            if (leftPos - halfWidth < padding) {
+                leftPos = padding + halfWidth;
             }
-            else if (leftPos + halfWidth > rightBound) {
-                leftPos = rightBound - halfWidth;
+            else if (leftPos + halfWidth > window.innerWidth - padding) {
+                leftPos = window.innerWidth - padding - halfWidth;
             }
             return leftPos;
         }
@@ -11185,15 +11191,15 @@ class TooltipContainerComponent {
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
                 // Check if centered tooltip would go off bounds
-                const wouldGoOffLeft = centerPosition - halfWidth < leftBound;
-                const wouldGoOffRight = centerPosition + halfWidth > rightBound;
+                const wouldGoOffLeft = centerPosition - halfWidth < padding;
+                const wouldGoOffRight = centerPosition + halfWidth > window.innerWidth - padding;
                 if (wouldGoOffLeft) {
-                    // Align to left bound
-                    return leftBound;
+                    // Align to left edge with padding
+                    return padding + halfWidth;
                 }
                 else if (wouldGoOffRight) {
-                    // Align to right bound
-                    return rightBound - tooltipWidth;
+                    // Align to right edge with padding
+                    return window.innerWidth - padding - halfWidth;
                 }
                 else {
                     // Center normally (transform will be applied)
@@ -11202,25 +11208,17 @@ class TooltipContainerComponent {
             }
             case 'left': {
                 const leftPosition = rect.left - tooltipWidth - 8;
-                // If tooltip would go off left bound, position it to the right instead
-                if (leftPosition < leftBound) {
-                    const rightPosition = rect.right + 8;
-                    if (rightPosition + tooltipWidth > rightBound) {
-                        return leftBound;
-                    }
-                    return rightPosition;
+                // If tooltip would go off left edge, position it to the right instead
+                if (leftPosition < padding) {
+                    return rect.right + 8;
                 }
                 return leftPosition;
             }
             case 'right': {
                 const rightPosition = rect.right + 8;
-                // If tooltip would go off right bound, position it to the left instead
-                if (rightPosition + tooltipWidth > rightBound) {
-                    const leftPosition = rect.left - tooltipWidth - 8;
-                    if (leftPosition < leftBound) {
-                        return leftBound;
-                    }
-                    return leftPosition;
+                // If tooltip would go off right edge, position it to the left instead
+                if (rightPosition + tooltipWidth > window.innerWidth - padding) {
+                    return rect.left - tooltipWidth - 8;
                 }
                 return rightPosition;
             }
@@ -11235,16 +11233,7 @@ class TooltipContainerComponent {
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
         const type = this.tooltipType();
-        const container = this.scrollContainer();
-        // Calculate effective viewport boundaries
-        let topBound = 10;
-        let bottomBound = window.innerHeight - 10;
-        // If there's a scroll container, constrain to its boundaries
-        if (container) {
-            const containerRect = container.getBoundingClientRect();
-            topBound = Math.max(10, containerRect.top + 10);
-            bottomBound = Math.min(window.innerHeight - 10, containerRect.bottom - 10);
-        }
+        const padding = 10;
         // Estimate tooltip height based on type
         let estimatedHeight = 100;
         if (type === 'insight') {
@@ -11258,28 +11247,28 @@ class TooltipContainerComponent {
             const offset = 20; // Offset from mouse cursor
             let topPos = mousePos.y + offset;
             // If tooltip would go off bottom, position above cursor
-            if (topPos + estimatedHeight > bottomBound) {
+            if (topPos + estimatedHeight > window.innerHeight - padding) {
                 topPos = mousePos.y - estimatedHeight - offset;
             }
             // Ensure it doesn't go off top
-            if (topPos < topBound) {
-                topPos = topBound;
+            if (topPos < padding) {
+                topPos = padding;
             }
             return topPos;
         }
         switch (position) {
             case 'top': {
                 const topPosition = rect.top - estimatedHeight - 8;
-                // If tooltip would go off top bound, position it below instead
-                if (topPosition < topBound) {
+                // If tooltip would go off top edge, position it below instead
+                if (topPosition < padding) {
                     return rect.bottom + 8;
                 }
                 return topPosition;
             }
             case 'bottom': {
                 const bottomPosition = rect.bottom + 8;
-                // If tooltip would go off bottom bound, position it above instead
-                if (bottomPosition + estimatedHeight > bottomBound) {
+                // If tooltip would go off bottom edge, position it above instead
+                if (bottomPosition + estimatedHeight > window.innerHeight - padding) {
                     return rect.top - estimatedHeight - 8;
                 }
                 return bottomPosition;
@@ -11288,8 +11277,8 @@ class TooltipContainerComponent {
             case 'right': {
                 const centerPosition = rect.top + rect.height / 2 - estimatedHeight / 2;
                 // Keep within bounds
-                const maxTop = bottomBound - estimatedHeight;
-                return Math.max(topBound, Math.min(centerPosition, maxTop));
+                const maxTop = window.innerHeight - padding - estimatedHeight;
+                return Math.max(padding, Math.min(centerPosition, maxTop));
             }
             default:
                 return rect.top - estimatedHeight - 8;
@@ -23665,6 +23654,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
         this.tooltipDataService = inject(TooltipDataService);
         this.tooltipService = inject(TooltipService);
         this.competitiveScoreService = inject(CompetitiveScoreService);
+        this.metricFormatter = inject(MetricFormatterService);
         // Analysis data - use sample data if useSampleData is true, otherwise use provided data
         this.analysisData = computed(() => {
             if (this.useSampleData()) {
@@ -23903,18 +23893,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
         return getTrendClasses(trend, this.viewMode());
     }
     getMetricLabel(metric) {
-        const labels = {
-            'SESSIONS': 'Sessions',
-            'ACTIVE_USERS': 'Users',
-            'BOUNCE_RATE': 'Bounce Rate',
-            'PURCHASES': 'Purchases',
-            'ECOMMERCE_PURCHASES': 'Purchases',
-            'ADD_TO_CARTS': 'Add to Cart',
-            'CHECKOUTS': 'Checkouts',
-            'ECOMMERCE_CONVERSION_RATE': 'Conv Rate',
-            'AVERAGE_ORDER_VALUE': 'AOV'
-        };
-        return labels[metric.metric || ''] || metric.metric || 'Metric';
+        return this.metricFormatter.formatMetricName(metric.metric || '') || 'Metric';
     }
     formatMetricValue(metric) {
         const value = metric.currentValue || 0;
@@ -24259,7 +24238,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
     <symphiq-tooltip-container />
   `, styles: ["@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.6}}.status-pulse{animation:statusPulse 2s ease-in-out infinite}\n"] }]
     }], () => [], { analysisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], useSampleData: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSampleData", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], onViewAnalysis: [{ type: i0.Output, args: ["onViewAnalysis"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 216 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 217 }); })();
 
 const _c0$3 = ["chartdiv"];
 class LineChartComponent {
@@ -26282,5 +26261,5 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, ChartContainerComponent, ChartThemeService, CompetitivePositioningSummaryComponent, FUNNEL_ANALYSIS, FunnelOrderService, InsightCardComponent, LineChartComponent, MetricCardComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, OverallAssessmentComponent, PieChartComponent, SkeletonLoaderComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, getBadgeLabelClasses, getButtonClasses, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, isLightMode };
+export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, ChartContainerComponent, ChartThemeService, CompetitivePositioningSummaryComponent, FUNNEL_ANALYSIS, FunnelOrderService, InsightCardComponent, LineChartComponent, MetricCardComponent, MetricFormatterService, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, OverallAssessmentComponent, PieChartComponent, SkeletonLoaderComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, getBadgeLabelClasses, getButtonClasses, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, isLightMode };
 //# sourceMappingURL=symphiq-components.mjs.map