Added an option to count all words in a folder

Author: YukiGasai

package.json

@@ -41,6 +41,7 @@
     "typescript": "^4.0.3"
   },
   "dependencies": {
+    "chart.js": "^4.3.0",
     "svelte": "^3.38.3",
     "svelte-icons": "^2.1.0"
   }

src/main.ts

@@ -9,6 +9,7 @@ import {
   DEFAULT_SETTINGS,
 } from "src/settings/Settings";
 import { settingsStore } from "./utils/SvelteStores";
+import { handleFileMenu } from "./utils/FileMenu";
 
 export default class BetterWordCount extends Plugin {
   public settings: BetterWordCountSettings;
@@ -68,6 +69,13 @@ export default class BetterWordCount extends Plugin {
         await this.statsManager.recalcTotals();
       })
     );
+
+    // Register a new action for right clicking on folders
+    this.registerEvent(
+      this.app.workspace.on("file-menu", (menu, file, source) => {
+        handleFileMenu(menu, file, source, this);
+      })
+    );
   }
 
   giveEditorPlugin(leaf: WorkspaceLeaf): void {

src/utils/FileMenu.ts

@@ -0,0 +1,24 @@
+import { Menu, TAbstractFile, TFile } from "obsidian";
+import type BetterWordCount from "src/main";
+import { FolderStatisticsModal } from "src/view/FolderStatisticsModal";
+
+export function handleFileMenu(menu: Menu, file: TAbstractFile, source: string, plugin: BetterWordCount): void {
+    if (source !== "file-explorer-context-menu") {
+        return;
+    }
+    if (!file) {
+        return;
+    }
+    // Make sure the menu only shows up for folders
+    if (file instanceof TFile) {
+        return;
+    }
+    menu.addItem((item) => {
+        item.setTitle(`Count Words`)
+            .setIcon("info")
+            .setSection("action")
+            .onClick(async (_) => {
+                new FolderStatisticsModal(plugin, file).open();
+            });
+    });
+}

src/utils/FileUtils.ts

@@ -0,0 +1,23 @@
+import type { TFile } from "obsidian";
+import type BetterWordCount from "src/main";
+
+// get all Markdown files in a folder and all subfolders
+export function getAllFilesInFolder(
+    plugin: BetterWordCount,
+    path: string
+): TFile[] {
+    // get all files and filter them by the start of the path
+    return plugin.app.vault
+        .getMarkdownFiles()
+        .filter((tFolder) => tFolder.path.startsWith(path));
+}
+
+// Function to convert a list of Files to a list of file contents
+export async function getAllFileContentInFolder(files: TFile[]): Promise<string[]> {
+    // Create a promise to read the file content for each file
+    const readPromise = files.map((file) => {
+        return file.vault.cachedRead(file);
+    });
+    // resolve all promises and return the array
+    return (await Promise.all(readPromise));
+}

src/view/FolderStatistics.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import type { TAbstractFile } from "obsidian";
+    import type BetterWordCount from "src/main";
+    import {
+        getAllFileContentInFolder,
+        getAllFilesInFolder,
+    } from "src/utils/FileUtils";
+    import { ArcElement, Chart, PieController, Tooltip } from "chart.js";
+    import { getWordCount } from "src/utils/StatUtils";
+    // Enable minimal chart js
+    Chart.register(ArcElement, PieController);
+    Chart.register(Tooltip);
+
+    export let file: TAbstractFile;
+    export let plugin: BetterWordCount;
+
+    let chartContainer: HTMLCanvasElement;
+
+    // Function to map the word count of each file to a chart js data object
+    const getFolderWordStats = async () => {
+        // Get all files in the folder
+        const allFiles = getAllFilesInFolder(plugin, file.path);
+
+        // Get the content of all files in the folder
+        const content = await getAllFileContentInFolder(allFiles);
+
+        // Get the word count of all files in the folder
+        const wordCounts = content.map((c) => getWordCount(c));
+
+        return {
+            labels: allFiles.map((file) => file.name),
+            datasets: [
+                {
+                    label: "Word Count",
+                    data: wordCounts,
+                    backgroundColor: "rgba(255, 99, 132, 0.2)",
+                    borderColor: "rgba(255, 99, 132, 1)",
+                    borderWidth: 1,
+                },
+            ],
+        };
+    };
+
+    // Function to get all the data and render the chart
+    async function renderChart(): Promise<number> {
+        const options = {
+            title: {
+                display: true,
+                text: "All Files and there Word Count",
+                position: "top",
+            },
+            rotation: -0.7 * Math.PI,
+            legend: {
+                display: false,
+            },
+        };
+        const data = await getFolderWordStats();
+
+        new Chart(chartContainer, {
+            type: "pie",
+            data: data,
+            options: options,
+        });
+
+        return data.datasets[0].data.reduce(
+            (acc, current) => (acc += current),
+            0
+        );
+    }
+</script>
+
+<div>
+    <h1>{file.name}</h1>
+
+    {#await renderChart()}
+        <p>Counting</p>
+    {:then data}
+        <p>Total: {data} words</p>
+    {:catch error}
+        <p style="color: red">{error.message}</p>
+    {/await}
+
+    <canvas class="pieChart" bind:this={chartContainer} />
+</div>

src/view/FolderStatisticsModal.ts

@@ -0,0 +1,32 @@
+import { Modal, TAbstractFile } from "obsidian";
+import type BetterWordCount from "src/main";
+//@ts-ignore
+import FolderStatistics from "./FolderStatistics.svelte";
+
+// Modal to wrap the svelte component passing the required props
+export class FolderStatisticsModal extends Modal {
+
+    file: TAbstractFile;
+    plugin: BetterWordCount;
+
+    constructor(plugin: BetterWordCount, file: TAbstractFile) {
+        super(plugin.app);
+        this.plugin = plugin;
+        this.file = file;
+    }
+
+    async onOpen(): Promise<void> {
+        const { contentEl } = this;
+        new FolderStatistics({
+            target: contentEl,
+            props: {
+                plugin: this.plugin,
+                file: this.file,
+            },
+        });
+    }
+    onClose(): void {
+        const { contentEl } = this;
+        contentEl.empty();
+    }
+}