@eric-emg/symphiq-components 1.2.245 → 1.2.247

package/fesm2022/symphiq-components.mjs

@@ -56705,7 +56705,8 @@ class LineChartComponent {
         // Check for explicit keywords
         if (name.includes('last year') ||
             name.includes('prior year') ||
-            name.includes('previous year')) {
+            name.includes('previous year') ||
+            name.includes('comparison')) {
             return true;
         }
         // Check for year patterns - extract any 4-digit year and compare to current year
@@ -56716,6 +56717,13 @@ class LineChartComponent {
         }
         return false;
     }
+    isProjectionSeries(seriesData) {
+        if (!seriesData || !seriesData.name) {
+            return false;
+        }
+        const name = seriesData.name.toLowerCase();
+        return name.includes('projection') || name.includes('projected') || name.includes('target');
+    }
     extractMetricName(seriesName) {
         // Extract metric name from series name by removing year patterns
         // e.g., "Purchase Revenue (2025)" -> "Purchase Revenue"
@@ -56916,6 +56924,8 @@ class LineChartComponent {
             const seriesColor = color(seriesColorValue);
             // Check if this is a prior year series for YoY charts
             const isPriorYear = isYoYChart && this.isPriorYearSeries(seriesData);
+            const isProjection = this.isProjectionSeries(seriesData);
+            console.log('[LineChart] Series:', seriesData.name, { isPriorYear, isProjection, isYoYChart, dataPoints: parsedData.length });
             if (!this.chartElement || !this.root)
                 return;
             const series = this.chartElement.series.push(LineSeries.new(this.root, {
@@ -56927,23 +56937,32 @@ class LineChartComponent {
                 stroke: seriesColor
             }));
             // Store valueFormat and prior year flag in userData for tooltip formatting
-            series.set('userData', { valueFormat: seriesData.valueFormat, isPriorYear });
+            series.set('userData', { valueFormat: seriesData.valueFormat, isPriorYear, isProjection });
             // Disable individual series tooltips - use floating tooltip instead
             series.set('tooltip', undefined);
-            // Configure stroke styling based on whether it's a prior year series
+            // Configure stroke styling based on series type
             series.strokes.template.setAll({
-                strokeWidth: 2
+                strokeWidth: isPriorYear ? 2 : 3
             });
             if (isPriorYear) {
                 // Apply dashed line and reduced opacity for prior year data
                 series.strokes.template.setAll({
                     strokeDasharray: [5, 5],
-                    strokeOpacity: 0.4
+                    strokeOpacity: 0.5
                 });
-                // Also set on each individual stroke
                 series.strokes.each((stroke) => {
                     stroke.set('strokeDasharray', [5, 5]);
-                    stroke.set('strokeOpacity', 0.4);
+                    stroke.set('strokeOpacity', 0.5);
+                });
+            }
+            else if (isProjection) {
+                // Apply dotted line for projection data
+                series.strokes.template.setAll({
+                    strokeDasharray: [10, 5],
+                    strokeWidth: 3
+                });
+                series.strokes.each((stroke) => {
+                    stroke.set('strokeDasharray', [10, 5]);
                 });
             }
             // Add bullets with larger hit area for better hover detection
@@ -56953,7 +56972,7 @@ class LineChartComponent {
                     fill: seriesColor
                 };
                 if (isPriorYear) {
-                    bulletConfig['fillOpacity'] = 0.4;
+                    bulletConfig['fillOpacity'] = 0.5;
                 }
                 if (!this.root)
                     return Bullet.new({}, { sprite: Circle.new({}, {}) });
@@ -57058,12 +57077,13 @@ class ProgressToTargetChartComponent {
             pinchZoomX: false,
             pinchZoomY: false,
             layout: this.root.verticalLayout,
-            paddingTop: 20,
+            paddingTop: 30,
             paddingBottom: 0,
             paddingLeft: 0,
             paddingRight: 0
         }));
         this.chart.zoomOutButton.set('forceHidden', true);
+        this.chart.plotContainer.set('maskContent', false);
         const xRenderer = AxisRendererX.new(this.root, {
             strokeOpacity: 0.1
         });
@@ -57106,7 +57126,7 @@ class ProgressToTargetChartComponent {
             }
         ];
         this.yAxis.data.setAll(categoryDataItems);
-        const paceColors = this.getPaceColors();
+        const paceColors = this.getPaceColors(status);
         const currentColors = this.getCurrentColors(status);
         const paceSeries = this.chart.series.push(ColumnSeries.new(this.root, {
             name: 'Pace',
@@ -57219,11 +57239,25 @@ class ProgressToTargetChartComponent {
         }
         return max * 1.1;
     }
-    getPaceColors() {
-        return {
-            color1: color(0x0BA5EC),
-            color2: color(0x0284C7)
-        };
+    getPaceColors(status) {
+        switch (status) {
+            case 'ahead':
+                return {
+                    color1: color(0x17B26A),
+                    color2: color(0x10b981)
+                };
+            case 'on-pace':
+                return {
+                    color1: color(0x0BA5EC),
+                    color2: color(0x0284C7)
+                };
+            case 'behind':
+            default:
+                return {
+                    color1: color(0xF04438),
+                    color2: color(0xdc2626)
+                };
+        }
     }
     getCurrentColors(status) {
         switch (status) {
@@ -57251,7 +57285,7 @@ class ProgressToTargetChartComponent {
         } 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) {
+        } }, inputs: { data: [1, "data"], viewMode: [1, "viewMode"] }, decls: 3, vars: 0, consts: [["chartdiv", ""], [1, "progress-chart-container"], [1, "chart", 2, "width", "100%", "height", "160px"]], template: function ProgressToTargetChartComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 1);
             i0.ɵɵdomElement(1, "div", 2, 0);
             i0.ɵɵdomElementEnd();
@@ -57261,7 +57295,7 @@ class 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 #chartdiv class="chart" style="width: 100%; height: 160px;"></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: [{
@@ -57318,14 +57352,7 @@ function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ct
     i0.ɵɵelementStart(2, "div", 25)(3, "p", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 35)(6, "div", 36)(7, "span");
-    i0.ɵɵtext(8, "Progress to Target");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span");
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(11, "symphiq-progress-to-target-chart", 37);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "symphiq-progress-to-target-chart", 35);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -57334,17 +57361,13 @@ function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ct
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.gapAnalysisText(), " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.formatPercentage(ctx_r1.progressToTarget(), 1));
     i0.ɵɵadvance();
     i0.ɵɵproperty("data", ctx_r1.progressToTargetData())("viewMode", ctx_r1.viewMode());
 } }
 function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵelementStart(0, "button", 45);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 53);
+    i0.ɵɵelementStart(1, "svg", 51);
     i0.ɵɵelement(2, "path", 33);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57353,20 +57376,20 @@ function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditio
     i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.description, ctx_r1.getMetricTitle(metric_r3)));
 } }
 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.ɵɵelementStart(0, "tr", 41)(1, "td", 42)(2, "div", 43)(3, "span", 44);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 47);
+    i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "td", 48)(7, "span", 49);
+    i0.ɵɵelementStart(6, "td", 46)(7, "span", 47);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 48)(10, "div", 50)(11, "span", 46);
+    i0.ɵɵelementStart(9, "td", 46)(10, "div", 48)(11, "span", 44);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(13, "svg", 51);
-    i0.ɵɵelement(14, "path", 52);
+    i0.ɵɵelementStart(13, "svg", 49);
+    i0.ɵɵelement(14, "path", 50);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const metric_r3 = ctx.$implicit;
@@ -57389,17 +57412,17 @@ function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ct
     i0.ɵɵelementStart(0, "div", 16)(1, "h4", 17);
     i0.ɵɵtext(2, " Contributing Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 38)(4, "table", 39)(5, "thead")(6, "tr", 40)(7, "th", 41);
+    i0.ɵɵelementStart(3, "div", 36)(4, "table", 37)(5, "thead")(6, "tr", 38)(7, "th", 39);
     i0.ɵɵtext(8, "Metric");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 42);
+    i0.ɵɵelementStart(9, "th", 40);
     i0.ɵɵtext(10, "Target");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 42);
+    i0.ɵɵelementStart(11, "th", 40);
     i0.ɵɵtext(12, "Improve by");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "tbody");
-    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 43, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 41, _forTrack0$i);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57415,10 +57438,10 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵelementStart(0, "div", 29)(1, "h4", 17);
     i0.ɵɵtext(2, " Pace ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 54);
-    i0.ɵɵelement(4, "symphiq-line-chart", 55);
+    i0.ɵɵelementStart(3, "div", 52);
+    i0.ɵɵelement(4, "symphiq-line-chart", 53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 56);
+    i0.ɵɵelementStart(5, "p", 54);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57512,7 +57535,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementStart(62, "p", 28);
     i0.ɵɵtext(63);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(64, MetricReportModalComponent_Conditional_0_Conditional_64_Template, 12, 12);
+    i0.ɵɵconditionalCreate(64, MetricReportModalComponent_Conditional_0_Conditional_64_Template, 6, 10);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(65, MetricReportModalComponent_Conditional_0_Conditional_65_Template, 16, 3, "div", 16);
     i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 7, 8, "div", 29);
@@ -57785,6 +57808,11 @@ class MetricReportModalComponent {
             const currentYearData = this.generateCurrentYearData(pacingResponse, metric.metric);
             const priorYearData = this.generatePriorYearData(pacingResponse, metric.metric);
             const projectionData = this.generateProjectionData(pacingResponse, metric.metric);
+            console.log('[PaceChart] Metric:', metric.metric);
+            console.log('[PaceChart] Current Year Data:', currentYearData);
+            console.log('[PaceChart] Prior Year Data:', priorYearData);
+            console.log('[PaceChart] Projection Data:', projectionData);
+            console.log('[PaceChart] Pacing Response:', pacingResponse);
             return {
                 chartType: 'LINE',
                 title: 'Pace',
@@ -57809,6 +57837,11 @@ class MetricReportModalComponent {
             };
         }, ...(ngDevMode ? [{ debugName: "pacingChartData" }] : []));
     }
+    formatDateForChart(year, month, day) {
+        const m = String(month + 1).padStart(2, '0');
+        const d = String(day).padStart(2, '0');
+        return `${year}-${m}-${d}`;
+    }
     generateCurrentYearData(pacingResponse, metricEnum) {
         const data = [];
         const currentYear = this.currentYear();
@@ -57817,9 +57850,8 @@ class MetricReportModalComponent {
             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(),
+                        date: this.formatDateForChart(currentYear, originalDate.getMonth(), 15),
                         value: parseFloat(mv.value)
                     });
                 }
@@ -57830,10 +57862,9 @@ class MetricReportModalComponent {
             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(),
+                    date: this.formatDateForChart(currentYear, i, 15),
                     value: Math.round(value * 100) / 100
                 });
             }
@@ -57848,9 +57879,8 @@ class MetricReportModalComponent {
             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(),
+                        date: this.formatDateForChart(currentYear, originalDate.getMonth(), 15),
                         value: parseFloat(mv.value)
                     });
                 }
@@ -57859,10 +57889,9 @@ class MetricReportModalComponent {
         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(),
+                    date: this.formatDateForChart(currentYear, i, 15),
                     value: Math.round(value * 100) / 100
                 });
             }
@@ -57877,9 +57906,8 @@ class MetricReportModalComponent {
             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(),
+                        date: this.formatDateForChart(currentYear, originalDate.getMonth(), 15),
                         value: parseFloat(mv.value)
                     });
                 }
@@ -57890,10 +57918,9 @@ class MetricReportModalComponent {
             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(),
+                    date: this.formatDateForChart(currentYear, i, 15),
                     value: Math.round(value * 100) / 100
                 });
             }
@@ -58044,7 +58071,7 @@ class MetricReportModalComponent {
             : 'bg-slate-700 hover:bg-slate-600 text-white';
     }
     static { this.ɵfac = function MetricReportModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricReportModalComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-3", "mb-2"], [1, "text-xl", "font-bold", 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) {
+    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"], [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);
@@ -58287,16 +58314,10 @@ class MetricReportModalComponent {
                   </div>
 
                   <!-- 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>
-                    <symphiq-progress-to-target-chart
-                      [data]="progressToTargetData()"
-                      [viewMode]="viewMode()"
-                    />
-                  </div>
+                  <symphiq-progress-to-target-chart
+                    [data]="progressToTargetData()"
+                    [viewMode]="viewMode()"
+                  />
                 }
               </div>
 
@@ -58404,7 +58425,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: 349 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 343 }); })();
 
 const _c0$q = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];