diff --git a/README.md b/README.md
index 9b02cad..0ca00ce 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-gantt-task-react
-Interactive Gantt Chart for React with TypeScript.
-
+#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 | No | Specifies the function to be executed on the bar`s on Delete button press event. |
| onDateChange | (task: Task) => void/Promise | No | Specifies the function to be executed when drag bar`s event on timeline has finished. |
-| onProgressChange | (task: Task) => void/Promise | 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 | 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
diff --git a/package.json b/package.json
index 1e52c27..829bcae 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "version": "0.1.0",
+ "version": "0.0.2",
"license": "MIT",
"name": "gantt-task-react",
"author": "Maksym Vikarii ",
diff --git a/src/components/Bar/bar-display.tsx b/src/components/Bar/bar-display.tsx
index 285d6cc..45b8787 100644
--- a/src/components/Bar/bar-display.tsx
+++ b/src/components/Bar/bar-display.tsx
@@ -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) => void;
};
@@ -43,19 +43,17 @@ export const BarDisplay: React.FC = ({
}, [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 = ({
fill={getProcessColor()}
/>
= ({
{
- console.log('progress');
handleMouseEvents(e, 'progress', task);
}}
/>
diff --git a/src/components/Gantt/gantt-content.tsx b/src/components/Gantt/gantt-content.tsx
index 1dec417..7d99cc5 100644
--- a/src/components/Gantt/gantt-content.tsx
+++ b/src/components/Gantt/gantt-content.tsx
@@ -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;
@@ -56,6 +60,10 @@ export const GanttContent: React.FC = ({
columnWidth,
dates,
barFill,
+ barProgressColor,
+ barProgressSelectedColor,
+ barBackgroundColor,
+ barBackgroundSelectedColor,
headerHeight,
handleWidth,
arrowColor,
@@ -107,7 +115,11 @@ export const GanttContent: React.FC = ({
taskHeight,
headerHeight,
barCornerRadius,
- handleWidth
+ handleWidth,
+ barProgressColor,
+ barProgressSelectedColor,
+ barBackgroundColor,
+ barBackgroundSelectedColor
)
);
}, [
diff --git a/src/components/Gantt/gantt.tsx b/src/components/Gantt/gantt.tsx
index 511d3cd..edfad59 100644
--- a/src/components/Gantt/gantt.tsx
+++ b/src/components/Gantt/gantt.tsx
@@ -14,12 +14,17 @@ export const Gantt: React.SFC = ({
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 = ({
rowHeight,
headerHeight,
dates,
+ todayColor,
};
const calendarProps: CalendarProps = {
dates,
@@ -54,6 +60,10 @@ export const Gantt: React.SFC = ({
columnWidth,
dates,
barFill,
+ barProgressColor,
+ barProgressSelectedColor,
+ barBackgroundColor,
+ barBackgroundSelectedColor,
headerHeight,
handleWidth,
timeStep,
diff --git a/src/components/Grid/grid-body.tsx b/src/components/Grid/grid-body.tsx
index 6f1f8b5..de5b8c1 100644
--- a/src/components/Grid/grid-body.tsx
+++ b/src/components/Grid/grid-body.tsx
@@ -10,6 +10,7 @@ export type GridBodyProps = {
rowHeight: number;
headerHeight: number;
columnWidth: number;
+ todayColor: string;
};
export const GridBody: React.FC = ({
tasks,
@@ -18,6 +19,7 @@ export const GridBody: React.FC = ({
headerHeight,
gridWidth,
columnWidth,
+ todayColor,
}) => {
let y = headerHeight;
let gridRows: ReactChild[] = [];
@@ -82,7 +84,7 @@ export const GridBody: React.FC = ({
y={0}
width={columnWidth}
height={y}
- className="GanttGrid-todayHighlight"
+ fill={todayColor}
>
);
}
diff --git a/src/helpers/bar-helper.ts b/src/helpers/bar-helper.ts
index 01a1d25..2c62459 100644
--- a/src/helpers/bar-helper.ts
+++ b/src/helpers/bar-helper.ts
@@ -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,
};
};
diff --git a/src/style.css b/src/style.css
index 17b49d7..aa68035 100644
--- a/src/style.css
+++ b/src/style.css
@@ -87,11 +87,6 @@
stroke: #e6e4e4;
}
-.GanttGrid-todayHighlight {
- fill: #fcf8e3;
- opacity: 0.5;
-}
-
.TooltipDefaultContainer {
background: #fff;
padding: 12px;
diff --git a/src/types/bar-task.ts b/src/types/bar-task.ts
index 98d2334..4f7c223 100644
--- a/src/types/bar-task.ts
+++ b/src/types/bar-task.ts
@@ -9,4 +9,10 @@ export interface BarTask extends Task {
barCornerRadius: number;
handleWidth: number;
barChildren: number[];
+ styles: {
+ backgroundColor: string;
+ backgroundSelectedColor: string;
+ progressColor: string;
+ progressSelectedColor: string;
+ };
}
diff --git a/src/types/public-types.ts b/src/types/public-types.ts
index cc37132..40066d2 100644
--- a/src/types/public-types.ts
+++ b/src/types/public-types.ts
@@ -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,