@optilogic/charts 1.3.8 → 1.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/charts",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "description": "Chart components for Optilogic - LineChart and BarChart built on Recharts",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,7 +24,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@optilogic/core": "1.4.0"
+    "@optilogic/core": "1.6.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -60,7 +60,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx",
+    "lint": "eslint src",
     "clean": "rm -rf dist .turbo"
   }
 }

package/src/specialized/gantt-chart.tsx

@@ -38,6 +38,12 @@ export interface GanttChartProps {
 const ROW_HEIGHT_DEFAULT = 36;
 const LABEL_WIDTH_DEFAULT = 160;
 const HEADER_HEIGHT = 32;
+/** Minimum horizontal space an axis label needs before labels start to collide. */
+const MIN_LABEL_SPACING = 64;
+/** Fallback chart width used before the container has been measured. */
+const FALLBACK_CHART_WIDTH = 640;
+/** Floor for the time-axis width so very narrow containers stay legible (scrolls). */
+const MIN_CHART_WIDTH = 320;
 
 function getTimeBounds(tasks: GanttTask[], milestones: GanttMilestone[]) {
   let min = Infinity;
@@ -110,6 +116,7 @@ const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
     ref,
   ) {
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const [containerWidth, setContainerWidth] = React.useState(0);
     const [hoveredId, setHoveredId] = React.useState<string | null>(null);
     const [tooltipInfo, setTooltipInfo] = React.useState<{
       task: GanttTask;
@@ -151,12 +158,37 @@ const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
       [bounds, timeScale],
     );
 
+    // Measure the container so the time axis fills the available width instead
+    // of a fixed guess — keeps bars, gridlines, and labels aligned at any size.
+    React.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,
+    );
+
+    // Show at most one label per MIN_LABEL_SPACING px; thin the rest so daily
+    // ticks over a long span don't overlap into an unreadable smear. Gridlines
+    // are kept for every tick — only the text is thinned.
+    const labelStep = Math.max(
+      1,
+      Math.ceil(ticks.length / Math.max(1, Math.floor(chartWidth / MIN_LABEL_SPACING))),
+    );
+
     const chartHeight =
       typeof height === "number" ? height : undefined;
     const svgHeight = HEADER_HEIGHT + orderedTasks.length * rowHeight + 8;
 
-    function xOf(time: number, chartWidth: number) {
-      return ((time - bounds.min) / bounds.span) * chartWidth;
+    function xOf(time: number, width: number) {
+      return ((time - bounds.min) / bounds.span) * width;
     }
 
     return (
@@ -170,9 +202,9 @@ const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
         style={{ height }}
       >
         <svg
-          width="100%"
+          width={labelWidth + chartWidth}
           height={Math.max(svgHeight, chartHeight ?? svgHeight)}
-          style={{ minWidth: labelWidth + 400 }}
+          style={{ minWidth: labelWidth + MIN_CHART_WIDTH }}
         >
           {/* Label background */}
           <rect
@@ -193,7 +225,8 @@ const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
           {/* Time axis header */}
           <g>
             {ticks.map((tick, i) => {
-              const x = labelWidth + xOf(tick.pos, 1000);
+              const x = labelWidth + xOf(tick.pos, chartWidth);
+              const showLabel = i % labelStep === 0;
               return (
                 <g key={i}>
                   <line
@@ -204,14 +237,16 @@ const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
                     stroke="hsl(var(--divider))"
                     strokeDasharray="2 4"
                   />
-                  <text
-                    x={x + 4}
-                    y={HEADER_HEIGHT - 10}
-                    fontSize={9}
-                    fill="hsl(var(--muted-foreground))"
-                  >
-                    {tick.label}
-                  </text>
+                  {showLabel && (
+                    <text
+                      x={x + 4}
+                      y={HEADER_HEIGHT - 10}
+                      fontSize={9}
+                      fill="hsl(var(--muted-foreground))"
+                    >
+                      {tick.label}
+                    </text>
+                  )}
                 </g>
               );
             })}
@@ -220,8 +255,10 @@ const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
           {/* Rows */}
           {orderedTasks.map((task, i) => {
             const y = HEADER_HEIGHT + i * rowHeight;
-            const barX = labelWidth + xOf(task.start.getTime(), 1000);
-            const barW = xOf(task.end.getTime(), 1000) - xOf(task.start.getTime(), 1000);
+            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);
@@ -306,9 +343,9 @@ const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
               if (fromIdx === undefined) return null;
               const toIdx = taskIndex.get(task.id)!;
               const fromTask = orderedTasks[fromIdx];
-              const fromEndX = labelWidth + xOf(fromTask.end.getTime(), 1000);
+              const fromEndX = labelWidth + xOf(fromTask.end.getTime(), chartWidth);
               const fromY = HEADER_HEIGHT + fromIdx * rowHeight + rowHeight / 2;
-              const toStartX = labelWidth + xOf(task.start.getTime(), 1000);
+              const toStartX = labelWidth + xOf(task.start.getTime(), chartWidth);
               const toY = HEADER_HEIGHT + toIdx * rowHeight + rowHeight / 2;
               const midX = (fromEndX + toStartX) / 2;
 
@@ -328,8 +365,8 @@ const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
           )}
 
           {/* Milestones */}
-          {milestones.map((m, i) => {
-            const x = labelWidth + xOf(m.date.getTime(), 1000);
+          {milestones.map((m) => {
+            const x = labelWidth + xOf(m.date.getTime(), chartWidth);
             return (
               <g key={m.id}>
                 <line