GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Split true retention into multiple tables; display vertically

Browse source 
This prevents the page scrolling off screen on small devices. This is
a quick fix, and further tweaks to the layout are welcome.
This commit is contained in:
Damien Elmes 2024-10-04 17:04:22 +10:00
parent 12cd3ca919
commit 85f034b144
2 changed files with 62 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ts/routes/graphs/TrueRetention.svelte
View file

@ -35,6 +35,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
.true-retention-table { .true-retention-table {
overflow-x: auto; overflow-x: auto;
margin-top: 1rem; margin-top: 1rem;
display: flex;
} }
</style> </style>

107
ts/routes/graphs/true-retention.ts
View file

@ -20,69 +20,82 @@ function calculateRetention(passed: number, failed: number): string {
return localizedNumber((passed / total) * 100, 1) + "%"; return localizedNumber((passed / total) * 100, 1) + "%";
} }
function createStatsRow(name: string, data: TrueRetentionData): string { enum Scope {
const youngRetention = calculateRetention(data.youngPassed, data.youngFailed); Young,
const matureRetention = calculateRetention(data.maturePassed, data.matureFailed); Mature,
const totalPassed = data.youngPassed + data.maturePassed; Total,
const totalFailed = data.youngFailed + data.matureFailed; }
const totalRetention = calculateRetention(totalPassed, totalFailed);
function createStatsRow(period: string, data: TrueRetentionData, scope: Scope): string {
let pass: number, fail: number, retention: string;
switch (scope) {
case Scope.Young:
pass = data.youngPassed;
fail = data.youngFailed;
retention = calculateRetention(data.youngPassed, data.youngFailed);
break;
case Scope.Mature:
pass = data.maturePassed;
fail = data.matureFailed;
retention = calculateRetention(data.maturePassed, data.matureFailed);
break;
case Scope.Total:
pass = data.youngPassed + data.maturePassed;
fail = data.youngFailed + data.matureFailed;
retention = calculateRetention(pass, fail);
break;
}
return ` return `
<tr> <tr>
<td class="trl">${name}</td> <td class="trl">${period}</td>
<td class="trr">${localizedNumber(data.youngPassed)}</td> <td class="trr">${localizedNumber(pass)}</td>
<td class="trr">${localizedNumber(data.youngFailed)}</td> <td class="trr">${localizedNumber(fail)}</td>
<td class="trr">${youngRetention}</td> <td class="trr">${retention}</td>
<td class="trr">${localizedNumber(data.maturePassed)}</td>
<td class="trr">${localizedNumber(data.matureFailed)}</td>
<td class="trr">${matureRetention}</td>
<td class="trr">${localizedNumber(totalPassed)}</td>
<td class="trr">${localizedNumber(totalFailed)}</td>
<td class="trr">${totalRetention}</td>
</tr>`; </tr>`;
} }
export function renderTrueRetention(data: GraphsResponse, revlogRange: RevlogRange): string { export function renderTrueRetention(data: GraphsResponse, revlogRange: RevlogRange): string {
const trueRetention = data.trueRetention!; const trueRetention = data.trueRetention!;
let output = "";
for (const scope of Object.values(Scope)) {
if (typeof scope === "string") { continue; }
const tableContent = ` const tableContent = `
<style> <style>
td.trl { border: 1px solid; text-align: left; padding: 5px; } td.trl { border: 1px solid; text-align: left; }
td.trr { border: 1px solid; text-align: right; padding: 5px; } td.trr { border: 1px solid; text-align: right; }
td.trc { border: 1px solid; text-align: center; padding: 5px; } td.trc { border: 1px solid; text-align: center; }
table { width: 100%; margin: 0px 25px 20px 25px; } table { width: 100%; }
</style> </style>
<table cellspacing="0" cellpadding="2"> <table cellspacing="0" cellpadding="2">
<tr> <tr>
<td class="trl" rowspan=3><b>${tr.statisticsTrueRetentionRange()}</b></td> <td class="trl"><b>${scopeRange(scope)}</b></td>
<td class="trc" colspan=9><b>${tr.statisticsReviewsTitle()}</b></td> <td class="trr">${tr.statisticsTrueRetentionPass()}</td>
<td class="trr">${tr.statisticsTrueRetentionFail()}</td>
<td class="trr">${tr.statisticsTrueRetentionRetention()}</td>
</tr> </tr>
<tr> ${createStatsRow(tr.statisticsTrueRetentionToday(), trueRetention.today!, scope)}
<td class="trc" colspan=3><b>${tr.statisticsCountsYoungCards()}</b></td> ${createStatsRow(tr.statisticsTrueRetentionYesterday(), trueRetention.yesterday!, scope)}
<td class="trc" colspan=3><b>${tr.statisticsCountsMatureCards()}</b></td> ${createStatsRow(tr.statisticsTrueRetentionWeek(), trueRetention.week!, scope)}
<td class="trc" colspan=3><b>${tr.statisticsCountsTotalCards()}</b></td> ${createStatsRow(tr.statisticsTrueRetentionMonth(), trueRetention.month!, scope)}
</tr>
<tr>
<td class="trc">${tr.statisticsTrueRetentionPass()}</td>
<td class="trc">${tr.statisticsTrueRetentionFail()}</td>
<td class="trc">${tr.statisticsTrueRetentionRetention()}</td>
<td class="trc">${tr.statisticsTrueRetentionPass()}</td>
<td class="trc">${tr.statisticsTrueRetentionFail()}</td>
<td class="trc">${tr.statisticsTrueRetentionRetention()}</td>
<td class="trc">${tr.statisticsTrueRetentionPass()}</td>
<td class="trc">${tr.statisticsTrueRetentionFail()}</td>
<td class="trc">${tr.statisticsTrueRetentionRetention()}</td>
</tr>
${createStatsRow(tr.statisticsTrueRetentionToday(), trueRetention.today!)}
${createStatsRow(tr.statisticsTrueRetentionYesterday(), trueRetention.yesterday!)}
${createStatsRow(tr.statisticsTrueRetentionWeek(), trueRetention.week!)}
${createStatsRow(tr.statisticsTrueRetentionMonth(), trueRetention.month!)}
${ ${
revlogRange === RevlogRange.Year revlogRange === RevlogRange.Year
? createStatsRow(tr.statisticsTrueRetentionYear(), trueRetention.year!) ? createStatsRow(tr.statisticsTrueRetentionYear(), trueRetention.year!, scope)
: createStatsRow(tr.statisticsTrueRetentionAllTime(), trueRetention.allTime!) : createStatsRow(tr.statisticsTrueRetentionAllTime(), trueRetention.allTime!, scope)
} }
</table>`; </table>`;
output += tableContent;
return tableContent; }
return output;
}
function scopeRange(scope: Scope) {
switch (scope) {
case Scope.Young:
return tr.statisticsCountsYoungCards();
case Scope.Mature:
return tr.statisticsCountsMatureCards();
case Scope.Total:
return tr.statisticsTotal();
}
} }