@eric-emg/symphiq-components 1.2.180 → 1.2.182

package/fesm2022/symphiq-components.mjs

@@ -55994,7 +55994,7 @@ class PacingStatusBadgeComponent {
 
 const _forTrack0$i = ($index, $item) => $item.stageMetric.metric;
 const _forTrack1$3 = ($index, $item) => $item.calc.metric;
-function FunnelMetricsVisualizationComponent_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 7);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(1, "svg", 14);
@@ -56003,16 +56003,16 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_6_Template(rf, ct
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(stage_r1.stageMetric.description, ctx_r1.getMetricTitle(stage_r1.stageMetric)))("tooltipPosition", "right");
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(stage_r1.stageMetric.description, ctx_r1.getMetricTitle(stage_r1.stageMetric)));
 } }
-function FunnelMetricsVisualizationComponent_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-pacing-status-badge", 9);
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", stage_r1.pacingInfo.pacingPercentage)("status", stage_r1.pacingInfo.status);
 } }
-function FunnelMetricsVisualizationComponent_For_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 12);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -56031,14 +56031,14 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_17_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric), " ");
 } }
-function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-pacing-status-badge", 9);
 } if (rf & 2) {
     const metric_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", metric_r3.pacingInfo.pacingPercentage)("status", metric_r3.pacingInfo.status);
 } }
-function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 26);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -56050,19 +56050,19 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("Proj: ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric));
 } }
-function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "p", 22);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 23);
-    i0.ɵɵconditionalCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_5_Template, 1, 3, "symphiq-pacing-status-badge", 9);
+    i0.ɵɵconditionalCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_5_Template, 1, 3, "symphiq-pacing-status-badge", 9);
     i0.ɵɵelementStart(6, "span", 24);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(8, "div", 25)(9, "div")(10, "p", 26);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(12, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_12_Template, 3, 2, "div");
+    i0.ɵɵconditionalCreate(12, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_12_Template, 3, 2, "div");
     i0.ɵɵelementStart(13, "div")(14, "p", 26);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()()()();
@@ -56093,13 +56093,13 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric));
 } }
-function FunnelMetricsVisualizationComponent_For_3_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 16);
     i0.ɵɵelementStart(1, "div", 17)(2, "p", 18);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 19);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template, 16, 13, "div", 20, _forTrack1$3);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template, 16, 13, "div", 20, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -56110,14 +56110,14 @@ function FunnelMetricsVisualizationComponent_For_3_Conditional_23_Template(rf, c
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(stage_r1.relatedMetrics);
 } }
-function FunnelMetricsVisualizationComponent_For_3_Template(rf, ctx) { if (rf & 1) {
+function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5)(4, "h3", 6);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, FunnelMetricsVisualizationComponent_For_3_Conditional_6_Template, 3, 3, "button", 7);
+    i0.ɵɵconditionalCreate(6, FunnelMetricsVisualizationComponent_For_4_Conditional_6_Template, 3, 2, "button", 7);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 8);
-    i0.ɵɵconditionalCreate(8, FunnelMetricsVisualizationComponent_For_3_Conditional_8_Template, 1, 3, "symphiq-pacing-status-badge", 9);
+    i0.ɵɵconditionalCreate(8, FunnelMetricsVisualizationComponent_For_4_Conditional_8_Template, 1, 3, "symphiq-pacing-status-badge", 9);
     i0.ɵɵelementStart(9, "div", 10);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
@@ -56127,14 +56127,14 @@ function FunnelMetricsVisualizationComponent_For_3_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(15, "p", 13);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_3_Conditional_17_Template, 5, 4, "div");
+    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_4_Conditional_17_Template, 5, 4, "div");
     i0.ɵɵelementStart(18, "div")(19, "p", 12);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(21, "p", 13);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_3_Conditional_23_Template, 7, 2);
+    i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template, 7, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r1 = ctx.$implicit;
@@ -56305,24 +56305,27 @@ class FunnelMetricsVisualizationComponent {
         return { title, markdown };
     }
     static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 4, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-3"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip", "tooltipPosition"], [1, "flex", "items-center", "gap-3"], [3, "viewMode", "pacingPercentage", "status"], [1, "px-4", "py-2", "rounded-lg", "font-bold", "text-sm", 3, "ngClass"], [1, "grid", "grid-cols-3", "gap-4", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "my-4", 3, "ngClass"], [1, "space-y-2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-2"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "text-sm", "font-semibold", "flex-1", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "px-2", "py-1", "rounded", "text-xs", "font-bold", 3, "ngClass"], [1, "grid", "gap-2", "text-xs", 3, "ngClass"], [3, "ngClass"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, FunnelMetricsVisualizationComponent_For_3_Template, 24, 17, "div", 2, _forTrack0$i);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-3"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "flex", "items-center", "justify-center", "transition-colors", "self-center", 3, "ngClass", "libSymphiqTooltip"], [1, "flex", "items-center", "gap-3"], [3, "viewMode", "pacingPercentage", "status"], [1, "px-4", "py-2", "rounded-lg", "font-bold", "text-sm", 3, "ngClass"], [1, "grid", "grid-cols-3", "gap-4", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-2xl", "font-bold", 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", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "my-4", 3, "ngClass"], [1, "space-y-2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-2"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "text-sm", "font-semibold", "flex-1", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "px-2", "py-1", "rounded", "text-xs", "font-bold", 3, "ngClass"], [1, "grid", "gap-2", "text-xs", 3, "ngClass"], [3, "ngClass"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "symphiq-tooltip-container");
+            i0.ɵɵelementStart(2, "div", 1);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 24, 17, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.funnelStages());
-        } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent, TooltipDirective], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent, TooltipDirective, TooltipContainerComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FunnelMetricsVisualizationComponent, [{
         type: Component,
         args: [{
                 selector: 'symphiq-funnel-metrics-visualization',
                 standalone: true,
-                imports: [CommonModule, PacingStatusBadgeComponent, TooltipDirective],
+                imports: [CommonModule, PacingStatusBadgeComponent, TooltipDirective, TooltipContainerComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
     <div class="space-y-6">
+      <symphiq-tooltip-container />
       <div class="space-y-3">
         @for (stage of funnelStages(); track stage.stageMetric.metric) {
           <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
@@ -56336,11 +56339,11 @@ class FunnelMetricsVisualizationComponent {
                     <button
                       type="button"
                       [ngClass]="infoIconClasses()"
-                      class="flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center transition-colors"
+                      class="flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center transition-colors self-center"
                       [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
                       tooltipType="markdown"
-                      [tooltipPosition]="'right'">
-                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      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>
@@ -56442,7 +56445,7 @@ class FunnelMetricsVisualizationComponent {
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 135 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 137 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -57377,12 +57380,16 @@ function transformTrendUiDataToChartSeries(trendUiData, metricToExtract) {
     const priorYear = currentYear - 1;
     const priorYearPoints = [];
     const currentYearPoints = [];
+    console.log('[transformTrendUiDataToChartSeries] dimensions:', convertedData.dimensions);
+    console.log('[transformTrendUiDataToChartSeries] dateIndex:', dateIndex, 'monthIndex:', monthIndex);
+    console.log('[transformTrendUiDataToChartSeries] sample rows:', convertedData.rows?.slice(0, 3));
     convertedData.rows?.forEach((row) => {
         const dateValue = row.dimensionValues?.[dateIndex];
         const metricValue = parseFloat(row.metricValues?.[metricIndex] || '0');
         if (dateValue) {
             const year = parseInt(dateValue.substring(0, 4), 10);
             const month = parseInt(dateValue.substring(4, 6) || dateValue.substring(5, 7), 10);
+            console.log('[transformTrendUiDataToChartSeries] dateValue:', dateValue, '→ year:', year, 'month:', month);
             const point = {
                 category: String(month),
                 value: metricValue,
@@ -57752,7 +57759,7 @@ class InitialTargetSettingComponent {
                     series: series.map(s => ({
                         name: s.name,
                         data: s.data.map(d => ({
-                            category: d.displayLabel || d.category,
+                            month: parseInt(d.category, 10),
                             value: d.value
                         }))
                     }))