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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.12.1",
+	"version": "15.13.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -23,6 +23,7 @@
 	],
 	"dependencies": {
 		"core-js": "^3.6.5",
+		"date-fns": "2.29.3",
 		"vue": "2.7.10",
 		"vuetify": "^2.4.5"
 	},

package/src/components/GanttChart/GanttChart.scss

@@ -0,0 +1,223 @@
+@import '../../configurations/mixins';
+@import '../../configurations/variables';
+@import '../../configurations/functions';
+@import '../../configurations/_theme-colors';
+@import '../Tooltip/Tooltip.scss';
+
+.farm-gantt-chart {
+  width: 100%;
+  min-height: 500px;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: visible;
+
+  &__header {
+    display: flex;
+    width: fit-content;
+    min-width: 100%;
+    margin-bottom: gutter('sm');
+    position: relative;
+    z-index: 2;
+  }
+
+  &__row-label-space {
+    width: 180px;
+    min-width: 180px;
+    flex-shrink: 0;
+  }
+
+  &__timeline {
+    display: grid;
+    flex-grow: 1;
+    gap: 0;
+    min-height: 40px;
+  }
+
+  &__month-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-right: 8px;
+    height: fit-content;
+    position: relative;
+    min-width: 0;
+
+    .farm-typography {
+      white-space: nowrap;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 100%;
+      width: 1px;
+      height: calc(var(--gantt-content-height, 300px) + 30px);
+      border-left: 1px dashed var(--farm-stroke-base);
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    &--current {
+      &::after {
+        border-left-color: var(--farm-primary-base);
+      }
+    }
+  }
+
+  &__content {
+    position: relative;
+    width: fit-content;
+    min-width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__group {
+    display: flex;
+    width: 100%;
+    margin-bottom: gutter('lg');
+    min-height: 60px;
+    position: relative;
+    border-bottom: 1px dashed var(--farm-stroke-base);
+    padding-bottom: gutter('sm');
+  }
+
+  &__group-label {
+    width: 180px;
+    min-width: 180px;
+    flex-shrink: 0;
+    padding: gutter('sm') gutter('sm') gutter('sm') 0;
+    font-weight: 500;
+    color: var(--farm-text-base);
+    align-self: center;
+    overflow-wrap: break-word;
+  }
+
+  &__group-timeline {
+    flex-grow: 1;
+    display: grid;
+    position: relative;
+    min-height: 60px;
+    gap: 0;
+    grid-auto-rows: 35px;
+    align-content: start;
+    padding: gutter('xs') 0;
+  }
+
+
+
+  &__bar {
+    height: 30px;
+    z-index: 2;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    color: white;
+    font-size: fontSize('sm');
+    padding: 0 gutter('sm');
+    @include ellipsis;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+    margin: gutter('xs') / 2;
+
+    &:hover {
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+      transform: translateY(-2px);
+    }
+
+  }
+
+  &__legend {
+    display: flex;
+    align-items: center;
+    margin-top: gutter('lg');
+    padding-top: gutter('sm');
+    flex-wrap: wrap;
+  }
+
+  &__legend-title {
+    margin-right: gutter('md');
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  &__legend-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: gutter('xs');
+    position: relative;
+    padding: 0 12px;
+    flex-shrink: 0;
+    white-space: nowrap;
+
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 12px;
+      width: 1px;
+      background-color: var(--farm-stroke-base);
+    }
+  }
+
+  &__legend-color {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: gutter('sm');
+    flex-shrink: 0;
+  }
+
+  &__legend-label {
+    display: flex;
+    align-items: center;
+  }
+
+  &__tooltip-container {
+    position: absolute;
+    z-index: 999;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+  }
+
+  &__tooltip {
+    @extend .farm-tooltip__popup;
+    @extend .farm-tooltip__popup--visible;
+    @extend .farm-tooltip__popup--fluid;
+
+    pointer-events: auto;
+    position: relative;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    
+    width: auto !important;
+    max-width: 400px !important;
+
+    .farm-tooltip__content {
+      white-space: nowrap;
+    }
+
+    .tooltip-data-row {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 4px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .tooltip-text {
+      font-weight: 500;
+      color: #ffffff;
+      white-space: nowrap;
+    }
+  }
+}

package/src/components/GanttChart/GanttChart.stories.js

@@ -0,0 +1,480 @@
+import { withDesign } from 'storybook-addon-designs';
+import GanttChart from './GanttChart.vue';
+
+export default {
+  title: 'Display/GanttChart',
+  component: GanttChart,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      description: {
+        component: `Gantt Chart - Componente para visualização de cronogramas com cálculo automático de datas e legenda<br />
+        selector: <em>farm-gantt-chart</em><br />
+        <span style="color: var(--farm-primary-base);">ready for use</span>
+
+        `,
+      },
+    },
+    viewMode: 'docs',
+  },
+};
+
+export const Primary = () => ({
+  data() {
+    return {
+      ganttData: {
+        groups: [
+          {
+            title: 'Campanha Safrinha 25',
+            bars: [
+              {
+                id: 1,
+                label: 'Vigência da Campanha',
+                start: new Date(2025, 0, 1),
+                end: new Date(2025, 5, 15),
+                color: '#7BC4F7',
+              },
+              {
+                id: 2,
+                label: 'Vigência do Produto Comercial',
+                start: new Date(2025, 0, 15),
+                end: new Date(2025, 4, 15),
+                color: '#8BB455',
+              },
+              {
+                id: 3,
+                label: 'Período de Desembolso',
+                start: new Date(2025, 2, 1),
+                end: new Date(2025, 4, 30),
+                color: '#FFB84D',
+              },
+              {
+                id: 4,
+                label: 'Intervalo Vencimento',
+                start: new Date(2025, 3, 1),
+                end: new Date(2025, 4, 15),
+                color: '#F7857F',
+              },
+            ],
+          },
+          {
+            title: 'Campanha Safra 25',
+            bars: [
+              {
+                id: 5,
+                label: 'Vigência da Campanha',
+                start: new Date(2025, 4, 1),
+                end: new Date(2025, 11, 31),
+                color: '#7BC4F7',
+              },
+              {
+                id: 6,
+                label: 'Vigência do Produto Comercial',
+                start: new Date(2025, 4, 15),
+                end: new Date(2025, 10, 15),
+                color: '#8BB455',
+              },
+              {
+                id: 7,
+                label: 'Período de Desembolso',
+                start: new Date(2025, 5, 1),
+                end: new Date(2025, 7, 30),
+                color: '#FFB84D',
+              },
+              {
+                id: 8,
+                label: 'Intervalo Vencimento',
+                start: new Date(2025, 6, 1),
+                end: new Date(2025, 11, 15),
+                color: '#F7857F',
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  template: `<div style="width: 100%; height: 600px; padding: 20px;">
+    <farm-gantt-chart :data="ganttData" />
+  </div>`,
+});
+
+export const SingleGroup = () => ({
+  data() {
+    return {
+      ganttData: {
+        groups: [
+          {
+            title: 'Projeto de Desenvolvimento de Novos Módulos e Integrações do Sistema',
+            bars: [
+              {
+                id: 1,
+                label: 'Planejamento',
+                start: new Date(2025, 0, 1),
+                end: new Date(2025, 1, 28),
+                color: '#7BC4F7',
+              },
+              {
+                id: 2,
+                label: 'Desenvolvimento',
+                start: new Date(2025, 2, 1),
+                end: new Date(2025, 7, 31),
+                color: '#8BB455',
+              },
+              {
+                id: 3,
+                label: 'Testes',
+                start: new Date(2025, 7, 1),
+                end: new Date(2025, 8, 30),
+                color: '#FFB84D',
+              },
+              {
+                id: 4,
+                label: 'Deploy',
+                start: new Date(2025, 9, 1),
+                end: new Date(2025, 9, 15),
+                color: '#F7857F',
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  template: `<div style="width: 100%; height: 300px; padding: 20px;">
+    <farm-gantt-chart :data="ganttData" />
+  </div>`,
+});
+
+export const MultipleProjects = () => ({
+  data() {
+    return {
+      ganttData: {
+        groups: [
+          {
+            title: 'Frontend',
+            bars: [
+              {
+                id: 'fe-1',
+                label: 'Design UI/UX',
+                start: new Date(2025, 0, 1),
+                end: new Date(2025, 1, 15),
+                color: '#8E44AD',
+              },
+              {
+                id: 'fe-2',
+                label: 'Desenvolvimento',
+                start: new Date(2025, 1, 1),
+                end: new Date(2025, 3, 30),
+                color: '#16A085',
+              },
+              {
+                id: 'fe-3',
+                label: 'Testes Integração',
+                start: new Date(2025, 3, 15),
+                end: new Date(2025, 4, 30),
+                color: '#D35400',
+              },
+            ],
+          },
+          {
+            title: 'Backend',
+            bars: [
+              {
+                id: 'be-1',
+                label: 'Design API',
+                start: new Date(2025, 0, 15),
+                end: new Date(2025, 2, 1),
+                color: '#2980B9',
+              },
+              {
+                id: 'be-2',
+                label: 'Setup Banco',
+                start: new Date(2025, 1, 15),
+                end: new Date(2025, 2, 30),
+                color: '#8E44AD',
+              },
+              {
+                id: 'be-3',
+                label: 'Implementação',
+                start: new Date(2025, 2, 15),
+                end: new Date(2025, 4, 15),
+                color: '#16A085',
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  template: `<div style="width: 100%; height: 400px; padding: 20px;">
+    <farm-gantt-chart :data="ganttData" />
+  </div>`,
+});
+
+export const WithStructuredTooltip = () => ({
+  data() {
+    return {
+      ganttData: {
+        groups: [
+          {
+            title: 'Campanha com Dados Detalhados',
+            bars: [
+              {
+                id: 1,
+                label: 'Vigência da Campanha',
+                start: new Date(2025, 0, 1),
+                end: new Date(2025, 5, 15),
+                color: '#7BC4F7',
+                tooltipData: {
+                  'Taxa': '1,75%',
+                  'Vigência Campanha': '01/01/2025 a 15/06/2025',
+                  'Vigência Produto Comercial': '15/01/2025 a 15/05/2025',
+                  'Desembolso Operação': '01/03/2025 a 30/05/2025',
+                  'Vencimento': '01/04/2025 a 15/05/2025'
+                }
+              },
+              {
+                id: 2,
+                label: 'Produto Comercial',
+                start: new Date(2025, 0, 15),
+                end: new Date(2025, 4, 15),
+                color: '#8BB455',
+                tooltipData: {
+                  'Taxa': '2,25%',
+                  'Vigência': '15/01/2025 a 15/05/2025',
+                  'Status': 'Aprovado'
+                }
+              }
+            ]
+          }
+        ]
+      }
+    };
+  },
+  template: `<div style="width: 100%; height: 400px; padding: 20px;">
+    <farm-gantt-chart :data="ganttData" />
+  </div>`,
+});
+
+export const WithCustomTooltip = () => ({
+  data() {
+    return {
+      ganttData: {
+        groups: [
+          {
+            title: 'Projeto Customizado',
+            bars: [
+              {
+                id: 1,
+                label: 'Fase Complexa',
+                start: new Date(2025, 0, 1),
+                end: new Date(2025, 3, 15),
+                color: '#8BB455',
+                tooltipData: {
+                  'Orçamento': 'R$ 125.000',
+                  'Equipe': '8 pessoas'
+                },
+                gerente: 'João Silva',
+                nivelRisco: 'Médio',
+                progresso: 0.65
+              },
+              {
+                id: 2,
+                label: 'Campanha Marketing',
+                start: new Date(2025, 1, 15),
+                end: new Date(2025, 4, 30),
+                color: '#FFB84D',
+                tooltipData: {
+                  'Investimento': 'R$ 85.000',
+                  'Público-alvo': '25-45 anos'
+                },
+                gerente: 'Maria Santos',
+                nivelRisco: 'Baixo',
+                progresso: 0.45
+              }
+            ]
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    formatarProgresso(taxa) {
+      return `${Math.round(taxa * 100)}%`;
+    }
+  },
+  template: `<div style="width: 100%; height: 400px; padding: 20px;">
+    <farm-gantt-chart :data="ganttData">
+      <template #tooltip="{ bar, tooltipData }">
+        <div style="padding: 12px; color: white;">
+          <div style="display: flex; align-items: center; margin-bottom: 8px;">
+            <strong>{{ bar.label }}</strong>
+            <span style="margin-left: auto; background: rgba(255,255,255,0.2); padding: 2px 6px; border-radius: 10px; font-size: 11px;">
+              ID: {{ bar.id }}
+            </span>
+          </div>
+          
+          <div v-if="tooltipData" style="margin-bottom: 8px;">
+            <div v-for="(value, key) in tooltipData" :key="key" style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+              <span style="opacity: 0.9;">{{ key }}:</span>
+              <span style="font-weight: 600;">{{ value }}</span>
+            </div>
+          </div>
+          
+          <div style="border-top: 1px solid rgba(255,255,255,0.2); padding-top: 8px;">
+            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+              <span style="opacity: 0.9;">Gerente:</span>
+              <span style="font-weight: 600;">{{ bar.gerente }}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+              <span style="opacity: 0.9;">Risco:</span>
+              <span style="font-weight: 600; color: #FFB84D;">{{ bar.nivelRisco }}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between;">
+              <span style="opacity: 0.9;">Progresso:</span>
+              <span style="font-weight: 600; color: #8BB455;">{{ formatarProgresso(bar.progresso) }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </farm-gantt-chart>
+  </div>`,
+});
+
+export const CustomColors = () => ({
+  data() {
+    return {
+      ganttData: {
+        groups: [
+          {
+            title: 'Projeto A',
+            bars: [
+              {
+                id: 1,
+                label: 'Fase 1',
+                start: new Date(2025, 0, 15),
+                end: new Date(2025, 2, 15),
+                color: '#8E44AD',
+              },
+              {
+                id: 2,
+                label: 'Fase 2',
+                start: new Date(2025, 2, 1),
+                end: new Date(2025, 4, 1),
+                color: '#16A085',
+              },
+            ],
+          },
+          {
+            title: 'Projeto B',
+            bars: [
+              {
+                id: 3,
+                label: 'Fase 1',
+                start: new Date(2025, 1, 1),
+                end: new Date(2025, 3, 1),
+                color: '#D35400',
+              },
+              {
+                id: 4,
+                label: 'Fase 2',
+                start: new Date(2025, 3, 15),
+                end: new Date(2025, 5, 15),
+                color: '#2980B9',
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  template: `<div style="width: 100%; height: 300px; padding: 20px;">
+    <farm-gantt-chart :data="ganttData" />
+  </div>`,
+});
+
+export const ColorFallback = () => ({
+  data() {
+    return {
+      ganttData: {
+        groups: [
+          {
+            title: 'Projeto com Cores Faltantes',
+            bars: [
+              {
+                id: 1,
+                label: 'Barra com Cor',
+                start: new Date(2025, 0, 1),
+                end: new Date(2025, 1, 15),
+                color: '#8BB455',
+              },
+              {
+                id: 2,
+                label: 'Barra sem Cor (Fallback)',
+                start: new Date(2025, 1, 1),
+                end: new Date(2025, 2, 15),
+                // Sem propriedade color - deve usar var(--farm-primary-base)
+              },
+              {
+                id: 3,
+                label: 'Outra Barra com Cor',
+                start: new Date(2025, 2, 1),
+                end: new Date(2025, 3, 15),
+                color: '#FFB84D',
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  template: `<div style="width: 100%; height: 300px; padding: 20px;">
+    <h3>Fallback de Cor</h3>
+    <p>A segunda barra não possui cor definida e usa o fallback <code>var(--farm-primary-base)</code></p>
+    <farm-gantt-chart :data="ganttData" />
+  </div>`,
+});
+
+export const InvertedDates = () => ({
+  data() {
+    return {
+      ganttData: {
+        groups: [
+          {
+            title: 'Teste de Datas Invertidas',
+            bars: [
+              {
+                id: 1,
+                label: 'Data Normal (Jan-Mar)',
+                start: new Date(2025, 0, 1),
+                end: new Date(2025, 2, 15),
+                color: '#8BB455',
+              },
+              {
+                id: 2,
+                label: 'Data Invertida → Corrigida (Abr-Abr)',
+                start: new Date(2025, 3, 15), // 15 de abril
+                end: new Date(2025, 2, 15),   // 15 de março (será corrigido para mesmo dia de início: 15 de abril)
+                color: '#F7857F',
+              },
+              {
+                id: 3,
+                label: 'Data Normal de Referência (Mai-Jun)',
+                start: new Date(2025, 4, 1),
+                end: new Date(2025, 5, 15),
+                color: '#7BC4F7',
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  template: `<div style="width: 100%; height: 300px; padding: 20px;">
+    <h3>Correção de Datas Invertidas</h3>
+    <p><strong>Comportamento:</strong> Quando a data de fim é anterior à data de início, ela é automaticamente corrigida para ser igual à data de início.</p>
+    <p><strong>Exemplo:</strong> A segunda barra deveria ir de 15/abril a 15/março, mas aparece apenas em 15/abril (data corrigida).</p>
+    <farm-gantt-chart :data="ganttData" />
+  </div>`,
+});