improve skip ticks

web/src/gain.ts

@@ -163,10 +163,9 @@ function renderOverview(gains: Gain[]) {
       d3
         .axisBottom(x)
         .tickSize(-height)
-        .tickFormat(
-          skipTicks(50, x(maxInvestment), x.ticks().length, formatCurrencyCrude)
-        )
+        .tickFormat(skipTicks(50, x, formatCurrencyCrude))
     );
+
   g.append("g")
     .attr("class", "axis y")
     .attr("transform", "translate(0," + height + ")")
@@ -174,9 +173,7 @@ function renderOverview(gains: Gain[]) {
       d3
         .axisBottom(x1)
         .tickSize(-height)
-        .tickFormat(
-          skipTicks(40, xirrWidth, x1.ticks().length, (n) => formatFloat(n, 1))
-        )
+        .tickFormat(skipTicks(40, x, (n) => formatFloat(n, 1)))
     );
 
   g.append("g").attr("class", "axis y dark").call(d3.axisLeft(y));

web/src/income.ts

@@ -128,7 +128,7 @@ function renderIncomeTimeline(
       d3
         .axisBottom(x)
         .ticks(5)
-        .tickFormat(skipTicks(30, width, points.length, (d) => d.toString()))
+        .tickFormat(skipTicks(30, x, (d) => d.toString(), points.length))
     )
     .selectAll("text")
     .attr("y", 10)

web/src/investment.ts

@@ -157,7 +157,7 @@ function renderInvestmentTimeline(
       d3
         .axisBottom(x)
         .ticks(5)
-        .tickFormat(skipTicks(30, width, points.length, (d) => d.toString()))
+        .tickFormat(skipTicks(30, x, (d) => d.toString(), points.length))
     )
     .selectAll("text")
     .attr("y", 10)

web/src/utils.ts

@@ -166,12 +166,15 @@ export function depth(account: string) {
   return account.split(":").length;
 }
 
-export function skipTicks(
+export function skipTicks<Domain>(
   minWidth: number,
-  width: number,
-  points: number,
-  cb: (data: d3.AxisDomain, index: number) => string
+  scale: d3.AxisScale<Domain>,
+  cb: (data: d3.AxisDomain, index: number) => string,
+  ticks?: number
 ) {
+  const range = scale.range();
+  const width = Math.abs(range[1] - range[0]);
+  const points = ticks ? ticks : (scale as any).ticks().length;
   return function (data: d3.AxisDomain, index: number) {
     let skip = Math.round((minWidth * points) / width);
     skip = Math.max(1, skip);