From 99071632343467943f40561c303a06fa73a30ee3 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Wed, 6 Apr 2022 10:08:45 +0800
Subject: [PATCH] Add: chart.js

---
 components/Chart.js | 42 ++++++++++++++++++++++++++++++++++++++++++
 package-lock.json   | 27 +++++++++++++++++++++++++++
 package.json        |  2 ++
 pages/posts/mdx.mdx |  9 ++++++++-
 4 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 components/Chart.js

diff --git a/components/Chart.js b/components/Chart.js
new file mode 100644
index 0000000..cfac134
--- /dev/null
+++ b/components/Chart.js
@@ -0,0 +1,42 @@
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { Bar } from "react-chartjs-2";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+export default function Chart() {
+  const data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First dataset",
+        backgroundColor: "rgba(255,99,132,0.2)",
+        borderColor: "rgba(255,99,132,1)",
+        borderWidth: 1,
+        hoverBackgroundColor: "rgba(255,99,132,0.4)",
+        hoverBorderColor: "rgba(255,99,132,1)",
+        data: [65, 59, 80, 81, 56, 55, 40],
+      },
+    ],
+  };
+
+  return (
+    <div>
+      <Bar data={data} />
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index ad060b9..dced1ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,10 @@
         "@mui/lab": "^5.0.0-alpha.75",
         "@mui/material": "^5.5.3",
         "@next/mdx": "^12.1.4",
+        "chart.js": "^3.7.1",
         "next": "12.1.2",
         "react": "17.0.2",
+        "react-chartjs-2": "^4.0.1",
         "react-dom": "17.0.2",
         "remark": "^14.0.2",
         "remark-mdx": "^2.1.1"
@@ -2002,6 +2004,11 @@
       "resolved": "https://registry.npmmirror.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="
     },
+    "node_modules/chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -4509,6 +4516,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
+      "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
+      "peerDependencies": {
+        "chart.js": "^3.5.0",
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-17.0.2.tgz",
@@ -6893,6 +6909,11 @@
       "resolved": "https://registry.npmmirror.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="
     },
+    "chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -9024,6 +9045,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-chartjs-2": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
+      "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
+      "requires": {}
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-17.0.2.tgz",
diff --git a/package.json b/package.json
index 5e735e6..a51626a 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,10 @@
     "@mui/lab": "^5.0.0-alpha.75",
     "@mui/material": "^5.5.3",
     "@next/mdx": "^12.1.4",
+    "chart.js": "^3.7.1",
     "next": "12.1.2",
     "react": "17.0.2",
+    "react-chartjs-2": "^4.0.1",
     "react-dom": "17.0.2",
     "remark": "^14.0.2",
     "remark-mdx": "^2.1.1"
diff --git a/pages/posts/mdx.mdx b/pages/posts/mdx.mdx
index daa1cec..80a3279 100644
--- a/pages/posts/mdx.mdx
+++ b/pages/posts/mdx.mdx
@@ -4,8 +4,9 @@ export const meta = {
   "description": "MDX 允许您在 Markdown 文件中使用 JavaScript。与现代 JavaScript 框架结合让编写内容更优雅。"
 };
 
-import PostLayout from '../../components/PostLayout.js';
+import PostLayout from '../../components/PostLayout';
 import { Button } from '@mui/material';
+import Chart from '../../components/Chart';
 
 这是普通 Markdown 的语法
 
@@ -17,4 +18,10 @@ import { Button } from '@mui/material';
 
 <Button variant="contained">按钮</Button>
 
+将 Markdown 拓展到 Javascript，意味着丰富的生态和组件库
+
+`chart.js` 示例
+
+<Chart />
+
 export default ({children}) => <PostLayout meta={meta}>{children}</PostLayout>