Merge pull request #240 from edonyzpc/dev-display-vault-statistics

Dev display vault statistics

package.json

@@ -15,6 +15,11 @@
  "author": "edonyzpc",
  "license": "MIT",
  "devDependencies": {
+ "@codemirror/commands": "^6.1.2",
+ "@codemirror/language": "https://github.com/lishid/cm-language",
+ "@codemirror/search": "^6.2.2",
+ "@codemirror/state": "^6.1.2",
+ "@codemirror/view": "^6.4.0",
  "@jest/globals": "^29.5.0",
  "@tsconfig/svelte": "^5.0.0",
  "@types/node": "^20.0.0",
@@ -35,8 +40,10 @@
  "typescript": "5.4.2"
  },
  "dependencies": {
+ "chart.js": "^4.4.2",
  "obsidian-callout-manager": "^1.0.2-alpha1",
  "semver": "^7.5.2",
+ "svelte-chartjs": "^3.1.5",
  "vanilla-picker": "2.12.2"
  }
 }

src/components/Statistics.svelte

@@ -0,0 +1,284 @@
+<!-- Copyright 2024 edonyzpc -->
+
+<script lang="ts">
+ import { Line } from 'svelte-chartjs';
+ import {
+ Chart as ChartJS,
+ Title,
+ Tooltip,
+ Legend,
+ LineElement,
+ LinearScale,
+ PointElement,
+ CategoryScale,
+ Filler,
+ type ChartData,
+ type ChartOptions,
+ } from 'chart.js';
+ import type { App } from 'obsidian';
+ import type { PluginManager } from 'plugin';
+
+ export let app: App;
+ export let plugin: PluginManager;
+ export let staticsFileData: string;
+
+ type CustomChartData = {
+ key: string;
+ value: number;
+ };
+
+ const statics = JSON.parse(staticsFileData);
+ let wordsData = [];
+ let filesData = [];
+ let pagesData = [];
+ const history = Object.keys(statics.history);
+ for (const date of history) {
+ wordsData.push({ key: date, value: statics.history[date].words });
+ filesData.push({ key: date, value: Number(statics.history[date].files) });
+ pagesData.push({ key: date, value: Number(statics.history[date].totalPages) });
+ }
+
+ const data: ChartData<"line", CustomChartData[]> = {
+ datasets: [
+ {
+ label: "Daily Words",
+ data: wordsData,
+ backgroundColor: ["rgba(255, 99, 132, 0.2)"],
+ borderColor: ['rgba(255, 99, 132, 1)'],
+ borderWidth: 1.0,
+ yAxisID: 'y',
+ parsing: {
+ xAxisKey: 'key',
+ yAxisKey: 'value'
+ }
+ },
+ ],
+ };
+
+ const dataFilePage: ChartData<"line", CustomChartData[]> = {
+ datasets: [
+ {
+ label: "Total Files",
+ data: filesData,
+ backgroundColor: ["rgba(153, 102, 255, 0.2)"],
+ borderColor: ['rgba(153, 102, 255, 1)'],
+ borderWidth: 1.0,
+ yAxisID: 'y',
+ parsing: {
+ xAxisKey: 'key',
+ yAxisKey: 'value'
+ }
+ },
+ {
+ label: "Total Pages",
+ data: pagesData,
+ backgroundColor: ["rgba(255, 205, 86, 0.2)"],
+ borderColor: ['rgba(255, 205, 86, 1)'],
+ borderWidth: 1.0,
+ yAxisID: 'y1',
+ parsing: {
+ xAxisKey: 'key',
+ yAxisKey: 'value'
+ }
+ },
+ ],
+ };
+
+ const options: ChartOptions<"line"> = {
+ responsive: true,
+ interaction: {
+ intersect: true,
+ mode: 'index',
+ },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Statistics of Obsidian Vault',
+ font: {weight: 'bold', size: 16, family: 'Barlow'},
+ color: "rgba(48,48,48,1)",
+ },
+ subtitle: {
+ display: true,
+ text: "words of vault named as Anthelion",
+ font: {size: 14, style: 'italic', family: 'sans-serif'},
+ color: "rgba(48,48,48,0.8)",
+ },
+ legend: {
+ labels: {
+ color: "rgba(0,0,0,1)",
+ usePointStyle: true,
+ },
+ }
+ },
+ animations: {
+ tension: {
+ duration: 1000,
+ easing: 'linear',
+ from: 1,
+ to: 0,
+ loop: true
+ }
+ },
+ scales: {
+ y: {
+ border: {
+ display: true,
+ width: 0.8,
+ },
+ grid: {
+ display: true,
+ drawOnChartArea: true,
+ drawTicks: true,
+ color: "rgba(59, 59, 59, 0.2)",
+ },
+ title: {
+ display: true,
+ //text: "words",
+ font: {size: 15, style: 'italic',family: 'Recursive',},
+ },
+ ticks: {
+ color: "rgba(255, 99, 132, 1)",
+ showLabelBackdrop: false,
+ },
+ },
+ x: {
+ border: {
+ display: false,
+ width: 0.8,
+ },
+ grid: {
+ color: "rgba(59, 59, 59, 0.2)",
+ },
+ ticks: {
+ },
+ },
+ },
+ }
+
+ const optionsFilePage: ChartOptions<"line"> = {
+ interaction: {
+ mode: 'index',
+ axis: 'y',
+ },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Statistics of Obsidian Vault',
+ font: {weight: 'bold', size: 16, family: 'Barlow'},
+ },
+ subtitle: {
+ display: true,
+ text: "total files/pages of vault named as " + app.vault.getName(),
+ font: {size: 14, style: 'italic', family: 'sans-serif'}
+ },
+ legend: {
+ labels: {
+ color: "rgba(0,0,0,1)",
+ },
+ }
+ },
+ animations: {
+ tension: {
+ duration: 1600,
+ easing: 'easeInOutExpo',
+ from: 1.5,
+ to: 0,
+ loop: true
+ }
+ },
+ scales: {
+ y: {
+ border: {
+ display: true,
+ width: 0.8,
+ },
+ grid: {
+ display: true,
+ drawOnChartArea: true,
+ drawTicks: true,
+ color: "rgba(59, 59, 59, 0.2)",
+ },
+ title: {
+ display: true,
+ //text: "files",
+ font: {size: 15, style: 'italic', family: 'Recursive',},
+ },
+ ticks: {
+ color: "rgba(153, 102, 255, 0.5)",
+ showLabelBackdrop: false,
+ },
+ suggestedMin: 1373,
+ },
+ y1: {
+ type: 'linear',
+ display: true,
+ position: 'right',
+ // grid line settings
+ grid: {
+ drawOnChartArea: false, // only want the grid lines for one axis to show up
+ },
+ title: {
+ display: true,
+ //text: "pages",
+ font: {size: 15, style: 'italic', family: 'Recursive',},
+ },
+ ticks: {
+ color: "rgba(255, 205, 86, 1)",
+ showLabelBackdrop: false,
+ },
+ suggestedMin: 4045,
+ },
+ x: {
+ border: {
+ display: false,
+ width: 0.8,
+ },
+ grid: {
+ color: "rgba(59, 59, 59, 0.2)",
+ },
+ },
+ },
+ }
+
+ const isTotal = () => {
+ return plugin.settings.statisticsType === 'total';
+ }
+
+ ChartJS.register(
+ Title,
+ Tooltip,
+ Legend,
+ LineElement,
+ LinearScale,
+ PointElement,
+ CategoryScale,
+ Filler,
+ );
+
+</script>
+
+<div id="statistics-line-chart">
+ {#if isTotal()}
+ <!-- total files/pages -->
+ <Line data={dataFilePage} options={optionsFilePage} />
+ {:else}
+ <!-- daily words-->
+ <Line data={data} options={options} />
+ {/if}
+</div>
+
+<style>
+ #statistics-line-chart {
+ --backgroundColor: rgba(225, 204,230, .4);
+ --backgroundColor-1: rgba(255, 99, 132, 0.2);
+ --borderColor-1: rgb(205, 130, 158);
+ --point-border-color: rgb(205, 130,1 58);
+ --pointBackgroundColor: rgb(255, 255, 255);
+ --pointHoverBackgroundColor: rgb(0, 0, 0);
+ --pointHoverBorderColor: rgba(220, 220, 220,1);
+ position: relative;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(255, 255, 255, 0.9);
+ }
+</style>

src/constant.ts

@@ -0,0 +1,13 @@
+// icons
+export const PluginAST_STAT_ICON = "PluginAST_STAT";
+
+// stats
+export const MATCH_COMMENT = new RegExp("%%[\\s\\S]*?(?!%%)[\\s\\S]+?%%", "g");
+export const MATCH_HTML_COMMENT = new RegExp(
+ "<!--[\\s\\S]*?(?:-->)?" +
+ "<!---+>?" +
+ "|<!(?![dD][oO][cC][tT][yY][pP][eE]|\\[CDATA\\[)[^>]*>?" +
+ "|<[?][^>]*>?",
+ "g"
+);
+export const STATS_FILE_NAME = "stats.json";