diff --git a/web/src/gain.ts b/web/src/gain.ts index a3b39c2..08f7ea8 100644 --- a/web/src/gain.ts +++ b/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)); diff --git a/web/src/income.ts b/web/src/income.ts index 9848e28..64d3ed5 100644 --- a/web/src/income.ts +++ b/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) diff --git a/web/src/investment.ts b/web/src/investment.ts index 8cf348d..7d5e3f1 100644 --- a/web/src/investment.ts +++ b/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) diff --git a/web/src/utils.ts b/web/src/utils.ts index e68c948..771215d 100644 --- a/web/src/utils.ts +++ b/web/src/utils.ts @@ -166,12 +166,15 @@ export function depth(account: string) { return account.split(":").length; } -export function skipTicks( +export function skipTicks( minWidth: number, - width: number, - points: number, - cb: (data: d3.AxisDomain, index: number) => string + scale: d3.AxisScale, + 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);