Make sure x-axis ticks fit

Author: apata

assets/js/dashboard/stats/graph/main-graph.tsx

@@ -128,50 +128,110 @@ export const MainGraph = ({
       }
     ])
 
-    // Create the SVG container.
+    // create the SVG container
     const svg = d3.select(svgRef.current)
 
     const maxXTicks = 8
     const xTickCount = Math.min(remappedData.length, maxXTicks)
-    // Add the x-axis.
-    svg
+    // add the x-axis
+    let xAxisBoundingRect: DOMRect
+    const xAxisSelection = svg
       .append('g')
+      .attr('class', 'x-axis--container')
       .attr('transform', `translate(0,${yBottomEdge})`)
-      .call(
-        d3
-          .axisBottom(x)
-          .ticks(xTickCount)
-          .tickSize(0)
-          .tickFormat((bucketIndex) => {
-            // for low tick counts, it may try to render ticks
-            // with the index 0.5, 1.5, etc which don't have data defined
-            const datum = remappedData[bucketIndex.valueOf()]
-            return datum
-              ? datum.timeLabel
-                ? getXLabel(datum.timeLabel, {
-                    shouldShowYear: hasMultipleYears,
-                    period,
-                    interval,
-                    bucketIndex: bucketIndex.valueOf(),
-                    totalBuckets: remappedData.length
-                  })
+      .each(function () {
+        const elem = this as SVGGraphicsElement
+        xAxisBoundingRect = elem.getBoundingClientRect()
+      })
+
+    // try a few x-axis labels until one fits
+    const tries = xTickCount - 2
+    for (const [index, tickCount] of new Array(tries)
+      .fill(null)
+      .map((_, index) => xTickCount - index)
+      .entries()) {
+      const axis = xAxisSelection
+        .append('g')
+        .attr('class', 'x-axis')
+        .attr('opacity', 0)
+        .call(
+          d3
+            .axisBottom(x)
+            .ticks(tickCount)
+            .tickSize(4)
+            .tickFormat((bucketIndex) => {
+              // for low tick counts, it may try to render ticks
+              // with the index 0.5, 1.5, etc which don't have data defined
+              const datum = remappedData[bucketIndex.valueOf()]
+              return datum
+                ? datum.timeLabel
+                  ? getXLabel(datum.timeLabel, {
+                      shouldShowYear: hasMultipleYears,
+                      period,
+                      interval,
+                      bucketIndex: bucketIndex.valueOf(),
+                      totalBuckets: remappedData.length
+                    })
+                  : ''
                 : ''
-              : ''
-          })
-      )
-      .call((g) => g.select('.domain').remove())
-      .call((g) => g.selectAll('.tick').attr('class', 'tick group'))
-      .call((g) =>
-        g
-          .selectAll('.tick text')
-          .attr('class', classNames(tickClass, 'translate-y-2'))
+            })
+        )
+        .call((g) => g.select('.domain').remove())
+        .call((g) => g.selectAll('.tick').attr('class', 'tick group'))
+        .call((g) =>
+          g.selectAll('.tick line').attr('class', classNames(xTickLineClass))
+        )
+        .call((g) =>
+          g
+            .selectAll('.tick text')
+            .attr('class', classNames(tickTextClass, 'translate-y-2'))
+        )
+
+      let overlapCount = 0
+      let lastTickTextRightEdge = 0
+      axis.call((g) =>
+        g.selectAll('.tick text').each(function (_, index, groups) {
+          const elem = this as SVGGraphicsElement
+          let textRect = elem.getBoundingClientRect()
+
+          const minX = xAxisBoundingRect.left
+          const maxX = xAxisBoundingRect.left + width
+
+          // nudge over first tick text if needed, remeasure
+          if (index === 0) {
+            const distanceFromAxisEdge = textRect.left - minX
+            if (distanceFromAxisEdge < 0) {
+              d3.select(elem).attr('dx', -distanceFromAxisEdge)
+              textRect = elem.getBoundingClientRect()
+            }
+          }
+          // nudge back last tick text if needed, remeasure
+          if (index === groups.length - 1) {
+            const distanceFromAxisEdge = maxX - textRect.right
+            if (distanceFromAxisEdge < 0) {
+              d3.select(elem).attr('dx', distanceFromAxisEdge)
+              textRect = elem.getBoundingClientRect()
+            }
+          }
+          const isOverlappingPrevious = textRect.left < lastTickTextRightEdge
+          if (isOverlappingPrevious) {
+            overlapCount++
+          }
+          lastTickTextRightEdge = textRect.right
+        })
       )
-    // Add the y-axis, remove the domain line, add grid lines and a label.
-    // TODO: make dynamic
-    // const maxYTicks = 8
+      if (overlapCount > 0 && index !== tries - 1) {
+        axis.remove()
+      } else {
+        break
+      }
+    }
+    xAxisSelection.call((g) => g.select('.x-axis').attr('opacity', 1))
+
     const yTickCount = 8
     svg
       .append('g')
+      .attr('class', 'y-axis--container')
       .attr('transform', `translate(${xLeftEdge}, 0)`)
       .call(
         d3
@@ -182,13 +242,13 @@ export const MainGraph = ({
       )
       .call((g) => g.select('.domain').remove())
       .call((g) => g.selectAll('.tick').attr('class', 'tick group'))
-      .call((g) => g.selectAll('.tick text').attr('class', tickClass))
+      .call((g) => g.selectAll('.tick text').attr('class', tickTextClass))
       .call((g) =>
         g
           .selectAll('.tick line')
           .clone()
           .attr('x2', chartAreaWidth)
-          .attr('class', tickLineClass)
+          .attr('class', yTickLineClass)
       )
 
     const mainGradientId = addGradient({
@@ -763,9 +823,10 @@ const paletteByTheme = {
   }
 }
 
-const tickLineClass =
+const yTickLineClass =
   'stroke-gray-150 dark:stroke-gray-800/75 group-first:stroke-gray-300 dark:group-first:stroke-gray-700'
-const tickClass = 'fill-gray-500 dark:fill-gray-400 text-xs'
+const tickTextClass = 'fill-gray-500 dark:fill-gray-400 text-xs'
+const xTickLineClass = 'stroke-gray-300 dark:stroke-gray-700'
 
 const mainDotClass = 'fill-indigo-500 dark:fill-indigo-400'
 const comparisonDotClass = 'fill-indigo-500/20 dark:fill-indigo-400/20'