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

package/package.json

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

package/src/components/GanttChart/GanttChart.scss

@@ -136,6 +136,7 @@
     margin-top: gutter('lg');
     padding-top: gutter('sm');
     flex-wrap: wrap;
+    width: 100%;
   }
 
   &__legend-title {
@@ -213,6 +214,10 @@
         margin-bottom: 0;
       }
     }
+    .tooltip-label {
+      margin-right: 4px;
+    }
+
 
     .tooltip-text {
       font-weight: 500;

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;
 				});
 			}
@@ -223,17 +227,23 @@ export default defineComponent({
 
 		const legendStyle = computed(() => {
 			const timelineWidth = monthColumns.value.length * 80;
-			const totalWidth = 120 + timelineWidth;
+			const totalWidth = 180 + timelineWidth; 
 			return {
-				width: `${totalWidth}px`,
+				minWidth: `${totalWidth}px`, 
 			};
 		});
 
+		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/__tests__/GanttChart.spec.js

@@ -93,15 +93,15 @@ describe('GanttChart component', () => {
 								{
 									id: 1,
 									label: 'Early Bar',
-									start: new Date(2025, 0, 15), // Jan 15, 2025
-									end: new Date(2025, 2, 10), // Mar 10, 2025
+									start: new Date(2025, 0, 15), 
+									end: new Date(2025, 2, 10), 
 									color: '#7BC4F7',
 								},
 								{
 									id: 2,
 									label: 'Late Bar',
-									start: new Date(2025, 4, 5), // May 5, 2025
-									end: new Date(2025, 6, 20), // Jul 20, 2025
+									start: new Date(2025, 4, 5), 
+									end: new Date(2025, 6, 20), 
 									color: '#8BB455',
 								},
 							],
@@ -113,11 +113,10 @@ describe('GanttChart component', () => {
 					propsData: { data: testData },
 				});
 
-				// Should calculate from January 1st to July 31st (full months)
 				const monthColumns = testWrapper.vm.monthColumns;
-				expect(monthColumns.length).toBe(7); // Jan to Jul = 7 months
+				expect(monthColumns.length).toBe(8); 
 				expect(monthColumns[0].label).toContain('Jan');
-				expect(monthColumns[monthColumns.length - 1].label).toContain('Jul');
+				expect(monthColumns[monthColumns.length - 1].label).toContain('Ago');
 			});
 
 			it('should handle single month range', () => {
@@ -129,8 +128,8 @@ describe('GanttChart component', () => {
 								{
 									id: 1,
 									label: 'Single Month Bar',
-									start: new Date(2025, 3, 5), // Apr 5, 2025
-									end: new Date(2025, 3, 25), // Apr 25, 2025
+									start: new Date(2025, 3, 5), 
+									end: new Date(2025, 3, 25), 
 									color: '#7BC4F7',
 								},
 							],
@@ -143,8 +142,9 @@ describe('GanttChart component', () => {
 				});
 
 				const monthColumns = testWrapper.vm.monthColumns;
-				expect(monthColumns.length).toBe(1);
+				expect(monthColumns.length).toBe(2); 
 				expect(monthColumns[0].label).toContain('Abr');
+				expect(monthColumns[1].label).toContain('Mai');
 			});
 		});
 
@@ -171,7 +171,7 @@ describe('GanttChart component', () => {
 								},
 								{
 									id: 3,
-									label: 'Design', // Same label, same color - should not duplicate
+									label: 'Design', 
 									start: new Date(2025, 2, 1),
 									end: new Date(2025, 3, 1),
 									color: '#8E44AD',
@@ -186,7 +186,7 @@ describe('GanttChart component', () => {
 				});
 
 				const legend = testWrapper.vm.autoGeneratedLegend;
-				expect(legend).toHaveLength(2); // Only unique combinations
+				expect(legend).toHaveLength(2); 
 				expect(legend.some(item => item.label === 'Design' && item.color === '#8E44AD')).toBe(true);
 				expect(legend.some(item => item.label === 'Development' && item.color === '#16A085')).toBe(true);
 			});
@@ -219,7 +219,6 @@ describe('GanttChart component', () => {
 				];
 				const positionedBars = component.getPositionedBars(bars);
 				expect(positionedBars).toHaveLength(2);
-				// Each bar should have its own unique row position
 				expect(positionedBars[0].rowPosition).toBe(0);
 				expect(positionedBars[1].rowPosition).toBe(1);
 			});
@@ -228,21 +227,21 @@ describe('GanttChart component', () => {
 				const bars = [
 					{
 						id: 3,
-						start: new Date(2025, 2, 1), // Latest date but first in array
+						start: new Date(2025, 2, 1), 
 						end: new Date(2025, 2, 15),
 						label: 'Latest Bar',
 						color: '#FFB84D',
 					},
 					{
 						id: 1,
-						start: new Date(2025, 0, 1), // Earliest date but second in array
+						start: new Date(2025, 0, 1), 
 						end: new Date(2025, 0, 15),
 						label: 'Early Bar',
 						color: '#7BC4F7',
 					},
 					{
 						id: 2,
-						start: new Date(2025, 1, 1), // Middle date but third in array
+						start: new Date(2025, 1, 1), 
 						end: new Date(2025, 1, 15),
 						label: 'Middle Bar',
 						color: '#8BB455',
@@ -250,10 +249,9 @@ describe('GanttChart component', () => {
 				];
 				const positionedBars = component.getPositionedBars(bars);
 				expect(positionedBars).toHaveLength(3);
-				// Bars should maintain original order, not be sorted by date
-				expect(positionedBars[0].id).toBe(3); // Latest date stays first
-				expect(positionedBars[1].id).toBe(1); // Earliest date stays second
-				expect(positionedBars[2].id).toBe(2); // Middle date stays third
+				expect(positionedBars[0].id).toBe(3); 
+				expect(positionedBars[1].id).toBe(1); 
+				expect(positionedBars[2].id).toBe(2); 
 				expect(positionedBars[0].rowPosition).toBe(0);
 				expect(positionedBars[1].rowPosition).toBe(1);
 				expect(positionedBars[2].rowPosition).toBe(2);
@@ -310,7 +308,6 @@ describe('GanttChart component', () => {
 						label: 'Bar Without Color',
 						start: new Date(2025, 0, 1),
 						end: new Date(2025, 1, 1),
-						// color não definido - deve usar fallback
 					}]
 				}]
 			};
@@ -350,16 +347,13 @@ describe('GanttChart component', () => {
 		it('should validate invalid data prop structure', () => {
 			const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 			
-			// Teste com data null
 			const validator = wrapper.vm.$options.props.data.validator;
 			expect(validator(null)).toBe(false);
 			expect(consoleSpy).toHaveBeenCalledWith('GanttChart: prop "data" deve ser um objeto.');
 			
-			// Teste com data sem groups
 			expect(validator({})).toBe(false);
 			expect(consoleSpy).toHaveBeenCalledWith('GanttChart: prop "data.groups" deve ser um array.');
 			
-			// Teste com groups inválido
 			expect(validator({ groups: 'invalid' })).toBe(false);
 			expect(consoleSpy).toHaveBeenCalledWith('GanttChart: prop "data.groups" deve ser um array.');
 			
@@ -370,7 +364,6 @@ describe('GanttChart component', () => {
 			const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 			const validator = wrapper.vm.$options.props.data.validator;
 			
-			// Teste com grupo sem title
 			const invalidData = {
 				groups: [{
 					bars: []
@@ -379,7 +372,6 @@ describe('GanttChart component', () => {
 			expect(validator(invalidData)).toBe(false);
 			expect(consoleSpy).toHaveBeenCalledWith('GanttChart: cada grupo deve ter título (string) e barras (array).');
 			
-			// Teste com grupo sem bars
 			const invalidData2 = {
 				groups: [{
 					title: 'Valid Title'
@@ -408,18 +400,15 @@ describe('GanttChart component', () => {
 			const bar = {
 				id: 1,
 				label: 'Inverted Date Bar',
-				// Datas invertidas (end antes de start)
-				start: new Date(2025, 3, 15), // 15 de abril
-				end: new Date(2025, 2, 15),   // 15 de março (antes do início)
+				start: new Date(2025, 3, 15), 
+				end: new Date(2025, 2, 15),  
 				color: '#7BC4F7',
 			};
 			
-			// Normalizar barra via função de posicionamento
 			const dates = component.normalizeBarDates(bar);
 			
-			// Verificar se as datas foram invertidas corretamente
-			expect(dates.startDate.getTime()).toBe(new Date(2025, 2, 15).getTime()); // Agora é 15 de março
-			expect(dates.endDate.getTime()).toBe(new Date(2025, 3, 15).getTime()); // Agora é 15 de abril
+			expect(dates.startDate.getTime()).toBe(new Date(2025, 2, 15).getTime()); 
+			expect(dates.endDate.getTime()).toBe(new Date(2025, 3, 15).getTime()); 
 		});
 
 		it('should handle invalid dates', () => {
@@ -438,17 +427,14 @@ describe('GanttChart component', () => {
 
 	describe('Tooltip System', () => {
 		it('should show tooltip on bar mouseenter', async () => {
-			// Encontrar uma barra
 			const bar = wrapper.find('.farm-gantt-chart__bar');
 			
 			if (bar.exists()) {
-				// Disparar evento mouseenter
 				await bar.trigger('mouseenter', {
 					clientX: 100,
 					clientY: 100,
 				});
 				
-				// Verificar se tooltipState foi atualizado
 				expect(component.tooltipState.visible).toBe(true);
 				expect(component.tooltipState.title).toBe('Test Bar');
 				expect(component.tooltipState.barData).not.toBeNull();
@@ -456,24 +442,20 @@ describe('GanttChart component', () => {
 		});
 		
 		it('should hide tooltip on bar mouseleave', async () => {
-			// Preparar estado (mostrar tooltip)
 			component.tooltipState.visible = true;
 			component.tooltipState.title = 'Teste';
 			component.tooltipState.barData = { label: 'Teste' };
 			
-			// Encontrar e disparar mouseleave
 			const bar = wrapper.find('.farm-gantt-chart__bar');
 			if (bar.exists()) {
 				await bar.trigger('mouseleave');
 				
-				// Verificar se tooltipState foi atualizado
 				expect(component.tooltipState.visible).toBe(false);
 				expect(component.tooltipState.barData).toBeNull();
 			}
 		});
 		
 		it('should show structured tooltip when tooltipData is available', () => {
-			// Criar wrapper com dados para tooltip
 			const testData = {
 				groups: [{
 					title: 'Group with Tooltips',
@@ -495,7 +477,6 @@ describe('GanttChart component', () => {
 				propsData: { data: testData },
 			});
 			
-			// Simular mouseenter
 			const barWithTooltip = tooltipWrapper.find('.farm-gantt-chart__bar');
 			if (barWithTooltip.exists()) {
 				barWithTooltip.trigger('mouseenter', {
@@ -503,8 +484,6 @@ describe('GanttChart component', () => {
 					clientY: 100
 				});
 				
-				// Verificar que tooltip com dados estruturados será exibido
-				// quando tooltipState.barData.tooltipData existir
 				expect(tooltipWrapper.vm.tooltipState.barData.tooltipData).toBeDefined();
 				expect(tooltipWrapper.vm.tooltipState.barData.tooltipData.Taxa).toBe('1,75%');
 			}
@@ -518,11 +497,8 @@ describe('GanttChart component', () => {
 				propsData: { data: emptyData },
 			});
 			
-			// Componente deve renderizar sem erros mesmo com dados vazios
-			expect(emptyWrapper.exists()).toBe(true);
 			expect(emptyWrapper.find('.farm-gantt-chart').exists()).toBe(true);
 			
-			// Não deve haver grupos renderizados
 			const groups = emptyWrapper.findAll('.farm-gantt-chart__group');
 			expect(groups.length).toBe(0);
 		});
@@ -533,7 +509,6 @@ describe('GanttChart component', () => {
 				propsData: { data: emptyData },
 			});
 			
-			// Timeline headers devem estar presentes (baseado em data range padrão ou calculado)
 			const header = emptyWrapper.find('.farm-gantt-chart__header');
 			expect(header.exists()).toBe(true);
 		});

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

@@ -1,8 +1,12 @@
 import { isValid } from 'date-fns';
-import type { GanttBar } from '../types';
+import { Ref } from 'vue';
+import type { GanttBar, DateRange, MonthColumn } from '../types';
 import { getColumnForDate, getDaysInMonth } from '../utils/dateUtils';
 
-export default function buildBarPositioning(dateRange, monthColumns) {
+export default function buildBarPositioning(
+	dateRange: Ref<DateRange>,
+	monthColumns: Ref<MonthColumn[]>
+) {
 	const normalizeBarDates = (bar: GanttBar) => {
 		let startDate = bar.start instanceof Date ? bar.start : new Date(bar.start);
 		let endDate = bar.end instanceof Date ? bar.end : new Date(bar.end);

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

@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import { isValid, endOfMonth } from 'date-fns';
+import { isValid, endOfMonth, addMonths } from 'date-fns';
 
 export default function buildGanttData(props) {
 	const autoCalculatedDateRange = computed(() => {
@@ -23,7 +23,7 @@ export default function buildGanttData(props) {
 			const now = new Date();
 			return {
 				start: new Date(now.getFullYear(), 0, 1),
-				end: new Date(now.getFullYear(), 11, 31)
+				end: endOfMonth(addMonths(new Date(now.getFullYear(), 11, 31), 1))
 			};
 		}
 
@@ -31,7 +31,7 @@ export default function buildGanttData(props) {
 		const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())));
 
 		minDate.setDate(1);
-		const adjustedMaxDate = endOfMonth(maxDate);
+		const adjustedMaxDate = endOfMonth(addMonths(maxDate, 1));
 
 		return { start: minDate, end: adjustedMaxDate };
 	});

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;
 }
 
@@ -44,13 +45,10 @@ export interface DateRange {
 	end: Date;
 }
 
-
-// NEW: Tooltip data interface
 export interface TooltipData {
 	[key: string]: string | number | null | undefined;
 }
 
-// NEW: Enhanced tooltip state
 export interface TooltipState {
 	visible: boolean;
 	x: number;

package/src/main.ts

@@ -41,6 +41,7 @@ export {
 	Collapsible,
 	IdCaption,
 	ResourceMetaInfo,
+	GanttChart,
 };
 
 export * from './components/AlertBox';