From 7c5e943ab01fc69635fc4a23ea8571d23e226a5f Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Tue, 19 Nov 2024 21:08:44 +0500 Subject: [PATCH 01/22] chart changes --- example/package.json | 5 +- example/src/App2.tsx | 128 ++++++++++++++++++ example/src/index.css | 14 +- example/src/index.tsx | 2 +- package-lock.json | 4 +- .../task-item/project/project.module.css | 4 +- 6 files changed, 146 insertions(+), 11 deletions(-) create mode 100644 example/src/App2.tsx diff --git a/example/package.json b/example/package.json index 93d957c00..635d38731 100644 --- a/example/package.json +++ b/example/package.json @@ -23,8 +23,7 @@ "react-dom": "file:../node_modules/react-dom", "react-scripts": "file:../node_modules/react-scripts" }, - "devDependencies": { - }, + "devDependencies": {}, "browserslist": { "production": [ ">0.2%", @@ -37,4 +36,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/example/src/App2.tsx b/example/src/App2.tsx new file mode 100644 index 000000000..61fe42366 --- /dev/null +++ b/example/src/App2.tsx @@ -0,0 +1,128 @@ +import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react'; +import "gantt-task-react/dist/index.css"; + + +const App = () => { + + let tasks = [ + { + start: new Date(2023, 12, 1), + end: new Date(2024, 10, 30), + name: 'External Wall Insulation (EWI)', + id: '0', + type: 'project', + progress: 20, + isDisabled: true + }, + { + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Survey', + id: '1', + type: 'task', + isDisabled: true + }, + { + start: new Date(2024, 3, 1), + end: new Date(2024, 8, 30), + name: 'Measure Wall Dimension', + id: '2', + type: 'task', + isDisabled: true, + dependencies: ['1'] + }, + { + start: new Date(2024, 5, 1), + end: new Date(2024, 10, 30), + name: 'Energy Usage Analysis', + id: '3', + type: 'task', + dependencies: ['1'], + isDisabled: true + }, + { + start: new Date(2024, 7, 1), + end: new Date(2024, 10, 30), + name: 'Energy Usage Analysis', + id: '4', + type: 'task', + dependencies: ['3'], + isDisabled: true + }, + { + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '5', + type: 'task', + isDisabled: true, + }, + { + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '6', + type: 'task', + isDisabled: true, + }, + { + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '7', + type: 'task', + isDisabled: true, + }, + { + start: new Date(2024, 5, 1), + end: new Date(2025, 5, 30), + name: 'Internal Wall Insulation (IWI)', + id: '8', + type: 'project', + progress: 20, + isDisabled: true, + styles: { + progressColor: '#FFD700', + progressSelectedColor: '#FFD700', + backgroundSelectedColor: "#242424", + backgroundColor: '#242424' + }, + }, + { + start: new Date(2024, 9, 1), + end: new Date(2025, 5, 30), + name: 'Loft Insulation', + id: '9', + type: 'project', + progress: 20, + isDisabled: true, + styles: { + progressColor: '#FFD700', + progressSelectedColor: '#FFD700', + backgroundSelectedColor: "#242424", + backgroundColor: '#242424' + }, + }, + ]; + + return +} + +export default App; \ No newline at end of file diff --git a/example/src/index.css b/example/src/index.css index 9fd1ea03d..98e01a17f 100644 --- a/example/src/index.css +++ b/example/src/index.css @@ -1,6 +1,7 @@ .Wrapper { margin-bottom: 2rem; } + .ViewContainer { list-style: none; -ms-box-orient: horizontal; @@ -21,6 +22,7 @@ font-size: 14px; text-align: center; } + .Switch { margin: 4px 15px; font-size: 14px; @@ -29,6 +31,7 @@ justify-content: center; align-items: center; } + .Switch_Toggle { position: relative; display: inline-block; @@ -67,16 +70,21 @@ transition: 0.4s; } -input:checked + .Slider { +input:checked+.Slider { background-color: #2196f3; } -input:focus + .Slider { +input:focus+.Slider { box-shadow: 0 0 1px #2196f3; } -input:checked + .Slider:before { +input:checked+.Slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } + + +polygon { + display: none; +} \ No newline at end of file diff --git a/example/src/index.tsx b/example/src/index.tsx index 9693f8ad5..a2df5a38c 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -2,7 +2,7 @@ import "./index.css"; import React from "react"; import { createRoot } from "react-dom/client"; -import App from "./App"; +import App from "./App2"; const container = document.getElementById("root"); const root = createRoot(container!); diff --git a/package-lock.json b/package-lock.json index aeca7dc81..46dbdfe5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gantt-task-react", - "version": "0.3.8", + "version": "0.3.9", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "gantt-task-react", - "version": "0.3.8", + "version": "0.3.9", "license": "MIT", "devDependencies": { "@testing-library/jest-dom": "^5.16.4", diff --git a/src/components/task-item/project/project.module.css b/src/components/task-item/project/project.module.css index 4fa67c2fa..b92542306 100644 --- a/src/components/task-item/project/project.module.css +++ b/src/components/task-item/project/project.module.css @@ -5,9 +5,9 @@ .projectBackground { user-select: none; - opacity: 0.6; + /* opacity: 0.6; */ } .projectTop { user-select: none; -} +} \ No newline at end of file From a82d912f45c83c172359fd1521987dc696232242 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Tue, 19 Nov 2024 22:02:08 +0500 Subject: [PATCH 02/22] color changes --- src/components/calendar/calendar.module.css | 12 ++++++------ src/components/calendar/calendar.tsx | 4 ++-- src/components/gantt/gantt.tsx | 2 +- src/components/grid/grid.module.css | 10 +++++----- src/components/task-item/task-item.tsx | 8 +++++--- src/components/task-item/task-list.module.css | 4 ++-- 6 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/calendar/calendar.module.css b/src/components/calendar/calendar.module.css index 1be99d3f6..e089b9cd3 100644 --- a/src/components/calendar/calendar.module.css +++ b/src/components/calendar/calendar.module.css @@ -1,6 +1,6 @@ .calendarBottomText { text-anchor: middle; - fill: #333; + fill: white; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -10,12 +10,12 @@ } .calendarTopTick { - stroke: #e6e4e4; + stroke: #242424; } .calendarTopText { text-anchor: middle; - fill: #555; + fill: white; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -25,7 +25,7 @@ } .calendarHeader { - fill: #ffffff; - stroke: #e0e0e0; + fill: #242424; + stroke: #242424; stroke-width: 1.4; -} +} \ No newline at end of file diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index a5860db52..fbd3a1877 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -251,8 +251,8 @@ export const Calendar: React.FC = ({ xText={ columnWidth * (i + 1) - getDaysInMonth(date.getMonth(), date.getFullYear()) * - columnWidth * - 0.5 + columnWidth * + 0.5 } yText={topDefaultHeight * 0.9} /> diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index b90483f3d..1b5101e42 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -53,7 +53,7 @@ export const Gantt: React.FunctionComponent = ({ fontFamily = "Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue", fontSize = "14px", arrowIndent = 20, - todayColor = "rgba(252, 248, 227, 0.5)", + todayColor = "rgba(11, 11, 11, 0)", viewDate, TooltipContent = StandardTooltipContent, TaskListHeader = TaskListHeaderDefault, diff --git a/src/components/grid/grid.module.css b/src/components/grid/grid.module.css index 964303f22..fb7fdb93f 100644 --- a/src/components/grid/grid.module.css +++ b/src/components/grid/grid.module.css @@ -1,15 +1,15 @@ .gridRow { - fill: #fff; + fill: rgba(11, 11, 11, 0.8); } .gridRow:nth-child(even) { - fill: #f5f5f5; + fill: rgba(11, 11, 11, 0.8); } .gridRowLine { - stroke: #ebeff2; + stroke: rgba(11, 11, 11, 0.8); } .gridTick { - stroke: #e6e4e4; -} + stroke: rgba(11, 11, 11, 0.8); +} \ No newline at end of file diff --git a/src/components/task-item/task-item.tsx b/src/components/task-item/task-item.tsx index cf0628498..303497c8b 100644 --- a/src/components/task-item/task-item.tsx +++ b/src/components/task-item/task-item.tsx @@ -63,11 +63,13 @@ export const TaskItem: React.FC = props => { }, [textRef, task]); const getX = () => { - const width = task.x2 - task.x1; - const hasChild = task.barChildren.length > 0; + const hasChild = task.barChildren.length > 0; // Check for children + const width = task.x2 - task.x1; // Width of the bar + if (isTextInside) { - return task.x1 + width * 0.5; + return task.x1 + 10; // Align text to the starting point of the bar } + if (rtl && textRef.current) { return ( task.x1 - diff --git a/src/components/task-item/task-list.module.css b/src/components/task-item/task-list.module.css index 2eec4204a..2d406346e 100644 --- a/src/components/task-item/task-list.module.css +++ b/src/components/task-item/task-list.module.css @@ -1,6 +1,6 @@ .barLabel { fill: #fff; - text-anchor: middle; + text-anchor: start; font-weight: lighter; dominant-baseline: central; -webkit-touch-callout: none; @@ -20,4 +20,4 @@ -ms-user-select: none; user-select: none; pointer-events: none; -} +} \ No newline at end of file From f4eba058dc21ebaf26435000a8fd01c69c977257 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Wed, 20 Nov 2024 14:46:15 +0500 Subject: [PATCH 03/22] progress design changes --- example/src/App2.tsx | 2 +- src/components/task-item/project/project.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 61fe42366..06ffaac9e 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -1,4 +1,4 @@ -import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react'; +import { Gantt } from 'gantt-task-react'; import "gantt-task-react/dist/index.css"; diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index 5a47ba90b..8f0632957 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -35,16 +35,16 @@ export const Project: React.FC = ({ task, isSelected }) => { x={task.x1} width={projectWith} y={task.y} - height={task.height} + height={task.height + 10} rx={task.barCornerRadius} ry={task.barCornerRadius} className={styles.projectBackground} /> Date: Wed, 20 Nov 2024 15:13:01 +0500 Subject: [PATCH 04/22] progress design --- src/components/task-item/project/project.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index 8f0632957..05952e7f9 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -49,6 +49,15 @@ export const Project: React.FC = ({ task, isSelected }) => { rx={task.barCornerRadius} fill={processColor} /> + Date: Wed, 20 Nov 2024 15:32:48 +0500 Subject: [PATCH 05/22] date added to node --- src/components/task-item/task-item.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/task-item/task-item.tsx b/src/components/task-item/task-item.tsx index 303497c8b..b6431eb70 100644 --- a/src/components/task-item/task-item.tsx +++ b/src/components/task-item/task-item.tsx @@ -122,6 +122,17 @@ export const TaskItem: React.FC = props => { > {task.name} + + {task.start.toLocaleString("en-US", { month: "short" }) + ' ' + task.start.getDate()} - {task.end.toLocaleString("en-US", { month: "short" }) + ' ' + task.end.getDate()} + ); }; From f9641bace74b3ce28382a1f08b0b60de7a3de303 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Wed, 20 Nov 2024 15:36:02 +0500 Subject: [PATCH 06/22] fix task data --- example/src/App2.tsx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 06ffaac9e..16507d5ad 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -81,12 +81,6 @@ const App = () => { type: 'project', progress: 20, isDisabled: true, - styles: { - progressColor: '#FFD700', - progressSelectedColor: '#FFD700', - backgroundSelectedColor: "#242424", - backgroundColor: '#242424' - }, }, { start: new Date(2024, 9, 1), @@ -95,13 +89,7 @@ const App = () => { id: '9', type: 'project', progress: 20, - isDisabled: true, - styles: { - progressColor: '#FFD700', - progressSelectedColor: '#FFD700', - backgroundSelectedColor: "#242424", - backgroundColor: '#242424' - }, + isDisabled: true }, ]; From 7f9bf26cbe9c2144fa70cd08a77f0d2f5b2ef976 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Thu, 21 Nov 2024 19:58:36 +0500 Subject: [PATCH 07/22] added svg icon --- src/components/task-item/task-item.tsx | 10 ++++++++-- src/components/task-item/task-list.module.css | 8 ++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/task-item/task-item.tsx b/src/components/task-item/task-item.tsx index b6431eb70..16aa1f67c 100644 --- a/src/components/task-item/task-item.tsx +++ b/src/components/task-item/task-item.tsx @@ -35,6 +35,7 @@ export const TaskItem: React.FC = props => { } = { ...props, }; + console.log(task); const textRef = useRef(null); const [taskItem, setTaskItem] = useState(
); const [isTextInside, setIsTextInside] = useState(true); @@ -110,8 +111,13 @@ export const TaskItem: React.FC = props => { }} > {taskItem} - + } + = props => { > {task.start.toLocaleString("en-US", { month: "short" }) + ' ' + task.start.getDate()} - {task.end.toLocaleString("en-US", { month: "short" }) + ' ' + task.end.getDate()} - + ); }; diff --git a/src/components/task-item/task-list.module.css b/src/components/task-item/task-list.module.css index 2d406346e..237c06f25 100644 --- a/src/components/task-item/task-list.module.css +++ b/src/components/task-item/task-list.module.css @@ -20,4 +20,12 @@ -ms-user-select: none; user-select: none; pointer-events: none; +} + +.icon { + content: "ABC"; + display: inline-block; + width: 50px; + /* Adjust size as needed */ + height: 50px; } \ No newline at end of file From e8b97b1dfefe5abf615395dcf300a88bb10570c6 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Thu, 21 Nov 2024 21:22:28 +0500 Subject: [PATCH 08/22] calender header fixes --- src/components/calendar/top-part-of-calendar.tsx | 2 +- src/components/gantt/gantt.tsx | 2 +- src/components/gantt/task-gantt-content.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/calendar/top-part-of-calendar.tsx b/src/components/calendar/top-part-of-calendar.tsx index d24f376a3..95467a9fa 100644 --- a/src/components/calendar/top-part-of-calendar.tsx +++ b/src/components/calendar/top-part-of-calendar.tsx @@ -34,7 +34,7 @@ export const TopPartOfCalendar: React.FC = ({ x={xText} className={styles.calendarTopText} > - {value} + {/* {value} */} ); diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 1b5101e42..f219209c0 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -91,7 +91,7 @@ export const Gantt: React.FunctionComponent = ({ const [selectedTask, setSelectedTask] = useState(); const [failedTask, setFailedTask] = useState(null); - const svgWidth = dateSetup.dates.length * columnWidth; + const svgWidth = 13 * columnWidth; const ganttFullHeight = barTasks.length * rowHeight; const [scrollY, setScrollY] = useState(0); diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx index 33326df92..a98ef585e 100644 --- a/src/components/gantt/task-gantt-content.tsx +++ b/src/components/gantt/task-gantt-content.tsx @@ -64,9 +64,9 @@ export const TaskGanttContent: React.FC = ({ // create xStep useEffect(() => { const dateDelta = - dates[1].getTime() - + // dates[1].getTime() - dates[0].getTime() - - dates[1].getTimezoneOffset() * 60 * 1000 + + // dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000; const newXStep = (timeStep * columnWidth) / dateDelta; setXStep(newXStep); From ba2d2316cbb94685deba52c6a2e65ceb2c13c33e Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Fri, 22 Nov 2024 21:04:49 +0500 Subject: [PATCH 09/22] fix: type issues --- example/src/App2.tsx | 1 + example/tsconfig.json | 3 +-- src/types/public-types.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 16507d5ad..72b30cce1 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Gantt } from 'gantt-task-react'; import "gantt-task-react/dist/index.css"; diff --git a/example/tsconfig.json b/example/tsconfig.json index f87431a99..351816fb6 100644 --- a/example/tsconfig.json +++ b/example/tsconfig.json @@ -15,7 +15,6 @@ "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true, - "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true, "noUnusedParameters": true, "allowSyntheticDefaultImports": true, @@ -36,4 +35,4 @@ "node_modules", "build" ] -} +} \ No newline at end of file diff --git a/src/types/public-types.ts b/src/types/public-types.ts index cc44ff17c..401f65a0e 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -12,14 +12,14 @@ export enum ViewMode { export type TaskType = "task" | "milestone" | "project"; export interface Task { id: string; - type: TaskType; + type: string; name: string; start: Date; end: Date; /** * From 0 to 100 */ - progress: number; + progress?: number; styles?: { backgroundColor?: string; backgroundSelectedColor?: string; From c3b5b246385238dcc645c54a51c2e716378c3f21 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Mon, 25 Nov 2024 17:04:54 +0500 Subject: [PATCH 10/22] fix: minor style fixes --- example/src/App2.tsx | 33 ++++++++++++------- src/components/calendar/calendar.module.css | 6 ++-- src/components/calendar/calendar.tsx | 4 +-- src/components/gantt/gantt.module.css | 3 +- src/components/gantt/gantt.tsx | 4 +-- src/components/task-item/bar/bar.module.css | 5 +-- src/components/task-item/bar/bar.tsx | 2 +- .../task-item/project/project.module.css | 4 +-- src/components/task-item/project/project.tsx | 8 ++--- src/components/task-item/task-item.tsx | 17 ++++++---- src/helpers/date-helper.ts | 4 +-- src/types/date-setup.ts | 2 +- src/types/public-types.ts | 2 +- 13 files changed, 54 insertions(+), 40 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 72b30cce1..7842faa76 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -61,7 +61,7 @@ const App = () => { { start: new Date(2023, 12, 1), end: new Date(2024, 5, 30), - name: 'Energy Usage Analysis', + name: 'Variation', id: '6', type: 'task', isDisabled: true, @@ -74,11 +74,19 @@ const App = () => { type: 'task', isDisabled: true, }, + { + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '8', + type: 'task', + isDisabled: true, + }, { start: new Date(2024, 5, 1), end: new Date(2025, 5, 30), name: 'Internal Wall Insulation (IWI)', - id: '8', + id: '9', type: 'project', progress: 20, isDisabled: true, @@ -87,7 +95,7 @@ const App = () => { start: new Date(2024, 9, 1), end: new Date(2025, 5, 30), name: 'Loft Insulation', - id: '9', + id: '10', type: 'project', progress: 20, isDisabled: true @@ -97,18 +105,19 @@ const App = () => { return diff --git a/src/components/calendar/calendar.module.css b/src/components/calendar/calendar.module.css index e089b9cd3..01bff6a2b 100644 --- a/src/components/calendar/calendar.module.css +++ b/src/components/calendar/calendar.module.css @@ -10,7 +10,7 @@ } .calendarTopTick { - stroke: #242424; + stroke: rgba(37, 36, 36, 1); } .calendarTopText { @@ -25,7 +25,7 @@ } .calendarHeader { - fill: #242424; - stroke: #242424; + fill: rgba(37, 36, 36, 1); + stroke: rgba(37, 36, 36, 1); stroke-width: 1.4; } \ No newline at end of file diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index fbd3a1877..1fe9e2122 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -14,7 +14,7 @@ import styles from "./calendar.module.css"; export type CalendarProps = { dateSetup: DateSetup; locale: string; - viewMode: ViewMode; + viewMode: string; rtl: boolean; headerHeight: number; columnWidth: number; @@ -135,7 +135,7 @@ export const Calendar: React.FC = ({ x={columnWidth * i + columnWidth * 0.5} className={styles.calendarBottomText} > - {bottomValue} + {bottomValue.substring(0, 3)} ); if ( diff --git a/src/components/gantt/gantt.module.css b/src/components/gantt/gantt.module.css index 8169a19ce..78a9feb0d 100644 --- a/src/components/gantt/gantt.module.css +++ b/src/components/gantt/gantt.module.css @@ -18,4 +18,5 @@ list-style: none; outline: none; position: relative; -} + font-weight: 500; +} \ No newline at end of file diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index f219209c0..02b362acf 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -5,7 +5,7 @@ import React, { useEffect, useMemo, } from "react"; -import { ViewMode, GanttProps, Task } from "../../types/public-types"; +import { GanttProps, Task } from "../../types/public-types"; import { GridProps } from "../grid/grid"; import { ganttDateRange, seedDates } from "../../helpers/date-helper"; import { CalendarProps } from "../calendar/calendar"; @@ -31,7 +31,7 @@ export const Gantt: React.FunctionComponent = ({ listCellWidth = "155px", rowHeight = 50, ganttHeight = 0, - viewMode = ViewMode.Day, + viewMode = "Day", preStepsCount = 1, locale = "en-GB", barFill = 60, diff --git a/src/components/task-item/bar/bar.module.css b/src/components/task-item/bar/bar.module.css index 7ff4926f8..a054e2d4f 100644 --- a/src/components/task-item/bar/bar.module.css +++ b/src/components/task-item/bar/bar.module.css @@ -1,6 +1,7 @@ .barWrapper { cursor: pointer; - outline: none; + outline: 1px solid var(--colour-brand-tints-transparent-10, rgba(254, 254, 254, 0.1)); + border-radius: 10px; } .barWrapper:hover .barHandle { @@ -18,4 +19,4 @@ .barBackground { user-select: none; stroke-width: 0; -} +} \ No newline at end of file diff --git a/src/components/task-item/bar/bar.tsx b/src/components/task-item/bar/bar.tsx index 7e6ce5b96..efa464f91 100644 --- a/src/components/task-item/bar/bar.tsx +++ b/src/components/task-item/bar/bar.tsx @@ -26,7 +26,7 @@ export const Bar: React.FC = ({ x={task.x1} y={task.y} width={task.x2 - task.x1} - height={task.height} + height={task.height + 10} progressX={task.progressX} progressWidth={task.progressWidth} barCornerRadius={task.barCornerRadius} diff --git a/src/components/task-item/project/project.module.css b/src/components/task-item/project/project.module.css index b92542306..46c92db2c 100644 --- a/src/components/task-item/project/project.module.css +++ b/src/components/task-item/project/project.module.css @@ -1,11 +1,11 @@ .projectWrapper { cursor: pointer; - outline: none; + outline: 1px solid var(--colour-brand-tints-transparent-10, rgba(254, 254, 254, 0.1)); + border-radius: 10px; } .projectBackground { user-select: none; - /* opacity: 0.6; */ } .projectTop { diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index 05952e7f9..aeb630145 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -35,7 +35,7 @@ export const Project: React.FC = ({ task, isSelected }) => { x={task.x1} width={projectWith} y={task.y} - height={task.height + 10} + height={task.height + 15} rx={task.barCornerRadius} ry={task.barCornerRadius} className={styles.projectBackground} @@ -43,7 +43,7 @@ export const Project: React.FC = ({ task, isSelected }) => { = ({ task, isSelected }) => { = props => { }} > {taskItem} - {task.typeInternal === 'task' && - } + {task.typeInternal === 'task' && + + + } = props => { {task.start.toLocaleString("en-US", { month: "short" }) + ' ' + task.start.getDate()} - {task.end.toLocaleString("en-US", { month: "short" }) + ' ' + task.end.getDate()} diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts index 1b2a0f5c4..23a713725 100644 --- a/src/helpers/date-helper.ts +++ b/src/helpers/date-helper.ts @@ -71,7 +71,7 @@ export const startOfDate = (date: Date, scale: DateHelperScales) => { export const ganttDateRange = ( tasks: Task[], - viewMode: ViewMode, + viewMode: string, preStepsCount: number ) => { let newStartDate: Date = tasks[0].start; @@ -144,7 +144,7 @@ export const ganttDateRange = ( export const seedDates = ( startDate: Date, endDate: Date, - viewMode: ViewMode + viewMode: string ) => { let currentDate: Date = new Date(startDate); const dates: Date[] = [currentDate]; diff --git a/src/types/date-setup.ts b/src/types/date-setup.ts index 81115ece0..dd7a4a9c2 100644 --- a/src/types/date-setup.ts +++ b/src/types/date-setup.ts @@ -2,5 +2,5 @@ import { ViewMode } from "./public-types"; export interface DateSetup { dates: Date[]; - viewMode: ViewMode; + viewMode: string; } diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 401f65a0e..df59d11ad 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -75,7 +75,7 @@ export interface EventOption { } export interface DisplayOption { - viewMode?: ViewMode; + viewMode?: string; viewDate?: Date; preStepsCount?: number; /** From c6857d3b2f4a3c65e0d04dbcc586a6f77a4b83b4 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Mon, 25 Nov 2024 18:29:46 +0500 Subject: [PATCH 11/22] fix: types and designs --- example/src/App2.tsx | 25 +++++++++++++++++++++---- src/components/other/arrow.tsx | 2 +- src/components/task-item/task-item.tsx | 5 +++-- src/types/bar-task.ts | 1 + src/types/date-setup.ts | 2 +- src/types/public-types.ts | 1 + 6 files changed, 28 insertions(+), 8 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 7842faa76..4ea51d13a 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -21,7 +21,8 @@ const App = () => { name: 'Survey', id: '1', type: 'task', - isDisabled: true + isDisabled: true, + icon: }, { start: new Date(2024, 3, 1), @@ -30,7 +31,8 @@ const App = () => { id: '2', type: 'task', isDisabled: true, - dependencies: ['1'] + dependencies: ['1'], + icon: }, { start: new Date(2024, 5, 1), @@ -39,7 +41,8 @@ const App = () => { id: '3', type: 'task', dependencies: ['1'], - isDisabled: true + isDisabled: true, + icon: }, { start: new Date(2024, 7, 1), @@ -48,7 +51,8 @@ const App = () => { id: '4', type: 'task', dependencies: ['3'], - isDisabled: true + isDisabled: true, + icon: }, { start: new Date(2023, 12, 1), @@ -57,6 +61,7 @@ const App = () => { id: '5', type: 'task', isDisabled: true, + icon: }, { start: new Date(2023, 12, 1), @@ -65,6 +70,16 @@ const App = () => { id: '6', type: 'task', isDisabled: true, + icon: + + + + + + + + + }, { start: new Date(2023, 12, 1), @@ -73,6 +88,7 @@ const App = () => { id: '7', type: 'task', isDisabled: true, + icon: }, { start: new Date(2023, 12, 1), @@ -81,6 +97,7 @@ const App = () => { id: '8', type: 'task', isDisabled: true, + icon: }, { start: new Date(2024, 5, 1), diff --git a/src/components/other/arrow.tsx b/src/components/other/arrow.tsx index 52e8f28b4..b625540d9 100644 --- a/src/components/other/arrow.tsx +++ b/src/components/other/arrow.tsx @@ -62,7 +62,7 @@ const drownPathAndTriangle = ( ? arrowIndent : taskTo.x1 - taskFrom.x2 - arrowIndent; - const path = `M ${taskFrom.x2} ${taskFrom.y + taskHeight / 2} + const path = `M ${taskFrom.x2} ${(taskFrom.y + taskHeight / 2) + 5} h ${arrowIndent} v ${(indexCompare * rowHeight) / 2} ${taskFromHorizontalOffsetValue} diff --git a/src/components/task-item/task-item.tsx b/src/components/task-item/task-item.tsx index 17892c837..fdacd40aa 100644 --- a/src/components/task-item/task-item.tsx +++ b/src/components/task-item/task-item.tsx @@ -35,7 +35,8 @@ export const TaskItem: React.FC = props => { } = { ...props, }; - console.log(task); + const Icon = task?.icon; + console.log(Icon); const textRef = useRef(null); const [taskItem, setTaskItem] = useState(
); const [isTextInside, setIsTextInside] = useState(true); @@ -113,7 +114,7 @@ export const TaskItem: React.FC = props => { {taskItem} {task.typeInternal === 'task' && - + {Icon} } Date: Mon, 25 Nov 2024 18:38:19 +0500 Subject: [PATCH 12/22] minor fix --- example/src/App2.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 4ea51d13a..ab1487dd9 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -70,7 +70,7 @@ const App = () => { id: '6', type: 'task', isDisabled: true, - icon: + icon: <> @@ -79,7 +79,7 @@ const App = () => { - + }, { start: new Date(2023, 12, 1), From 1439560ef3a48ffd91dbaeea976857e84668822c Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Mon, 25 Nov 2024 18:50:50 +0500 Subject: [PATCH 13/22] added proper svg's for icon --- example/src/App2.tsx | 28 +++++++++++++++++++------- src/components/task-item/task-item.tsx | 2 +- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index ab1487dd9..47bd535ef 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -22,7 +22,9 @@ const App = () => { id: '1', type: 'task', isDisabled: true, - icon: + icon: + + }, { start: new Date(2024, 3, 1), @@ -32,7 +34,9 @@ const App = () => { type: 'task', isDisabled: true, dependencies: ['1'], - icon: + icon: + + }, { start: new Date(2024, 5, 1), @@ -42,7 +46,9 @@ const App = () => { type: 'task', dependencies: ['1'], isDisabled: true, - icon: + icon: + + }, { start: new Date(2024, 7, 1), @@ -52,7 +58,9 @@ const App = () => { type: 'task', dependencies: ['3'], isDisabled: true, - icon: + icon: + + }, { start: new Date(2023, 12, 1), @@ -61,7 +69,9 @@ const App = () => { id: '5', type: 'task', isDisabled: true, - icon: + icon: + + }, { start: new Date(2023, 12, 1), @@ -88,7 +98,9 @@ const App = () => { id: '7', type: 'task', isDisabled: true, - icon: + icon: + + }, { start: new Date(2023, 12, 1), @@ -97,7 +109,9 @@ const App = () => { id: '8', type: 'task', isDisabled: true, - icon: + icon: + + }, { start: new Date(2024, 5, 1), diff --git a/src/components/task-item/task-item.tsx b/src/components/task-item/task-item.tsx index fdacd40aa..72e2a76a2 100644 --- a/src/components/task-item/task-item.tsx +++ b/src/components/task-item/task-item.tsx @@ -113,7 +113,7 @@ export const TaskItem: React.FC = props => { > {taskItem} {task.typeInternal === 'task' && + y={task.typeInternal === 'task' ? task.y + 15 : task.y} width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"> {Icon} } From e4cec27229e710eb09cd8b7b4f21eca71c5922e5 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Wed, 27 Nov 2024 16:58:32 +0500 Subject: [PATCH 14/22] calender fixes --- src/components/grid/grid-body.tsx | 22 +++++++++++----------- src/components/grid/grid.module.css | 8 ++++---- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index 18e6f2b00..65b16645d 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -40,20 +40,20 @@ export const GridBody: React.FC = ({ x="0" y={y} width={svgWidth} - height={rowHeight} + height={rowHeight + 1} className={styles.gridRow} /> ); - rowLines.push( - - ); + // rowLines.push( + // + // ); y += rowHeight; } diff --git a/src/components/grid/grid.module.css b/src/components/grid/grid.module.css index fb7fdb93f..a024e9e10 100644 --- a/src/components/grid/grid.module.css +++ b/src/components/grid/grid.module.css @@ -1,15 +1,15 @@ .gridRow { - fill: rgba(11, 11, 11, 0.8); + fill: rgba(20, 20, 20, 1); } .gridRow:nth-child(even) { - fill: rgba(11, 11, 11, 0.8); + fill: rgba(20, 20, 20, 1); } .gridRowLine { - stroke: rgba(11, 11, 11, 0.8); + stroke: rgba(254, 254, 254, 0.1); } .gridTick { - stroke: rgba(11, 11, 11, 0.8); + stroke: rgba(254, 254, 254, 0.1); } \ No newline at end of file From 1835eb457a6cf63368a1689f7108efb07fcb9cc8 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Wed, 27 Nov 2024 17:49:36 +0500 Subject: [PATCH 15/22] fix --- example/src/App2.tsx | 4 ++-- src/components/calendar/calendar.module.css | 4 ++-- src/components/calendar/calendar.tsx | 2 +- src/components/task-item/bar/bar.module.css | 2 +- src/components/task-item/project/project.module.css | 2 +- src/components/task-item/project/project.tsx | 6 +++--- src/components/task-item/task-item.tsx | 3 +-- 7 files changed, 11 insertions(+), 12 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 47bd535ef..97d5e25cd 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -146,9 +146,9 @@ const App = () => { projectBackgroundColor='rgba(37, 36, 36, 1)' projectBackgroundSelectedColor='rgba(37, 36, 36, 1)' barFill={60} - barCornerRadius={10} + barCornerRadius={5} fontSize='12px' - fontFamily='DM Sans' + fontFamily='Monospace' listCellWidth="" columnWidth={115} /> diff --git a/src/components/calendar/calendar.module.css b/src/components/calendar/calendar.module.css index 01bff6a2b..90f19645e 100644 --- a/src/components/calendar/calendar.module.css +++ b/src/components/calendar/calendar.module.css @@ -1,6 +1,6 @@ .calendarBottomText { text-anchor: middle; - fill: white; + fill: rgba(179, 182, 195, 1); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -15,7 +15,7 @@ .calendarTopText { text-anchor: middle; - fill: white; + fill: rgba(179, 182, 195, 1); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index 1fe9e2122..52dcb1ec4 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -135,7 +135,7 @@ export const Calendar: React.FC = ({ x={columnWidth * i + columnWidth * 0.5} className={styles.calendarBottomText} > - {bottomValue.substring(0, 3)} + {bottomValue.substring(0, 3).toUpperCase()} ); if ( diff --git a/src/components/task-item/bar/bar.module.css b/src/components/task-item/bar/bar.module.css index a054e2d4f..054c3e213 100644 --- a/src/components/task-item/bar/bar.module.css +++ b/src/components/task-item/bar/bar.module.css @@ -1,7 +1,7 @@ .barWrapper { cursor: pointer; outline: 1px solid var(--colour-brand-tints-transparent-10, rgba(254, 254, 254, 0.1)); - border-radius: 10px; + border-radius: 5px; } .barWrapper:hover .barHandle { diff --git a/src/components/task-item/project/project.module.css b/src/components/task-item/project/project.module.css index 46c92db2c..43d3badd5 100644 --- a/src/components/task-item/project/project.module.css +++ b/src/components/task-item/project/project.module.css @@ -1,7 +1,7 @@ .projectWrapper { cursor: pointer; outline: 1px solid var(--colour-brand-tints-transparent-10, rgba(254, 254, 254, 0.1)); - border-radius: 10px; + border-radius: 5px; } .projectBackground { diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index aeb630145..e615d37b5 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -44,16 +44,16 @@ export const Project: React.FC = ({ task, isSelected }) => { x={task.progressX + 10} width={task.progressWidth} y={task.y + 25 + 5} - height={task.height - 25} + height={task.height - 23} ry={task.barCornerRadius} rx={task.barCornerRadius} fill={processColor} /> = props => { ...props, }; const Icon = task?.icon; - console.log(Icon); const textRef = useRef(null); const [taskItem, setTaskItem] = useState(
); const [isTextInside, setIsTextInside] = useState(true); @@ -130,7 +129,7 @@ export const TaskItem: React.FC = props => { {task.name} Date: Wed, 27 Nov 2024 18:04:10 +0500 Subject: [PATCH 16/22] fix bugs --- example/src/App2.tsx | 14 +++++++------- src/components/task-item/task-item.tsx | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 97d5e25cd..70bc308ff 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -22,7 +22,7 @@ const App = () => { id: '1', type: 'task', isDisabled: true, - icon: + icon: }, @@ -34,7 +34,7 @@ const App = () => { type: 'task', isDisabled: true, dependencies: ['1'], - icon: + icon: }, @@ -46,7 +46,7 @@ const App = () => { type: 'task', dependencies: ['1'], isDisabled: true, - icon: + icon: }, @@ -58,7 +58,7 @@ const App = () => { type: 'task', dependencies: ['3'], isDisabled: true, - icon: + icon: }, @@ -69,7 +69,7 @@ const App = () => { id: '5', type: 'task', isDisabled: true, - icon: + icon: }, @@ -98,7 +98,7 @@ const App = () => { id: '7', type: 'task', isDisabled: true, - icon: + icon: }, @@ -109,7 +109,7 @@ const App = () => { id: '8', type: 'task', isDisabled: true, - icon: + icon: }, diff --git a/src/components/task-item/task-item.tsx b/src/components/task-item/task-item.tsx index 9bdbe1418..df5fa703e 100644 --- a/src/components/task-item/task-item.tsx +++ b/src/components/task-item/task-item.tsx @@ -112,12 +112,12 @@ export const TaskItem: React.FC = props => { > {taskItem} {task.typeInternal === 'task' && + y={task.typeInternal === 'task' ? task.y + 12 : task.y} width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"> {Icon} } Date: Wed, 27 Nov 2024 18:41:18 +0500 Subject: [PATCH 17/22] minor fixes --- example/src/App2.tsx | 3 ++- src/components/gantt/gantt.module.css | 1 + src/components/other/horizontal-scroll.module.css | 11 ++++++++--- src/components/other/vertical-scroll.module.css | 6 +++++- 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 70bc308ff..167c4990e 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -150,7 +150,8 @@ const App = () => { fontSize='12px' fontFamily='Monospace' listCellWidth="" - columnWidth={115} + columnWidth={120} + rowHeight={60} /> } diff --git a/src/components/gantt/gantt.module.css b/src/components/gantt/gantt.module.css index 78a9feb0d..219b9f23c 100644 --- a/src/components/gantt/gantt.module.css +++ b/src/components/gantt/gantt.module.css @@ -19,4 +19,5 @@ outline: none; position: relative; font-weight: 500; + margin: -8px; } \ No newline at end of file diff --git a/src/components/other/horizontal-scroll.module.css b/src/components/other/horizontal-scroll.module.css index dcf787e52..11863e773 100644 --- a/src/components/other/horizontal-scroll.module.css +++ b/src/components/other/horizontal-scroll.module.css @@ -6,13 +6,16 @@ /*iPad*/ height: 1.2rem; } + .scrollWrapper::-webkit-scrollbar { width: 1.1rem; height: 1.1rem; } + .scrollWrapper::-webkit-scrollbar-corner { background: transparent; } + .scrollWrapper::-webkit-scrollbar-thumb { border: 6px solid transparent; background: rgba(0, 0, 0, 0.2); @@ -20,14 +23,16 @@ border-radius: 10px; background-clip: padding-box; } + .scrollWrapper::-webkit-scrollbar-thumb:hover { border: 4px solid transparent; background: rgba(0, 0, 0, 0.3); background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3)); background-clip: padding-box; } -@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { -} + +@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {} + .scroll { height: 1px; -} +} \ No newline at end of file diff --git a/src/components/other/vertical-scroll.module.css b/src/components/other/vertical-scroll.module.css index da55a2e2e..e6d091fa9 100644 --- a/src/components/other/vertical-scroll.module.css +++ b/src/components/other/vertical-scroll.module.css @@ -5,13 +5,16 @@ /*firefox*/ scrollbar-width: thin; } + .scroll::-webkit-scrollbar { width: 1.1rem; height: 1.1rem; } + .scroll::-webkit-scrollbar-corner { background: transparent; } + .scroll::-webkit-scrollbar-thumb { border: 6px solid transparent; background: rgba(0, 0, 0, 0.2); @@ -19,9 +22,10 @@ border-radius: 10px; background-clip: padding-box; } + .scroll::-webkit-scrollbar-thumb:hover { border: 4px solid transparent; background: rgba(0, 0, 0, 0.3); background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3)); background-clip: padding-box; -} +} \ No newline at end of file From 60e157a83d81fef72d9900994faac7ed5a7c2f30 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Thu, 28 Nov 2024 15:03:02 +0500 Subject: [PATCH 18/22] fix --- example/src/App2.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/example/src/App2.tsx b/example/src/App2.tsx index 167c4990e..e6d112431 100644 --- a/example/src/App2.tsx +++ b/example/src/App2.tsx @@ -22,7 +22,7 @@ const App = () => { id: '1', type: 'task', isDisabled: true, - icon: + icon: }, @@ -34,7 +34,7 @@ const App = () => { type: 'task', isDisabled: true, dependencies: ['1'], - icon: + icon: }, @@ -46,7 +46,7 @@ const App = () => { type: 'task', dependencies: ['1'], isDisabled: true, - icon: + icon: }, @@ -58,7 +58,7 @@ const App = () => { type: 'task', dependencies: ['3'], isDisabled: true, - icon: + icon: }, @@ -69,7 +69,7 @@ const App = () => { id: '5', type: 'task', isDisabled: true, - icon: + icon: }, @@ -98,7 +98,7 @@ const App = () => { id: '7', type: 'task', isDisabled: true, - icon: + icon: }, @@ -109,7 +109,7 @@ const App = () => { id: '8', type: 'task', isDisabled: true, - icon: + icon: }, From 1d2c238b90fb99f234f1fc163c72499045d20aa2 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Thu, 28 Nov 2024 16:00:40 +0500 Subject: [PATCH 19/22] fix progress bar --- src/components/task-item/project/project.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index e615d37b5..78bb1c2d7 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -44,7 +44,7 @@ export const Project: React.FC = ({ task, isSelected }) => { x={task.progressX + 10} width={task.progressWidth} y={task.y + 25 + 5} - height={task.height - 23} + height={task.height - 27} ry={task.barCornerRadius} rx={task.barCornerRadius} fill={processColor} @@ -53,7 +53,7 @@ export const Project: React.FC = ({ task, isSelected }) => { x={task.x1 + task.progressWidth + 9} width={projectWith - task.progressWidth - 15} y={task.y + 25 + 5} - height={task.height - 23} + height={task.height - 27} ry={task.barCornerRadius} rx={task.barCornerRadius} fill={"rgba(52, 52, 52, 1)"} From 76a57ab4fa68b83f4d0a6f6cd8a40b0c4686c8d4 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Thu, 28 Nov 2024 16:06:58 +0500 Subject: [PATCH 20/22] width with vw --- src/components/calendar/calendar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index 52dcb1ec4..17ab289d4 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -385,7 +385,7 @@ export const Calendar: React.FC = ({ From 83ce3692f20e25a68e0c1f12285fb2ac091d6211 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Thu, 28 Nov 2024 16:08:33 +0500 Subject: [PATCH 21/22] fix progress --- src/components/task-item/project/project.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index 78bb1c2d7..5f1813bf3 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -44,7 +44,7 @@ export const Project: React.FC = ({ task, isSelected }) => { x={task.progressX + 10} width={task.progressWidth} y={task.y + 25 + 5} - height={task.height - 27} + height={task.height - 28} ry={task.barCornerRadius} rx={task.barCornerRadius} fill={processColor} @@ -53,7 +53,7 @@ export const Project: React.FC = ({ task, isSelected }) => { x={task.x1 + task.progressWidth + 9} width={projectWith - task.progressWidth - 15} y={task.y + 25 + 5} - height={task.height - 27} + height={task.height - 28} ry={task.barCornerRadius} rx={task.barCornerRadius} fill={"rgba(52, 52, 52, 1)"} From 54d4bac9d6134163fa1a790268109fa014a87ee6 Mon Sep 17 00:00:00 2001 From: Vivek Sharma Date: Fri, 29 Nov 2024 18:22:43 +0500 Subject: [PATCH 22/22] show chart with filters --- example/src/App.tsx | 38 ++--- example/src/components/view-switcher.tsx | 10 +- example/src/helper.tsx | 186 ++++++++++++++--------- example/src/index.tsx | 2 +- 4 files changed, 136 insertions(+), 100 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index c2ab602eb..c6ce9470a 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -9,11 +9,11 @@ const App = () => { const [view, setView] = React.useState(ViewMode.Day); const [tasks, setTasks] = React.useState(initTasks()); const [isChecked, setIsChecked] = React.useState(true); - let columnWidth = 65; + let columnWidth = 350; if (view === ViewMode.Year) { columnWidth = 350; } else if (view === ViewMode.Month) { - columnWidth = 300; + columnWidth = 350; } else if (view === ViewMode.Week) { columnWidth = 250; } @@ -74,21 +74,6 @@ const App = () => { onViewListChange={setIsChecked} isChecked={isChecked} /> -

Gantt With Unlimited Height

- -

Gantt With Limited Height

{ onClick={handleClick} onSelect={handleSelect} onExpanderClick={handleExpanderClick} - listCellWidth={isChecked ? "155px" : ""} - ganttHeight={300} + // listCellWidth={isChecked ? "155px" : ""} columnWidth={columnWidth} + arrowColor='rgba(237, 255, 0, 1)' + barProgressColor='rgba(237, 255, 0, 1)' + barProgressSelectedColor='rgba(237, 255, 0, 1)' + barBackgroundColor='#242424' + barBackgroundSelectedColor='#242424' + projectProgressColor='rgba(237, 255, 0, 1)' + projectProgressSelectedColor='rgba(237, 255, 0, 1)' + projectBackgroundColor='rgba(37, 36, 36, 1)' + projectBackgroundSelectedColor='rgba(37, 36, 36, 1)' + barFill={60} + barCornerRadius={5} + fontSize='12px' + fontFamily='Monospace' + listCellWidth="" + // columnWidth={120} + rowHeight={60} />
); diff --git a/example/src/components/view-switcher.tsx b/example/src/components/view-switcher.tsx index 42f736016..b660bbedd 100644 --- a/example/src/components/view-switcher.tsx +++ b/example/src/components/view-switcher.tsx @@ -8,8 +8,8 @@ type ViewSwitcherProps = { }; export const ViewSwitcher: React.FC = ({ onViewModeChange, - onViewListChange, - isChecked, + // onViewListChange, + // isChecked, }) => { return (
@@ -56,9 +56,9 @@ export const ViewSwitcher: React.FC = ({ className="Button" onClick={() => onViewModeChange(ViewMode.QuarterYear)} > - Year + Quarter Year -
+ {/*
Show Task List -
+
*/}
); }; diff --git a/example/src/helper.tsx b/example/src/helper.tsx index b876feaec..762761441 100644 --- a/example/src/helper.tsx +++ b/example/src/helper.tsx @@ -1,97 +1,133 @@ +import React from "react"; import { Task } from "../../dist/types/public-types"; export function initTasks() { - const currentDate = new Date(); - const tasks: Task[] = [ + // const currentDate = new Date(); + const tasks = [ { - start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1), - end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15), - name: "Some Project", - id: "ProjectSample", - progress: 25, - type: "project", - hideChildren: false, - displayOrder: 1, + start: new Date(2023, 12, 1), + end: new Date(2024, 10, 30), + name: 'External Wall Insulation (EWI)', + id: '0', + type: 'project', + progress: 20, + isDisabled: true }, { - start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1), - end: new Date( - currentDate.getFullYear(), - currentDate.getMonth(), - 2, - 12, - 28 - ), - name: "Idea", - id: "Task 0", - progress: 45, - type: "task", - project: "ProjectSample", - displayOrder: 2, + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Survey', + id: '1', + type: 'task', + isDisabled: true, + icon: + + + }, + { + start: new Date(2024, 3, 1), + end: new Date(2024, 8, 30), + name: 'Measure Wall Dimension', + id: '2', + type: 'task', + isDisabled: true, + dependencies: ['1'], + icon: + + + }, + { + start: new Date(2024, 5, 1), + end: new Date(2024, 10, 30), + name: 'Energy Usage Analysis', + id: '3', + type: 'task', + dependencies: ['1'], + isDisabled: true, + icon: + + }, { - start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2), - end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0), - name: "Research", - id: "Task 1", - progress: 25, - dependencies: ["Task 0"], - type: "task", - project: "ProjectSample", - displayOrder: 3, + start: new Date(2024, 7, 1), + end: new Date(2024, 10, 30), + name: 'Energy Usage Analysis', + id: '4', + type: 'task', + dependencies: ['3'], + isDisabled: true, + icon: + + }, { - start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4), - end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0), - name: "Discussion with team", - id: "Task 2", - progress: 10, - dependencies: ["Task 1"], - type: "task", - project: "ProjectSample", - displayOrder: 4, + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '5', + type: 'task', + isDisabled: true, + icon: + + }, { - start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8), - end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0), - name: "Developing", - id: "Task 3", - progress: 2, - dependencies: ["Task 2"], - type: "task", - project: "ProjectSample", - displayOrder: 5, + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Variation', + id: '6', + type: 'task', + isDisabled: true, + icon: <> + + + + + + + + + }, { - start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8), - end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10), - name: "Review", - id: "Task 4", - type: "task", - progress: 70, - dependencies: ["Task 2"], - project: "ProjectSample", - displayOrder: 6, + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '7', + type: 'task', + isDisabled: true, + icon: + + }, { - start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15), - end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15), - name: "Release", - id: "Task 6", - progress: currentDate.getMonth(), - type: "milestone", - dependencies: ["Task 4"], - project: "ProjectSample", - displayOrder: 7, + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '8', + type: 'task', + isDisabled: true, + icon: + + }, { - start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18), - end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 19), - name: "Party Time", - id: "Task 9", - progress: 0, + start: new Date(2024, 5, 1), + end: new Date(2025, 5, 30), + name: 'Internal Wall Insulation (IWI)', + id: '9', + type: 'project', + progress: 20, isDisabled: true, - type: "task", + }, + { + start: new Date(2024, 9, 1), + end: new Date(2025, 5, 30), + name: 'Loft Insulation', + id: '10', + type: 'project', + progress: 20, + isDisabled: true }, ]; return tasks; diff --git a/example/src/index.tsx b/example/src/index.tsx index a2df5a38c..9693f8ad5 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -2,7 +2,7 @@ import "./index.css"; import React from "react"; import { createRoot } from "react-dom/client"; -import App from "./App2"; +import App from "./App"; const container = document.getElementById("root"); const root = createRoot(container!);