gantt-task-react-v 1.2.12 → 1.2.14

package/dist/components/gantt-today/index.d.ts

@@ -15,7 +15,5 @@ export type GanttTodayProps = {
     dataDateColor?: string | null;
     todayLabel?: string;
     dataDateLabel?: string;
-    taskHeight?: number;
-    taskYOffset?: number;
 };
 export declare const GanttToday: React.NamedExoticComponent<GanttTodayProps>;

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

@@ -10911,7 +10911,7 @@ const styles$c = {
 };
 const GanttTodayInner = ({
   additionalLeftSpace,
-  distances: { columnWidth, barCornerRadius },
+  distances,
   ganttFullHeight,
   isUnknownDates,
   rtl,
@@ -10923,10 +10923,9 @@ const GanttTodayInner = ({
   todayColor = null,
   dataDateColor = null,
   todayLabel = "Today",
-  dataDateLabel = "Data Date",
-  taskHeight = 20,
-  taskYOffset = 5
+  dataDateLabel = "Data Date"
 }) => {
+  const { columnWidth, rowHeight, barFill } = distances;
   const todayElement = useMemo(() => {
     if (isUnknownDates || !showTodayLine) {
       return null;
@@ -11033,47 +11032,54 @@ const GanttTodayInner = ({
       }
     };
     const tickX = dataIndex * columnWidth * extraMultiplier();
-    const x = rtl ? tickX + columnWidth : tickX;
+    const dateBaseX = rtl ? tickX + columnWidth : tickX;
     const color = dataDateColor || "var(--gantt-calendar-today-color)";
-    const rotatedHeight = taskHeight / 1.414;
-    const milestoneX = x + additionalLeftSpace - rotatedHeight * 0.5;
-    const milestoneY = taskYOffset;
-    const transform = `rotate(45 ${milestoneX + rotatedHeight * 0.356} ${milestoneY + rotatedHeight * 0.85})`;
-    const milestoneCenterX = milestoneX + rotatedHeight * 0.5;
-    const lineX = milestoneCenterX + rotatedHeight / Math.sqrt(2) * 0.5;
+    const taskHeight = rowHeight * barFill / 100;
+    const rotatedHeight = taskHeight / Math.SQRT2;
+    const centerX = dateBaseX;
+    const centerY = 6;
+    const rectX = centerX - rotatedHeight / 2;
+    const rectY = centerY - rotatedHeight / 2;
+    const rightEdgeX = centerX + taskHeight / 2;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "rect",
         {
-          x: milestoneX,
-          y: milestoneY,
-          width: rotatedHeight,
-          height: rotatedHeight,
-          rx: barCornerRadius,
-          ry: barCornerRadius,
-          transform,
+          x: additionalLeftSpace + rightEdgeX,
+          y: 0,
+          width: 2,
+          height: ganttFullHeight,
           fill: color,
-          opacity: 0.9,
-          stroke: color,
-          strokeWidth: 1
+          opacity: 0.9
         }
       ),
       /* @__PURE__ */ jsx(
         "rect",
         {
-          x: lineX,
-          y: 0,
-          width: 2,
-          height: ganttFullHeight,
+          x: additionalLeftSpace + rectX,
+          y: rectY,
+          width: rotatedHeight,
+          height: rotatedHeight,
           fill: color,
-          opacity: 0.7
+          transform: `rotate(45 ${additionalLeftSpace + centerX} ${centerY})`,
+          rx: 2,
+          ry: 2
         }
       ),
-      /* @__PURE__ */ jsx("text", { x: lineX + 8, y: 10, fill: color, fontSize: 12, fontWeight: 600, children: dataDateLabel || "Data Date" })
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: additionalLeftSpace + rightEdgeX + 8,
+          y: 10,
+          fill: color,
+          fontSize: 12,
+          fontWeight: 600,
+          children: dataDateLabel || "Data Date"
+        }
+      )
     ] });
   }, [
     additionalLeftSpace,
-    barCornerRadius,
     columnWidth,
     ganttFullHeight,
     rtl,
@@ -11083,8 +11089,8 @@ const GanttTodayInner = ({
     dataDate,
     dataDateColor,
     dataDateLabel,
-    taskHeight,
-    taskYOffset
+    rowHeight,
+    barFill
   ]);
   return /* @__PURE__ */ jsxs("g", { className: "today", children: [
     dataDateElement,
@@ -20193,9 +20199,7 @@ const Gantt = (props) => {
       todayColor,
       dataDateColor,
       todayLabel,
-      dataDateLabel,
-      taskHeight,
-      taskYOffset
+      dataDateLabel
     }),
     [
       additionalLeftSpace,
@@ -20211,9 +20215,7 @@ const Gantt = (props) => {
       todayColor,
       dataDateColor,
       todayLabel,
-      dataDateLabel,
-      taskHeight,
-      taskYOffset
+      dataDateLabel
     ]
   );
   const calendarProps = useMemo(

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

@@ -10928,7 +10928,7 @@
   };
   const GanttTodayInner = ({
     additionalLeftSpace,
-    distances: { columnWidth, barCornerRadius },
+    distances,
     ganttFullHeight,
     isUnknownDates,
     rtl,
@@ -10940,10 +10940,9 @@
     todayColor = null,
     dataDateColor = null,
     todayLabel = "Today",
-    dataDateLabel = "Data Date",
-    taskHeight = 20,
-    taskYOffset = 5
+    dataDateLabel = "Data Date"
   }) => {
+    const { columnWidth, rowHeight, barFill } = distances;
     const todayElement = React.useMemo(() => {
       if (isUnknownDates || !showTodayLine) {
         return null;
@@ -11050,47 +11049,54 @@
         }
       };
       const tickX = dataIndex * columnWidth * extraMultiplier();
-      const x = rtl ? tickX + columnWidth : tickX;
+      const dateBaseX = rtl ? tickX + columnWidth : tickX;
       const color = dataDateColor || "var(--gantt-calendar-today-color)";
-      const rotatedHeight = taskHeight / 1.414;
-      const milestoneX = x + additionalLeftSpace - rotatedHeight * 0.5;
-      const milestoneY = taskYOffset;
-      const transform = `rotate(45 ${milestoneX + rotatedHeight * 0.356} ${milestoneY + rotatedHeight * 0.85})`;
-      const milestoneCenterX = milestoneX + rotatedHeight * 0.5;
-      const lineX = milestoneCenterX + rotatedHeight / Math.sqrt(2) * 0.5;
+      const taskHeight = rowHeight * barFill / 100;
+      const rotatedHeight = taskHeight / Math.SQRT2;
+      const centerX = dateBaseX;
+      const centerY = 6;
+      const rectX = centerX - rotatedHeight / 2;
+      const rectY = centerY - rotatedHeight / 2;
+      const rightEdgeX = centerX + taskHeight / 2;
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "rect",
           {
-            x: milestoneX,
-            y: milestoneY,
-            width: rotatedHeight,
-            height: rotatedHeight,
-            rx: barCornerRadius,
-            ry: barCornerRadius,
-            transform,
+            x: additionalLeftSpace + rightEdgeX,
+            y: 0,
+            width: 2,
+            height: ganttFullHeight,
             fill: color,
-            opacity: 0.9,
-            stroke: color,
-            strokeWidth: 1
+            opacity: 0.9
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "rect",
           {
-            x: lineX,
-            y: 0,
-            width: 2,
-            height: ganttFullHeight,
+            x: additionalLeftSpace + rectX,
+            y: rectY,
+            width: rotatedHeight,
+            height: rotatedHeight,
             fill: color,
-            opacity: 0.7
+            transform: `rotate(45 ${additionalLeftSpace + centerX} ${centerY})`,
+            rx: 2,
+            ry: 2
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("text", { x: lineX + 8, y: 10, fill: color, fontSize: 12, fontWeight: 600, children: dataDateLabel || "Data Date" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: additionalLeftSpace + rightEdgeX + 8,
+            y: 10,
+            fill: color,
+            fontSize: 12,
+            fontWeight: 600,
+            children: dataDateLabel || "Data Date"
+          }
+        )
       ] });
     }, [
       additionalLeftSpace,
-      barCornerRadius,
       columnWidth,
       ganttFullHeight,
       rtl,
@@ -11100,8 +11106,8 @@
       dataDate,
       dataDateColor,
       dataDateLabel,
-      taskHeight,
-      taskYOffset
+      rowHeight,
+      barFill
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
       dataDateElement,
@@ -20210,9 +20216,7 @@
         todayColor,
         dataDateColor,
         todayLabel,
-        dataDateLabel,
-        taskHeight,
-        taskYOffset
+        dataDateLabel
       }),
       [
         additionalLeftSpace,
@@ -20228,9 +20232,7 @@
         todayColor,
         dataDateColor,
         todayLabel,
-        dataDateLabel,
-        taskHeight,
-        taskYOffset
+        dataDateLabel
       ]
     );
     const calendarProps = React.useMemo(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",