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/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/App2.tsx b/example/src/App2.tsx new file mode 100644 index 000000000..e6d112431 --- /dev/null +++ b/example/src/App2.tsx @@ -0,0 +1,158 @@ +import React from 'react'; +import { Gantt } 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, + 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(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(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '5', + type: 'task', + isDisabled: true, + icon: + + + }, + { + start: new Date(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Variation', + id: '6', + type: 'task', + isDisabled: true, + icon: <> + + + + + + + + + + }, + { + 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(2023, 12, 1), + end: new Date(2024, 5, 30), + name: 'Energy Usage Analysis', + id: '8', + type: 'task', + isDisabled: true, + icon: + + + }, + { + 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, + }, + { + start: new Date(2024, 9, 1), + end: new Date(2025, 5, 30), + name: 'Loft Insulation', + id: '10', + type: 'project', + progress: 20, + isDisabled: true + }, + ]; + + return +} + +export default App; \ No newline at end of file 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.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/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/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/calendar/calendar.module.css b/src/components/calendar/calendar.module.css index 1be99d3f6..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: #333; + fill: rgba(179, 182, 195, 1); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -10,12 +10,12 @@ } .calendarTopTick { - stroke: #e6e4e4; + stroke: rgba(37, 36, 36, 1); } .calendarTopText { text-anchor: middle; - fill: #555; + fill: rgba(179, 182, 195, 1); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -25,7 +25,7 @@ } .calendarHeader { - fill: #ffffff; - stroke: #e0e0e0; + 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 a5860db52..17ab289d4 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).toUpperCase()} ); if ( @@ -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} /> @@ -385,7 +385,7 @@ export const Calendar: React.FC = ({ 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.module.css b/src/components/gantt/gantt.module.css index 8169a19ce..219b9f23c 100644 --- a/src/components/gantt/gantt.module.css +++ b/src/components/gantt/gantt.module.css @@ -18,4 +18,6 @@ list-style: none; outline: none; position: relative; -} + font-weight: 500; + margin: -8px; +} \ No newline at end of file diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index b90483f3d..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, @@ -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, @@ -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); 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 964303f22..a024e9e10 100644 --- a/src/components/grid/grid.module.css +++ b/src/components/grid/grid.module.css @@ -1,15 +1,15 @@ .gridRow { - fill: #fff; + fill: rgba(20, 20, 20, 1); } .gridRow:nth-child(even) { - fill: #f5f5f5; + fill: rgba(20, 20, 20, 1); } .gridRowLine { - stroke: #ebeff2; + stroke: rgba(254, 254, 254, 0.1); } .gridTick { - stroke: #e6e4e4; -} + stroke: rgba(254, 254, 254, 0.1); +} \ No newline at end of file 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/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 diff --git a/src/components/task-item/bar/bar.module.css b/src/components/task-item/bar/bar.module.css index 7ff4926f8..054c3e213 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: 5px; } .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 4fa67c2fa..43d3badd5 100644 --- a/src/components/task-item/project/project.module.css +++ b/src/components/task-item/project/project.module.css @@ -1,13 +1,13 @@ .projectWrapper { cursor: pointer; - outline: none; + outline: 1px solid var(--colour-brand-tints-transparent-10, rgba(254, 254, 254, 0.1)); + border-radius: 5px; } .projectBackground { user-select: none; - opacity: 0.6; } .projectTop { user-select: none; -} +} \ No newline at end of file diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index 5a47ba90b..5f1813bf3 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -35,20 +35,29 @@ export const Project: React.FC = ({ task, isSelected }) => { x={task.x1} width={projectWith} y={task.y} - height={task.height} + height={task.height + 15} rx={task.barCornerRadius} ry={task.barCornerRadius} className={styles.projectBackground} /> + = props => { } = { ...props, }; + const Icon = task?.icon; const textRef = useRef(null); const [taskItem, setTaskItem] = useState(
); const [isTextInside, setIsTextInside] = useState(true); @@ -63,11 +64,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 - @@ -108,9 +111,14 @@ export const TaskItem: React.FC = props => { }} > {taskItem} + {task.typeInternal === 'task' && + {Icon} + + } = props => { > {task.name} - + + {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 2eec4204a..237c06f25 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; @@ -21,3 +21,11 @@ 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 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/bar-task.ts b/src/types/bar-task.ts index 1be75e84b..d0dcc19a3 100644 --- a/src/types/bar-task.ts +++ b/src/types/bar-task.ts @@ -6,6 +6,7 @@ export interface BarTask extends Task { x1: number; x2: number; y: number; + icon?: any; height: number; progressX: number; progressWidth: number; diff --git a/src/types/date-setup.ts b/src/types/date-setup.ts index 81115ece0..8c85edd70 100644 --- a/src/types/date-setup.ts +++ b/src/types/date-setup.ts @@ -1,6 +1,6 @@ -import { ViewMode } from "./public-types"; +// 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 cc44ff17c..b6416e0e2 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; @@ -75,7 +75,7 @@ export interface EventOption { } export interface DisplayOption { - viewMode?: ViewMode; + viewMode?: string; viewDate?: Date; preStepsCount?: number; /** @@ -83,6 +83,7 @@ export interface DisplayOption { */ locale?: string; rtl?: boolean; + icon?: HTMLAnchorElement } export interface StylingOption {