Add a working example of searching from the stats screen in the Card Counts

This commit is contained in:
Henrik Giesel 2021-01-06 13:40:05 +01:00
parent c8f0ee8b3b
commit 3ab92b3427
3 changed files with 59 additions and 12 deletions

View File

@ -1,4 +1,5 @@
<script lang="typescript">
import { createEventDispatcher } from "svelte";
import { defaultGraphBounds } from "./graph-helpers";
import { gatherData, renderCards } from "./card-counts";
import type { GraphData, TableDatum } from "./card-counts";
@ -11,6 +12,8 @@
export let preferences: PreferenceStore;
let { cardCountsSeparateInactive } = preferences;
const dispatch = createEventDispatcher();
let svg = null as HTMLElement | SVGElement | null;
let bounds = defaultGraphBounds();
@ -52,6 +55,12 @@
.right {
text-align: right;
}
.search-link:hover {
cursor: pointer;
color: var(--link);
text-decoration: underline;
}
</style>
<div class="graph" id="graph-card-counts">
@ -79,7 +88,8 @@
<tr>
<!-- prettier-ignore -->
<td>
<span style="color: {d.colour};">&nbsp;</span>{d.label}
<span style="color: {d.colour};">&nbsp;</span>
<span class="search-link" on:click={() => dispatch('search', { query: d.query })}>{d.label}</span>
</td>
<td class="right">{d.count}</td>
<td class="right">{d.percent}</td>

View File

@ -25,7 +25,7 @@
const preferencesPromise = getPreferences();
const refreshWith = async (searchNew: string, days: number) => {
search = searchNew
search = searchNew;
active = true;
try {
@ -48,9 +48,9 @@
refreshWith(search, days);
const browserSearch = (event: CustomEvent) => {
const query = `${search} ${event.detail.query}`
bridgeCommand(`browserSearch:${query}`)
}
const query = `${search} ${event.detail.query}`;
bridgeCommand(`browserSearch:${query}`);
};
</script>
{#if controller}

View File

@ -23,7 +23,7 @@ import type { GraphBounds } from "./graph-helpers";
import { cumsum } from "d3-array";
import type { I18n } from "anki/i18n";
type Count = [string, number, boolean];
type Count = [string, number, boolean, string];
export interface GraphData {
title: string;
counts: Count[];
@ -86,18 +86,51 @@ function countCards(
}
}
const extraQuery = separateInactive ? " -(is:buried or is:suspended)" : "";
const counts: Count[] = [
[i18n.tr(i18n.TR.STATISTICS_COUNTS_NEW_CARDS), newCards, true],
[i18n.tr(i18n.TR.STATISTICS_COUNTS_LEARNING_CARDS), learn, true],
[i18n.tr(i18n.TR.STATISTICS_COUNTS_RELEARNING_CARDS), relearn, true],
[i18n.tr(i18n.TR.STATISTICS_COUNTS_YOUNG_CARDS), young, true],
[i18n.tr(i18n.TR.STATISTICS_COUNTS_MATURE_CARDS), mature, true],
[
i18n.tr(i18n.TR.STATISTICS_COUNTS_NEW_CARDS),
newCards,
true,
`is:new${extraQuery}`,
],
[
i18n.tr(i18n.TR.STATISTICS_COUNTS_LEARNING_CARDS),
learn,
true,
`(-is:review is:learn)${extraQuery}`,
],
[
i18n.tr(i18n.TR.STATISTICS_COUNTS_RELEARNING_CARDS),
relearn,
true,
`(is:review is:learn)${extraQuery}`,
],
[
i18n.tr(i18n.TR.STATISTICS_COUNTS_YOUNG_CARDS),
young,
true,
`(is:review -is:learn) prop:ivl<21${extraQuery}`,
],
[
i18n.tr(i18n.TR.STATISTICS_COUNTS_MATURE_CARDS),
mature,
true,
`(is:review -is:learn) prop:ivl>=21${extraQuery}`,
],
[
i18n.tr(i18n.TR.STATISTICS_COUNTS_SUSPENDED_CARDS),
suspended,
separateInactive,
"is:suspended",
],
[
i18n.tr(i18n.TR.STATISTICS_COUNTS_BURIED_CARDS),
buried,
separateInactive,
"is:buried",
],
[i18n.tr(i18n.TR.STATISTICS_COUNTS_BURIED_CARDS), buried, separateInactive],
];
return counts;
@ -132,6 +165,7 @@ export interface SummedDatum {
count: number;
// show up in the table
show: boolean;
query: string;
// running total
total: number;
}
@ -139,6 +173,7 @@ export interface SummedDatum {
export interface TableDatum {
label: string;
count: number;
query: string;
percent: string;
colour: string;
}
@ -155,6 +190,7 @@ export function renderCards(
label: count[0],
count: count[1],
show: count[2],
query: count[3],
idx,
total: n,
} as SummedDatum;
@ -205,6 +241,7 @@ export function renderCards(
count: d.count,
percent: `${percent}%`,
colour: barColours[idx],
query: d.query,
} as TableDatum)
: [];
});