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

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

@@ -0,0 +1,61 @@
+import { computed } from 'vue';
+import { isValid, endOfMonth } from 'date-fns';
+
+export default function buildGanttData(props) {
+	const autoCalculatedDateRange = computed(() => {
+		const allDates: Date[] = [];
+		
+		props.data.groups.forEach(group => {
+			group.bars.forEach(bar => {
+				const startDate = bar.start instanceof Date ? bar.start : new Date(bar.start);
+				const endDate = bar.end instanceof Date ? bar.end : new Date(bar.end);
+				
+				if (isValid(startDate)) {
+					allDates.push(startDate);
+				}
+				if (isValid(endDate)) {
+					allDates.push(endDate);
+				}
+			});
+		});
+
+		if (allDates.length === 0) {
+			const now = new Date();
+			return {
+				start: new Date(now.getFullYear(), 0, 1),
+				end: new Date(now.getFullYear(), 11, 31)
+			};
+		}
+
+		const minDate = new Date(Math.min(...allDates.map(d => d.getTime())));
+		const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())));
+
+		minDate.setDate(1);
+		const adjustedMaxDate = endOfMonth(maxDate);
+
+		return { start: minDate, end: adjustedMaxDate };
+	});
+
+	const autoGeneratedLegend = computed(() => {
+		const uniqueItems = new Map<string, { label: string; color: string }>();
+
+		props.data.groups.forEach(group => {
+			group.bars.forEach(bar => {
+				const key = `${bar.color}-${bar.label}`;
+				if (!uniqueItems.has(key)) {
+					uniqueItems.set(key, {
+						label: bar.label,
+						color: bar.color
+					});
+				}
+			});
+		});
+
+		return Array.from(uniqueItems.values());
+	});
+
+	return {
+		autoCalculatedDateRange,
+		autoGeneratedLegend
+	};
+}

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

@@ -0,0 +1,2 @@
+export { default as buildGanttData } from './buildGanttData';
+export { default as buildBarPositioning } from './buildBarPositioning';

package/src/components/GanttChart/index.ts

@@ -0,0 +1,4 @@
+import GanttChart from './GanttChart.vue';
+
+export { GanttChart };
+export default GanttChart;

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

@@ -0,0 +1,60 @@
+export interface GanttData {
+	groups: GanttGroup[];
+}
+
+export interface GanttGroup {
+	title: string; 
+	bars: GanttBar[];
+}
+
+export interface GanttBar {
+	id: string | number;
+	label: string; 	
+	start: Date | string; 
+	end: Date | string; 
+	color: string; 
+	rowPosition?: number;
+	tooltipData?: TooltipData;
+	
+	[key: string]: any;
+}
+
+export interface LegendItem {
+	label: string;
+	color: string;
+}
+
+export interface MonthColumn {
+	date: Date;
+	label: string;
+	isCurrentMonth: boolean;
+}
+
+export interface BarGridStyle {
+	'grid-column-start': number;
+	'grid-column-end': number;
+	'background-color': string;
+	'grid-row': string;
+	'margin-left': string;
+	'width': string;
+}
+
+export interface DateRange {
+	start: Date;
+	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;
+	y: number;
+	title: string;
+	barData: GanttBar | null;
+}

package/src/components/GanttChart/utils/dateUtils.ts

@@ -0,0 +1,98 @@
+/**
+ * Date utility functions for GanttChart component
+ */
+
+import {
+	eachMonthOfInterval,
+	startOfMonth,
+	format,
+	isSameMonth,
+	getDaysInMonth as dateFnsGetDaysInMonth,
+	differenceInMonths,
+	parseISO,
+	isValid
+} from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+
+/**
+ * Get all months between two dates
+ */
+export const getMonthsBetween = (startDate: Date, endDate: Date): Date[] => {
+	return eachMonthOfInterval({
+		start: startOfMonth(startDate),
+		end: startOfMonth(endDate)
+	});
+};
+
+/**
+ * Format month in Brazilian Portuguese
+ */
+export const formatMonth = (date: Date): string => {
+	const formatted = format(date, 'MMM/yyyy', { locale: ptBR });
+	return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+};
+
+/**
+ * Check if date is current month
+ */
+export const isCurrentMonth = (date: Date): boolean => {
+	return isSameMonth(date, new Date());
+};
+
+/**
+ * Get number of days in a month
+ */
+export const getDaysInMonth = (year: number, month: number): number => {
+	return dateFnsGetDaysInMonth(new Date(year, month));
+};
+
+/**
+ * Get column index for a date relative to start date
+ */
+export const getColumnForDate = (date: Date | string, startDate: Date): number => {
+	const targetDate = date instanceof Date ? date : new Date(date);
+	const startDateObj = startDate instanceof Date ? startDate : new Date(startDate);
+
+	if (!isValid(targetDate) || !isValid(startDateObj)) {
+		return 0;
+	}
+
+	const targetMonth = startOfMonth(targetDate);
+	const startMonth = startOfMonth(startDateObj);
+
+	return differenceInMonths(targetMonth, startMonth);
+};
+
+/**
+ * Parse ISO date string (YYYY-MM-DD) to Date object
+ */
+export const parseIsoDate = (iso: string): Date => {
+	if (!iso || typeof iso !== 'string') {
+		return new Date(NaN);
+	}
+
+	try {
+		const parsedDate = parseISO(iso);
+		return isValid(parsedDate) ? parsedDate : new Date(NaN);
+	} catch {
+		return new Date(NaN);
+	}
+};
+
+/**
+ * Format date range for tooltip display
+ */
+export const formatDateRange = (start: Date | string, end: Date | string): string => {
+	const startDate = typeof start === 'string' ? new Date(start) : start;
+	const endDate = typeof end === 'string' ? new Date(end) : end;
+	
+	if (!isValid(startDate) || !isValid(endDate)) {
+		return 'Data inválida';
+	}
+	
+	const formatDate = (date: Date) => {
+		return format(date, 'dd/MM/yyyy', { locale: ptBR });
+	};
+	
+	return `${formatDate(startDate)} - ${formatDate(endDate)}`;
+};

package/src/main.ts

@@ -20,7 +20,7 @@ import DefaultButton from './components/Buttons/DefaultButton';
 import Collapsible from './components/Collapsible';
 import IdCaption from './components/IdCaption';
 import ResourceMetaInfo from './components/ResourceMetaInfo';
-
+import GanttChart from './components/GanttChart';
 export {
 	DataTableEmptyWrapper,
 	DataTablePaginator,
@@ -92,3 +92,4 @@ export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';
 export * from './components/layout/Row';
 export * from './components/layout/Line';
+export * from './components/GanttChart';