@eric-emg/symphiq-components 1.2.183 → 1.2.185

package/fesm2022/symphiq-components.mjs

@@ -56320,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", "leading-tight", 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) {
+    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-8"], [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);
@@ -56341,13 +56341,13 @@ class FunnelMetricsVisualizationComponent {
                 template: `
     <div class="space-y-6">
       <symphiq-tooltip-container />
-      <div class="space-y-3">
+      <div class="space-y-8">
         @for (stage of funnelStages(); track stage.stageMetric.metric) {
           <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
             <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 leading-tight">
+                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
                     {{ getMetricTitle(stage.stageMetric) }}
                   </h3>
                   @if (stage.stageMetric.description) {
@@ -57399,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,
@@ -57436,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)
         });
     }
@@ -57776,19 +57783,14 @@ class InitialTargetSettingComponent {
         }, ...(ngDevMode ? [{ debugName: "showMetricsVisualization" }] : []));
         this.revenueChartData = computed(() => {
             const trendData = this.trendUiData();
-            console.log('[revenueChartData] trendData:', trendData);
-            console.log('[revenueChartData] convertedDataResults:', trendData?.convertedDataResults);
             if (!trendData?.convertedDataResults) {
-                console.log('[revenueChartData] No convertedDataResults, returning null');
                 return null;
             }
             const series = transformTrendUiDataToChartSeries(trendData, MetricEnum.PURCHASE_REVENUE);
-            console.log('[revenueChartData] series:', series);
             if (series.length === 0) {
-                console.log('[revenueChartData] Empty series, returning null');
                 return null;
             }
-            const result = {
+            return {
                 title: 'Revenue Trend',
                 areaChartData: {
                     series: series.map(s => ({
@@ -57800,8 +57802,6 @@ class InitialTargetSettingComponent {
                     }))
                 }
             };
-            console.log('[revenueChartData] result:', result);
-            return result;
         }, ...(ngDevMode ? [{ debugName: "revenueChartData" }] : []));
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));