Add: chart.js

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>
+  );
+}

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",

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"

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>