anki/ts/graphs/IntervalsGraph.svelte

78 lines
2.4 KiB
Svelte
Raw Normal View History

<script lang="typescript">
import { timeSpan, MONTH } from "anki/time";
import type { I18n } from "anki/i18n";
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";
2020-06-23 11:07:47 +02:00
import {
gatherIntervalData,
IntervalRange,
prepareIntervalData,
} from "./intervals";
import type { IntervalGraphData } from "./intervals";
import type { TableDatum, SearchEventMap } from "./graph-helpers";
2021-01-25 17:36:04 +01:00
import type { PreferenceStore } from "./preferences";
export let sourceData: pb.BackendProto.GraphsOut | null = null;
2020-06-27 14:10:56 +02:00
export let i18n: I18n;
2021-01-25 17:36:04 +01:00
export let preferences: PreferenceStore;
const dispatch = createEventDispatcher<SearchEventMap>();
2020-06-26 11:25:02 +02:00
let intervalData: IntervalGraphData | null = null;
2020-06-23 11:07:47 +02:00
let histogramData = null as HistogramData | null;
2020-08-04 07:28:41 +02:00
let tableData: TableDatum[] = [];
2020-06-26 11:25:02 +02:00
let range = IntervalRange.Percentile95;
2021-01-25 17:36:04 +01:00
let { browserLinksSupported } = preferences;
2020-06-27 14:10:56 +02:00
$: if (sourceData) {
intervalData = gatherIntervalData(sourceData);
}
2020-06-23 05:43:23 +02:00
$: if (intervalData) {
2021-01-25 17:36:04 +01:00
[histogramData, tableData] = prepareIntervalData(
intervalData,
range,
i18n,
dispatch,
$browserLinksSupported
);
}
2020-06-27 14:10:56 +02:00
const title = i18n.statisticsIntervalsTitle();
const subtitle = i18n.statisticsIntervalsSubtitle();
2020-06-27 14:10:56 +02:00
const month = timeSpan(i18n, 1 * MONTH);
const all = i18n.statisticsRangeAllTime();
</script>
<Graph {title} {subtitle}>
<InputBox>
2020-07-06 06:01:49 +02:00
<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>
2021-01-25 17:36:04 +01:00
<HistogramGraph data={histogramData} {i18n} />
2020-08-04 07:28:41 +02:00
<TableData {i18n} {tableData} />
</Graph>