From a43ad614d9ac018c8c5e48f8e01f144df3320725 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 30 Jul 2020 00:01:51 +0300 Subject: [PATCH] bar styling changes + doc update --- README.md | 32 ++++++++++++------------ package.json | 2 +- src/components/Bar/bar-display.tsx | 34 +++++++++++--------------- src/components/Bar/bar.tsx | 1 - src/components/Gantt/gantt-content.tsx | 14 ++++++++++- src/components/Gantt/gantt.tsx | 10 ++++++++ src/components/Grid/grid-body.tsx | 4 ++- src/helpers/bar-helper.ts | 26 +++++++++++++++++--- src/style.css | 5 ---- src/types/bar-task.ts | 6 +++++ src/types/public-types.ts | 5 ++++ 11 files changed, 91 insertions(+), 48 deletions(-) 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,