@eric-emg/symphiq-components 1.2.200 → 1.2.201

package/fesm2022/symphiq-components.mjs

@@ -56430,26 +56430,49 @@ class InitialTargetSettingComponent {
         }, ...(ngDevMode ? [{ debugName: "percentageIncrease" }] : []));
         this.displayedMetricCalculations = computed(() => {
             const response = this.storedResponse();
-            if (!response || !response.relatedMetricTargets) {
+            if (!response) {
                 return [];
             }
-            return response.relatedMetricTargets.map((metricValue) => {
-                const metric = metricValue.metric;
-                const funnelMetric = this.funnelMetrics().find(fm => fm.relatedMetric === metric);
-                const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
-                const targetValue = parseFloat(metricValue.value || '0');
-                return {
-                    metric,
-                    funnelMetric: funnelMetric?.funnelMetric,
-                    currentValue,
-                    targetValue,
-                    percentageIncrease: response.equalRelatedMetricIncreasePercent || 0,
-                    isFunnelStage: funnelMetric?.funnelMetric === metric,
-                    funnelInd: funnelMetric?.funnelInd,
-                    relatedInd: funnelMetric?.relatedInd,
-                    description: funnelMetric?.relatedMetricDescription
-                };
-            });
+            const results = [];
+            if (response.funnelMetricValues) {
+                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);
+                    results.push({
+                        metric,
+                        funnelMetric: metric,
+                        currentValue,
+                        targetValue,
+                        percentageIncrease,
+                        isFunnelStage: true,
+                        funnelInd: funnelMetric?.funnelInd,
+                        relatedInd: 0,
+                        description: funnelMetric?.funnelMetricDescription
+                    });
+                });
+            }
+            if (response.relatedMetricTargets) {
+                response.relatedMetricTargets.forEach((metricValue) => {
+                    const metric = metricValue.metric;
+                    const funnelMetric = this.funnelMetrics().find(fm => fm.relatedMetric === metric);
+                    const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
+                    const { targetValue, percentageIncrease } = this.parseMetricValue(metricValue.value);
+                    results.push({
+                        metric,
+                        funnelMetric: funnelMetric?.funnelMetric,
+                        currentValue,
+                        targetValue,
+                        percentageIncrease: percentageIncrease || response.equalRelatedMetricIncreasePercent || 0,
+                        isFunnelStage: false,
+                        funnelInd: funnelMetric?.funnelInd,
+                        relatedInd: funnelMetric?.relatedInd,
+                        description: funnelMetric?.relatedMetricDescription
+                    });
+                });
+            }
+            return results;
         }, ...(ngDevMode ? [{ debugName: "displayedMetricCalculations" }] : []));
         this.displayedTargetRevenue = computed(() => {
             const response = this.storedResponse();
@@ -56523,6 +56546,28 @@ class InitialTargetSettingComponent {
             }
         }, { allowSignalWrites: true });
     }
+    parseMetricValue(value) {
+        if (!value)
+            return { targetValue: 0, percentageIncrease: 0 };
+        let targetValue = 0;
+        let percentageIncrease = 0;
+        const arrowMatch = value.match(/\([\d.,]+\s*->\s*([\d.,]+)\)/);
+        if (arrowMatch) {
+            targetValue = parseFloat(arrowMatch[1].replace(/,/g, ''));
+        }
+        const targetMatch = value.match(/target:\s*([\d.,]+)/);
+        if (targetMatch) {
+            targetValue = parseFloat(targetMatch[1].replace(/,/g, ''));
+        }
+        const percentMatch = value.match(/([-\d.]+)%\s*(increase|change|decrease)?/);
+        if (percentMatch) {
+            percentageIncrease = parseFloat(percentMatch[1]);
+        }
+        if (!arrowMatch && !targetMatch) {
+            targetValue = parseFloat(value.replace(/,/g, '')) || 0;
+        }
+        return { targetValue, percentageIncrease };
+    }
     ngAfterViewInit() {
         setTimeout(() => {
             this.absoluteInputRef?.nativeElement?.focus();
@@ -56802,214 +56847,214 @@ class InitialTargetSettingComponent {
                     AreaChartComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-8 pb-32">
-      <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
-        <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
-          Calculate Your Revenue Target
-        </h2>
-
-        <div class="grid lg:grid-cols-2 gap-8">
-          <div class="space-y-6">
-            <div>
-              <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                {{ currentYear() }} Revenue
-              </label>
-              <div class="space-y-1 mb-4">
-                <p [ngClass]="priorYearLabelClasses()" class="text-xs">
-                  {{ priorYear() }} Revenue: {{ formatCurrency(priorYearRevenue()) }}
-                </p>
-                @if (currentPaceProjection() > 0) {
-                  <p [ngClass]="priorYearLabelClasses()" class="text-xs">
-                    Current Pace Projection: {{ formatCurrency(currentPaceProjection()) }}
-                  </p>
-                }
-              </div>
-
-              <div class="flex gap-2 mb-4">
-                <button
-                  (click)="setInputMode('absolute')"
-                  [ngClass]="inputModeButtonClasses('absolute')"
-                  class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
-                  Absolute Amount
-                </button>
-                <button
-                  (click)="setInputMode('percentage')"
-                  [ngClass]="inputModeButtonClasses('percentage')"
-                  class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
-                  % Increase
-                </button>
-              </div>
-
-              @if (inputMode() === 'absolute') {
-                <div class="relative">
-                  <span [ngClass]="inputPrefixClasses()" class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-bold">
-                    $
-                  </span>
-                  <input
-                    #absoluteInputRef
-                    type="number"
-                    [(ngModel)]="absoluteInput"
-                    (ngModelChange)="onAbsoluteInputChange()"
-                    [ngClass]="inputClasses()"
-                    class="w-full pl-10 pr-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
-                    placeholder="0"
-                    min="0"
-                    step="1000">
-                </div>
-              } @else {
-                <div class="relative">
-                  <input
-                    #percentageInputRef
-                    type="number"
-                    [(ngModel)]="percentageInput"
-                    (ngModelChange)="onPercentageInputChange()"
-                    [ngClass]="inputClasses()"
-                    class="w-full pr-10 pl-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
-                    placeholder="0"
-                    min="0"
-                    max="1000"
-                    step="0.1">
-                  <span [ngClass]="inputSuffixClasses()" class="absolute right-4 top-1/2 -translate-y-1/2 text-xl font-bold">
-                    %
-                  </span>
-                </div>
-              }
-            </div>
-
-            @if (calculatedRevenue() > 0) {
-              <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2">
-                <div class="space-y-4">
-                  <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">
-                      {{ formatCurrency(calculatedRevenue()) }}
-                    </p>
-                  </div>
-                  <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
-                    <div>
-                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                        Increase Amount
-                      </p>
-                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                        {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
-                      </p>
-                    </div>
-                    <div>
-                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                        % Growth
-                      </p>
-                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                        +{{ formatPercentage(percentageIncrease(), 1) }}
-                      </p>
-                    </div>
-                  </div>
-                  @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
-                    <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
-                      <div>
-                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                          Gap to Close
-                        </p>
-                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                          {{ formatCurrency(absValue(gapToClose().amount)) }}
-                        </p>
-                      </div>
-                      <div>
-                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                          Additional Growth Needed
-                        </p>
-                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                          {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
-                        </p>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-
-          <div>
-            <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
-              Year-over-Year Revenue Trend
-            </p>
-            <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
-              @if (revenueChartData()) {
-                <symphiq-area-chart
-                  [chart]="revenueChartData()!"
-                  [showAxisLabels]="true"
-                  [viewMode]="viewMode()"
-                  [currencySymbol]="'$'"
-                  [height]="'320px'"
-                />
-              } @else {
-                <div class="h-64 flex items-center justify-center">
-                  <p [ngClass]="noDataClasses()" class="text-sm">
-                    No revenue data available
-                  </p>
-                </div>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-
-      @if (showMetricsVisualization()) {
-        <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
-          <div class="mb-6">
-            <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-              Contributing Metrics
-            </h2>
-            <p [ngClass]="sectionDescriptionClasses()" class="text-sm">
-              To achieve your revenue target of {{ formatCurrency(displayedTargetRevenue()) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
-            </p>
-          </div>
-
-          <symphiq-funnel-metrics-visualization
-            [viewMode]="viewMode()"
-            [calculations]="displayedMetricCalculations()"
-            [pacingMetrics]="pacingMetrics()"
-          />
-        </div>
-      }
-
-      <symphiq-sticky-submit-bar
-        [viewMode]="viewMode()"
-        [isValid]="isValid()"
-        [isSubmitting]="isCalculating()"
-        [validationMessage]="validationMessage()"
-        [buttonText]="submitButtonText()"
-        (submitClick)="handleSubmitClick()"
-      />
-
-      @if (calculationState() === 'results') {
-        <div class="fixed bottom-24 left-0 right-0 z-40 pb-4 px-4">
-          <div class="max-w-7xl mx-auto flex gap-4 justify-center">
-            <button
-              (click)="handleAdjustTarget()"
-              [ngClass]="secondaryButtonClasses()"
-              class="px-6 py-3 rounded-xl font-semibold transition-all shadow-lg">
-              Adjust Revenue Target
-            </button>
-          </div>
-        </div>
-      }
-
-      @if (calculationState() === 'input' && hasStoredResponse()) {
-        <div class="fixed bottom-32 left-0 right-0 z-40 pb-4 px-4">
-          <div class="max-w-7xl mx-auto flex gap-4 justify-center">
-            <button
-              (click)="handleCancel()"
-              [ngClass]="cancelButtonClasses()"
-              class="px-6 py-3 rounded-xl font-semibold transition-all shadow-lg">
-              Cancel
-            </button>
-          </div>
-        </div>
-      }
-    </div>
+                template: `
+    <div class="space-y-8 pb-32">
+      <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
+        <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
+          Calculate Your Revenue Target
+        </h2>
+
+        <div class="grid lg:grid-cols-2 gap-8">
+          <div class="space-y-6">
+            <div>
+              <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                {{ currentYear() }} Revenue
+              </label>
+              <div class="space-y-1 mb-4">
+                <p [ngClass]="priorYearLabelClasses()" class="text-xs">
+                  {{ priorYear() }} Revenue: {{ formatCurrency(priorYearRevenue()) }}
+                </p>
+                @if (currentPaceProjection() > 0) {
+                  <p [ngClass]="priorYearLabelClasses()" class="text-xs">
+                    Current Pace Projection: {{ formatCurrency(currentPaceProjection()) }}
+                  </p>
+                }
+              </div>
+
+              <div class="flex gap-2 mb-4">
+                <button
+                  (click)="setInputMode('absolute')"
+                  [ngClass]="inputModeButtonClasses('absolute')"
+                  class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
+                  Absolute Amount
+                </button>
+                <button
+                  (click)="setInputMode('percentage')"
+                  [ngClass]="inputModeButtonClasses('percentage')"
+                  class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold transition-all">
+                  % Increase
+                </button>
+              </div>
+
+              @if (inputMode() === 'absolute') {
+                <div class="relative">
+                  <span [ngClass]="inputPrefixClasses()" class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-bold">
+                    $
+                  </span>
+                  <input
+                    #absoluteInputRef
+                    type="number"
+                    [(ngModel)]="absoluteInput"
+                    (ngModelChange)="onAbsoluteInputChange()"
+                    [ngClass]="inputClasses()"
+                    class="w-full pl-10 pr-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
+                    placeholder="0"
+                    min="0"
+                    step="1000">
+                </div>
+              } @else {
+                <div class="relative">
+                  <input
+                    #percentageInputRef
+                    type="number"
+                    [(ngModel)]="percentageInput"
+                    (ngModelChange)="onPercentageInputChange()"
+                    [ngClass]="inputClasses()"
+                    class="w-full pr-10 pl-4 py-4 rounded-xl text-2xl font-bold border-2 transition-all"
+                    placeholder="0"
+                    min="0"
+                    max="1000"
+                    step="0.1">
+                  <span [ngClass]="inputSuffixClasses()" class="absolute right-4 top-1/2 -translate-y-1/2 text-xl font-bold">
+                    %
+                  </span>
+                </div>
+              }
+            </div>
+
+            @if (calculatedRevenue() > 0) {
+              <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2">
+                <div class="space-y-4">
+                  <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">
+                      {{ formatCurrency(calculatedRevenue()) }}
+                    </p>
+                  </div>
+                  <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
+                    <div>
+                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                        Increase Amount
+                      </p>
+                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                        {{ formatCurrency(calculatedRevenue() - priorYearRevenue()) }}
+                      </p>
+                    </div>
+                    <div>
+                      <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                        % Growth
+                      </p>
+                      <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                        +{{ formatPercentage(percentageIncrease(), 1) }}
+                      </p>
+                    </div>
+                  </div>
+                  @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
+                    <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
+                      <div>
+                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                          Gap to Close
+                        </p>
+                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                          {{ formatCurrency(absValue(gapToClose().amount)) }}
+                        </p>
+                      </div>
+                      <div>
+                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                          Additional Growth Needed
+                        </p>
+                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                          {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
+                        </p>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+
+          <div>
+            <p [ngClass]="chartTitleClasses()" class="text-sm font-semibold mb-3">
+              Year-over-Year Revenue Trend
+            </p>
+            <div [ngClass]="chartContainerClasses()" class="rounded-xl border p-4">
+              @if (revenueChartData()) {
+                <symphiq-area-chart
+                  [chart]="revenueChartData()!"
+                  [showAxisLabels]="true"
+                  [viewMode]="viewMode()"
+                  [currencySymbol]="'$'"
+                  [height]="'320px'"
+                />
+              } @else {
+                <div class="h-64 flex items-center justify-center">
+                  <p [ngClass]="noDataClasses()" class="text-sm">
+                    No revenue data available
+                  </p>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+
+      @if (showMetricsVisualization()) {
+        <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
+          <div class="mb-6">
+            <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+              Contributing Metrics
+            </h2>
+            <p [ngClass]="sectionDescriptionClasses()" class="text-sm">
+              To achieve your revenue target of {{ formatCurrency(displayedTargetRevenue()) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
+            </p>
+          </div>
+
+          <symphiq-funnel-metrics-visualization
+            [viewMode]="viewMode()"
+            [calculations]="displayedMetricCalculations()"
+            [pacingMetrics]="pacingMetrics()"
+          />
+        </div>
+      }
+
+      <symphiq-sticky-submit-bar
+        [viewMode]="viewMode()"
+        [isValid]="isValid()"
+        [isSubmitting]="isCalculating()"
+        [validationMessage]="validationMessage()"
+        [buttonText]="submitButtonText()"
+        (submitClick)="handleSubmitClick()"
+      />
+
+      @if (calculationState() === 'results') {
+        <div class="fixed bottom-24 left-0 right-0 z-40 pb-4 px-4">
+          <div class="max-w-7xl mx-auto flex gap-4 justify-center">
+            <button
+              (click)="handleAdjustTarget()"
+              [ngClass]="secondaryButtonClasses()"
+              class="px-6 py-3 rounded-xl font-semibold transition-all shadow-lg">
+              Adjust Revenue Target
+            </button>
+          </div>
+        </div>
+      }
+
+      @if (calculationState() === 'input' && hasStoredResponse()) {
+        <div class="fixed bottom-32 left-0 right-0 z-40 pb-4 px-4">
+          <div class="max-w-7xl mx-auto flex gap-4 justify-center">
+            <button
+              (click)="handleCancel()"
+              [ngClass]="cancelButtonClasses()"
+              class="px-6 py-3 rounded-xl font-semibold transition-all shadow-lg">
+              Cancel
+            </button>
+          </div>
+        </div>
+      }
+    </div>
   `
             }]
     }], () => [], { absoluteInputRef: [{