anki/ts/src/stats/GraphsPage.svelte

149 lines
4.4 KiB
Svelte
Raw Normal View History

<script context="module">
2020-06-30 08:23:46 +02:00
import style from "./graphs.scss";
</script>
<script lang="typescript">
2020-06-27 14:10:56 +02:00
import { timeSpan, MONTH, YEAR } from "../time";
2020-06-27 11:24:49 +02:00
import { I18n } from "../i18n";
2020-06-27 14:10:56 +02:00
import { assertUnreachable } from "../typing";
import pb from "../backend/proto";
2020-06-27 07:35:34 +02:00
import { getGraphData, RevlogRange } from "./graphs";
import IntervalsGraph from "./IntervalsGraph.svelte";
2020-06-23 12:43:19 +02:00
import EaseGraph from "./EaseGraph.svelte";
2020-06-24 01:41:07 +02:00
import AddedGraph from "./AddedGraph.svelte";
import TodayStats from "./TodayStats.svelte";
import ButtonsGraph from "./ButtonsGraph.svelte";
import CardCounts from "./CardCounts.svelte";
2020-06-26 06:05:58 +02:00
import HourGraph from "./HourGraph.svelte";
2020-06-26 11:25:02 +02:00
import FutureDue from "./FutureDue.svelte";
2020-06-27 04:35:13 +02:00
import ReviewsGraph from "./ReviewsGraph.svelte";
2020-06-30 07:09:20 +02:00
import CalendarGraph from "./CalendarGraph.svelte";
2020-06-27 11:24:49 +02:00
export let i18n: I18n;
2020-06-30 08:23:46 +02:00
export let nightMode: boolean;
2020-06-27 11:24:49 +02:00
let sourceData: pb.BackendProto.GraphsOut | null = null;
2020-06-22 12:28:36 +02:00
enum SearchRange {
Deck = 1,
Collection = 2,
Custom = 3,
}
let searchRange: SearchRange = SearchRange.Deck;
2020-07-06 10:29:35 +02:00
let revlogRange: RevlogRange = RevlogRange.Year;
let days: number = 31;
2020-06-26 07:34:21 +02:00
let refreshing = false;
2020-06-22 12:28:36 +02:00
let search = "deck:current";
let displayedSearch = search;
2020-06-22 12:28:36 +02:00
const refresh = async () => {
2020-06-26 07:34:21 +02:00
refreshing = true;
sourceData = await getGraphData(search, days);
2020-06-26 07:34:21 +02:00
refreshing = false;
};
$: {
// refresh if either of these change
search;
days;
refresh();
}
2020-06-22 12:28:36 +02:00
$: {
switch (searchRange as SearchRange) {
case SearchRange.Deck:
search = displayedSearch = "deck:current";
2020-06-22 12:28:36 +02:00
break;
case SearchRange.Collection:
search = displayedSearch = "";
2020-06-22 12:28:36 +02:00
break;
case SearchRange.Custom:
break;
}
}
$: {
2020-06-27 07:35:34 +02:00
switch (revlogRange as RevlogRange) {
case RevlogRange.Year:
days = 365;
break;
2020-06-27 07:35:34 +02:00
case RevlogRange.All:
days = 0;
break;
}
}
const searchKeyUp = (e: KeyboardEvent) => {
// fetch data on enter
if (e.keyCode == 13) {
2020-06-29 07:11:46 +02:00
const wasSame = search == displayedSearch;
search = displayedSearch;
2020-06-29 07:11:46 +02:00
if (wasSame) {
// force a refresh (user may have changed current deck, etc)
refresh();
}
}
};
2020-06-27 14:10:56 +02:00
2020-07-06 10:29:35 +02:00
const month = timeSpan(i18n, 3 * MONTH);
const year = i18n.tr(i18n.TR.STATISTICS_RANGE_1_YEAR_HISTORY);
2020-06-28 05:46:17 +02:00
const deck = i18n.tr(i18n.TR.STATISTICS_RANGE_DECK);
const collection = i18n.tr(i18n.TR.STATISTICS_RANGE_COLLECTION);
const searchLabel = i18n.tr(i18n.TR.STATISTICS_RANGE_SEARCH);
2020-07-06 10:29:35 +02:00
const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_HISTORY);
</script>
<div class="range-box">
2020-06-26 07:34:21 +02:00
<div class="spin {refreshing ? 'active' : ''}"></div>
<div class="range-box-inner">
<label>
<input type="radio" bind:group={searchRange} value={SearchRange.Deck} />
2020-06-28 05:46:17 +02:00
{deck}
2020-06-26 07:34:21 +02:00
</label>
<label>
<input
type="radio"
bind:group={searchRange}
value={SearchRange.Collection} />
2020-06-28 05:46:17 +02:00
{collection}
2020-06-26 07:34:21 +02:00
</label>
2020-06-27 13:45:16 +02:00
<input
type="text"
bind:value={displayedSearch}
on:keyup={searchKeyUp}
on:focus={() => {
searchRange = SearchRange.Custom;
}}
2020-06-28 05:46:17 +02:00
placeholder={searchLabel} />
2020-06-26 07:34:21 +02:00
</div>
<div class="range-box-inner">
<label>
2020-06-27 07:35:34 +02:00
<input type="radio" bind:group={revlogRange} value={RevlogRange.Year} />
2020-06-27 14:10:56 +02:00
{year}
2020-06-26 07:34:21 +02:00
</label>
<label>
2020-06-27 07:35:34 +02:00
<input type="radio" bind:group={revlogRange} value={RevlogRange.All} />
2020-06-28 05:46:17 +02:00
{all}
2020-06-26 07:34:21 +02:00
</label>
</div>
</div>
2020-06-26 07:34:21 +02:00
<div class="range-box-pad" />
2020-07-06 06:01:49 +02:00
{#if sourceData}
<TodayStats {sourceData} {i18n} />
<CardCounts {sourceData} {i18n} />
<CalendarGraph {sourceData} {revlogRange} {i18n} {nightMode} />
<FutureDue {sourceData} {i18n} />
2020-07-06 06:01:49 +02:00
<ReviewsGraph {sourceData} {revlogRange} {i18n} />
<IntervalsGraph {sourceData} {i18n} />
<EaseGraph {sourceData} {i18n} />
<HourGraph {sourceData} {revlogRange} {i18n} />
<ButtonsGraph {sourceData} {revlogRange} {i18n} />
<AddedGraph {sourceData} {i18n} />
2020-07-06 06:01:49 +02:00
{/if}