From cb81ba699483e1a8d807302424e2dbbbf046151d Mon Sep 17 00:00:00 2001 From: Aquiles Oliveira de Souza Date: Thu, 3 Nov 2022 20:58:03 -0300 Subject: [PATCH 1/3] Add new props days, duration, progress to tooltip and applied locale in dates --- src/components/gantt/gantt.tsx | 7 ++++ src/components/other/tooltip.tsx | 65 +++++++++++++++++++++++++------- src/types/public-types.ts | 7 ++++ 3 files changed, 65 insertions(+), 14 deletions(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index b90483f3..8b231f14 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -34,6 +34,9 @@ export const Gantt: React.FunctionComponent = ({ viewMode = ViewMode.Day, preStepsCount = 1, locale = "en-GB", + days = "Days", + duration = "Duration", + progress = "Progress", barFill = 60, barCornerRadius = 3, barProgressColor = "#a3a3ff", @@ -474,6 +477,10 @@ export const Gantt: React.FunctionComponent = ({ svgContainerWidth={svgContainerWidth} fontFamily={fontFamily} fontSize={fontSize} + locale={locale} + days={days} + duration={duration} + progress={progress} scrollX={scrollX} scrollY={scrollY} task={ganttEvent.changedTask} diff --git a/src/components/other/tooltip.tsx b/src/components/other/tooltip.tsx index 7542a14e..aee643d8 100644 --- a/src/components/other/tooltip.tsx +++ b/src/components/other/tooltip.tsx @@ -17,10 +17,18 @@ export type TooltipProps = { rowHeight: number; fontSize: string; fontFamily: string; + locale: string; + days: string; + duration: string; + progress: string; TooltipContent: React.FC<{ task: Task; fontSize: string; fontFamily: string; + locale: string; + days: string; + duration: string; + progress: string; }>; }; export const Tooltip: React.FC = ({ @@ -34,6 +42,10 @@ export const Tooltip: React.FC = ({ arrowIndent, fontSize, fontFamily, + locale, + days, + duration, + progress, headerHeight, taskListWidth, TooltipContent, @@ -107,39 +119,64 @@ export const Tooltip: React.FC = ({ } style={{ left: relatedX, top: relatedY }} > - + ); }; -export const StandardTooltipContent: React.FC<{ +export interface TooltipContentProps { task: Task; fontSize: string; fontFamily: string; -}> = ({ task, fontSize, fontFamily }) => { + locale: string; + days: string; + duration: string; + progress: string; +}; + +export const StandardTooltipContent: React.FC = ({ + task, + fontSize, + fontFamily, + locale, + days, + duration, + progress +}) => { const style = { fontSize, fontFamily, }; + + const dateTimeOptions: Intl.DateTimeFormatOptions = { + weekday: "short", + year: "numeric", + month: "2-digit", + day: "numeric", + }; + + const formaDate = (date: Date) => date.toLocaleDateString(locale, dateTimeOptions); + return (
- {`${ - task.name - }: ${task.start.getDate()}-${ - task.start.getMonth() + 1 - }-${task.start.getFullYear()} - ${task.end.getDate()}-${ - task.end.getMonth() + 1 - }-${task.end.getFullYear()}`} + {formaDate(task.start)} - {formaDate(task.end)} {task.end.getTime() - task.start.getTime() !== 0 && ( -

{`Duration: ${~~( +

{`${duration}: ${( (task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24) - )} day(s)`}

+ )} ${days}(s)`}

)}

- {!!task.progress && `Progress: ${task.progress} %`} + {!!task.progress && `${progress}: ${task.progress} %`}

); -}; +}; \ No newline at end of file diff --git a/src/types/public-types.ts b/src/types/public-types.ts index f4c641a6..afc6806b 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -82,6 +82,9 @@ export interface DisplayOption { */ locale?: string; rtl?: boolean; + days?: string; + duration?: string; + progress?: string; } export interface StylingOption { @@ -116,6 +119,10 @@ export interface StylingOption { task: Task; fontSize: string; fontFamily: string; + locale: string; + days: string; + duration: string; + progress: string; }>; TaskListHeader?: React.FC<{ headerHeight: number; From 22664c5cde1335be3d7674a70b1927e7251c1a07 Mon Sep 17 00:00:00 2001 From: Aquiles Oliveira de Souza Date: Thu, 3 Nov 2022 21:09:16 -0300 Subject: [PATCH 2/3] Updated Readme --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index bec63821..fa36c5ab 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,9 @@ npm start | preStepsCount | number | Specifies empty space before the fist task | | locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale. | | rtl | boolean | Sets rtl mode. | +| days | string | Specifies the translation of the day | +| duration | string | Specifies the translation of the duration | +| progress | string | Specifies the progress translation | ### StylingOption From eaa32d55e29bd7530ec78946abf1042c62c79983 Mon Sep 17 00:00:00 2001 From: Aquiles Oliveira de Souza Date: Fri, 4 Nov 2022 09:41:44 -0300 Subject: [PATCH 3/3] Return the title in the tooltip --- src/components/other/tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/other/tooltip.tsx b/src/components/other/tooltip.tsx index aee643d8..e45c9c54 100644 --- a/src/components/other/tooltip.tsx +++ b/src/components/other/tooltip.tsx @@ -166,7 +166,7 @@ export const StandardTooltipContent: React.FC = ({ return (
- {formaDate(task.start)} - {formaDate(task.end)} + {task.name}: {formaDate(task.start)} - {formaDate(task.end)} {task.end.getTime() - task.start.getTime() !== 0 && (

{`${duration}: ${( (task.end.getTime() - task.start.getTime()) /