@ssfm/gantt-task-react 0.6.17 → 0.6.19

package/dist/components/task-item/bar/bar-display.d.ts

@@ -6,6 +6,7 @@ type BarDisplayProps = {
     isSelected: boolean;
     hasChildren: boolean;
     height: number;
+    showProgress: boolean;
     progressWidth: number;
     progressX: number;
     startMoveFullTask: (clientX: number) => void;

package/dist/components/task-item/project/project-display.d.ts

@@ -8,6 +8,7 @@ type ProjectDisplayProps = {
     taskHeight: number;
     taskHalfHeight: number;
     taskYOffset: number;
+    showProgress: boolean;
     progressWidth: number;
     progressX: number;
     startMoveFullTask: (clientX: number) => void;

package/dist/components/task-item/task-item.d.ts

@@ -20,6 +20,7 @@ export type TaskItemProps = {
     taskHeight: number;
     taskHalfHeight: number;
     isProgressChangeable: boolean;
+    showProgress: boolean;
     isDateChangeable: boolean;
     authorizedRelations: RelationKind[];
     isRelationChangeable: boolean;

package/dist/gantt-task-react.es.js

@@ -3770,34 +3770,39 @@ const Calendar = ({
     const topValues2 = [];
     const bottomValues2 = [];
     const topDefaultHeight = headerHeight * 0.5;
+    const quarterTextOffset = columnWidth * 0.5;
     for (let i2 = startColumnIndex; i2 <= endColumnIndex; i2++) {
       const date = getDate(i2);
-      const quarter = "Q" + Math.ceil((date.getMonth() + 1) / 3);
+      const quarterIndex = Math.ceil((date.getMonth() + 1) / 3);
+      const quarterText = "Q" + quarterIndex;
+      const quarterXPosition = additionalLeftSpace + columnWidth * i2;
       bottomValues2.push(
         /* @__PURE__ */ jsx(
           "text",
           {
             y: headerHeight * 0.8,
-            x: additionalLeftSpace + columnWidth * i2 + columnWidth * 0.5,
+            x: quarterXPosition + quarterTextOffset,
             className: styles$a.calendarBottomText,
             style: { fill: colors.barLabelColor },
-            children: quarter
+            children: quarterText
           },
-          `${quarter}-${date.getFullYear()}`
+          `${quarterText}-${date.getFullYear()}`
         )
       );
+      if (quarterIndex > 1) {
+        continue;
+      }
       if (!isUnknownDates && (i2 === startColumnIndex || date.getFullYear() !== getDate(i2 - 1).getFullYear())) {
         const topValue = date.getFullYear().toString();
-        const startQuarter = Math.floor(i2 / 3) * 3;
         topValues2.push(
           /* @__PURE__ */ jsx(
             TopPartOfCalendar,
             {
               value: topValue,
-              x1Line: additionalLeftSpace + columnWidth * startQuarter,
+              x1Line: quarterXPosition,
               y1Line: 0,
               y2Line: topDefaultHeight,
-              xText: additionalLeftSpace + columnWidth * (startQuarter + 1.5),
+              xText: quarterXPosition + columnWidth * 2,
               yText: topDefaultHeight * 0.9,
               colors
             },
@@ -4622,6 +4627,7 @@ const BarDisplay = ({
   hasChildren,
   height,
   progressWidth,
+  showProgress,
   progressX,
   startMoveFullTask,
   styles: styles2,
@@ -4704,7 +4710,7 @@ const BarDisplay = ({
             className: styles$6.barBackground
           }
         ),
-        /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -4799,12 +4805,13 @@ const ProjectDisplay = ({
   isSelected,
   isCritical,
   colorStyles,
+  showProgress,
   progressWidth,
   progressX,
   taskYOffset,
   width,
   x1,
-  x2: x22,
+  //x2,
   startMoveFullTask
 }) => {
   const barColor = useMemo(() => {
@@ -4831,22 +4838,6 @@ const ProjectDisplay = ({
     }
     return colorStyles.projectProgressColor;
   }, [isSelected, isCritical, colorStyles]);
-  const projectLeftTriangle = [
-    x1,
-    taskYOffset + taskHeight / 2 - 1,
-    x1,
-    taskYOffset + taskHeight,
-    x1 + 15,
-    taskYOffset + taskHeight / 2 - 1
-  ].join(",");
-  const projectRightTriangle = [
-    x22,
-    taskYOffset + taskHeight / 2 - 1,
-    x22,
-    taskYOffset + taskHeight,
-    x22 - 15,
-    taskYOffset + taskHeight / 2 - 1
-  ].join(",");
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -4876,7 +4867,7 @@ const ProjectDisplay = ({
             className: styles$4.projectBackground
           }
         ),
-        /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -4888,7 +4879,7 @@ const ProjectDisplay = ({
             fill: processColor
           }
         ),
-        /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             fill: barColor,
@@ -4901,20 +4892,26 @@ const ProjectDisplay = ({
             className: styles$4.projectTop
           }
         ),
-        /* @__PURE__ */ jsx(
-          "polygon",
+        showProgress && /* @__PURE__ */ jsx(
+          "rect",
           {
-            className: styles$4.projectTop,
-            points: projectLeftTriangle,
-            fill: barColor
+            fill: barColor,
+            x: x1,
+            y: taskYOffset + taskHalfHeight - barCornerRadius,
+            width: barCornerRadius,
+            height: barCornerRadius,
+            className: styles$4.projectTop
           }
         ),
-        /* @__PURE__ */ jsx(
-          "polygon",
+        showProgress && /* @__PURE__ */ jsx(
+          "rect",
           {
-            className: styles$4.projectTop,
-            points: projectRightTriangle,
-            fill: barColor
+            fill: barColor,
+            x: x1 + width - barCornerRadius,
+            y: taskYOffset + taskHalfHeight - barCornerRadius,
+            width: barCornerRadius,
+            height: barCornerRadius,
+            className: styles$4.projectTop
           }
         )
       ]
@@ -4929,6 +4926,7 @@ const Bar = ({
   isCritical,
   isDateChangeable,
   isProgressChangeable,
+  showProgress,
   isSelected,
   onTaskEventStart,
   progressWidth,
@@ -4984,6 +4982,7 @@ const Bar = ({
         width,
         taskHeight,
         taskHalfHeight,
+        showProgress,
         progressX,
         progressWidth,
         barCornerRadius,
@@ -5003,6 +5002,7 @@ const Bar = ({
         y: taskYOffset,
         width,
         height: taskHeight,
+        showProgress,
         progressX,
         progressWidth,
         barCornerRadius,
@@ -5029,7 +5029,7 @@ const Bar = ({
             height: handleHeight,
             startMove: startMoveStartOfTask,
             width: handleWidth,
-            x: x1 + 1,
+            x: x1 - handleWidth,
             y: taskYOffset + 1
           }
         ),
@@ -5041,12 +5041,12 @@ const Bar = ({
             height: handleHeight,
             startMove: startMoveEndOfTask,
             width: handleWidth,
-            x: x22 - handleWidth - 1,
+            x: x1 + width,
             y: taskYOffset + 1
           }
         ),
         relationhandles,
-        isProgressChangeable && /* @__PURE__ */ jsx(
+        isProgressChangeable && showProgress && /* @__PURE__ */ jsx(
           BarProgressHandle,
           {
             taskName: task.name,
@@ -5058,75 +5058,6 @@ const Bar = ({
     }
   );
 };
-const BarSmall = ({
-  children: relationhandles,
-  colorStyles,
-  distances: { barCornerRadius, handleWidth },
-  hasChildren,
-  isSelected,
-  isCritical,
-  isDateChangeable,
-  onTaskEventStart,
-  progressWidth,
-  progressX,
-  taskYOffset,
-  task,
-  taskHeight,
-  x1
-}) => {
-  const startMoveFullTask = useCallback(
-    (clientX) => {
-      onTaskEventStart("move", clientX);
-    },
-    [onTaskEventStart]
-  );
-  const startMoveEndOfTask = useCallback(
-    (clientX) => {
-      onTaskEventStart("end", clientX);
-    },
-    [onTaskEventStart]
-  );
-  return /* @__PURE__ */ jsxs(
-    "g",
-    {
-      className: `${styles$6.barWrapper} ${styles$5.barRelationHandleWrapper}`,
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          BarDisplay,
-          {
-            taskName: task.name,
-            barCornerRadius,
-            hasChildren,
-            height: taskHeight,
-            isCritical,
-            isSelected,
-            progressWidth,
-            progressX,
-            startMoveFullTask,
-            styles: colorStyles,
-            width: handleWidth * 2,
-            x: x1,
-            y: taskYOffset
-          }
-        ),
-        isDateChangeable && /* @__PURE__ */ jsx(
-          BarDateHandle,
-          {
-            dataTestid: `task-date-handle-right-${task.name}`,
-            barCornerRadius,
-            height: taskHeight - 2,
-            startMove: startMoveEndOfTask,
-            width: handleWidth,
-            x: x1 + handleWidth,
-            y: taskYOffset + 1
-          }
-        ),
-        relationhandles
-      ]
-    }
-  );
-};
 const milestoneWrapper = "_milestoneWrapper_xr9to_1";
 const milestoneBackground = "_milestoneBackground_xr9to_6";
 const styles$3 = {
@@ -5266,8 +5197,8 @@ const TaskWarningInner = ({
   ] });
 };
 const TaskWarning = memo(TaskWarningInner);
-const barLabel = "_barLabel_pu5db_1";
-const barLabelOutside = "_barLabelOutside_pu5db_13";
+const barLabel = "_barLabel_5gth7_1";
+const barLabelOutside = "_barLabelOutside_5gth7_13";
 const style = {
   barLabel,
   barLabelOutside
@@ -5387,7 +5318,8 @@ const TaskItemInner = (props) => {
       handleWidth,
       taskWarningOffset,
       relationCircleOffset,
-      relationCircleRadius
+      relationCircleRadius,
+      minimalBarWidth
     },
     fixEndPosition = void 0,
     fixStartPosition = void 0,
@@ -5407,6 +5339,7 @@ const TaskItemInner = (props) => {
     rtl,
     selectTaskOnMouseDown,
     setTooltipTask,
+    showProgress,
     task,
     task: { styles: taskStyles },
     taskHalfHeight,
@@ -5509,14 +5442,14 @@ const TaskItemInner = (props) => {
     } else {
       displayRightRelationHandle = rtl ? isFromStartRelationAuthorized : isFromEndRelationAuthorized;
     }
-    const isSmallBar = width < handleWidth * 2;
+    const isSmallBar = width < minimalBarWidth;
     const relationhandles = /* @__PURE__ */ jsxs(Fragment$1, { children: [
       isRelationChangeable && displayLeftRelationHandle && /* @__PURE__ */ jsx(
         BarRelationHandle,
         {
           dataTestid: `task-relation-handle-left-${task.name}`,
           isRelationDrawMode: !!ganttRelationEvent,
-          x: x1 - relationCircleOffset,
+          x: x1 - relationCircleOffset - handleWidth,
           y: taskYOffset + taskHalfHeight,
           radius: relationCircleRadius,
           startDrawRelation: onLeftRelationTriggerMouseDown
@@ -5527,7 +5460,7 @@ const TaskItemInner = (props) => {
         {
           dataTestid: `task-relation-handle-right-${task.name}`,
           isRelationDrawMode: !!ganttRelationEvent,
-          x: !isSmallBar ? x22 + relationCircleOffset : x1 + 2 * handleWidth + relationCircleOffset,
+          x: isSmallBar ? x1 + minimalBarWidth + relationCircleOffset + handleWidth : x22 + relationCircleOffset + handleWidth,
           y: taskYOffset + taskHalfHeight,
           radius: relationCircleRadius,
           startDrawRelation: onRightRelationTriggerMouseDown
@@ -5544,26 +5477,19 @@ const TaskItemInner = (props) => {
           children: relationhandles
         }
       );
-    } else if (isSmallBar) {
-      return /* @__PURE__ */ jsx(
-        BarSmall,
-        {
-          ...props,
-          colorStyles: styles2,
-          onTaskEventStart,
-          children: relationhandles
-        }
-      );
-    } else
+    } else {
       return /* @__PURE__ */ jsx(
         Bar,
         {
           ...props,
-          onTaskEventStart,
           colorStyles: styles2,
+          width: isSmallBar ? minimalBarWidth : width,
+          showProgress: isSmallBar ? false : showProgress,
+          onTaskEventStart,
           children: relationhandles
         }
       );
+    }
   }, [
     handleWidth,
     isSelected,
@@ -5602,7 +5528,7 @@ const TaskItemInner = (props) => {
   const onMouseLeave = useCallback(() => {
     setTooltipTask(null, null);
   }, [setTooltipTask]);
-  let barLabelFill = isTextInside || task.type == "milestone" ? styles2.barLabelColor : styles2.barLabelWhenOutsideColor;
+  let barLabelFill = isTextInside || task.type === "milestone" ? styles2.barLabelColor : styles2.barLabelWhenOutsideColor;
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -5771,6 +5697,7 @@ const TaskGanttContent = ({
       if (task.type === "empty") {
         continue;
       }
+      const { isDisabled, showProgress = true } = task;
       const key = `${comparisonLevel}_${task.id}`;
       const criticalPathOnLevel = criticalPaths ? criticalPaths.get(comparisonLevel) : void 0;
       const isCritical = criticalPathOnLevel ? criticalPathOnLevel.tasks.has(task.id) : false;
@@ -5816,12 +5743,13 @@ const TaskGanttContent = ({
                 distances,
                 taskHeight,
                 taskHalfHeight,
-                isProgressChangeable: !task.isDisabled,
-                isDateChangeable: !task.isDisabled,
+                isProgressChangeable: !isDisabled,
+                showProgress,
+                isDateChangeable: !isDisabled,
                 isRelationChangeable: !task.isRelationDisabled,
                 authorizedRelations,
                 ganttRelationEvent,
-                isDelete: !task.isDisabled,
+                isDelete: !isDisabled,
                 onDoubleClick,
                 onClick,
                 onEventStart: handleTaskDragStart,
@@ -11386,7 +11314,8 @@ const defaultDistances = {
   relationCircleRadius: 5,
   rowHeight: 50,
   taskWarningOffset: 35,
-  titleCellWidth: 220
+  titleCellWidth: 220,
+  minimalBarWidth: 8
 };
 const MINIMUM_DISPLAYED_TIME_UNIT = 30;
 const Gantt = ({

package/dist/gantt-task-react.umd.js

@@ -3783,34 +3783,39 @@
       const topValues2 = [];
       const bottomValues2 = [];
       const topDefaultHeight = headerHeight * 0.5;
+      const quarterTextOffset = columnWidth * 0.5;
       for (let i = startColumnIndex; i <= endColumnIndex; i++) {
         const date = getDate(i);
-        const quarter = "Q" + Math.ceil((date.getMonth() + 1) / 3);
+        const quarterIndex = Math.ceil((date.getMonth() + 1) / 3);
+        const quarterText = "Q" + quarterIndex;
+        const quarterXPosition = additionalLeftSpace + columnWidth * i;
         bottomValues2.push(
           /* @__PURE__ */ jsxRuntime.jsx(
             "text",
             {
               y: headerHeight * 0.8,
-              x: additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
+              x: quarterXPosition + quarterTextOffset,
               className: styles$a.calendarBottomText,
               style: { fill: colors.barLabelColor },
-              children: quarter
+              children: quarterText
             },
-            `${quarter}-${date.getFullYear()}`
+            `${quarterText}-${date.getFullYear()}`
           )
         );
+        if (quarterIndex > 1) {
+          continue;
+        }
         if (!isUnknownDates && (i === startColumnIndex || date.getFullYear() !== getDate(i - 1).getFullYear())) {
           const topValue = date.getFullYear().toString();
-          const startQuarter = Math.floor(i / 3) * 3;
           topValues2.push(
             /* @__PURE__ */ jsxRuntime.jsx(
               TopPartOfCalendar,
               {
                 value: topValue,
-                x1Line: additionalLeftSpace + columnWidth * startQuarter,
+                x1Line: quarterXPosition,
                 y1Line: 0,
                 y2Line: topDefaultHeight,
-                xText: additionalLeftSpace + columnWidth * (startQuarter + 1.5),
+                xText: quarterXPosition + columnWidth * 2,
                 yText: topDefaultHeight * 0.9,
                 colors
               },
@@ -4635,6 +4640,7 @@
     hasChildren,
     height,
     progressWidth,
+    showProgress,
     progressX,
     startMoveFullTask,
     styles: styles2,
@@ -4717,7 +4723,7 @@
               className: styles$6.barBackground
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: progressX,
@@ -4812,12 +4818,13 @@
     isSelected,
     isCritical,
     colorStyles,
+    showProgress,
     progressWidth,
     progressX,
     taskYOffset,
     width,
     x1,
-    x2,
+    //x2,
     startMoveFullTask
   }) => {
     const barColor = React.useMemo(() => {
@@ -4844,22 +4851,6 @@
       }
       return colorStyles.projectProgressColor;
     }, [isSelected, isCritical, colorStyles]);
-    const projectLeftTriangle = [
-      x1,
-      taskYOffset + taskHeight / 2 - 1,
-      x1,
-      taskYOffset + taskHeight,
-      x1 + 15,
-      taskYOffset + taskHeight / 2 - 1
-    ].join(",");
-    const projectRightTriangle = [
-      x2,
-      taskYOffset + taskHeight / 2 - 1,
-      x2,
-      taskYOffset + taskHeight,
-      x2 - 15,
-      taskYOffset + taskHeight / 2 - 1
-    ].join(",");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
@@ -4889,7 +4880,7 @@
               className: styles$4.projectBackground
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: progressX,
@@ -4901,7 +4892,7 @@
               fill: processColor
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               fill: barColor,
@@ -4914,20 +4905,26 @@
               className: styles$4.projectTop
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "polygon",
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              className: styles$4.projectTop,
-              points: projectLeftTriangle,
-              fill: barColor
+              fill: barColor,
+              x: x1,
+              y: taskYOffset + taskHalfHeight - barCornerRadius,
+              width: barCornerRadius,
+              height: barCornerRadius,
+              className: styles$4.projectTop
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "polygon",
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              className: styles$4.projectTop,
-              points: projectRightTriangle,
-              fill: barColor
+              fill: barColor,
+              x: x1 + width - barCornerRadius,
+              y: taskYOffset + taskHalfHeight - barCornerRadius,
+              width: barCornerRadius,
+              height: barCornerRadius,
+              className: styles$4.projectTop
             }
           )
         ]
@@ -4942,6 +4939,7 @@
     isCritical,
     isDateChangeable,
     isProgressChangeable,
+    showProgress,
     isSelected,
     onTaskEventStart,
     progressWidth,
@@ -4997,6 +4995,7 @@
           width,
           taskHeight,
           taskHalfHeight,
+          showProgress,
           progressX,
           progressWidth,
           barCornerRadius,
@@ -5016,6 +5015,7 @@
           y: taskYOffset,
           width,
           height: taskHeight,
+          showProgress,
           progressX,
           progressWidth,
           barCornerRadius,
@@ -5042,7 +5042,7 @@
               height: handleHeight,
               startMove: startMoveStartOfTask,
               width: handleWidth,
-              x: x1 + 1,
+              x: x1 - handleWidth,
               y: taskYOffset + 1
             }
           ),
@@ -5054,12 +5054,12 @@
               height: handleHeight,
               startMove: startMoveEndOfTask,
               width: handleWidth,
-              x: x2 - handleWidth - 1,
+              x: x1 + width,
               y: taskYOffset + 1
             }
           ),
           relationhandles,
-          isProgressChangeable && /* @__PURE__ */ jsxRuntime.jsx(
+          isProgressChangeable && showProgress && /* @__PURE__ */ jsxRuntime.jsx(
             BarProgressHandle,
             {
               taskName: task.name,
@@ -5071,75 +5071,6 @@
       }
     );
   };
-  const BarSmall = ({
-    children: relationhandles,
-    colorStyles,
-    distances: { barCornerRadius, handleWidth },
-    hasChildren,
-    isSelected,
-    isCritical,
-    isDateChangeable,
-    onTaskEventStart,
-    progressWidth,
-    progressX,
-    taskYOffset,
-    task,
-    taskHeight,
-    x1
-  }) => {
-    const startMoveFullTask = React.useCallback(
-      (clientX) => {
-        onTaskEventStart("move", clientX);
-      },
-      [onTaskEventStart]
-    );
-    const startMoveEndOfTask = React.useCallback(
-      (clientX) => {
-        onTaskEventStart("end", clientX);
-      },
-      [onTaskEventStart]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "g",
-      {
-        className: `${styles$6.barWrapper} ${styles$5.barRelationHandleWrapper}`,
-        tabIndex: 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BarDisplay,
-            {
-              taskName: task.name,
-              barCornerRadius,
-              hasChildren,
-              height: taskHeight,
-              isCritical,
-              isSelected,
-              progressWidth,
-              progressX,
-              startMoveFullTask,
-              styles: colorStyles,
-              width: handleWidth * 2,
-              x: x1,
-              y: taskYOffset
-            }
-          ),
-          isDateChangeable && /* @__PURE__ */ jsxRuntime.jsx(
-            BarDateHandle,
-            {
-              dataTestid: `task-date-handle-right-${task.name}`,
-              barCornerRadius,
-              height: taskHeight - 2,
-              startMove: startMoveEndOfTask,
-              width: handleWidth,
-              x: x1 + handleWidth,
-              y: taskYOffset + 1
-            }
-          ),
-          relationhandles
-        ]
-      }
-    );
-  };
   const milestoneWrapper = "_milestoneWrapper_xr9to_1";
   const milestoneBackground = "_milestoneBackground_xr9to_6";
   const styles$3 = {
@@ -5279,8 +5210,8 @@
     ] });
   };
   const TaskWarning = React.memo(TaskWarningInner);
-  const barLabel = "_barLabel_pu5db_1";
-  const barLabelOutside = "_barLabelOutside_pu5db_13";
+  const barLabel = "_barLabel_5gth7_1";
+  const barLabelOutside = "_barLabelOutside_5gth7_13";
   const style = {
     barLabel,
     barLabelOutside
@@ -5400,7 +5331,8 @@
         handleWidth,
         taskWarningOffset,
         relationCircleOffset,
-        relationCircleRadius
+        relationCircleRadius,
+        minimalBarWidth
       },
       fixEndPosition = void 0,
       fixStartPosition = void 0,
@@ -5420,6 +5352,7 @@
       rtl,
       selectTaskOnMouseDown,
       setTooltipTask,
+      showProgress,
       task,
       task: { styles: taskStyles },
       taskHalfHeight,
@@ -5522,14 +5455,14 @@
       } else {
         displayRightRelationHandle = rtl ? isFromStartRelationAuthorized : isFromEndRelationAuthorized;
       }
-      const isSmallBar = width < handleWidth * 2;
+      const isSmallBar = width < minimalBarWidth;
       const relationhandles = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         isRelationChangeable && displayLeftRelationHandle && /* @__PURE__ */ jsxRuntime.jsx(
           BarRelationHandle,
           {
             dataTestid: `task-relation-handle-left-${task.name}`,
             isRelationDrawMode: !!ganttRelationEvent,
-            x: x1 - relationCircleOffset,
+            x: x1 - relationCircleOffset - handleWidth,
             y: taskYOffset + taskHalfHeight,
             radius: relationCircleRadius,
             startDrawRelation: onLeftRelationTriggerMouseDown
@@ -5540,7 +5473,7 @@
           {
             dataTestid: `task-relation-handle-right-${task.name}`,
             isRelationDrawMode: !!ganttRelationEvent,
-            x: !isSmallBar ? x2 + relationCircleOffset : x1 + 2 * handleWidth + relationCircleOffset,
+            x: isSmallBar ? x1 + minimalBarWidth + relationCircleOffset + handleWidth : x2 + relationCircleOffset + handleWidth,
             y: taskYOffset + taskHalfHeight,
             radius: relationCircleRadius,
             startDrawRelation: onRightRelationTriggerMouseDown
@@ -5557,26 +5490,19 @@
             children: relationhandles
           }
         );
-      } else if (isSmallBar) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          BarSmall,
-          {
-            ...props,
-            colorStyles: styles2,
-            onTaskEventStart,
-            children: relationhandles
-          }
-        );
-      } else
+      } else {
         return /* @__PURE__ */ jsxRuntime.jsx(
           Bar,
           {
             ...props,
-            onTaskEventStart,
             colorStyles: styles2,
+            width: isSmallBar ? minimalBarWidth : width,
+            showProgress: isSmallBar ? false : showProgress,
+            onTaskEventStart,
             children: relationhandles
           }
         );
+      }
     }, [
       handleWidth,
       isSelected,
@@ -5615,7 +5541,7 @@
     const onMouseLeave = React.useCallback(() => {
       setTooltipTask(null, null);
     }, [setTooltipTask]);
-    let barLabelFill = isTextInside || task.type == "milestone" ? styles2.barLabelColor : styles2.barLabelWhenOutsideColor;
+    let barLabelFill = isTextInside || task.type === "milestone" ? styles2.barLabelColor : styles2.barLabelWhenOutsideColor;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
@@ -5784,6 +5710,7 @@
         if (task.type === "empty") {
           continue;
         }
+        const { isDisabled, showProgress = true } = task;
         const key = `${comparisonLevel}_${task.id}`;
         const criticalPathOnLevel = criticalPaths ? criticalPaths.get(comparisonLevel) : void 0;
         const isCritical = criticalPathOnLevel ? criticalPathOnLevel.tasks.has(task.id) : false;
@@ -5829,12 +5756,13 @@
                   distances,
                   taskHeight,
                   taskHalfHeight,
-                  isProgressChangeable: !task.isDisabled,
-                  isDateChangeable: !task.isDisabled,
+                  isProgressChangeable: !isDisabled,
+                  showProgress,
+                  isDateChangeable: !isDisabled,
                   isRelationChangeable: !task.isRelationDisabled,
                   authorizedRelations,
                   ganttRelationEvent,
-                  isDelete: !task.isDisabled,
+                  isDelete: !isDisabled,
                   onDoubleClick,
                   onClick,
                   onEventStart: handleTaskDragStart,
@@ -11399,7 +11327,8 @@
     relationCircleRadius: 5,
     rowHeight: 50,
     taskWarningOffset: 35,
-    titleCellWidth: 220
+    titleCellWidth: 220,
+    minimalBarWidth: 8
   };
   const MINIMUM_DISPLAYED_TIME_UNIT = 30;
   const Gantt = ({

package/dist/style.css

@@ -436,7 +436,7 @@
 ._milestoneBackground_xr9to_6 {
   user-select: none;
 }
-._barLabel_pu5db_1 {
+._barLabel_5gth7_1 {
   text-anchor: middle;
   font-weight: lighter;
   dominant-baseline: central;
@@ -448,8 +448,9 @@
   pointer-events: none;
 }
 
-._barLabelOutside_pu5db_13 {
+._barLabelOutside_5gth7_13 {
   text-anchor: start;
+  dominant-baseline: central;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;

package/dist/types/public-types.d.ts

@@ -125,6 +125,7 @@ export interface Distances {
     handleWidth: number;
     headerHeight: number;
     minimumRowDisplayed: number;
+    minimalBarWidth: number;
     nestedTaskNameOffset: number;
     relationCircleOffset: number;
     relationCircleRadius: number;
@@ -147,6 +148,7 @@ export interface Task {
     assignees?: string[];
     styles?: Partial<ColorStyles>;
     isDisabled?: boolean;
+    showProgress?: boolean;
     isRelationDisabled?: boolean;
     /**
      * Project or task
@@ -165,6 +167,7 @@ export interface EmptyTask {
     comparisonLevel?: number;
     displayOrder?: number;
     isDisabled?: boolean;
+    showProgress?: boolean;
     styles?: Partial<ColorStyles>;
 }
 export type TaskOrEmpty = Task | EmptyTask;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssfm/gantt-task-react",
-  "version": "0.6.17",
+  "version": "0.6.19",
   "description": "Interactive Gantt Chart for React with TypeScript",
   "author": "Dmitry Kostochko <dkostochko@users.noreply.github.com>",
   "homepage": "https://github.com/dkostochko/gantt-task-react/blob/main/README.md#gantt-task-react",
@@ -43,6 +43,7 @@
   ],
   "scripts": {
     "storybook": "storybook dev",
+    "storybook:clean": "rm -rf node_modules/.cache/storybook node_modules/.cache/sb-*",
     "build": "vite build && tsc",
     "start": "vite --host",
     "prepare": "run-s build",