Fix Gantt chart display issues#111
Conversation
|
|
WalkthroughAs alterações concentram-se na melhoria do cálculo e estilização dos componentes do gráfico de Gantt. O componente GanttBar ajusta a lógica de cálculo de dias adiantados e atrasados, reposiciona e estiliza indicadores visuais, e aprimora o componente TodayLine para aceitar um deslocamento horizontal opcional. O GanttChart recebe apenas ajustes de formatação e estilo. Changes
Sequence Diagram(s)sequenceDiagram
participant Usuário
participant GanttChart
participant GanttBar
participant TodayLine
Usuário->>GanttChart: Renderiza gráfico de Gantt
GanttChart->>GanttBar: Renderiza barras de tarefas
GanttBar->>TodayLine: Renderiza linha de hoje (passando offsetX)
TodayLine-->>GanttBar: Calcula posição da linha de hoje
GanttBar-->>GanttChart: Renderiza barras com indicadores e progresso
Estimated code review effort🎯 2 (Simples) | ⏱️ ~8 minutos Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/Gantt/GanttBar.tsx(1 hunks)src/components/Gantt/GanttChart.tsx(14 hunks)src/components/Gantt/TodayLine.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use tipagem forte e evite
anyem TypeScript
Files:
src/components/Gantt/TodayLine.tsxsrc/components/Gantt/GanttChart.tsxsrc/components/Gantt/GanttBar.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{js,jsx,ts,tsx}: Eviteconsole.logem produção
Organize imports e remova dead code apenas nos arquivos em escopo
Para parâmetros não utilizados, utilize prefixo_(ex:_unusedParam)
Files:
src/components/Gantt/TodayLine.tsxsrc/components/Gantt/GanttChart.tsxsrc/components/Gantt/GanttBar.tsx
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Mantenha uso de hooks React (
useEffect,useState) se já presentes, a menos que autorizado
Files:
src/components/Gantt/TodayLine.tsxsrc/components/Gantt/GanttChart.tsxsrc/components/Gantt/GanttBar.tsx
🧠 Learnings (3)
src/components/Gantt/TodayLine.tsx (2)
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{jsx,tsx} : Mantenha uso de hooks React (useEffect, useState) se já presentes, a menos que autorizado
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{ts,tsx} : Use tipagem forte e evite any em TypeScript
src/components/Gantt/GanttChart.tsx (4)
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{jsx,tsx} : Mantenha uso de hooks React (useEffect, useState) se já presentes, a menos que autorizado
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Para parâmetros não utilizados, utilize prefixo _ (ex: _unusedParam)
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Organize imports e remova dead code apenas nos arquivos em escopo
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{ts,tsx} : Use tipagem forte e evite any em TypeScript
src/components/Gantt/GanttBar.tsx (3)
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{jsx,tsx} : Mantenha uso de hooks React (useEffect, useState) se já presentes, a menos que autorizado
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Organize imports e remova dead code apenas nos arquivos em escopo
Learnt from: CR
PR: vilpessoa/Intake#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-28T15:07:24.036Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Para parâmetros não utilizados, utilize prefixo _ (ex: _unusedParam)
🧬 Code Graph Analysis (1)
src/components/Gantt/TodayLine.tsx (1)
src/components/Gantt/GanttBar.tsx (1)
TodayLine(117-130)
🔇 Additional comments (9)
src/components/Gantt/GanttChart.tsx (5)
1-22: Formatação dos imports melhorada.As alterações de formatação nos imports estão consistentes, convertendo aspas simples para duplas e melhorando a organização. A mudança está alinhada com as práticas de formatação do projeto.
34-40: Formatação dos parâmetros da interface melhorada.A formatação multilinhas dos parâmetros da função
onFiltrosChangemelhora a legibilidade do código.
44-50: Formatação dos parâmetros do componente melhorada.A formatação multilinhas dos parâmetros do componente funcional melhora a legibilidade e consistência.
52-56: Formatação dos hooks melhorada.A formatação do estado
projetosExpandidoscom quebras de linha adequadas melhora a legibilidade.
549-549: Verifique o override deoffsetXem TodayLineO componente
TodayLinedeclaraoffsetXcom valor padrão de320, mas no GanttChart ele está recebendooffsetX={0}. Confirme se esse override é intencional ou se o prop deve ser removido para usar o valor padrão.Ponto de atenção:
- src/components/Gantt/GanttChart.tsx: linha 549
<TodayLine larguraDia={larguraDia} offsetX={0} />- Valor padrão em src/components/Gantt/TodayLine.tsx (linha 11):
offsetX = 320,src/components/Gantt/TodayLine.tsx (2)
4-7: Interface bem definida com tipagem forte.A interface
TodayLinePropsestá bem estruturada com tipagem forte, seguindo as diretrizes do projeto. A propriedadeoffsetXopcional com valor padrão é uma boa prática.
17-17: Z-index alterado pode afetar a visibilidade.A mudança do z-index de um valor maior para
z-0pode fazer com que a linha "hoje" apareça atrás de outros elementos do gráfico, reduzindo sua visibilidade.Verifique se a linha "hoje" permanece visível sobre as barras do Gantt após esta alteração. Se necessário, considere usar um z-index maior como
z-10.src/components/Gantt/GanttBar.tsx (2)
48-54: Cálculo de atraso melhorado.A lógica de cálculo de
lateDaysestá correta, considerando tanto projetos finalizados quanto em andamento que passaram da data planejada.
85-88: Reposicionamento do percentual de progresso.O reposicionamento do percentual para o canto superior direito (
-top-4 right-0) melhora a visibilidade e evita sobreposição com o conteúdo da barra.
| const inicioPlanejado = dayjs(projeto.dataInicioPlanjada); | ||
| const inicioReal = projeto.dataInicioReal | ||
| ? dayjs(projeto.dataInicioReal) | ||
| : inicioPlanejado; | ||
| const earlyDays = Math.max(0, inicioPlanejado.diff(inicioReal, "day")); |
There was a problem hiding this comment.
Lógica de cálculo de antecipação pode estar incorreta.
A lógica atual usa inicioPlanejado como fallback quando dataInicioReal está ausente, mas isso sempre resultará em earlyDays = 0. Se o objetivo é calcular antecipação, a lógica deveria comparar quando o projeto realmente começou versus quando estava planejado para começar.
- const inicioReal = projeto.dataInicioReal
- ? dayjs(projeto.dataInicioReal)
- : inicioPlanejado;
- const earlyDays = Math.max(0, inicioPlanejado.diff(inicioReal, "day"));
+ const earlyDays = projeto.dataInicioReal
+ ? Math.max(0, inicioPlanejado.diff(dayjs(projeto.dataInicioReal), "day"))
+ : 0;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const inicioPlanejado = dayjs(projeto.dataInicioPlanjada); | |
| const inicioReal = projeto.dataInicioReal | |
| ? dayjs(projeto.dataInicioReal) | |
| : inicioPlanejado; | |
| const earlyDays = Math.max(0, inicioPlanejado.diff(inicioReal, "day")); | |
| const inicioPlanejado = dayjs(projeto.dataInicioPlanjada); | |
| const earlyDays = projeto.dataInicioReal | |
| ? Math.max(0, inicioPlanejado.diff(dayjs(projeto.dataInicioReal), "day")) | |
| : 0; |
🤖 Prompt for AI Agents
In src/components/Gantt/GanttBar.tsx around lines 42 to 46, the calculation for
earlyDays uses inicioPlanejado as a fallback for inicioReal, which causes
earlyDays to always be zero when dataInicioReal is missing. To fix this, adjust
the logic to handle the absence of dataInicioReal appropriately, such as
treating missing inicioReal as no early start or using a different fallback,
ensuring the diff calculation correctly reflects the project's actual start date
versus the planned start date.
| interface TodayLineProps { | ||
| larguraDia: number; | ||
| offsetX?: number; | ||
| } | ||
|
|
||
| export const TodayLine: React.FC<TodayLineProps> = ({ | ||
| larguraDia, | ||
| offsetX = 320, | ||
| }) => { | ||
| const hojeIndex = dayjs().date() - 1; | ||
|
|
||
| return ( | ||
| <div | ||
| className="absolute top-0 bottom-0 w-[2px] bg-blue-500 z-0 pointer-events-none md:block hidden" | ||
| style={{ left: `${offsetX + hojeIndex * larguraDia}px` }} | ||
| data-export="false" | ||
| /> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Duplicação de código: componente TodayLine.
O componente TodayLine está duplicado neste arquivo e também existe em src/components/Gantt/TodayLine.tsx. Isso viola o princípio DRY e pode causar inconsistências.
Remova a definição duplicada e importe o componente do arquivo dedicado:
-interface TodayLineProps {
- larguraDia: number;
- offsetX?: number;
-}
-
-export const TodayLine: React.FC<TodayLineProps> = ({
- larguraDia,
- offsetX = 320,
-}) => {
- const hojeIndex = dayjs().date() - 1;
-
- return (
- <div
- className="absolute top-0 bottom-0 w-[2px] bg-blue-500 z-0 pointer-events-none md:block hidden"
- style={{ left: `${offsetX + hojeIndex * larguraDia}px` }}
- data-export="false"
- />
- );
-};
+import { TodayLine } from "./TodayLine";🤖 Prompt for AI Agents
In src/components/Gantt/GanttBar.tsx around lines 112 to 130, the TodayLine
component is duplicated as it also exists in src/components/Gantt/TodayLine.tsx.
To fix this, remove the TodayLine component definition from GanttBar.tsx and
instead import TodayLine from the dedicated file
src/components/Gantt/TodayLine.tsx. This will eliminate duplication and ensure a
single source of truth for the component.
| larguraDia, | ||
| offsetX = 320, | ||
| }) => { | ||
| const hojeIndex = dayjs().date() - 1; |
There was a problem hiding this comment.
Verificar lógica de cálculo do dia atual.
O cálculo dayjs().date() - 1 pode causar problemas no primeiro dia do mês (retornaria -1) e não considera adequadamente a navegação entre meses no contexto do Gantt chart.
- const hojeIndex = dayjs().date() - 1;
+ const hojeIndex = Math.max(0, dayjs().date() - 1);Ou considere uma lógica mais robusta que leve em conta o período visível do gráfico de Gantt.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const hojeIndex = dayjs().date() - 1; | |
| const hojeIndex = Math.max(0, dayjs().date() - 1); |
🤖 Prompt for AI Agents
In src/components/Gantt/TodayLine.tsx at line 13, the calculation of hojeIndex
using dayjs().date() - 1 can result in -1 on the first day of the month and does
not account for the visible date range of the Gantt chart. Update the logic to
calculate hojeIndex based on the current date's position within the Gantt
chart's visible date range, ensuring it handles month transitions correctly and
never produces negative indices.
1 participant
Summary
Testing
npx prettier --write src/components/Gantt/TodayLine.tsx src/components/Gantt/GanttBar.tsx src/components/Gantt/GanttChart.tsxnpm run lint(fails: various unused vars)npm test(fails: missing Supabase env vars)https://chatgpt.com/codex/tasks/task_e_6887897e9284832397f0abb9912aa3b4
Summary by CodeRabbit