@eric-emg/symphiq-components 1.2.265 → 1.2.267

package/fesm2022/symphiq-components.mjs

@@ -59087,13 +59087,13 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
     i0.ɵɵelement(5, "div", 46);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 48)(7, "div")(8, "p", 49);
-    i0.ɵɵtext(9, " Gap to Close ");
+    i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "p", 50);
     i0.ɵɵconditionalCreate(11, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_11_Template, 1, 1)(12, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Conditional_12_Template, 1, 0);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(13, "div")(14, "div", 51)(15, "p", 21);
-    i0.ɵɵtext(16, " Additional Growth Needed ");
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(17, "button", 33);
     i0.ɵɵlistener("click", function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Template_button_click_17_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
@@ -59112,19 +59112,23 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.dividerLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " YTD Gap ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.gapDividerLabel(), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.dividerBorderClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.gapLabel(), " ");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isTargetValid() ? 11 : 12);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.additionalGrowthTooltip);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.gapPercentageLabel(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.gapTooltip());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
     i0.ɵɵadvance();
@@ -59156,7 +59160,7 @@ function EditMetricTargetModalComponent_Conditional_0_Conditional_36_Template(rf
     i0.ɵɵelementStart(22, "p", 50);
     i0.ɵɵconditionalCreate(23, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_23_Template, 1, 2)(24, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_24_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(25, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Template, 23, 12, "div", 44);
+    i0.ɵɵconditionalCreate(25, EditMetricTargetModalComponent_Conditional_0_Conditional_36_Conditional_25_Template, 23, 14, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -59420,14 +59424,43 @@ class EditMetricTargetModalComponent {
             const percentage = (amount / projection) * 100;
             return { amount, percentage };
         }, ...(ngDevMode ? [{ debugName: "gapToClose" }] : []));
+        this.isPaceAhead = computed(() => {
+            const target = this.calculatedTarget();
+            const projection = this.currentPaceProjection();
+            if (target === 0 || projection === 0)
+                return false;
+            if (this.isIncreaseBad()) {
+                return projection < target;
+            }
+            return projection > target;
+        }, ...(ngDevMode ? [{ debugName: "isPaceAhead" }] : []));
+        this.gapLabel = computed(() => {
+            return this.isPaceAhead() ? 'Ahead by' : 'Gap to Close';
+        }, ...(ngDevMode ? [{ debugName: "gapLabel" }] : []));
+        this.gapPercentageLabel = computed(() => {
+            return this.isPaceAhead() ? 'Ahead of Target' : 'Additional Growth Needed';
+        }, ...(ngDevMode ? [{ debugName: "gapPercentageLabel" }] : []));
+        this.gapDividerLabel = computed(() => {
+            return this.isPaceAhead()
+                ? `${this.currentYear()} Pace Status`
+                : `${this.currentYear()} YTD Gap`;
+        }, ...(ngDevMode ? [{ debugName: "gapDividerLabel" }] : []));
+        this.gapTooltip = computed(() => {
+            if (this.isPaceAhead()) {
+                return {
+                    title: 'Ahead of Target',
+                    markdown: 'This percentage represents how far ahead your current projected pace is compared to your target. You are on track to exceed your goal if you maintain your current performance.'
+                };
+            }
+            return {
+                title: 'Additional Growth Needed',
+                markdown: 'This percentage represents the additional improvement required beyond your current projected pace to reach your target. It shows how much more change is needed to close the gap between your projected performance and your goal.'
+            };
+        }, ...(ngDevMode ? [{ debugName: "gapTooltip" }] : []));
         this.currentPaceProjectionTooltip = {
             title: 'Current Pace Projection',
             markdown: 'This is your projected year-end value based on your current performance trends. It extrapolates your year-to-date results to estimate where you will finish the year if you maintain your current pace.'
         };
-        this.additionalGrowthTooltip = {
-            title: 'Additional Growth Needed',
-            markdown: 'This percentage represents the additional improvement required beyond your current projected pace to reach your target. It shows how much more change is needed to close the gap between your projected performance and your goal.'
-        };
         effect(() => {
             if (this.isOpen()) {
                 const metricData = this.metricData();
@@ -59535,7 +59568,7 @@ class EditMetricTargetModalComponent {
                     normalizedAbsolute = currentAbsolute / 100;
                 }
                 const percentageChange = ((normalizedAbsolute - priorValue) / priorValue) * 100;
-                this.percentageInput.set(Math.abs(percentageChange));
+                this.percentageInput.set(Math.round(Math.abs(percentageChange) * 100) / 100);
             }
         }
         this.updateAnimatedValuesImmediate();
@@ -60022,14 +60055,14 @@ class EditMetricTargetModalComponent {
                         <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
                           <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
                           <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
-                            {{ currentYear() }} YTD Gap
+                            {{ gapDividerLabel() }}
                           </span>
                           <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
                         </div>
                         <div class="grid grid-cols-2 gap-4 pt-2">
                           <div>
                             <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                              Gap to Close
+                              {{ gapLabel() }}
                             </p>
                             <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
                               @if (isTargetValid()) {
@@ -60042,13 +60075,13 @@ class EditMetricTargetModalComponent {
                           <div>
                             <div class="flex items-center gap-1 mb-1">
                               <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                                Additional Growth Needed
+                                {{ gapPercentageLabel() }}
                               </p>
                               <button
                                 type="button"
                                 [ngClass]="infoIconClasses()"
                                 class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
-                                [libSymphiqTooltip]="additionalGrowthTooltip"
+                                [libSymphiqTooltip]="gapTooltip()"
                                 tooltipType="markdown"
                                 tooltipPosition="top"
                                 (click)="$event.stopPropagation()">
@@ -60828,7 +60861,17 @@ class InitialTargetSettingComponent {
                 continue;
             const targetValue = target.amount ?? 0;
             const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
-            const percentageIncrease = currentValue > 0 ? ((targetValue - currentValue) / currentValue) * 100 : 0;
+            const isPercentageMetric = MetricEnumUtil.numberType(metric) === NumberTypeEnum.PERCENTAGE;
+            let percentageIncrease = 0;
+            if (currentValue > 0) {
+                if (isPercentageMetric) {
+                    const normalizedCurrent = currentValue * 100;
+                    percentageIncrease = ((targetValue - normalizedCurrent) / normalizedCurrent) * 100;
+                }
+                else {
+                    percentageIncrease = ((targetValue - currentValue) / currentValue) * 100;
+                }
+            }
             const funnelMetricMatch = funnelMetrics.find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
             const relatedMetricMatch = funnelMetrics.find(fm => fm.relatedMetric === metric && fm.funnelMetric !== fm.relatedMetric);
             if (funnelMetricMatch) {
@@ -61758,7 +61801,7 @@ class InitialTargetSettingComponent {
             type: ViewChild,
             args: ['percentageInputRef']
         }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], reverseCalculationResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseCalculationResponse", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }], saveTargetsClick: [{ type: i0.Output, args: ["saveTargetsClick"] }], discardChangesClick: [{ type: i0.Output, args: ["discardChangesClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 576 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 578 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);