@eric-emg/symphiq-components 1.2.243 → 1.2.245

package/fesm2022/symphiq-components.mjs

@@ -15,7 +15,7 @@ import { FormsModule, FormBuilder, Validators, ReactiveFormsModule } from '@angu
 import { trigger, transition, style, animate } from '@angular/animations';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MarkdownComponent } from 'ngx-markdown';
-import { Root, color, Tooltip, Bullet, Circle, Legend, percent, p100, p50 } from '@amcharts/amcharts5';
+import { Root, color, Tooltip, Bullet, Circle, Legend, percent, LinearGradient, p100, p50 } from '@amcharts/amcharts5';
 import { XYChart, CategoryAxis, AxisRendererX, ValueAxis, AxisRendererY, XYCursor, LineSeries, DateAxis, ColumnSeries } from '@amcharts/amcharts5/xy';
 import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
 import { PieChart, PieSeries } from '@amcharts/amcharts5/percent';
@@ -3222,7 +3222,7 @@ class DataLoaderService {
         args: [{ providedIn: 'root' }]
     }], () => [{ type: i1.HttpClient }], null); })();
 
-const _c0$16 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
+const _c0$17 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
 const _c1$D = a0 => ["skeleton-shimmer-overlay", "absolute", "inset-0", "bg-gradient-to-r", a0];
 class SkeletonLoaderComponent {
     constructor() {
@@ -3239,7 +3239,7 @@ class SkeletonLoaderComponent {
         } if (rf & 2) {
             i0.ɵɵstyleProp("width", ctx.width())("height", ctx.height());
             i0.ɵɵclassProp("skeleton-shimmer", true)("skeleton-pulse", ctx.pulse());
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$16, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$17, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$D, ctx.isLightMode() ? "from-transparent via-white/60 to-transparent" : "from-transparent via-slate-500/40 to-transparent"));
         } }, dependencies: [NgClass], styles: [".skeleton-loader[_ngcontent-%COMP%]{position:relative;overflow:hidden}.skeleton-shimmer-overlay[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_shimmer 2s infinite cubic-bezier(.4,0,.6,1);transform:translate(-100%)}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes _ngcontent-%COMP%_pulse{0%,to{opacity:1}50%{opacity:.6}}"], changeDetection: 0 }); }
@@ -3279,7 +3279,7 @@ const ChartContainerComponent_Conditional_1_Conditional_13_Defer_2_DepsFn = () =
 const ChartContainerComponent_Conditional_1_Conditional_14_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return barChart_component; }).then(m => m.BarChartComponent)];
 const ChartContainerComponent_Conditional_1_Conditional_15_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return pieChart_component; }).then(m => m.PieChartComponent)];
 const ChartContainerComponent_Conditional_1_Conditional_16_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
-const _c0$15 = (a0, a1) => [a0, a1];
+const _c0$16 = (a0, a1) => [a0, a1];
 function ChartContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
     i0.ɵɵelement(2, "symphiq-skeleton-loader", 3)(3, "symphiq-skeleton-loader", 3);
@@ -3331,7 +3331,7 @@ function ChartContainerComponent_Conditional_1_Conditional_11_Template(rf, ctx)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$15, ctx_r0.iconClass(), ctx_r0.isLightMode() ? "bg-white/90 hover:bg-white" : "bg-slate-800/90 hover:bg-slate-800"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$16, ctx_r0.iconClass(), ctx_r0.isLightMode() ? "bg-white/90 hover:bg-white" : "bg-slate-800/90 hover:bg-slate-800"));
 } }
 function ChartContainerComponent_Conditional_1_Conditional_13_Defer_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-line-chart", 23);
@@ -4933,7 +4933,7 @@ class CompetitivePositioningSummaryComponent {
     }], null, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], overallDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "overallDescription", required: false }] }], competitiveBenchmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "competitiveBenchmark", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], scrollToCompetitive: [{ type: i0.Output, args: ["scrollToCompetitive"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitivePositioningSummaryComponent, { className: "CompetitivePositioningSummaryComponent", filePath: "lib/components/funnel-analysis-dashboard/competitive-positioning-summary.component.ts", lineNumber: 298 }); })();
 
-const _c0$14 = () => [1, 2, 3, 4];
+const _c0$15 = () => [1, 2, 3, 4];
 function OverallAssessmentComponent_Conditional_0_For_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-skeleton-loader", 6)(2, "symphiq-skeleton-loader", 6);
@@ -4967,7 +4967,7 @@ function OverallAssessmentComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100px")("height", "70px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$14));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$15));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r0.isLightMode());
 } }
@@ -6182,7 +6182,7 @@ class OverallAssessmentComponent {
     }], null, { assessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "assessment", required: false }] }], revenueMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "revenueMetric", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isChartsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChartsLoading", required: false }] }], strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: false }] }], weaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "weaknesses", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], scrollToSection: [{ type: i0.Output, args: ["scrollToSection"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverallAssessmentComponent, { className: "OverallAssessmentComponent", filePath: "lib/components/funnel-analysis-dashboard/overall-assessment.component.ts", lineNumber: 303 }); })();
 
-const _c0$13 = () => [1, 2, 3];
+const _c0$14 = () => [1, 2, 3];
 const _c1$C = () => [1, 2, 3, 4];
 const _c2$q = () => [];
 function InsightCardComponent_Conditional_0_Conditional_0_For_7_Template(rf, ctx) { if (rf & 1) {
@@ -6220,7 +6220,7 @@ function InsightCardComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "60%")("height", "20px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$13));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$14));
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(9, _c1$C));
 } }
@@ -8920,7 +8920,7 @@ class MetricCardComponent {
     }], () => [], { metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: false }] }], insights: [{ type: i0.Input, args: [{ isSignal: true, alias: "insights", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], analysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysis", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInModal", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], initialExpandedSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialExpandedSection", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricCardComponent, { className: "MetricCardComponent", filePath: "lib/components/funnel-analysis-dashboard/metric-card.component.ts", lineNumber: 537 }); })();
 
-const _c0$12 = () => [1, 2, 3];
+const _c0$13 = () => [1, 2, 3];
 const _c1$B = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
 const _forTrack0$P = ($index, $item) => $item.metric;
@@ -8950,7 +8950,7 @@ function BreakdownSectionComponent_Conditional_0_For_7_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "30%")("height", "18px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c0$12));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c0$13));
 } }
 function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
@@ -8969,7 +8969,7 @@ function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "85%")("height", "14px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0$12));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0$13));
 } }
 function BreakdownSectionComponent_Conditional_1_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -11497,7 +11497,7 @@ class FunnelWeaknessesListModalContentComponent {
     }], null, { weaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "weaknesses", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelWeaknessesListModalContentComponent, { className: "FunnelWeaknessesListModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-weaknesses-list-modal-content.component.ts", lineNumber: 132 }); })();
 
-const _c0$11 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$12 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 function FunnelStrengthDetailModalContentComponent_For_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 12);
 } if (rf & 2) {
@@ -11773,7 +11773,7 @@ class FunnelStrengthDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$11));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$12));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -11949,7 +11949,7 @@ class FunnelStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStrengthDetailModalContentComponent, { className: "FunnelStrengthDetailModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-strength-detail-modal-content.component.ts", lineNumber: 128 }); })();
 
-const _c0$10 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$11 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 function FunnelWeaknessDetailModalContentComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 17);
 } if (rf & 2) {
@@ -12460,7 +12460,7 @@ class FunnelWeaknessDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$10));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$11));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -12921,7 +12921,7 @@ class ProfileItemLookupService {
             }]
     }], null, null); })();
 
-const _c0$$ = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$10 = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$M = ($index, $item) => $item.id;
 function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -12939,7 +12939,7 @@ function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r2.label);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$$, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$10, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedAreaChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -13023,7 +13023,7 @@ class RelatedAreaChipsComponent {
     }], null, { relatedAreaIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedAreaIds", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedAreaChipsComponent, { className: "RelatedAreaChipsComponent", filePath: "lib/components/business-analysis-dashboard/shared/related-area-chips.component.ts", lineNumber: 31 }); })();
 
-const _c0$_ = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$$ = a0 => ({ name: "chevron-right", source: a0 });
 function CompetitorChipListComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -13040,7 +13040,7 @@ function CompetitorChipListComponent_Conditional_0_For_2_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.getItemLabel(item_r2));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$_, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$$, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function CompetitorChipListComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -13441,7 +13441,7 @@ class CompetitorContextSectionComponent {
     }], null, { contextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextType", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorContextSectionComponent, { className: "CompetitorContextSectionComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-context-section.component.ts", lineNumber: 86 }); })();
 
-const _c0$Z = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$_ = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$K = ($index, $item) => $item.id;
 function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -13462,7 +13462,7 @@ function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ct
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(rec_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$Z, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$_, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -20431,7 +20431,7 @@ class MarkdownTooltipComponent {
     }], null, { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MarkdownTooltipComponent, { className: "MarkdownTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/markdown-tooltip.component.ts", lineNumber: 69 }); })();
 
-const _c0$Y = () => [];
+const _c0$Z = () => [];
 function TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
@@ -20595,7 +20595,7 @@ function TooltipContainerComponent_Conditional_0_Case_15_Conditional_1_Template(
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const content_r4 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$Y));
+    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$Z));
 } }
 function TooltipContainerComponent_Conditional_0_Case_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
@@ -21701,7 +21701,7 @@ class SearchService {
             }]
     }], null, null); })();
 
-const _c0$X = ["searchInput"];
+const _c0$Y = ["searchInput"];
 const _forTrack0$E = ($index, $item) => $item.id;
 function SearchBarComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -22063,7 +22063,7 @@ class SearchBarComponent {
     }
     static { this.ɵfac = function SearchBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchBarComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBarComponent, selectors: [["symphiq-search-bar"]], viewQuery: function SearchBarComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$X, 5);
+            i0.ɵɵviewQuery(_c0$Y, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
@@ -25746,7 +25746,7 @@ class FunnelWelcomeBannerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelWelcomeBannerComponent, { className: "FunnelWelcomeBannerComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-welcome-banner.component.ts", lineNumber: 113 }); })();
 
-const _c0$W = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
+const _c0$X = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
 const _c1$A = ["[slot=overall-performance]", "[slot=performance-metrics]", "[slot=performance-breakdowns]", "[slot=competitive-intelligence]"];
 class CollapsibleFunnelSectionGroupComponent {
     constructor() {
@@ -25879,7 +25879,7 @@ class CollapsibleFunnelSectionGroupComponent {
     }
     static { this.ɵfac = function CollapsibleFunnelSectionGroupComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsibleFunnelSectionGroupComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsibleFunnelSectionGroupComponent, selectors: [["symphiq-collapsible-funnel-section-group"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c1$A, decls: 90, vars: 58, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "mb-6", "p-4", "rounded-xl", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["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-1"], [1, "font-semibold", "text-sm", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "space-y-3"], [1, "rounded-xl", "border", "overflow-hidden", "transition-all", "duration-200", 3, "id", "ngClass"], ["type", "button", 1, "cursor-pointer", "w-full", "px-5", "py-4", "flex", "items-center", "justify-between", "gap-4", "text-left", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], [1, "p-2", "rounded-lg", "flex-shrink-0", "transition-colors", "duration-200", 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", "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, "flex-1", "min-w-0"], [1, "font-semibold", "transition-colors", "duration-200", 3, "ngClass"], [1, "text-sm", "mt-0.5", "transition-colors", "duration-200", 3, "ngClass"], [1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-200", 3, "ngClass"], ["stroke", "currentColor", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "border-t", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"]], template: function CollapsibleFunnelSectionGroupComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$W);
+            i0.ɵɵprojectionDef(_c0$X);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(5, "svg", 5);
@@ -26722,7 +26722,7 @@ class ViewModeSwitcherModalComponent {
     }], null, { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], currentMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMode", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], modeSelected: [{ type: i0.Output, args: ["modeSelected"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewModeSwitcherModalComponent, { className: "ViewModeSwitcherModalComponent", filePath: "lib/components/shared/view-mode-switcher-modal.component.ts", lineNumber: 160 }); })();
 
-const _c0$V = a0 => ({ name: "check-badge", source: a0 });
+const _c0$W = a0 => ({ name: "check-badge", source: a0 });
 const _c1$z = a0 => ({ name: "check-circle", source: a0 });
 const _c2$o = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$A = ($index, $item) => $item.area;
@@ -26739,7 +26739,7 @@ function KeyStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$V, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$W, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -26954,7 +26954,7 @@ class KeyStrengthsListModalContentComponent {
     }], null, { keyStrengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyStrengths", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyStrengthsListModalContentComponent, { className: "KeyStrengthsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/key-strengths-list-modal-content.component.ts", lineNumber: 79 }); })();
 
-const _c0$U = a0 => ({ name: "shield-check", source: a0 });
+const _c0$V = a0 => ({ name: "shield-check", source: a0 });
 const _c1$y = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c2$n = a0 => ({ name: "document-text", source: a0 });
 const _c3$h = a0 => ({ name: "chevron-right", source: a0 });
@@ -26972,7 +26972,7 @@ function CriticalGapsListModalContentComponent_Conditional_1_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$U, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$V, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -27270,7 +27270,7 @@ class CriticalGapsListModalContentComponent {
     }], null, { criticalGaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "criticalGaps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CriticalGapsListModalContentComponent, { className: "CriticalGapsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/critical-gaps-list-modal-content.component.ts", lineNumber: 98 }); })();
 
-const _c0$T = a0 => ({ name: "check-circle", source: a0 });
+const _c0$U = a0 => ({ name: "check-circle", source: a0 });
 const _c1$x = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$y = ($index, $item) => $item.questionId;
 function KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
@@ -27326,7 +27326,7 @@ function KeyStrengthDetailModalContentComponent_Conditional_13_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$T, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$U, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.strength().supportingAnswers);
 } }
@@ -27511,7 +27511,7 @@ class KeyStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyStrengthDetailModalContentComponent, { className: "KeyStrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/key-strength-detail-modal-content.component.ts", lineNumber: 79 }); })();
 
-const _c0$S = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$T = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$w = a0 => ({ name: "document-text", source: a0 });
 const _c2$m = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$x = ($index, $item) => $item.questionId;
@@ -27789,7 +27789,7 @@ class CriticalGapDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactSectionClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$S, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$T, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.impactTitleClasses());
             i0.ɵɵadvance(2);
@@ -29374,7 +29374,7 @@ class TopPriorityDetailModalContentComponent {
     }], null, { priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], focusAreaName: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaName", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TopPriorityDetailModalContentComponent, { className: "TopPriorityDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/top-priority-detail-modal-content.component.ts", lineNumber: 72 }); })();
 
-const _c0$R = a0 => ({ name: "check-badge", source: a0 });
+const _c0$S = a0 => ({ name: "check-badge", source: a0 });
 const _c1$v = a0 => ({ name: "check-circle", source: a0 });
 const _c2$l = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$g = a0 => ({ name: "chart-bar", source: a0 });
@@ -29392,7 +29392,7 @@ function FocusAreaStrengthsListModalContentComponent_Conditional_1_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$R, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$S, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -29697,7 +29697,7 @@ class FocusAreaStrengthsListModalContentComponent {
     }], null, { strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaStrengthsListModalContentComponent, { className: "FocusAreaStrengthsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-strengths-list-modal-content.component.ts", lineNumber: 109 }); })();
 
-const _c0$Q = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$R = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$u = a0 => ({ name: "exclamation-circle", source: a0 });
 const _c2$k = a0 => ({ name: "chevron-right", source: a0 });
 function _forTrack0$v($index, $item) { return this.getGapTitle($item); }
@@ -29714,7 +29714,7 @@ function FocusAreaGapsListModalContentComponent_Conditional_1_Template(rf, ctx)
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$Q, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$R, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -30091,7 +30091,7 @@ class FocusAreaGapsListModalContentComponent {
     }], null, { gaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaGapsListModalContentComponent, { className: "FocusAreaGapsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-gaps-list-modal-content.component.ts", lineNumber: 106 }); })();
 
-const _c0$P = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$Q = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$t = a0 => ({ name: "chevron-right", source: a0 });
 const _c2$j = a0 => ({ name: "chart-bar", source: a0 });
 const _forTrack0$u = ($index, $item) => $item.opportunity;
@@ -30108,7 +30108,7 @@ function FocusAreaOpportunitiesListModalContentComponent_Conditional_1_Template(
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$P, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$Q, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -30360,7 +30360,7 @@ class FocusAreaOpportunitiesListModalContentComponent {
     }], null, { opportunities: [{ type: i0.Input, args: [{ isSignal: true, alias: "opportunities", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaOpportunitiesListModalContentComponent, { className: "FocusAreaOpportunitiesListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-opportunities-list-modal-content.component.ts", lineNumber: 90 }); })();
 
-const _c0$O = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$P = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$s = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$t = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -30425,7 +30425,7 @@ function FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.formatMetricName(metric_r3.metric || ""));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$O, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$P, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaStrengthDetailModalContentComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 8);
@@ -30745,7 +30745,7 @@ class FocusAreaStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaStrengthDetailModalContentComponent, { className: "FocusAreaStrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-strength-detail-modal-content.component.ts", lineNumber: 121 }); })();
 
-const _c0$N = a0 => ({ name: "chat-bubble-left-right", source: a0 });
+const _c0$O = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 function FocusAreaGapDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "span", 3);
     i0.ɵɵtext(2);
@@ -30842,7 +30842,7 @@ function FocusAreaGapDetailModalContentComponent_Conditional_6_For_5_Template(rf
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.answerClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$N, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$O, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerQuestionClasses());
     i0.ɵɵadvance();
@@ -31081,7 +31081,7 @@ class FocusAreaGapDetailModalContentComponent {
     }], null, { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaGapDetailModalContentComponent, { className: "FocusAreaGapDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-gap-detail-modal-content.component.ts", lineNumber: 98 }); })();
 
-const _c0$M = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$N = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$r = () => [];
 const _forTrack0$s = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -31128,7 +31128,7 @@ function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.formatMetricName(metric_r3.metric || ""));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$M, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$N, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 5);
@@ -31533,7 +31533,7 @@ class CircularProgressComponent {
     }], null, { percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], progressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColor", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], textClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClasses", required: false }] }], strokeLinecap: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeLinecap", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], animationDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDelay", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CircularProgressComponent, { className: "CircularProgressComponent", filePath: "lib/components/business-analysis-dashboard/visualizations/circular-progress.component.ts", lineNumber: 41 }); })();
 
-const _c0$L = ["*"];
+const _c0$M = ["*"];
 const _c1$q = (a0, a1) => [a0, a1];
 function VisualizationContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -31578,7 +31578,7 @@ class VisualizationContainerComponent {
         });
     }
     static { this.ɵfac = function VisualizationContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VisualizationContainerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualizationContainerComponent, selectors: [["symphiq-visualization-container"]], inputs: { isLightMode: [1, "isLightMode"], visualizationType: [1, "visualizationType"], visualizationData: [1, "visualizationData"], disableInteraction: [1, "disableInteraction"] }, outputs: { visualizationClick: "visualizationClick" }, ngContentSelectors: _c0$L, decls: 4, vars: 8, consts: [[1, "relative", "rounded-xl", "transition-all", "duration-300", 3, "click", "ngClass"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "ngClass"], [1, "transition-opacity", "duration-300"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 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", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"]], template: function VisualizationContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualizationContainerComponent, selectors: [["symphiq-visualization-container"]], inputs: { isLightMode: [1, "isLightMode"], visualizationType: [1, "visualizationType"], visualizationData: [1, "visualizationData"], disableInteraction: [1, "disableInteraction"] }, outputs: { visualizationClick: "visualizationClick" }, ngContentSelectors: _c0$M, decls: 4, vars: 8, consts: [[1, "relative", "rounded-xl", "transition-all", "duration-300", 3, "click", "ngClass"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "ngClass"], [1, "transition-opacity", "duration-300"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 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", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"]], template: function VisualizationContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function VisualizationContainerComponent_Template_div_click_0_listener($event) { return ctx.onVisualizationClick($event); });
@@ -31699,7 +31699,7 @@ class MetricBadgeComponent {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricBadgeComponent, { className: "MetricBadgeComponent", filePath: "lib/components/business-analysis-dashboard/badges/metric-badge.component.ts", lineNumber: 22 }); })();
 
-const _c0$K = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$L = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$p = a0 => ({ name: "chevron-right", source: a0 });
 function OpportunityHighlightBannerComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 7);
@@ -31764,7 +31764,7 @@ class OpportunityHighlightBannerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$K, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$L, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -31821,7 +31821,7 @@ class OpportunityHighlightBannerComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OpportunityHighlightBannerComponent, { className: "OpportunityHighlightBannerComponent", filePath: "lib/components/business-analysis-dashboard/banners/opportunity-highlight-banner.component.ts", lineNumber: 44 }); })();
 
-const _c0$J = a0 => ({ name: "users", source: a0 });
+const _c0$K = a0 => ({ name: "users", source: a0 });
 function CompetitorOverlapVisualizationComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
     i0.ɵɵelement(2, "symphiq-icon", 7);
@@ -31836,7 +31836,7 @@ function CompetitorOverlapVisualizationComponent_Conditional_18_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.competitorListLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$J, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$K, ctx_r0.iconSource));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("relatedCompetitorIds", ctx_r0.relatedCompetitorIds())("viewMode", ctx_r0.isDark() ? ctx_r0.ViewModeEnum.DARK : ctx_r0.ViewModeEnum.LIGHT)("isDark", ctx_r0.isDark());
 } }
@@ -32400,7 +32400,7 @@ class ViewportAnimationDirective {
             type: Input
         }] }); })();
 
-const _c0$I = a0 => ({ name: "star", source: a0 });
+const _c0$J = a0 => ({ name: "star", source: a0 });
 const _c1$o = a0 => ({ name: "globe-americas", source: a0 });
 const _c2$i = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$f = a0 => ({ name: "information-circle", source: a0 });
@@ -32436,7 +32436,7 @@ function RegionCardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 13);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$I, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$J, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function RegionCardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 14);
@@ -33478,7 +33478,7 @@ class CompetitiveInsightBadgeComponent {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveInsightBadgeComponent, { className: "CompetitiveInsightBadgeComponent", filePath: "lib/components/business-analysis-dashboard/badges/competitive-insight-badge.component.ts", lineNumber: 25 }); })();
 
-const _c0$H = a0 => ({ name: "calendar-days", source: a0 });
+const _c0$I = a0 => ({ name: "calendar-days", source: a0 });
 const _c1$n = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$h = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$e = a0 => ({ name: "information-circle", source: a0 });
@@ -33499,7 +33499,7 @@ function SeasonCardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 12);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$H, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$I, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function SeasonCardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 13);
@@ -34316,7 +34316,7 @@ class SeasonCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SeasonCardComponent, { className: "SeasonCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/season-card.component.ts", lineNumber: 270 }); })();
 
-const _c0$G = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$H = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$m = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$g = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$d = a0 => ({ name: "information-circle", source: a0 });
@@ -34461,7 +34461,7 @@ function CustomerSegmentCardComponent_Conditional_22_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("label", ctx_r0.formatPercentage(ctx_r0.item().percentageOfRevenue) + " of Revenue")("icon", i0.ɵɵpureFunction1(4, _c0$G, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatPercentage(ctx_r0.item().percentageOfRevenue) + " of Revenue")("icon", i0.ɵɵpureFunction1(4, _c0$H, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function CustomerSegmentCardComponent_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -35433,7 +35433,7 @@ class CustomerSegmentCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CustomerSegmentCardComponent, { className: "CustomerSegmentCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/customer-segment-card.component.ts", lineNumber: 366 }); })();
 
-const _c0$F = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$G = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$l = a0 => ({ name: "document-text", source: a0 });
 const _c2$f = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$c = a0 => ({ name: "information-circle", source: a0 });
@@ -35531,7 +35531,7 @@ function PriceTierCardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$F, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$G, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -36270,7 +36270,7 @@ class PriceTierCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PriceTierCardComponent, { className: "PriceTierCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/price-tier-card.component.ts", lineNumber: 261 }); })();
 
-const _c0$E = () => ({ name: "cube", source: "HEROICONS" });
+const _c0$F = () => ({ name: "cube", source: "HEROICONS" });
 const _c1$k = () => ({ name: "currency-dollar", source: "HEROICONS" });
 const _c2$e = () => ({ name: "chart-bar", source: "HEROICONS" });
 const _c3$b = a0 => ({ name: "chart-bar", source: a0 });
@@ -36317,7 +36317,7 @@ function ProductCategoryCardComponent_Conditional_14_Conditional_2_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatBoxClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$E))("ngClass", ctx_r0.getStatIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$F))("ngClass", ctx_r0.getStatIconClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatLabelClasses());
     i0.ɵɵadvance(2);
@@ -37265,13 +37265,13 @@ class ProductCategoryCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProductCategoryCardComponent, { className: "ProductCategoryCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/product-category-card.component.ts", lineNumber: 324 }); })();
 
-const _c0$D = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$E = (a0, a1) => ({ name: a0, source: a1 });
 function CompetitiveStrengthIndicatorComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-icon", 2);
 } if (rf & 2) {
     const star_r1 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(2, _c0$D, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(2, _c0$E, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
 } }
 class CompetitiveStrengthIndicatorComponent {
     constructor() {
@@ -37427,7 +37427,7 @@ function getCategoryBadgeClasses(category, isDark) {
     return `px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap ${colorClasses}`;
 }
 
-const _c0$C = a0 => ({ name: "shield-check", source: a0 });
+const _c0$D = a0 => ({ name: "shield-check", source: a0 });
 const _c1$j = a0 => ({ name: "building-storefront", source: a0 });
 const _c2$d = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$a = a0 => ({ name: "information-circle", source: a0 });
@@ -37499,7 +37499,7 @@ function EnhancedListItemCardComponent_Conditional_21_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$C, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$D, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -38143,7 +38143,7 @@ class EnhancedListItemCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EnhancedListItemCardComponent, { className: "EnhancedListItemCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/enhanced-list-item-card.component.ts", lineNumber: 221 }); })();
 
-const _c0$B = a0 => ({ name: "academic-cap", source: a0 });
+const _c0$C = a0 => ({ name: "academic-cap", source: a0 });
 const _c1$i = a0 => ({ name: "information-circle", source: a0 });
 const _c2$c = a0 => ({ name: "signal", source: a0 });
 const _c3$9 = a0 => ({ name: "wrench-screwdriver", source: a0 });
@@ -38224,7 +38224,7 @@ function FocusAreaDetailCardComponent_Conditional_16_Conditional_5_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$B, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$C, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.expandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -40005,7 +40005,7 @@ class CompetitorAnalysisCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorAnalysisCardComponent, { className: "CompetitorAnalysisCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-analysis-card.component.ts", lineNumber: 312 }); })();
 
-const _c0$A = ["*"];
+const _c0$B = ["*"];
 class SkeletonCardBaseComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -40025,7 +40025,7 @@ class SkeletonCardBaseComponent {
     `.trim();
     }
     static { this.ɵfac = function SkeletonCardBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SkeletonCardBaseComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonCardBaseComponent, selectors: [["symphiq-skeleton-card-base"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c0$A, decls: 2, vars: 1, consts: [[1, "animate-pulse", 3, "ngClass"]], template: function SkeletonCardBaseComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonCardBaseComponent, selectors: [["symphiq-skeleton-card-base"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c0$B, decls: 2, vars: 1, consts: [[1, "animate-pulse", 3, "ngClass"]], template: function SkeletonCardBaseComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -41190,7 +41190,7 @@ class ProfileItemCardComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], subsectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionId", required: false }] }], forceExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceExpanded", required: false }] }], animationIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationIndex", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileItemCardComponent, { className: "ProfileItemCardComponent", filePath: "lib/components/business-analysis-dashboard/profile-item-card.component.ts", lineNumber: 171 }); })();
 
-const _c0$z = ["scrollContainer"];
+const _c0$A = ["scrollContainer"];
 const _c1$h = a0 => ({ name: "arrow-right", source: a0 });
 function ItemDetailModalComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -41310,7 +41310,7 @@ class ItemDetailModalComponent {
     }
     static { this.ɵfac = function ItemDetailModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ItemDetailModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemDetailModalComponent, selectors: [["symphiq-item-detail-modal"]], viewQuery: function ItemDetailModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$z, 5);
+            i0.ɵɵviewQuery(_c0$A, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
@@ -41389,7 +41389,7 @@ class ItemDetailModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ItemDetailModalComponent, { className: "ItemDetailModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/item-detail-modal.component.ts", lineNumber: 53 }); })();
 
-const _c0$y = ["modalContent"];
+const _c0$z = ["modalContent"];
 const _c1$g = ["modalWrapper"];
 const _c2$b = ["*"];
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_3_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return lineChart_component; }).then(m => m.LineChartComponent)];
@@ -43638,7 +43638,7 @@ class ProfileAnalysisModalComponent {
     }
     static { this.ɵfac = function ProfileAnalysisModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProfileAnalysisModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProfileAnalysisModalComponent, selectors: [["symphiq-profile-analysis-modal"]], viewQuery: function ProfileAnalysisModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$y, 5);
+            i0.ɵɵviewQuery(_c0$z, 5);
             i0.ɵɵviewQuery(_c1$g, 5);
         } if (rf & 2) {
             let _t;
@@ -44193,7 +44193,7 @@ class ProfileAnalysisModalComponent {
         }] }); }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileAnalysisModalComponent, { className: "ProfileAnalysisModalComponent", filePath: "lib/components/profile-analysis-dashboard/profile-analysis-modal.component.ts", lineNumber: 554 }); })();
 
-const _c0$x = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$y = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$f = a0 => ({ name: "trophy", source: a0 });
 const _c2$a = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$7 = a0 => ({ name: "signal", source: a0 });
@@ -44403,7 +44403,7 @@ class CompetitiveGapModalComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$x, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$y, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -44524,7 +44524,7 @@ class CompetitiveGapModalComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveGapModalComponent, { className: "CompetitiveGapModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/competitive-gap-modal.component.ts", lineNumber: 101 }); })();
 
-const _c0$w = a0 => ({ name: "list-bullet", source: a0 });
+const _c0$x = a0 => ({ name: "list-bullet", source: a0 });
 const _c1$e = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$9 = a0 => ({ name: "check-circle", source: a0 });
 const _c3$6 = a0 => ({ name: "exclamation-circle", source: a0 });
@@ -44544,7 +44544,7 @@ function RecommendationActionStepsModalComponent_Conditional_1_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.iconContainerClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$w, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$x, ctx_r0.iconSource));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.titleClasses());
     i0.ɵɵadvance(2);
@@ -44764,7 +44764,7 @@ class RecommendationActionStepsModalComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], actionSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionSteps", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecommendationActionStepsModalComponent, { className: "RecommendationActionStepsModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/recommendation-action-steps-modal.component.ts", lineNumber: 69 }); })();
 
-const _c0$v = ["modalContent"];
+const _c0$w = ["modalContent"];
 const _c1$d = ["modalWrapper"];
 function BusinessAnalysisModalComponent_Conditional_0_Conditional_10_For_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -45287,7 +45287,7 @@ class BusinessAnalysisModalComponent {
     }
     static { this.ɵfac = function BusinessAnalysisModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BusinessAnalysisModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BusinessAnalysisModalComponent, selectors: [["symphiq-business-analysis-modal"]], viewQuery: function BusinessAnalysisModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$v, 5);
+            i0.ɵɵviewQuery(_c0$w, 5);
             i0.ɵɵviewQuery(_c1$d, 5);
         } if (rf & 2) {
             let _t;
@@ -45472,7 +45472,7 @@ class BusinessAnalysisModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BusinessAnalysisModalComponent, { className: "BusinessAnalysisModalComponent", filePath: "lib/components/business-analysis-dashboard/business-analysis-modal.component.ts", lineNumber: 171 }); })();
 
-const _c0$u = ["dashboardContainer"];
+const _c0$v = ["dashboardContainer"];
 const _c1$c = () => ({});
 const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$5 = () => [1, 2, 3];
@@ -47733,7 +47733,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
     static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService), i0.ɵɵdirectiveInject(ProfileContextService), i0.ɵɵdirectiveInject(ProfileItemLookupService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], viewQuery: function SymphiqFunnelAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(ModalComponent, 5);
-            i0.ɵɵviewQuery(_c0$u, 5);
+            i0.ɵɵviewQuery(_c0$v, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalComponent = _t.first);
@@ -51407,7 +51407,7 @@ class FocusAreaToolsModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaToolsModalComponent, { className: "FocusAreaToolsModalComponent", filePath: "lib/components/create-account-dashboard/focus-area-tools-modal.component.ts", lineNumber: 149 }); })();
 
-const _c0$t = ["shopNameInput"];
+const _c0$u = ["shopNameInput"];
 const _forTrack0$l = ($index, $item) => $item.focusAreaDomain;
 function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Shopify ");
@@ -52570,7 +52570,7 @@ class SymphiqCreateAccountDashboardComponent {
     }
     static { this.ɵfac = function SymphiqCreateAccountDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqCreateAccountDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqCreateAccountDashboardComponent, selectors: [["symphiq-create-account-dashboard"]], viewQuery: function SymphiqCreateAccountDashboardComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$t, 5);
+            i0.ɵɵviewQuery(_c0$u, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopNameInput = _t.first);
@@ -54798,8 +54798,7 @@ function extractProjectedValue(pacingResponse, metricEnum) {
     if (!pacingResponse) {
         return null;
     }
-    const resp = pacingResponse;
-    const projectedMetric = resp.projectedMetricValues?.find((m) => m.metric === metricEnum);
+    const projectedMetric = pacingResponse.projectedMetricValues?.find((m) => m.metric === metricEnum);
     if (!projectedMetric?.value) {
         return null;
     }
@@ -56212,7 +56211,7 @@ class ChartValueFormatter {
     }
 }
 
-const _c0$s = ["chartdiv"];
+const _c0$t = ["chartdiv"];
 class AreaChartComponent {
     constructor() {
         this.chart = input({}, ...(ngDevMode ? [{ debugName: "chart" }] : []));
@@ -56521,7 +56520,7 @@ class AreaChartComponent {
     }
     static { this.ɵfac = function AreaChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AreaChartComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AreaChartComponent, selectors: [["symphiq-area-chart"]], viewQuery: function AreaChartComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$s, 7);
+            i0.ɵɵviewQuery(_c0$t, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
@@ -56553,7 +56552,7 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
     AreaChartComponent: AreaChartComponent
 });
 
-const _c0$r = ["chartdiv"];
+const _c0$s = ["chartdiv"];
 class LineChartComponent {
     constructor() {
         this.chart = input({}, ...(ngDevMode ? [{ debugName: "chart" }] : []));
@@ -56984,7 +56983,7 @@ class LineChartComponent {
     }
     static { this.ɵfac = function LineChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LineChartComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LineChartComponent, selectors: [["symphiq-line-chart"]], viewQuery: function LineChartComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$r, 7);
+            i0.ɵɵviewQuery(_c0$s, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
@@ -57016,54 +57015,284 @@ var lineChart_component = /*#__PURE__*/Object.freeze({
     LineChartComponent: LineChartComponent
 });
 
+const _c0$r = ["chartdiv"];
+class ProgressToTargetChartComponent {
+    constructor() {
+        this.data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.labelColor = computed(() => this.isLightMode() ? color(0x475467) : color(0x94a3b8), ...(ngDevMode ? [{ debugName: "labelColor" }] : []));
+        effect(() => {
+            const chartData = this.data();
+            if (chartData && this.root) {
+                this.updateChart(chartData);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.createChart();
+    }
+    ngOnDestroy() {
+        if (this.chart) {
+            this.chart.series.clear();
+            this.chart.xAxes.clear();
+            this.chart.yAxes.clear();
+        }
+        if (this.root) {
+            this.root.dispose();
+        }
+        this.chart = undefined;
+        this.root = undefined;
+    }
+    createChart() {
+        const chartData = this.data();
+        if (!this.chartDiv?.nativeElement)
+            return;
+        this.root = Root.new(this.chartDiv.nativeElement);
+        this.root.setThemes([am5themes_Animated.new(this.root)]);
+        this.chart = this.root.container.children.push(XYChart.new(this.root, {
+            panY: false,
+            panX: false,
+            wheelX: 'none',
+            wheelY: 'none',
+            pinchZoomX: false,
+            pinchZoomY: false,
+            layout: this.root.verticalLayout,
+            paddingTop: 20,
+            paddingBottom: 0,
+            paddingLeft: 0,
+            paddingRight: 0
+        }));
+        this.chart.zoomOutButton.set('forceHidden', true);
+        const xRenderer = AxisRendererX.new(this.root, {
+            strokeOpacity: 0.1
+        });
+        this.xAxis = this.chart.xAxes.push(ValueAxis.new(this.root, {
+            min: 0,
+            renderer: xRenderer
+        }));
+        xRenderer.labels.template.set('fill', this.labelColor());
+        const yRenderer = AxisRendererY.new(this.root, {
+            strokeOpacity: 0
+        });
+        this.yAxis = this.chart.yAxes.push(CategoryAxis.new(this.root, {
+            categoryField: 'category',
+            renderer: yRenderer
+        }));
+        yRenderer.labels.template.set('visible', false);
+        yRenderer.grid.template.set('visible', false);
+        if (chartData) {
+            this.buildChart(chartData);
+        }
+    }
+    updateChart(chartData) {
+        if (!this.chart || !this.root || !this.xAxis || !this.yAxis)
+            return;
+        this.chart.series.clear();
+        this.xAxis.axisRanges.clear();
+        this.buildChart(chartData);
+    }
+    buildChart(chartData) {
+        if (!this.root || !this.chart || !this.xAxis || !this.yAxis)
+            return;
+        const { currentValue, paceValue, targetValue, status } = chartData;
+        const xAxisMax = this.calculateXAxisMax(paceValue, targetValue, currentValue);
+        this.xAxis.set('max', xAxisMax);
+        const categoryDataItems = [
+            {
+                category: 'Progress',
+                pace: paceValue,
+                current: currentValue
+            }
+        ];
+        this.yAxis.data.setAll(categoryDataItems);
+        const paceColors = this.getPaceColors();
+        const currentColors = this.getCurrentColors(status);
+        const paceSeries = this.chart.series.push(ColumnSeries.new(this.root, {
+            name: 'Pace',
+            xAxis: this.xAxis,
+            yAxis: this.yAxis,
+            valueXField: 'pace',
+            categoryYField: 'category',
+            clustered: false,
+            tooltip: Tooltip.new(this.root, {
+                labelText: '[bold]Pace[/]\n{valueX}'
+            })
+        }));
+        const paceGradient = LinearGradient.new(this.root, {
+            stops: [
+                { color: paceColors.color1 },
+                { color: paceColors.color2 }
+            ]
+        });
+        paceSeries.columns.template.setAll({
+            height: percent(80),
+            tooltipX: 0,
+            strokeOpacity: 0,
+            cornerRadiusBR: 10,
+            cornerRadiusTR: 10,
+            fill: paceColors.color2,
+            fillGradient: paceGradient
+        });
+        paceSeries.data.setAll(categoryDataItems);
+        const currentSeries = this.chart.series.push(ColumnSeries.new(this.root, {
+            name: 'Current',
+            xAxis: this.xAxis,
+            yAxis: this.yAxis,
+            valueXField: 'current',
+            categoryYField: 'category',
+            clustered: false,
+            tooltip: Tooltip.new(this.root, {
+                labelText: '[bold]Current[/]\n{valueX}'
+            })
+        }));
+        const currentGradient = LinearGradient.new(this.root, {
+            stops: [
+                { color: currentColors.color1 },
+                { color: currentColors.color2 }
+            ]
+        });
+        currentSeries.columns.template.setAll({
+            height: percent(50),
+            tooltipX: 0,
+            strokeOpacity: 0,
+            cornerRadiusBR: 10,
+            cornerRadiusTR: 10,
+            fill: currentColors.color2,
+            fillGradient: currentGradient
+        });
+        currentSeries.data.setAll(categoryDataItems);
+        this.chart.set('cursor', XYCursor.new(this.root, {}));
+        const rangeDataItem = this.xAxis.makeDataItem({
+            value: targetValue * 0.95,
+            endValue: targetValue * 1.05,
+            above: true
+        });
+        this.xAxis.createAxisRange(rangeDataItem);
+        rangeDataItem.get('grid')?.setAll({
+            visible: false
+        });
+        const rangeGradient = LinearGradient.new(this.root, {
+            stops: [
+                { color: color(0x475467), opacity: 0.2 },
+                { color: color(0x475467), opacity: 0.3 }
+            ]
+        });
+        rangeDataItem.get('axisFill')?.setAll({
+            fill: color(0x000000),
+            fillOpacity: 0.1,
+            visible: true,
+            fillGradient: rangeGradient
+        });
+        rangeDataItem.get('label')?.setAll({
+            inside: true,
+            text: 'Target',
+            rotation: 0,
+            centerX: p100,
+            centerY: p100,
+            location: 1,
+            paddingBottom: 45,
+            paddingRight: 5,
+            dy: -18,
+            fill: this.labelColor()
+        });
+        const legend = this.chart.children.push(Legend.new(this.root, {
+            centerX: p50,
+            x: p50,
+            marginTop: 8
+        }));
+        legend.labels.template.setAll({
+            fill: this.labelColor()
+        });
+        legend.data.setAll(this.chart.series.values.slice().reverse());
+        this.chart.appear(1000, 100);
+        paceSeries.appear();
+        currentSeries.appear();
+    }
+    calculateXAxisMax(paceValue, targetValue, currentValue) {
+        let max = paceValue;
+        if (targetValue > paceValue) {
+            max = targetValue;
+        }
+        else if (currentValue > paceValue) {
+            max = currentValue;
+        }
+        return max * 1.1;
+    }
+    getPaceColors() {
+        return {
+            color1: color(0x0BA5EC),
+            color2: color(0x0284C7)
+        };
+    }
+    getCurrentColors(status) {
+        switch (status) {
+            case 'ahead':
+                return {
+                    color1: color(0x46ECC2),
+                    color2: color(0x08B775)
+                };
+            case 'on-pace':
+                return {
+                    color1: color(0x4AEDFB),
+                    color2: color(0x2DD1EF)
+                };
+            case 'behind':
+            default:
+                return {
+                    color1: color(0xF86C59),
+                    color2: color(0xE65143)
+                };
+        }
+    }
+    static { this.ɵfac = function ProgressToTargetChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProgressToTargetChartComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProgressToTargetChartComponent, selectors: [["symphiq-progress-to-target-chart"]], viewQuery: function ProgressToTargetChartComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$r, 7);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
+        } }, inputs: { data: [1, "data"], viewMode: [1, "viewMode"] }, decls: 3, vars: 0, consts: [["chartdiv", ""], [1, "progress-chart-container"], [1, "chart", 2, "width", "100%", "height", "120px"]], template: function ProgressToTargetChartComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1);
+            i0.ɵɵdomElement(1, "div", 2, 0);
+            i0.ɵɵdomElementEnd();
+        } }, dependencies: [CommonModule], styles: [".progress-chart-container[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressToTargetChartComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-progress-to-target-chart', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="progress-chart-container">
+      <div #chartdiv class="chart" style="width: 100%; height: 120px;"></div>
+    </div>
+  `, styles: [".progress-chart-container{width:100%}\n"] }]
+    }], () => [], { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], chartDiv: [{
+            type: ViewChild,
+            args: ['chartdiv', { static: true }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressToTargetChartComponent, { className: "ProgressToTargetChartComponent", filePath: "lib/components/revenue-calculator-dashboard/progress-to-target-chart.component.ts", lineNumber: 61 }); })();
+
 const _forTrack0$i = ($index, $item) => $item.metric;
-function MetricReportModalComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
-    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDefinition()); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 30);
-    i0.ɵɵelement(2, "path", 31);
-    i0.ɵɵelementEnd();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
+function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 11);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 32);
-    i0.ɵɵelement(6, "path", 33);
+    i0.ɵɵelementStart(1, "svg", 32);
+    i0.ɵɵelement(2, "path", 33);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.definitionToggleClasses());
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("What is ", ctx_r1.metricTitle(), "?");
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("rotate-180", ctx_r1.showDefinition());
+    i0.ɵɵproperty("ngClass", ctx_r1.headerInfoIconClasses())("libSymphiqTooltip", ctx_r1.metricData().description);
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    let tmp_3_0;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.definitionBoxClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", (tmp_3_0 = ctx_r1.metricData()) == null ? null : tmp_3_0.description, " ");
-} }
-function MetricReportModalComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-target-change-badge", 20);
+function MetricReportModalComponent_Conditional_0_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-target-change-badge", 23);
 } 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_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 19);
+function MetricReportModalComponent_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 9);
+    i0.ɵɵelementStart(3, "p", 22);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(5, "symphiq-pacing-status-badge", 34);
@@ -57082,11 +57311,11 @@ function MetricReportModalComponent_Conditional_0_Conditional_38_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", ctx_r1.pacingInfo().pacingPercentage)("status", ctx_r1.pacingInfo().status)("showAsFullText", false)("isCompact", true)("showEmphasizedPercentage", true);
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_54_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
+function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵelement(1, "symphiq-pacing-status-badge", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 22)(3, "p", 25);
+    i0.ɵɵelementStart(2, "div", 25)(3, "p", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 35)(6, "div", 36)(7, "span");
@@ -57095,9 +57324,8 @@ function MetricReportModalComponent_Conditional_0_Conditional_54_Template(rf, ct
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 37);
-    i0.ɵɵelement(12, "div", 38);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(11, "symphiq-progress-to-target-chart", 37);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -57111,70 +57339,67 @@ function MetricReportModalComponent_Conditional_0_Conditional_54_Template(rf, ct
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.formatPercentage(ctx_r1.progressToTarget(), 1));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.progressBarBgClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", ctx_r1.Math.min(ctx_r1.progressToTarget(), 100), "%");
-    i0.ɵɵproperty("ngClass", ctx_r1.progressBarFillClasses());
+    i0.ɵɵproperty("data", ctx_r1.progressToTargetData())("viewMode", ctx_r1.viewMode());
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 48);
+function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 47);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 54);
-    i0.ɵɵelement(2, "path", 31);
+    i0.ɵɵelementStart(1, "svg", 53);
+    i0.ɵɵelement(2, "path", 33);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const metric_r4 = i0.ɵɵnextContext().$implicit;
+    const metric_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r4.description, ctx_r1.getMetricTitle(metric_r4)));
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.description, ctx_r1.getMetricTitle(metric_r3)));
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 44)(1, "td", 45)(2, "div", 46)(3, "span", 47);
+function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 43)(1, "td", 44)(2, "div", 45)(3, "span", 46);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Conditional_5_Template, 3, 2, "button", 48);
+    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 47);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "td", 49)(7, "span", 50);
+    i0.ɵɵelementStart(6, "td", 48)(7, "span", 49);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 49)(10, "div", 51)(11, "span", 47);
+    i0.ɵɵelementStart(9, "td", 48)(10, "div", 50)(11, "span", 46);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(13, "svg", 52);
-    i0.ɵɵelement(14, "path", 53);
+    i0.ɵɵelementStart(13, "svg", 51);
+    i0.ɵɵelement(14, "path", 52);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const metric_r4 = ctx.$implicit;
+    const metric_r3 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.tableRowClasses());
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(metric_r4));
+    i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(metric_r3));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r4.description ? 5 : -1);
+    i0.ɵɵconditional(metric_r3.description ? 5 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r4.targetValue, metric_r4.metric, false), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.targetValue, metric_r3.metric, false), " ");
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r4.percentageIncrease), 1), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r3.percentageIncrease), 1), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵattribute("d", metric_r4.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
+    i0.ɵɵattribute("d", metric_r3.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16)(1, "h4", 17);
     i0.ɵɵtext(2, " Contributing Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 39)(4, "table", 40)(5, "thead")(6, "tr", 41)(7, "th", 42);
+    i0.ɵɵelementStart(3, "div", 38)(4, "table", 39)(5, "thead")(6, "tr", 40)(7, "th", 41);
     i0.ɵɵtext(8, "Metric");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 43);
+    i0.ɵɵelementStart(9, "th", 42);
     i0.ɵɵtext(10, "Target");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 43);
+    i0.ɵɵelementStart(11, "th", 42);
     i0.ɵɵtext(12, "Improve by");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "tbody");
-    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Template, 15, 7, "tr", 44, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 43, _forTrack0$i);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57186,14 +57411,14 @@ function MetricReportModalComponent_Conditional_0_Conditional_55_Template(rf, ct
     i0.ɵɵadvance(8);
     i0.ɵɵrepeater(ctx_r1.contributingMetrics());
 } }
-function MetricReportModalComponent_Conditional_0_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "h4", 17);
+function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "h4", 17);
     i0.ɵɵtext(2, " Pace ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 55);
-    i0.ɵɵelement(4, "symphiq-line-chart", 56);
+    i0.ɵɵelementStart(3, "div", 54);
+    i0.ɵɵelement(4, "symphiq-line-chart", 55);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 57);
+    i0.ɵɵelementStart(5, "p", 56);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57219,12 +57444,11 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "div", 5);
     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, "h3", 9);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, MetricReportModalComponent_Conditional_0_Conditional_11_Template, 7, 4, "button", 10);
-    i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 2, 2, "div", 11);
+    i0.ɵɵelementStart(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div", 9)(10, "h3", 10);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 3, 2, "button", 11);
+    i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(13, "button", 12);
     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();
@@ -57237,63 +57461,74 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementStart(18, "div", 16)(19, "h4", 17);
     i0.ɵɵtext(20, " At a Glance ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 18)(22, "div")(23, "p", 19);
-    i0.ɵɵtext(24);
+    i0.ɵɵelementStart(21, "div", 18)(22, "div")(23, "div", 19)(24, "p", 20);
+    i0.ɵɵtext(25, " Year to date ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "p", 9);
-    i0.ɵɵtext(26);
+    i0.ɵɵelementStart(26, "p", 21);
+    i0.ɵɵtext(27);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(27, MetricReportModalComponent_Conditional_0_Conditional_27_Template, 1, 5, "symphiq-target-change-badge", 20);
+    i0.ɵɵelementStart(28, "p", 21);
+    i0.ɵɵtext(29);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(30, "p", 22);
+    i0.ɵɵtext(31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div")(29, "p", 19);
-    i0.ɵɵtext(30);
+    i0.ɵɵconditionalCreate(32, MetricReportModalComponent_Conditional_0_Conditional_32_Template, 1, 5, "symphiq-target-change-badge", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "p", 21);
-    i0.ɵɵtext(32);
+    i0.ɵɵelementStart(33, "div")(34, "div", 19)(35, "p", 20);
+    i0.ɵɵtext(36, " Same period last year ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "p", 21);
+    i0.ɵɵtext(38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "p", 21);
+    i0.ɵɵtext(40);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div")(34, "p", 19);
-    i0.ɵɵtext(35);
+    i0.ɵɵelementStart(41, "p", 10);
+    i0.ɵɵtext(42);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(43, "div")(44, "p", 24);
+    i0.ɵɵtext(45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "p", 21);
-    i0.ɵɵtext(37);
+    i0.ɵɵelementStart(46, "p", 10);
+    i0.ɵɵtext(47);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(38, MetricReportModalComponent_Conditional_0_Conditional_38_Template, 6, 10, "div");
-    i0.ɵɵelementStart(39, "div")(40, "p", 19);
-    i0.ɵɵtext(41);
+    i0.ɵɵconditionalCreate(48, MetricReportModalComponent_Conditional_0_Conditional_48_Template, 6, 10, "div");
+    i0.ɵɵelementStart(49, "div")(50, "p", 24);
+    i0.ɵɵtext(51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "p", 21);
-    i0.ɵɵtext(43);
+    i0.ɵɵelementStart(52, "p", 10);
+    i0.ɵɵtext(53);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(44, "div", 16)(45, "h4", 17);
-    i0.ɵɵtext(46, " Target Analysis ");
+    i0.ɵɵelementStart(54, "div", 16)(55, "h4", 17);
+    i0.ɵɵtext(56, " Target Analysis ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "div", 22)(48, "p", 23);
-    i0.ɵɵtext(49, " Your Target ");
+    i0.ɵɵelementStart(57, "div", 25)(58, "p", 26);
+    i0.ɵɵtext(59, " Your Target ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(50, "p", 24);
-    i0.ɵɵtext(51);
+    i0.ɵɵelementStart(60, "p", 27);
+    i0.ɵɵtext(61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "p", 25);
-    i0.ɵɵtext(53);
+    i0.ɵɵelementStart(62, "p", 28);
+    i0.ɵɵtext(63);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(54, MetricReportModalComponent_Conditional_0_Conditional_54_Template, 13, 14);
+    i0.ɵɵconditionalCreate(64, MetricReportModalComponent_Conditional_0_Conditional_64_Template, 12, 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(55, MetricReportModalComponent_Conditional_0_Conditional_55_Template, 16, 3, "div", 16);
-    i0.ɵɵconditionalCreate(56, MetricReportModalComponent_Conditional_0_Conditional_56_Template, 7, 8, "div", 26);
+    i0.ɵɵconditionalCreate(65, MetricReportModalComponent_Conditional_0_Conditional_65_Template, 16, 3, "div", 16);
+    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 7, 8, "div", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(57, "div", 27)(58, "button", 28);
-    i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_58_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
-    i0.ɵɵtext(59, " Close ");
+    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()()()()();
 } if (rf & 2) {
     let tmp_8_0;
-    let tmp_9_0;
-    let tmp_17_0;
-    let tmp_22_0;
-    let tmp_26_0;
+    let tmp_19_0;
+    let tmp_27_0;
     let tmp_31_0;
     let tmp_36_0;
-    let tmp_38_0;
+    let tmp_41_0;
+    let tmp_43_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses())("@fadeIn", undefined);
@@ -57301,14 +57536,12 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("ngClass", ctx_r1.modalContainerClasses())("@slideUpFade", undefined);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.headerClasses());
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.metricTitle(), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_8_0 = ctx_r1.metricData()) == null ? null : tmp_8_0.description) ? 11 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showDefinition() && ((tmp_9_0 = ctx_r1.metricData()) == null ? null : tmp_9_0.description) ? 12 : -1);
+    i0.ɵɵconditional(((tmp_8_0 = ctx_r1.metricData()) == null ? null : tmp_8_0.description) ? 12 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
     i0.ɵɵadvance(3);
@@ -57317,24 +57550,36 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.dateLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.ytdStartDate(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.dateLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Year to Date (", ctx_r1.ytdDateRangeWithYear(), ") ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.ytdEndDate(), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.ytdValue(), ((tmp_17_0 = ctx_r1.metricData()) == null ? null : tmp_17_0.metric) || ""), " ");
+    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 ? 27 : -1);
-    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ytdChangePercentage() !== null ? 32 : -1);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.dateLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.priorYearStartDate(), " ");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Same Period Last Year (", ctx_r1.priorYearDateRange(), ") ");
+    i0.ɵɵproperty("ngClass", ctx_r1.dateLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.priorYearEndDate(), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.samePeriodLastYearValue(), ((tmp_22_0 = ctx_r1.metricData()) == null ? null : tmp_22_0.metric) || ""), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.samePeriodLastYearValue(), ((tmp_27_0 = ctx_r1.metricData()) == null ? null : tmp_27_0.metric) || ""), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
@@ -57342,9 +57587,9 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_26_0 = ctx_r1.metricData()) == null ? null : tmp_26_0.currentValue) || 0, ((tmp_26_0 = ctx_r1.metricData()) == null ? null : tmp_26_0.metric) || ""), " ");
+    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() ? 38 : -1);
+    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 48 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
@@ -57352,7 +57597,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.targetValue) || 0, ((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.metric) || "", false), " ");
+    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.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
     i0.ɵɵadvance();
@@ -57362,17 +57607,17 @@ 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_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.ɵɵ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.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate4(" Your target represents a ", ctx_r1.formatPercentage(ctx_r1.Math.abs(((tmp_38_0 = ctx_r1.metricData()) == null ? null : tmp_38_0.percentageIncrease) || 0), 1), " ", (((tmp_38_0 = ctx_r1.metricData()) == null ? null : tmp_38_0.percentageIncrease) || 0) >= 0 ? "increase" : "decrease", " from your ", ctx_r1.priorYear(), " actual of ", ctx_r1.formatMetricValue(((tmp_38_0 = ctx_r1.metricData()) == null ? null : tmp_38_0.currentValue) || 0, ((tmp_38_0 = ctx_r1.metricData()) == null ? null : tmp_38_0.metric) || ""), ". ");
+    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.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 54 : -1);
+    i0.ɵɵconditional(ctx_r1.pacingInfo() ? 64 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.contributingMetrics().length > 0 ? 55 : -1);
+    i0.ɵɵconditional(ctx_r1.contributingMetrics().length > 0 ? 65 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.pacingChartData() ? 56 : -1);
+    i0.ɵɵconditional(ctx_r1.pacingChartData() ? 66 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.footerClasses());
     i0.ɵɵadvance();
@@ -57416,8 +57661,7 @@ class MetricReportModalComponent {
             const metric = this.metricData();
             if (!pacingResponse || !metric)
                 return 0;
-            const resp = pacingResponse;
-            const soFarMetric = resp.soFarMetricValues?.find((m) => m.metric === metric.metric);
+            const soFarMetric = pacingResponse.soFarMetricValues?.find((m) => m.metric === metric.metric);
             if (soFarMetric?.value) {
                 return parseFloat(soFarMetric.value);
             }
@@ -57428,8 +57672,7 @@ class MetricReportModalComponent {
             const metric = this.metricData();
             if (!pacingResponse || !metric)
                 return 0;
-            const resp = pacingResponse;
-            const lastYearMetric = resp.lastYearMetricValuesMonthly?.find((m) => m.metric === metric.metric);
+            const lastYearMetric = pacingResponse.lastYearSoFarMetricValues?.find((m) => m.metric === metric.metric);
             if (lastYearMetric?.value) {
                 return parseFloat(lastYearMetric.value);
             }
@@ -57466,6 +57709,28 @@ class MetricReportModalComponent {
             const priorYear = this.priorYear();
             return `Jan 1, ${priorYear} - ${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${priorYear}`;
         }, ...(ngDevMode ? [{ debugName: "priorYearDateRange" }] : []));
+        this.ytdStartDate = computed(() => {
+            const year = this.currentYear();
+            return `Jan 1, ${year}`;
+        }, ...(ngDevMode ? [{ debugName: "ytdStartDate" }] : []));
+        this.ytdEndDate = computed(() => {
+            const now = new Date();
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const year = this.currentYear();
+            return `${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${year}`;
+        }, ...(ngDevMode ? [{ debugName: "ytdEndDate" }] : []));
+        this.priorYearStartDate = computed(() => {
+            const priorYear = this.priorYear();
+            return `Jan 1, ${priorYear}`;
+        }, ...(ngDevMode ? [{ debugName: "priorYearStartDate" }] : []));
+        this.priorYearEndDate = computed(() => {
+            const now = new Date();
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const priorYear = this.priorYear();
+            return `${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${priorYear}`;
+        }, ...(ngDevMode ? [{ debugName: "priorYearEndDate" }] : []));
         this.gapAnalysisText = computed(() => {
             const pacing = this.pacingInfo();
             const metric = this.metricData();
@@ -57494,6 +57759,18 @@ class MetricReportModalComponent {
                 return 0;
             return (projected / target) * 100;
         }, ...(ngDevMode ? [{ debugName: "progressToTarget" }] : []));
+        this.progressToTargetData = computed(() => {
+            const pacing = this.pacingInfo();
+            const metric = this.metricData();
+            if (!pacing || !metric)
+                return null;
+            return {
+                currentValue: this.ytdValue(),
+                paceValue: pacing.projectedValue,
+                targetValue: metric.targetValue,
+                status: pacing.status
+            };
+        }, ...(ngDevMode ? [{ debugName: "progressToTargetData" }] : []));
         this.chartDescriptionText = computed(() => {
             const metric = this.metricTitle();
             const currentYear = this.currentYear();
@@ -57502,75 +57779,126 @@ class MetricReportModalComponent {
         }, ...(ngDevMode ? [{ debugName: "chartDescriptionText" }] : []));
         this.pacingChartData = computed(() => {
             const metric = this.metricData();
+            const pacingResponse = this.pacingMetrics();
             if (!metric)
                 return null;
+            const currentYearData = this.generateCurrentYearData(pacingResponse, metric.metric);
+            const priorYearData = this.generatePriorYearData(pacingResponse, metric.metric);
+            const projectionData = this.generateProjectionData(pacingResponse, metric.metric);
             return {
                 chartType: 'LINE',
                 title: 'Pace',
                 description: '',
+                lineChartUseCase: LineChartUseCaseEnum.THIS_YEAR_VS_LAST_YEAR,
                 lineChartData: {
                     series: [
                         {
-                            name: `${this.currentYear()} Actual`,
-                            data: this.generateMockCurrentYearData()
+                            name: 'Target Projection',
+                            data: projectionData
                         },
                         {
                             name: `${this.priorYear()} Comparison`,
-                            data: this.generateMockLastYearData()
+                            data: priorYearData
                         },
                         {
-                            name: 'Target Projection',
-                            data: this.generateMockTargetData()
+                            name: `${this.currentYear()} Actual`,
+                            data: currentYearData
                         }
                     ]
                 }
             };
         }, ...(ngDevMode ? [{ debugName: "pacingChartData" }] : []));
     }
-    generateMockCurrentYearData() {
-        const baseValue = this.metricData()?.currentValue || 1000;
+    generateCurrentYearData(pacingResponse, metricEnum) {
         const data = [];
-        const now = new Date();
-        const currentMonth = now.getMonth();
-        for (let i = 0; i <= currentMonth; i++) {
-            const date = new Date(this.currentYear(), i, 15);
-            const variance = (Math.random() - 0.5) * 0.1;
-            const value = baseValue * (1 + variance) * ((i + 1) / 12);
-            data.push({
-                date: date.toISOString(),
-                value: Math.round(value * 100) / 100
+        const currentYear = this.currentYear();
+        if (pacingResponse?.soFarMetricValuesMonthly) {
+            const metricValues = pacingResponse.soFarMetricValuesMonthly.filter(m => m.metric === metricEnum);
+            metricValues.forEach(mv => {
+                if (mv.date && mv.value) {
+                    const originalDate = new Date(mv.date);
+                    const date = new Date(currentYear, originalDate.getMonth(), 15);
+                    data.push({
+                        date: date.toISOString(),
+                        value: parseFloat(mv.value)
+                    });
+                }
             });
         }
-        return data;
+        if (data.length === 0) {
+            const baseValue = this.metricData()?.currentValue || 1000;
+            const now = new Date();
+            const currentMonth = now.getMonth();
+            for (let i = 0; i <= currentMonth; i++) {
+                const date = new Date(currentYear, i, 15);
+                const value = baseValue * ((i + 1) / 12);
+                data.push({
+                    date: date.toISOString(),
+                    value: Math.round(value * 100) / 100
+                });
+            }
+        }
+        return data.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
     }
-    generateMockLastYearData() {
-        const baseValue = this.metricData()?.currentValue || 1000;
+    generatePriorYearData(pacingResponse, metricEnum) {
         const data = [];
-        for (let i = 0; i < 12; i++) {
-            const date = new Date(this.priorYear(), i, 15);
-            const variance = (Math.random() - 0.5) * 0.08;
-            const value = baseValue * (1 + variance) * ((i + 1) / 12);
-            data.push({
-                date: date.toISOString(),
-                value: Math.round(value * 100) / 100
+        const currentYear = this.currentYear();
+        if (pacingResponse?.lastYearMetricValuesMonthly) {
+            const metricValues = pacingResponse.lastYearMetricValuesMonthly.filter(m => m.metric === metricEnum);
+            metricValues.forEach(mv => {
+                if (mv.date && mv.value) {
+                    const originalDate = new Date(mv.date);
+                    const date = new Date(currentYear, originalDate.getMonth(), 15);
+                    data.push({
+                        date: date.toISOString(),
+                        value: parseFloat(mv.value)
+                    });
+                }
             });
         }
-        return data;
+        if (data.length === 0) {
+            const baseValue = this.metricData()?.currentValue || 1000;
+            for (let i = 0; i < 12; i++) {
+                const date = new Date(currentYear, i, 15);
+                const value = baseValue * ((i + 1) / 12) * 0.9;
+                data.push({
+                    date: date.toISOString(),
+                    value: Math.round(value * 100) / 100
+                });
+            }
+        }
+        return data.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
     }
-    generateMockTargetData() {
-        const targetValue = this.metricData()?.targetValue || 1200;
+    generateProjectionData(pacingResponse, metricEnum) {
         const data = [];
-        const now = new Date();
-        const currentMonth = now.getMonth();
-        for (let i = currentMonth; i < 12; i++) {
-            const date = new Date(this.currentYear(), i, 15);
-            const value = targetValue * ((i + 1) / 12);
-            data.push({
-                date: date.toISOString(),
-                value: Math.round(value * 100) / 100
+        const currentYear = this.currentYear();
+        if (pacingResponse?.projectedMetricValuesMonthly) {
+            const metricValues = pacingResponse.projectedMetricValuesMonthly.filter(m => m.metric === metricEnum);
+            metricValues.forEach(mv => {
+                if (mv.date && mv.value) {
+                    const originalDate = new Date(mv.date);
+                    const date = new Date(currentYear, originalDate.getMonth(), 15);
+                    data.push({
+                        date: date.toISOString(),
+                        value: parseFloat(mv.value)
+                    });
+                }
             });
         }
-        return data;
+        if (data.length === 0) {
+            const targetValue = this.metricData()?.targetValue || 1200;
+            const now = new Date();
+            const currentMonth = now.getMonth();
+            for (let i = currentMonth; i < 12; i++) {
+                const date = new Date(currentYear, i, 15);
+                const value = targetValue * ((i + 1) / 12);
+                data.push({
+                    date: date.toISOString(),
+                    value: Math.round(value * 100) / 100
+                });
+            }
+        }
+        return data.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
     }
     formatMetricValue(value, metric, fromUiData = true) {
         if (metric.includes('REVENUE')) {
@@ -57649,6 +57977,9 @@ class MetricReportModalComponent {
     labelClasses() {
         return this.isLightMode() ? 'text-slate-500' : 'text-slate-400';
     }
+    dateLabelClasses() {
+        return this.isLightMode() ? 'text-slate-400' : 'text-slate-500';
+    }
     valueClasses() {
         return this.isLightMode() ? 'text-slate-900' : 'text-white';
     }
@@ -57697,6 +58028,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';
     }
+    headerInfoIconClasses() {
+        return this.isLightMode()
+            ? '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';
+    }
     footerClasses() {
         return this.isLightMode()
             ? 'bg-slate-50 border-slate-200'
@@ -57708,15 +58044,16 @@ 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, "text-xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "text-sm", "font-medium", "transition-colors", 3, "ngClass"], [1, "mt-3", "p-4", "rounded-lg", "border", "text-sm", "leading-relaxed", 3, "ngClass"], [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-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xl", "font-bold", 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"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "text-sm", "font-medium", "transition-colors", 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"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "transition-transform"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [1, "space-y-2"], [1, "flex", "justify-between", "text-xs", 3, "ngClass"], [1, "h-3", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", 3, "ngClass"], [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"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 60, 46, "div", 0);
+    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", 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", "self-center", 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-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"], [1, "space-y-2"], [1, "flex", "justify-between", "text-xs", 3, "ngClass"], [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"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 70, 51, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent,
             TargetChangeBadgeComponent,
             TooltipDirective,
             TooltipContainerComponent,
-            LineChartComponent], encapsulation: 2, data: { animation: [
+            LineChartComponent,
+            ProgressToTargetChartComponent], encapsulation: 2, data: { animation: [
                 trigger('fadeIn', [
                     transition(':enter', [
                         style({ opacity: 0 }),
@@ -57742,7 +58079,8 @@ class MetricReportModalComponent {
                     TargetChangeBadgeComponent,
                     TooltipDirective,
                     TooltipContainerComponent,
-                    LineChartComponent
+                    LineChartComponent,
+                    ProgressToTargetChartComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
@@ -57782,34 +58120,24 @@ class MetricReportModalComponent {
             <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">
-                  <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-2">
-                    {{ metricTitle() }}
-                  </h3>
-                  @if (metricData()?.description) {
-                    <button
-                      type="button"
-                      (click)="toggleDefinition()"
-                      [ngClass]="definitionToggleClasses()"
-                      class="inline-flex items-center gap-2 text-sm font-medium transition-colors">
-                      <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>
-                      <span>What is {{ metricTitle() }}?</span>
-                      <svg
-                        [class.rotate-180]="showDefinition()"
-                        class="w-4 h-4 transition-transform"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                      </svg>
-                    </button>
-                  }
-                  @if (showDefinition() && metricData()?.description) {
-                    <div [ngClass]="definitionBoxClasses()" class="mt-3 p-4 rounded-lg border text-sm leading-relaxed">
-                      {{ metricData()?.description }}
-                    </div>
-                  }
+                  <div class="flex items-center gap-3 mb-2">
+                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold">
+                      {{ 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 self-center"
+                        [libSymphiqTooltip]="metricData()!.description!"
+                        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()"
@@ -57831,12 +58159,20 @@ class MetricReportModalComponent {
                 <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-4">
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                   <!-- YTD Value -->
                   <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      Year to Date ({{ ytdDateRangeWithYear() }})
-                    </p>
+                    <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>
@@ -57853,9 +58189,17 @@ class MetricReportModalComponent {
 
                   <!-- Same Period Last Year -->
                   <div>
-                    <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
-                      Same Period Last Year ({{ priorYearDateRange() }})
-                    </p>
+                    <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>
@@ -57942,19 +58286,16 @@ class MetricReportModalComponent {
                     </p>
                   </div>
 
-                  <!-- Progress Bar -->
+                  <!-- Progress to Target Chart -->
                   <div class="space-y-2">
                     <div class="flex justify-between text-xs" [ngClass]="labelClasses()">
                       <span>Progress to Target</span>
                       <span>{{ formatPercentage(progressToTarget(), 1) }}</span>
                     </div>
-                    <div [ngClass]="progressBarBgClasses()" class="h-3 rounded-full overflow-hidden">
-                      <div
-                        [ngClass]="progressBarFillClasses()"
-                        [style.width.%]="Math.min(progressToTarget(), 100)"
-                        class="h-full transition-all duration-500">
-                      </div>
-                    </div>
+                    <symphiq-progress-to-target-chart
+                      [data]="progressToTargetData()"
+                      [viewMode]="viewMode()"
+                    />
                   </div>
                 }
               </div>
@@ -58063,7 +58404,7 @@ class MetricReportModalComponent {
   `
             }]
     }], 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: 344 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 349 }); })();
 
 const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];