WuJi/gantt-task-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bar styling changes + doc update

Browse Source
This commit is contained in:
unknown 2020-07-30 00:01:51 +03:00
parent d3005290e7
commit a43ad614d9
11 changed files with 91 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@ -1,6 +1,6 @@
<h1 align="center">gantt-task-react</h1>
<h2 align="center">Interactive Gantt Chart for React with TypeScript.</h2>
<img src="https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png"/>
#gantt-task-react
##Interactive Gantt Chart for React with TypeScript.
![example](https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png")
## Install
@ -51,28 +51,28 @@ npm start
### GanttProps
| Parameter Name | Type | Required | Description |
| ------------------------------- | :-------- | :------- | :------------------------------------------------------------------------------------ |
| tasks | Task | Yes | Tasks array. |
| [EventOption](#EventOption) | interface | No | Specifies the function to be executed on the bar`s on Delete button press event. |
| [DisplayOption](#DisplayOption) | interface | No | Specifies the function to be executed when drag bar`s event on timeline has finished. |
| StylingOption | interface | No | Specifies the function to be executed when drag bar`s progress event has finished |
| Parameter Name | Type | Required | Description |
| :------------------------------ | :-------- | :------- | :------------------------------------------------- |
| tasks | Task | Yes | Tasks array. |
| [EventOption](#EventOption) | interface | No | Specifies gantt events. |
| [DisplayOption](#DisplayOption) | interface | No | Specifies view type and display timeline language. |
| StylingOption | interface | No | Specifies chart and global tasks styles |
### EventOption
| Parameter Name | Type | Required | Description |
| ---------------- | :-------------------------------- | :------- | :------------------------------------------------------------------------------------ |
| :--------------- | :-------------------------------- | :------- | :------------------------------------------------------------------------------------ |
| onDoubleClick | (task: Task) => any | No | Specifies the function to be executed on the bar`s onDoubleClick event. |
| onTaskDelete | (task: Task) => void/Promise<any> | No | Specifies the function to be executed on the bar`s on Delete button press event. |
| onDateChange | (task: Task) => void/Promise<any> | No | Specifies the function to be executed when drag bar`s event on timeline has finished. |
| onProgressChange | (task: Task) => void/Promise<any> | No | Specifies the function to be executed when drag bar`s progress event has finished |
| timeStep | number | No | A time step value for onDateChange. Specify in milliseconds |
| onProgressChange | (task: Task) => void/Promise<any> | No | Specifies the function to be executed when drag bar`s progress event has finished. |
| timeStep | number | No | A time step value for onDateChange. Specify in milliseconds. |
### DisplayOption
| Parameter Name | Type | Required | Description |
| -------------- | :----- | :------- | :--------------------------------------------------------------------------------------------- |
| viewMode | enum | No | Specifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month |
| locale | string | No | Specifies the month name language. Able formats: ISO 639-2, Java Locale. |
| Parameter Name | Type | Required | Description |
| :------------- | :----- | :------- | :---------------------------------------------------------------------------------------------- |
| viewMode | enum | No | Specifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
| locale | string | No | Specifies the month name language. Able formats: ISO 639-2, Java Locale. |
Work in progress

2
package.json
View File

@ -1,5 +1,5 @@
{
"version": "0.1.0",
"version": "0.0.2",
"license": "MIT",
"name": "gantt-task-react",
"author": "Maksym Vikarii <maksym.vikarii@gmail.com>",

34
src/components/Bar/bar-display.tsx
View File

@ -12,11 +12,11 @@ type BarDisplayProps = {
text: string;
hasChild: boolean;
arrowIndent: number;
styles?: {
backgroundColor?: string;
backgroundSelectedColor?: string;
progressColor?: string;
progressSelectedColor?: string;
styles: {
backgroundColor: string;
backgroundSelectedColor: string;
progressColor: string;
progressSelectedColor: string;
};
onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
};
@ -43,19 +43,17 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
}, [textRef, width]);
const getProcessColor = () => {
if (isSelected) {
return styles?.progressSelectedColor || '#8282f5';
} else {
return styles?.progressColor || '#a3a3ff';
}
return isSelected ? styles.progressSelectedColor : styles.progressColor;
};
const getBarColor = () => {
if (isSelected) {
return styles?.backgroundSelectedColor || '#aeb8c2';
} else {
return styles?.backgroundColor || '#b8c2cc';
}
return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
};
const getX = () => {
return isTextInside
? x + width * 0.5
: x + width + arrowIndent * +hasChild + arrowIndent * 0.2;
};
return (
@ -80,11 +78,7 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
fill={getProcessColor()}
/>
<text
x={
isTextInside
? x + width * 0.5
: x + width + arrowIndent * +hasChild + arrowIndent * 0.2
}
x={getX()}
y={y + height * 0.5}
className={`GanttBar-label ${
isTextInside ? '' : 'GanttBar-label-outside'

1
src/components/Bar/bar.tsx
View File

@ -115,7 +115,6 @@ export const Bar: React.FC<BarProps> = ({
<BarProgressHandle
progressPoint={progressPoint}
onMouseDown={e => {
console.log('progress');
handleMouseEvents(e, 'progress', task);
}}
/>

14
src/components/Gantt/gantt-content.tsx
View File

@ -26,6 +26,10 @@ export type GanttContentProps = {
barCornerRadius: number;
columnWidth: number;
barFill: number;
barProgressColor: string;
barProgressSelectedColor: string;
barBackgroundColor: string;
barBackgroundSelectedColor: string;
headerHeight: number;
handleWidth: number;
svg: React.MutableRefObject<SVGSVGElement | null>;
@ -56,6 +60,10 @@ export const GanttContent: React.FC<GanttContentProps> = ({
columnWidth,
dates,
barFill,
barProgressColor,
barProgressSelectedColor,
barBackgroundColor,
barBackgroundSelectedColor,
headerHeight,
handleWidth,
arrowColor,
@ -107,7 +115,11 @@ export const GanttContent: React.FC<GanttContentProps> = ({
taskHeight,
headerHeight,
barCornerRadius,
handleWidth
handleWidth,
barProgressColor,
barProgressSelectedColor,
barBackgroundColor,
barBackgroundSelectedColor
)
);
}, [

10
src/components/Gantt/gantt.tsx
View File

@ -14,12 +14,17 @@ export const Gantt: React.SFC<GanttProps> = ({
locale = 'en-GB',
barFill = 60,
barCornerRadius = 3,
barProgressColor = '#a3a3ff',
barProgressSelectedColor = '#8282f5',
barBackgroundColor = '#b8c2cc',
barBackgroundSelectedColor = '#aeb8c2',
handleWidth = 8,
timeStep = 300000,
arrowColor = 'grey',
fontFamily = 'Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
fontSize = '14px',
arrowIndent = 20,
todayColor = 'rgba(252, 248, 227, 0.5)',
onDateChange,
onProgressChange,
onDoubleClick,
@ -37,6 +42,7 @@ export const Gantt: React.SFC<GanttProps> = ({
rowHeight,
headerHeight,
dates,
todayColor,
};
const calendarProps: CalendarProps = {
dates,
@ -54,6 +60,10 @@ export const Gantt: React.SFC<GanttProps> = ({
columnWidth,
dates,
barFill,
barProgressColor,
barProgressSelectedColor,
barBackgroundColor,
barBackgroundSelectedColor,
headerHeight,
handleWidth,
timeStep,

4
src/components/Grid/grid-body.tsx
View File

@ -10,6 +10,7 @@ export type GridBodyProps = {
rowHeight: number;
headerHeight: number;
columnWidth: number;
todayColor: string;
};
export const GridBody: React.FC<GridBodyProps> = ({
tasks,
@ -18,6 +19,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
headerHeight,
gridWidth,
columnWidth,
todayColor,
}) => {
let y = headerHeight;
let gridRows: ReactChild[] = [];
@ -82,7 +84,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
y={0}
width={columnWidth}
height={y}
className="GanttGrid-todayHighlight"
fill={todayColor}
></rect>
);
}

26
src/helpers/bar-helper.ts
View File

@ -10,7 +10,11 @@ export const convertToBarTasks = (
taskHeight: number,
headerHeight: number,
barCornerRadius: number,
handleWidth: number
handleWidth: number,
barProgressColor: string,
barProgressSelectedColor: string,
barBackgroundColor: string,
barBackgroundSelectedColor: string
) => {
let barTasks = tasks.map((t, i) => {
return convertToBarTask(
@ -23,7 +27,11 @@ export const convertToBarTasks = (
taskHeight,
headerHeight,
barCornerRadius,
handleWidth
handleWidth,
barProgressColor,
barProgressSelectedColor,
barBackgroundColor,
barBackgroundSelectedColor
);
});
@ -51,11 +59,22 @@ export const convertToBarTask = (
taskHeight: number,
headerHeight: number,
barCornerRadius: number,
handleWidth: number
handleWidth: number,
barProgressColor: string,
barProgressSelectedColor: string,
barBackgroundColor: string,
barBackgroundSelectedColor: string
): BarTask => {
const x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
const x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
const y = taskYCoordinate(index, rowHeight, taskHeight, headerHeight);
const styles = {
backgroundColor: barBackgroundColor,
backgroundSelectedColor: barBackgroundSelectedColor,
progressColor: barProgressColor,
progressSelectedColor: barProgressSelectedColor,
...task.styles,
};
return {
...task,
x1,
@ -66,6 +85,7 @@ export const convertToBarTask = (
handleWidth,
height: taskHeight,
barChildren: [],
styles,
};
};

5
src/style.css
View File

@ -87,11 +87,6 @@
stroke: #e6e4e4;
}
.GanttGrid-todayHighlight {
fill: #fcf8e3;
opacity: 0.5;
}
.TooltipDefaultContainer {
background: #fff;
padding: 12px;

6
src/types/bar-task.ts
View File

@ -9,4 +9,10 @@ export interface BarTask extends Task {
barCornerRadius: number;
handleWidth: number;
barChildren: number[];
styles: {
backgroundColor: string;
backgroundSelectedColor: string;
progressColor: string;
progressSelectedColor: string;
};
}

5
src/types/public-types.ts
View File

@ -57,8 +57,13 @@ export interface StylingOption {
* From 0 to 100
*/
barFill?: number;
barProgressColor?: string;
barProgressSelectedColor?: string;
barBackgroundColor?: string;
barBackgroundSelectedColor?: string;
arrowColor?: string;
arrowIndent?: number;
todayColor?: string;
getTooltipContent?: (
task: Task,
fontSize: string,