@eric-emg/symphiq-components 1.2.216 → 1.2.218

package/fesm2022/symphiq-components.mjs

@@ -2920,18 +2920,9 @@ 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;
@@ -2946,14 +2937,12 @@ 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];
@@ -2963,17 +2952,14 @@ 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;
                 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 => {
@@ -2984,49 +2970,36 @@ 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}`;
@@ -3042,23 +3015,14 @@ 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,
@@ -3072,34 +3036,19 @@ 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,
@@ -54809,8 +54758,6 @@ function getPacingDisplayInfo(pacingPercentage, status, isDark) {
     };
 }
 function calculateMetricPacing(projectedValue, targetValue, increaseBad = false) {
-    console.group(`[PACING] calculateMetricPacing`);
-    console.log('[PACING] Input:', { projectedValue, targetValue, increaseBad });
     let pacingPercentage = targetValue > 0
         ? ((projectedValue - targetValue) / targetValue) * 100
         : 0;
@@ -54818,8 +54765,6 @@ function calculateMetricPacing(projectedValue, targetValue, increaseBad = false)
         pacingPercentage = -pacingPercentage;
     }
     const status = calculatePacingStatus(projectedValue, targetValue, increaseBad);
-    console.log('[PACING] Result:', { pacingPercentage, status, projectedValue });
-    console.groupEnd();
     return {
         pacingPercentage,
         status,
@@ -54827,27 +54772,15 @@ function calculateMetricPacing(projectedValue, targetValue, increaseBad = false)
     };
 }
 function extractProjectedValue(pacingResponse, metricEnum) {
-    console.group(`[PACING] extractProjectedValue for ${metricEnum}`);
     if (!pacingResponse) {
-        console.log('[PACING] No pacingResponse provided - returning null');
-        console.groupEnd();
         return null;
     }
     const resp = pacingResponse;
-    console.log('[PACING] pacingResponse structure:', {
-        hasProjectedMetricValues: !!resp.projectedMetricValues,
-        projectedMetricValuesCount: resp.projectedMetricValues?.length ?? 0
-    });
     const projectedMetric = resp.projectedMetricValues?.find((m) => m.metric === metricEnum);
-    console.log('[PACING] Found projectedMetric for', metricEnum, ':', projectedMetric ? { metric: projectedMetric.metric, value: projectedMetric.value } : null);
     if (!projectedMetric?.value) {
-        console.log('[PACING] No projectedMetric found - returning null');
-        console.groupEnd();
         return null;
     }
     const projectedValue = parseFloat(projectedMetric.value);
-    console.log('[PACING] Returning projectedValue:', projectedValue);
-    console.groupEnd();
     return projectedValue;
 }
 
@@ -55126,29 +55059,16 @@ class FunnelMetricsVisualizationComponent {
         this.funnelStages = computed(() => {
             const calcs = this.calculations();
             const pacingResponse = this.pacingMetrics();
-            console.group('[PACING] funnelStages computed');
-            console.log('[PACING] calculations count:', calcs.length);
-            console.log('[PACING] calculations:', calcs.map(c => ({ metric: c.metric, isFunnelStage: c.isFunnelStage, funnelMetric: c.funnelMetric })));
-            console.log('[PACING] pacingResponse exists:', !!pacingResponse);
-            if (pacingResponse) {
-                console.log('[PACING] pacingResponse raw:', JSON.stringify(pacingResponse, null, 2));
-            }
             const grouped = new Map();
             const stageMetrics = calcs.filter(c => c.isFunnelStage);
             const relatedMetrics = calcs.filter(c => !c.isFunnelStage);
-            console.log('[PACING] stageMetrics count:', stageMetrics.length);
-            console.log('[PACING] stageMetrics:', stageMetrics.map(s => s.metric));
-            console.log('[PACING] relatedMetrics count:', relatedMetrics.length);
             stageMetrics.forEach(stageMetric => {
                 const related = relatedMetrics.filter(rm => rm.funnelMetric === stageMetric.metric);
-                console.log(`[PACING] Processing stage: ${stageMetric.metric}`);
                 const stageProjectedValue = extractProjectedValue(pacingResponse, stageMetric.metric);
-                console.log(`[PACING] stageProjectedValue for ${stageMetric.metric}:`, stageProjectedValue);
                 const stageIncreaseBad = MetricEnumUtil.increaseBad(stageMetric.metric);
                 const stagePacingInfo = stageProjectedValue !== null
                     ? calculateMetricPacing(stageProjectedValue, stageMetric.targetValue, stageIncreaseBad)
                     : null;
-                console.log(`[PACING] stagePacingInfo for ${stageMetric.metric}:`, stagePacingInfo);
                 const relatedWithPacing = related.map(relMetric => {
                     const relProjectedValue = extractProjectedValue(pacingResponse, relMetric.metric);
                     const relIncreaseBad = MetricEnumUtil.increaseBad(relMetric.metric);
@@ -55168,12 +55088,6 @@ class FunnelMetricsVisualizationComponent {
                 const bInd = b.stageMetric.funnelInd ?? 999;
                 return aInd - bInd;
             });
-            console.log('[PACING] Final funnelStages result:', result.map(r => ({
-                stage: r.stageMetric.metric,
-                hasPacingInfo: !!r.pacingInfo,
-                pacingPercentage: r.pacingInfo?.pacingPercentage
-            })));
-            console.groupEnd();
             return result;
         }, ...(ngDevMode ? [{ debugName: "funnelStages" }] : []));
     }
@@ -56405,7 +56319,7 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_8_Template(rf,
 } }
 function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵelementStart(0, "button", 60);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.handleAdjustTarget(); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(1, " Adjust Revenue Target ");
     i0.ɵɵelementEnd();
@@ -56428,14 +56342,14 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf
     i0.ɵɵelementStart(10, "p", 59);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div")(13, "div", 62)(14, "p", 15);
+    i0.ɵɵelementStart(12, "div")(13, "div", 61)(14, "p", 15);
     i0.ɵɵtext(15, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 63);
+    i0.ɵɵelementStart(16, "button", 62);
     i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(17, "svg", 64);
-    i0.ɵɵelement(18, "path", 65);
+    i0.ɵɵelementStart(17, "svg", 63);
+    i0.ɵɵelement(18, "path", 64);
     i0.ɵɵelementEnd()()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(19, "p", 59);
@@ -56466,17 +56380,6 @@ function InitialTargetSettingComponent_Conditional_36_Conditional_29_Template(rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
 } }
-function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 60)(1, "button", 66);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_36_Conditional_30_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.toggleDetails(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵtext(2, " Show Less ");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.learnMoreButtonClasses());
-} }
 function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 28)(1, "div")(2, "div", 48)(3, "div")(4, "p", 49);
     i0.ɵɵtext(5);
@@ -56506,18 +56409,18 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_36_Conditional_29_Template, 21, 13, "div", 54);
-    i0.ɵɵconditionalCreate(30, InitialTargetSettingComponent_Conditional_36_Conditional_30_Template, 3, 1, "div", 60);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedValuesCardClasses());
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("space-y-6", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded());
+    i0.ɵɵclassProp("space-y-6", ctx_r0.calculationState() !== "results");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " Revenue Target ");
     i0.ɵɵadvance();
+    i0.ɵɵclassProp("text-3xl", ctx_r0.calculationState() !== "results" || ctx_r0.detailsExpanded())("text-lg", ctx_r0.calculationState() === "results" && !ctx_r0.detailsExpanded());
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.targets() === undefined && ctx_r0.submittedAbsoluteInput() !== null ? 7 : 8);
@@ -56547,19 +56450,24 @@ function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 29 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.calculationState() === "results" && ctx_r0.detailsExpanded() ? 30 : -1);
 } }
 function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29)(1, "button", 66);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_37_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(); ctx_r0.toggleDetails(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵtext(2, " Learn More ");
-    i0.ɵɵelementEnd()();
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 29)(1, "button", 65);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_37_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); ctx_r0.toggleDetails(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵtext(2);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(3, "svg", 66);
+    i0.ɵɵelement(4, "path", 36);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.learnMoreButtonClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.detailsExpanded() ? "Show Less" : "Learn More", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("chevron-rotate-expanded", ctx_r0.detailsExpanded());
 } }
 function InitialTargetSettingComponent_Conditional_38_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-area-chart", 24);
@@ -56674,33 +56582,16 @@ class InitialTargetSettingComponent {
         }, ...(ngDevMode ? [{ debugName: "percentageIncrease" }] : []));
         this.displayedMetricCalculations = computed(() => {
             const response = this.storedResponse();
-            const pacingData = this.pacingMetrics();
-            console.group('[PACING] displayedMetricCalculations computed');
-            console.log('[PACING] storedResponse exists:', !!response);
-            console.log('[PACING] pacingMetrics exists:', !!pacingData);
-            if (pacingData) {
-                console.log('[PACING] pacingMetrics summary:', {
-                    soFarMetricValuesCount: pacingData.soFarMetricValues?.length ?? 0,
-                    soFarMetrics: pacingData.soFarMetricValues?.map(m => ({ metric: m.metric, value: m.value })),
-                    projectedMetricValuesCount: pacingData.projectedMetricValues?.length ?? 0,
-                    lastYearMetricValuesMonthlyCount: pacingData.lastYearMetricValuesMonthly?.length ?? 0,
-                    lastYearUniqueMetrics: [...new Set(pacingData.lastYearMetricValuesMonthly?.map(m => m.metric))]
-                });
-            }
             if (!response) {
-                console.log('[PACING] No storedResponse - returning empty array');
-                console.groupEnd();
                 return [];
             }
             const results = [];
             if (response.funnelMetricValues) {
-                console.log('[PACING] Processing funnelMetricValues:', response.funnelMetricValues.length);
                 response.funnelMetricValues.forEach((metricValue) => {
                     const metric = metricValue.metric;
                     const funnelMetric = this.funnelMetrics().find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
                     const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
                     const { targetValue, percentageIncrease } = this.parseMetricValue(metricValue.value);
-                    console.log(`[PACING] Stage metric ${metric}:`, { currentValue, targetValue, percentageIncrease, funnelInd: funnelMetric?.funnelInd });
                     results.push({
                         metric,
                         funnelMetric: metric,
@@ -56715,7 +56606,6 @@ class InitialTargetSettingComponent {
                 });
             }
             if (response.relatedMetricTargets) {
-                console.log('[PACING] Processing relatedMetricTargets:', response.relatedMetricTargets.length);
                 response.relatedMetricTargets.forEach((metricValue) => {
                     const metric = metricValue.metric;
                     const funnelMetric = this.funnelMetrics().find(fm => fm.relatedMetric === metric);
@@ -56734,10 +56624,6 @@ class InitialTargetSettingComponent {
                     });
                 });
             }
-            console.log('[PACING] Final results count:', results.length);
-            console.log('[PACING] Stage metrics:', results.filter(r => r.isFunnelStage).map(r => r.metric));
-            console.log('[PACING] Related metrics:', results.filter(r => !r.isFunnelStage).map(r => r.metric));
-            console.groupEnd();
             return results;
         }, ...(ngDevMode ? [{ debugName: "displayedMetricCalculations" }] : []));
         this.displayedTargetRevenue = computed(() => {
@@ -57112,7 +56998,7 @@ class InitialTargetSettingComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 43, vars: 37, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "flex", "justify-center"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "mt-6", "flex", "justify-center"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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"], [1, "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"], targets: [1, "targets"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 43, vars: 37, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "click", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "chevron-rotate-expanded", "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "click", "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "flex", "justify-center"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "chevron-rotate", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "flex", "justify-end"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "font-bold", "transition-all", "duration-300", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "details-collapse"], [1, "details-collapse-content"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "click", "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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"], [1, "text-sm", "font-semibold", "transition-all", "inline-flex", "items-center", "gap-1", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "chevron-rotate"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 3);
@@ -57148,9 +57034,9 @@ class InitialTargetSettingComponent {
             i0.ɵɵconditionalCreate(32, InitialTargetSettingComponent_Conditional_32_Template, 1, 5, "symphiq-area-chart", 24)(33, InitialTargetSettingComponent_Conditional_33_Template, 3, 1, "div", 25);
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(34, "div", 26)(35, "div", 27);
-            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 31, 22, "div", 28);
+            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 30, 25, "div", 28);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 3, 1, "div", 29);
+            i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 5, 4, "div", 29);
             i0.ɵɵconditionalCreate(38, InitialTargetSettingComponent_Conditional_38_Template, 6, 3, "div", 30);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(39, "div", 31)(40, "div", 32);
@@ -57202,7 +57088,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 36 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.calculationState() === "results" && !ctx.detailsExpanded() ? 37 : -1);
+            i0.ɵɵconditional(ctx.calculationState() === "results" ? 37 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.calculationState() !== "results" ? 38 : -1);
             i0.ɵɵadvance();
@@ -57391,13 +57277,15 @@ class InitialTargetSettingComponent {
               <div class="calculated-card-content">
                 @if (calculatedRevenue() > 0) {
                   <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2 h-full">
-                    <div [class.space-y-6]="calculationState() !== 'results' || detailsExpanded()">
+                    <div [class.space-y-6]="calculationState() !== 'results'">
                       <div class="flex items-center justify-between">
                         <div>
                           <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
                             {{ currentYear() }} Revenue Target
                           </p>
-                          <p [ngClass]="calculatedValueClasses()" class="text-3xl font-bold">
+                          <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300"
+                            [class.text-3xl]="calculationState() !== 'results' || detailsExpanded()"
+                            [class.text-lg]="calculationState() === 'results' && !detailsExpanded()">
                             @if (calculationState() === 'results' && targets() === undefined && submittedAbsoluteInput() !== null) {
                               > {{ formatCurrency(submittedAbsoluteInput()!) }}
                             } @else {
@@ -57489,17 +57377,7 @@ class InitialTargetSettingComponent {
                             </div>
                           }
 
-                          @if (calculationState() === 'results' && detailsExpanded()) {
-                            <div class="mt-6 flex justify-center">
-                              <button
-                                (click)="toggleDetails(); $event.stopPropagation()"
-                                [ngClass]="learnMoreButtonClasses()"
-                                class="text-sm font-semibold transition-all">
-                                Show Less
-                              </button>
-                            </div>
-                          }
-                        </div>
+                          </div>
                       </div>
                     </div>
                   </div>
@@ -57508,13 +57386,21 @@ class InitialTargetSettingComponent {
             </div>
           </div>
 
-          @if (calculationState() === 'results' && !detailsExpanded()) {
+          @if (calculationState() === 'results') {
             <div class="flex justify-center">
               <button
                 (click)="toggleDetails(); $event.stopPropagation()"
                 [ngClass]="learnMoreButtonClasses()"
-                class="text-sm font-semibold transition-all">
-                Learn More
+                class="text-sm font-semibold transition-all inline-flex items-center gap-1">
+                {{ detailsExpanded() ? 'Show Less' : 'Learn More' }}
+                <svg
+                  class="w-4 h-4 chevron-rotate"
+                  [class.chevron-rotate-expanded]="detailsExpanded()"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
               </button>
             </div>
           }