c039845c16
This allows for tree shaking, and reduces the congrats page from 150k with the old enum solution to about 80k.
77 lines
2.3 KiB
Svelte
77 lines
2.3 KiB
Svelte
<script lang="typescript">
|
|
import { timeSpan, MONTH } from "anki/time";
|
|
|
|
import type pb from "anki/backend_proto";
|
|
import { createEventDispatcher } from "svelte";
|
|
|
|
import Graph from "./Graph.svelte";
|
|
import InputBox from "./InputBox.svelte";
|
|
import HistogramGraph from "./HistogramGraph.svelte";
|
|
import TableData from "./TableData.svelte";
|
|
|
|
import type { HistogramData } from "./histogram-graph";
|
|
import {
|
|
gatherIntervalData,
|
|
IntervalRange,
|
|
prepareIntervalData,
|
|
} from "./intervals";
|
|
import type { IntervalGraphData } from "./intervals";
|
|
import type { TableDatum, SearchEventMap } from "./graph-helpers";
|
|
import type { PreferenceStore } from "./preferences";
|
|
|
|
export let sourceData: pb.BackendProto.GraphsOut | null = null;
|
|
import * as tr from "anki/i18n";
|
|
export let preferences: PreferenceStore;
|
|
|
|
const dispatch = createEventDispatcher<SearchEventMap>();
|
|
|
|
let intervalData: IntervalGraphData | null = null;
|
|
let histogramData = null as HistogramData | null;
|
|
let tableData: TableDatum[] = [];
|
|
let range = IntervalRange.Percentile95;
|
|
let { browserLinksSupported } = preferences;
|
|
|
|
$: if (sourceData) {
|
|
intervalData = gatherIntervalData(sourceData);
|
|
}
|
|
|
|
$: if (intervalData) {
|
|
[histogramData, tableData] = prepareIntervalData(
|
|
intervalData,
|
|
range,
|
|
dispatch,
|
|
$browserLinksSupported
|
|
);
|
|
}
|
|
|
|
const title = tr.statisticsIntervalsTitle();
|
|
const subtitle = tr.statisticsIntervalsSubtitle();
|
|
const month = timeSpan(1 * MONTH);
|
|
const all = tr.statisticsRangeAllTime();
|
|
</script>
|
|
|
|
<Graph {title} {subtitle}>
|
|
<InputBox>
|
|
<label>
|
|
<input type="radio" bind:group={range} value={IntervalRange.Month} />
|
|
{month}
|
|
</label>
|
|
<label>
|
|
<input type="radio" bind:group={range} value={IntervalRange.Percentile50} />
|
|
50%
|
|
</label>
|
|
<label>
|
|
<input type="radio" bind:group={range} value={IntervalRange.Percentile95} />
|
|
95%
|
|
</label>
|
|
<label>
|
|
<input type="radio" bind:group={range} value={IntervalRange.All} />
|
|
{all}
|
|
</label>
|
|
</InputBox>
|
|
|
|
<HistogramGraph data={histogramData} />
|
|
|
|
<TableData {tableData} />
|
|
</Graph>
|