init
This commit is contained in:
unknown
commit
063ced7795
42
.github/workflows/main.yml
vendored
Normal file
42
.github/workflows/main.yml
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
name: CI
|
||||
on: [push]
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Begin CI...
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Use Node 12
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 12.x
|
||||
|
||||
- name: Use cached node_modules
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: node_modules
|
||||
key: nodeModules-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
nodeModules-
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn install --frozen-lockfile
|
||||
env:
|
||||
CI: true
|
||||
|
||||
- name: Lint
|
||||
run: yarn lint
|
||||
env:
|
||||
CI: true
|
||||
|
||||
- name: Test
|
||||
run: yarn test --ci --coverage --maxWorkers=2
|
||||
env:
|
||||
CI: true
|
||||
|
||||
- name: Build
|
||||
run: yarn build
|
||||
env:
|
||||
CI: true
|
||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
*.log
|
||||
.DS_Store
|
||||
node_modules
|
||||
.cache
|
||||
dist
|
||||
5
.vscode/settings.json
vendored
Normal file
5
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"cSpell.words": [
|
||||
"callout"
|
||||
]
|
||||
}
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 battakycyku@gmail.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
3
example/.npmignore
Normal file
3
example/.npmignore
Normal file
@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
.cache
|
||||
dist
|
||||
15
example/index.html
Normal file
15
example/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Playground</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
259
example/index.tsx
Normal file
259
example/index.tsx
Normal file
@ -0,0 +1,259 @@
|
||||
import 'react-app-polyfill/ie11';
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import {
|
||||
Gantt,
|
||||
Task,
|
||||
EventOption,
|
||||
StylingOption,
|
||||
ViewMode,
|
||||
DisplayOption,
|
||||
} from '../src/index';
|
||||
|
||||
//Init
|
||||
const App = () => {
|
||||
const currentDate = new Date();
|
||||
const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
|
||||
let tasks: Task[] = [
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
|
||||
end: new Date(
|
||||
currentDate.getFullYear(),
|
||||
currentDate.getMonth(),
|
||||
2,
|
||||
12,
|
||||
28
|
||||
),
|
||||
name: 'Redesign website',
|
||||
id: 'Task 0',
|
||||
progress: 45,
|
||||
isDisabled: true,
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
|
||||
name: 'Write new content',
|
||||
id: 'Task 1',
|
||||
progress: 25,
|
||||
dependencies: ['Task 0'],
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
|
||||
name: 'Apply new styles',
|
||||
id: 'Task 2',
|
||||
progress: 10,
|
||||
dependencies: ['Task 1'],
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
|
||||
name: 'Review',
|
||||
id: 'Task currentDate.getMonth()',
|
||||
progress: 2,
|
||||
dependencies: ['Task 2'],
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
|
||||
name: 'Deploy',
|
||||
id: 'Task 4',
|
||||
progress: 70,
|
||||
dependencies: ['Task 2'],
|
||||
},
|
||||
{
|
||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
|
||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 26),
|
||||
name: 'Go Live!',
|
||||
id: 'Task 6',
|
||||
progress: currentDate.getMonth(),
|
||||
dependencies: ['Task 4'],
|
||||
styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
|
||||
},
|
||||
];
|
||||
|
||||
let onTaskChange = (task: Task) => {
|
||||
console.log('On date change');
|
||||
};
|
||||
|
||||
let onTaskDelete = (task: Task) => {
|
||||
const conf = confirm('Are you sure?');
|
||||
if (!conf) throw 'No del';
|
||||
};
|
||||
|
||||
let onProgressChange = (task: Task) => {
|
||||
console.log('On progress change');
|
||||
};
|
||||
|
||||
let onDblClick = (task: Task) => {
|
||||
alert('On Double Click event');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ViewSwitcher onViewChange={viewMode => setView(viewMode)} />
|
||||
<GanttTableExample
|
||||
tasks={tasks}
|
||||
viewMode={view}
|
||||
onDateChange={onTaskChange}
|
||||
onTaskDelete={onTaskDelete}
|
||||
onProgressChange={onProgressChange}
|
||||
onDoubleClick={onDblClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Gantt with Custom table example
|
||||
type GanttTableExampleProps = { tasks: Task[] } & EventOption & DisplayOption;
|
||||
export const GanttTableExample: React.SFC<GanttTableExampleProps> = props => {
|
||||
const gridColumnWidth = 150;
|
||||
let options: StylingOption = {
|
||||
fontSize: '14px',
|
||||
fontFamily:
|
||||
'Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
|
||||
headerHeight: 50,
|
||||
rowHeight: 50,
|
||||
};
|
||||
if (props.viewMode === ViewMode.Month) {
|
||||
options.columnWidth = 300;
|
||||
} else if (props.viewMode === ViewMode.Week) {
|
||||
options.columnWidth = 250;
|
||||
}
|
||||
|
||||
const [tasks, setTasks] = React.useState(props.tasks);
|
||||
const onTaskDateChange = async (task: Task) => {
|
||||
if (props.onDateChange) {
|
||||
try {
|
||||
await props.onDateChange(task);
|
||||
} catch (e) {
|
||||
throw e;
|
||||
}
|
||||
setTasks(tasks.map(t => (t.id === task.id ? task : t)));
|
||||
}
|
||||
};
|
||||
|
||||
const onTaskProgressChange = async (task: Task) => {
|
||||
if (props.onProgressChange) {
|
||||
try {
|
||||
await props.onProgressChange(task);
|
||||
} catch (e) {
|
||||
setTasks(props.tasks.slice());
|
||||
throw e;
|
||||
}
|
||||
|
||||
setTasks(tasks.map(t => (t.id === task.id ? task : t)));
|
||||
}
|
||||
};
|
||||
|
||||
const onTaskItemDelete = async (task: Task) => {
|
||||
if (props.onTaskDelete) {
|
||||
await props.onTaskDelete(task);
|
||||
setTasks(tasks.filter(t => t.id !== task.id));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="Wrapper">
|
||||
<div
|
||||
className="GanttTable"
|
||||
style={{
|
||||
fontFamily: options.fontFamily,
|
||||
fontSize: options.fontSize,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="GanttTable-header"
|
||||
style={{
|
||||
height: options.headerHeight,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="GanttTable-headerItem"
|
||||
style={{
|
||||
minWidth: gridColumnWidth,
|
||||
}}
|
||||
>
|
||||
<span role="img" aria-label="fromDate" className="GanttTable-icon">
|
||||
📃
|
||||
</span>
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
className="GanttTable-headerItem"
|
||||
style={{
|
||||
minWidth: gridColumnWidth,
|
||||
}}
|
||||
>
|
||||
<span role="img" aria-label="fromDate" className="GanttTable-icon">
|
||||
📅
|
||||
</span>
|
||||
From
|
||||
</div>
|
||||
<div
|
||||
className="GanttTable-headerItem"
|
||||
style={{
|
||||
minWidth: gridColumnWidth,
|
||||
}}
|
||||
>
|
||||
<span role="img" aria-label="toDate" className="GanttTable-icon">
|
||||
📅
|
||||
</span>
|
||||
To
|
||||
</div>
|
||||
</div>
|
||||
{tasks.map(t => {
|
||||
return (
|
||||
<div
|
||||
className="GanttTable-row"
|
||||
style={{ height: options.rowHeight }}
|
||||
>
|
||||
<div className="GanttTable-cell">{t.name}</div>
|
||||
<div className="GanttTable-cell">{t.start.toDateString()}</div>
|
||||
<div className="GanttTable-cell">{t.end.toDateString()}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div style={{ overflowX: 'scroll' }}>
|
||||
<Gantt
|
||||
{...options}
|
||||
{...props}
|
||||
tasks={tasks}
|
||||
onDateChange={onTaskDateChange}
|
||||
onTaskDelete={onTaskItemDelete}
|
||||
onProgressChange={onTaskProgressChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type ViewSwitcherProps = {
|
||||
onViewChange: (viewMode: ViewMode) => void;
|
||||
};
|
||||
const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({ onViewChange }) => {
|
||||
return (
|
||||
<div className="ViewContainer">
|
||||
<button
|
||||
className="Button"
|
||||
onClick={() => onViewChange(ViewMode.QuarterDay)}
|
||||
>
|
||||
Quarter of Day
|
||||
</button>
|
||||
<button className="Button" onClick={() => onViewChange(ViewMode.HalfDay)}>
|
||||
Half of Day
|
||||
</button>
|
||||
<button className="Button" onClick={() => onViewChange(ViewMode.Day)}>
|
||||
Day
|
||||
</button>
|
||||
<button className="Button" onClick={() => onViewChange(ViewMode.Week)}>
|
||||
Week
|
||||
</button>
|
||||
<button className="Button" onClick={() => onViewChange(ViewMode.Month)}>
|
||||
Month
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
7052
example/package-lock.json
generated
Normal file
7052
example/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
example/package.json
Normal file
24
example/package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "parcel index.html",
|
||||
"build": "parcel build index.html"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-app-polyfill": "^1.0.0"
|
||||
},
|
||||
"alias": {
|
||||
"react": "../node_modules/react",
|
||||
"react-dom": "../node_modules/react-dom/profiling",
|
||||
"scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.9.11",
|
||||
"@types/react-dom": "^16.8.4",
|
||||
"parcel": "^1.12.3",
|
||||
"typescript": "^3.4.5"
|
||||
}
|
||||
}
|
||||
67
example/style.css
Normal file
67
example/style.css
Normal file
@ -0,0 +1,67 @@
|
||||
/*Styles for Example Table*/
|
||||
.Wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #ffff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.GanttTable {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.GanttTable-header {
|
||||
display: table-row;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.GanttTable-headerItem {
|
||||
display: table-cell;
|
||||
padding-top: 24px;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
border-left: #e6e4e4 1px solid;
|
||||
border-top: #e6e4e4 1px solid;
|
||||
border-bottom: #e6e4e4 1px solid;
|
||||
}
|
||||
|
||||
.GanttTable-row {
|
||||
display: table-row;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.GanttTable-row:nth-of-type(odd) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.GanttTable-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
border-left: #e6e4e4 1px solid;
|
||||
}
|
||||
|
||||
.GanttTable-icon {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.ViewContainer {
|
||||
list-style: none;
|
||||
-ms-box-orient: horizontal;
|
||||
display: flex;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.Button {
|
||||
background-color: #e7e7e7;
|
||||
color: black;
|
||||
border: none;
|
||||
padding: 7px 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
19
example/tsconfig.json
Normal file
19
example/tsconfig.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": false,
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"moduleResolution": "node",
|
||||
"noImplicitAny": false,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"removeComments": true,
|
||||
"strictNullChecks": true,
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true,
|
||||
"lib": ["es2015", "es2016", "dom"],
|
||||
"baseUrl": ".",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
5
jest.config.js
Normal file
5
jest.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
moduleNameMapper: {
|
||||
'^.+\\.(css|less|scss)$': 'babel-jest',
|
||||
},
|
||||
};
|
||||
9676
package-lock.json
generated
Normal file
9676
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
52
package.json
Normal file
52
package.json
Normal file
@ -0,0 +1,52 @@
|
||||
{
|
||||
"version": "0.1.0",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "tsdx watch",
|
||||
"build": "tsdx build",
|
||||
"test": "tsdx test --passWithNoTests",
|
||||
"lint": "tsdx lint",
|
||||
"prepare": "tsdx build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "tsdx lint"
|
||||
}
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 80,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
},
|
||||
"name": "gantt-task-react",
|
||||
"author": "Maksym Vikarii maksym.vikarii@gmail.com",
|
||||
"module": "dist/gantt-task-react.esm.js",
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.9.41",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"husky": "^4.2.5",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"tsdx": "^0.13.2",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^3.9.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^9.8.5",
|
||||
"cssnano": "^4.1.10",
|
||||
"rollup-plugin-postcss": "^3.1.2"
|
||||
}
|
||||
}
|
||||
32
src/components/Bar/bar-date-handle.tsx
Normal file
32
src/components/Bar/bar-date-handle.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import '../../style.css';
|
||||
|
||||
type BarDateHandleProps = {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
barCornerRadius: number;
|
||||
onMouseDown: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
|
||||
};
|
||||
export const BarDateHandle: React.FC<BarDateHandleProps> = ({
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
barCornerRadius,
|
||||
onMouseDown,
|
||||
}) => {
|
||||
return (
|
||||
<rect
|
||||
x={x}
|
||||
y={y}
|
||||
width={width}
|
||||
height={height}
|
||||
className="GanttBar-handle"
|
||||
ry={barCornerRadius}
|
||||
rx={barCornerRadius}
|
||||
onMouseDown={onMouseDown}
|
||||
></rect>
|
||||
);
|
||||
};
|
||||
98
src/components/Bar/bar-display.tsx
Normal file
98
src/components/Bar/bar-display.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import '../../style.css';
|
||||
|
||||
type BarDisplayProps = {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
isSelected: boolean;
|
||||
progressWidth: number;
|
||||
barCornerRadius: number;
|
||||
text: string;
|
||||
hasChild: boolean;
|
||||
arrowIndent: number;
|
||||
styles?: {
|
||||
backgroundColor?: string;
|
||||
backgroundSelectedColor?: string;
|
||||
progressColor?: string;
|
||||
progressSelectedColor?: string;
|
||||
};
|
||||
onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
|
||||
};
|
||||
export const BarDisplay: React.FC<BarDisplayProps> = ({
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
isSelected,
|
||||
progressWidth,
|
||||
barCornerRadius,
|
||||
text,
|
||||
hasChild,
|
||||
arrowIndent,
|
||||
styles,
|
||||
onMouseDown,
|
||||
}) => {
|
||||
const textRef = useRef<SVGTextElement>(null);
|
||||
const [isTextInside, setIsTextInside] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (textRef.current)
|
||||
setIsTextInside(textRef.current.getBBox().width < width);
|
||||
}, [textRef, width]);
|
||||
|
||||
const getProcessColor = () => {
|
||||
if (isSelected) {
|
||||
return styles?.progressSelectedColor || '#8282f5';
|
||||
} else {
|
||||
return styles?.progressColor || '#a3a3ff';
|
||||
}
|
||||
};
|
||||
|
||||
const getBarColor = () => {
|
||||
if (isSelected) {
|
||||
return styles?.backgroundSelectedColor || '#aeb8c2';
|
||||
} else {
|
||||
return styles?.backgroundColor || '#b8c2cc';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<g onMouseDown={onMouseDown}>
|
||||
<rect
|
||||
x={x}
|
||||
width={width}
|
||||
y={y}
|
||||
height={height}
|
||||
ry={barCornerRadius}
|
||||
rx={barCornerRadius}
|
||||
fill={getBarColor()}
|
||||
className="GanttBar"
|
||||
/>
|
||||
<rect
|
||||
x={x}
|
||||
width={progressWidth}
|
||||
y={y}
|
||||
height={height}
|
||||
ry={barCornerRadius}
|
||||
rx={barCornerRadius}
|
||||
fill={getProcessColor()}
|
||||
/>
|
||||
<text
|
||||
x={
|
||||
isTextInside
|
||||
? x + width * 0.5
|
||||
: x + width + arrowIndent * +hasChild + arrowIndent * 0.2
|
||||
}
|
||||
y={y + height * 0.5}
|
||||
className={`GanttBar-label ${
|
||||
isTextInside ? '' : 'GanttBar-label-outside'
|
||||
}`}
|
||||
ref={textRef}
|
||||
>
|
||||
{text}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
19
src/components/Bar/bar-progress-handle.tsx
Normal file
19
src/components/Bar/bar-progress-handle.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import '../../style.css';
|
||||
|
||||
type BarProgressHandleProps = {
|
||||
progressPoint: string;
|
||||
onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
|
||||
};
|
||||
export const BarProgressHandle: React.FC<BarProgressHandleProps> = ({
|
||||
progressPoint,
|
||||
onMouseDown,
|
||||
}) => {
|
||||
return (
|
||||
<polygon
|
||||
className="GanttBar-handle"
|
||||
points={progressPoint}
|
||||
onMouseDown={onMouseDown}
|
||||
></polygon>
|
||||
);
|
||||
};
|
||||
126
src/components/Bar/bar.tsx
Normal file
126
src/components/Bar/bar.tsx
Normal file
@ -0,0 +1,126 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Task } from '../../types/public-types';
|
||||
import { BarProgressHandle } from './bar-progress-handle';
|
||||
import { BarDateHandle } from './bar-date-handle';
|
||||
import { BarDisplay } from './bar-display';
|
||||
import { BarTask } from '../../types/bar-task';
|
||||
import { BarEvent } from '../Gantt/gantt-content';
|
||||
import {
|
||||
progressWithByParams,
|
||||
getProgressPoint,
|
||||
} from '../../helpers/bar-helper';
|
||||
import '../../style.css';
|
||||
|
||||
export type BarProps = {
|
||||
task: BarTask;
|
||||
arrowIndent: number;
|
||||
onDoubleClick?: (task: Task) => any;
|
||||
isProgressChangeable: boolean;
|
||||
isDateChangeable: boolean;
|
||||
handleMouseEvents: (
|
||||
event:
|
||||
| React.MouseEvent<SVGPolygonElement, MouseEvent>
|
||||
| React.MouseEvent<SVGGElement, MouseEvent>
|
||||
| React.MouseEvent<SVGRectElement, MouseEvent>,
|
||||
eventType: BarEvent,
|
||||
task: BarTask
|
||||
) => void;
|
||||
handleButtonSVGEvents: (
|
||||
event: React.KeyboardEvent<SVGGElement>,
|
||||
task: BarTask
|
||||
) => void;
|
||||
};
|
||||
|
||||
export const Bar: React.FC<BarProps> = ({
|
||||
task,
|
||||
arrowIndent,
|
||||
onDoubleClick,
|
||||
isProgressChangeable,
|
||||
isDateChangeable,
|
||||
handleMouseEvents,
|
||||
handleButtonSVGEvents,
|
||||
}) => {
|
||||
const [isSelected, setIsSelected] = useState(false);
|
||||
|
||||
const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
|
||||
const progressPoint = getProgressPoint(
|
||||
progressWidth + task.x1,
|
||||
task.y,
|
||||
task.height
|
||||
);
|
||||
|
||||
return (
|
||||
<g
|
||||
className="GanttBar-wrapper"
|
||||
onDoubleClick={() => {
|
||||
!!onDoubleClick && onDoubleClick(task);
|
||||
}}
|
||||
tabIndex={0}
|
||||
onKeyDown={e => {
|
||||
handleButtonSVGEvents(e, task);
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
handleMouseEvents(e, 'mouseenter', task);
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
handleMouseEvents(e, 'mouseleave', task);
|
||||
}}
|
||||
onFocus={() => setIsSelected(true)}
|
||||
onBlur={() => setIsSelected(false)}
|
||||
>
|
||||
<BarDisplay
|
||||
x={task.x1}
|
||||
y={task.y}
|
||||
width={task.x2 - task.x1}
|
||||
height={task.height}
|
||||
progressWidth={progressWidth}
|
||||
barCornerRadius={task.barCornerRadius}
|
||||
text={task.name}
|
||||
hasChild={task.barChildren.length > 0}
|
||||
arrowIndent={arrowIndent}
|
||||
styles={task.styles}
|
||||
isSelected={isSelected}
|
||||
onMouseDown={e => {
|
||||
isDateChangeable && handleMouseEvents(e, 'move', task);
|
||||
}}
|
||||
/>
|
||||
<g className="handleGroup">
|
||||
{isDateChangeable && (
|
||||
<>
|
||||
{/*left*/}
|
||||
<BarDateHandle
|
||||
x={task.x1 + 1}
|
||||
y={task.y + 1}
|
||||
width={task.handleWidth}
|
||||
height={task.height - 2}
|
||||
barCornerRadius={task.barCornerRadius}
|
||||
onMouseDown={e => {
|
||||
handleMouseEvents(e, 'start', task);
|
||||
}}
|
||||
/>
|
||||
{/*right*/}
|
||||
<BarDateHandle
|
||||
x={task.x2 - task.handleWidth - 1}
|
||||
y={task.y + 1}
|
||||
width={task.handleWidth}
|
||||
height={task.height - 2}
|
||||
barCornerRadius={task.barCornerRadius}
|
||||
onMouseDown={e => {
|
||||
handleMouseEvents(e, 'end', task);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{isProgressChangeable && (
|
||||
<BarProgressHandle
|
||||
progressPoint={progressPoint}
|
||||
onMouseDown={e => {
|
||||
console.log('progress');
|
||||
handleMouseEvents(e, 'progress', task);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
215
src/components/Calendar/calendar.tsx
Normal file
215
src/components/Calendar/calendar.tsx
Normal file
@ -0,0 +1,215 @@
|
||||
import React, { ReactChild } from 'react';
|
||||
import { ViewMode } from '../../types/public-types';
|
||||
import { TopPartOfCalendar } from './top-part-of-calendar';
|
||||
import {
|
||||
getLocaleMonth,
|
||||
getWeekNumberISO8601,
|
||||
} from '../../helpers/date-helper';
|
||||
import '../../style.css';
|
||||
export type CalendarProps = {
|
||||
dates: Date[];
|
||||
locale: string;
|
||||
viewMode: ViewMode;
|
||||
headerHeight: number;
|
||||
columnWidth: number;
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
};
|
||||
|
||||
export const Calendar: React.FC<CalendarProps> = ({
|
||||
dates,
|
||||
locale,
|
||||
viewMode,
|
||||
headerHeight,
|
||||
columnWidth,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
}) => {
|
||||
const getCalendarValuesForMonth = () => {
|
||||
let topValues: ReactChild[] = [];
|
||||
let bottomValues: ReactChild[] = [];
|
||||
const topDefaultWidth = columnWidth * 6;
|
||||
const topDefaultHeight = headerHeight * 0.5;
|
||||
for (let i = 0; i < dates.length; i++) {
|
||||
const date = dates[i];
|
||||
let bottomValue = getLocaleMonth(date, locale);
|
||||
bottomValues.push(
|
||||
<text
|
||||
key={bottomValue + date.getFullYear()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * i + columnWidth * 0.5}
|
||||
className="GanttCalendar-bottomText"
|
||||
>
|
||||
{bottomValue}
|
||||
</text>
|
||||
);
|
||||
if (i === 0 || date.getFullYear() !== dates[i - 1].getFullYear()) {
|
||||
let topValue = date.getFullYear().toString();
|
||||
topValues.push(
|
||||
<TopPartOfCalendar
|
||||
key={topValue}
|
||||
value={topValue}
|
||||
x1Line={columnWidth * i}
|
||||
y1Line={0}
|
||||
y2Line={topDefaultHeight}
|
||||
xText={
|
||||
topDefaultWidth + columnWidth * i - date.getMonth() * columnWidth
|
||||
}
|
||||
yText={topDefaultHeight * 0.9}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return [topValues, bottomValues];
|
||||
};
|
||||
|
||||
const getCalendarValuesForWeek = () => {
|
||||
let topValues: ReactChild[] = [];
|
||||
let bottomValues: ReactChild[] = [];
|
||||
let weeksCount: number = 0;
|
||||
const topDefaultHeight = headerHeight * 0.5;
|
||||
for (let i = dates.length - 1; i >= 0; i--) {
|
||||
const date = dates[i];
|
||||
let topValue = '';
|
||||
if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
|
||||
//top
|
||||
topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
|
||||
}
|
||||
//bottom
|
||||
const bottomValue = `W${getWeekNumberISO8601(date)}`;
|
||||
|
||||
bottomValues.push(
|
||||
<text
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * i}
|
||||
className="GanttCalendar-bottomText"
|
||||
>
|
||||
{bottomValue}
|
||||
</text>
|
||||
);
|
||||
|
||||
if (topValue) {
|
||||
//if last day is new month
|
||||
if (i !== dates.length - 1) {
|
||||
topValues.push(
|
||||
<TopPartOfCalendar
|
||||
key={topValue}
|
||||
value={topValue}
|
||||
x1Line={columnWidth * i + weeksCount * columnWidth}
|
||||
y1Line={0}
|
||||
y2Line={topDefaultHeight}
|
||||
xText={columnWidth * i + columnWidth * weeksCount * 0.5}
|
||||
yText={topDefaultHeight * 0.9}
|
||||
/>
|
||||
);
|
||||
}
|
||||
weeksCount = 0;
|
||||
}
|
||||
weeksCount++;
|
||||
}
|
||||
return [topValues, bottomValues];
|
||||
};
|
||||
|
||||
const getCalendarValuesForDay = () => {
|
||||
let topValues: ReactChild[] = [];
|
||||
let bottomValues: ReactChild[] = [];
|
||||
const topDefaultHeight = headerHeight * 0.5;
|
||||
for (let i = 0; i < dates.length; i++) {
|
||||
const date = dates[i];
|
||||
const bottomValue = date.getDate().toString();
|
||||
|
||||
bottomValues.push(
|
||||
<text
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * i + columnWidth * 0.5}
|
||||
className="GanttCalendar-bottomText"
|
||||
>
|
||||
{bottomValue}
|
||||
</text>
|
||||
);
|
||||
if (
|
||||
i + 1 !== dates.length &&
|
||||
date.getMonth() !== dates[i + 1].getMonth()
|
||||
) {
|
||||
let topValue = getLocaleMonth(date, locale);
|
||||
|
||||
topValues.push(
|
||||
<TopPartOfCalendar
|
||||
key={topValue}
|
||||
value={topValue}
|
||||
x1Line={columnWidth * (i + 1)}
|
||||
y1Line={0}
|
||||
y2Line={topDefaultHeight}
|
||||
xText={columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5}
|
||||
yText={topDefaultHeight * 0.9}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return [topValues, bottomValues];
|
||||
};
|
||||
|
||||
const getCalendarValuesForOther = () => {
|
||||
let topValues: ReactChild[] = [];
|
||||
let bottomValues: ReactChild[] = [];
|
||||
let ticks = viewMode === ViewMode.HalfDay ? 2 : 4;
|
||||
const topDefaultHeight = headerHeight * 0.5;
|
||||
|
||||
for (let i = 0; i < dates.length; i++) {
|
||||
const date = dates[i];
|
||||
const bottomValue = Intl.DateTimeFormat(locale, {
|
||||
hour: 'numeric',
|
||||
}).format(date);
|
||||
|
||||
bottomValues.push(
|
||||
<text
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * i}
|
||||
className="GanttCalendar-bottomText"
|
||||
fontFamily={fontFamily}
|
||||
>
|
||||
{bottomValue}
|
||||
</text>
|
||||
);
|
||||
if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
|
||||
const topValue = `${date.getDate()} ${getLocaleMonth(date, locale)}`;
|
||||
topValues.push(
|
||||
<TopPartOfCalendar
|
||||
key={topValue}
|
||||
value={topValue}
|
||||
x1Line={columnWidth * i + ticks * columnWidth}
|
||||
y1Line={0}
|
||||
y2Line={topDefaultHeight}
|
||||
xText={columnWidth * i + ticks * columnWidth * 0.5}
|
||||
yText={topDefaultHeight * 0.9}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return [topValues, bottomValues];
|
||||
};
|
||||
let topValues: ReactChild[] = [];
|
||||
let bottomValues: ReactChild[] = [];
|
||||
switch (viewMode) {
|
||||
case ViewMode.Month:
|
||||
[topValues, bottomValues] = getCalendarValuesForMonth();
|
||||
break;
|
||||
case ViewMode.Week:
|
||||
[topValues, bottomValues] = getCalendarValuesForWeek();
|
||||
break;
|
||||
case ViewMode.Day:
|
||||
[topValues, bottomValues] = getCalendarValuesForDay();
|
||||
break;
|
||||
default:
|
||||
[topValues, bottomValues] = getCalendarValuesForOther();
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>
|
||||
{bottomValues} {topValues}
|
||||
</g>
|
||||
);
|
||||
};
|
||||
41
src/components/Calendar/top-part-of-calendar.tsx
Normal file
41
src/components/Calendar/top-part-of-calendar.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import '../../style.css';
|
||||
|
||||
type TopPartOfCalendarProps = {
|
||||
value: string;
|
||||
x1Line: number;
|
||||
y1Line: number;
|
||||
y2Line: number;
|
||||
xText: number;
|
||||
yText: number;
|
||||
};
|
||||
|
||||
export const TopPartOfCalendar: React.FC<TopPartOfCalendarProps> = ({
|
||||
value,
|
||||
x1Line,
|
||||
y1Line,
|
||||
y2Line,
|
||||
xText,
|
||||
yText,
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<line
|
||||
x1={x1Line}
|
||||
y1={y1Line}
|
||||
x2={x1Line}
|
||||
y2={y2Line}
|
||||
className="GanttCalendar-topTick"
|
||||
key={value + 'line'}
|
||||
></line>
|
||||
<text
|
||||
key={value + 'text'}
|
||||
y={yText}
|
||||
x={xText}
|
||||
className="GanttCalendar-topText"
|
||||
>
|
||||
{value}
|
||||
</text>
|
||||
</>
|
||||
);
|
||||
};
|
||||
403
src/components/Gantt/gantt-content.tsx
Normal file
403
src/components/Gantt/gantt-content.tsx
Normal file
@ -0,0 +1,403 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Task, EventOption } from '../../types/public-types';
|
||||
import { Bar } from '../Bar/bar';
|
||||
import { BarTask } from '../../types/bar-task';
|
||||
import { Arrow } from '../Other/arrow';
|
||||
import {
|
||||
convertToBarTasks,
|
||||
progressByX,
|
||||
startByX,
|
||||
endByX,
|
||||
moveByX,
|
||||
dateByX,
|
||||
} from '../../helpers/bar-helper';
|
||||
import { Tooltip } from '../Other/tooltip';
|
||||
export interface GanttTask extends Task {
|
||||
x1: number;
|
||||
x2: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
export type GanttContentProps = {
|
||||
tasks: Task[];
|
||||
dates: Date[];
|
||||
rowHeight: number;
|
||||
barCornerRadius: number;
|
||||
columnWidth: number;
|
||||
barFill: number;
|
||||
headerHeight: number;
|
||||
handleWidth: number;
|
||||
svg: React.MutableRefObject<SVGSVGElement | null>;
|
||||
timeStep: number;
|
||||
arrowColor: string;
|
||||
arrowIndent: number;
|
||||
fontSize: string;
|
||||
fontFamily: string;
|
||||
getTooltipContent?: (
|
||||
task: Task,
|
||||
fontSize: string,
|
||||
fontFamily: string
|
||||
) => JSX.Element;
|
||||
} & EventOption;
|
||||
|
||||
export type BarEvent =
|
||||
| 'progress'
|
||||
| 'end'
|
||||
| 'start'
|
||||
| 'move'
|
||||
| 'mouseenter'
|
||||
| 'mouseleave'
|
||||
| '';
|
||||
export const GanttContent: React.FC<GanttContentProps> = ({
|
||||
tasks,
|
||||
rowHeight,
|
||||
barCornerRadius,
|
||||
columnWidth,
|
||||
dates,
|
||||
barFill,
|
||||
headerHeight,
|
||||
handleWidth,
|
||||
arrowColor,
|
||||
svg,
|
||||
timeStep,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
arrowIndent,
|
||||
onDateChange,
|
||||
onProgressChange,
|
||||
onDoubleClick,
|
||||
onTaskDelete,
|
||||
getTooltipContent,
|
||||
}) => {
|
||||
const [barEvent, setBarEvent] = useState<BarEvent>('');
|
||||
const [selectedTask, setSelectedTask] = useState<BarTask | null>(null);
|
||||
const [barTasks, setBarTasks] = useState<BarTask[]>([]);
|
||||
const [xStep, setXStep] = useState(0);
|
||||
const [initEventX1Delta, setInitEventX1Delta] = useState(0);
|
||||
const [isSVGListen, setIsSVGListen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const dateDelta =
|
||||
dates[1].getTime() -
|
||||
dates[0].getTime() -
|
||||
dates[1].getTimezoneOffset() * 60 * 1000 +
|
||||
dates[0].getTimezoneOffset() * 60 * 1000;
|
||||
const newXStep = (timeStep * columnWidth) / dateDelta;
|
||||
if (newXStep !== xStep) {
|
||||
setXStep(newXStep);
|
||||
}
|
||||
}, [tasks, rowHeight, barCornerRadius, columnWidth, dates, timeStep, xStep]);
|
||||
|
||||
useEffect(() => {
|
||||
const dateDelta =
|
||||
dates[1].getTime() -
|
||||
dates[0].getTime() -
|
||||
dates[1].getTimezoneOffset() * 60 * 1000 +
|
||||
dates[0].getTimezoneOffset() * 60 * 1000;
|
||||
const taskHeight = (rowHeight * barFill) / 100;
|
||||
|
||||
setBarTasks(
|
||||
convertToBarTasks(
|
||||
tasks,
|
||||
dates,
|
||||
dateDelta,
|
||||
columnWidth,
|
||||
rowHeight,
|
||||
taskHeight,
|
||||
headerHeight,
|
||||
barCornerRadius,
|
||||
handleWidth
|
||||
)
|
||||
);
|
||||
}, [
|
||||
tasks,
|
||||
rowHeight,
|
||||
barCornerRadius,
|
||||
columnWidth,
|
||||
dates,
|
||||
timeStep,
|
||||
barFill,
|
||||
handleWidth,
|
||||
headerHeight,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
/**
|
||||
* Method handles event in real time(mousemove) and on finish(mouseup)
|
||||
*/
|
||||
const handleMouseSVGChangeEventsSubscribe = async (event: MouseEvent) => {
|
||||
if (!selectedTask || !barEvent) return;
|
||||
const changedTask = { ...selectedTask } as BarTask;
|
||||
switch (event.type) {
|
||||
//On Event changing
|
||||
case 'mousemove': {
|
||||
switch (barEvent) {
|
||||
case 'progress':
|
||||
changedTask.progress = progressByX(event.offsetX, selectedTask);
|
||||
break;
|
||||
case 'start':
|
||||
let newX1 = startByX(event.offsetX, xStep, selectedTask);
|
||||
changedTask.x1 = newX1;
|
||||
changedTask.start = dateByX(
|
||||
newX1,
|
||||
selectedTask.x1,
|
||||
selectedTask.start,
|
||||
xStep,
|
||||
timeStep
|
||||
);
|
||||
break;
|
||||
case 'end':
|
||||
let newX2 = endByX(event.offsetX, xStep, selectedTask);
|
||||
changedTask.x2 = newX2;
|
||||
changedTask.end = dateByX(
|
||||
newX2,
|
||||
selectedTask.x2,
|
||||
selectedTask.end,
|
||||
xStep,
|
||||
timeStep
|
||||
);
|
||||
break;
|
||||
case 'move':
|
||||
const [newMoveX1, newMoveX2] = moveByX(
|
||||
event.offsetX - initEventX1Delta,
|
||||
xStep,
|
||||
selectedTask
|
||||
);
|
||||
changedTask.start = dateByX(
|
||||
newMoveX1,
|
||||
selectedTask.x1,
|
||||
selectedTask.start,
|
||||
xStep,
|
||||
timeStep
|
||||
);
|
||||
changedTask.end = dateByX(
|
||||
newMoveX2,
|
||||
selectedTask.x2,
|
||||
selectedTask.end,
|
||||
xStep,
|
||||
timeStep
|
||||
);
|
||||
changedTask.x1 = newMoveX1;
|
||||
changedTask.x2 = newMoveX2;
|
||||
break;
|
||||
}
|
||||
//Update internal state
|
||||
setBarTasks(
|
||||
barTasks.map(t => (t.id === changedTask.id ? changedTask : t))
|
||||
);
|
||||
setSelectedTask(changedTask);
|
||||
break;
|
||||
}
|
||||
//On finish Event
|
||||
case 'mouseup': {
|
||||
let eventForExecution: (
|
||||
task: Task
|
||||
) => void | Promise<void> = () => {};
|
||||
switch (barEvent) {
|
||||
case 'progress':
|
||||
changedTask.progress = progressByX(event.offsetX, selectedTask);
|
||||
if (onProgressChange) {
|
||||
eventForExecution = onProgressChange;
|
||||
}
|
||||
break;
|
||||
case 'start':
|
||||
const newX1 = startByX(event.offsetX, xStep, selectedTask);
|
||||
changedTask.start = dateByX(
|
||||
newX1,
|
||||
selectedTask.x1,
|
||||
selectedTask.start,
|
||||
xStep,
|
||||
timeStep
|
||||
);
|
||||
if (onDateChange && newX1 !== selectedTask.x1) {
|
||||
eventForExecution = onDateChange;
|
||||
}
|
||||
break;
|
||||
case 'end':
|
||||
const newX2 = endByX(event.offsetX, xStep, selectedTask);
|
||||
changedTask.end = dateByX(
|
||||
newX2,
|
||||
selectedTask.x2,
|
||||
selectedTask.end,
|
||||
xStep,
|
||||
timeStep
|
||||
);
|
||||
|
||||
if (onDateChange && newX2 !== selectedTask.x2) {
|
||||
eventForExecution = onDateChange;
|
||||
}
|
||||
break;
|
||||
case 'move':
|
||||
const [newMoveX1, newMoveX2] = moveByX(
|
||||
event.offsetX - initEventX1Delta,
|
||||
xStep,
|
||||
selectedTask
|
||||
);
|
||||
changedTask.start = dateByX(
|
||||
newMoveX1,
|
||||
selectedTask.x1,
|
||||
selectedTask.start,
|
||||
xStep,
|
||||
timeStep
|
||||
);
|
||||
changedTask.end = dateByX(
|
||||
newMoveX2,
|
||||
selectedTask.x2,
|
||||
selectedTask.end,
|
||||
xStep,
|
||||
timeStep
|
||||
);
|
||||
if (
|
||||
onDateChange &&
|
||||
newMoveX1 !== selectedTask.x1 &&
|
||||
newMoveX2 !== selectedTask.x2
|
||||
) {
|
||||
eventForExecution = onDateChange;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
setBarEvent('');
|
||||
setSelectedTask(null);
|
||||
setIsSVGListen(false);
|
||||
svg.current?.removeEventListener(
|
||||
'mousemove',
|
||||
handleMouseSVGChangeEventsSubscribe
|
||||
);
|
||||
svg.current?.removeEventListener(
|
||||
'mouseup',
|
||||
handleMouseSVGChangeEventsSubscribe
|
||||
);
|
||||
|
||||
//If update successful - update Gantt state, otherwise we shell back old Bar state
|
||||
await eventForExecution(changedTask);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (selectedTask && barEvent && !isSVGListen) {
|
||||
svg.current?.addEventListener(
|
||||
'mousemove',
|
||||
handleMouseSVGChangeEventsSubscribe
|
||||
);
|
||||
svg.current?.addEventListener(
|
||||
'mouseup',
|
||||
handleMouseSVGChangeEventsSubscribe
|
||||
);
|
||||
setIsSVGListen(true);
|
||||
}
|
||||
}, [
|
||||
barEvent,
|
||||
selectedTask,
|
||||
xStep,
|
||||
svg,
|
||||
initEventX1Delta,
|
||||
barTasks,
|
||||
onProgressChange,
|
||||
timeStep,
|
||||
onDateChange,
|
||||
isSVGListen,
|
||||
]);
|
||||
|
||||
/**
|
||||
* Method is Start point of task change
|
||||
* @param event init mouse event
|
||||
* @param eventType
|
||||
* @param task events task
|
||||
*/
|
||||
const handleMouseEvents = (
|
||||
event:
|
||||
| React.MouseEvent<SVGPolygonElement, MouseEvent>
|
||||
| React.MouseEvent<SVGRectElement, MouseEvent>
|
||||
| React.MouseEvent<SVGGElement, MouseEvent>,
|
||||
eventType: BarEvent,
|
||||
task: BarTask
|
||||
) => {
|
||||
switch (event.type) {
|
||||
case 'mousedown':
|
||||
setBarEvent(eventType);
|
||||
setSelectedTask(task);
|
||||
setInitEventX1Delta(event.nativeEvent.offsetX - task.x1);
|
||||
event.stopPropagation();
|
||||
break;
|
||||
case 'mouseleave':
|
||||
if (!barEvent) setSelectedTask(null);
|
||||
break;
|
||||
case 'mouseenter':
|
||||
if (!selectedTask) {
|
||||
setSelectedTask(task);
|
||||
}
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Method handles Bar keyboard events
|
||||
* @param event
|
||||
* @param task
|
||||
*/
|
||||
const handleButtonSVGEvents = async (
|
||||
event: React.KeyboardEvent<SVGGElement>,
|
||||
task: BarTask
|
||||
) => {
|
||||
if (task.isDisabled) return;
|
||||
switch (event.key) {
|
||||
case 'Delete': {
|
||||
if (onTaskDelete) {
|
||||
onTaskDelete(task);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<g className="arrow" fill={arrowColor} stroke={arrowColor}>
|
||||
{barTasks.map(task => {
|
||||
return task.barChildren.map(child => {
|
||||
return (
|
||||
<Arrow
|
||||
key={`Arrow from ${task.id} to ${barTasks[child].id}`}
|
||||
taskFrom={task}
|
||||
taskTo={barTasks[child]}
|
||||
rowHeight={rowHeight}
|
||||
arrowIndent={arrowIndent}
|
||||
/>
|
||||
);
|
||||
});
|
||||
})}
|
||||
</g>
|
||||
<g className="bar" fontFamily={fontFamily} fontSize={fontSize}>
|
||||
{barTasks.map(task => {
|
||||
return (
|
||||
<Bar
|
||||
task={task}
|
||||
arrowIndent={arrowIndent}
|
||||
isProgressChangeable={!!onProgressChange && !task.isDisabled}
|
||||
onDoubleClick={onDoubleClick}
|
||||
isDateChangeable={!!onDateChange && !task.isDisabled}
|
||||
handleMouseEvents={handleMouseEvents}
|
||||
handleButtonSVGEvents={handleButtonSVGEvents}
|
||||
key={task.id}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
<g className="toolTip">
|
||||
{selectedTask && barEvent !== 'end' && barEvent !== 'start' && (
|
||||
<Tooltip
|
||||
x={selectedTask.x2 + columnWidth + arrowIndent}
|
||||
y={selectedTask.y + rowHeight}
|
||||
task={selectedTask}
|
||||
fontFamily={fontFamily}
|
||||
fontSize={fontSize}
|
||||
getTooltipContent={getTooltipContent}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
</>
|
||||
);
|
||||
};
|
||||
85
src/components/Gantt/gantt.tsx
Normal file
85
src/components/Gantt/gantt.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { ViewMode, GanttProps } from '../../types/public-types';
|
||||
import { Grid, GridProps } from '../Grid/grid';
|
||||
import { Calendar, CalendarProps } from '../Calendar/calendar';
|
||||
import { GanttContent, GanttContentProps } from './gantt-content';
|
||||
import { ganttDateRange, seedDates } from '../../helpers/date-helper';
|
||||
|
||||
export const Gantt: React.SFC<GanttProps> = ({
|
||||
tasks,
|
||||
headerHeight = 50,
|
||||
columnWidth = 60,
|
||||
rowHeight = 50,
|
||||
viewMode = ViewMode.Day,
|
||||
locale = 'en-GB',
|
||||
barFill = 60,
|
||||
barCornerRadius = 3,
|
||||
handleWidth = 8,
|
||||
timeStep = 300000,
|
||||
arrowColor = 'grey',
|
||||
fontFamily = 'Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
|
||||
fontSize = '14px',
|
||||
arrowIndent = 20,
|
||||
onDateChange,
|
||||
onProgressChange,
|
||||
onDoubleClick,
|
||||
onTaskDelete,
|
||||
getTooltipContent,
|
||||
}) => {
|
||||
const [startDate, endDate] = ganttDateRange(tasks, viewMode);
|
||||
const dates = seedDates(startDate, endDate, viewMode);
|
||||
const svg = useRef<SVGSVGElement | null>(null);
|
||||
|
||||
const gridProps: GridProps = {
|
||||
columnWidth,
|
||||
gridWidth: dates.length * columnWidth,
|
||||
tasks,
|
||||
rowHeight,
|
||||
headerHeight,
|
||||
dates,
|
||||
};
|
||||
const calendarProps: CalendarProps = {
|
||||
dates,
|
||||
locale,
|
||||
viewMode,
|
||||
headerHeight,
|
||||
columnWidth,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
};
|
||||
const barProps: GanttContentProps = {
|
||||
tasks,
|
||||
rowHeight,
|
||||
barCornerRadius,
|
||||
columnWidth,
|
||||
dates,
|
||||
barFill,
|
||||
headerHeight,
|
||||
handleWidth,
|
||||
timeStep,
|
||||
arrowColor,
|
||||
svg,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
arrowIndent,
|
||||
onDateChange,
|
||||
onProgressChange,
|
||||
onDoubleClick,
|
||||
onTaskDelete,
|
||||
getTooltipContent,
|
||||
};
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={columnWidth * dates.length}
|
||||
height={headerHeight + rowHeight * tasks.length}
|
||||
ref={svg}
|
||||
fontFamily={fontFamily}
|
||||
>
|
||||
<Grid {...gridProps} />
|
||||
<Calendar {...calendarProps} />
|
||||
<GanttContent {...barProps} />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
99
src/components/Grid/grid-body.tsx
Normal file
99
src/components/Grid/grid-body.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import React, { ReactChild } from 'react';
|
||||
import { Task } from '../../types/public-types';
|
||||
import { addToDate } from '../../helpers/date-helper';
|
||||
import '../../style.css';
|
||||
|
||||
export type GridBodyProps = {
|
||||
tasks: Task[];
|
||||
dates: Date[];
|
||||
gridWidth: number;
|
||||
rowHeight: number;
|
||||
headerHeight: number;
|
||||
columnWidth: number;
|
||||
};
|
||||
export const GridBody: React.FC<GridBodyProps> = ({
|
||||
tasks,
|
||||
dates,
|
||||
rowHeight,
|
||||
headerHeight,
|
||||
gridWidth,
|
||||
columnWidth,
|
||||
}) => {
|
||||
let y = headerHeight;
|
||||
let gridRows: ReactChild[] = [];
|
||||
let rowLines: ReactChild[] = [];
|
||||
for (const task of tasks) {
|
||||
gridRows.push(
|
||||
<rect
|
||||
key={'Row' + task.id}
|
||||
x="0"
|
||||
y={y}
|
||||
width={gridWidth}
|
||||
height={rowHeight}
|
||||
className="GanttGrid-row"
|
||||
></rect>
|
||||
);
|
||||
rowLines.push(
|
||||
<line
|
||||
key={'RowLine' + task.id}
|
||||
x="0"
|
||||
y1={y + rowHeight}
|
||||
x2={gridWidth}
|
||||
y2={y + rowHeight}
|
||||
className="GanttGrid-rowLine"
|
||||
></line>
|
||||
);
|
||||
y += rowHeight;
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
let tickX = 0;
|
||||
let ticks: ReactChild[] = [];
|
||||
let today: ReactChild = <></>;
|
||||
for (let i = 0; i < dates.length; i++) {
|
||||
const date = dates[i];
|
||||
ticks.push(
|
||||
<line
|
||||
key={date.getTime()}
|
||||
x1={tickX}
|
||||
y1={headerHeight}
|
||||
x2={tickX}
|
||||
y2={y}
|
||||
className="GanttGrid-tick"
|
||||
></line>
|
||||
);
|
||||
if (
|
||||
(i + 1 !== dates.length &&
|
||||
date.getTime() < now.getTime() &&
|
||||
dates[i + 1].getTime() >= now.getTime()) ||
|
||||
//if current date is last
|
||||
(i !== 0 &&
|
||||
i + 1 === dates.length &&
|
||||
date.getTime() < now.getTime() &&
|
||||
addToDate(
|
||||
date,
|
||||
date.getTime() - dates[i - 1].getTime(),
|
||||
'millisecond'
|
||||
).getTime() >= now.getTime())
|
||||
) {
|
||||
today = (
|
||||
<rect
|
||||
x={tickX}
|
||||
y={0}
|
||||
width={columnWidth}
|
||||
height={y}
|
||||
className="GanttGrid-todayHighlight"
|
||||
></rect>
|
||||
);
|
||||
}
|
||||
tickX += columnWidth;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<g className="rows">{gridRows}</g>
|
||||
<g className="rowLines">{rowLines}</g>
|
||||
<g className="ticks">{ticks}</g>
|
||||
<g className="today">{today}</g>
|
||||
</>
|
||||
);
|
||||
};
|
||||
21
src/components/Grid/grid-header.tsx
Normal file
21
src/components/Grid/grid-header.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import '../../style.css';
|
||||
|
||||
export type GridHeaderProps = {
|
||||
gridWidth: number;
|
||||
headerHeight: number;
|
||||
};
|
||||
export const GridHeader: React.FC<GridHeaderProps> = ({
|
||||
gridWidth,
|
||||
headerHeight,
|
||||
}) => {
|
||||
return (
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width={gridWidth}
|
||||
height={headerHeight}
|
||||
className="GanttGrid-header"
|
||||
></rect>
|
||||
);
|
||||
};
|
||||
13
src/components/Grid/grid.tsx
Normal file
13
src/components/Grid/grid.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
import { GridBody, GridBodyProps } from "./grid-body";
|
||||
import { GridHeader, GridHeaderProps } from "./grid-header";
|
||||
|
||||
export type GridProps = GridBodyProps & GridHeaderProps;
|
||||
export const Grid: React.FC<GridProps> = (props) => {
|
||||
return (
|
||||
<g className="grid">
|
||||
<GridHeader {...props} />
|
||||
<GridBody {...props} />
|
||||
</g>
|
||||
);
|
||||
};
|
||||
34
src/components/Other/arrow.tsx
Normal file
34
src/components/Other/arrow.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import React from "react";
|
||||
import { BarTask } from "../../types/bar-task";
|
||||
|
||||
type ArrowProps = {
|
||||
taskFrom: BarTask;
|
||||
taskTo: BarTask;
|
||||
rowHeight: number;
|
||||
arrowIndent: number;
|
||||
};
|
||||
export const Arrow: React.FC<ArrowProps> = ({
|
||||
taskFrom,
|
||||
taskTo,
|
||||
rowHeight,
|
||||
arrowIndent,
|
||||
}) => {
|
||||
const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
|
||||
const taskToEndPosition = taskTo.y + taskTo.height / 2;
|
||||
|
||||
const path = `M ${taskFrom.x2} ${taskFrom.y + taskFrom.height / 2}
|
||||
h ${arrowIndent}
|
||||
v ${(indexCompare * rowHeight) / 2}
|
||||
H ${taskTo.x1 - arrowIndent}
|
||||
V ${taskToEndPosition}
|
||||
h ${arrowIndent}`;
|
||||
const trianglePoints = `${taskTo.x1},${taskToEndPosition}
|
||||
${taskTo.x1 - 5},${taskToEndPosition - 5}
|
||||
${taskTo.x1 - 5},${taskToEndPosition + 5}`;
|
||||
return (
|
||||
<>
|
||||
<path strokeWidth="1.5" d={path} fill="none" />
|
||||
<polygon points={trianglePoints} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
69
src/components/Other/tooltip.tsx
Normal file
69
src/components/Other/tooltip.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import { Task } from '../../types/public-types';
|
||||
import '../../style.css';
|
||||
export type TooltipProps = {
|
||||
x: number;
|
||||
y: number;
|
||||
task: Task;
|
||||
fontSize: string;
|
||||
fontFamily: string;
|
||||
getTooltipContent?: (
|
||||
task: Task,
|
||||
fontSize: string,
|
||||
fontFamily: string
|
||||
) => JSX.Element;
|
||||
};
|
||||
export const Tooltip: React.FC<TooltipProps> = ({
|
||||
x,
|
||||
y,
|
||||
task,
|
||||
fontSize,
|
||||
fontFamily,
|
||||
|
||||
getTooltipContent = getStandardTooltipContent,
|
||||
}) => {
|
||||
const tooltipRef = useRef<HTMLDivElement | null>(null);
|
||||
const [toolWidth, setToolWidth] = useState(1000);
|
||||
const [relatedY, setRelatedY] = useState(y);
|
||||
useEffect(() => {
|
||||
if (tooltipRef.current) {
|
||||
const height =
|
||||
tooltipRef.current.offsetHeight +
|
||||
tooltipRef.current.offsetHeight * 0.15;
|
||||
setRelatedY(y - height);
|
||||
setToolWidth(tooltipRef.current.scrollWidth * 1.1);
|
||||
}
|
||||
}, [tooltipRef, y]);
|
||||
return (
|
||||
<foreignObject x={x} y={relatedY} width={toolWidth} height={1000}>
|
||||
<div ref={tooltipRef} className="TooltipDetailsContainer">
|
||||
{getTooltipContent(task, fontSize, fontFamily)}
|
||||
</div>
|
||||
</foreignObject>
|
||||
);
|
||||
};
|
||||
|
||||
const getStandardTooltipContent = (
|
||||
task: Task,
|
||||
fontSize: string,
|
||||
fontFamily: string
|
||||
) => {
|
||||
const style = {
|
||||
fontSize,
|
||||
fontFamily,
|
||||
};
|
||||
return (
|
||||
<div className="TooltipDefaultContainer" style={style}>
|
||||
<b style={{ fontSize: fontSize + 6 }}>{`${
|
||||
task.name
|
||||
}: ${task.start.getDate()}-${task.start.getMonth() +
|
||||
1}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() +
|
||||
1}-${task.end.getFullYear()}`}</b>
|
||||
<p className="TooltipDefaultContainer-paragraph">{`Duration: ${~~(
|
||||
(task.end.getTime() - task.start.getTime()) /
|
||||
(1000 * 60 * 60 * 24)
|
||||
)} day(s)`}</p>
|
||||
<p className="TooltipDefaultContainer-paragraph">{`Progress: ${task.progress} %`}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
195
src/helpers/bar-helper.ts
Normal file
195
src/helpers/bar-helper.ts
Normal file
@ -0,0 +1,195 @@
|
||||
import { Task } from "../types/public-types";
|
||||
import { BarTask } from "../types/bar-task";
|
||||
|
||||
export const convertToBarTasks = (
|
||||
tasks: Task[],
|
||||
dates: Date[],
|
||||
dateDelta: number,
|
||||
columnWidth: number,
|
||||
rowHeight: number,
|
||||
taskHeight: number,
|
||||
headerHeight: number,
|
||||
barCornerRadius: number,
|
||||
handleWidth: number
|
||||
) => {
|
||||
let barTasks = tasks.map((t, i) => {
|
||||
return convertToBarTask(
|
||||
t,
|
||||
i,
|
||||
dates,
|
||||
dateDelta,
|
||||
columnWidth,
|
||||
rowHeight,
|
||||
taskHeight,
|
||||
headerHeight,
|
||||
barCornerRadius,
|
||||
handleWidth
|
||||
);
|
||||
});
|
||||
|
||||
barTasks = barTasks.map((task, i) => {
|
||||
const dependencies = task.dependencies || [];
|
||||
for (let j = 0; j < dependencies.length; j++) {
|
||||
const dependence = barTasks.findIndex(
|
||||
(value) => value.id === dependencies[j]
|
||||
);
|
||||
if (dependence !== -1) barTasks[dependence].barChildren.push(i);
|
||||
}
|
||||
return task;
|
||||
});
|
||||
|
||||
return barTasks;
|
||||
};
|
||||
|
||||
export const convertToBarTask = (
|
||||
task: Task,
|
||||
index: number,
|
||||
dates: Date[],
|
||||
dateDelta: number,
|
||||
columnWidth: number,
|
||||
rowHeight: number,
|
||||
taskHeight: number,
|
||||
headerHeight: number,
|
||||
barCornerRadius: number,
|
||||
handleWidth: number
|
||||
): BarTask => {
|
||||
const x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
|
||||
const x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
|
||||
const y = taskYCoordinate(index, rowHeight, taskHeight, headerHeight);
|
||||
return {
|
||||
...task,
|
||||
x1,
|
||||
x2,
|
||||
y,
|
||||
index,
|
||||
barCornerRadius,
|
||||
handleWidth,
|
||||
height: taskHeight,
|
||||
barChildren: [],
|
||||
};
|
||||
};
|
||||
|
||||
export const taskXCoordinate = (
|
||||
xDate: Date,
|
||||
dates: Date[],
|
||||
dateDelta: number,
|
||||
columnWidth: number
|
||||
) => {
|
||||
const index = ~~(
|
||||
(xDate.getTime() -
|
||||
dates[0].getTime() +
|
||||
xDate.getTimezoneOffset() -
|
||||
dates[0].getTimezoneOffset()) /
|
||||
dateDelta
|
||||
);
|
||||
const x = Math.round(
|
||||
(index +
|
||||
(xDate.getTime() -
|
||||
dates[index].getTime() -
|
||||
xDate.getTimezoneOffset() * 60 * 1000 +
|
||||
dates[index].getTimezoneOffset() * 60 * 1000) /
|
||||
dateDelta) *
|
||||
columnWidth
|
||||
);
|
||||
return x;
|
||||
};
|
||||
|
||||
export const taskYCoordinate = (
|
||||
index: number,
|
||||
rowHeight: number,
|
||||
taskHeight: number,
|
||||
headerHeight: number
|
||||
) => {
|
||||
const y = index * rowHeight + headerHeight + (rowHeight - taskHeight) / 2;
|
||||
return y;
|
||||
};
|
||||
|
||||
export const progressWithByParams = (
|
||||
taskX1: number,
|
||||
taskX2: number,
|
||||
progress: number
|
||||
) => {
|
||||
return (taskX2 - taskX1) * progress * 0.01;
|
||||
};
|
||||
|
||||
export const progressByProgressWidth = (
|
||||
progressWidth: number,
|
||||
barTask: BarTask
|
||||
) => {
|
||||
const barWidth = barTask.x2 - barTask.x1;
|
||||
const progressPercent = Math.round((progressWidth * 100) / barWidth);
|
||||
if (progressPercent >= 100) return 100;
|
||||
else if (progressPercent <= 0) return 0;
|
||||
else {
|
||||
return progressPercent;
|
||||
}
|
||||
};
|
||||
|
||||
export const progressByX = (x: number, task: BarTask) => {
|
||||
if (x >= task.x2) return 100;
|
||||
else if (x <= task.x1) return 0;
|
||||
else {
|
||||
const barWidth = task.x2 - task.x1;
|
||||
const progressPercent = Math.round(((x - task.x1) * 100) / barWidth);
|
||||
return progressPercent;
|
||||
}
|
||||
};
|
||||
|
||||
export const getProgressPoint = (
|
||||
progressX: number,
|
||||
taskY: number,
|
||||
taskHeight: number
|
||||
) => {
|
||||
const point = [
|
||||
progressX - 5,
|
||||
taskY + taskHeight,
|
||||
progressX + 5,
|
||||
taskY + taskHeight,
|
||||
progressX,
|
||||
taskY + taskHeight - 8.66,
|
||||
];
|
||||
return point.join(",");
|
||||
};
|
||||
|
||||
export const startByX = (x: number, xStep: number, task: BarTask) => {
|
||||
if (x >= task.x2 - task.handleWidth * 2) {
|
||||
x = task.x2 - task.handleWidth * 2;
|
||||
}
|
||||
const steps = Math.round((x - task.x1) / xStep);
|
||||
const additionalXValue = steps * xStep;
|
||||
const newX = task.x1 + additionalXValue;
|
||||
return newX;
|
||||
};
|
||||
|
||||
export const endByX = (x: number, xStep: number, task: BarTask) => {
|
||||
if (x <= task.x1 + task.handleWidth * 2) {
|
||||
x = task.x1 + task.handleWidth * 2;
|
||||
}
|
||||
const steps = Math.round((x - task.x2) / xStep);
|
||||
const additionalXValue = steps * xStep;
|
||||
const newX = task.x2 + additionalXValue;
|
||||
return newX;
|
||||
};
|
||||
|
||||
export const moveByX = (x: number, xStep: number, task: BarTask) => {
|
||||
const steps = Math.round((x - task.x1) / xStep);
|
||||
const additionalXValue = steps * xStep;
|
||||
const newX1 = task.x1 + additionalXValue;
|
||||
const newX2 = newX1 + task.x2 - task.x1;
|
||||
return [newX1, newX2];
|
||||
};
|
||||
|
||||
export const dateByX = (
|
||||
x: number,
|
||||
taskX: number,
|
||||
taskDate: Date,
|
||||
xStep: number,
|
||||
timeStep: number
|
||||
) => {
|
||||
let newDate = new Date(((x - taskX) / xStep) * timeStep + taskDate.getTime());
|
||||
newDate = new Date(
|
||||
newDate.getTime() +
|
||||
(newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000
|
||||
);
|
||||
return newDate;
|
||||
};
|
||||
150
src/helpers/date-helper.ts
Normal file
150
src/helpers/date-helper.ts
Normal file
@ -0,0 +1,150 @@
|
||||
import { Task, ViewMode } from '../types/public-types';
|
||||
|
||||
type DateHelperScales =
|
||||
| 'year'
|
||||
| 'month'
|
||||
| 'day'
|
||||
| 'hour'
|
||||
| 'minute'
|
||||
| 'second'
|
||||
| 'millisecond';
|
||||
|
||||
export const addToDate = (
|
||||
date: Date,
|
||||
quantity: number,
|
||||
scale: DateHelperScales
|
||||
) => {
|
||||
let newDate = new Date(
|
||||
date.getFullYear() + (scale === 'year' ? quantity : 0),
|
||||
date.getMonth() + (scale === 'month' ? quantity : 0),
|
||||
date.getDate() + (scale === 'day' ? quantity : 0),
|
||||
date.getHours() + (scale === 'hour' ? quantity : 0),
|
||||
date.getMinutes() + (scale === 'minute' ? quantity : 0),
|
||||
date.getSeconds() + (scale === 'second' ? quantity : 0),
|
||||
date.getMilliseconds() + (scale === 'millisecond' ? quantity : 0)
|
||||
);
|
||||
return newDate;
|
||||
};
|
||||
|
||||
export const startOfDate = (date: Date, scale: DateHelperScales) => {
|
||||
const scores = [
|
||||
'millisecond',
|
||||
'second',
|
||||
'minute',
|
||||
'hour',
|
||||
'day',
|
||||
'month',
|
||||
'year',
|
||||
];
|
||||
|
||||
const shouldReset = (_scale: DateHelperScales) => {
|
||||
const max_score = scores.indexOf(scale);
|
||||
return scores.indexOf(_scale) <= max_score;
|
||||
};
|
||||
let newDate = new Date(
|
||||
date.getFullYear(),
|
||||
shouldReset('year') ? 0 : date.getMonth(),
|
||||
shouldReset('month') ? 1 : date.getDate(),
|
||||
shouldReset('day') ? 0 : date.getHours(),
|
||||
shouldReset('hour') ? 0 : date.getMinutes(),
|
||||
shouldReset('minute') ? 0 : date.getSeconds(),
|
||||
shouldReset('second') ? 0 : date.getMilliseconds()
|
||||
);
|
||||
return newDate;
|
||||
};
|
||||
|
||||
export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
|
||||
let newStartDate: Date = tasks[0].start;
|
||||
let newEndDate: Date = tasks[0].end;
|
||||
for (let task of tasks) {
|
||||
if (task.start < newStartDate) {
|
||||
newStartDate = task.start;
|
||||
}
|
||||
if (task.end > newEndDate) {
|
||||
newEndDate = task.end;
|
||||
}
|
||||
}
|
||||
|
||||
if (viewMode === ViewMode.Month) {
|
||||
newStartDate = addToDate(newStartDate, -1, 'month');
|
||||
newEndDate = addToDate(newEndDate, 1, 'year');
|
||||
newEndDate = startOfDate(newEndDate, 'year');
|
||||
} else if (viewMode === ViewMode.Week) {
|
||||
newStartDate = startOfDate(newStartDate, 'day');
|
||||
newEndDate = startOfDate(newEndDate, 'day');
|
||||
|
||||
newStartDate = addToDate(getMonday(newStartDate), -7, 'day');
|
||||
newEndDate = addToDate(newEndDate, 1.5, 'month');
|
||||
} else {
|
||||
newStartDate = startOfDate(newStartDate, 'day');
|
||||
newEndDate = startOfDate(newEndDate, 'day');
|
||||
newStartDate = addToDate(newStartDate, -1, 'day');
|
||||
newEndDate = addToDate(newEndDate, 19, 'day');
|
||||
}
|
||||
return [newStartDate, newEndDate];
|
||||
};
|
||||
|
||||
export const seedDates = (
|
||||
startDate: Date,
|
||||
endDate: Date,
|
||||
viewMode: ViewMode
|
||||
) => {
|
||||
let currentDate: Date = new Date(startDate);
|
||||
let dates: Date[] = [currentDate];
|
||||
while (currentDate < endDate) {
|
||||
if (viewMode === ViewMode.Month) {
|
||||
currentDate = addToDate(currentDate, 1, 'month');
|
||||
} else if (viewMode === ViewMode.Week) {
|
||||
currentDate = addToDate(currentDate, 7, 'day');
|
||||
} else if (viewMode === ViewMode.Day) {
|
||||
currentDate = addToDate(currentDate, 1, 'day');
|
||||
} else if (viewMode === ViewMode.HalfDay) {
|
||||
currentDate = addToDate(currentDate, 12, 'hour');
|
||||
} else if (viewMode === ViewMode.QuarterDay) {
|
||||
currentDate = addToDate(currentDate, 6, 'hour');
|
||||
}
|
||||
dates.push(currentDate);
|
||||
}
|
||||
return dates;
|
||||
};
|
||||
|
||||
export const getLocaleMonth = (date: Date, locale: string) => {
|
||||
let bottomValue = new Intl.DateTimeFormat(locale, {
|
||||
month: 'long',
|
||||
}).format(date);
|
||||
bottomValue = bottomValue.replace(
|
||||
bottomValue[0],
|
||||
bottomValue[0].toLocaleUpperCase()
|
||||
);
|
||||
return bottomValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns monday of current week
|
||||
* @param date date for modify
|
||||
*/
|
||||
const getMonday = (date: Date) => {
|
||||
const day = date.getDay();
|
||||
const diff = date.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
|
||||
return new Date(date.setDate(diff));
|
||||
};
|
||||
|
||||
export const getWeekNumberISO8601 = (date: Date) => {
|
||||
let tmpDate = new Date(date.valueOf());
|
||||
const dayNumber = (tmpDate.getDay() + 6) % 7;
|
||||
tmpDate.setDate(tmpDate.getDate() - dayNumber + 3);
|
||||
const firstThursday = tmpDate.valueOf();
|
||||
tmpDate.setMonth(0, 1);
|
||||
if (tmpDate.getDay() !== 4) {
|
||||
tmpDate.setMonth(0, 1 + ((4 - tmpDate.getDay() + 7) % 7));
|
||||
}
|
||||
const weekNumber = (
|
||||
1 + Math.ceil((firstThursday - tmpDate.valueOf()) / 604800000)
|
||||
).toString();
|
||||
|
||||
if (weekNumber.length === 1) {
|
||||
return `0${weekNumber}`;
|
||||
} else {
|
||||
return weekNumber;
|
||||
}
|
||||
};
|
||||
9
src/index.tsx
Normal file
9
src/index.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
export { Gantt } from './components/Gantt/gantt';
|
||||
export {
|
||||
GanttProps,
|
||||
Task,
|
||||
ViewMode,
|
||||
StylingOption,
|
||||
DisplayOption,
|
||||
EventOption,
|
||||
} from './types/public-types';
|
||||
34
src/reducers/reducers.ts
Normal file
34
src/reducers/reducers.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { Task } from "../types/public-types";
|
||||
|
||||
type GanttReduceState = {
|
||||
ganttTasks: Task[];
|
||||
};
|
||||
|
||||
export type GanttReduceAction = {
|
||||
type: "update" | "delete";
|
||||
changedTask?: Task;
|
||||
};
|
||||
|
||||
export function ganttReducer(
|
||||
state: GanttReduceState,
|
||||
action: GanttReduceAction
|
||||
): GanttReduceState {
|
||||
switch (action.type) {
|
||||
case "update": {
|
||||
return {
|
||||
ganttTasks: state.ganttTasks.map((t) =>
|
||||
t.id === action.changedTask?.id ? action.changedTask : t
|
||||
),
|
||||
};
|
||||
}
|
||||
case "delete": {
|
||||
return {
|
||||
ganttTasks: state.ganttTasks.filter(
|
||||
(t) => t.id !== action.changedTask?.id
|
||||
),
|
||||
};
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
109
src/style.css
Normal file
109
src/style.css
Normal file
@ -0,0 +1,109 @@
|
||||
.GanttBar {
|
||||
user-select: none;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.GanttBar-wrapper {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.GanttBar-wrapper:hover .GanttBar-handle {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.GanttBar-label {
|
||||
fill: #fff;
|
||||
text-anchor: middle;
|
||||
font-weight: lighter;
|
||||
dominant-baseline: central;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.GanttBar-label-outside {
|
||||
fill: #555;
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.GanttBar-handle {
|
||||
fill: #ddd;
|
||||
cursor: ew-resize;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.GanttCalendar-bottomText {
|
||||
text-anchor: middle;
|
||||
fill: #333;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.GanttCalendar-topTick {
|
||||
stroke: #e6e4e4;
|
||||
}
|
||||
|
||||
.GanttCalendar-topText {
|
||||
text-anchor: middle;
|
||||
fill: #555;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.GanttGrid-row {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.GanttGrid-row:nth-child(even) {
|
||||
fill: #f5f5f5;
|
||||
}
|
||||
|
||||
.GanttGrid-header {
|
||||
fill: #ffffff;
|
||||
stroke: #e0e0e0;
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
|
||||
.GanttGrid-rowLine {
|
||||
stroke: #ebeff2;
|
||||
}
|
||||
|
||||
.GanttGrid-tick {
|
||||
stroke: #e6e4e4;
|
||||
}
|
||||
|
||||
.GanttGrid-todayHighlight {
|
||||
fill: #fcf8e3;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.TooltipDefaultContainer {
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.TooltipDefaultContainer-paragraph {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.TooltipDetailsContainer {
|
||||
display: table;
|
||||
}
|
||||
12
src/types/bar-task.ts
Normal file
12
src/types/bar-task.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { Task } from "./public-types";
|
||||
|
||||
export interface BarTask extends Task {
|
||||
index: number;
|
||||
x1: number;
|
||||
x2: number;
|
||||
y: number;
|
||||
height: number;
|
||||
barCornerRadius: number;
|
||||
handleWidth: number;
|
||||
barChildren: number[];
|
||||
}
|
||||
71
src/types/public-types.ts
Normal file
71
src/types/public-types.ts
Normal file
@ -0,0 +1,71 @@
|
||||
export enum ViewMode {
|
||||
QuarterDay = 'Quarter Day',
|
||||
HalfDay = 'Half Day',
|
||||
Day = 'Day',
|
||||
/** ISO-8601 week */
|
||||
Week = 'Week',
|
||||
Month = 'Month',
|
||||
}
|
||||
export interface Task {
|
||||
id: string;
|
||||
name: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
/**
|
||||
* From 0 to 100
|
||||
*/
|
||||
progress: number;
|
||||
styles?: {
|
||||
backgroundColor?: string;
|
||||
backgroundSelectedColor?: string;
|
||||
progressColor?: string;
|
||||
progressSelectedColor?: string;
|
||||
};
|
||||
isDisabled?: boolean;
|
||||
dependencies?: string[];
|
||||
}
|
||||
|
||||
export interface EventOption {
|
||||
/**
|
||||
* Time step value for date changes.
|
||||
*/
|
||||
timeStep?: number;
|
||||
onDoubleClick?: (task: Task) => any;
|
||||
onDateChange?: (task: Task) => void | Promise<any>;
|
||||
onProgressChange?: (task: Task) => void | Promise<any>;
|
||||
onTaskDelete?: (task: Task) => void | Promise<any>;
|
||||
}
|
||||
|
||||
export interface DisplayOption {
|
||||
viewMode?: ViewMode;
|
||||
/**
|
||||
* Display date format. Able formats: ISO 639-2, Java Locale
|
||||
*/
|
||||
locale?: string;
|
||||
}
|
||||
|
||||
export interface StylingOption {
|
||||
headerHeight?: number;
|
||||
columnWidth?: number;
|
||||
rowHeight?: number;
|
||||
barCornerRadius?: number;
|
||||
handleWidth?: number;
|
||||
fontFamily?: string;
|
||||
fontSize?: string;
|
||||
/**
|
||||
* How many of row width can be taken by task.
|
||||
* From 0 to 100
|
||||
*/
|
||||
barFill?: number;
|
||||
arrowColor?: string;
|
||||
arrowIndent?: number;
|
||||
getTooltipContent?: (
|
||||
task: Task,
|
||||
fontSize: string,
|
||||
fontFamily: string
|
||||
) => JSX.Element;
|
||||
}
|
||||
|
||||
export interface GanttProps extends EventOption, DisplayOption, StylingOption {
|
||||
tasks: Task[];
|
||||
}
|
||||
73
test/date-helper.test.tsx
Normal file
73
test/date-helper.test.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import {
|
||||
seedDates,
|
||||
addToDate,
|
||||
getWeekNumberISO8601,
|
||||
} from '../src/helpers/date-helper';
|
||||
import { ViewMode } from '../src/types/public-types';
|
||||
|
||||
describe('seed date', () => {
|
||||
test('daily', () => {
|
||||
expect(
|
||||
seedDates(new Date(2020, 5, 28), new Date(2020, 6, 2), ViewMode.Day)
|
||||
).toEqual([
|
||||
new Date(2020, 5, 28),
|
||||
new Date(2020, 5, 29),
|
||||
new Date(2020, 5, 30),
|
||||
new Date(2020, 6, 1),
|
||||
new Date(2020, 6, 2),
|
||||
]);
|
||||
});
|
||||
|
||||
test('weekly', () => {
|
||||
expect(
|
||||
seedDates(new Date(2020, 5, 28), new Date(2020, 6, 19), ViewMode.Week)
|
||||
).toEqual([
|
||||
new Date(2020, 5, 28),
|
||||
new Date(2020, 6, 5),
|
||||
new Date(2020, 6, 12),
|
||||
new Date(2020, 6, 19),
|
||||
]);
|
||||
});
|
||||
|
||||
test('monthly', () => {
|
||||
expect(
|
||||
seedDates(new Date(2020, 5, 28), new Date(2020, 6, 19), ViewMode.Month)
|
||||
).toEqual([new Date(2020, 5, 28), new Date(2020, 6, 28)]);
|
||||
});
|
||||
|
||||
test('quarterly', () => {
|
||||
expect(
|
||||
seedDates(
|
||||
new Date(2020, 5, 28),
|
||||
new Date(2020, 5, 29),
|
||||
ViewMode.QuarterDay
|
||||
)
|
||||
).toEqual([
|
||||
new Date(2020, 5, 28, 0, 0),
|
||||
new Date(2020, 5, 28, 6, 0),
|
||||
new Date(2020, 5, 28, 12, 0),
|
||||
new Date(2020, 5, 28, 18, 0),
|
||||
new Date(2020, 5, 29, 0, 0),
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('add to date', () => {
|
||||
test('add month', () => {
|
||||
expect(addToDate(new Date(2020, 0, 1), 40, 'month')).toEqual(
|
||||
new Date(2023, 4, 1)
|
||||
);
|
||||
});
|
||||
|
||||
test('add day', () => {
|
||||
expect(addToDate(new Date(2020, 0, 1), 40, 'day')).toEqual(
|
||||
new Date(2020, 1, 10)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test('get week number', () => {
|
||||
expect(getWeekNumberISO8601(new Date(2019, 11, 31))).toEqual('01');
|
||||
expect(getWeekNumberISO8601(new Date(2021, 0, 1))).toEqual('53');
|
||||
expect(getWeekNumberISO8601(new Date(2020, 6, 20))).toEqual('30');
|
||||
});
|
||||
24
test/gant.test.tsx
Normal file
24
test/gant.test.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Gantt } from '../src/index';
|
||||
|
||||
describe('gantt', () => {
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(
|
||||
<Gantt
|
||||
tasks={[
|
||||
{
|
||||
start: new Date(2020, 0, 1),
|
||||
end: new Date(2020, 2, 2),
|
||||
name: 'Redesign website',
|
||||
id: 'Task 0',
|
||||
progress: 45,
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
div
|
||||
);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
});
|
||||
23
tsconfig.json
Normal file
23
tsconfig.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"include": ["src", "types", "tsdx.config.js", "tsdx.config.js"],
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": ["dom", "esnext"],
|
||||
"importHelpers": true,
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"moduleResolution": "node",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"*": ["src/*", "node_modules/*"]
|
||||
},
|
||||
"jsx": "react",
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
20
tsdx.config.js
Normal file
20
tsdx.config.js
Normal file
@ -0,0 +1,20 @@
|
||||
const postcss = require('rollup-plugin-postcss');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const cssnano = require('cssnano');
|
||||
module.exports = {
|
||||
rollup(config, options) {
|
||||
config.plugins.push(
|
||||
postcss({
|
||||
plugins: [
|
||||
autoprefixer(),
|
||||
cssnano({
|
||||
preset: 'default',
|
||||
}),
|
||||
],
|
||||
inject: false,
|
||||
extract: !!options.writeMeta,
|
||||
})
|
||||
);
|
||||
return config;
|
||||
},
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user