@eric-emg/symphiq-components 1.2.58 → 1.2.60

package/fesm2022/symphiq-components.mjs

@@ -1,4 +1,4 @@
-import { CompetitiveScoreEnum, ViewModeEnum, normalizeToV3, LineChartUseCaseEnum } from '@jebgem/model';
+import { CompetitiveScoreEnum, ViewModeEnum, normalizeToV3, MetricEnumUtil, LineChartUseCaseEnum } from '@jebgem/model';
 export * from '@jebgem/model';
 import * as i0 from '@angular/core';
 import { Injectable, signal, input, ChangeDetectionStrategy, Component, output, computed, inject, ElementRef, Renderer2, effect, Directive, HostListener, untracked, ViewChild } from '@angular/core';
@@ -193,35 +193,48 @@ class TooltipService {
         // Insight tooltips can be quite tall, so need more space
         const HORIZONTAL_THRESHOLD = 200;
         const VERTICAL_THRESHOLD = type === 'insight' ? 350 : 200;
-        // Get viewport dimensions - use scroll container if available, otherwise window
-        const viewportWidth = this.scrollContainer?.clientWidth || window.innerWidth;
-        const viewportHeight = this.scrollContainer?.clientHeight || window.innerHeight;
+        // 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;
         // Check left edge
-        if (position === 'left' && targetRect.left < HORIZONTAL_THRESHOLD) {
+        if (position === 'left' && spaceLeft < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'right';
         }
         // Check right edge
-        if (position === 'right' && (viewportWidth - targetRect.right) < HORIZONTAL_THRESHOLD) {
+        if (position === 'right' && spaceRight < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'left';
         }
         // Check top edge
-        if (position === 'top' && targetRect.top < VERTICAL_THRESHOLD) {
+        if (position === 'top' && spaceTop < VERTICAL_THRESHOLD) {
             adjustedPosition = 'bottom';
         }
         // Check bottom edge - prioritize flipping to top if not enough space
-        if (position === 'bottom' && (viewportHeight - targetRect.bottom) < VERTICAL_THRESHOLD) {
+        if (position === 'bottom' && spaceBelow < VERTICAL_THRESHOLD) {
             adjustedPosition = 'top';
         }
         // Smart auto-detection for 'top' position tooltips near bottom
         if (position === 'top') {
-            const spaceBelow = viewportHeight - targetRect.bottom;
-            const spaceAbove = targetRect.top;
             // If more space above and not enough space below, keep it on top
             // If more space below, switch to bottom
-            if (spaceBelow > spaceAbove && spaceBelow > VERTICAL_THRESHOLD) {
+            if (spaceBelow > spaceTop && spaceBelow > VERTICAL_THRESHOLD) {
                 adjustedPosition = 'bottom';
             }
-            else if (spaceAbove < VERTICAL_THRESHOLD && spaceBelow > VERTICAL_THRESHOLD) {
+            else if (spaceTop < VERTICAL_THRESHOLD && spaceBelow > VERTICAL_THRESHOLD) {
                 adjustedPosition = 'bottom';
             }
         }
@@ -11144,17 +11157,25 @@ class TooltipContainerComponent {
         const mousePos = this.mousePosition();
         const tooltipWidth = 384;
         const container = this.scrollContainer();
-        const viewportWidth = container?.clientWidth || window.innerWidth;
+        // 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);
+        }
         // Handle 'auto' positioning with mouse coordinates
         if (position === 'auto' && mousePos) {
             const halfWidth = tooltipWidth / 2;
             let leftPos = mousePos.x;
-            // Keep tooltip in viewport
-            if (leftPos - halfWidth < 10) {
-                leftPos = halfWidth + 10;
+            // Keep tooltip in bounds
+            if (leftPos - halfWidth < leftBound) {
+                leftPos = leftBound + halfWidth;
             }
-            else if (leftPos + halfWidth > viewportWidth - 10) {
-                leftPos = viewportWidth - halfWidth - 10;
+            else if (leftPos + halfWidth > rightBound) {
+                leftPos = rightBound - halfWidth;
             }
             return leftPos;
         }
@@ -11163,16 +11184,16 @@ class TooltipContainerComponent {
             case 'bottom': {
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
-                // Check if centered tooltip would go off screen
-                const wouldGoOffLeft = centerPosition - halfWidth < 10;
-                const wouldGoOffRight = centerPosition + halfWidth > viewportWidth - 10;
+                // Check if centered tooltip would go off bounds
+                const wouldGoOffLeft = centerPosition - halfWidth < leftBound;
+                const wouldGoOffRight = centerPosition + halfWidth > rightBound;
                 if (wouldGoOffLeft) {
-                    // Align to left edge with padding
-                    return 10;
+                    // Align to left bound
+                    return leftBound;
                 }
                 else if (wouldGoOffRight) {
-                    // Align to right edge with padding
-                    return viewportWidth - tooltipWidth - 10;
+                    // Align to right bound
+                    return rightBound - tooltipWidth;
                 }
                 else {
                     // Center normally (transform will be applied)
@@ -11181,17 +11202,25 @@ class TooltipContainerComponent {
             }
             case 'left': {
                 const leftPosition = rect.left - tooltipWidth - 8;
-                // If tooltip would go off left edge, position it to the right instead
-                if (leftPosition < 10) {
-                    return rect.right + 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;
                 }
                 return leftPosition;
             }
             case 'right': {
                 const rightPosition = rect.right + 8;
-                // If tooltip would go off right edge, position it to the left instead
-                if (rightPosition + tooltipWidth > viewportWidth - 10) {
-                    return rect.left - tooltipWidth - 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;
                 }
                 return rightPosition;
             }
@@ -11207,7 +11236,15 @@ class TooltipContainerComponent {
         const mousePos = this.mousePosition();
         const type = this.tooltipType();
         const container = this.scrollContainer();
-        const viewportHeight = container?.clientHeight || window.innerHeight;
+        // 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);
+        }
         // Estimate tooltip height based on type
         let estimatedHeight = 100;
         if (type === 'insight') {
@@ -11220,29 +11257,29 @@ class TooltipContainerComponent {
         if (position === 'auto' && mousePos) {
             const offset = 20; // Offset from mouse cursor
             let topPos = mousePos.y + offset;
-            // If tooltip would go off bottom of screen, position above cursor
-            if (topPos + estimatedHeight > viewportHeight - 10) {
+            // If tooltip would go off bottom, position above cursor
+            if (topPos + estimatedHeight > bottomBound) {
                 topPos = mousePos.y - estimatedHeight - offset;
             }
             // Ensure it doesn't go off top
-            if (topPos < 10) {
-                topPos = 10;
+            if (topPos < topBound) {
+                topPos = topBound;
             }
             return topPos;
         }
         switch (position) {
             case 'top': {
                 const topPosition = rect.top - estimatedHeight - 8;
-                // If tooltip would go off top of screen, position it below instead
-                if (topPosition < 10) {
+                // If tooltip would go off top bound, position it below instead
+                if (topPosition < topBound) {
                     return rect.bottom + 8;
                 }
                 return topPosition;
             }
             case 'bottom': {
                 const bottomPosition = rect.bottom + 8;
-                // If tooltip would go off bottom of screen, position it above instead
-                if (bottomPosition + estimatedHeight > viewportHeight - 10) {
+                // If tooltip would go off bottom bound, position it above instead
+                if (bottomPosition + estimatedHeight > bottomBound) {
                     return rect.top - estimatedHeight - 8;
                 }
                 return bottomPosition;
@@ -11250,9 +11287,9 @@ class TooltipContainerComponent {
             case 'left':
             case 'right': {
                 const centerPosition = rect.top + rect.height / 2 - estimatedHeight / 2;
-                // Keep within viewport
-                const maxTop = viewportHeight - estimatedHeight - 10;
-                return Math.max(10, Math.min(centerPosition, maxTop));
+                // Keep within bounds
+                const maxTop = bottomBound - estimatedHeight;
+                return Math.max(topBound, Math.min(centerPosition, maxTop));
             }
             default:
                 return rect.top - estimatedHeight - 8;
@@ -23866,18 +23903,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 MetricEnumUtil.title(metric.metric) || metric.metric || 'Metric';
     }
     formatMetricValue(metric) {
         const value = metric.currentValue || 0;
@@ -24222,7 +24248,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: 218 }); })();
 
 const _c0$3 = ["chartdiv"];
 class LineChartComponent {