@farm-investimentos/front-mfe-components 15.13.0 → 15.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.13.0",
+	"version": "15.13.2",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/GanttChart/GanttChart.scss

@@ -6,16 +6,15 @@
 
 .farm-gantt-chart {
   width: 100%;
-  height: 100%;
   min-height: 500px;
   position: relative;
   overflow-x: auto;
-  overflow-y: auto;
+  overflow-y: visible;
 
   &__header {
     display: flex;
-    width: fit-content; /* Allow header to expand with timeline */
-    min-width: 100%; /* Ensure header is at least as wide as the container */
+    width: fit-content;
+    min-width: 100%;
     margin-bottom: gutter('sm');
     position: relative;
     z-index: 2;
@@ -37,14 +36,14 @@
   &__month-header {
     display: flex;
     align-items: center;
-    justify-content: flex-start; /* Keep label to the start */
+    justify-content: flex-start;
     padding-right: 8px;
     height: fit-content;
     position: relative;
-    min-width: 0; /* Allow month header to shrink if text is too long, relying on parent scroll */
+    min-width: 0;
 
     .farm-typography {
-      white-space: nowrap; /* Prevent label text from wrapping */
+      white-space: nowrap;
     }
 
     &::after {
@@ -68,11 +67,10 @@
 
   &__content {
     position: relative;
-    width: fit-content; /* Allow content to expand with timeline */
-    min-width: 100%; /* Ensure content is at least as wide as the container */
+    width: fit-content;
+    min-width: 100%;
     display: flex;
     flex-direction: column;
-    /* overflow: hidden; // Remove this to allow content to scroll with parent */
   }
 
   &__group {
@@ -130,22 +128,6 @@
       transform: translateY(-2px);
     }
 
-    // Bar types using library theme colors blended with white (matching Figma approach)
-    &--campaign {
-      background-color: #7BC4F7; // Info blended with white (73% + 27% white) - Vigência da Campanha
-    }
-
-    &--product {
-      background-color: #8BB455; // Primary blended with white (73% + 27% white) - Vigência do Produto Comercial
-    }
-
-    &--disbursement {
-      background-color: #FFB84D; // Warning blended with white (73% + 27% white) - Período de Desembolso
-    }
-
-    &--maturity {
-      background-color: #F7857F; // Error blended with white (73% + 27% white) - Intervalo Vencimento
-    }
   }
 
   &__legend {
@@ -169,8 +151,8 @@
     margin-bottom: gutter('xs');
     position: relative;
     padding: 0 12px;
-    flex-shrink: 0; /* Prevent items from shrinking */
-    white-space: nowrap; /* Prevent text from wrapping */
+    flex-shrink: 0;
+    white-space: nowrap;
 
     &:not(:last-child)::after {
       content: '';
@@ -197,7 +179,6 @@
     align-items: center;
   }
 
-  // NEW: Tooltip container styles - specific to GanttChart positioning
   &__tooltip-container {
     position: absolute;
     z-index: 999;
@@ -207,40 +188,36 @@
   }
 
   &__tooltip {
-    // Reutiliza estilos base do farm-tooltip__popup mas com customizações específicas
     @extend .farm-tooltip__popup;
     @extend .farm-tooltip__popup--visible;
     @extend .farm-tooltip__popup--fluid;
-    
-    // Customizações específicas para GanttChart
+
     pointer-events: auto;
     position: relative;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); // Shadow mais forte para destacar sobre o chart
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    
+    width: auto !important;
+    max-width: 400px !important;
+
+    .farm-tooltip__content {
+      white-space: nowrap;
+    }
 
-    // NEW: Structured tooltip data styling - específico para dados estruturados
     .tooltip-data-row {
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-start;
       align-items: center;
       margin-bottom: 4px;
-      
+
       &:last-child {
         margin-bottom: 0;
       }
     }
-    
-    .tooltip-label {
+
+    .tooltip-text {
       font-weight: 500;
-      margin-right: 8px;
-      color: #f5f5f5;
-      opacity: 0.9;
-    }
-    
-    .tooltip-value {
-      font-weight: 600;
       color: #ffffff;
-      text-align: right;
-      flex-shrink: 0;
+      white-space: nowrap;
     }
   }
 }

package/src/components/GanttChart/GanttChart.vue

@@ -29,7 +29,10 @@
 				class="farm-gantt-chart__group"
 			>
 				<div class="farm-gantt-chart__group-label">
-					<farm-typography :weight="500">
+					<farm-typography v-if="group.subtitle" size="md" :weight="600" color="black" color-variation="50" class="mb-1">
+						{{ group.subtitle }}
+					</farm-typography>
+					<farm-typography size ="md" :weight="500" color="black" color-variation="50">
 						{{ group.title }}
 					</farm-typography>
 				</div>
@@ -50,7 +53,7 @@
 					</div>
 				</div>
 			</div>
-			
+
 		</div>
 
 		<div class="farm-gantt-chart__legend" v-if="autoGeneratedLegend.length > 0" :style="legendStyle">
@@ -80,6 +83,7 @@
 			v-if="tooltipState.visible"
 			class="farm-gantt-chart__tooltip-container"
 			:style="tooltipPositionStyle"
+			ref="tooltipElement"
 		>
 			<div v-if="$slots.tooltip" class="farm-gantt-chart__tooltip">
 				<slot
@@ -88,7 +92,7 @@
 					:tooltipData="tooltipState.barData && tooltipState.barData.tooltipData"
 				/>
 			</div>
-			
+
 			<div
 				v-else-if="tooltipState.barData && tooltipState.barData.tooltipData"
 				class="farm-gantt-chart__tooltip farm-tooltip__popup farm-tooltip__popup--visible"
@@ -109,7 +113,7 @@
 					</div>
 				</div>
 			</div>
-			
+
 			<div
 				v-else
 				class="farm-gantt-chart__tooltip farm-tooltip__popup farm-tooltip__popup--visible"
@@ -128,7 +132,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, reactive, ref } from 'vue';
+import { defineComponent, PropType, computed, reactive, ref, onMounted, onUnmounted, nextTick } from 'vue';
 import type { GanttData, TooltipState, GanttBar } from './types';
 import { getMonthsBetween, formatMonth, isCurrentMonth, getColumnForDate, formatDateRange } from './utils/dateUtils';
 import { buildGanttData, buildBarPositioning } from './composition';
@@ -144,21 +148,21 @@ export default defineComponent({
 					console.warn('GanttChart: prop "data" deve ser um objeto.');
 					return false;
 				}
-				
+
 				if (!Array.isArray(value.groups)) {
 					console.warn('GanttChart: prop "data.groups" deve ser um array.');
 					return false;
 				}
-				
+
 				return value.groups.every((group: any) => {
 					const hasValidTitle = typeof group.title === 'string';
 					const hasValidBars = Array.isArray(group.bars);
-					
+
 					if (!hasValidTitle || !hasValidBars) {
 						console.warn('GanttChart: cada grupo deve ter título (string) e barras (array).');
 						return false;
 					}
-					
+
 					return true;
 				});
 			}
@@ -229,11 +233,17 @@ export default defineComponent({
 			};
 		});
 
+		const tooltipElement = ref<HTMLElement>();
+		const lastMousePosition = ref<{ eventX: number; eventY: number } | null>(null);
+
 		const onBarMouseEnter = (bar: GanttBar, event: MouseEvent) => {
 			tooltipState.visible = true;
-			tooltipState.title = bar.label;
+			tooltipState.title = bar.tooltipTitle || bar.label;
 			tooltipState.barData = bar;
-			updateTooltipPosition(event);
+
+			nextTick(() => {
+				updateTooltipPosition(event);
+			});
 		};
 
 		const onBarMouseMove = (bar: GanttBar, event: MouseEvent) => {
@@ -247,30 +257,50 @@ export default defineComponent({
 			tooltipState.barData = null;
 		};
 
-		const updateTooltipPosition = (event: MouseEvent) => {
-			if (!chartContainer.value) return;
+		const updateTooltipPosition = (event?: MouseEvent) => {
+			const container = chartContainer.value;
+			const tooltipEl = tooltipElement.value;
+			if (!container || !tooltipEl) return;
+
+			const { left, top } = container.getBoundingClientRect();
 
-			const containerRect = chartContainer.value.getBoundingClientRect();
-			const x = event.clientX - containerRect.left;
-			const y = event.clientY - containerRect.top;
+			const scrollLeft = container.scrollLeft;
+			const scrollTop = container.scrollTop;
 
-			const tooltipWidth = 300;
-			const tooltipHeight = 100;
+			const tooltipWidth = tooltipEl.offsetWidth || 300;
+			const tooltipHeight = tooltipEl.offsetHeight || 100;
 			const margin = 15;
 
-			let tooltipX = x + margin;
-			let tooltipY = y + margin;
+			let contentX: number;
+			let contentY: number;
+
+			if (event) {
+				lastMousePosition.value = { eventX: event.clientX, eventY: event.clientY };
+				contentX = event.clientX - left + scrollLeft;
+				contentY = event.clientY - top + scrollTop;
+			} else if (lastMousePosition.value) {
+				contentX = lastMousePosition.value.eventX - left + scrollLeft;
+				contentY = lastMousePosition.value.eventY - top + scrollTop;
+			} else {
+				return;
+			}
+
+			let tooltipX = contentX + margin;
+			let tooltipY = contentY + margin;
+
+			const maxVisibleX = scrollLeft + container.clientWidth - tooltipWidth - 10;
+			const maxVisibleY = scrollTop + container.clientHeight - tooltipHeight - 10;
 
-			if (tooltipX + tooltipWidth > containerRect.width) {
-				tooltipX = Math.max(10, containerRect.width - tooltipWidth - 10);
+			if (tooltipX > maxVisibleX) {
+				tooltipX = maxVisibleX;
 			}
 
-			if (tooltipY + tooltipHeight > containerRect.height) {
-				tooltipY = Math.max(10, y - tooltipHeight - margin);
+			if (tooltipY > maxVisibleY) {
+				tooltipY = Math.max(scrollTop + 10, contentY - tooltipHeight - margin);
 			}
 
-			tooltipX = Math.max(10, tooltipX);
-			tooltipY = Math.max(10, tooltipY);
+			tooltipX = Math.max(scrollLeft + 10, tooltipX);
+			tooltipY = Math.max(scrollTop + 10, tooltipY);
 
 			tooltipState.x = tooltipX;
 			tooltipState.y = tooltipY;
@@ -281,6 +311,20 @@ export default defineComponent({
 			zIndex: 999
 		}));
 
+		onMounted(() => {
+			if (!chartContainer.value) return;
+			const container = chartContainer.value;
+			const handleScroll = () => {
+				if (tooltipState.visible) {
+					updateTooltipPosition();
+				}
+			};
+			container.addEventListener('scroll', handleScroll);
+			onUnmounted(() => {
+				container.removeEventListener('scroll', handleScroll);
+			});
+		});
+
 		return {
 			monthColumns,
 			timelineGridStyle,
@@ -294,6 +338,7 @@ export default defineComponent({
 			tooltipState,
 			tooltipPositionStyle,
 			chartContainer,
+			tooltipElement,
 			onBarMouseEnter,
 			onBarMouseMove,
 			onBarMouseLeave,

package/src/components/GanttChart/composition/buildBarPositioning.ts

@@ -128,7 +128,6 @@ export default function buildBarPositioning(dateRange, monthColumns) {
 
 		const positionedBars = JSON.parse(JSON.stringify(bars));
 
-		// Assign each bar to its own unique row position in the original order
 		positionedBars.forEach((bar: GanttBar, index: number) => {
 			bar.rowPosition = index;
 		});

package/src/components/GanttChart/types/index.ts

@@ -3,19 +3,20 @@ export interface GanttData {
 }
 
 export interface GanttGroup {
-	title: string; 
+	title: string;
+	subtitle?: string;
 	bars: GanttBar[];
 }
 
 export interface GanttBar {
 	id: string | number;
-	label: string; 	
-	start: Date | string; 
-	end: Date | string; 
-	color: string; 
+	label: string;
+	start: Date | string;
+	end: Date | string;
+	color: string;
 	rowPosition?: number;
 	tooltipData?: TooltipData;
-	
+
 	[key: string]: any;
 }