langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

factor out data table into separate file

Browse Source
This commit is contained in:
Damien Elmes 2020-08-04 14:37:21 +10:00
parent a5a12e0d00
commit 1b62b932fe
4 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ts/src/stats/ReviewsGraph.svelte
View File

@ -1,11 +1,12 @@
<script lang="typescript"> <script lang="typescript">
import AxisTicks from "./AxisTicks.svelte"; import AxisTicks from "./AxisTicks.svelte";
import { defaultGraphBounds, RevlogRange, GraphRange } from "./graphs"; import { defaultGraphBounds, RevlogRange, GraphRange, TableDatum } from "./graphs";
import { GraphData, gatherData, renderReviews } from "./reviews"; import { GraphData, gatherData, renderReviews } from "./reviews";
import pb from "../backend/proto"; import pb from "../backend/proto";
import { I18n } from "../i18n"; import { I18n } from "../i18n";
import NoDataOverlay from "./NoDataOverlay.svelte"; import NoDataOverlay from "./NoDataOverlay.svelte";
import GraphRangeRadios from "./GraphRangeRadios.svelte"; import GraphRangeRadios from "./GraphRangeRadios.svelte";
import TableData from "./TableData.svelte";
export let sourceData: pb.BackendProto.GraphsOut | null = null; export let sourceData: pb.BackendProto.GraphsOut | null = null;
export let revlogRange: RevlogRange; export let revlogRange: RevlogRange;
@ -22,9 +23,9 @@
graphData = gatherData(sourceData); graphData = gatherData(sourceData);
} }
let tableStrings: [string, string][] = []; let tableData: TableDatum[] = [] as any;
$: if (graphData) { $: if (graphData) {
tableStrings = renderReviews( tableData = renderReviews(
svg as SVGElement, svg as SVGElement,
bounds, bounds,
graphData, graphData,
@ -69,14 +70,5 @@
<NoDataOverlay {bounds} {i18n} /> <NoDataOverlay {bounds} {i18n} />
</svg> </svg>
<div class="centered"> <TableData {i18n} {tableData} />
<table dir={i18n.direction()}>
{#each tableStrings as [label, value]}
<tr>
<td class="align-end">{label}:</td>
<td class="align-start">{value}</td>
</tr>
{/each}
</table>
</div>
</div> </div>

18
ts/src/stats/TableData.svelte Normal file
View File

@ -0,0 +1,18 @@
<script lang="typescript">
import { I18n } from "../i18n";
import { TableDatum } from "./graphs";
export let i18n: I18n;
export let tableData: TableDatum[];
</script>
<div class="centered">
<table dir={i18n.direction()}>
{#each tableData as { label, value }}
<tr>
<td class="align-end">{label}:</td>
<td class="align-start">{value}</td>
</tr>
{/each}
</table>
</div>

5
ts/src/stats/graphs.ts
View File

@ -109,3 +109,8 @@ export function millisecondCutoffForRange(
return (nextDayAtSecs - 86400 * days) * 1000; return (nextDayAtSecs - 86400 * days) * 1000;
} }
export interface TableDatum {
label: string;
value: string;
}

28
ts/src/stats/reviews.ts
View File

@ -18,7 +18,7 @@ import { select, mouse } from "d3-selection";
import { scaleLinear, scaleSequential } from "d3-scale"; import { scaleLinear, scaleSequential } from "d3-scale";
import { axisBottom, axisLeft } from "d3-axis"; import { axisBottom, axisLeft } from "d3-axis";
import { showTooltip, hideTooltip } from "./tooltip"; import { showTooltip, hideTooltip } from "./tooltip";
import { GraphBounds, setDataAvailable, GraphRange } from "./graphs"; import { GraphBounds, setDataAvailable, GraphRange, TableDatum } from "./graphs";
import { area, curveBasis } from "d3-shape"; import { area, curveBasis } from "d3-shape";
import { min, histogram, sum, max, Bin, cumsum } from "d3-array"; import { min, histogram, sum, max, Bin, cumsum } from "d3-array";
import { timeSpan, dayLabel } from "../time"; import { timeSpan, dayLabel } from "../time";
@ -108,7 +108,7 @@ export function renderReviews(
range: GraphRange, range: GraphRange,
showTime: boolean, showTime: boolean,
i18n: I18n i18n: I18n
): [string, string][] { ): TableDatum[] {
const svg = select(svgElem); const svg = select(svgElem);
const trans = svg.transition().duration(600) as any; const trans = svg.transition().duration(600) as any;
@ -389,25 +389,31 @@ export function renderReviews(
averageAnswerTime = averageAnswerTimeLabel = ""; averageAnswerTime = averageAnswerTimeLabel = "";
} }
const tableData: [string, string][] = [ const tableData: TableDatum[] = [
[ {
i18n.tr(i18n.TR.STATISTICS_DAYS_STUDIED), label: i18n.tr(i18n.TR.STATISTICS_DAYS_STUDIED),
i18n.tr(i18n.TR.STATISTICS_AMOUNT_OF_TOTAL_WITH_PERCENTAGE, { value: i18n.tr(i18n.TR.STATISTICS_AMOUNT_OF_TOTAL_WITH_PERCENTAGE, {
amount: studiedDays, amount: studiedDays,
total: periodDays, total: periodDays,
percent: Math.round((studiedDays / periodDays) * 100), percent: Math.round((studiedDays / periodDays) * 100),
}), }),
], },
[i18n.tr(i18n.TR.STATISTICS_TOTAL), totalString], { label: i18n.tr(i18n.TR.STATISTICS_TOTAL), value: totalString },
[i18n.tr(i18n.TR.STATISTICS_AVERAGE_FOR_DAYS_STUDIED), averageForDaysStudied], {
label: i18n.tr(i18n.TR.STATISTICS_AVERAGE_FOR_DAYS_STUDIED),
value: averageForDaysStudied,
},
[i18n.tr(i18n.TR.STATISTICS_AVERAGE_OVER_PERIOD), averageForPeriod], {
label: i18n.tr(i18n.TR.STATISTICS_AVERAGE_OVER_PERIOD),
value: averageForPeriod,
},
]; ];
if (averageAnswerTime) { if (averageAnswerTime) {
tableData.push([averageAnswerTimeLabel, averageAnswerTime]); tableData.push({ label: averageAnswerTimeLabel, value: averageAnswerTime });
} }
return tableData; return tableData;