@eric-emg/symphiq-components 1.2.89 → 1.2.90

package/fesm2022/symphiq-components.mjs

@@ -2556,14 +2556,15 @@ function OverallAssessmentComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r0.isLightMode());
 } }
 function OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48)(1, "span", 52);
+    i0.ɵɵelementStart(0, "div", 56)(1, "span", 52);
     i0.ɵɵtext(2, "2025 Pacing: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 54);
+    i0.ɵɵelementStart(3, "span", 55);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("libSymphiqTooltip", ctx_r0.revenueStatusTooltip())("tooltipPosition", "top");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.badgeLabelClass());
     i0.ɵɵadvance(2);
@@ -2597,15 +2598,15 @@ function OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_T
     i0.ɵɵtext(18, "vs last year");
     i0.ɵɵelementEnd()();
     i0.ɵɵelement(19, "div", 53);
-    i0.ɵɵelementStart(20, "div")(21, "span", 52);
+    i0.ɵɵelementStart(20, "div", 54)(21, "span", 52);
     i0.ɵɵtext(22, "Target: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 54);
+    i0.ɵɵelementStart(23, "span", 55);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(25, OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_Conditional_25_Template, 5, 5, "div", 48);
+    i0.ɵɵconditionalCreate(25, OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_Conditional_25_Template, 5, 7, "div", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 55)(27, "span", 19);
+    i0.ɵɵelementStart(26, "div", 57)(27, "span", 19);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(29, "span");
@@ -2625,7 +2626,9 @@ function OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_T
     i0.ɵɵproperty("libSymphiqTooltip", ctx_r0.revenueTooltip())("tooltipPosition", "bottom");
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formattedRevenueValue(), " ");
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("libSymphiqTooltip", ctx_r0.revenueTrendTooltip())("tooltipPosition", "top");
+    i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.trendIconClass());
     i0.ɵɵadvance(2);
     i0.ɵɵclassMap(ctx_r0.trendValueClass());
@@ -2633,7 +2636,9 @@ function OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_T
     i0.ɵɵtextInterpolate1("", ctx_r0.formattedRevenueTrend(), "%");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.badgeLabelClass());
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("libSymphiqTooltip", ctx_r0.revenueStatusTooltip())("tooltipPosition", "top");
+    i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.badgeLabelClass());
     i0.ɵɵadvance(2);
     i0.ɵɵclassMap(ctx_r0.titleClass());
@@ -2651,7 +2656,7 @@ function OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_T
 } }
 function OverallAssessmentComponent_Conditional_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵconditionalCreate(1, OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_Template, 31, 33, "div", 36);
+    i0.ɵɵconditionalCreate(1, OverallAssessmentComponent_Conditional_1_Conditional_21_Conditional_1_Template, 31, 37, "div", 36);
     i0.ɵɵelementStart(2, "div", 37)(3, "p", 38);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
@@ -2667,14 +2672,15 @@ function OverallAssessmentComponent_Conditional_1_Conditional_21_Template(rf, ct
     i0.ɵɵtextInterpolate(ctx_r0.assessment().narrative);
 } }
 function OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48)(1, "span", 64);
+    i0.ɵɵelementStart(0, "div", 56)(1, "span", 66);
     i0.ɵɵtext(2, "2025 Pacing: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 65);
+    i0.ɵɵelementStart(3, "span", 67);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("libSymphiqTooltip", ctx_r0.revenueStatusTooltip())("tooltipPosition", "top");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.badgeLabelClass());
     i0.ɵɵadvance(2);
@@ -2683,7 +2689,7 @@ function OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_C
     i0.ɵɵtextInterpolate(ctx_r0.formattedRevenuePacing());
 } }
 function OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59)(2, "div", 60)(3, "div", 26)(4, "div", 40);
+    i0.ɵɵelementStart(0, "div", 60)(1, "div", 61)(2, "div", 62)(3, "div", 26)(4, "div", 40);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(5, "svg", 41);
     i0.ɵɵelement(6, "path", 42);
@@ -2695,37 +2701,37 @@ function OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_T
     i0.ɵɵelementStart(10, "p", 45);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 61)(13, "div", 47)(14, "div", 48);
+    i0.ɵɵelementStart(12, "div", 63)(13, "div", 47)(14, "div", 48);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(15, "svg", 62);
+    i0.ɵɵelementStart(15, "svg", 64);
     i0.ɵɵelement(16, "path", 50);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(17, "span", 63);
+    i0.ɵɵelementStart(17, "span", 65);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 64);
+    i0.ɵɵelementStart(19, "span", 66);
     i0.ɵɵtext(20, "vs last year");
     i0.ɵɵelementEnd()();
     i0.ɵɵelement(21, "div", 53);
-    i0.ɵɵelementStart(22, "div")(23, "span", 64);
+    i0.ɵɵelementStart(22, "div", 54)(23, "span", 66);
     i0.ɵɵtext(24, "Target: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "span", 65);
+    i0.ɵɵelementStart(25, "span", 67);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(27, OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_Conditional_27_Template, 5, 5, "div", 48);
+    i0.ɵɵconditionalCreate(27, OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_Conditional_27_Template, 5, 7, "div", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(28, "div", 66)(29, "div", 17);
+    i0.ɵɵelementStart(28, "div", 68)(29, "div", 17);
     i0.ɵɵtext(30, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "div", 67)(32, "span", 19);
+    i0.ɵɵelementStart(31, "div", 69)(32, "span", 19);
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(34, "span");
     i0.ɵɵtext(35);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(36, "div", 68);
+    i0.ɵɵelementStart(36, "div", 70);
     i0.ɵɵtext(37);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -2742,7 +2748,9 @@ function OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_T
     i0.ɵɵproperty("libSymphiqTooltip", ctx_r0.revenueTooltip())("tooltipPosition", "bottom");
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formattedRevenueValue(), " ");
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("libSymphiqTooltip", ctx_r0.revenueTrendTooltip())("tooltipPosition", "top");
+    i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.trendIconClass());
     i0.ɵɵadvance(2);
     i0.ɵɵclassMap(ctx_r0.trendValueClass());
@@ -2750,7 +2758,9 @@ function OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_T
     i0.ɵɵtextInterpolate1("", ctx_r0.formattedRevenueTrend(), "%");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.badgeLabelClass());
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("libSymphiqTooltip", ctx_r0.revenueStatusTooltip())("tooltipPosition", "top");
+    i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.badgeLabelClass());
     i0.ɵɵadvance(2);
     i0.ɵɵclassMap(ctx_r0.titleClass());
@@ -2773,8 +2783,8 @@ function OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_T
     i0.ɵɵtextInterpolate(ctx_r0.revenueMetric().description);
 } }
 function OverallAssessmentComponent_Conditional_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_Template, 38, 36, "div", 56);
-    i0.ɵɵelementStart(1, "div", 57)(2, "p", 38);
+    i0.ɵɵconditionalCreate(0, OverallAssessmentComponent_Conditional_1_Conditional_22_Conditional_0_Template, 38, 40, "div", 58);
+    i0.ɵɵelementStart(1, "div", 59)(2, "p", 38);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2789,7 +2799,7 @@ function OverallAssessmentComponent_Conditional_1_Conditional_22_Template(rf, ct
 } }
 function OverallAssessmentComponent_Conditional_1_Conditional_23_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-chart-container", 71);
+    i0.ɵɵelementStart(0, "symphiq-chart-container", 73);
     i0.ɵɵlistener("chartClick", function OverallAssessmentComponent_Conditional_1_Conditional_23_For_3_Template_symphiq_chart_container_chartClick_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openChartModal($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -2798,8 +2808,8 @@ function OverallAssessmentComponent_Conditional_1_Conditional_23_For_3_Template(
     i0.ɵɵproperty("chart", chart_r3)("isLightMode", ctx_r0.isLightMode())("isCompactMode", ctx_r0.isCompactMode())("collapsibleIn", "compact")("isLoading", ctx_r0.isChartsLoading());
 } }
 function OverallAssessmentComponent_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "div", 69);
-    i0.ɵɵrepeaterCreate(2, OverallAssessmentComponent_Conditional_1_Conditional_23_For_3_Template, 1, 5, "symphiq-chart-container", 70, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 71);
+    i0.ɵɵrepeaterCreate(2, OverallAssessmentComponent_Conditional_1_Conditional_23_For_3_Template, 1, 5, "symphiq-chart-container", 72, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -2808,7 +2818,7 @@ function OverallAssessmentComponent_Conditional_1_Conditional_23_Template(rf, ct
 } }
 function OverallAssessmentComponent_Conditional_1_Conditional_61_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "symphiq-competitive-positioning-summary", 72);
+    i0.ɵɵelementStart(0, "div", 35)(1, "symphiq-competitive-positioning-summary", 74);
     i0.ɵɵlistener("scrollToCompetitive", function OverallAssessmentComponent_Conditional_1_Conditional_61_Template_symphiq_competitive_positioning_summary_scrollToCompetitive_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.scrollToCompetitiveSection()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -3140,22 +3150,26 @@ class OverallAssessmentComponent {
         }, ...(ngDevMode ? [{ debugName: "revenueTooltip" }] : []));
         this.revenueStatusTooltip = computed(() => {
             const metric = this.revenueMetric();
-            return {
-                title: 'STATUS',
-                status: metric?.status || 'ON_TRACK',
-                description: metric?.description || ''
-            };
+            if (!metric)
+                return undefined;
+            return this.tooltipDataService.extractStatusTooltipData(metric);
         }, ...(ngDevMode ? [{ debugName: "revenueStatusTooltip" }] : []));
         this.statusBadgeTooltip = computed(() => ({
             status: this.assessment().overallStatus || 'ON_TRACK',
-            pacingPercentage: this.calculateOverallPacing(),
-            progressPercent: this.calculateOverallPacing()
+            description: this.assessment().overallStatusDescription
         }), ...(ngDevMode ? [{ debugName: "statusBadgeTooltip" }] : []));
         this.gradeTooltip = computed(() => ({
             title: 'Performance Grade',
             grade: this.assessment().grade || 'B',
-            explanation: this.getGradeExplanation()
+            explanation: this.assessment().gradeDescription || this.getGradeExplanation()
         }), ...(ngDevMode ? [{ debugName: "gradeTooltip" }] : []));
+        this.revenueTrendTooltip = computed(() => {
+            const metric = this.revenueMetric();
+            if (!metric)
+                return undefined;
+            const chart = this.charts().find(c => c.title?.includes('Revenue'));
+            return this.tooltipDataService.extractTrendTooltipData(metric, chart);
+        }, ...(ngDevMode ? [{ debugName: "revenueTrendTooltip" }] : []));
     }
     openChartModal(chart) {
         this.modalService.openChartModal(chart);
@@ -3352,7 +3366,7 @@ class OverallAssessmentComponent {
         }
     }
     static { this.ɵfac = function OverallAssessmentComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OverallAssessmentComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverallAssessmentComponent, selectors: [["symphiq-funnel-analysis-overall-assessment"]], inputs: { assessment: [1, "assessment"], revenueMetric: [1, "revenueMetric"], charts: [1, "charts"], metrics: [1, "metrics"], isLightMode: [1, "isLightMode"], isLoading: [1, "isLoading"], isCompactMode: [1, "isCompactMode"], isChartsLoading: [1, "isChartsLoading"] }, outputs: { scrollToSection: "scrollToSection" }, decls: 2, vars: 1, consts: [[1, "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "shadow-xl", "backdrop-blur-lg", 3, "class"], [1, "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "shadow-xl", "transition-all", "duration-500", "hover:shadow-2xl", "group", "backdrop-blur-lg", 3, "class"], [1, "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "shadow-xl", "backdrop-blur-lg"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1", "space-y-3"], [3, "width", "height", "isLightMode"], [1, "flex", "gap-3"], [1, "grid", "grid-cols-2", "gap-4"], [1, "space-y-2"], [1, "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "shadow-xl", "transition-all", "duration-500", "hover:shadow-2xl", "group", "backdrop-blur-lg"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "justify-between", "gap-4", "mb-4", "sm:mb-6"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2"], [1, "text-sm", "sm:text-base"], [1, "flex", "items-center", "gap-3", "sm:gap-4", "w-full", "sm:w-auto"], ["tooltipType", "status", 1, "text-center", "flex-1", "sm:flex-initial", "transition-all", "duration-300", "hover:scale-105", 3, "ngStyle", "libSymphiqTooltip", "tooltipPosition"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1"], [1, "text-base", "sm:text-lg", "font-bold", "flex", "items-center", "justify-center", "gap-2"], [1, "text-lg"], ["tooltipType", "badge", 1, "flex-1", "sm:flex-initial", "transition-all", "duration-300", "hover:scale-110", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "text-3xl", "sm:text-4xl", "font-bold"], [1, "flex", "flex-wrap", "gap-4", "mb-6", "sm:mb-8"], [1, "mb-4", "sm:mb-6"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", "sm:gap-6"], [1, "rounded-xl", "p-4", "sm:p-6", "border", "transition-all", "duration-300", "hover:scale-105", "hover:shadow-xl"], [1, "flex", "items-center", "gap-3", "mb-3"], [1, "w-8", "h-8", "sm:w-10", "sm:h-10", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "sm:w-6", "sm:h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-base", "sm:text-lg", "font-semibold"], [1, "text-xs", "sm:text-sm", "leading-relaxed"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"], [1, "mt-6", "sm:mt-8"], [1, "flex-shrink-0", "rounded-xl", "p-6", "sm:p-8", "border-2", "transition-all", "duration-500", "hover:scale-[1.01]", 3, "class"], [1, "flex-1", "min-w-[300px]", "rounded-xl", "p-4", "sm:p-6", "border", "transition-all", "duration-300", "hover:shadow-xl", "hover:scale-[1.01]", "group"], [1, "text-sm", "sm:text-base", "leading-relaxed"], [1, "flex-shrink-0", "rounded-xl", "p-6", "sm:p-8", "border-2", "transition-all", "duration-500", "hover:scale-[1.01]"], [1, "w-10", "h-10", "sm:w-12", "sm:h-12", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "sm:w-7", "sm:h-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "min-w-0", "flex-1"], [1, "text-xs", "sm:text-sm", "font-semibold", "uppercase", "tracking-wider"], ["tooltipType", "metric", 1, "text-2xl", "sm:text-3xl", "lg:text-4xl", "font-bold", "truncate", "transition-all", "duration-300", "hover:scale-105", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "flex-col", "gap-2", "mb-3"], [1, "flex", "flex-col", "sm:flex-row", "sm:items-center", "gap-2", "sm:gap-4"], [1, "flex", "items-center", "gap-2"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4", "flex-shrink-0"], ["fill-rule", "evenodd", "d", "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z", "clip-rule", "evenodd"], [1, "font-semibold", "text-base"], [1, "text-xs"], [1, "hidden", "sm:block", "h-6", "w-px", "bg-slate-600"], [1, "font-semibold", "text-sm"], ["tooltipType", "status", 1, "inline-flex", "items-center", "gap-2", "px-3", "sm:px-4", "py-1.5", "sm:py-2", "rounded-lg", "font-bold", "text-base", "sm:text-lg", "transition-all", "duration-300", 3, "ngStyle", "libSymphiqTooltip", "tooltipPosition"], [1, "rounded-xl", "p-6", "sm:p-8", "mb-6", "sm:mb-8", "border-2", "transition-all", "duration-500", "hover:scale-[1.01]", 3, "class"], [1, "rounded-xl", "p-4", "sm:p-6", "mb-4", "sm:mb-6", "border", "transition-all", "duration-300", "hover:shadow-xl", "hover:scale-[1.01]", "group"], [1, "rounded-xl", "p-6", "sm:p-8", "mb-6", "sm:mb-8", "border-2", "transition-all", "duration-500", "hover:scale-[1.01]"], [1, "flex", "flex-col", "md:flex-row", "items-start", "md:items-center", "gap-4", "md:gap-0"], [1, "flex-1", "w-full"], [1, "flex", "flex-col", "gap-2", "mt-4"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4", "sm:w-5", "sm:h-5", "flex-shrink-0"], [1, "font-semibold", "text-base", "sm:text-lg"], [1, "text-xs", "sm:text-sm"], [1, "font-semibold", "text-sm", "sm:text-base"], [1, "w-full", "md:w-auto", "md:text-right", "md:ml-4"], [1, "inline-flex", "items-center", "gap-2", "px-3", "sm:px-4", "py-1.5", "sm:py-2", "rounded-lg", "font-bold", "text-base", "sm:text-lg", "transition-all", "duration-300", 3, "ngStyle"], [1, "mt-2", "text-xs", "sm:text-sm"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-4"], [3, "chart", "isLightMode", "isCompactMode", "collapsibleIn", "isLoading"], [3, "chartClick", "chart", "isLightMode", "isCompactMode", "collapsibleIn", "isLoading"], [3, "scrollToCompetitive", "metrics", "isLightMode", "isCompactMode"]], template: function OverallAssessmentComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverallAssessmentComponent, selectors: [["symphiq-funnel-analysis-overall-assessment"]], inputs: { assessment: [1, "assessment"], revenueMetric: [1, "revenueMetric"], charts: [1, "charts"], metrics: [1, "metrics"], isLightMode: [1, "isLightMode"], isLoading: [1, "isLoading"], isCompactMode: [1, "isCompactMode"], isChartsLoading: [1, "isChartsLoading"] }, outputs: { scrollToSection: "scrollToSection" }, decls: 2, vars: 1, consts: [[1, "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "shadow-xl", "backdrop-blur-lg", 3, "class"], [1, "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "shadow-xl", "transition-all", "duration-500", "hover:shadow-2xl", "group", "backdrop-blur-lg", 3, "class"], [1, "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "shadow-xl", "backdrop-blur-lg"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1", "space-y-3"], [3, "width", "height", "isLightMode"], [1, "flex", "gap-3"], [1, "grid", "grid-cols-2", "gap-4"], [1, "space-y-2"], [1, "rounded-2xl", "p-4", "sm:p-6", "lg:p-8", "border", "shadow-xl", "transition-all", "duration-500", "hover:shadow-2xl", "group", "backdrop-blur-lg"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "justify-between", "gap-4", "mb-4", "sm:mb-6"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2"], [1, "text-sm", "sm:text-base"], [1, "flex", "items-center", "gap-3", "sm:gap-4", "w-full", "sm:w-auto"], ["tooltipType", "status", 1, "text-center", "flex-1", "sm:flex-initial", "transition-all", "duration-300", "hover:scale-105", 3, "ngStyle", "libSymphiqTooltip", "tooltipPosition"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1"], [1, "text-base", "sm:text-lg", "font-bold", "flex", "items-center", "justify-center", "gap-2"], [1, "text-lg"], ["tooltipType", "badge", 1, "flex-1", "sm:flex-initial", "transition-all", "duration-300", "hover:scale-110", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "text-3xl", "sm:text-4xl", "font-bold"], [1, "flex", "flex-wrap", "gap-4", "mb-6", "sm:mb-8"], [1, "mb-4", "sm:mb-6"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", "sm:gap-6"], [1, "rounded-xl", "p-4", "sm:p-6", "border", "transition-all", "duration-300", "hover:scale-105", "hover:shadow-xl"], [1, "flex", "items-center", "gap-3", "mb-3"], [1, "w-8", "h-8", "sm:w-10", "sm:h-10", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "sm:w-6", "sm:h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-base", "sm:text-lg", "font-semibold"], [1, "text-xs", "sm:text-sm", "leading-relaxed"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"], [1, "mt-6", "sm:mt-8"], [1, "flex-shrink-0", "rounded-xl", "p-6", "sm:p-8", "border-2", "transition-all", "duration-500", "hover:scale-[1.01]", 3, "class"], [1, "flex-1", "min-w-[300px]", "rounded-xl", "p-4", "sm:p-6", "border", "transition-all", "duration-300", "hover:shadow-xl", "hover:scale-[1.01]", "group"], [1, "text-sm", "sm:text-base", "leading-relaxed"], [1, "flex-shrink-0", "rounded-xl", "p-6", "sm:p-8", "border-2", "transition-all", "duration-500", "hover:scale-[1.01]"], [1, "w-10", "h-10", "sm:w-12", "sm:h-12", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "sm:w-7", "sm:h-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "min-w-0", "flex-1"], [1, "text-xs", "sm:text-sm", "font-semibold", "uppercase", "tracking-wider"], ["tooltipType", "metric", 1, "text-2xl", "sm:text-3xl", "lg:text-4xl", "font-bold", "truncate", "transition-all", "duration-300", "hover:scale-105", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "flex-col", "gap-2", "mb-3"], [1, "flex", "flex-col", "sm:flex-row", "sm:items-center", "gap-2", "sm:gap-4"], ["tooltipType", "trend", 1, "flex", "items-center", "gap-2", 3, "libSymphiqTooltip", "tooltipPosition"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4", "flex-shrink-0"], ["fill-rule", "evenodd", "d", "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z", "clip-rule", "evenodd"], [1, "font-semibold", "text-base"], [1, "text-xs"], [1, "hidden", "sm:block", "h-6", "w-px", "bg-slate-600"], ["tooltipType", "status", 3, "libSymphiqTooltip", "tooltipPosition"], [1, "font-semibold", "text-sm"], ["tooltipType", "status", 1, "flex", "items-center", "gap-2", 3, "libSymphiqTooltip", "tooltipPosition"], ["tooltipType", "status", 1, "inline-flex", "items-center", "gap-2", "px-3", "sm:px-4", "py-1.5", "sm:py-2", "rounded-lg", "font-bold", "text-base", "sm:text-lg", "transition-all", "duration-300", 3, "ngStyle", "libSymphiqTooltip", "tooltipPosition"], [1, "rounded-xl", "p-6", "sm:p-8", "mb-6", "sm:mb-8", "border-2", "transition-all", "duration-500", "hover:scale-[1.01]", 3, "class"], [1, "rounded-xl", "p-4", "sm:p-6", "mb-4", "sm:mb-6", "border", "transition-all", "duration-300", "hover:shadow-xl", "hover:scale-[1.01]", "group"], [1, "rounded-xl", "p-6", "sm:p-8", "mb-6", "sm:mb-8", "border-2", "transition-all", "duration-500", "hover:scale-[1.01]"], [1, "flex", "flex-col", "md:flex-row", "items-start", "md:items-center", "gap-4", "md:gap-0"], [1, "flex-1", "w-full"], [1, "flex", "flex-col", "gap-2", "mt-4"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4", "sm:w-5", "sm:h-5", "flex-shrink-0"], [1, "font-semibold", "text-base", "sm:text-lg"], [1, "text-xs", "sm:text-sm"], [1, "font-semibold", "text-sm", "sm:text-base"], [1, "w-full", "md:w-auto", "md:text-right", "md:ml-4"], [1, "inline-flex", "items-center", "gap-2", "px-3", "sm:px-4", "py-1.5", "sm:py-2", "rounded-lg", "font-bold", "text-base", "sm:text-lg", "transition-all", "duration-300", 3, "ngStyle"], [1, "mt-2", "text-xs", "sm:text-sm"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-4"], [3, "chart", "isLightMode", "isCompactMode", "collapsibleIn", "isLoading"], [3, "chartClick", "chart", "isLightMode", "isCompactMode", "collapsibleIn", "isLoading"], [3, "scrollToCompetitive", "metrics", "isLightMode", "isCompactMode"]], template: function OverallAssessmentComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, OverallAssessmentComponent_Conditional_0_Template, 13, 18, "div", 0)(1, OverallAssessmentComponent_Conditional_1_Template, 62, 72, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isLoading() ? 0 : 1);
@@ -3448,7 +3462,11 @@ class OverallAssessmentComponent {
               </div>
               <div class="flex flex-col gap-2 mb-3">
                 <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-                  <div class="flex items-center gap-2">
+                  <div
+                    class="flex items-center gap-2"
+                    [libSymphiqTooltip]="revenueTrendTooltip()"
+                    tooltipType="trend"
+                    [tooltipPosition]="'top'">
                     <svg [class]="trendIconClass()" class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                     </svg>
@@ -3456,13 +3474,20 @@ class OverallAssessmentComponent {
                     <span [class]="badgeLabelClass()" class="text-xs">vs last year</span>
                   </div>
                   <div class="hidden sm:block h-6 w-px bg-slate-600"></div>
-                  <div>
+                  <div
+                    [libSymphiqTooltip]="revenueStatusTooltip()"
+                    tooltipType="status"
+                    [tooltipPosition]="'top'">
                     <span [class]="badgeLabelClass()" class="text-xs">Target: </span>
                     <span [class]="titleClass()" class="font-semibold text-sm">{{ formattedRevenueTarget() }}</span>
                   </div>
                 </div>
                 @if (hasRevenuePacing()) {
-                  <div class="flex items-center gap-2">
+                  <div
+                    class="flex items-center gap-2"
+                    [libSymphiqTooltip]="revenueStatusTooltip()"
+                    tooltipType="status"
+                    [tooltipPosition]="'top'">
                     <span [class]="badgeLabelClass()" class="text-xs">2025 Pacing: </span>
                     <span [class]="titleClass()" class="font-semibold text-sm">{{ formattedRevenuePacing() }}</span>
                   </div>
@@ -3511,7 +3536,11 @@ class OverallAssessmentComponent {
                 </div>
                 <div class="flex flex-col gap-2 mt-4">
                   <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-                    <div class="flex items-center gap-2">
+                    <div
+                      class="flex items-center gap-2"
+                      [libSymphiqTooltip]="revenueTrendTooltip()"
+                      tooltipType="trend"
+                      [tooltipPosition]="'top'">
                       <svg [class]="trendIconClass()" class="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                         <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                       </svg>
@@ -3519,13 +3548,20 @@ class OverallAssessmentComponent {
                       <span [class]="badgeLabelClass()" class="text-xs sm:text-sm">vs last year</span>
                     </div>
                     <div class="hidden sm:block h-6 w-px bg-slate-600"></div>
-                    <div>
+                    <div
+                      [libSymphiqTooltip]="revenueStatusTooltip()"
+                      tooltipType="status"
+                      [tooltipPosition]="'top'">
                       <span [class]="badgeLabelClass()" class="text-xs sm:text-sm">Target: </span>
                       <span [class]="titleClass()" class="font-semibold text-sm sm:text-base">{{ formattedRevenueTarget() }}</span>
                     </div>
                   </div>
                   @if (hasRevenuePacing()) {
-                    <div class="flex items-center gap-2">
+                    <div
+                      class="flex items-center gap-2"
+                      [libSymphiqTooltip]="revenueStatusTooltip()"
+                      tooltipType="status"
+                      [tooltipPosition]="'top'">
                       <span [class]="badgeLabelClass()" class="text-xs sm:text-sm">2025 Pacing: </span>
                       <span [class]="titleClass()" class="font-semibold text-sm sm:text-base">{{ formattedRevenuePacing() }}</span>
                     </div>
@@ -3624,7 +3660,7 @@ class OverallAssessmentComponent {
   `,
             }]
     }], null, { assessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "assessment", required: false }] }], revenueMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "revenueMetric", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isChartsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChartsLoading", required: false }] }], scrollToSection: [{ type: i0.Output, args: ["scrollToSection"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverallAssessmentComponent, { className: "OverallAssessmentComponent", filePath: "lib/components/funnel-analysis-dashboard/overall-assessment.component.ts", lineNumber: 274 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverallAssessmentComponent, { className: "OverallAssessmentComponent", filePath: "lib/components/funnel-analysis-dashboard/overall-assessment.component.ts", lineNumber: 296 }); })();
 
 const _c0$8 = () => [1, 2, 3];
 const _c1$2 = () => [1, 2, 3, 4];
@@ -11777,7 +11813,9 @@ const FUNNEL_ANALYSIS = ({
         "overallAssessment": {
             "performanceItemId": "OVERALL_ASSESSMENT",
             "grade": "C",
+            "gradeDescription": "This is an example grade description",
             "overallStatus": "AT_RISK",
+            "overallStatusDescription": "This is an example overall description",
             "narrative": "The business is experiencing robust growth in traffic and revenue, with desktop and organic channels leading performance. However, conversion rates have declined, and the funnel is leaking at multiple stages, particularly on mobile. Addressing conversion bottlenecks and optimizing the mobile experience are critical to unlocking further revenue growth.",
             "priorYearTrend": "Strong growth in traffic and revenue compared to prior year, but conversion rates have declined.",
             "targetPacingStatus": "Falling behind target pace for purchases and conversion rates, but overachieving in traffic and average order value. Immediate action needed to address conversion bottlenecks and mobile performance.",