@@ -122,10 +121,6 @@
.rating-input {
cursor: pointer;
- input {
- display: none;
- }
-
.ctrl {
position: absolute;
z-index: 2;
diff --git a/src/ui/components/charts/Bar.svelte b/src/ui/components/charts/Bar.svelte
new file mode 100644
index 0000000..0991be5
--- /dev/null
+++ b/src/ui/components/charts/Bar.svelte
@@ -0,0 +1,125 @@
+
+
+
diff --git a/src/ui/components/charts/BookAndPages.svelte b/src/ui/components/charts/BookAndPages.svelte
new file mode 100644
index 0000000..08fc967
--- /dev/null
+++ b/src/ui/components/charts/BookAndPages.svelte
@@ -0,0 +1,92 @@
+
+
+
diff --git a/src/ui/components/charts/Pie.svelte b/src/ui/components/charts/Pie.svelte
new file mode 100644
index 0000000..55929d8
--- /dev/null
+++ b/src/ui/components/charts/Pie.svelte
@@ -0,0 +1,121 @@
+
+
+
diff --git a/src/ui/components/stats/AverageStat.svelte b/src/ui/components/stats/AverageStat.svelte
new file mode 100644
index 0000000..1d805f2
--- /dev/null
+++ b/src/ui/components/stats/AverageStat.svelte
@@ -0,0 +1,23 @@
+
+
+
diff --git a/src/ui/components/stats/BookCountStat.svelte b/src/ui/components/stats/BookCountStat.svelte
new file mode 100644
index 0000000..dd65561
--- /dev/null
+++ b/src/ui/components/stats/BookCountStat.svelte
@@ -0,0 +1,15 @@
+
+
+
diff --git a/src/ui/components/stats/CountStat.svelte b/src/ui/components/stats/CountStat.svelte
new file mode 100644
index 0000000..fc0b9ba
--- /dev/null
+++ b/src/ui/components/stats/CountStat.svelte
@@ -0,0 +1,16 @@
+
+
+
diff --git a/src/ui/components/stats/Stat.svelte b/src/ui/components/stats/Stat.svelte
new file mode 100644
index 0000000..23ce7d8
--- /dev/null
+++ b/src/ui/components/stats/Stat.svelte
@@ -0,0 +1,32 @@
+
+
+
+ {label}
+ {numberFormatter.format(value)}
+
+
+
diff --git a/src/ui/components/stats/TotalStat.svelte b/src/ui/components/stats/TotalStat.svelte
new file mode 100644
index 0000000..06f1476
--- /dev/null
+++ b/src/ui/components/stats/TotalStat.svelte
@@ -0,0 +1,18 @@
+
+
+
diff --git a/src/ui/directives/chart.ts b/src/ui/directives/chart.ts
new file mode 100644
index 0000000..d84ddba
--- /dev/null
+++ b/src/ui/directives/chart.ts
@@ -0,0 +1,73 @@
+import {
+ ArcElement,
+ BarController,
+ BarElement,
+ CategoryScale,
+ Chart,
+ Colors,
+ Legend,
+ LinearScale,
+ LineController,
+ LineElement,
+ PieController,
+ PointElement,
+ Tooltip,
+ type ChartConfiguration,
+ type ChartConfigurationCustomTypesPerDataset,
+ type ChartType,
+ type DefaultDataPoint,
+} from "chart.js";
+import { debounce } from "obsidian";
+
+Chart.register(
+ Colors,
+ BarController,
+ BarElement,
+ CategoryScale,
+ LinearScale,
+ Legend,
+ Tooltip,
+ PieController,
+ ArcElement,
+ LineController,
+ LineElement,
+ PointElement
+);
+
+export function chart<
+ Type extends ChartType = ChartType,
+ Data = DefaultDataPoint
,
+ Label = unknown
+>(
+ canvas: HTMLCanvasElement,
+ config:
+ | ChartConfiguration
+ | ChartConfigurationCustomTypesPerDataset
+) {
+ const chart = new Chart(canvas, config);
+
+ const resizeObserver = new ResizeObserver(
+ debounce(() => {
+ requestAnimationFrame(() => {
+ chart.resize();
+ });
+ }, 500)
+ );
+
+ resizeObserver.observe(canvas);
+
+ return {
+ update: (
+ config:
+ | ChartConfiguration
+ | ChartConfigurationCustomTypesPerDataset
+ ) => {
+ chart.data = config.data;
+ chart.update();
+ },
+ destroy: () => {
+ resizeObserver.disconnect();
+ chart.destroy();
+ },
+ };
+}
diff --git a/src/ui/settings/BookTrackerSettingTabView.svelte b/src/ui/settings/BookTrackerSettingTabView.svelte
index c7ec3ea..1b3718b 100644
--- a/src/ui/settings/BookTrackerSettingTabView.svelte
+++ b/src/ui/settings/BookTrackerSettingTabView.svelte
@@ -6,7 +6,7 @@
import FieldSuggestItem from "@ui/components/setting/FieldSuggestItem.svelte";
import ToggleItem from "@ui/components/setting/ToggleItem.svelte";
import type BookTrackerPlugin from "@src/main";
- import { createSettingsStore } from "./store";
+ import { createSettings } from "@ui/stores/settings.svelte";
import { onMount } from "svelte";
type Props = {
@@ -16,92 +16,90 @@
const { plugin }: Props = $props();
const { app } = plugin;
- const settings = createSettingsStore(plugin);
+ const settingsStore = createSettings(plugin);
- onMount(async () => {
- await settings.load();
- });
+ onMount(async () => settingsStore.load());
-
+
-
+
-
+
-
+
diff --git a/src/ui/settings/store.ts b/src/ui/settings/store.ts
deleted file mode 100644
index d551913..0000000
--- a/src/ui/settings/store.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type BookTrackerPlugin from "@src/main";
-import { writable, type Writable } from "svelte/store";
-import { type BookTrackerSettings, DEFAULT_SETTINGS } from "./types";
-
-type SettingsStore = Writable & {
- load: () => Promise;
-};
-
-export function createSettingsStore(plugin: BookTrackerPlugin): SettingsStore {
- const { subscribe, set, update } =
- writable(DEFAULT_SETTINGS);
-
- async function load() {
- const settings = await plugin.loadData();
-
- update((currentSettings) => {
- return {
- ...currentSettings,
- ...settings,
- };
- });
- }
-
- subscribe((settings) => {
- if (settings === DEFAULT_SETTINGS) {
- return;
- }
-
- plugin.settings = settings;
- plugin.saveSettings();
- });
-
- return {
- subscribe,
- set,
- update,
- load,
- };
-}
diff --git a/src/ui/stores/metadata.svelte.ts b/src/ui/stores/metadata.svelte.ts
new file mode 100644
index 0000000..7dd9ea7
--- /dev/null
+++ b/src/ui/stores/metadata.svelte.ts
@@ -0,0 +1,190 @@
+import { READ_STATE } from "@src/const";
+import type { CachedMetadata, TFile } from "obsidian";
+import { getContext, setContext } from "svelte";
+import { getSettingsContext } from "./settings.svelte";
+import type BookTrackerPlugin from "@src/main";
+
+export type FileMetadata = {
+ file: TFile;
+ frontmatter: Record;
+};
+
+export type FileProperty = {
+ file: TFile;
+ value: any;
+};
+
+export const ALL_TIME = "ALL_TIME";
+
+interface MetadataStore {
+ get metadata(): FileMetadata[];
+ filterYear: number | typeof ALL_TIME;
+ filterMonth: number | typeof ALL_TIME;
+ get filterYears(): number[];
+ get filterMonths(): { label: string; value: number }[];
+
+ destroy(): void;
+}
+export function createMetadata(plugin: BookTrackerPlugin): MetadataStore {
+ const settings = getSettingsContext().settings;
+
+ const initialMetadata: FileMetadata[] = [];
+
+ for (const file of plugin.app.vault.getMarkdownFiles()) {
+ const frontmatter =
+ plugin.app.metadataCache.getFileCache(file)?.frontmatter ?? {};
+
+ if (frontmatter[settings.statusProperty] !== READ_STATE) {
+ continue;
+ }
+
+ initialMetadata.push({ file, frontmatter });
+ }
+
+ const thisYear = new Date().getFullYear();
+
+ let metadata = $state(initialMetadata);
+ let filterYear: number | typeof ALL_TIME = $state(thisYear);
+ let filterMonth: number | typeof ALL_TIME = $state(ALL_TIME);
+ const filteredMetadata = $derived.by(() => {
+ console.log("here");
+ return metadata.filter((f) => {
+ // @ts-expect-error Moment is provided by Obsidian
+ const endDate = moment(f.frontmatter[settings.endDateProperty]);
+ if (filterYear !== ALL_TIME) {
+ if (endDate.year() !== filterYear) {
+ return false;
+ }
+ }
+
+ if (filterMonth !== ALL_TIME) {
+ if (endDate.month() !== filterMonth - 1) {
+ return false;
+ }
+ }
+ return true;
+ });
+ });
+
+ const filterYears = $derived.by(() => {
+ const years = new Set();
+ for (const f of metadata) {
+ // @ts-expect-error Moment is provided by Obsidian
+ const endDate = moment(f.frontmatter[settings.endDateProperty]);
+ years.add(endDate.year());
+ }
+ return Array.from(years).sort((a, b) => a - b);
+ });
+
+ const filterMonths = $derived.by(() => {
+ if (filterYear === ALL_TIME) {
+ return [];
+ }
+
+ const months = [];
+ for (const f of metadata) {
+ // @ts-expect-error Moment is provided by Obsidian
+ const endDate = moment(f.frontmatter[settings.endDateProperty]);
+
+ if (endDate.year() !== filterYear) {
+ continue;
+ }
+
+ months.push({
+ label: endDate.format("MMMM"),
+ value: endDate.month() + 1,
+ });
+ }
+
+ return months
+ .filter(
+ (month, idx, self) =>
+ idx === self.findIndex((m) => m.value === month.value)
+ )
+ .sort((a, b) => a.value - b.value);
+ });
+
+ function onChanged(file: TFile, _data: string, cache: CachedMetadata) {
+ metadata = metadata.map((f) => {
+ if (f.file.path === file.path) {
+ return {
+ ...f,
+ frontmatter: cache.frontmatter ?? {},
+ };
+ }
+ return f;
+ });
+ }
+
+ plugin.registerEvent(plugin.app.metadataCache.on("changed", onChanged));
+
+ function onDeleted(file: TFile) {
+ metadata = metadata.filter((f) => f.file.path !== file.path);
+ }
+ plugin.registerEvent(plugin.app.metadataCache.on("deleted", onDeleted));
+
+ return {
+ get metadata() {
+ return filteredMetadata;
+ },
+ get filterYear() {
+ return filterYear;
+ },
+ set filterYear(value) {
+ filterYear = value;
+ },
+ get filterMonth() {
+ return filterMonth;
+ },
+ set filterMonth(value) {
+ filterMonth = value;
+ },
+ get filterYears() {
+ return filterYears;
+ },
+ get filterMonths() {
+ return filterMonths;
+ },
+ destroy() {
+ plugin.app.metadataCache.off("changed", onChanged);
+ plugin.app.metadataCache.off("deleted", onDeleted);
+ },
+ };
+}
+
+const METADATA_KEY = Symbol("metadata");
+
+export function setMetadataContext(state: MetadataStore) {
+ setContext(METADATA_KEY, state);
+}
+
+export function getMetadataContext(): MetadataStore {
+ return getContext(METADATA_KEY) as MetadataStore;
+}
+
+function notEmpty(value: any): boolean {
+ return value !== undefined && value !== null && value !== "" && value !== 0;
+}
+
+interface PropertyStore {
+ get propertyData(): FileProperty[];
+}
+
+export function createPropertyStore(
+ property: string,
+ filter: (value: any) => boolean = notEmpty
+): PropertyStore {
+ const store = getMetadataContext();
+
+ const propertyData = $derived(
+ store.metadata
+ .map((f) => ({ ...f, value: f.frontmatter[property] }))
+ .filter((f) => (filter ? filter(f.value) : true))
+ );
+
+ return {
+ get propertyData() {
+ return propertyData;
+ },
+ };
+}
diff --git a/src/ui/stores/settings.svelte.ts b/src/ui/stores/settings.svelte.ts
new file mode 100644
index 0000000..102adfd
--- /dev/null
+++ b/src/ui/stores/settings.svelte.ts
@@ -0,0 +1,45 @@
+import type BookTrackerPlugin from "@src/main";
+import { type BookTrackerSettings, DEFAULT_SETTINGS } from "../settings/types";
+import { getContext, setContext } from "svelte";
+
+interface SettingsStore {
+ settings: BookTrackerSettings;
+ load(): Promise;
+}
+
+export function createSettings(plugin: BookTrackerPlugin) {
+ let settings = $state(plugin.settings);
+
+ $effect(() => {
+ if (settings === DEFAULT_SETTINGS) {
+ return;
+ }
+
+ plugin.settings = settings;
+ plugin.saveSettings();
+ });
+
+ return {
+ get settings() {
+ return settings;
+ },
+ async load() {
+ const newSettings = await plugin.loadData();
+
+ settings = {
+ ...settings,
+ ...newSettings,
+ };
+ },
+ };
+}
+
+const SETTINGS_KEY = Symbol("settings");
+
+export function setSettingsContext(state: SettingsStore) {
+ setContext(SETTINGS_KEY, state);
+}
+
+export function getSettingsContext(): SettingsStore {
+ return getContext(SETTINGS_KEY) as SettingsStore;
+}
diff --git a/src/utils/ReadingLog.ts b/src/utils/ReadingLog.ts
index e1dbcaf..ec806d4 100644
--- a/src/utils/ReadingLog.ts
+++ b/src/utils/ReadingLog.ts
@@ -1,19 +1,12 @@
import type { Storage } from "./Storage";
+import type { Moment } from "moment";
export interface ReadingLogEntry {
book: string;
pagesRead: number;
pagesReadTotal: number;
pagesRemaining: number;
- createdAt: Date;
-}
-
-function isSameDay(a: Date, b: Date): boolean {
- return (
- a.getFullYear() === b.getFullYear() &&
- a.getMonth() === b.getMonth() &&
- a.getDate() === b.getDate()
- );
+ createdAt: Moment;
}
export class ReadingLog {
@@ -32,20 +25,28 @@ export class ReadingLog {
if (entries) {
this.entries = entries.map((entry) => ({
...entry,
- createdAt: new Date(entry.createdAt),
+ // @ts-expect-error Moment is provided by Obsidian
+ createdAt: moment(entry.createdAt),
}));
}
}
private sortEntries() {
- this.entries = this.entries.sort(
- (a, b) => a.createdAt.getTime() - b.createdAt.getTime()
+ this.entries = this.entries.sort((a, b) =>
+ a.createdAt.diff(b.createdAt)
);
}
async save(filename = "reading-log.json") {
this.sortEntries();
- await this.storage.writeJSON(filename, this.entries);
+ await this.storage.writeJSON(
+ filename,
+ this.entries.map((entry) => ({
+ ...entry,
+ // @ts-expect-error Moment is provided by Obsidian
+ createdAt: moment(entry.createdAt).toISOString(true),
+ }))
+ );
}
public getEntries(): ReadingLogEntry[] {
@@ -82,10 +83,14 @@ export class ReadingLog {
: pageEnded,
pagesReadTotal: pageEnded,
pagesRemaining: pageCount - pageEnded,
- createdAt: new Date(),
+ // @ts-expect-error Moment is provided by Obsidian
+ createdAt: moment(),
};
- if (lastEntry && isSameDay(lastEntry.createdAt, newEntry.createdAt)) {
+ if (
+ lastEntry &&
+ lastEntry.createdAt.isSame(newEntry.createdAt, "day")
+ ) {
newEntry.pagesRead += lastEntry.pagesRead;
await this.updateEntry(this.entries.indexOf(lastEntry), newEntry);
} else {
diff --git a/src/utils/color.ts b/src/utils/color.ts
new file mode 100644
index 0000000..a76737c
--- /dev/null
+++ b/src/utils/color.ts
@@ -0,0 +1,74 @@
+import chroma from "chroma-js";
+
+const style = getComputedStyle(document.body);
+
+export const COLOR_NAMES = [
+ "red",
+ "orange",
+ "yellow",
+ "green",
+ "cyan",
+ "blue",
+ "purple",
+ "pink",
+] as const;
+
+export type ColorName = (typeof COLOR_NAMES)[number];
+export type RGB = [number, number, number];
+
+export class Color {
+ constructor(
+ private readonly r: number,
+ private readonly g: number,
+ private readonly b: number,
+ private readonly a: number = 1
+ ) {}
+
+ get hex(): string {
+ const rHex = this.r.toString(16).padStart(2, "0");
+ const gHex = this.g.toString(16).padStart(2, "0");
+ const bHex = this.b.toString(16).padStart(2, "0");
+
+ return `#${rHex}${gHex}${bHex}`;
+ }
+
+ get rgb(): string {
+ return `rgb(${this.r}, ${this.g}, ${this.b})`;
+ }
+
+ get rgba(): string {
+ return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`;
+ }
+
+ alpha(alpha: number): Color {
+ return new Color(this.r, this.g, this.b, alpha);
+ }
+
+ static fromName(color: ColorName): Color {
+ const rawRgb = style
+ .getPropertyValue(`--color-${color}-rgb`)
+ .split(", ");
+
+ return new Color(
+ parseInt(rawRgb[0], 10),
+ parseInt(rawRgb[1], 10),
+ parseInt(rawRgb[2], 10)
+ );
+ }
+
+ static getAll(): Color[] {
+ return COLOR_NAMES.map((color) => Color.fromName(color));
+ }
+
+ static scale(n: number): Color[] {
+ const colors = COLOR_NAMES.map((color) =>
+ style.getPropertyValue(`--color-${color}`)
+ );
+
+ return chroma
+ .scale(colors)
+ .mode("lch")
+ .colors(n, "rgb")
+ .map(([r, g, b]) => new Color(r, g, b));
+ }
+}
diff --git a/src/utils/frequencyArray.ts b/src/utils/frequencyArray.ts
new file mode 100644
index 0000000..6e878b0
--- /dev/null
+++ b/src/utils/frequencyArray.ts
@@ -0,0 +1,15 @@
+export type FrequencyArray = { value: T; count: number }[];
+
+export function frequencyArray(arr: T[]): FrequencyArray {
+ const map = new Map();
+
+ for (const item of arr) {
+ const count = map.get(item) ?? 0;
+ map.set(item, count + 1);
+ }
+
+ return Array.from(map.entries()).map(([value, count]) => ({
+ value,
+ count,
+ }));
+}
diff --git a/src/utils/fs.ts b/src/utils/fs.ts
new file mode 100644
index 0000000..d5b0db5
--- /dev/null
+++ b/src/utils/fs.ts
@@ -0,0 +1,54 @@
+import { normalizePath, type Vault } from "obsidian";
+
+/**
+ * A simple analog of Node.js's `path.join(...)`.
+ * See: https://gist.github.com/creationix/7435851#gistcomment-3698888
+ */
+export default function joinPath(...segments: string[]): string {
+ const parts = segments.reduce((parts, segment) => {
+ // Remove leading slashes from non-first part.
+ if (parts.length > 0) {
+ segment = segment.replace(/^\//, "");
+ }
+ // Remove trailing slashes.
+ segment = segment.replace(/\/$/, "");
+ return parts.concat(segment.split("/"));
+ }, [] as string[]);
+ const resultParts: string[] = [];
+ for (const part of parts) {
+ if (part === ".") {
+ continue;
+ }
+ if (part === "..") {
+ resultParts.pop();
+ continue;
+ }
+ resultParts.push(part);
+ }
+ return resultParts.join("/");
+}
+
+export function dirname(path: string): string {
+ return joinPath(path, "..");
+}
+
+export async function mkdirRecursive(
+ vault: Vault,
+ path: string
+): Promise {
+ const stack: string[] = [];
+ let currentPath = normalizePath(path);
+
+ if (await vault.adapter.exists(currentPath)) {
+ return;
+ }
+
+ while (!(await vault.adapter.exists(currentPath))) {
+ stack.push(currentPath);
+ currentPath = dirname(currentPath);
+ }
+
+ while (stack.length > 0) {
+ await vault.adapter.mkdir(stack.pop()!);
+ }
+}
diff --git a/src/utils/groupBy.ts b/src/utils/groupBy.ts
new file mode 100644
index 0000000..949bcac
--- /dev/null
+++ b/src/utils/groupBy.ts
@@ -0,0 +1,8 @@
+export function groupBy(array: T[], f: (item: T) => string) {
+ return array.reduce((groups, item) => {
+ const group = f(item);
+ groups[group] = groups[group] || [];
+ groups[group].push(item);
+ return groups;
+ }, {} as Record);
+}