bar styling changes + doc update

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<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'

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,