vault backup: 2023-10-02 11:51:20

Affected files: content/.obsidian/plugins/recent-files-obsidian/data.json content/.obsidian/workspace.json content/chart-js/Chart.js.md content/chart-js/Getting Started with Chart.js.md
windsuzu · Oct 2, 2023 · 3210e55 · 3210e55
1 parent 55af0a9
commit 3210e55
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 15 deletions.
diff --git a/content/.obsidian/plugins/recent-files-obsidian/data.json b/content/.obsidian/plugins/recent-files-obsidian/data.json
@@ -1,17 +1,25 @@
 {
   "recentFiles": [
     {
-      "basename": "index",
-      "path": "index.md"
+      "basename": "Getting Started with Chart.js",
+      "path": "chart-js/Getting Started with Chart.js.md"
     },
     {
-      "basename": "Create a PWA with Next.js 13 App Router",
-      "path": "pwa/Create a PWA with Next.js 13 App Router.md"
+      "basename": "Chart.js",
+      "path": "chart-js/Chart.js.md"
     },
     {
       "basename": "Create a PWA",
       "path": "pwa/Create a PWA.md"
     },
+    {
+      "basename": "index",
+      "path": "index.md"
+    },
+    {
+      "basename": "Create a PWA with Next.js 13 App Router",
+      "path": "pwa/Create a PWA with Next.js 13 App Router.md"
+    },
     {
       "basename": "PWA (Progressive Web Apps)",
       "path": "pwa/PWA (Progressive Web Apps).md"

diff --git a/content/.obsidian/workspace.json b/content/.obsidian/workspace.json
@@ -4,22 +4,31 @@
     "type": "split",
     "children": [
       {
-        "id": "433d31e68d31e2e3",
+        "id": "847ac7d36f0cdf2d",
         "type": "tabs",
         "children": [
           {
-            "id": "632a6f9d91110026",
+            "id": "f38ee323ff5949da",
+            "type": "leaf",
+            "state": {
+              "type": "empty",
+              "state": {}
+            }
+          },
+          {
+            "id": "fee4288f56be25c4",
             "type": "leaf",
             "state": {
               "type": "markdown",
               "state": {
-                "file": "index.md",
+                "file": "chart-js/Getting Started with Chart.js.md",
                 "mode": "source",
                 "source": false
               }
             }
           }
-        ]
+        ],
+        "currentTab": 1
       }
     ],
     "direction": "vertical"
@@ -102,7 +111,7 @@
             "state": {
               "type": "localgraph",
               "state": {
-                "file": "index.md",
+                "file": "chart-js/Getting Started with Chart.js.md",
                 "options": {
                   "collapse-filter": true,
                   "search": "",
@@ -152,7 +161,7 @@
             "state": {
               "type": "outline",
               "state": {
-                "file": "index.md"
+                "file": "chart-js/Getting Started with Chart.js.md"
               }
             }
           },
@@ -162,7 +171,7 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "index.md",
+                "file": "chart-js/Getting Started with Chart.js.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -208,7 +217,7 @@
             "state": {
               "type": "file-properties",
               "state": {
-                "file": "index.md"
+                "file": "chart-js/Getting Started with Chart.js.md"
               }
             }
           },
@@ -218,7 +227,7 @@
             "state": {
               "type": "outgoing-link",
               "state": {
-                "file": "index.md",
+                "file": "chart-js/Getting Started with Chart.js.md",
                 "linksCollapsed": false,
                 "unlinkedCollapsed": true
               }
@@ -244,11 +253,15 @@
       "cmdr:Obsidian Git: Create backup": false
     }
   },
-  "active": "632a6f9d91110026",
+  "active": "fee4288f56be25c4",
   "lastOpenFiles": [
-    "pwa/Create a PWA with Next.js 13 App Router.md",
+    "chart-js/Chart.js.md",
+    "chart-js/Getting Started with Chart.js.md",
     "pwa/Create a PWA.md",
     "index.md",
+    "chart-js/f.md",
+    "chart-js",
+    "pwa/Create a PWA with Next.js 13 App Router.md",
     "pwa/PWA (Progressive Web Apps).md",
     "pwa/Untitled.md",
     "Configure ServiceWorker.md",

diff --git a/content/chart-js/Chart.js.md b/content/chart-js/Chart.js.md
@@ -0,0 +1,19 @@
+---
+title: Chart.js
+draft: false
+date: 2023-10-02 11:22
+tags:
+  - chart-js
+  - learning
+---
+
+Chart.js is a widely-used charting library for JavaScript developers, boasting approximately 60,000 [GitHub stars](https://github.com/chartjs/Chart.js) and around 2,400,000 weekly [npm downloads](https://www.npmjs.com/package/chart.js) as of October 2023. It not only provides default [chart types](https://www.chartjs.org/docs/latest/charts/area.html) with a variety of [plugins](https://github.com/chartjs/awesome#plugins), configurations, and animations but also offers numerous additional [community-maintained chart types](https://github.com/chartjs/awesome#charts). Furthermore, it is possible to combine several chart types into a [mixed chart](https://www.chartjs.org/docs/latest/charts/mixed.html).
+
+In addition to its well-maintained, easy-to-use, and out-of-the-box functionalities, Chart.js offers two compelling advantages that users appreciate: a developer-friendly experience and high performance.
+
+For developer experience, Chart.js includes built-in TypeScript typings and is compatible with [React](https://github.com/reactchartjs/react-chartjs-2), Vue, Svelte, and Angular. Furthermore, Chart.js offers comprehensive [documentation](https://www.chartjs.org/docs/latest/), an extensive [API reference](https://www.chartjs.org/docs/latest/api/), and a variety of [examples](https://www.chartjs.org/docs/latest/samples/information.html). Developers can also find numerous solved questions on Stack Overflow tagged with `chart.js`.
+
+For performance, Chart.js renders chart elements on an HTML5 canvas instead of as SVG, which can require managing thousands of SVG nodes in the DOM tree. This approach makes Chart.js well-suited for handling large datasets, even without the need for [data parsing and normalization](https://www.chartjs.org/docs/latest/general/performance.html). Additionally, developers have the option to implement [data decimation](https://www.chartjs.org/docs/latest/configuration/decimation.html) to sample the dataset and reduce the chart's size before rendering. Chart.js also supports tree-shaking, allowing you to further reduce the bundle size.
+
+> [!info] References
+> - [Chart.js | Chart.js (chartjs.org)](https://www.chartjs.org/docs/latest/)
diff --git a/content/chart-js/Getting Started with Chart.js.md b/content/chart-js/Getting Started with Chart.js.md
@@ -0,0 +1,19 @@
+---
+title: Getting Started with Chart.js
+draft: false
+date: 2023-10-02 11:41
+tags:
+  - chart-js
+  - learning
+---
+
+> [!tldr] TL;DR
+> Write some tldr
+
+1. create package.json
+2. create index.html, the chart is responsive by default
+3. create js file to load the chart into canvas
+4. 
+
+> [!info] References
+> - [Step-by-step guide | Chart.js (chartjs.org)](https://www.chartjs.org/docs/latest/getting-started/usage.html)