@eric-emg/symphiq-components 1.2.248 → 1.2.250

package/fesm2022/symphiq-components.mjs

@@ -54873,7 +54873,7 @@ class PacingStatusBadgeComponent {
         this.containerSizeClasses = computed(() => {
             const compact = this.isCompact();
             const status = this.status();
-            const tiltClass = status === 'ahead' ? 'rotate-1' : status === 'behind' ? '-rotate-1' : '';
+            const tiltClass = status === 'ahead' ? '-rotate-1' : status === 'behind' ? 'rotate-1' : '';
             const baseClasses = 'inline-flex flex-row items-center rounded-xl border-2 overflow-visible transition-transform hover:rotate-0';
             return compact
                 ? `${baseClasses} pl-1.5 ${tiltClass}`
@@ -54894,7 +54894,7 @@ class PacingStatusBadgeComponent {
         this.fullBadgeSizeClasses = computed(() => {
             const isCompact = this.isCompact();
             const status = this.status();
-            const tiltClass = status === 'ahead' ? 'rotate-1' : status === 'behind' ? '-rotate-1' : '';
+            const tiltClass = status === 'ahead' ? '-rotate-1' : status === 'behind' ? 'rotate-1' : '';
             const baseClasses = `inline-flex items-center gap-1.5 rounded-xl border-2 font-bold tracking-wide shadow-md transition-all hover:rotate-0 ${tiltClass}`;
             if (isCompact) {
                 return `${baseClasses} px-2.5 py-1 text-xs`;
@@ -55075,7 +55075,7 @@ class TargetChangeBadgeComponent {
         this.containerSizeClasses = computed(() => {
             const compact = this.isCompact();
             const change = this.percentageChange();
-            const tiltClass = change > 0 ? 'rotate-1' : change < 0 ? '-rotate-1' : '';
+            const tiltClass = change > 0 ? '-rotate-1' : change < 0 ? 'rotate-1' : '';
             const baseClasses = 'inline-flex flex-row items-center rounded-xl border-2 overflow-visible transition-transform hover:rotate-0';
             return compact
                 ? `${baseClasses} pl-1.5 ${tiltClass}`
@@ -56759,7 +56759,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
@@ -56770,6 +56771,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"
@@ -56968,8 +56976,9 @@ class LineChartComponent {
                 seriesColorValue = axisColors[yaxisLabel] || axisColorPalette[index % axisColorPalette.length];
             }
             const seriesColor = color(seriesColorValue);
-            // Check if this is a prior year series for YoY charts
+            // Check if this is a prior year or projection series for YoY charts
             const isPriorYear = isYoYChart && this.isPriorYearSeries(seriesData);
+            const isProjection = this.isProjectionSeries(seriesData);
             if (!this.chartElement || !this.root)
                 return;
             const series = this.chartElement.series.push(LineSeries.new(this.root, {
@@ -56981,7 +56990,7 @@ 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 series type
@@ -56999,6 +57008,16 @@ class LineChartComponent {
                     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
             series.bullets.push(() => {
                 const bulletConfig = {
@@ -57052,10 +57071,10 @@ class LineChartComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineChartComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="chart-container" [class.mini-mode]="!showAxisLabels()">
-      <div #chartdiv class="chart" [style.height]="chartHeight()" style="width: 100%;"></div>
-    </div>
+        args: [{ selector: 'symphiq-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="chart-container" [class.mini-mode]="!showAxisLabels()">
+      <div #chartdiv class="chart" [style.height]="chartHeight()" style="width: 100%;"></div>
+    </div>
   `, styles: [".chart-container{width:100%;padding:1rem}.chart-container.mini-mode{padding:.25rem}\n"] }]
     }], () => [], { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], showAxisLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxisLabels", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], chartDiv: [{
             type: ViewChild,
@@ -57327,7 +57346,7 @@ class ProgressToTargetChartComponent {
             i0.ɵɵdomElementStart(0, "div", 1);
             i0.ɵɵdomElement(1, "div", 2, 0);
             i0.ɵɵdomElementEnd();
-        } }, dependencies: [CommonModule], styles: [".progress-chart-container[_ngcontent-%COMP%]{width:100%;margin-top:24px}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule], styles: [".progress-chart-container[_ngcontent-%COMP%]{width:100%;margin-top:50px;overflow:visible}.chart[_ngcontent-%COMP%]{overflow:visible}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressToTargetChartComponent, [{
         type: Component,
@@ -57335,12 +57354,12 @@ class ProgressToTargetChartComponent {
     <div class="progress-chart-container">
       <div #chartdiv class="chart" style="width: 100%; height: 160px;"></div>
     </div>
-  `, styles: [".progress-chart-container{width:100%;margin-top:24px}\n"] }]
+  `, styles: [".progress-chart-container{width:100%;margin-top:50px;overflow:visible}.chart{overflow:visible}\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: 62 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressToTargetChartComponent, { className: "ProgressToTargetChartComponent", filePath: "lib/components/revenue-calculator-dashboard/progress-to-target-chart.component.ts", lineNumber: 66 }); })();
 
 const _forTrack0$i = ($index, $item) => $item.metric;
 function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
@@ -57484,6 +57503,9 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "p", 55);
     i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "p", 55);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -57495,6 +57517,10 @@ function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.chartLegendDescription(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.chartDescriptionSentence1(), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
@@ -57583,7 +57609,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     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, 9, 10, "div", 29);
+    i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 11, 12, "div", 29);
     i0.ɵɵelementEnd();
     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()); });
@@ -57851,6 +57877,12 @@ class MetricReportModalComponent {
                 status: pacing.status
             };
         }, ...(ngDevMode ? [{ debugName: "progressToTargetData" }] : []));
+        this.chartLegendDescription = computed(() => {
+            const metric = this.metricTitle();
+            const currentYear = this.currentYear();
+            const priorYear = this.priorYear();
+            return `This chart shows the ${metric} performance trend for ${currentYear} (solid line), compared to ${priorYear} (dashed line), with the target projection (dotted line) for the remainder of the year.`;
+        }, ...(ngDevMode ? [{ debugName: "chartLegendDescription" }] : []));
         this.chartDescriptionSentence1 = computed(() => {
             const metricData = this.metricData();
             const metricName = this.metricTitle().toLowerCase();
@@ -57880,6 +57912,7 @@ class MetricReportModalComponent {
                 chartType: 'LINE',
                 title: 'Pace',
                 description: '',
+                lineChartUseCase: LineChartUseCaseEnum.THIS_YEAR_VS_LAST_YEAR,
                 lineChartData: {
                     series: [
                         {
@@ -57899,6 +57932,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();
@@ -57910,7 +57948,7 @@ class MetricReportModalComponent {
                 if (item.value && item.date) {
                     const month = new Date(item.date).getMonth();
                     data.push({
-                        date: new Date(currentYear, month, 15).toISOString(),
+                        date: this.formatDateForChart(currentYear, month, 15),
                         value: parseFloat(item.value) || 0
                     });
                 }
@@ -57929,7 +57967,7 @@ class MetricReportModalComponent {
                 if (item.value && item.date) {
                     const month = new Date(item.date).getMonth();
                     data.push({
-                        date: new Date(currentYear, month, 15).toISOString(),
+                        date: this.formatDateForChart(currentYear, month, 15),
                         value: parseFloat(item.value) || 0
                     });
                 }
@@ -57948,7 +57986,7 @@ class MetricReportModalComponent {
                 if (item.value && item.date) {
                     const month = new Date(item.date).getMonth();
                     data.push({
-                        date: new Date(currentYear, month, 15).toISOString(),
+                        date: this.formatDateForChart(currentYear, month, 15),
                         value: parseFloat(item.value) || 0
                     });
                 }
@@ -58432,6 +58470,9 @@ class MetricReportModalComponent {
                     />
                   </div>
                   <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
+                    {{ chartLegendDescription() }}
+                  </p>
+                  <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
                     {{ chartDescriptionSentence1() }}
                   </p>
                   <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-2">
@@ -58457,7 +58498,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: 346 }); })();
+(() => { (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"];