@eric-emg/symphiq-components 1.2.185 → 1.2.187

package/fesm2022/symphiq-components.mjs

@@ -56933,10 +56933,11 @@ class AreaChartComponent {
         this.showAxisLabels = input(false, ...(ngDevMode ? [{ debugName: "showAxisLabels" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.currencySymbol = input('$', ...(ngDevMode ? [{ debugName: "currencySymbol" }] : []));
+        this.height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : []));
         // Memoized computed signals to avoid recalculation on every change detection
-        this.chartHeight = computed(() => this.showAxisLabels()
+        this.chartHeight = computed(() => this.height() ?? (this.showAxisLabels()
             ? ChartConstants.HEIGHT.EXPANDED.AREA
-            : ChartConstants.HEIGHT.COMPACT.AREA, ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
+            : ChartConstants.HEIGHT.COMPACT.AREA), ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
         this.cursorColor = computed(() => this.viewMode() === ViewModeEnum.DARK
             ? ChartConstants.COLORS.CURSOR.DARK
             : ChartConstants.COLORS.CURSOR.LIGHT, ...(ngDevMode ? [{ debugName: "cursorColor" }] : []));
@@ -57238,7 +57239,7 @@ class AreaChartComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
-        } }, inputs: { chart: [1, "chart"], showAxisLabels: [1, "showAxisLabels"], viewMode: [1, "viewMode"], currencySymbol: [1, "currencySymbol"] }, decls: 3, vars: 4, consts: [["chartdiv", ""], [1, "chart-container"], [1, "chart", 2, "width", "100%"]], template: function AreaChartComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { chart: [1, "chart"], showAxisLabels: [1, "showAxisLabels"], viewMode: [1, "viewMode"], currencySymbol: [1, "currencySymbol"], height: [1, "height"] }, decls: 3, vars: 4, consts: [["chartdiv", ""], [1, "chart-container"], [1, "chart", 2, "width", "100%"]], template: function AreaChartComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 1);
             i0.ɵɵdomElement(1, "div", 2, 0);
             i0.ɵɵdomElementEnd();
@@ -57250,12 +57251,12 @@ class AreaChartComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AreaChartComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-area-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="chart-container" [class.mini-mode]="!showAxisLabels()">
-      <div #chartdiv class="chart" [style.height]="chartHeight()" style="width: 100%;"></div>
-    </div>
+        args: [{ selector: 'symphiq-area-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="chart-container" [class.mini-mode]="!showAxisLabels()">
+      <div #chartdiv class="chart" [style.height]="chartHeight()" style="width: 100%;"></div>
+    </div>
   `, styles: [".chart-container{width:100%;padding:1rem}.chart-container.mini-mode{padding:.25rem}\n"] }]
-    }], () => [], { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], showAxisLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxisLabels", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], chartDiv: [{
+    }], () => [], { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], showAxisLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxisLabels", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], chartDiv: [{
             type: ViewChild,
             args: ['chartdiv', { static: true }]
         }] }); })();
@@ -57278,17 +57279,43 @@ function calculateMetricTargetsFromRevenue(revenueTarget, priorYearRevenue, funn
         const bRelated = b.relatedInd ?? 999;
         return aRelated - bRelated;
     });
+    const funnelStages = new Set();
+    const relatedMetricsPerStage = new Map();
+    sortedFunnelMetrics.forEach((fm) => {
+        const funnelInd = fm.funnelInd ?? 0;
+        funnelStages.add(funnelInd);
+        const isFunnelStage = fm.funnelMetric === fm.relatedMetric;
+        if (!isFunnelStage) {
+            relatedMetricsPerStage.set(funnelInd, (relatedMetricsPerStage.get(funnelInd) || 0) + 1);
+        }
+    });
+    const numFunnelStages = funnelStages.size;
+    const revenueMultiplier = 1 + revenuePercentageIncrease / 100;
+    const perStageMultiplier = Math.pow(revenueMultiplier, 1 / numFunnelStages);
+    const funnelStagePercentageIncrease = (perStageMultiplier - 1) * 100;
     sortedFunnelMetrics.forEach((funnelMetric) => {
         const metric = funnelMetric.relatedMetric;
         if (!metric)
             return;
         const currentValue = baselineValues.get(metric) || 0;
-        let percentageIncrease = revenuePercentageIncrease;
         const isFunnelStage = funnelMetric.funnelMetric === metric;
-        if (!isFunnelStage) {
-            percentageIncrease = revenuePercentageIncrease * 0.8;
+        const funnelInd = funnelMetric.funnelInd ?? 0;
+        const isBounceRate = metric === MetricEnum.BOUNCE_RATE;
+        let percentageIncrease;
+        let targetValue;
+        if (isBounceRate) {
+            percentageIncrease = -funnelStagePercentageIncrease;
+            targetValue = currentValue * (1 + percentageIncrease / 100);
+        }
+        else if (isFunnelStage) {
+            percentageIncrease = funnelStagePercentageIncrease;
+            targetValue = currentValue * (1 + percentageIncrease / 100);
+        }
+        else {
+            const numRelatedInStage = relatedMetricsPerStage.get(funnelInd) || 1;
+            percentageIncrease = funnelStagePercentageIncrease / numRelatedInStage;
+            targetValue = currentValue * (1 + percentageIncrease / 100);
         }
-        const targetValue = currentValue * (1 + percentageIncrease / 100);
         metricCalculations.push({
             metric,
             funnelMetric: funnelMetric.funnelMetric,
@@ -57667,7 +57694,7 @@ function InitialTargetSettingComponent_Conditional_25_Template(rf, ctx) { if (rf
     i0.ɵɵelement(0, "symphiq-area-chart", 15);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$");
+    i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
 } }
 function InitialTargetSettingComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16)(1, "p", 27);
@@ -57945,7 +57972,7 @@ class InitialTargetSettingComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"] }, outputs: { targetsCreated: "targetsCreated" }, decls: 29, vars: 21, consts: [["absoluteInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "space-y-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "space-y-1", "mb-4"], [1, "text-xs", 3, "ngClass"], [1, "flex", "gap-2", "mb-4"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "h-64", "flex", "items-center", "justify-center"], [3, "submitClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText"], [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, "space-y-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-4", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "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"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"] }, outputs: { targetsCreated: "targetsCreated" }, decls: 29, vars: 21, consts: [["absoluteInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "space-y-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "space-y-1", "mb-4"], [1, "text-xs", 3, "ngClass"], [1, "flex", "gap-2", "mb-4"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [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"], [3, "submitClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText"], [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, "space-y-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-4", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "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) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h2", 3);
             i0.ɵɵtext(3, " Calculate Your Revenue Target ");
             i0.ɵɵelementEnd();
@@ -57973,7 +58000,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵtext(23, " Year-over-Year Revenue Trend ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(24, "div", 14);
-            i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 1, 4, "symphiq-area-chart", 15)(26, InitialTargetSettingComponent_Conditional_26_Template, 3, 1, "div", 16);
+            i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 1, 5, "symphiq-area-chart", 15)(26, InitialTargetSettingComponent_Conditional_26_Template, 3, 1, "div", 16);
             i0.ɵɵelementEnd()()()();
             i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_27_Template, 7, 7, "div", 2);
             i0.ɵɵelementStart(28, "symphiq-sticky-submit-bar", 17);
@@ -58168,6 +58195,7 @@ class InitialTargetSettingComponent {
                   [showAxisLabels]="true"
                   [viewMode]="viewMode()"
                   [currencySymbol]="'$'"
+                  [height]="'320px'"
                 />
               } @else {
                 <div class="h-64 flex items-center justify-center">
@@ -58215,7 +58243,7 @@ class InitialTargetSettingComponent {
             type: ViewChild,
             args: ['absoluteInputRef']
         }], 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 }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", 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 }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 216 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 217 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);