@eric-emg/symphiq-components 1.2.182 → 1.2.184

package/fesm2022/symphiq-components.mjs

@@ -56032,14 +56032,25 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_17_Template(rf, c
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric), " ");
 } }
 function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 29);
+    i0.ɵɵelement(2, "path", 15);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const metric_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.calc.description, ctx_r1.getMetricTitle(metric_r3.calc)));
+} }
+function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_7_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_4_Conditional_23_For_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 26);
+function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 28);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -56051,31 +56062,35 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditio
     i0.ɵɵtextInterpolate1("Proj: ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric));
 } }
 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.ɵɵelementStart(0, "div", 20)(1, "div", 21)(2, "div", 22)(3, "p", 23);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 23);
-    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.ɵɵconditionalCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_5_Template, 3, 2, "button", 24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 25);
+    i0.ɵɵconditionalCreate(7, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_7_Template, 1, 3, "symphiq-pacing-status-badge", 9);
+    i0.ɵɵelementStart(8, "span", 26);
+    i0.ɵɵtext(9);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 25)(9, "div")(10, "p", 26);
-    i0.ɵɵtext(11);
+    i0.ɵɵelementStart(10, "div", 27)(11, "div")(12, "p", 28);
+    i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    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.ɵɵconditionalCreate(14, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Conditional_14_Template, 3, 2, "div");
+    i0.ɵɵelementStart(15, "div")(16, "p", 28);
+    i0.ɵɵtext(17);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const metric_r3 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedMetricCardClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedMetricNameClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(metric_r3.calc), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(metric_r3.calc.description ? 5 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(metric_r3.pacingInfo ? 5 : -1);
+    i0.ɵɵconditional(metric_r3.pacingInfo ? 7 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.relatedPercentageBadgeClasses());
     i0.ɵɵadvance();
@@ -56087,7 +56102,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("", ctx_r1.priorYear(), ": ", ctx_r1.formatMetricValue(metric_r3.calc.currentValue, metric_r3.calc.metric));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(metric_r3.pacingInfo ? 12 : -1);
+    i0.ɵɵconditional(metric_r3.pacingInfo ? 14 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
@@ -56099,7 +56114,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template(rf, c
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 19);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template, 16, 13, "div", 20, _forTrack1$3);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template, 18, 14, "div", 20, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -56305,7 +56320,7 @@ 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: 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) {
+    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", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 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, "flex", "items-center", "gap-2", "flex-1"], [1, "text-sm", "font-semibold", "leading-tight", 3, "ngClass"], ["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, "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"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], 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);
@@ -56332,14 +56347,14 @@ class FunnelMetricsVisualizationComponent {
             <div class="flex items-start justify-between mb-4">
               <div class="flex-1">
                 <div class="flex items-center gap-2 mb-1">
-                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold">
+                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
                     {{ getMetricTitle(stage.stageMetric) }}
                   </h3>
                   @if (stage.stageMetric.description) {
                     <button
                       type="button"
                       [ngClass]="infoIconClasses()"
-                      class="flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center transition-colors self-center"
+                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
                       [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
                       tooltipType="markdown"
                       tooltipPosition="right">
@@ -56404,9 +56419,24 @@ class FunnelMetricsVisualizationComponent {
                   @for (metric of stage.relatedMetrics; track metric.calc.metric) {
                     <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
                       <div class="flex items-center justify-between mb-2">
-                        <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold flex-1">
-                          {{ getMetricTitle(metric.calc) }}
-                        </p>
+                        <div class="flex items-center gap-2 flex-1">
+                          <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold leading-tight">
+                            {{ getMetricTitle(metric.calc) }}
+                          </p>
+                          @if (metric.calc.description) {
+                            <button
+                              type="button"
+                              [ngClass]="infoIconClasses()"
+                              class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                              [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
+                              tooltipType="markdown"
+                              tooltipPosition="right">
+                              <svg class="w-3.5 h-3.5" 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 class="flex items-center gap-2">
                           @if (metric.pacingInfo) {
                             <symphiq-pacing-status-badge
@@ -56445,7 +56475,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: 137 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 152 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -57369,27 +57399,34 @@ function transformTrendUiDataToChartSeries(trendUiData, metricToExtract) {
         return [];
     const dateIndex = convertedData.dimensions?.indexOf(DimensionEnum.DATE);
     const monthIndex = convertedData.dimensions?.indexOf(DimensionEnum.MONTH);
-    if (dateIndex === undefined || dateIndex === -1) {
-        if (monthIndex === undefined || monthIndex === -1)
-            return [];
-        return extractSeriesFromConvertedData(convertedData, metricToExtract, 'Current Year')
-            ? [extractSeriesFromConvertedData(convertedData, metricToExtract, 'Current Year')]
-            : [];
-    }
+    const dimensionIndex = dateIndex !== undefined && dateIndex !== -1
+        ? dateIndex
+        : (monthIndex !== undefined && monthIndex !== -1 ? monthIndex : -1);
+    if (dimensionIndex === -1)
+        return [];
     const currentYear = new Date().getFullYear();
     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 dimValue = row.dimensionValues?.[dimensionIndex];
         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);
+        if (dimValue) {
+            let year;
+            let month;
+            if (dimValue.includes('-')) {
+                const parts = dimValue.split('-');
+                year = parseInt(parts[0], 10);
+                month = parseInt(parts[1], 10);
+            }
+            else if (dimValue.length >= 6) {
+                year = parseInt(dimValue.substring(0, 4), 10);
+                month = parseInt(dimValue.substring(4, 6), 10);
+            }
+            else {
+                month = parseInt(dimValue, 10);
+                year = currentYear;
+            }
             const point = {
                 category: String(month),
                 value: metricValue,
@@ -57406,13 +57443,13 @@ function transformTrendUiDataToChartSeries(trendUiData, metricToExtract) {
     const series = [];
     if (priorYearPoints.length > 0) {
         series.push({
-            name: 'Prior Year',
+            name: String(priorYear),
             data: aggregateAndSortByMonth(priorYearPoints)
         });
     }
     if (currentYearPoints.length > 0) {
         series.push({
-            name: 'Current Year',
+            name: String(currentYear),
             data: aggregateAndSortByMonth(currentYearPoints)
         });
     }