@eric-emg/symphiq-components 1.2.235 → 1.2.236

package/fesm2022/symphiq-components.mjs

@@ -2562,14 +2562,27 @@ function isCurrentYearTarget(target) {
     return (targetStart.getTime() === currentYearStart.getTime() &&
         targetEnd.getTime() === currentYearEnd.getTime());
 }
+function getMinFractionDigitsForSignificantFigures(value, minSigFigs) {
+    if (value === 0)
+        return 0;
+    const absValue = Math.abs(value);
+    if (absValue >= 1) {
+        return 2;
+    }
+    const magnitude = Math.floor(Math.log10(absValue));
+    return Math.max(0, -magnitude + minSigFigs - 1);
+}
 function formatCurrency(value, currencySymbol = '$') {
+    const fractionDigits = getMinFractionDigitsForSignificantFigures(value, 2);
     return `${currencySymbol}${value.toLocaleString('en-US', {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits
     })}`;
 }
 function formatPercentage(value, decimals = 1) {
-    return `${value.toFixed(decimals)}%`;
+    const minDecimals = getMinFractionDigitsForSignificantFigures(value, 2);
+    const finalDecimals = Math.max(decimals, minDecimals);
+    return `${value.toFixed(finalDecimals)}%`;
 }
 function formatNumber(value) {
     return value.toLocaleString('en-US', {
@@ -55112,13 +55125,13 @@ const _forTrack1$3 = ($index, $item) => $item.calc.metric;
 function FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 7);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 13);
-    i0.ɵɵelement(2, "path", 14);
+    i0.ɵɵelementStart(1, "svg", 15);
+    i0.ɵɵelement(2, "path", 19);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const stage_r1 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(stage_r1.stageMetric.description, ctx_r1.getMetricTitle(stage_r1.stageMetric)));
+    const stage_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r2.infoIconClasses())("libSymphiqTooltip", ctx_r2.getMarkdownTooltipContent(stage_r2.stageMetric.description, ctx_r2.getMetricTitle(stage_r2.stageMetric)));
 } }
 function FunnelMetricsVisualizationComponent_For_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 9);
@@ -55127,127 +55140,146 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_19_Template(rf, c
     i0.ɵɵelementStart(3, "p", 11);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 15);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const stage_r1 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
+    const stage_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.labelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Pace for ", ctx_r1.currentYear(), " ");
+    i0.ɵɵtextInterpolate1(" Pace for ", ctx_r2.currentYear(), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.projectedValueClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.projectedValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric, false), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(stage_r2.pacingInfo.projectedValue, stage_r2.stageMetric.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", stage_r1.pacingInfo.pacingPercentage)("status", stage_r1.pacingInfo.status)("showAsFullText", true)("showEmphasizedPercentage", true);
+    i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("pacingPercentage", stage_r2.pacingInfo.pacingPercentage)("status", stage_r2.pacingInfo.status)("showAsFullText", true)("showEmphasizedPercentage", true);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 23);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 28);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 29);
-    i0.ɵɵelement(2, "path", 14);
+    i0.ɵɵelementStart(1, "svg", 36);
+    i0.ɵɵelement(2, "path", 19);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const metric_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.calc.description, ctx_r1.getMetricTitle(metric_r3.calc)));
+    const metric_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r2.infoIconClasses())("libSymphiqTooltip", ctx_r2.getMarkdownTooltipContent(metric_r5.calc.description, ctx_r2.getMetricTitle(metric_r5.calc)));
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 25);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 30);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 27);
+    i0.ɵɵelementStart(3, "p", 32);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 30);
+    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const metric_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const metric_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Pace for ", ctx_r1.currentYear(), " ");
+    i0.ɵɵtextInterpolate1(" Pace for ", ctx_r2.currentYear(), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedProjectedValueClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedProjectedValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric, false), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(metric_r5.pacingInfo.projectedValue, metric_r5.calc.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", metric_r3.pacingInfo.pacingPercentage)("status", metric_r3.pacingInfo.status)("showAsFullText", true)("isCompact", true)("showEmphasizedPercentage", true);
+    i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("pacingPercentage", metric_r5.pacingInfo.pacingPercentage)("status", metric_r5.pacingInfo.status)("showAsFullText", true)("isCompact", true)("showEmphasizedPercentage", true);
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "p", 22);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26)(2, "p", 27);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Conditional_4_Template, 3, 2, "button", 23);
+    i0.ɵɵconditionalCreate(4, FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Conditional_4_Template, 3, 2, "button", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 24)(6, "div")(7, "p", 25);
+    i0.ɵɵelementStart(5, "div", 29)(6, "div")(7, "p", 30);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 26);
+    i0.ɵɵelementStart(9, "p", 31);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div")(12, "p", 25);
+    i0.ɵɵelementStart(11, "div")(12, "p", 30);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "p", 27);
+    i0.ɵɵelementStart(14, "p", 32);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(16, "symphiq-target-change-badge", 28);
+    i0.ɵɵelement(16, "symphiq-target-change-badge", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Conditional_17_Template, 6, 10, "div");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Conditional_17_Template, 6, 10, "div");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 34)(19, "button", 35);
+    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Template_button_click_19_listener() { const metric_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onViewRelatedMetricReport(metric_r5.calc.metric)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(20, "svg", 15);
+    i0.ɵɵelement(21, "path", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(22, "span", 17);
+    i0.ɵɵtext(23, "View Report");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "span", 18);
+    i0.ɵɵtext(25, "Report");
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const metric_r3 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedMetricCardClasses());
+    const metric_r5 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedMetricCardClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedMetricNameClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedMetricNameClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(metric_r3.calc), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getMetricTitle(metric_r5.calc), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.calc.description ? 4 : -1);
+    i0.ɵɵconditional(metric_r5.calc.description ? 4 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.priorYear(), " Actual ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.priorYear(), " Actual ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedValueClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.calc.currentValue, metric_r3.calc.metric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(metric_r5.calc.currentValue, metric_r5.calc.metric), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentYear(), " Target ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedTargetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " Target ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(metric_r5.calc.targetValue, metric_r5.calc.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedTargetValueClasses());
+    i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("percentageChange", metric_r5.calc.percentageIncrease)("metric", metric_r5.calc.metric)("priorYear", ctx_r2.priorYear())("isCompact", true);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric, false), " ");
+    i0.ɵɵconditional(metric_r5.pacingInfo ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("percentageChange", metric_r3.calc.percentageIncrease)("metric", metric_r3.calc.metric)("priorYear", ctx_r1.priorYear())("isCompact", true);
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedActionBarClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.pacingInfo ? 17 : -1);
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedActionButtonClasses());
 } }
-function FunnelMetricsVisualizationComponent_For_4_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 16);
-    i0.ɵɵelementStart(1, "div", 17)(2, "p", 18);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 21);
+    i0.ɵɵelementStart(1, "div", 22)(2, "p", 23);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 19);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_20_For_6_Template, 18, 18, "div", 20, _forTrack1$3);
+    i0.ɵɵelementStart(4, "div", 24);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_28_For_6_Template, 26, 20, "div", 25, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const stage_r1 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.dividerClasses());
+    const stage_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r2.dividerClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.relatedTitleClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.relatedTitleClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(stage_r1.relatedMetrics);
+    i0.ɵɵrepeater(stage_r2.relatedMetrics);
 } }
 function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5)(4, "h3", 6);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
@@ -55269,46 +55301,65 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(19, FunnelMetricsVisualizationComponent_For_4_Conditional_19_Template, 6, 9, "div");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(20, FunnelMetricsVisualizationComponent_For_4_Conditional_20_Template, 7, 2);
+    i0.ɵɵelementStart(20, "div", 13)(21, "button", 14);
+    i0.ɵɵlistener("click", function FunnelMetricsVisualizationComponent_For_4_Template_button_click_21_listener() { const stage_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewStageReport(stage_r2.stageMetric.metric)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(22, "svg", 15);
+    i0.ɵɵelement(23, "path", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(24, "span", 17);
+    i0.ɵɵtext(25, "View Report");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "span", 18);
+    i0.ɵɵtext(27, "Report");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(28, FunnelMetricsVisualizationComponent_For_4_Conditional_28_Template, 7, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const stage_r1 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.stageCardClasses());
+    const stage_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r2.stageCardClasses());
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngClass", ctx_r1.stageTitleClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.stageTitleClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(stage_r1.stageMetric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getMetricTitle(stage_r2.stageMetric), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.stageMetric.description ? 6 : -1);
+    i0.ɵɵconditional(stage_r2.stageMetric.description ? 6 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.labelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.priorYear(), " Actual ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.priorYear(), " Actual ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.valueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.currentValue, stage_r1.stageMetric.metric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(stage_r2.stageMetric.currentValue, stage_r2.stageMetric.metric), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.labelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " Target ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentYear(), " Target ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
+    i0.ɵɵproperty("ngClass", ctx_r2.targetValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatMetricValue(stage_r2.stageMetric.targetValue, stage_r2.stageMetric.metric, false), " ");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric, false), " ");
+    i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("percentageChange", stage_r2.stageMetric.percentageIncrease)("metric", stage_r2.stageMetric.metric)("priorYear", ctx_r2.priorYear());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("percentageChange", stage_r1.stageMetric.percentageIncrease)("metric", stage_r1.stageMetric.metric)("priorYear", ctx_r1.priorYear());
+    i0.ɵɵconditional(stage_r2.pacingInfo ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.pacingInfo ? 19 : -1);
+    i0.ɵɵproperty("ngClass", ctx_r2.stageActionBarClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 20 : -1);
+    i0.ɵɵproperty("ngClass", ctx_r2.actionButtonClasses());
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(stage_r2.relatedMetrics.length > 0 ? 28 : -1);
 } }
 class FunnelMetricsVisualizationComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.calculations = input([], ...(ngDevMode ? [{ debugName: "calculations" }] : []));
         this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.viewStageReport = output();
+        this.viewRelatedMetricReport = output();
         this.Math = Math;
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
@@ -55450,12 +55501,38 @@ class FunnelMetricsVisualizationComponent {
     getMarkdownTooltipContent(markdown, title) {
         return { title, markdown };
     }
+    stageActionBarClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'border-purple-500/20'
+            : 'border-purple-200/50';
+    }
+    actionButtonClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-purple-500/20 text-purple-300 hover:bg-purple-500/30 hover:text-purple-200 border border-purple-400/30 hover:border-purple-400/50'
+            : 'bg-purple-50 text-purple-700 hover:bg-purple-100 hover:text-purple-800 border border-purple-200 hover:border-purple-300';
+    }
+    relatedActionBarClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'border-slate-700/50'
+            : 'border-slate-200';
+    }
+    relatedActionButtonClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50 hover:text-slate-200 border border-slate-600/50 hover:border-slate-500/50'
+            : 'bg-slate-50 text-slate-700 hover:bg-slate-100 hover:text-slate-800 border border-slate-200 hover:border-slate-300';
+    }
+    onViewStageReport(metric) {
+        this.viewStageReport.emit(metric);
+    }
+    onViewRelatedMetricReport(metric) {
+        this.viewRelatedMetricReport.emit(metric);
+    }
     static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "sm:text-xl", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "showEmphasizedPercentage"], [1, "my-4", 3, "ngClass"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-sm", "sm:text-base", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, outputs: { viewStageReport: "viewStageReport", viewRelatedMetricReport: "viewRelatedMetricReport" }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "sm:text-xl", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear"], [1, "mt-4", "pt-3", "border-t", "flex", "justify-end", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "hidden", "sm:inline"], [1, "sm:hidden"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "showEmphasizedPercentage"], [1, "my-4", 3, "ngClass"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-sm", "sm:text-base", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "mt-3", "pt-3", "border-t", "flex", "justify-end", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-3", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 21, 18, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 29, 20, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -55469,161 +55546,189 @@ class FunnelMetricsVisualizationComponent {
                 standalone: true,
                 imports: [CommonModule, PacingStatusBadgeComponent, TargetChangeBadgeComponent, TooltipDirective, TooltipContainerComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-6">
-      <symphiq-tooltip-container />
-      <div class="space-y-8">
-        @for (stage of funnelStages(); track stage.stageMetric.metric) {
-          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
-            <div class="flex items-start justify-between mb-6">
-              <div class="flex-1">
-                <div class="flex items-center gap-2 mb-1">
-                  <h3 [ngClass]="stageTitleClasses()" class="text-lg sm:text-xl font-bold leading-tight m-0">
-                    {{ getMetricTitle(stage.stageMetric) }}
-                  </h3>
-                  @if (stage.stageMetric.description) {
-                    <button
-                      type="button"
-                      [ngClass]="infoIconClasses()"
-                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
-                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
-                      tooltipType="markdown"
-                      tooltipPosition="right">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                    </button>
-                  }
-                </div>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                  {{ priorYear() }} Actual
-                </p>
-                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                  {{ currentYear() }} Target
-                </p>
-                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
-                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
-                </p>
-                <symphiq-target-change-badge
-                  [viewMode]="viewMode()"
-                  [percentageChange]="stage.stageMetric.percentageIncrease"
-                  [metric]="stage.stageMetric.metric"
-                  [priorYear]="priorYear()"
-                />
-              </div>
-              @if (stage.pacingInfo) {
-                <div>
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                    Pace for {{ currentYear() }}
-                  </p>
-                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold mb-3">
-                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
-                  </p>
-                  <symphiq-pacing-status-badge
-                    [viewMode]="viewMode()"
-                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
-                    [status]="stage.pacingInfo.status"
-                    [showAsFullText]="true"
-                    [showEmphasizedPercentage]="true"
-                  />
-                </div>
-              }
-            </div>
-
-            @if (stage.relatedMetrics.length > 0) {
-              <div [ngClass]="dividerClasses()" class="my-4"></div>
-
-              <div class="space-y-3">
-                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
-                  Related Metrics
-                </p>
-                <div class="grid gap-3">
-                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
-                    <div [ngClass]="relatedMetricCardClasses()" class="p-4 rounded-lg">
-                      <div class="flex items-center gap-2 mb-4">
-                        <p [ngClass]="relatedMetricNameClasses()" class="text-sm sm:text-base font-semibold leading-tight">
-                          {{ getMetricTitle(metric.calc) }}
-                        </p>
-                        @if (metric.calc.description) {
-                          <button
-                            type="button"
-                            [ngClass]="infoIconClasses()"
-                            class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
-                            [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
-                            tooltipType="markdown"
-                            tooltipPosition="right">
-                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
-                          </button>
-                        }
-                      </div>
-                      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                            {{ priorYear() }} Actual
-                          </p>
-                          <p [ngClass]="relatedValueClasses()" class="text-lg font-bold">
-                            {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}
-                          </p>
-                        </div>
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                            {{ currentYear() }} Target
-                          </p>
-                          <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
-                            {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
-                          </p>
-                          <symphiq-target-change-badge
-                            [viewMode]="viewMode()"
-                            [percentageChange]="metric.calc.percentageIncrease"
-                            [metric]="metric.calc.metric"
-                            [priorYear]="priorYear()"
-                            [isCompact]="true"
-                          />
-                        </div>
-                        @if (metric.pacingInfo) {
-                          <div>
-                            <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                              Pace for {{ currentYear() }}
-                            </p>
-                            <p [ngClass]="relatedProjectedValueClasses()" class="text-lg font-bold mb-2">
-                              {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}
-                            </p>
-                            <symphiq-pacing-status-badge
-                              [viewMode]="viewMode()"
-                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
-                              [status]="metric.pacingInfo.status"
-                              [showAsFullText]="true"
-                              [isCompact]="true"
-                              [showEmphasizedPercentage]="true"
-                            />
-                          </div>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-        }
-      </div>
-    </div>
+                template: `
+    <div class="space-y-6">
+      <symphiq-tooltip-container />
+      <div class="space-y-8">
+        @for (stage of funnelStages(); track stage.stageMetric.metric) {
+          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
+            <div class="flex items-start justify-between mb-6">
+              <div class="flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <h3 [ngClass]="stageTitleClasses()" class="text-lg sm:text-xl font-bold leading-tight m-0">
+                    {{ getMetricTitle(stage.stageMetric) }}
+                  </h3>
+                  @if (stage.stageMetric.description) {
+                    <button
+                      type="button"
+                      [ngClass]="infoIconClasses()"
+                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
+                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
+                      tooltipType="markdown"
+                      tooltipPosition="right">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                  {{ priorYear() }} Actual
+                </p>
+                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                  {{ currentYear() }} Target
+                </p>
+                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
+                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
+                </p>
+                <symphiq-target-change-badge
+                  [viewMode]="viewMode()"
+                  [percentageChange]="stage.stageMetric.percentageIncrease"
+                  [metric]="stage.stageMetric.metric"
+                  [priorYear]="priorYear()"
+                />
+              </div>
+              @if (stage.pacingInfo) {
+                <div>
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                    Pace for {{ currentYear() }}
+                  </p>
+                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold mb-3">
+                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
+                  </p>
+                  <symphiq-pacing-status-badge
+                    [viewMode]="viewMode()"
+                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
+                    [status]="stage.pacingInfo.status"
+                    [showAsFullText]="true"
+                    [showEmphasizedPercentage]="true"
+                  />
+                </div>
+              }
+            </div>
+
+            <div [ngClass]="stageActionBarClasses()" class="mt-4 pt-3 border-t flex justify-end">
+              <button
+                type="button"
+                (click)="onViewStageReport(stage.stageMetric.metric)"
+                [ngClass]="actionButtonClasses()"
+                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                <span class="hidden sm:inline">View Report</span>
+                <span class="sm:hidden">Report</span>
+              </button>
+            </div>
+
+            @if (stage.relatedMetrics.length > 0) {
+              <div [ngClass]="dividerClasses()" class="my-4"></div>
+
+              <div class="space-y-3">
+                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
+                  Related Metrics
+                </p>
+                <div class="grid gap-3">
+                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
+                    <div [ngClass]="relatedMetricCardClasses()" class="p-4 rounded-lg">
+                      <div class="flex items-center gap-2 mb-4">
+                        <p [ngClass]="relatedMetricNameClasses()" class="text-sm sm:text-base font-semibold leading-tight">
+                          {{ getMetricTitle(metric.calc) }}
+                        </p>
+                        @if (metric.calc.description) {
+                          <button
+                            type="button"
+                            [ngClass]="infoIconClasses()"
+                            class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                            [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
+                            tooltipType="markdown"
+                            tooltipPosition="right">
+                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                          </button>
+                        }
+                      </div>
+                      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                            {{ priorYear() }} Actual
+                          </p>
+                          <p [ngClass]="relatedValueClasses()" class="text-lg font-bold">
+                            {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}
+                          </p>
+                        </div>
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                            {{ currentYear() }} Target
+                          </p>
+                          <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
+                            {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
+                          </p>
+                          <symphiq-target-change-badge
+                            [viewMode]="viewMode()"
+                            [percentageChange]="metric.calc.percentageIncrease"
+                            [metric]="metric.calc.metric"
+                            [priorYear]="priorYear()"
+                            [isCompact]="true"
+                          />
+                        </div>
+                        @if (metric.pacingInfo) {
+                          <div>
+                            <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                              Pace for {{ currentYear() }}
+                            </p>
+                            <p [ngClass]="relatedProjectedValueClasses()" class="text-lg font-bold mb-2">
+                              {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}
+                            </p>
+                            <symphiq-pacing-status-badge
+                              [viewMode]="viewMode()"
+                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
+                              [status]="metric.pacingInfo.status"
+                              [showAsFullText]="true"
+                              [isCompact]="true"
+                              [showEmphasizedPercentage]="true"
+                            />
+                          </div>
+                        }
+                      </div>
+
+                      <div [ngClass]="relatedActionBarClasses()" class="mt-3 pt-3 border-t flex justify-end">
+                        <button
+                          type="button"
+                          (click)="onViewRelatedMetricReport(metric.calc.metric)"
+                          [ngClass]="relatedActionButtonClasses()"
+                          class="inline-flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm transition-all duration-200">
+                          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                          </svg>
+                          <span class="hidden sm:inline">View Report</span>
+                          <span class="sm:hidden">Report</span>
+                        </button>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 170 }); })();
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], viewStageReport: [{ type: i0.Output, args: ["viewStageReport"] }], viewRelatedMetricReport: [{ type: i0.Output, args: ["viewRelatedMetricReport"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 198 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);