feat: init chartjs svelte component

Signed-off-by: edonyzpc <[email protected]>

package.json

@@ -35,8 +35,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,75 @@
+<script lang="ts">
+ import { Line } from 'svelte-chartjs';
+
+ import {
+ Chart as ChartJS,
+ Title,
+ Tooltip,
+ Legend,
+ LineElement,
+ LinearScale,
+ PointElement,
+ CategoryScale,
+ } from 'chart.js';
+
+
+ const data = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ fill: true,
+ lineTension: 0.3,
+ backgroundColor: 'rgba(225, 204,230, .3)',
+ borderColor: 'rgb(205, 130, 158)',
+ borderCapStyle: 'butt',
+ borderDash: [],
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'miter',
+ pointBorderColor: 'rgb(205, 130,1 58)',
+ pointBackgroundColor: 'rgb(255, 255, 255)',
+ pointBorderWidth: 10,
+ pointHoverRadius: 5,
+ pointHoverBackgroundColor: 'rgb(0, 0, 0)',
+ pointHoverBorderColor: 'rgba(220, 220, 220,1)',
+ pointHoverBorderWidth: 2,
+ pointRadius: 1,
+ pointHitRadius: 10,
+ data: [65, 59, 80, 81, 56, 55, 40],
+ },
+ {
+ label: 'My Second dataset',
+ fill: true,
+ lineTension: 0.3,
+ backgroundColor: 'rgba(184, 185, 210, .3)',
+ borderColor: 'rgb(35, 26, 136)',
+ borderCapStyle: 'butt',
+ borderDash: [],
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'miter',
+ pointBorderColor: 'rgb(35, 26, 136)',
+ pointBackgroundColor: 'rgb(255, 255, 255)',
+ pointBorderWidth: 10,
+ pointHoverRadius: 5,
+ pointHoverBackgroundColor: 'rgb(0, 0, 0)',
+ pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
+ pointHoverBorderWidth: 2,
+ pointRadius: 1,
+ pointHitRadius: 10,
+ data: [28, 48, 40, 19, 86, 27, 90],
+ },
+ ],
+ };
+
+ ChartJS.register(
+ Title,
+ Tooltip,
+ Legend,
+ LineElement,
+ LinearScale,
+ PointElement,
+ CategoryScale
+ );
+</script>
+
+<Line {data} options={{ responsive: true }} />

src/components/data.js

@@ -0,0 +1,47 @@
+export const data = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ fill: true,
+ lineTension: 0.3,
+ backgroundColor: 'rgba(225, 204,230, .3)',
+ borderColor: 'rgb(205, 130, 158)',
+ borderCapStyle: 'butt',
+ borderDash: [],
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'miter',
+ pointBorderColor: 'rgb(205, 130,1 58)',
+ pointBackgroundColor: 'rgb(255, 255, 255)',
+ pointBorderWidth: 10,
+ pointHoverRadius: 5,
+ pointHoverBackgroundColor: 'rgb(0, 0, 0)',
+ pointHoverBorderColor: 'rgba(220, 220, 220,1)',
+ pointHoverBorderWidth: 2,
+ pointRadius: 1,
+ pointHitRadius: 10,
+ data: [65, 59, 80, 81, 56, 55, 40],
+ },
+ {
+ label: 'My Second dataset',
+ fill: true,
+ lineTension: 0.3,
+ backgroundColor: 'rgba(184, 185, 210, .3)',
+ borderColor: 'rgb(35, 26, 136)',
+ borderCapStyle: 'butt',
+ borderDash: [],
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'miter',
+ pointBorderColor: 'rgb(35, 26, 136)',
+ pointBackgroundColor: 'rgb(255, 255, 255)',
+ pointBorderWidth: 10,
+ pointHoverRadius: 5,
+ pointHoverBackgroundColor: 'rgb(0, 0, 0)',
+ pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
+ pointHoverBorderWidth: 2,
+ pointRadius: 1,
+ pointHitRadius: 10,
+ data: [28, 48, 40, 19, 86, 27, 90],
+ },
+ ],
+};

src/stat.ts

@@ -2,6 +2,7 @@ import { App, ItemView, WorkspaceLeaf } from "obsidian";
 
 import { PluginManager } from "./plugin";
 import RecordList from './components/RecordList.svelte'
+import Statistics from './components/Statistics.svelte'
 
 export const STAT_PREVIEW_TYPE = "vault-statistics-preview";
 
@@ -25,6 +26,7 @@ export class Stat extends ItemView {
  }
 
  async onOpen() {
+ this.component = new Statistics()
  }
 
  async onClose() {

yarn.lock

@@ -750,6 +750,11 @@
  "@jridgewell/resolve-uri" "^3.1.0"
  "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/color@^0.3.0":
+ version "0.3.2"
+ resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+ integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@nodelib/[email protected]":
  version "2.1.5"
  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1283,6 +1288,13 @@ char-regex@^1.0.2:
  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+chart.js@^4.4.2:
+ version "4.4.2"
+ resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.2.tgz#95962fa6430828ed325a480cc2d5f2b4e385ac31"
+ integrity sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==
+ dependencies:
+ "@kurkle/color" "^0.3.0"
+
 chokidar@^3.5.3:
  version "3.5.3"
  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -3176,6 +3188,11 @@ supports-preserve-symlinks-flag@^1.0.0:
  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svelte-chartjs@^3.1.5:
+ version "3.1.5"
+ resolved "https://registry.yarnpkg.com/svelte-chartjs/-/svelte-chartjs-3.1.5.tgz#7e43a57d077037ff8edaa00e2f7854f1be07dff6"
+ integrity sha512-ka2zh7v5FiwfAX1oMflZ0HkNkgjHjFqANgRyC+vNYXfxtx2ku68Zo+2KgbKeBH2nS1ThDqkIACPzGxy4T0UaoA==
+
 svelte-preprocess@^5.0.4:
  version "5.1.3"
  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.3.tgz#7682239fe53f724c845b53026816fdfe15d028f9"