From 008940026eb1592a983b41ce32e6d99f5063d6fd Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 22 Dec 2020 22:06:12 +0100 Subject: [PATCH 01/17] Pass in graphs as arguments into graphs() --- ts/graphs/GraphsPage.svelte | 24 ++++-------------------- ts/graphs/bootstrap.ts | 21 +++++++++++++++++++-- ts/graphs/graphs.html | 15 ++++++++++++++- 3 files changed, 37 insertions(+), 23 deletions(-) diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte index 643d42a8c..c150b297a 100644 --- a/ts/graphs/GraphsPage.svelte +++ b/ts/graphs/GraphsPage.svelte @@ -6,19 +6,10 @@ import type { I18n } from "anki/i18n"; import type pb from "anki/backend_proto"; import { getGraphData, RevlogRange } from "./graph-helpers"; - import IntervalsGraph from "./IntervalsGraph.svelte"; - import EaseGraph from "./EaseGraph.svelte"; - import AddedGraph from "./AddedGraph.svelte"; - import TodayStats from "./TodayStats.svelte"; - import ButtonsGraph from "./ButtonsGraph.svelte"; - import CardCounts from "./CardCounts.svelte"; - import HourGraph from "./HourGraph.svelte"; - import FutureDue from "./FutureDue.svelte"; - import ReviewsGraph from "./ReviewsGraph.svelte"; - import CalendarGraph from "./CalendarGraph.svelte"; export let i18n: I18n; export let nightMode: boolean; + export let graphs: any[]; let sourceData: pb.BackendProto.GraphsOut | null = null; @@ -144,15 +135,8 @@
{#if sourceData} - - - - - - - - - - + {#each graphs as Graph} + + {/each} {/if}
diff --git a/ts/graphs/bootstrap.ts b/ts/graphs/bootstrap.ts index ccc63403e..12a5b6b31 100644 --- a/ts/graphs/bootstrap.ts +++ b/ts/graphs/bootstrap.ts @@ -5,11 +5,28 @@ import { setupI18n } from "anki/i18n"; import GraphsPage from "./GraphsPage.svelte"; import { checkNightMode } from "anki/nightmode"; -export function graphs(target: HTMLDivElement): void { +export { default as IntervalsGraph } from "./IntervalsGraph.svelte"; +export { default as EaseGraph } from "./EaseGraph.svelte"; +export { default as AddedGraph } from "./AddedGraph.svelte"; +export { default as TodayStats } from "./TodayStats.svelte"; +export { default as ButtonsGraph } from "./ButtonsGraph.svelte"; +export { default as CardCounts } from "./CardCounts.svelte"; +export { default as HourGraph } from "./HourGraph.svelte"; +export { default as FutureDue } from "./FutureDue.svelte"; +export { default as ReviewsGraph } from "./ReviewsGraph.svelte"; +export { default as CalendarGraph } from "./CalendarGraph.svelte"; + +export function graphs(target: HTMLDivElement, graphs: any[]): void { + const nightMode = checkNightMode(); + setupI18n().then((i18n) => { new GraphsPage({ target, - props: { i18n, nightMode: checkNightMode() }, + props: { + i18n, + graphs, + nightMode, + }, }); }); } diff --git a/ts/graphs/graphs.html b/ts/graphs/graphs.html index 43e8cb85d..403df40bc 100644 --- a/ts/graphs/graphs.html +++ b/ts/graphs/graphs.html @@ -11,6 +11,19 @@ From 5d117cf1a0564ff0245a40672b031df8321e79ff Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 22 Dec 2020 22:25:47 +0100 Subject: [PATCH 02/17] Bubble up days and search to caller --- ts/graphs/GraphsPage.svelte | 5 +++-- ts/graphs/bootstrap.ts | 10 +++++++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte index c150b297a..2312d825c 100644 --- a/ts/graphs/GraphsPage.svelte +++ b/ts/graphs/GraphsPage.svelte @@ -11,6 +11,9 @@ export let nightMode: boolean; export let graphs: any[]; + export let search: string; + export let days: number; + let sourceData: pb.BackendProto.GraphsOut | null = null; enum SearchRange { @@ -21,10 +24,8 @@ let searchRange: SearchRange = SearchRange.Deck; let revlogRange: RevlogRange = RevlogRange.Year; - let days: number = 31; let refreshing = false; - let search = "deck:current"; let displayedSearch = search; const refresh = async () => { diff --git a/ts/graphs/bootstrap.ts b/ts/graphs/bootstrap.ts index 12a5b6b31..2877fe8e2 100644 --- a/ts/graphs/bootstrap.ts +++ b/ts/graphs/bootstrap.ts @@ -16,7 +16,13 @@ export { default as FutureDue } from "./FutureDue.svelte"; export { default as ReviewsGraph } from "./ReviewsGraph.svelte"; export { default as CalendarGraph } from "./CalendarGraph.svelte"; -export function graphs(target: HTMLDivElement, graphs: any[]): void { +export function graphs( + target: HTMLDivElement, + graphs: any[], { + search = "deck:current", + days = 31, + } = {}, +): void { const nightMode = checkNightMode(); setupI18n().then((i18n) => { @@ -26,6 +32,8 @@ export function graphs(target: HTMLDivElement, graphs: any[]): void { i18n, graphs, nightMode, + search, + days, }, }); }); From ebc1a86b2ee5ba26c961770bffb30d011b4643d3 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 22 Dec 2020 22:36:39 +0100 Subject: [PATCH 03/17] Make showing of rangeBox based on parameter --- ts/graphs/GraphsPage.svelte | 69 +++++++++++++++++++------------------ ts/graphs/bootstrap.ts | 2 ++ 2 files changed, 38 insertions(+), 33 deletions(-) diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte index 2312d825c..5419d4cc5 100644 --- a/ts/graphs/GraphsPage.svelte +++ b/ts/graphs/GraphsPage.svelte @@ -13,6 +13,7 @@ export let search: string; export let days: number; + export let withRangeBox: boolean; let sourceData: pb.BackendProto.GraphsOut | null = null; @@ -95,44 +96,46 @@ } -
-
◐
+{#if withRangeBox} +
+
◐
+ +
+ + -
- - - - { + type="text" + bind:value={displayedSearch} + on:keyup={searchKeyUp} + on:focus={() => { searchRange = SearchRange.Custom; - }} - placeholder={searchLabel} /> -
+ }} + placeholder={searchLabel} /> +
-
- - +
+ + +
-
-
+
+{/if}
{#if sourceData} diff --git a/ts/graphs/bootstrap.ts b/ts/graphs/bootstrap.ts index 2877fe8e2..86ecc42d6 100644 --- a/ts/graphs/bootstrap.ts +++ b/ts/graphs/bootstrap.ts @@ -21,6 +21,7 @@ export function graphs( graphs: any[], { search = "deck:current", days = 31, + withRangeBox = true, } = {}, ): void { const nightMode = checkNightMode(); @@ -34,6 +35,7 @@ export function graphs( nightMode, search, days, + withRangeBox, }, }); }); From ecaf0d95a312e840377e1454ef5fdb5f8584a4f3 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 22 Dec 2020 22:39:22 +0100 Subject: [PATCH 04/17] Move infile to css to scss file --- ts/graphs/GraphsPage.svelte | 6 ------ ts/graphs/graphs.scss | 4 ++++ 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte index 5419d4cc5..588995f1d 100644 --- a/ts/graphs/GraphsPage.svelte +++ b/ts/graphs/GraphsPage.svelte @@ -90,12 +90,6 @@ const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_HISTORY); - - {#if withRangeBox}
◐
diff --git a/ts/graphs/graphs.scss b/ts/graphs/graphs.scss index a1d8f9dc6..ca940f0f7 100644 --- a/ts/graphs/graphs.scss +++ b/ts/graphs/graphs.scss @@ -189,3 +189,7 @@ .align-start { text-align: start; } + +.no-focus-outline:focus { + outline: 0; +} From d51def9d6ef9e05f5d64d4254836add64158a896 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Wed, 23 Dec 2020 16:15:46 +0100 Subject: [PATCH 05/17] Making `days` settable does not make sense, as it will be overwritten --- ts/graphs/GraphsPage.svelte | 4 ++-- ts/graphs/bootstrap.ts | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte index 588995f1d..48fcf9947 100644 --- a/ts/graphs/GraphsPage.svelte +++ b/ts/graphs/GraphsPage.svelte @@ -12,10 +12,11 @@ export let graphs: any[]; export let search: string; - export let days: number; + export let revlogRange: RevlogRange; export let withRangeBox: boolean; let sourceData: pb.BackendProto.GraphsOut | null = null; + let days; enum SearchRange { Deck = 1, @@ -24,7 +25,6 @@ } let searchRange: SearchRange = SearchRange.Deck; - let revlogRange: RevlogRange = RevlogRange.Year; let refreshing = false; let displayedSearch = search; diff --git a/ts/graphs/bootstrap.ts b/ts/graphs/bootstrap.ts index 86ecc42d6..6d6271e60 100644 --- a/ts/graphs/bootstrap.ts +++ b/ts/graphs/bootstrap.ts @@ -4,6 +4,7 @@ import { setupI18n } from "anki/i18n"; import GraphsPage from "./GraphsPage.svelte"; import { checkNightMode } from "anki/nightmode"; +import { RevlogRange } from "./graph-helpers"; export { default as IntervalsGraph } from "./IntervalsGraph.svelte"; export { default as EaseGraph } from "./EaseGraph.svelte"; @@ -15,12 +16,13 @@ export { default as HourGraph } from "./HourGraph.svelte"; export { default as FutureDue } from "./FutureDue.svelte"; export { default as ReviewsGraph } from "./ReviewsGraph.svelte"; export { default as CalendarGraph } from "./CalendarGraph.svelte"; +export { RevlogRange } from "./graph-helpers"; export function graphs( target: HTMLDivElement, graphs: any[], { search = "deck:current", - days = 31, + revlogRange = RevlogRange.Year, withRangeBox = true, } = {}, ): void { @@ -34,7 +36,7 @@ export function graphs( graphs, nightMode, search, - days, + revlogRange, withRangeBox, }, }); From bd1505bdca9481cd4b9bd031bf62201005b9e533 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Wed, 23 Dec 2020 16:45:00 +0100 Subject: [PATCH 06/17] Turn async function into svelte statement --- ts/graphs/GraphsPage.svelte | 43 +++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte index 48fcf9947..5aea90a1b 100644 --- a/ts/graphs/GraphsPage.svelte +++ b/ts/graphs/GraphsPage.svelte @@ -15,7 +15,7 @@ export let revlogRange: RevlogRange; export let withRangeBox: boolean; - let sourceData: pb.BackendProto.GraphsOut | null = null; + let dataPromise; let days; enum SearchRange { @@ -24,27 +24,24 @@ Custom = 3, } - let searchRange: SearchRange = SearchRange.Deck; - let refreshing = false; - let displayedSearch = search; + let searchRange: SearchRange = SearchRange.Deck; - const refresh = async () => { - refreshing = true; - try { - sourceData = await getGraphData(search, days); - } catch (e) { - sourceData = null; - alert(i18n.tr(i18n.TR.STATISTICS_ERROR_FETCHING)); + let refreshing = true; + + $: { + if (refreshing) { + dataPromise = getGraphData(search, days); + console.log(dataPromise) + refreshing = false; } - refreshing = false; - }; + } $: { // refresh if either of these change search; days; - refresh(); + refreshing = true; } $: { @@ -78,7 +75,7 @@ search = displayedSearch; if (wasSame) { // force a refresh (user may have changed current deck, etc) - refresh(); + refreshing = true; } } }; @@ -92,8 +89,6 @@ {#if withRangeBox}
-
◐
-