@spider-analyzer/timeline 5.0.4 → 5.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spider-analyzer/timeline",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "description": "React graphical component to display metric over time with a time selection feature.",
   "author": "Thibaut Raballand <spider.analyzer@gmail.com> (https://spider-analyzer.io)",
   "license": "MIT",

package/src/TimeLine.tsx

@@ -189,9 +189,19 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
         xAxis.clamp(true);
         xAxisRef.current = xAxis;
 
-        const ticks = xAxis.ticks(_floor(histoWidth / p.xAxis.spaceBetweenTicks));
+        const tickCount = _floor(histoWidth / p.xAxis.spaceBetweenTicks);
+        const ticks = xAxis.ticks(tickCount);
+        // intervalMs should be domainSpan/(visibleTickCount*barsBetweenTicks).
+        // Use ticks[1]-ticks[0] when d3 gives us >= 2 "nice" ticks (preserves
+        // the original intent of snapping to minute/hour-aligned intervals);
+        // otherwise fall back to domainSpan/tickCount so we never regress to
+        // smallestResolution on the very first render (when tick generation
+        // can be momentarily sparse).
+        const tickIntervalMs = ticks.length >= 2
+            ? ticks[1].getTime() - ticks[0].getTime()
+            : (+domain.max - +domain.min) / Math.max(tickCount, 1);
         const intervalMs = _max([
-            _round(moment(ticks[1]).diff(moment(ticks[0])) / p.xAxis.barsBetweenTicks),
+            _round(tickIntervalMs / p.xAxis.barsBetweenTicks),
             propsRef.current.smallestResolution.asMilliseconds(),
         ]) as number;