GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

FIX: Percentage Text is cutoff (this removes transition as well)

Browse source
This commit is contained in:
GithubAnon0000 2025-04-27 18:24:09 +02:00
parent 472fd75092
commit 0b7140504e
1 changed files with 40 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
ts/routes/graphs/buttons.ts
View file

@ -130,58 +130,53 @@ export function renderButtons(
.domain(["learning", "young", "mature"]) .domain(["learning", "young", "mature"])
.range([bounds.marginLeft, bounds.width - bounds.marginRight]); .range([bounds.marginLeft, bounds.width - bounds.marginRight]);
svg.select<SVGGElement>(".x-ticks") svg.select<SVGGElement>(".x-ticks")
.call((selection) => .call(
selection.transition(trans).call( axisBottom(xGroup)
axisBottom(xGroup) .tickFormat(
.tickFormat( ((d: GroupKind) => {
((d: GroupKind) => { let kind: string;
let kind: string; switch (d) {
switch (d) { case "learning":
case "learning": kind = tr.statisticsCountsLearningCards();
kind = tr.statisticsCountsLearningCards(); break;
break; case "young":
case "young": kind = tr.statisticsCountsYoungCards();
kind = tr.statisticsCountsYoungCards(); break;
break; case "mature":
case "mature": default:
default: kind = tr.statisticsCountsMatureCards();
kind = tr.statisticsCountsMatureCards(); break;
break; }
} return `${kind}`;
return `${kind}`; }) as any,
}) as any, )
) .tickSizeOuter(0),
.tickSizeOuter(0),
)
) )
.attr("direction", "ltr"); .attr("direction", "ltr");
// Add a timeout to ensure that the text elements are populated svg.select<SVGGElement>(".x-ticks").selectAll<SVGTextElement, GroupKind>("text")
setTimeout(() => { .each(function(this: SVGTextElement, d: GroupKind) {
svg.select<SVGGElement>(".x-ticks").selectAll<SVGTextElement, GroupKind>("text") if (!(this instanceof SVGElement)) {
.each(function(this: SVGTextElement, d: GroupKind) { return;
if (!(this instanceof SVGElement)) { }
return; const current_text_element_content = this.textContent;
}
const current_text_element_content = this.textContent;
this.textContent = ""; this.textContent = "";
// Create a tspan for the text content (the "kind" part) // Create a tspan for the text content (the "kind" part)
const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan.textContent = current_text_element_content; tspan.textContent = current_text_element_content;
tspan.setAttribute("dy", "0.5em"); tspan.setAttribute("dy", "0.5em");
// Create a tspan for the percentage // Create a tspan for the percentage
const tspan2 = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); const tspan2 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan2.textContent = `\u200e(${totalCorrect(d).percent}%)`; tspan2.textContent = `\u200e(${totalCorrect(d).percent}%)`;
tspan2.setAttribute("dy", "1em"); tspan2.setAttribute("dy", "1em");
tspan2.setAttribute("dx", "-4em"); // i realized it works. It's probably a coincidence and a hack tspan2.setAttribute("dx", "-4em"); // i realized it works. It's probably a coincidence and a hack
this.appendChild(tspan); this.appendChild(tspan);
this.appendChild(tspan2); this.appendChild(tspan2);
}); });
}, 0);
const xButton = scaleBand() const xButton = scaleBand()
.domain(["1", "2", "3", "4"]) .domain(["1", "2", "3", "4"])