@optilogic/charts 1.3.9 → 1.3.10

package/dist/index.cjs

@@ -1803,6 +1803,9 @@ FunnelChart.displayName = "FunnelChart";
 var ROW_HEIGHT_DEFAULT = 36;
 var LABEL_WIDTH_DEFAULT = 160;
 var HEADER_HEIGHT = 32;
+var MIN_LABEL_SPACING = 64;
+var FALLBACK_CHART_WIDTH = 640;
+var MIN_CHART_WIDTH = 320;
 function getTimeBounds(tasks, milestones) {
   let min = Infinity;
   let max = -Infinity;
@@ -1864,6 +1867,7 @@ var GanttChart = React17__namespace.forwardRef(
     onTaskClick
   }, ref) {
     const containerRef = React17__namespace.useRef(null);
+    const [containerWidth, setContainerWidth] = React17__namespace.useState(0);
     const [hoveredId, setHoveredId] = React17__namespace.useState(null);
     const [tooltipInfo, setTooltipInfo] = React17__namespace.useState(null);
     const groups = React17__namespace.useMemo(() => {
@@ -1895,10 +1899,27 @@ var GanttChart = React17__namespace.forwardRef(
       () => generateTicks(bounds.min, bounds.max, timeScale),
       [bounds, timeScale]
     );
+    React17__namespace.useEffect(() => {
+      const el = containerRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const update = () => setContainerWidth(el.clientWidth);
+      update();
+      const observer = new ResizeObserver(update);
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
+    const chartWidth = Math.max(
+      (containerWidth || labelWidth + FALLBACK_CHART_WIDTH) - labelWidth,
+      MIN_CHART_WIDTH
+    );
+    const labelStep = Math.max(
+      1,
+      Math.ceil(ticks.length / Math.max(1, Math.floor(chartWidth / MIN_LABEL_SPACING)))
+    );
     const chartHeight = typeof height === "number" ? height : void 0;
     const svgHeight = HEADER_HEIGHT + orderedTasks.length * rowHeight + 8;
-    function xOf(time, chartWidth) {
-      return (time - bounds.min) / bounds.span * chartWidth;
+    function xOf(time, width) {
+      return (time - bounds.min) / bounds.span * width;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -1914,9 +1935,9 @@ var GanttChart = React17__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
             {
-              width: "100%",
+              width: labelWidth + chartWidth,
               height: Math.max(svgHeight, chartHeight ?? svgHeight),
-              style: { minWidth: labelWidth + 400 },
+              style: { minWidth: labelWidth + MIN_CHART_WIDTH },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "rect",
@@ -1939,7 +1960,8 @@ var GanttChart = React17__namespace.forwardRef(
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("g", { children: ticks.map((tick, i) => {
-                  const x = labelWidth + xOf(tick.pos, 1e3);
+                  const x = labelWidth + xOf(tick.pos, chartWidth);
+                  const showLabel = i % labelStep === 0;
                   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "line",
@@ -1952,7 +1974,7 @@ var GanttChart = React17__namespace.forwardRef(
                         strokeDasharray: "2 4"
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
+                    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
                       "text",
                       {
                         x: x + 4,
@@ -1966,8 +1988,8 @@ var GanttChart = React17__namespace.forwardRef(
                 }) }),
                 orderedTasks.map((task, i) => {
                   const y = HEADER_HEIGHT + i * rowHeight;
-                  const barX = labelWidth + xOf(task.start.getTime(), 1e3);
-                  const barW = xOf(task.end.getTime(), 1e3) - xOf(task.start.getTime(), 1e3);
+                  const barX = labelWidth + xOf(task.start.getTime(), chartWidth);
+                  const barW = xOf(task.end.getTime(), chartWidth) - xOf(task.start.getTime(), chartWidth);
                   const barH = rowHeight * 0.55;
                   const barY = y + (rowHeight - barH) / 2;
                   const color = task.color ?? getChartColor(i);
@@ -2052,9 +2074,9 @@ var GanttChart = React17__namespace.forwardRef(
                     if (fromIdx === void 0) return null;
                     const toIdx = taskIndex.get(task.id);
                     const fromTask = orderedTasks[fromIdx];
-                    const fromEndX = labelWidth + xOf(fromTask.end.getTime(), 1e3);
+                    const fromEndX = labelWidth + xOf(fromTask.end.getTime(), chartWidth);
                     const fromY = HEADER_HEIGHT + fromIdx * rowHeight + rowHeight / 2;
-                    const toStartX = labelWidth + xOf(task.start.getTime(), 1e3);
+                    const toStartX = labelWidth + xOf(task.start.getTime(), chartWidth);
                     const toY = HEADER_HEIGHT + toIdx * rowHeight + rowHeight / 2;
                     const midX = (fromEndX + toStartX) / 2;
                     return /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2070,8 +2092,8 @@ var GanttChart = React17__namespace.forwardRef(
                     ) }, `${depId}-${task.id}`);
                   })
                 ),
-                milestones.map((m, i) => {
-                  const x = labelWidth + xOf(m.date.getTime(), 1e3);
+                milestones.map((m) => {
+                  const x = labelWidth + xOf(m.date.getTime(), chartWidth);
                   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "line",