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

package/src/components/FilterEmptyState/FilterEmptyState.stories.js

@@ -0,0 +1,106 @@
+import FilterEmptyState from './FilterEmptyState.vue';
+
+export default {
+	title: 'Display/FilterEmptyState',
+	component: FilterEmptyState,
+	parameters: {
+		docs: {
+			description: {
+				component: `Componente para exibir estados vazios em filtros<br />
+				selector: <em>farm-filter-empty-state</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+	argTypes: {
+		isEmpty: {
+			control: { type: 'boolean' },
+			description: 'Indica se o estado é vazio (sem dados)',
+		},
+		isNotFound: {
+			control: { type: 'boolean' },
+			description: 'Indica se o estado é não encontrado (sem resultados do filtro)',
+		},
+		isEmptyImage: {
+			control: { type: 'text' },
+			description: 'URL da imagem personalizada para estado vazio',
+		},
+		isEmptyImageAlt: {
+			control: { type: 'text' },
+			description: 'Texto alternativo da imagem para estado vazio',
+		},
+		isNotFoundImage: {
+			control: { type: 'text' },
+			description: 'URL da imagem personalizada para estado não encontrado',
+		},
+		isNotFoundImageAlt: {
+			control: { type: 'text' },
+			description: 'Texto alternativo da imagem para estado não encontrado',
+		},
+		title: {
+			control: { type: 'text' },
+			description: 'Título personalizado',
+		},
+		subtitle: {
+			control: { type: 'text' },
+			description: 'Subtítulo personalizado',
+		},
+	},
+	args: {
+		isEmpty: true,
+		isNotFound: false,
+	},
+};
+
+// Empty state image
+export const EmptyStateImage = args => ({
+	components: { FilterEmptyState },
+	setup() {
+		return { args };
+	},
+	template: '<farm-filter-empty-state v-bind="args" />',
+});
+EmptyStateImage.storyName = 'Empty state image';
+EmptyStateImage.args = {
+	isEmpty: true,
+	isNotFound: false,
+};
+
+// Not found state image
+export const NotFoundStateImage = args => ({
+	components: { FilterEmptyState },
+	setup() {
+		return { args };
+	},
+	template: '<farm-filter-empty-state v-bind="args" />',
+});
+NotFoundStateImage.storyName = 'Not found state image';
+NotFoundStateImage.args = {
+	isEmpty: false,
+	isNotFound: true,
+};
+
+// Custom titles and subtitles (slot)
+export const CustomTitlesAndSubtitles = args => ({
+	components: { FilterEmptyState },
+	setup() {
+		return { args };
+	},
+	template: `
+		<farm-filter-empty-state v-bind="args">
+			<template #title>
+				<span style="color: #4f8406;">Título customizado via slot</span>
+			</template>
+			<template #subtitle>
+				<span>Subtítulo <b>com HTML</b> via slot</span>
+			</template>
+		</farm-filter-empty-state>
+	`,
+});
+CustomTitlesAndSubtitles.storyName = 'Custom titles and subtitles (slot)';
+CustomTitlesAndSubtitles.args = {
+	isEmpty: true,
+	isNotFound: false,
+};

package/src/components/FilterEmptyState/FilterEmptyState.vue

@@ -0,0 +1,137 @@
+<template>
+	<farm-box>
+		<farm-row justify="center" class="mb-4">
+			<img
+				v-if="isEmpty"
+				:src="isEmptyImage"
+				:alt="isEmptyImageAlt"
+				class="filter-empty-state__image"
+			/>
+			<img
+				v-else-if="isNotFound"
+				:src="isNotFoundImage"
+				:alt="isNotFoundImageAlt"
+				class="filter-empty-state__image"
+			/>
+		</farm-row>
+		<farm-row justify="center">
+			<farm-bodytext variation="bold" color="gray" :type="2">
+				<slot name="title">
+					{{ title || 'Nenhuma informação para exibir aqui' }}
+				</slot>
+			</farm-bodytext>
+		</farm-row>
+		<farm-row justify="center" class="mt-2">
+			<farm-caption variation="regular" color="gray">
+				<slot name="subtitle">
+					{{ subtitle || 'Tente filtrar novamente sua pesquisa.' }}
+				</slot>
+			</farm-caption>
+		</farm-row>
+	</farm-box>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+export type FilterEmptyStateProps = {
+	/**
+	 * Indicates if the state is empty (no data)
+	 */
+	isEmpty?: boolean;
+	/**
+	 * Indicates if the state is not found (no results from filter)
+	 */
+	isNotFound?: boolean;
+	/**
+	 * Custom image URL for empty state
+	 */
+	isEmptyImage?: string;
+	/**
+	 * Alt text for empty state image
+	 */
+	isEmptyImageAlt?: string;
+	/**
+	 * Custom image URL for not found state
+	 */
+	isNotFoundImage?: string;
+	/**
+	 * Alt text for not found state image
+	 */
+	isNotFoundImageAlt?: string;
+	/**
+	 * Title to be displayed
+	 */
+	title?: string;
+	/**
+	 * Subtitle to be displayed
+	 */
+	subtitle?: string;
+};
+
+export default defineComponent({
+	name: 'farm-filter-empty-state',
+	props: {
+		/**
+		 * Indicates if the state is empty (no data)
+		 */
+		isEmpty: {
+			type: Boolean as PropType<FilterEmptyStateProps['isEmpty']>,
+			default: false,
+		},
+		/**
+		 * Indicates if the state is not found (no results from filter)
+		 */
+		isNotFound: {
+			type: Boolean as PropType<FilterEmptyStateProps['isNotFound']>,
+			default: false,
+		},
+		/**
+		 * Custom image URL for empty state
+		 */
+		isEmptyImage: {
+			type: String as PropType<FilterEmptyStateProps['isEmptyImage']>,
+			default: require('../../assets/imgs/empty-data.svg'),
+		},
+		/**
+		 * Alt text for empty state image
+		 */
+		isEmptyImageAlt: {
+			type: String as PropType<FilterEmptyStateProps['isEmptyImageAlt']>,
+			default: 'Imagem referente a dados vazios',
+		},
+		/**
+		 * Custom image URL for not found state
+		 */
+		isNotFoundImage: {
+			type: String as PropType<FilterEmptyStateProps['isNotFoundImage']>,
+			default: require('../../assets/imgs/empty-not-found.svg'),
+		},
+		/**
+		 * Alt text for not found state image
+		 */
+		isNotFoundImageAlt: {
+			type: String as PropType<FilterEmptyStateProps['isNotFoundImageAlt']>,
+			default: 'Imagem referente a filtro vazio',
+		},
+		/**
+		 * Title to be displayed
+		 */
+		title: {
+			type: String as PropType<FilterEmptyStateProps['title']>,
+			default: '',
+		},
+		/**
+		 * Subtitle to be displayed
+		 */
+		subtitle: {
+			type: String as PropType<FilterEmptyStateProps['subtitle']>,
+			default: '',
+		},
+	},
+});
+</script>
+
+<style scoped lang="scss">
+@import './FilterEmptyState.scss';
+</style>

package/src/components/FilterEmptyState/__tests__/FilterEmptyState.test.js

@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils';
+import FilterEmptyState from '../FilterEmptyState.vue';
+
+const globalStubs = {
+	'farm-box': { template: '<div><slot /></div>' },
+	'farm-row': { template: '<div><slot /></div>' },
+	'farm-bodytext': { template: '<div><slot /></div>' },
+	'farm-caption': { template: '<div><slot /></div>' },
+};
+
+describe('FilterEmptyState', () => {
+	it('renders empty state correctly', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: true,
+				isNotFound: false,
+			},
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+		expect(wrapper.text()).toContain('Nenhuma informação para exibir aqui');
+		expect(wrapper.text()).toContain('Tente filtrar novamente sua pesquisa.');
+	});
+
+	it('renders not found state correctly', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: false,
+				isNotFound: true,
+			},
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+		expect(wrapper.text()).toContain('Nenhuma informação para exibir aqui');
+		expect(wrapper.text()).toContain('Tente filtrar novamente sua pesquisa.');
+	});
+
+	it('renders custom title and subtitle', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: true,
+				title: 'Custom Title',
+				subtitle: 'Custom Subtitle',
+			},
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.text()).toContain('Custom Title');
+		expect(wrapper.text()).toContain('Custom Subtitle');
+	});
+
+	it('uses custom images when provided', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: true,
+				isEmptyImage: 'custom-empty-image.svg',
+				isEmptyImageAlt: 'Custom empty image',
+			},
+			stubs: globalStubs,
+		});
+
+		const img = wrapper.find('.filter-empty-state__image');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('custom-empty-image.svg');
+		expect(img.attributes('alt')).toBe('Custom empty image');
+	});
+
+	it('uses custom not found images when provided', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isNotFound: true,
+				isNotFoundImage: 'custom-not-found-image.svg',
+				isNotFoundImageAlt: 'Custom not found image',
+			},
+			stubs: globalStubs,
+		});
+
+		const img = wrapper.find('.filter-empty-state__image');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('custom-not-found-image.svg');
+		expect(img.attributes('alt')).toBe('Custom not found image');
+	});
+
+	it('has correct default props', () => {
+		const wrapper = mount(FilterEmptyState, {
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.props('isEmpty')).toBe(false);
+		expect(wrapper.props('isNotFound')).toBe(false);
+		expect(wrapper.props('title')).toBe('');
+		expect(wrapper.props('subtitle')).toBe('');
+	});
+
+	it('does not show image when neither isEmpty nor isNotFound is true', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: false,
+				isNotFound: false,
+			},
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(false);
+	});
+});

package/src/components/FilterEmptyState/index.ts

@@ -0,0 +1,38 @@
+import FilterEmptyState from './FilterEmptyState.vue';
+
+export type FilterEmptyStateProps = {
+	/**
+	 * Indicates if the state is empty (no data)
+	 */
+	isEmpty?: boolean;
+	/**
+	 * Indicates if the state is not found (no results from filter)
+	 */
+	isNotFound?: boolean;
+	/**
+	 * Custom image URL for empty state
+	 */
+	isEmptyImage?: string;
+	/**
+	 * Alt text for empty state image
+	 */
+	isEmptyImageAlt?: string;
+	/**
+	 * Custom image URL for not found state
+	 */
+	isNotFoundImage?: string;
+	/**
+	 * Alt text for not found state image
+	 */
+	isNotFoundImageAlt?: string;
+	/**
+	 * Title to be displayed
+	 */
+	title?: string;
+	/**
+	 * Subtitle to be displayed
+	 */
+	subtitle?: string;
+};
+
+export default FilterEmptyState;

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

@@ -227,9 +227,9 @@ 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`, 
 			};
 		});
 

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);