GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 14:02: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 {
overflow-x: auto;
margin-top: 1rem;
display: flex;
}
</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) + "%";
}
function createStatsRow(name: string, data: TrueRetentionData): string {
const youngRetention = calculateRetention(data.youngPassed, data.youngFailed);
const matureRetention = calculateRetention(data.maturePassed, data.matureFailed);
const totalPassed = data.youngPassed + data.maturePassed;
const totalFailed = data.youngFailed + data.matureFailed;
const totalRetention = calculateRetention(totalPassed, totalFailed);
enum Scope {
Young,
Mature,
Total,
}
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 `
<tr>
<td class="trl">${name}</td>
<td class="trr">${localizedNumber(data.youngPassed)}</td>
<td class="trr">${localizedNumber(data.youngFailed)}</td>
<td class="trr">${youngRetention}</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>
<td class="trl">${period}</td>
<td class="trr">${localizedNumber(pass)}</td>
<td class="trr">${localizedNumber(fail)}</td>
<td class="trr">${retention}</td>
</tr>`;
}
export function renderTrueRetention(data: GraphsResponse, revlogRange: RevlogRange): string {
const trueRetention = data.trueRetention!;
let output = "";
for (const scope of Object.values(Scope)) {
if (typeof scope === "string") { continue; }
const tableContent = `
<style>
td.trl { border: 1px solid; text-align: left; padding: 5px; }
td.trr { border: 1px solid; text-align: right; padding: 5px; }
td.trc { border: 1px solid; text-align: center; padding: 5px; }
table { width: 100%; margin: 0px 25px 20px 25px; }
td.trl { border: 1px solid; text-align: left; }
td.trr { border: 1px solid; text-align: right; }
td.trc { border: 1px solid; text-align: center; }
table { width: 100%; }
</style>
<table cellspacing="0" cellpadding="2">
<tr>
<td class="trl" rowspan=3><b>${tr.statisticsTrueRetentionRange()}</b></td>
<td class="trc" colspan=9><b>${tr.statisticsReviewsTitle()}</b></td>
<td class="trl"><b>${scopeRange(scope)}</b></td>
<td class="trr">${tr.statisticsTrueRetentionPass()}</td>
<td class="trr">${tr.statisticsTrueRetentionFail()}</td>
<td class="trr">${tr.statisticsTrueRetentionRetention()}</td>
</tr>
<tr>
<td class="trc" colspan=3><b>${tr.statisticsCountsYoungCards()}</b></td>
<td class="trc" colspan=3><b>${tr.statisticsCountsMatureCards()}</b></td>
<td class="trc" colspan=3><b>${tr.statisticsCountsTotalCards()}</b></td>
</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!)}
${createStatsRow(tr.statisticsTrueRetentionToday(), trueRetention.today!, scope)}
${createStatsRow(tr.statisticsTrueRetentionYesterday(), trueRetention.yesterday!, scope)}
${createStatsRow(tr.statisticsTrueRetentionWeek(), trueRetention.week!, scope)}
${createStatsRow(tr.statisticsTrueRetentionMonth(), trueRetention.month!, scope)}
${
revlogRange === RevlogRange.Year
? createStatsRow(tr.statisticsTrueRetentionYear(), trueRetention.year!)
: createStatsRow(tr.statisticsTrueRetentionAllTime(), trueRetention.allTime!)
? createStatsRow(tr.statisticsTrueRetentionYear(), trueRetention.year!, scope)
: createStatsRow(tr.statisticsTrueRetentionAllTime(), trueRetention.allTime!, scope)
}
</table>`;
return tableContent;
output += 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();
}
}