@eric-emg/symphiq-components 1.2.251 → 1.2.253

package/fesm2022/symphiq-components.mjs

@@ -54881,16 +54881,12 @@ class PacingStatusBadgeComponent {
             return status === 'ahead' ? -1 : status === 'behind' ? 1 : 0;
         }, ...(ngDevMode ? [{ debugName: "targetRotation" }] : []));
         this.rotationStyle = computed(() => {
-            const progress = this.animationProgress();
             const target = this.targetRotation();
-            const currentRotation = progress * target;
-            return `rotate(${currentRotation}deg)`;
+            return `rotate(${target}deg)`;
         }, ...(ngDevMode ? [{ debugName: "rotationStyle" }] : []));
         this.fullBadgeRotationStyle = computed(() => {
-            const progress = this.animationProgress();
             const target = this.targetRotation();
-            const currentRotation = progress * target;
-            return `rotate(${currentRotation}deg)`;
+            return `rotate(${target}deg)`;
         }, ...(ngDevMode ? [{ debugName: "fullBadgeRotationStyle" }] : []));
         this.containerSizeClasses = computed(() => {
             const compact = this.isCompact();
@@ -55041,37 +55037,37 @@ class PacingStatusBadgeComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    @if (showEmphasizedPercentage() && hasPercentage()) {
-      <div
-        [ngClass]="containerClasses()"
-        [class]="containerSizeClasses()"
-        [style.transform]="rotationStyle()"
-      >
-        <div [ngClass]="overlayBadgeClasses()" [class]="overlaySizeClasses()">
-          <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
-            {{ iconSymbol() }}
-          </span>
-          {{ animatedPercentage() }}
-        </div>
-        <div
-          [class]="sizeClasses()"
-        >
-          <span>{{ displayTextWithoutPercentage() }}</span>
-        </div>
-      </div>
-    } @else {
-      <div
-        [ngClass]="badgeClasses()"
-        [class]="fullBadgeSizeClasses()"
-        [style.transform]="fullBadgeRotationStyle()"
-      >
-        <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
-          {{ iconSymbol() }}
-        </span>
-        <span>{{ displayText() }}</span>
-      </div>
-    }
+                template: `
+    @if (showEmphasizedPercentage() && hasPercentage()) {
+      <div
+        [ngClass]="containerClasses()"
+        [class]="containerSizeClasses()"
+        [style.transform]="rotationStyle()"
+      >
+        <div [ngClass]="overlayBadgeClasses()" [class]="overlaySizeClasses()">
+          <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
+            {{ iconSymbol() }}
+          </span>
+          {{ animatedPercentage() }}
+        </div>
+        <div
+          [class]="sizeClasses()"
+        >
+          <span>{{ displayTextWithoutPercentage() }}</span>
+        </div>
+      </div>
+    } @else {
+      <div
+        [ngClass]="badgeClasses()"
+        [class]="fullBadgeSizeClasses()"
+        [style.transform]="fullBadgeRotationStyle()"
+      >
+        <span [ngClass]="iconClasses()" [class]="iconSizeClasses()">
+          {{ iconSymbol() }}
+        </span>
+        <span>{{ displayText() }}</span>
+      </div>
+    }
   `
             }]
     }], () => [{ type: i0.ElementRef }], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pacingPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingPercentage", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showAsFullText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsFullText", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }], showEmphasizedPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmphasizedPercentage", required: false }] }] }); })();
@@ -55125,10 +55121,8 @@ class TargetChangeBadgeComponent {
             return change > 0 ? -1 : change < 0 ? 1 : 0;
         }, ...(ngDevMode ? [{ debugName: "targetRotation" }] : []));
         this.rotationStyle = computed(() => {
-            const progress = this.animationProgress();
             const target = this.targetRotation();
-            const currentRotation = progress * target;
-            return `rotate(${currentRotation}deg)`;
+            return `rotate(${target}deg)`;
         }, ...(ngDevMode ? [{ debugName: "rotationStyle" }] : []));
         this.containerSizeClasses = computed(() => {
             const compact = this.isCompact();
@@ -55236,20 +55230,20 @@ class TargetChangeBadgeComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div
-      [ngClass]="containerClasses()"
-      [class]="containerSizeClasses()"
-      [style.transform]="rotationStyle()"
-    >
-      <div [ngClass]="overlayClasses()" [class]="overlaySizeClasses()">
-        <span [class]="iconSizeClass()">{{ iconSymbol() }}</span>
-        {{ animatedPercentageText() }}
-      </div>
-      <div [class]="descriptionSizeClasses()">
-        {{ descriptionText() }}
-      </div>
-    </div>
+                template: `
+    <div
+      [ngClass]="containerClasses()"
+      [class]="containerSizeClasses()"
+      [style.transform]="rotationStyle()"
+    >
+      <div [ngClass]="overlayClasses()" [class]="overlaySizeClasses()">
+        <span [class]="iconSizeClass()">{{ iconSymbol() }}</span>
+        {{ animatedPercentageText() }}
+      </div>
+      <div [class]="descriptionSizeClasses()">
+        {{ descriptionText() }}
+      </div>
+    </div>
   `
             }]
     }], () => [{ type: i0.ElementRef }], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], percentageChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageChange", required: false }] }], metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: false }] }], priorYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "priorYear", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }] }); })();
@@ -55889,7 +55883,7 @@ function StickySubmitBarComponent_Conditional_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(3, "p", 10);
-    i0.ɵɵtext(4, " Ready to set your targets ");
+    i0.ɵɵtext(4, " Ready to save your targets ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -55913,7 +55907,7 @@ function StickySubmitBarComponent_Conditional_9_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "Setting Targets...");
+    i0.ɵɵtext(4, "Saving Targets...");
     i0.ɵɵelementEnd();
 } }
 function StickySubmitBarComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
@@ -55935,7 +55929,7 @@ class StickySubmitBarComponent {
         this.isValid = input(false, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
         this.isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
         this.validationMessage = input('', ...(ngDevMode ? [{ debugName: "validationMessage" }] : []));
-        this.buttonText = input('Set Revenue Targets', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
+        this.buttonText = input('Save Metric Targets', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
         this.showCancelButton = input(false, ...(ngDevMode ? [{ debugName: "showCancelButton" }] : []));
         this.submitClick = output();
         this.cancelClick = output();
@@ -56026,7 +56020,7 @@ class StickySubmitBarComponent {
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>
                 <p [ngClass]="readyMessageClasses()" class="text-sm font-medium">
-                  Ready to set your targets
+                  Ready to save your targets
                 </p>
               </div>
             }
@@ -56051,7 +56045,7 @@ class StickySubmitBarComponent {
                   <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                   <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
-                <span>Setting Targets...</span>
+                <span>Saving Targets...</span>
               } @else {
                 <span>{{ buttonText() }}</span>
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -56695,8 +56689,9 @@ class LineChartComponent {
         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() ? '500px' : '133px', ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
+        this.chartHeight = computed(() => this.height() ?? (this.showAxisLabels() ? '500px' : '133px'), ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
         this.cursorColor = computed(() => this.viewMode() === ViewModeEnum.DARK ? 0xffffff : 0x94a3b8, ...(ngDevMode ? [{ debugName: "cursorColor" }] : []));
         this.tooltipTextColor = computed(() => this.viewMode() === ViewModeEnum.DARK ? 0xffffff : 0x000000, ...(ngDevMode ? [{ debugName: "tooltipTextColor" }] : []));
         this.chartHash = computed(() => this.generateChartHash(this.chart()), ...(ngDevMode ? [{ debugName: "chartHash" }] : []));
@@ -57141,7 +57136,7 @@ class LineChartComponent {
         } 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 LineChartComponent_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 LineChartComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 1);
             i0.ɵɵdomElement(1, "div", 2, 0);
             i0.ɵɵdomElementEnd();
@@ -57153,12 +57148,12 @@ class LineChartComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineChartComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-line-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-line-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 }]
         }] }); })();
@@ -57445,7 +57440,7 @@ class ProgressToTargetChartComponent {
 
 const _forTrack0$i = ($index, $item) => $item.metric;
 function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵelementStart(0, "button", 10);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(1, "svg", 33);
     i0.ɵɵelement(2, "path", 34);
@@ -57454,22 +57449,20 @@ function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ct
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.headerInfoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(ctx_r1.metricData().description, ctx_r1.metricTitle()));
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-target-change-badge", 23);
+function MetricReportModalComponent_Conditional_0_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-target-change-badge", 22);
 } if (rf & 2) {
     let tmp_4_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("percentageChange", ctx_r1.ytdChangePercentage())("metric", ((tmp_4_0 = ctx_r1.metricData()) == null ? null : tmp_4_0.metric) || "")("priorYear", ctx_r1.priorYear())("isCompact", true);
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 25);
+function MetricReportModalComponent_Conditional_0_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 22);
+    i0.ɵɵelementStart(3, "p", 23);
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-pacing-status-badge", 35);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_5_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57481,17 +57474,37 @@ function MetricReportModalComponent_Conditional_0_Conditional_48_Template(rf, ct
     i0.ɵɵproperty("ngClass", ctx_r1.projectedValueClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.pacingInfo().projectedValue, ((tmp_5_0 = ctx_r1.metricData()) == null ? null : tmp_5_0.metric) || "", false), " ");
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_53_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "p", 24);
+    i0.ɵɵtext(2, " Year-over-Year Trend ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 35);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_53_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openExpandedChart(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(4, "symphiq-area-chart", 36);
+    i0.ɵɵelementStart(5, "div", 37);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(6, "svg", 38);
+    i0.ɵɵelement(7, "path", 39);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("chart", ctx_r1.trendChartData())("showAxisLabels", false)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "80px");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", ctx_r1.pacingInfo().pacingPercentage)("status", ctx_r1.pacingInfo().status)("showAsFullText", false)("isCompact", true)("showEmphasizedPercentage", true);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandIconClasses());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵelement(1, "symphiq-pacing-status-badge", 35);
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "symphiq-pacing-status-badge", 40);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 26)(3, "p", 29);
+    i0.ɵɵelementStart(2, "div", 25)(3, "p", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "symphiq-progress-to-target-chart", 36);
+    i0.ɵɵelement(5, "symphiq-progress-to-target-chart", 41);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -57504,64 +57517,64 @@ function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ct
     i0.ɵɵproperty("data", ctx_r1.progressToTargetData())("viewMode", ctx_r1.viewMode());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 46);
+    i0.ɵɵelementStart(0, "button", 10);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 52);
+    i0.ɵɵelementStart(1, "svg", 56);
     i0.ɵɵelement(2, "path", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const metric_r3 = i0.ɵɵnextContext().$implicit;
+    const metric_r4 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.description, ctx_r1.getMetricTitle(metric_r3)));
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r4.description, ctx_r1.getMetricTitle(metric_r4)));
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 42)(1, "td", 43)(2, "div", 44)(3, "span", 45);
+    i0.ɵɵelementStart(0, "tr", 47)(1, "td", 48)(2, "div", 49)(3, "span", 50);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 46);
+    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "td", 47)(7, "span", 48);
+    i0.ɵɵelementStart(6, "td", 51)(7, "span", 52);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 47)(10, "div", 49)(11, "span", 45);
+    i0.ɵɵelementStart(9, "td", 51)(10, "div", 53)(11, "span", 50);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(13, "svg", 50);
-    i0.ɵɵelement(14, "path", 51);
+    i0.ɵɵelementStart(13, "svg", 54);
+    i0.ɵɵelement(14, "path", 55);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const metric_r3 = ctx.$implicit;
+    const metric_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.tableRowClasses());
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(metric_r3));
+    i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(metric_r4));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.description ? 5 : -1);
+    i0.ɵɵconditional(metric_r4.description ? 5 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.targetValue, metric_r3.metric, false), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r4.targetValue, metric_r4.metric, false), " ");
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r3.percentageIncrease), 1), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r4.percentageIncrease), 1), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵattribute("d", metric_r3.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
+    i0.ɵɵattribute("d", metric_r4.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16)(1, "h4", 17);
+    i0.ɵɵelementStart(0, "div", 15)(1, "h4", 16);
     i0.ɵɵtext(2, " Contributing Metric Targets ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 37)(4, "table", 38)(5, "thead")(6, "tr", 39)(7, "th", 40);
+    i0.ɵɵelementStart(3, "div", 42)(4, "table", 43)(5, "thead")(6, "tr", 44)(7, "th", 45);
     i0.ɵɵtext(8, "Metric");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 41);
+    i0.ɵɵelementStart(9, "th", 46);
     i0.ɵɵtext(10, "Target");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 41);
+    i0.ɵɵelementStart(11, "th", 46);
     i0.ɵɵtext(12, "Improve by");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "tbody");
-    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 42, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 47, _forTrack0$i);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57574,19 +57587,19 @@ function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ct
     i0.ɵɵrepeater(ctx_r1.contributingMetrics());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30)(1, "h4", 17);
+    i0.ɵɵelementStart(0, "div", 29)(1, "h4", 16);
     i0.ɵɵtext(2, " Pace ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 53);
-    i0.ɵɵelement(4, "symphiq-line-chart", 54);
+    i0.ɵɵelementStart(3, "div", 57);
+    i0.ɵɵelement(4, "symphiq-line-chart", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 55);
+    i0.ɵɵelementStart(5, "p", 58);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 56);
+    i0.ɵɵelementStart(7, "p", 59);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 56);
+    i0.ɵɵelementStart(9, "p", 59);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57595,7 +57608,7 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("chart", ctx_r1.pacingChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$");
+    i0.ɵɵproperty("chart", ctx_r1.pacingChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "250px");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
@@ -57609,102 +57622,147 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.chartDescriptionSentence2(), " ");
 } }
+function MetricReportModalComponent_Conditional_0_Conditional_70_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-area-chart", 36);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("chart", ctx_r1.trendChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$")("height", "400px");
+} }
+function MetricReportModalComponent_Conditional_0_Conditional_70_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_70_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
+    i0.ɵɵelementStart(1, "div", 61);
+    i0.ɵɵelement(2, "div", 2);
+    i0.ɵɵelementStart(3, "div", 62);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_70_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(4, "div", 63)(5, "h3", 64);
+    i0.ɵɵtext(6, " Year-over-Year Trend ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 65);
+    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_70_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeExpandedChart()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(8, "svg", 12);
+    i0.ɵɵelement(9, "path", 13);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(10, "div", 66);
+    i0.ɵɵconditionalCreate(11, MetricReportModalComponent_Conditional_0_Conditional_70_Conditional_11_Template, 1, 5, "symphiq-area-chart", 36);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses())("@fadeIn", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.modalContainerClasses())("@slideUpFade", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.headerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.trendChartData() ? 11 : -1);
+} }
 function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelementStart(0, "div", 0);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
-    i0.ɵɵelementStart(1, "div", 2);
-    i0.ɵɵelement(2, "div", 3);
-    i0.ɵɵelementStart(3, "span", 4);
+    i0.ɵɵelementStart(1, "div", 1);
+    i0.ɵɵelement(2, "div", 2);
+    i0.ɵɵelementStart(3, "span", 3);
     i0.ɵɵtext(4, "\u200B");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 5);
+    i0.ɵɵelementStart(5, "div", 4);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_div_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div", 9)(10, "h3", 10);
+    i0.ɵɵelementStart(6, "div", 5)(7, "div", 6)(8, "div", 7)(9, "div", 8)(10, "h3", 9);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 3, 2, "button", 11);
+    i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 3, 2, "button", 10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "button", 12);
+    i0.ɵɵelementStart(13, "button", 11);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(14, "svg", 13);
-    i0.ɵɵelement(15, "path", 14);
+    i0.ɵɵelementStart(14, "svg", 12);
+    i0.ɵɵelement(15, "path", 13);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(16, "div", 15);
-    i0.ɵɵelement(17, "symphiq-tooltip-container");
-    i0.ɵɵelementStart(18, "div", 16)(19, "h4", 17);
-    i0.ɵɵtext(20, " At a Glance ");
+    i0.ɵɵelementStart(16, "div", 14)(17, "div", 15)(18, "h4", 16);
+    i0.ɵɵtext(19, " At a Glance ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 18)(22, "div")(23, "div", 19)(24, "p", 20);
-    i0.ɵɵtext(25, " Year to date ");
+    i0.ɵɵelementStart(20, "div", 17)(21, "div")(22, "div", 18)(23, "p", 19);
+    i0.ɵɵtext(24, " Year to date ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "p", 21);
-    i0.ɵɵtext(27);
+    i0.ɵɵelementStart(25, "p", 20);
+    i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "p", 21);
-    i0.ɵɵtext(29);
+    i0.ɵɵelementStart(27, "p", 20);
+    i0.ɵɵtext(28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "p", 22);
-    i0.ɵɵtext(31);
+    i0.ɵɵelementStart(29, "p", 21);
+    i0.ɵɵtext(30);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(32, MetricReportModalComponent_Conditional_0_Conditional_32_Template, 1, 5, "symphiq-target-change-badge", 23);
+    i0.ɵɵconditionalCreate(31, MetricReportModalComponent_Conditional_0_Conditional_31_Template, 1, 5, "symphiq-target-change-badge", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "div")(34, "div", 19)(35, "p", 20);
-    i0.ɵɵtext(36, " Same period last year ");
+    i0.ɵɵelementStart(32, "div")(33, "div", 18)(34, "p", 19);
+    i0.ɵɵtext(35, " Same period last year ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "p", 21);
-    i0.ɵɵtext(38);
+    i0.ɵɵelementStart(36, "p", 20);
+    i0.ɵɵtext(37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "p", 21);
-    i0.ɵɵtext(40);
+    i0.ɵɵelementStart(38, "p", 20);
+    i0.ɵɵtext(39);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(41, "p", 24);
-    i0.ɵɵtext(42);
+    i0.ɵɵelementStart(40, "p", 23);
+    i0.ɵɵtext(41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div")(44, "p", 25);
-    i0.ɵɵtext(45);
+    i0.ɵɵelementStart(42, "div")(43, "p", 24);
+    i0.ɵɵtext(44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "p", 24);
-    i0.ɵɵtext(47);
+    i0.ɵɵelementStart(45, "p", 23);
+    i0.ɵɵtext(46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(48, MetricReportModalComponent_Conditional_0_Conditional_48_Template, 6, 10, "div");
-    i0.ɵɵelementStart(49, "div")(50, "p", 25);
-    i0.ɵɵtext(51);
+    i0.ɵɵconditionalCreate(47, MetricReportModalComponent_Conditional_0_Conditional_47_Template, 5, 4, "div");
+    i0.ɵɵelementStart(48, "div")(49, "p", 24);
+    i0.ɵɵtext(50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "p", 24);
-    i0.ɵɵtext(53);
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(54, "div", 16)(55, "h4", 17);
+    i0.ɵɵelementStart(51, "p", 23);
+    i0.ɵɵtext(52);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(53, MetricReportModalComponent_Conditional_0_Conditional_53_Template, 8, 7, "div");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(54, "div", 15)(55, "h4", 16);
     i0.ɵɵtext(56, " Target Analysis ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(57, "div", 26)(58, "p", 27);
+    i0.ɵɵelementStart(57, "div", 25)(58, "p", 26);
     i0.ɵɵtext(59, " Your Target ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "p", 28);
+    i0.ɵɵelementStart(60, "p", 27);
     i0.ɵɵtext(61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(62, "p", 29);
+    i0.ɵɵelementStart(62, "p", 28);
     i0.ɵɵtext(63);
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(64, MetricReportModalComponent_Conditional_0_Conditional_64_Template, 6, 10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(65, MetricReportModalComponent_Conditional_0_Conditional_65_Template, 16, 3, "div", 16);
-    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 11, 12, "div", 30);
+    i0.ɵɵconditionalCreate(65, MetricReportModalComponent_Conditional_0_Conditional_65_Template, 16, 3, "div", 15);
+    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 11, 13, "div", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(67, "div", 31)(68, "button", 32);
+    i0.ɵɵelementStart(67, "div", 30)(68, "button", 31);
     i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
     i0.ɵɵtext(69, " Close ");
     i0.ɵɵelementEnd()()()()();
+    i0.ɵɵconditionalCreate(70, MetricReportModalComponent_Conditional_0_Conditional_70_Template, 12, 9, "div", 32);
 } if (rf & 2) {
     let tmp_8_0;
     let tmp_19_0;
     let tmp_27_0;
     let tmp_31_0;
     let tmp_36_0;
-    let tmp_41_0;
-    let tmp_43_0;
+    let tmp_42_0;
+    let tmp_44_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses())("@fadeIn", undefined);
@@ -57722,7 +57780,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
@@ -57741,7 +57799,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.ytdValue(), ((tmp_19_0 = ctx_r1.metricData()) == null ? null : tmp_19_0.metric) || ""), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ytdChangePercentage() !== null ? 32 : -1);
+    i0.ɵɵconditional(ctx_r1.ytdChangePercentage() !== null ? 31 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance(2);
@@ -57765,7 +57823,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.currentValue) || 0, ((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.metric) || ""), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 48 : -1);
+    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 47 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
@@ -57775,6 +57833,8 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_36_0 = ctx_r1.metricData()) == null ? null : tmp_36_0.targetValue) || 0, ((tmp_36_0 = ctx_r1.metricData()) == null ? null : tmp_36_0.metric) || "", false), " ");
     i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.trendChartData() ? 53 : -1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
@@ -57783,11 +57843,11 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_41_0 = ctx_r1.metricData()) == null ? null : tmp_41_0.targetValue) || 0, ((tmp_41_0 = ctx_r1.metricData()) == null ? null : tmp_41_0.metric) || "", false), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_42_0 = ctx_r1.metricData()) == null ? null : tmp_42_0.targetValue) || 0, ((tmp_42_0 = ctx_r1.metricData()) == null ? null : tmp_42_0.metric) || "", false), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate4(" Your target represents a ", ctx_r1.formatPercentage(ctx_r1.Math.abs(((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.percentageIncrease) || 0), 1), " ", (((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.percentageIncrease) || 0) >= 0 ? "increase" : "decrease", " from your ", ctx_r1.priorYear(), " actual of ", ctx_r1.formatMetricValue(((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.currentValue) || 0, ((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.metric) || ""), ". ");
+    i0.ɵɵtextInterpolate4(" Your target represents a ", ctx_r1.formatPercentage(ctx_r1.Math.abs(((tmp_44_0 = ctx_r1.metricData()) == null ? null : tmp_44_0.percentageIncrease) || 0), 1), " ", (((tmp_44_0 = ctx_r1.metricData()) == null ? null : tmp_44_0.percentageIncrease) || 0) >= 0 ? "increase" : "decrease", " from your ", ctx_r1.priorYear(), " actual of ", ctx_r1.formatMetricValue(((tmp_44_0 = ctx_r1.metricData()) == null ? null : tmp_44_0.currentValue) || 0, ((tmp_44_0 = ctx_r1.metricData()) == null ? null : tmp_44_0.metric) || ""), ". ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.pacingInfo() ? 64 : -1);
     i0.ɵɵadvance();
@@ -57798,6 +57858,8 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("ngClass", ctx_r1.footerClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.closeFooterButtonClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isExpandedChartOpen() ? 70 : -1);
 } }
 class MetricReportModalComponent {
     constructor() {
@@ -57806,9 +57868,11 @@ class MetricReportModalComponent {
         this.metricData = input(undefined, ...(ngDevMode ? [{ debugName: "metricData" }] : []));
         this.contributingMetrics = input([], ...(ngDevMode ? [{ debugName: "contributingMetrics" }] : []));
         this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.trendChartData = input(null, ...(ngDevMode ? [{ debugName: "trendChartData" }] : []));
         this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.closed = output();
         this.showDefinition = signal(false, ...(ngDevMode ? [{ debugName: "showDefinition" }] : []));
+        this.isExpandedChartOpen = signal(false, ...(ngDevMode ? [{ debugName: "isExpandedChartOpen" }] : []));
         this.Math = Math;
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
@@ -57963,7 +58027,7 @@ class MetricReportModalComponent {
             const metric = this.metricTitle();
             const currentYear = this.currentYear();
             const priorYear = this.priorYear();
-            return `This chart shows the ${metric} performance trend for ${currentYear} (solid yellow line, this month includes projections), compared to ${priorYear} (dashed green line), with the target projection (dotted blue line) for the remainder of the year.`;
+            return `This chart shows the ${metric} performance trend for ${currentYear} (solid yellow line, this month includes projections for the remaining days of the month), compared to ${priorYear} (dashed green line), with the target projection (dotted blue line) for the remainder of the year.`;
         }, ...(ngDevMode ? [{ debugName: "chartLegendDescription" }] : []));
         this.chartDescriptionSentence1 = computed(() => {
             const metricData = this.metricData();
@@ -57998,7 +58062,7 @@ class MetricReportModalComponent {
                 lineChartData: {
                     series: [
                         {
-                            name: 'Target Projection',
+                            name: '2026 Projected',
                             data: projectionData
                         },
                         {
@@ -58014,6 +58078,11 @@ class MetricReportModalComponent {
             };
         }, ...(ngDevMode ? [{ debugName: "pacingChartData" }] : []));
     }
+    onEscapeKey() {
+        if (this.isExpandedChartOpen()) {
+            this.closeExpandedChart();
+        }
+    }
     formatDateForChart(year, month, day) {
         const m = String(month + 1).padStart(2, '0');
         const d = String(day).padStart(2, '0');
@@ -58105,6 +58174,12 @@ class MetricReportModalComponent {
     close() {
         this.closed.emit();
     }
+    openExpandedChart() {
+        this.isExpandedChartOpen.set(true);
+    }
+    closeExpandedChart() {
+        this.isExpandedChartOpen.set(false);
+    }
     isLightMode() {
         return this.viewMode() === ViewModeEnum.LIGHT;
     }
@@ -58209,6 +58284,11 @@ class MetricReportModalComponent {
             ? 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700'
             : 'bg-slate-700/50 text-slate-400 hover:bg-slate-600/50 hover:text-slate-300';
     }
+    expandIconClasses() {
+        return this.isLightMode()
+            ? 'bg-white/90 text-slate-600 hover:bg-white hover:text-slate-800 shadow-sm'
+            : 'bg-slate-700/90 text-slate-300 hover:bg-slate-600 hover:text-white shadow-sm';
+    }
     footerClasses() {
         return this.isLightMode()
             ? 'bg-slate-50 border-slate-200'
@@ -58220,15 +58300,17 @@ class MetricReportModalComponent {
             : 'bg-slate-700 hover:bg-slate-600 text-white';
     }
     static { this.ɵfac = function MetricReportModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricReportModalComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-3", "mb-2"], [1, "text-xl", "font-bold", "leading-none", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-7", "h-7", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6"], [1, "mb-1.5"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["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"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [3, "data", "viewMode"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "py-3", "px-4", "text-right"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "justify-end", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-emerald-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], [1, "min-h-[400px]"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mt-2", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 70, 51, "div", 0);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], hostBindings: function MetricReportModalComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function MetricReportModalComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], trendChartData: [1, "trendChartData"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xl", "font-bold", "mb-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6"], [1, "mb-1.5"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[60]"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["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, "relative", "cursor-pointer", "group", 3, "click"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "absolute", "top-1", "right-1", "p-1", "rounded", "opacity-0", "group-hover:opacity-100", "transition-opacity", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [3, "data", "viewMode"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], [1, "py-3", "px-4", "text-right"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "justify-end", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-emerald-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], [1, "min-h-[250px]"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mt-2", 3, "ngClass"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[60]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "p-4"], [1, "relative", "inline-block", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "w-full", "max-w-6xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-4", "border-b", "backdrop-blur-sm", "flex", "items-center", "justify-between", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], [1, "p-6", "backdrop-blur-sm", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 71, 53);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent,
             TargetChangeBadgeComponent,
             TooltipDirective,
-            TooltipContainerComponent,
             LineChartComponent,
+            AreaChartComponent,
             ProgressToTargetChartComponent], encapsulation: 2, data: { animation: [
                 trigger('fadeIn', [
                     transition(':enter', [
@@ -58254,8 +58336,8 @@ class MetricReportModalComponent {
                     PacingStatusBadgeComponent,
                     TargetChangeBadgeComponent,
                     TooltipDirective,
-                    TooltipContainerComponent,
                     LineChartComponent,
+                    AreaChartComponent,
                     ProgressToTargetChartComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
@@ -58273,327 +58355,397 @@ class MetricReportModalComponent {
                         ])
                     ])
                 ],
-                template: `
-    @if (isOpen()) {
-      <div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
-        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-          <div
-            [ngClass]="backdropClasses()"
-            class="fixed inset-0 backdrop-blur-md"
-            aria-hidden="true"
-            @fadeIn>
-          </div>
-
-          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-          <div
-            (click)="$event.stopPropagation()"
-            [ngClass]="modalContainerClasses()"
-            class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
-            @slideUpFade>
-
-            <!-- Header -->
-            <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
-              <div class="flex items-start justify-between">
-                <div class="flex-1">
-                  <div class="flex items-center gap-3 mb-2">
-                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold leading-none">
-                      {{ metricTitle() }}
-                    </h3>
-                    @if (metricData()?.description) {
-                      <button
-                        type="button"
-                        [ngClass]="headerInfoIconClasses()"
-                        class="flex-shrink-0 w-7 h-7 rounded-full inline-flex items-center justify-center transition-colors"
-                        [libSymphiqTooltip]="getMarkdownTooltipContent(metricData()!.description!, metricTitle())"
-                        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>
-                <button
-                  (click)="close()"
-                  [ngClass]="closeButtonClasses()"
-                  class="ml-4 transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
-                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            <!-- Content -->
-            <div [ngClass]="contentClasses()" class="px-6 py-6 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
-              <symphiq-tooltip-container />
-
-              <!-- At a Glance Summary -->
-              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
-                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                  At a Glance
-                </h4>
-                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                  <!-- YTD Value -->
-                  <div>
-                    <div class="mb-1.5">
-                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                        Year to date
-                      </p>
-                      <p [ngClass]="dateLabelClasses()" class="text-xs">
-                        {{ ytdStartDate() }}
-                      </p>
-                      <p [ngClass]="dateLabelClasses()" class="text-xs">
-                        {{ ytdEndDate() }}
-                      </p>
-                    </div>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold mb-2">
-                      {{ formatMetricValue(ytdValue(), metricData()?.metric || '') }}
-                    </p>
-                    @if (ytdChangePercentage() !== null) {
-                      <symphiq-target-change-badge
-                        [viewMode]="viewMode()"
-                        [percentageChange]="ytdChangePercentage()!"
-                        [metric]="metricData()?.metric || ''"
-                        [priorYear]="priorYear()"
-                        [isCompact]="true"
-                      />
-                    }
-                  </div>
-
-                  <!-- Same Period Last Year -->
-                  <div>
-                    <div class="mb-1.5">
-                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                        Same period last year
-                      </p>
-                      <p [ngClass]="dateLabelClasses()" class="text-xs">
-                        {{ priorYearStartDate() }}
-                      </p>
-                      <p [ngClass]="dateLabelClasses()" class="text-xs">
-                        {{ priorYearEndDate() }}
-                      </p>
-                    </div>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(samePeriodLastYearValue(), metricData()?.metric || '') }}
-                    </p>
-                  </div>
-
-                  <!-- Full Last Year -->
-                  <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      Full {{ priorYear() }} Actual
-                    </p>
-                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}
-                    </p>
-                  </div>
-
-                  <!-- Current Pace -->
-                  @if (pacingInfo()) {
-                    <div>
-                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                        Pace for {{ currentYear() }}
-                      </p>
-                      <p [ngClass]="projectedValueClasses()" class="text-xl font-bold mb-2">
-                        {{ formatMetricValue(pacingInfo()!.projectedValue, metricData()?.metric || '', false) }}
-                      </p>
-                      <symphiq-pacing-status-badge
-                        [viewMode]="viewMode()"
-                        [pacingPercentage]="pacingInfo()!.pacingPercentage"
-                        [status]="pacingInfo()!.status"
-                        [showAsFullText]="false"
-                        [isCompact]="true"
-                        [showEmphasizedPercentage]="true"
-                      />
-                    </div>
-                  }
-
-                  <!-- Current Target -->
-                  <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      {{ currentYear() }} Target
-                    </p>
-                    <p [ngClass]="targetValueClasses()" class="text-xl font-bold">
-                      {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Target Analysis -->
-              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
-                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                  Target Analysis
-                </h4>
-
-                <div class="mb-4">
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
-                    Your Target
-                  </p>
-                  <p [ngClass]="targetValueClasses()" class="text-3xl font-extrabold mb-3">
-                    {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
-                  </p>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
-                    Your target represents a {{ formatPercentage(Math.abs(metricData()?.percentageIncrease || 0), 1) }}
-                    {{ (metricData()?.percentageIncrease || 0) >= 0 ? 'increase' : 'decrease' }}
-                    from your {{ priorYear() }} actual of
-                    {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}.
-                  </p>
-                </div>
-
-                @if (pacingInfo()) {
-                  <div class="mb-4">
-                    <symphiq-pacing-status-badge
-                      [viewMode]="viewMode()"
-                      [pacingPercentage]="pacingInfo()!.pacingPercentage"
-                      [status]="pacingInfo()!.status"
-                      [showAsFullText]="true"
-                      [isCompact]="false"
-                      [showEmphasizedPercentage]="true"
-                    />
-                  </div>
-
-                  <div class="mb-4">
-                    <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
-                      {{ gapAnalysisText() }}
-                    </p>
-                  </div>
-
-                  <!-- Progress to Target Chart -->
-                  <symphiq-progress-to-target-chart
-                    [data]="progressToTargetData()"
-                    [viewMode]="viewMode()"
-                  />
-                }
-              </div>
-
-              <!-- Contributing Metrics Table (only for funnel stage metrics) -->
-              @if (contributingMetrics().length > 0) {
-                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
-                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                    Contributing Metric Targets
-                  </h4>
-                  <div class="overflow-x-auto">
-                    <table class="w-full">
-                      <thead>
-                        <tr [ngClass]="tableHeaderClasses()" class="border-b">
-                          <th class="text-left py-3 px-4 text-xs font-semibold uppercase tracking-wider">Metric</th>
-                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Target</th>
-                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Improve by</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        @for (metric of contributingMetrics(); track metric.metric) {
-                          <tr [ngClass]="tableRowClasses()" class="border-b transition-colors">
-                            <td class="py-3 px-4">
-                              <div class="flex items-center gap-2">
-                                <span class="text-sm font-medium">{{ getMetricTitle(metric) }}</span>
-                                @if (metric.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.description, getMetricTitle(metric))"
-                                    tooltipType="markdown"
-                                    tooltipPosition="right">
-                                    <svg class="w-3 h-3" 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>
-                            </td>
-                            <td class="py-3 px-4 text-right">
-                              <span [ngClass]="targetValueClasses()" class="text-sm font-semibold">
-                                {{ formatMetricValue(metric.targetValue, metric.metric, false) }}
-                              </span>
-                            </td>
-                            <td class="py-3 px-4 text-right">
-                              <div class="flex items-center justify-end gap-2">
-                                <span class="text-sm font-medium">
-                                  {{ formatPercentage(Math.abs(metric.percentageIncrease), 1) }}
-                                </span>
-                                <svg
-                                  class="w-4 h-4 text-emerald-500"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24">
-                                  <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    [attr.d]="metric.percentageIncrease >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3'" />
-                                </svg>
-                              </div>
-                            </td>
-                          </tr>
-                        }
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              }
-
-              <!-- Pacing Chart -->
-              @if (pacingChartData()) {
-                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6">
-                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
-                    Pace
-                  </h4>
-                  <div class="min-h-[400px]">
-                    <symphiq-line-chart
-                      [chart]="pacingChartData()!"
-                      [showAxisLabels]="true"
-                      [viewMode]="viewMode()"
-                      [currencySymbol]="'$'"
-                    />
-                  </div>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
-                    {{ chartLegendDescription() }}
-                  </p>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
-                    {{ chartDescriptionSentence1() }}
-                  </p>
-                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
-                    {{ chartDescriptionSentence2() }}
-                  </p>
-                </div>
-              }
-            </div>
-
-            <!-- Footer -->
-            <div [ngClass]="footerClasses()" class="px-6 py-4 border-t">
-              <button
-                (click)="close()"
-                [ngClass]="closeFooterButtonClasses()"
-                class="w-full px-4 py-2 rounded-lg transition-all font-medium hover:scale-[1.02] active:scale-[0.98]">
-                Close
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    }
-  `
-            }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricEnum", required: false }] }], metricData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricData", required: false }] }], contributingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "contributingMetrics", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 349 }); })();
+                template: `
+    @if (isOpen()) {
+      <div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+          <div
+            [ngClass]="backdropClasses()"
+            class="fixed inset-0 backdrop-blur-md"
+            aria-hidden="true"
+            @fadeIn>
+          </div>
 
-const _c0$q = ["absoluteInputRef"];
-const _c1$b = ["percentageInputRef"];
-function InitialTargetSettingComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵtextInterpolate1(" Your ", ctx_r0.currentYear(), " Revenue Target ");
-} }
-function InitialTargetSettingComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+          <div
+            (click)="$event.stopPropagation()"
+            [ngClass]="modalContainerClasses()"
+            class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
+            @slideUpFade>
+
+            <!-- Header -->
+            <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
+              <div class="flex items-start justify-between">
+                <div class="flex-1">
+                  <div class="flex items-center gap-2 mb-2">
+                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-0">
+                      {{ metricTitle() }}
+                    </h3>
+                    @if (metricData()?.description) {
+                      <button
+                        type="button"
+                        [ngClass]="headerInfoIconClasses()"
+                        class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                        [libSymphiqTooltip]="getMarkdownTooltipContent(metricData()!.description!, metricTitle())"
+                        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>
+                <button
+                  (click)="close()"
+                  [ngClass]="closeButtonClasses()"
+                  class="ml-4 transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- Content -->
+            <div [ngClass]="contentClasses()" class="px-6 py-6 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
+              <!-- At a Glance Summary -->
+              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                  At a Glance
+                </h4>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <!-- YTD Value -->
+                  <div>
+                    <div class="mb-1.5">
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                        Year to date
+                      </p>
+                      <p [ngClass]="dateLabelClasses()" class="text-xs">
+                        {{ ytdStartDate() }}
+                      </p>
+                      <p [ngClass]="dateLabelClasses()" class="text-xs">
+                        {{ ytdEndDate() }}
+                      </p>
+                    </div>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold mb-2">
+                      {{ formatMetricValue(ytdValue(), metricData()?.metric || '') }}
+                    </p>
+                    @if (ytdChangePercentage() !== null) {
+                      <symphiq-target-change-badge
+                        [viewMode]="viewMode()"
+                        [percentageChange]="ytdChangePercentage()!"
+                        [metric]="metricData()?.metric || ''"
+                        [priorYear]="priorYear()"
+                        [isCompact]="true"
+                      />
+                    }
+                  </div>
+
+                  <!-- Same Period Last Year -->
+                  <div>
+                    <div class="mb-1.5">
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                        Same period last year
+                      </p>
+                      <p [ngClass]="dateLabelClasses()" class="text-xs">
+                        {{ priorYearStartDate() }}
+                      </p>
+                      <p [ngClass]="dateLabelClasses()" class="text-xs">
+                        {{ priorYearEndDate() }}
+                      </p>
+                    </div>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(samePeriodLastYearValue(), metricData()?.metric || '') }}
+                    </p>
+                  </div>
+
+                  <!-- Full Last Year -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      Full {{ priorYear() }} Actual
+                    </p>
+                    <p [ngClass]="valueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}
+                    </p>
+                  </div>
+
+                  <!-- Current Pace -->
+                  @if (pacingInfo()) {
+                    <div>
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                        Pace for {{ currentYear() }}
+                      </p>
+                      <p [ngClass]="projectedValueClasses()" class="text-xl font-bold">
+                        {{ formatMetricValue(pacingInfo()!.projectedValue, metricData()?.metric || '', false) }}
+                      </p>
+                    </div>
+                  }
+
+                  <!-- Current Target -->
+                  <div>
+                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                      {{ currentYear() }} Target
+                    </p>
+                    <p [ngClass]="targetValueClasses()" class="text-xl font-bold">
+                      {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
+                    </p>
+                  </div>
+
+                  <!-- Year-over-Year Trend Chart -->
+                  @if (trendChartData()) {
+                    <div>
+                      <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
+                        Year-over-Year Trend
+                      </p>
+                      <div 
+                        class="relative cursor-pointer group"
+                        (click)="openExpandedChart(); $event.stopPropagation()">
+                        <symphiq-area-chart
+                          [chart]="trendChartData()!"
+                          [showAxisLabels]="false"
+                          [viewMode]="viewMode()"
+                          [currencySymbol]="'$'"
+                          [height]="'80px'"
+                        />
+                        <div 
+                          [ngClass]="expandIconClasses()"
+                          class="absolute top-1 right-1 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+                          <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+
+              <!-- Target Analysis -->
+              <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                  Target Analysis
+                </h4>
+
+                <div class="mb-4">
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
+                    Your Target
+                  </p>
+                  <p [ngClass]="targetValueClasses()" class="text-3xl font-extrabold mb-3">
+                    {{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+                    Your target represents a {{ formatPercentage(Math.abs(metricData()?.percentageIncrease || 0), 1) }}
+                    {{ (metricData()?.percentageIncrease || 0) >= 0 ? 'increase' : 'decrease' }}
+                    from your {{ priorYear() }} actual of
+                    {{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}.
+                  </p>
+                </div>
+
+                @if (pacingInfo()) {
+                  <div class="mb-4">
+                    <symphiq-pacing-status-badge
+                      [viewMode]="viewMode()"
+                      [pacingPercentage]="pacingInfo()!.pacingPercentage"
+                      [status]="pacingInfo()!.status"
+                      [showAsFullText]="true"
+                      [isCompact]="false"
+                      [showEmphasizedPercentage]="true"
+                    />
+                  </div>
+
+                  <div class="mb-4">
+                    <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+                      {{ gapAnalysisText() }}
+                    </p>
+                  </div>
+
+                  <!-- Progress to Target Chart -->
+                  <symphiq-progress-to-target-chart
+                    [data]="progressToTargetData()"
+                    [viewMode]="viewMode()"
+                  />
+                }
+              </div>
+
+              <!-- Contributing Metrics Table (only for funnel stage metrics) -->
+              @if (contributingMetrics().length > 0) {
+                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
+                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                    Contributing Metric Targets
+                  </h4>
+                  <div class="overflow-x-auto">
+                    <table class="w-full">
+                      <thead>
+                        <tr [ngClass]="tableHeaderClasses()" class="border-b">
+                          <th class="text-left py-3 px-4 text-xs font-semibold uppercase tracking-wider">Metric</th>
+                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Target</th>
+                          <th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Improve by</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @for (metric of contributingMetrics(); track metric.metric) {
+                          <tr [ngClass]="tableRowClasses()" class="border-b transition-colors">
+                            <td class="py-3 px-4">
+                              <div class="flex items-center gap-2">
+                                <span class="text-sm font-medium">{{ getMetricTitle(metric) }}</span>
+                                @if (metric.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.description, getMetricTitle(metric))"
+                                    tooltipType="markdown"
+                                    tooltipPosition="right">
+                                    <svg class="w-3 h-3" 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>
+                            </td>
+                            <td class="py-3 px-4 text-right">
+                              <span [ngClass]="targetValueClasses()" class="text-sm font-semibold">
+                                {{ formatMetricValue(metric.targetValue, metric.metric, false) }}
+                              </span>
+                            </td>
+                            <td class="py-3 px-4 text-right">
+                              <div class="flex items-center justify-end gap-2">
+                                <span class="text-sm font-medium">
+                                  {{ formatPercentage(Math.abs(metric.percentageIncrease), 1) }}
+                                </span>
+                                <svg
+                                  class="w-4 h-4 text-emerald-500"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24">
+                                  <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    [attr.d]="metric.percentageIncrease >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3'" />
+                                </svg>
+                              </div>
+                            </td>
+                          </tr>
+                        }
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              }
+
+              <!-- Pacing Chart -->
+              @if (pacingChartData()) {
+                <div [ngClass]="sectionCardClasses()" class="rounded-xl p-6">
+                  <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
+                    Pace
+                  </h4>
+                  <div class="min-h-[250px]">
+                    <symphiq-line-chart
+                      [chart]="pacingChartData()!"
+                      [showAxisLabels]="true"
+                      [viewMode]="viewMode()"
+                      [currencySymbol]="'$'"
+                      [height]="'250px'"
+                    />
+                  </div>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
+                    {{ chartLegendDescription() }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
+                    {{ chartDescriptionSentence1() }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
+                    {{ chartDescriptionSentence2() }}
+                  </p>
+                </div>
+              }
+            </div>
+
+            <!-- Footer -->
+            <div [ngClass]="footerClasses()" class="px-6 py-4 border-t">
+              <button
+                (click)="close()"
+                [ngClass]="closeFooterButtonClasses()"
+                class="w-full px-4 py-2 rounded-lg transition-all font-medium hover:scale-[1.02] active:scale-[0.98]">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Expanded Chart Modal (Stacked) -->
+      @if (isExpandedChartOpen()) {
+        <div class="fixed inset-0 overflow-y-auto z-[60]" (click)="closeExpandedChart()">
+          <div class="flex items-center justify-center min-h-screen p-4">
+            <div
+              [ngClass]="backdropClasses()"
+              class="fixed inset-0 backdrop-blur-md"
+              aria-hidden="true"
+              @fadeIn>
+            </div>
+
+            <div
+              (click)="$event.stopPropagation()"
+              [ngClass]="modalContainerClasses()"
+              class="relative inline-block rounded-2xl text-left overflow-hidden shadow-xl w-full max-w-6xl border backdrop-blur-xl"
+              @slideUpFade>
+
+              <!-- Header -->
+              <div [ngClass]="headerClasses()" class="px-6 py-4 border-b backdrop-blur-sm flex items-center justify-between">
+                <h3 [ngClass]="titleClasses()" class="text-lg font-bold">
+                  Year-over-Year Trend
+                </h3>
+                <button
+                  (click)="closeExpandedChart()"
+                  [ngClass]="closeButtonClasses()"
+                  class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>
+                </button>
+              </div>
+
+              <!-- Content -->
+              <div [ngClass]="contentClasses()" class="p-6 backdrop-blur-sm">
+                @if (trendChartData()) {
+                  <symphiq-area-chart
+                    [chart]="trendChartData()!"
+                    [showAxisLabels]="true"
+                    [viewMode]="viewMode()"
+                    [currencySymbol]="'$'"
+                    [height]="'400px'"
+                  />
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    }
+  `
+            }]
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricEnum", required: false }] }], metricData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricData", required: false }] }], contributingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "contributingMetrics", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], trendChartData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendChartData", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], onEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 416 }); })();
+
+const _c0$q = ["absoluteInputRef"];
+const _c1$b = ["percentageInputRef"];
+function InitialTargetSettingComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" Your ", ctx_r0.currentYear(), " Revenue Target ");
+} }
+function InitialTargetSettingComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵtextInterpolate1(" Calculate Your ", ctx_r0.currentYear(), " Revenue Target ");
 } }
 function InitialTargetSettingComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
@@ -58908,7 +59060,7 @@ function InitialTargetSettingComponent_Conditional_37_Conditional_4_Template(rf,
     i0.ɵɵelement(0, "symphiq-area-chart", 23);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
+    i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "200px");
 } }
 function InitialTargetSettingComponent_Conditional_37_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "p", 50);
@@ -59530,7 +59682,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: 50, 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-4"], [1, "grid", "lg:grid-cols-2", "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", 3, "ngClass", "h-full"], [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"], [3, "closed", "viewMode", "metricEnum", "metricData", "contributingMetrics", "pacingMetrics", "isOpen"], ["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", "items-center", "gap-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, "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, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 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-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [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"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewStageReport", "viewRelatedMetricReport", "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: 51, 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-4"], [1, "grid", "lg:grid-cols-2", "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", 3, "ngClass", "h-full"], [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"], [3, "closed", "viewMode", "metricEnum", "metricData", "contributingMetrics", "pacingMetrics", "trendChartData", "isOpen"], ["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", "items-center", "gap-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, "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, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "font-bold", "transition-all", "duration-300", "text-lg", 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-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [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"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewStageReport", "viewRelatedMetricReport", "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);
@@ -59630,7 +59782,7 @@ class InitialTargetSettingComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isCalculating())("validationMessage", ctx.validationMessage())("buttonText", ctx.submitButtonText())("showCancelButton", ctx.calculationState() === "input" && ctx.hasStoredResponse());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("viewMode", ctx.viewMode())("metricEnum", ctx.selectedMetricEnum())("metricData", ctx.selectedMetricData())("contributingMetrics", ctx.selectedContributingMetrics())("pacingMetrics", ctx.pacingMetrics())("isOpen", ctx.isMetricReportOpen());
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("metricEnum", ctx.selectedMetricEnum())("metricData", ctx.selectedMetricData())("contributingMetrics", ctx.selectedContributingMetrics())("pacingMetrics", ctx.pacingMetrics())("trendChartData", ctx.revenueChartData())("isOpen", ctx.isMetricReportOpen());
         } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NumberValueAccessor, i2$1.NgControlStatus, i2$1.MinValidator, i2$1.MaxValidator, i2$1.NgModel, FunnelMetricsVisualizationComponent,
             StickySubmitBarComponent,
             AreaChartComponent,
@@ -59649,390 +59801,391 @@ class InitialTargetSettingComponent {
                     TooltipDirective,
                     TooltipContainerComponent,
                     MetricReportModalComponent
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="space-y-8 pb-32">
-      <symphiq-tooltip-container />
-      <div [ngClass]="sectionCardClasses(true)" class="rounded-2xl border shadow-lg p-8"
-           [class.cursor-pointer]="calculationState() === 'results'"
-           [class.lg:sticky]="calculationState() === 'results'"
-           [style.top]="calculationState() === 'results' ? '148px' : 'auto'"
-           [class.z-30]="calculationState() === 'results'"
-           (click)="onCardClick()">
-        <div class="flex items-center justify-between mb-6">
-          <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold">
-            @if (calculationState() === 'results') {
-              Your {{ currentYear() }} Revenue Target
-            } @else {
-              Calculate Your {{ currentYear() }} Revenue Target
-            }
-          </h2>
-          @if (calculationState() === 'results') {
-            <svg
-              class="w-6 h-6 chevron-rotate"
-              [class.chevron-rotate-expanded]="detailsExpanded()"
-              [ngClass]="chevronClasses()"
-              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>
-          }
-        </div>
-
-        <div class="flex flex-col gap-4">
-          <div class="grid lg:grid-cols-2 gap-4">
-            <div class="flex flex-col gap-4">
-              <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2" [class.cursor-pointer]="calculationState() === 'results'" (click)="onCardClick(); $event.stopPropagation()">
-                <div class="flex flex-wrap gap-4 place-content-between">
-                  <div class="flex items-center gap-2">
-                    <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path 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"></path>
-                    </svg>
-                    <div>
-                      <p [ngClass]="baselineLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                        {{ priorYear() }} Revenue
-                      </p>
-                      <p [ngClass]="baselineValueClasses()" class="text-lg font-bold">
-                        {{ formatCurrency(priorYearRevenue()) }}
-                      </p>
-                    </div>
-                  </div>
-                  @if (currentPaceProjection() > 0) {
-                    <div class="flex items-center gap-2">
-                      <svg class="w-4 h-4" [ngClass]="projectionIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
-                      </svg>
-                      <div>
-                        <div class="flex items-center gap-1">
-                          <p [ngClass]="projectionLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                            Current Pace Projection
-                          </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]="currentPaceProjectionTooltip"
-                            tooltipType="markdown"
-                            tooltipPosition="top"
-                            (click)="$event.stopPropagation()">
-                            <svg class="w-3 h-3" 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>
-                        <p [ngClass]="projectionValueClasses()" class="text-lg font-bold">
-                          {{ formatCurrency(currentPaceProjection()) }}
-                        </p>
-                      </div>
-                    </div>
-                  }
-                </div>
-
-                <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'" [class.mt-6]="calculationState() !== 'results'">
-                  <div class="form-area-content">
-                    <div class="space-y-6">
-                      @if (calculationState() !== 'results') {
-                      <div class="flex gap-2">
-                        <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>
-                      }
-
-                      @if (hasStoredResponse()) {
-                        <div class="flex justify-end">
-                          <button
-                            (click)="handleCancel()"
-                            [ngClass]="cancelButtonClasses()"
-                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
-                            Cancel
-                          </button>
-                        </div>
-                      }
-                    }
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results' && detailsExpanded()">
-                <div class="chart-in-column-content">
-                  <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]="'108px'"
-                        />
-                      } @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>
-            </div>
-
-            <div class="calculated-card-enter order-first lg:order-last" [class.calculated-card-enter-active]="calculatedRevenue() > 0">
-              <div class="calculated-card-content">
-                @if (calculatedRevenue() > 0) {
-                  <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2"
-                    [class.h-full]="calculationState() !== 'results' || detailsExpanded()">
-                    <div>
-                      <div class="flex items-center justify-between">
-                        <div>
-                          <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                            {{ currentYear() }} Revenue Target
-                          </p>
-                          <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300 text-lg"
-                            [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
-                            @if (calculationState() === 'results' && targets() === undefined && submittedAbsoluteInput() !== null) {
-                              > {{ formatCurrency(submittedAbsoluteInput()!) }}
-                            } @else {
-                              {{ formatCurrency(displayedTargetRevenue()) }}
-                            }
-                          </p>
-                        </div>
-                        @if (calculationState() === 'results' && targets() === undefined) {
-                          <button
-                            (click)="handleAdjustTarget(); $event.stopPropagation()"
-                            [ngClass]="secondaryButtonClasses()"
-                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all whitespace-nowrap">
-                            Adjust Revenue Target
-                          </button>
-                        }
-                      </div>
-
-                      <div class="details-collapse" [class.details-collapse-expanded]="calculationState() !== 'results' || detailsExpanded()">
-                        <div class="details-collapse-content">
-                          <div class="relative pt-6 mt-6">
-                            <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">
-                                vs. {{ priorYear() }}
-                              </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">
-                                  Increase Amount
-                                </p>
-                                <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                  @if (isTargetValid()) {
-                                    {{ formatCurrency(animatedIncreaseAmount()) }}
-                                  } @else {
-                                    --
-                                  }
-                                </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">
-                                  @if (isTargetValid()) {
-                                    +{{ formatPercentage(animatedPercentageGrowth(), 1) }}
-                                  } @else {
-                                    --
-                                  }
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-
-                          @if (currentPaceProjection() > 0) {
-                            <div class="relative pt-6 mt-6">
-                              <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
-                                </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
-                                  </p>
-                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                    @if (isTargetValid()) {
-                                      {{ formatCurrency(animatedGapAmount()) }}
-                                    } @else {
-                                      --
-                                    }
-                                  </p>
-                                </div>
-                                <div>
-                                  <div class="flex items-center gap-1 mb-1">
-                                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
-                                      Additional Growth Needed
-                                    </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"
-                                      tooltipType="markdown"
-                                      tooltipPosition="top"
-                                      (click)="$event.stopPropagation()">
-                                      <svg class="w-3 h-3" 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>
-                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
-                                    @if (isTargetValid()) {
-                                      {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
-                                    } @else {
-                                      --
-                                    }
-                                  </p>
-                                </div>
-                              </div>
-                            </div>
-                          }
-
-                          </div>
-                      </div>
-                    </div>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          @if (calculationState() !== 'results') {
-            <div class="w-full">
-              <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>
-
-      <div class="metrics-section-enter" [class.metrics-section-enter-active]="showMetricsVisualization()">
-        <div class="metrics-section-content">
-          @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">
-                  @if (targets() === undefined && submittedAbsoluteInput() !== null) {
-                    To achieve your revenue target of over {{ formatCurrency(submittedAbsoluteInput()!) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
-                  } @else {
-                    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()"
-                (viewStageReport)="openMetricReport($event)"
-                (viewRelatedMetricReport)="openMetricReport($event)"
-              />
-            </div>
-          }
-        </div>
-      </div>
-
-      <symphiq-sticky-submit-bar
-        [viewMode]="viewMode()"
-        [isValid]="isValid()"
-        [isSubmitting]="isCalculating()"
-        [validationMessage]="validationMessage()"
-        [buttonText]="submitButtonText()"
-        [showCancelButton]="calculationState() === 'input' && hasStoredResponse()"
-        (submitClick)="handleSubmitClick()"
-        (cancelClick)="handleCancel()"
-      />
-
-      <!-- Metric Report Modal -->
-      <symphiq-metric-report-modal
-        [viewMode]="viewMode()"
-        [metricEnum]="selectedMetricEnum()"
-        [metricData]="selectedMetricData()"
-        [contributingMetrics]="selectedContributingMetrics()"
-        [pacingMetrics]="pacingMetrics()"
-        [isOpen]="isMetricReportOpen()"
-        (closed)="closeMetricReport()"
-      />
-    </div>
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="space-y-8 pb-32">
+      <symphiq-tooltip-container />
+      <div [ngClass]="sectionCardClasses(true)" class="rounded-2xl border shadow-lg p-8"
+           [class.cursor-pointer]="calculationState() === 'results'"
+           [class.lg:sticky]="calculationState() === 'results'"
+           [style.top]="calculationState() === 'results' ? '148px' : 'auto'"
+           [class.z-30]="calculationState() === 'results'"
+           (click)="onCardClick()">
+        <div class="flex items-center justify-between mb-6">
+          <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold">
+            @if (calculationState() === 'results') {
+              Your {{ currentYear() }} Revenue Target
+            } @else {
+              Calculate Your {{ currentYear() }} Revenue Target
+            }
+          </h2>
+          @if (calculationState() === 'results') {
+            <svg
+              class="w-6 h-6 chevron-rotate"
+              [class.chevron-rotate-expanded]="detailsExpanded()"
+              [ngClass]="chevronClasses()"
+              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>
+          }
+        </div>
+
+        <div class="flex flex-col gap-4">
+          <div class="grid lg:grid-cols-2 gap-4">
+            <div class="flex flex-col gap-4">
+              <div [ngClass]="formAreaClasses()" class="p-6 rounded-xl border-2" [class.cursor-pointer]="calculationState() === 'results'" (click)="onCardClick(); $event.stopPropagation()">
+                <div class="flex flex-wrap gap-4 place-content-between">
+                  <div class="flex items-center gap-2">
+                    <svg class="w-4 h-4" [ngClass]="baselineIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path 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"></path>
+                    </svg>
+                    <div>
+                      <p [ngClass]="baselineLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                        {{ priorYear() }} Revenue
+                      </p>
+                      <p [ngClass]="baselineValueClasses()" class="text-lg font-bold">
+                        {{ formatCurrency(priorYearRevenue()) }}
+                      </p>
+                    </div>
+                  </div>
+                  @if (currentPaceProjection() > 0) {
+                    <div class="flex items-center gap-2">
+                      <svg class="w-4 h-4" [ngClass]="projectionIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                      </svg>
+                      <div>
+                        <div class="flex items-center gap-1">
+                          <p [ngClass]="projectionLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                            Current Pace Projection
+                          </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]="currentPaceProjectionTooltip"
+                            tooltipType="markdown"
+                            tooltipPosition="top"
+                            (click)="$event.stopPropagation()">
+                            <svg class="w-3 h-3" 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>
+                        <p [ngClass]="projectionValueClasses()" class="text-lg font-bold">
+                          {{ formatCurrency(currentPaceProjection()) }}
+                        </p>
+                      </div>
+                    </div>
+                  }
+                </div>
+
+                <div class="form-area-collapse" [class.form-area-collapse-hidden]="calculationState() === 'results'" [class.mt-6]="calculationState() !== 'results'">
+                  <div class="form-area-content">
+                    <div class="space-y-6">
+                      @if (calculationState() !== 'results') {
+                      <div class="flex gap-2">
+                        <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>
+                      }
+
+                      @if (hasStoredResponse()) {
+                        <div class="flex justify-end">
+                          <button
+                            (click)="handleCancel()"
+                            [ngClass]="cancelButtonClasses()"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">
+                            Cancel
+                          </button>
+                        </div>
+                      }
+                    }
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="chart-in-column" [class.chart-in-column-active]="calculationState() === 'results' && detailsExpanded()">
+                <div class="chart-in-column-content">
+                  <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]="'108px'"
+                        />
+                      } @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>
+            </div>
+
+            <div class="calculated-card-enter order-first lg:order-last" [class.calculated-card-enter-active]="calculatedRevenue() > 0">
+              <div class="calculated-card-content">
+                @if (calculatedRevenue() > 0) {
+                  <div [ngClass]="calculatedValuesCardClasses()" class="p-6 rounded-xl border-2"
+                    [class.h-full]="calculationState() !== 'results' || detailsExpanded()">
+                    <div>
+                      <div class="flex items-center justify-between">
+                        <div>
+                          <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                            {{ currentYear() }} Revenue Target
+                          </p>
+                          <p [ngClass]="calculatedValueClasses()" class="font-bold transition-all duration-300 text-lg"
+                            [class.lg:text-3xl]="calculationState() !== 'results' || detailsExpanded()">
+                            @if (calculationState() === 'results' && targets() === undefined && submittedAbsoluteInput() !== null) {
+                              > {{ formatCurrency(submittedAbsoluteInput()!) }}
+                            } @else {
+                              {{ formatCurrency(displayedTargetRevenue()) }}
+                            }
+                          </p>
+                        </div>
+                        @if (calculationState() === 'results' && targets() === undefined) {
+                          <button
+                            (click)="handleAdjustTarget(); $event.stopPropagation()"
+                            [ngClass]="secondaryButtonClasses()"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all whitespace-nowrap">
+                            Adjust Revenue Target
+                          </button>
+                        }
+                      </div>
+
+                      <div class="details-collapse" [class.details-collapse-expanded]="calculationState() !== 'results' || detailsExpanded()">
+                        <div class="details-collapse-content">
+                          <div class="relative pt-6 mt-6">
+                            <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">
+                                vs. {{ priorYear() }}
+                              </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">
+                                  Increase Amount
+                                </p>
+                                <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                  @if (isTargetValid()) {
+                                    {{ formatCurrency(animatedIncreaseAmount()) }}
+                                  } @else {
+                                    --
+                                  }
+                                </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">
+                                  @if (isTargetValid()) {
+                                    +{{ formatPercentage(animatedPercentageGrowth(), 1) }}
+                                  } @else {
+                                    --
+                                  }
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+
+                          @if (currentPaceProjection() > 0) {
+                            <div class="relative pt-6 mt-6">
+                              <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
+                                </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
+                                  </p>
+                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                    @if (isTargetValid()) {
+                                      {{ formatCurrency(animatedGapAmount()) }}
+                                    } @else {
+                                      --
+                                    }
+                                  </p>
+                                </div>
+                                <div>
+                                  <div class="flex items-center gap-1 mb-1">
+                                    <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                                      Additional Growth Needed
+                                    </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"
+                                      tooltipType="markdown"
+                                      tooltipPosition="top"
+                                      (click)="$event.stopPropagation()">
+                                      <svg class="w-3 h-3" 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>
+                                  <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                                    @if (isTargetValid()) {
+                                      {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(animatedGapPercentage(), 1) }}
+                                    } @else {
+                                      --
+                                    }
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          }
+
+                          </div>
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          @if (calculationState() !== 'results') {
+            <div class="w-full">
+              <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]="'200px'"
+                  />
+                } @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>
+
+      <div class="metrics-section-enter" [class.metrics-section-enter-active]="showMetricsVisualization()">
+        <div class="metrics-section-content">
+          @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">
+                  @if (targets() === undefined && submittedAbsoluteInput() !== null) {
+                    To achieve your revenue target of over {{ formatCurrency(submittedAbsoluteInput()!) }}, the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth.
+                  } @else {
+                    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()"
+                (viewStageReport)="openMetricReport($event)"
+                (viewRelatedMetricReport)="openMetricReport($event)"
+              />
+            </div>
+          }
+        </div>
+      </div>
+
+      <symphiq-sticky-submit-bar
+        [viewMode]="viewMode()"
+        [isValid]="isValid()"
+        [isSubmitting]="isCalculating()"
+        [validationMessage]="validationMessage()"
+        [buttonText]="submitButtonText()"
+        [showCancelButton]="calculationState() === 'input' && hasStoredResponse()"
+        (submitClick)="handleSubmitClick()"
+        (cancelClick)="handleCancel()"
+      />
+
+      <!-- Metric Report Modal -->
+      <symphiq-metric-report-modal
+        [viewMode]="viewMode()"
+        [metricEnum]="selectedMetricEnum()"
+        [metricData]="selectedMetricData()"
+        [contributingMetrics]="selectedContributingMetrics()"
+        [pacingMetrics]="pacingMetrics()"
+        [trendChartData]="revenueChartData()"
+        [isOpen]="isMetricReportOpen()"
+        (closed)="closeMetricReport()"
+      />
+    </div>
   `, styles: [".calculated-card-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active{grid-template-rows:1fr}.calculated-card-content{overflow:hidden}.form-area-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden{grid-template-rows:0fr}.form-area-content{overflow:hidden}.chart-section-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden{grid-template-rows:0fr}.chart-section-content{overflow:hidden}.chart-in-column{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active{grid-template-rows:1fr}.chart-in-column-content{overflow:hidden}.metrics-section-enter{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active{grid-template-rows:1fr}.metrics-section-content{overflow:hidden}.details-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.details-collapse-expanded{grid-template-rows:1fr}.details-collapse-content{overflow:hidden}.chevron-rotate{transition:transform .3s ease-out}.chevron-rotate-expanded{transform:rotate(180deg)}\n"] }]
     }], () => [], { absoluteInputRef: [{
             type: ViewChild,
@@ -60041,7 +60194,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"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 535 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 536 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);