Add Chartmatrix

package.json

@@ -41,6 +41,7 @@
     "typescript": "^4.0.3"
   },
   "dependencies": {
+    "chartjs-chart-matrix": "^2.0.1",
     "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 { HeatmapView, VIEW_TYPE_HEATMAP } from "./view/statview";
 
 export default class BetterWordCount extends Plugin {
   public settings: BetterWordCountSettings;
@@ -18,6 +19,7 @@ export default class BetterWordCount extends Plugin {
   async onunload(): Promise<void> {
     this.statsManager = null;
     this.statusBar = null;
+    this.app.workspace.detachLeavesOfType(VIEW_TYPE_HEATMAP);
   }
 
   async onload() {
@@ -68,7 +70,30 @@ export default class BetterWordCount extends Plugin {
         await this.statsManager.recalcTotals();
       })
     );
+
+    this.registerView(VIEW_TYPE_HEATMAP, (leaf) => new HeatmapView(leaf));
+
+    
+    
+    this.addRibbonIcon("calendar-range", "Activate heatmap view", () => {
+      console.log("Activate heatmapview!");
+      this.activateView();
+    });
+
+
   }
+  async activateView() {
+    this.app.workspace.detachLeavesOfType(VIEW_TYPE_HEATMAP);
+
+    await this.app.workspace.getRightLeaf(false).setViewState({
+      type: VIEW_TYPE_HEATMAP,
+      active: true,
+    });
+
+    this.app.workspace.revealLeaf(
+      this.app.workspace.getLeavesOfType(VIEW_TYPE_HEATMAP)[0]
+    );
+  };
 
   giveEditorPlugin(leaf: WorkspaceLeaf): void {
     //@ts-expect-error, not typed
@@ -87,3 +112,5 @@ export default class BetterWordCount extends Plugin {
     await this.saveData(this.settings);
   }
 }
+
+

src/view/statview.ts

@@ -0,0 +1,28 @@
+import { ItemView, WorkspaceLeaf } from "obsidian";
+
+export const VIEW_TYPE_HEATMAP = "heatmap-view";
+
+export class HeatmapView extends ItemView {
+  constructor(leaf: WorkspaceLeaf) {
+    super(leaf);
+    this.icon = "calendar-range";
+  }
+
+  getViewType() {
+    return VIEW_TYPE_HEATMAP;
+  }
+
+  getDisplayText() {
+    return "Word heatmap";
+  }
+
+  async onOpen() {
+    const container = this.containerEl.children[1];
+    container.empty();
+    container.createEl("h4", { text: this.getDisplayText() });
+  }
+
+  async onClose() {
+    // Nothing to clean up.
+  }
+}