bar styling changes + doc update

README.md

@@ -1,6 +1,6 @@
-<h1 align="center">gantt-task-react</h1>
+#gantt-task-react
-<h2 align="center">Interactive Gantt Chart for React with TypeScript.</h2>
+##Interactive Gantt Chart for React with TypeScript.
-<img src="https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png"/>
+![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                                                                           |
+| Parameter Name                  | Type      | Required | Description                                        |
-| ------------------------------- | :-------- | :------- | :------------------------------------------------------------------------------------ |
+| :------------------------------ | :-------- | :------- | :------------------------------------------------- |
-| tasks                           | Task      | Yes      | Tasks array.                                                                          |
+| tasks                           | Task      | Yes      | Tasks array.                                       |
-| [EventOption](#EventOption)     | interface | No       | Specifies the function to be executed on the bar`s on Delete button press event.      |
+| [EventOption](#EventOption)     | interface | No       | Specifies gantt events.                            |
-| [DisplayOption](#DisplayOption) | interface | No       | Specifies the function to be executed when drag bar`s event on timeline has finished. |
+| [DisplayOption](#DisplayOption) | interface | No       | Specifies view type and display timeline language. |
-| StylingOption                   | interface | No       | Specifies the function to be executed when drag bar`s progress event has finished     |
+| 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     |
+| 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                           |
+| timeStep         | number                            | No       | A time step value for onDateChange. Specify in milliseconds.                          |
 
 ### DisplayOption
 
-| Parameter Name | Type   | Required | Description                                                                                    |
+| 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 |
+| 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.                       |
+| locale         | string | No       | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                        |
 
 Work in progress

package.json

@@ -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>",

src/components/Bar/bar-display.tsx

@@ -12,11 +12,11 @@ type BarDisplayProps = {
   text: string;
   hasChild: boolean;
   arrowIndent: number;
-  styles?: {
+  styles: {
-    backgroundColor?: string;
+    backgroundColor: string;
-    backgroundSelectedColor?: string;
+    backgroundSelectedColor: string;
-    progressColor?: string;
+    progressColor: string;
-    progressSelectedColor?: 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 isSelected ? styles.progressSelectedColor : styles.progressColor;
-      return styles?.progressSelectedColor || '#8282f5';
-    } else {
-      return styles?.progressColor || '#a3a3ff';
-    }
   };
 
   const getBarColor = () => {
-    if (isSelected) {
+    return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
-      return styles?.backgroundSelectedColor || '#aeb8c2';
+  };
-    } else {
+
-      return styles?.backgroundColor || '#b8c2cc';
+  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={
+        x={getX()}
-          isTextInside
-            ? x + width * 0.5
-            : x + width + arrowIndent * +hasChild + arrowIndent * 0.2
-        }
         y={y + height * 0.5}
         className={`GanttBar-label ${
           isTextInside ? '' : 'GanttBar-label-outside'

src/components/Bar/bar.tsx

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

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<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
       )
     );
   }, [

src/components/Gantt/gantt.tsx

@@ -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,

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<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>
       );
     }

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,
   };
 };
 

src/style.css

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

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;
+  };
 }

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,