@eric-emg/symphiq-components 1.2.248 → 1.2.249

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}`
@@ -57327,7 +57327,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 +57335,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 +57484,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 +57498,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 +57590,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 +57858,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();
@@ -57899,6 +57912,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 +57928,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 +57947,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 +57966,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 +58450,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 +58478,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"];