Add new props days, duration, progress to tooltip and applied locale …

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
 

src/components/gantt/gantt.tsx

@@ -34,6 +34,9 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   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<GanttProps> = ({
             svgContainerWidth={svgContainerWidth}
             fontFamily={fontFamily}
             fontSize={fontSize}
+            locale={locale}
+            days={days}
+            duration={duration}
+            progress={progress}
             scrollX={scrollX}
             scrollY={scrollY}
             task={ganttEvent.changedTask}

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<TooltipProps> = ({
@@ -34,6 +42,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
   arrowIndent,
   fontSize,
   fontFamily,
+  locale,
+  days,
+  duration,
+  progress,
   headerHeight,
   taskListWidth,
   TooltipContent,
@@ -107,39 +119,64 @@ export const Tooltip: React.FC<TooltipProps> = ({
       }
       style={{ left: relatedX, top: relatedY }}
     >
-      <TooltipContent task={task} fontSize={fontSize} fontFamily={fontFamily} />
+      <TooltipContent 
+        task={task} 
+        fontSize={fontSize} 
+        fontFamily={fontFamily} 
+        locale={locale} 
+        days={days}
+        duration={duration}
+        progress={progress} />
     </div>
   );
 };
 
-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<TooltipContentProps> = ({ 
+  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 (
     <div className={styles.tooltipDefaultContainer} style={style}>
-      <b style={{ fontSize: fontSize + 6 }}>{`${
-        task.name
-      }: ${task.start.getDate()}-${
-        task.start.getMonth() + 1
-      }-${task.start.getFullYear()} - ${task.end.getDate()}-${
-        task.end.getMonth() + 1
-      }-${task.end.getFullYear()}`}</b>
+      <b style={{ fontSize: fontSize + 6 }}>{task.name}: {formaDate(task.start)} - {formaDate(task.end)}</b>
       {task.end.getTime() - task.start.getTime() !== 0 && (
-        <p className={styles.tooltipDefaultContainerParagraph}>{`Duration: ${~~(
+        <p className={styles.tooltipDefaultContainerParagraph}>{`${duration}: ${(
           (task.end.getTime() - task.start.getTime()) /
           (1000 * 60 * 60 * 24)
-        )} day(s)`}</p>
+        )} ${days}(s)`}</p>
       )}
 
       <p className={styles.tooltipDefaultContainerParagraph}>
-        {!!task.progress && `Progress: ${task.progress} %`}
+        {!!task.progress && `${progress}: ${task.progress} %`}
       </p>
     </div>
   );
-};
+};

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;