anki/ts/graphs/AddedGraph.svelte
Damien Elmes 7d8f19e6e4 merge in Henrik's TS/Svelte refactor with some changes
- The previous commits moved the majority of the remaining global css
into components; move the remaining @emotion/css references into
ticks.scss and the styling of the Graph.svelte. This is not as elegant
as the emotion solution, but builds a whole lot faster, and most of
our styling can be scoped to a component anyway.
- Leave the .html files in ts/ for now. AnkiMobile uses them, and
AnkiDroid likely will in the future too. In the long run we'll likely
move to loading the JS into an existing page instead of loading a
separate page, but at that point we can just exclude the .html file from
copy_files_into_group() without affecting other clients.

Closes #1074
2021-03-21 23:01:18 +10:00

58 lines
1.8 KiB
Svelte

<script lang="typescript">
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 GraphRangeRadios from "./GraphRangeRadios.svelte";
import TableData from "./TableData.svelte";
import { RevlogRange, GraphRange } from "./graph-helpers";
import type { TableDatum, SearchEventMap } from "./graph-helpers";
import type { HistogramData } from "./histogram-graph";
import { gatherData, buildHistogram } from "./added";
import type { GraphData } from "./added";
import type { PreferenceStore } from "./preferences";
export let sourceData: pb.BackendProto.GraphsOut | null = null;
export let i18n: I18n;
export let preferences: PreferenceStore;
let histogramData = null as HistogramData | null;
let tableData: TableDatum[] = [];
let graphRange: GraphRange = GraphRange.Month;
let { browserLinksSupported } = preferences;
const dispatch = createEventDispatcher<SearchEventMap>();
let addedData: GraphData | null = null;
$: if (sourceData) {
addedData = gatherData(sourceData);
}
$: if (addedData) {
[histogramData, tableData] = buildHistogram(
addedData,
graphRange,
i18n,
dispatch,
$browserLinksSupported
);
}
const title = i18n.tr(i18n.TR.STATISTICS_ADDED_TITLE);
const subtitle = i18n.tr(i18n.TR.STATISTICS_ADDED_SUBTITLE);
</script>
<Graph {title} {subtitle}>
<InputBox>
<GraphRangeRadios bind:graphRange {i18n} revlogRange={RevlogRange.All} />
</InputBox>
<HistogramGraph data={histogramData} {i18n} />
<TableData {i18n} {tableData} />
</Graph>