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

package/package.json

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

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.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/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;
 }