@eric-emg/symphiq-components 1.2.194 → 1.2.196

package/fesm2022/symphiq-components.mjs

@@ -1,4 +1,4 @@
-import { ViewModeEnum, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, MetricEnum, DimensionEnum, UiDataPeriodEnum, UiDataComparePeriodEnum, ChartTypeEnum, IconSourceEnum, ProfileAnalysisRecommendationPriorityEnum, ProfileItemTypeEnum, PriceVsCompetitorsEnum, DifferentiationStrengthEnum, ThreatLevelEnum, normalizeToV3, FocusAreaDetailStatusEnum, FocusAreaDomainEnumUtil, FocusAreaDomainEnum, ShopDataLoadStatusEnum, AiDynamicContentStatusEnum, FocusAreaHealthEnum, ProfileAnalysisPriorityEnum, CapabilityStateEnum, QuadrantEnum, AdvantageEnum, OverallGradeEnum, OperationalMaturityEnum, ProfileAnalysisEffortLevelEnum, ProfileAnalysisImpactLevelEnum, ProfileAnalysisTypeEnum, LineChartUseCaseEnum, BarChartUseCaseEnum } from '@jebgem/model';
+import { ViewModeEnum, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, MetricEnum, DimensionEnum, UiDataPeriodEnum, UiDataComparePeriodEnum, ChartTypeEnum, IconSourceEnum, ProfileAnalysisRecommendationPriorityEnum, ProfileItemTypeEnum, PriceVsCompetitorsEnum, DifferentiationStrengthEnum, ThreatLevelEnum, normalizeToV3, FocusAreaDetailStatusEnum, FocusAreaDomainEnumUtil, FocusAreaDomainEnum, ShopDataLoadStatusEnum, MetricEnumUtil, NumberTypeEnum, AiDynamicContentStatusEnum, FocusAreaHealthEnum, ProfileAnalysisPriorityEnum, CapabilityStateEnum, QuadrantEnum, AdvantageEnum, OverallGradeEnum, OperationalMaturityEnum, ProfileAnalysisEffortLevelEnum, ProfileAnalysisImpactLevelEnum, ProfileAnalysisTypeEnum, LineChartUseCaseEnum, BarChartUseCaseEnum } from '@jebgem/model';
 export * from '@jebgem/model';
 import * as i0 from '@angular/core';
 import { Injectable, signal, computed, input, ChangeDetectionStrategy, Component, output, inject, ElementRef, Renderer2, effect, Directive, HostListener, untracked, ViewChild, PLATFORM_ID, Inject, Input } from '@angular/core';
@@ -2920,9 +2920,18 @@ function calculateRelatedMetricRatios(funnelMetrics, baselineValues) {
     return ratios;
 }
 function calculateMetricTargetsFromRevenueReverse(revenueTarget, priorYearRevenue, funnelMetrics, baselineValues) {
+    console.log('\n🔄 === REVERSE REVENUE CALCULATOR START ===');
+    console.log('📊 Inputs:');
+    console.log('  - Revenue Target:', revenueTarget);
+    console.log('  - Prior Year Revenue:', priorYearRevenue);
+    console.log('  - Funnel Metrics Count:', funnelMetrics.length);
+    console.log('  - Baseline Values:', Array.from(baselineValues.entries()));
     const revenuePercentageIncrease = ((revenueTarget - priorYearRevenue) / priorYearRevenue) * 100;
+    console.log('  - Revenue % Increase:', revenuePercentageIncrease.toFixed(2) + '%');
     const funnelRatios = calculateFunnelRatios(funnelMetrics, baselineValues);
+    console.log('\n📈 Funnel Ratios:', Array.from(funnelRatios.entries()));
     const relatedRatios = calculateRelatedMetricRatios(funnelMetrics, baselineValues);
+    console.log('📈 Related Metric Ratios:', Array.from(relatedRatios.entries()));
     const sortedFunnelMetrics = [...funnelMetrics].sort((a, b) => {
         const aFunnel = a.funnelInd ?? 999;
         const bFunnel = b.funnelInd ?? 999;
@@ -2937,12 +2946,14 @@ function calculateMetricTargetsFromRevenueReverse(revenueTarget, priorYearRevenu
         .map(fm => fm.relatedMetric)
         .filter(Boolean);
     const stageTargets = new Map();
+    console.log('\n🎯 Calculating Stage Targets (Reverse Order):');
     let currentRevenue = revenueTarget;
     for (let i = stages.length - 1; i >= 0; i--) {
         const stage = stages[i];
         const baseline = baselineValues.get(stage) || 0;
         if (i === stages.length - 1) {
             stageTargets.set(stage, currentRevenue);
+            console.log(`  Stage ${i} (${stage}): ${currentRevenue.toFixed(2)} (Revenue Stage)`);
         }
         else {
             const nextStage = stages[i + 1];
@@ -2952,13 +2963,17 @@ function calculateMetricTargetsFromRevenueReverse(revenueTarget, priorYearRevenu
                 const nextStageTarget = stageTargets.get(nextStage) || 0;
                 currentRevenue = nextStageTarget / ratio;
                 stageTargets.set(stage, currentRevenue);
+                console.log(`  Stage ${i} (${stage}): ${currentRevenue.toFixed(2)} (calculated from ${nextStage} with ratio ${ratio.toFixed(4)})`);
             }
             else {
                 const increaseNeeded = revenueTarget / baseline;
-                stageTargets.set(stage, baseline * increaseNeeded);
+                const calculatedValue = baseline * increaseNeeded;
+                stageTargets.set(stage, calculatedValue);
+                console.log(`  Stage ${i} (${stage}): ${calculatedValue.toFixed(2)} (fallback: baseline * ${increaseNeeded.toFixed(4)})`);
             }
         }
     }
+    console.log('🎯 Final Stage Targets:', Array.from(stageTargets.entries()));
     const metricCalculations = [];
     const stageGroups = new Map();
     sortedFunnelMetrics.forEach(fm => {
@@ -2969,30 +2984,49 @@ function calculateMetricTargetsFromRevenueReverse(revenueTarget, priorYearRevenu
             stageGroups.get(fm.funnelMetric).push(fm);
         }
     });
+    console.log('\n📊 Calculating Individual Metric Targets:');
     stageGroups.forEach((metrics, funnelStage) => {
         const stageTarget = stageTargets.get(funnelStage);
         const stageBaseline = baselineValues.get(funnelStage) || 0;
         const stageIncrease = stageTarget ? stageTarget - stageBaseline : 0;
+        console.log(`\n  📍 Funnel Stage: ${funnelStage}`);
+        console.log(`    - Stage Target: ${stageTarget?.toFixed(2)}`);
+        console.log(`    - Stage Baseline: ${stageBaseline.toFixed(2)}`);
+        console.log(`    - Stage Increase: ${stageIncrease.toFixed(2)}`);
         metrics.forEach(fm => {
             if (!fm.relatedMetric)
                 return;
             const currentValue = baselineValues.get(fm.relatedMetric) || 0;
             const isFunnelStage = fm.funnelMetric === fm.relatedMetric;
+            console.log(`\n    🔹 Metric: ${fm.relatedMetric}${isFunnelStage ? ' (STAGE)' : ''}`);
+            console.log(`      Current Value: ${currentValue.toFixed(2)}`);
             let targetValue;
             let percentageIncrease;
             if (isFunnelStage && stageTarget !== undefined) {
                 targetValue = stageTarget;
                 percentageIncrease = currentValue > 0 ? ((targetValue - currentValue) / currentValue) * 100 : 0;
+                console.log(`      Method: Direct Stage Target`);
             }
             else if (fm.relatedMetric === MetricEnum.BOUNCE_RATE) {
                 const stageTargetValue = stageTargets.get(funnelStage) || stageBaseline;
                 const stageIncreaseRatio = stageBaseline > 0 ? stageTargetValue / stageBaseline : 1;
                 targetValue = currentValue / stageIncreaseRatio;
                 percentageIncrease = currentValue > 0 ? ((targetValue - currentValue) / currentValue) * 100 : 0;
+                console.log(`      Method: Bounce Rate (inverse)`);
+                console.log(`      Stage Increase Ratio: ${stageIncreaseRatio.toFixed(4)}`);
             }
             else if (isDerivedMetric(fm.relatedMetric)) {
                 targetValue = currentValue;
                 percentageIncrease = 0;
+                console.log(`      Method: Derived Metric (no change)`);
+            }
+            else if (isRateMetric(fm.relatedMetric)) {
+                const stageTargetValue = stageTargets.get(funnelStage) || stageBaseline;
+                const stageIncreaseRatio = stageBaseline > 0 ? stageTargetValue / stageBaseline : 1;
+                targetValue = currentValue * stageIncreaseRatio;
+                percentageIncrease = currentValue > 0 ? ((targetValue - currentValue) / currentValue) * 100 : 0;
+                console.log(`      Method: Rate Metric (proportional scaling)`);
+                console.log(`      Stage Increase Ratio: ${stageIncreaseRatio.toFixed(4)}`);
             }
             else {
                 const ratioKey = `${fm.relatedMetric}_to_${funnelStage}`;
@@ -3000,6 +3034,7 @@ function calculateMetricTargetsFromRevenueReverse(revenueTarget, priorYearRevenu
                 const relatedMetrics = metrics.filter(m => m.relatedMetric &&
                     m.relatedMetric !== funnelStage &&
                     !isDerivedMetric(m.relatedMetric) &&
+                    !isRateMetric(m.relatedMetric) &&
                     m.relatedMetric !== MetricEnum.BOUNCE_RATE);
                 const numRelatedMetrics = relatedMetrics.length;
                 if (numRelatedMetrics > 0 && stageBaseline > 0) {
@@ -3007,14 +3042,23 @@ function calculateMetricTargetsFromRevenueReverse(revenueTarget, priorYearRevenu
                     const metricIncreaseNeeded = impactRatio > 0 ? avgIncreaseNeeded / impactRatio : avgIncreaseNeeded;
                     targetValue = currentValue + metricIncreaseNeeded;
                     percentageIncrease = currentValue > 0 ? ((targetValue - currentValue) / currentValue) * 100 : 0;
+                    console.log(`      Method: Related Metric with Impact Ratio`);
+                    console.log(`      Num Related Metrics: ${numRelatedMetrics}`);
+                    console.log(`      Avg Increase Needed: ${avgIncreaseNeeded.toFixed(2)}`);
+                    console.log(`      Impact Ratio: ${impactRatio.toFixed(4)}`);
+                    console.log(`      Metric Increase Needed: ${metricIncreaseNeeded.toFixed(2)}`);
                 }
                 else {
                     const stageTargetValue = stageTargets.get(funnelStage) || stageBaseline;
                     const stageIncreaseRatio = stageBaseline > 0 ? stageTargetValue / stageBaseline : 1;
                     targetValue = currentValue * stageIncreaseRatio;
                     percentageIncrease = currentValue > 0 ? ((targetValue - currentValue) / currentValue) * 100 : 0;
+                    console.log(`      Method: Proportional to Stage`);
+                    console.log(`      Stage Increase Ratio: ${stageIncreaseRatio.toFixed(4)}`);
                 }
             }
+            console.log(`      ✅ Target Value: ${targetValue.toFixed(2)}`);
+            console.log(`      ✅ % Increase: ${percentageIncrease.toFixed(2)}%`);
             metricCalculations.push({
                 metric: fm.relatedMetric,
                 funnelMetric: fm.funnelMetric,
@@ -3028,19 +3072,34 @@ function calculateMetricTargetsFromRevenueReverse(revenueTarget, priorYearRevenu
             });
         });
     });
+    console.log('\n✅ Total Metric Calculations:', metricCalculations.length);
     const validation = validateRevenueTarget(revenueTarget, metricCalculations, baselineValues, funnelRatios);
+    console.log('\n🔍 Validation Results:');
+    console.log('  - Target Revenue:', revenueTarget.toFixed(2));
+    console.log('  - Calculated Revenue:', validation.calculatedRevenue.toFixed(2));
+    console.log('  - Difference:', validation.difference.toFixed(2));
+    console.log('  - % Difference:', validation.percentageDifference.toFixed(4) + '%');
+    console.log('  - Within Tolerance:', validation.withinTolerance);
     let adjustmentApplied = 0;
     if (Math.abs(validation.difference) > 0.01) {
+        console.log('\n⚙️ Applying Precision Adjustment...');
         metricCalculations.forEach(calc => {
             if (calc.isFunnelStage && calc.metric !== MetricEnum.BOUNCE_RATE) {
+                const oldValue = calc.targetValue;
                 calc.targetValue += validation.difference / stages.length;
                 calc.percentageIncrease = calc.currentValue > 0
                     ? ((calc.targetValue - calc.currentValue) / calc.currentValue) * 100
                     : 0;
+                console.log(`  Adjusted ${calc.metric}: ${oldValue.toFixed(2)} → ${calc.targetValue.toFixed(2)}`);
             }
         });
         adjustmentApplied = validation.difference;
+        console.log('  Total Adjustment Applied:', adjustmentApplied.toFixed(2));
+    }
+    else {
+        console.log('\n✅ No adjustment needed - within tolerance');
     }
+    console.log('\n🏁 === REVERSE REVENUE CALCULATOR END ===\n');
     return {
         revenueTarget,
         revenuePercentageIncrease,
@@ -3051,11 +3110,28 @@ function calculateMetricTargetsFromRevenueReverse(revenueTarget, priorYearRevenu
 const DERIVED_METRICS = new Set([
     MetricEnum.REVENUE_PER_PRODUCT_VIEW,
     MetricEnum.REVENUE_PER_ADD_TO_CART,
-    MetricEnum.REVENUE_PER_CHECKOUT
+    MetricEnum.REVENUE_PER_CHECKOUT,
+    MetricEnum.AVERAGE_ORDER_VALUE
+]);
+const RATE_METRICS = new Set([
+    MetricEnum.PRODUCT_VIEW_RATE,
+    MetricEnum.VIEW_TO_PRODUCT_VIEW_CONVERSION_RATE,
+    MetricEnum.ACTIVE_USER_ADD_TO_CART_RATE,
+    MetricEnum.ADD_TO_CART_RATE,
+    MetricEnum.PRODUCT_VIEW_TO_CART_CONVERSION_RATE,
+    MetricEnum.ACTIVE_USER_CHECKOUT_RATE,
+    MetricEnum.CART_TO_CHECKOUT_CONVERSION_RATE,
+    MetricEnum.PRODUCT_VIEW_CONVERSION_RATE,
+    MetricEnum.ADD_TO_CART_CONVERSION_RATE,
+    MetricEnum.CHECKOUT_CONVERSION_RATE,
+    MetricEnum.ECOMMERCE_CONVERSION_RATE
 ]);
 function isDerivedMetric(metric) {
     return DERIVED_METRICS.has(metric);
 }
+function isRateMetric(metric) {
+    return RATE_METRICS.has(metric);
+}
 function validateRevenueTarget(targetRevenue, calculations, baselineValues, funnelRatios) {
     const stages = calculations
         .filter(c => c.isFunnelStage)
@@ -56470,7 +56546,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_17_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.projectedValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric, false), " ");
 } }
 function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 24);
@@ -56500,7 +56576,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditio
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Proj: ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric));
+    i0.ɵɵtextInterpolate1("Proj: ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric, false));
 } }
 function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "div", 22)(3, "p", 23);
@@ -56737,12 +56813,14 @@ class FunnelMetricsVisualizationComponent {
     formatPercentage(value, decimals) {
         return formatPercentage(value, decimals);
     }
-    formatMetricValue(value, metric) {
+    formatMetricValue(value, metric, fromUiData = true) {
         if (metric.includes('REVENUE')) {
             return formatCurrency(value);
         }
-        if (metric.includes('RATE') || metric.includes('CONVERSION')) {
-            return formatPercentage(value, 2);
+        const numberType = MetricEnumUtil.numberType(metric);
+        if (numberType === NumberTypeEnum.PERCENTAGE) {
+            const displayValue = fromUiData ? value * 100 : value;
+            return formatPercentage(displayValue, 2);
         }
         return formatNumber(value);
     }
@@ -56779,140 +56857,140 @@ class FunnelMetricsVisualizationComponent {
                 standalone: true,
                 imports: [CommonModule, PacingStatusBadgeComponent, 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-4">
-              <div class="flex-1">
-                <div class="flex items-center gap-2 mb-1">
-                  <h3 [ngClass]="stageTitleClasses()" class="text-lg 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 class="flex items-center gap-3">
-                @if (stage.pacingInfo) {
-                  <symphiq-pacing-status-badge
-                    [viewMode]="viewMode()"
-                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
-                    [status]="stage.pacingInfo.status"
-                  />
-                }
-                <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
-                  +{{ formatPercentage(stage.stageMetric.percentageIncrease, 1) }}
-                </div>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-3 gap-4 mb-4">
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  {{ priorYear() }} Actual
-                </p>
-                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-              @if (stage.pacingInfo) {
-                <div>
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                    {{ currentYear() }} Projected
-                  </p>
-                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
-                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric) }}
-                  </p>
-                </div>
-              }
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  {{ currentYear() }} Target
-                </p>
-                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-            </div>
-
-            @if (stage.relatedMetrics.length > 0) {
-              <div [ngClass]="dividerClasses()" class="my-4"></div>
-
-              <div class="space-y-2">
-                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
-                  Related Metrics
-                </p>
-                <div class="grid gap-2">
-                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
-                    <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
-                      <div class="flex items-center justify-between mb-2">
-                        <div class="flex items-center gap-2 flex-1">
-                          <p [ngClass]="relatedMetricNameClasses()" class="text-sm 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="flex items-center gap-2">
-                          @if (metric.pacingInfo) {
-                            <symphiq-pacing-status-badge
-                              [viewMode]="viewMode()"
-                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
-                              [status]="metric.pacingInfo.status"
-                            />
-                          }
-                          <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
-                            +{{ formatPercentage(metric.calc.percentageIncrease, 1) }}
-                          </span>
-                        </div>
-                      </div>
-                      <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
-                        </div>
-                        @if (metric.pacingInfo) {
-                          <div>
-                            <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric) }}</p>
-                          </div>
-                        }
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
-                        </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-4">
+              <div class="flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <h3 [ngClass]="stageTitleClasses()" class="text-lg 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 class="flex items-center gap-3">
+                @if (stage.pacingInfo) {
+                  <symphiq-pacing-status-badge
+                    [viewMode]="viewMode()"
+                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
+                    [status]="stage.pacingInfo.status"
+                  />
+                }
+                <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
+                  +{{ formatPercentage(stage.stageMetric.percentageIncrease, 1) }}
+                </div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-3 gap-4 mb-4">
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                  {{ priorYear() }} Actual
+                </p>
+                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+              @if (stage.pacingInfo) {
+                <div>
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                    {{ currentYear() }} Projected
+                  </p>
+                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
+                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
+                  </p>
+                </div>
+              }
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                  {{ currentYear() }} Target
+                </p>
+                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+            </div>
+
+            @if (stage.relatedMetrics.length > 0) {
+              <div [ngClass]="dividerClasses()" class="my-4"></div>
+
+              <div class="space-y-2">
+                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
+                  Related Metrics
+                </p>
+                <div class="grid gap-2">
+                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
+                    <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
+                      <div class="flex items-center justify-between mb-2">
+                        <div class="flex items-center gap-2 flex-1">
+                          <p [ngClass]="relatedMetricNameClasses()" class="text-sm 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="flex items-center gap-2">
+                          @if (metric.pacingInfo) {
+                            <symphiq-pacing-status-badge
+                              [viewMode]="viewMode()"
+                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
+                              [status]="metric.pacingInfo.status"
+                            />
+                          }
+                          <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
+                            +{{ formatPercentage(metric.calc.percentageIncrease, 1) }}
+                          </span>
+                        </div>
+                      </div>
+                      <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
+                        </div>
+                        @if (metric.pacingInfo) {
+                          <div>
+                            <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}</p>
+                          </div>
+                        }
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
+                        </div>
+                      </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 }] }] }); })();
@@ -57924,20 +58002,41 @@ class InitialTargetSettingComponent {
         }, ...(ngDevMode ? [{ debugName: "percentageIncrease" }] : []));
         this.metricCalculations = computed(() => {
             const revenue = this.calculatedRevenue();
-            if (revenue <= 0)
+            console.log('=== METRIC CALCULATIONS START ===');
+            console.log('Revenue Target:', revenue);
+            if (revenue <= 0) {
+                console.log('Revenue is <= 0, returning empty array');
                 return [];
+            }
             const mode = this.inputMode();
             const mainData = this.mainUiData();
             const metrics = this.funnelMetrics();
+            const priorRevenue = this.priorYearRevenue();
+            console.log('Input Mode:', mode);
+            console.log('Prior Year Revenue:', priorRevenue);
+            console.log('Funnel Metrics Count:', metrics.length);
+            console.log('Main UI Data available:', !!mainData);
+            let result;
             if (mode === 'absolute') {
-                return this.revenueCalcService.calculateTargetsFromRevenue(revenue, mainData, metrics).metricCalculations;
+                console.log('Using calculateTargetsFromRevenueWithRatios (NEW REVERSE ALGORITHM)');
+                result = this.revenueCalcService.calculateTargetsFromRevenueWithRatios(revenue, mainData, metrics);
+                console.log('Adjustment Applied:', result.adjustmentApplied);
             }
             else {
                 const pct = this.percentageInput();
-                if (pct === null)
+                console.log('Percentage Input:', pct);
+                if (pct === null) {
+                    console.log('Percentage is null, returning empty array');
                     return [];
-                return this.revenueCalcService.calculateTargetsFromPercentage(pct, mainData, metrics).metricCalculations;
-            }
+                }
+                console.log('Using calculateTargetsFromPercentageWithRatios (NEW REVERSE ALGORITHM)');
+                result = this.revenueCalcService.calculateTargetsFromPercentageWithRatios(pct, mainData, metrics);
+                console.log('Adjustment Applied:', result.adjustmentApplied);
+            }
+            console.log('Metric Calculations Count:', result.metricCalculations.length);
+            console.log('Metric Calculations:', result.metricCalculations);
+            console.log('=== METRIC CALCULATIONS END ===');
+            return result.metricCalculations;
         }, ...(ngDevMode ? [{ debugName: "metricCalculations" }] : []));
         this.isValid = computed(() => {
             return this.calculatedRevenue() > 0 && this.priorYearRevenue() > 0;