Add a working example of searching from the stats screen in the Card Counts
This commit is contained in:
parent
c8f0ee8b3b
commit
3ab92b3427
@ -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};">■ </span>{d.label}
|
||||
<span style="color: {d.colour};">■ </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>
|
||||
|
@ -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}
|
||||
|
@ -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)
|
||||
: [];
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user