From d5e932a871c1f08860018005f299c0ee42110ad6 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 5 Jun 2024 11:14:24 +0800
Subject: [PATCH] add LineChart

---
 components/prose/LineChart.global.vue | 36 +++++++++++++++++++++++++++
 package-lock.json                     | 30 ++++++++++++++++++++++
 package.json                          |  1 +
 pages/mdc.vue                         | 18 +++-----------
 4 files changed, 71 insertions(+), 14 deletions(-)
 create mode 100644 components/prose/LineChart.global.vue

diff --git a/components/prose/LineChart.global.vue b/components/prose/LineChart.global.vue
new file mode 100644
index 0000000..a9ac5c1
--- /dev/null
+++ b/components/prose/LineChart.global.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="w-full">
+        <canvas id="chart"></canvas>
+    </div>
+</template>
+<script setup>
+import { Chart } from 'chart.js/auto';
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    labels: {
+        type: Array,
+        default: () => []
+    },
+    data: {
+        type: Array,
+        default: () => []
+    }
+})
+onMounted(() => {
+    new Chart(document.getElementById('chart'), {
+        type: 'line',
+        data: {
+            labels: props.labels,
+            datasets: [
+                {
+                    label: props.title,
+                    data: props.data
+                }
+            ]
+        }
+    })
+})
+</script>
diff --git a/package-lock.json b/package-lock.json
index 2be98db..e092552 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@pinia/nuxt": "^0.5.1",
         "@vite-pwa/nuxt": "^0.7.0",
         "@vueuse/nuxt": "^10.9.0",
+        "chart.js": "^4.4.3",
         "highlight.js": "^11.9.0",
         "markdown-it": "^14.1.0",
         "nuxt": "^3.11.2",
@@ -2736,6 +2737,11 @@
         "node": ">= 12"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@kwsites/file-exists": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
@@ -6981,6 +6987,17 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -19718,6 +19735,11 @@
         "path-to-regexp": "^6.2.1"
       }
     },
+    "@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "@kwsites/file-exists": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
@@ -22610,6 +22632,14 @@
       "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="
     },
+    "chart.js": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
+    },
     "chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
diff --git a/package.json b/package.json
index 58972bf..36d9626 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@pinia/nuxt": "^0.5.1",
     "@vite-pwa/nuxt": "^0.7.0",
     "@vueuse/nuxt": "^10.9.0",
+    "chart.js": "^4.4.3",
     "highlight.js": "^11.9.0",
     "markdown-it": "^14.1.0",
     "nuxt": "^3.11.2",
diff --git a/pages/mdc.vue b/pages/mdc.vue
index 25384bb..0c8184d 100644
--- a/pages/mdc.vue
+++ b/pages/mdc.vue
@@ -1,18 +1,8 @@
 <template>
-     <IMdMdc :content="mdStr" />
+    <IMdMdc :content="mdStr"/>
 </template>
 <script setup>
-const mdStr = ref(`| 列1 | 列2 | 列3 | 列4 | 列5 | 列6 | 列7 | 列8 | 列9 | 列10 |
-| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-| 行1数据A | 数据B | 数据C | 数据D | 数据E | 数据F | 数据G | 数据H | 数据I | 数据J |
-| 行2数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-| 行3数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-| 行4数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-| 行5数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-| 行6数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-| 行7数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-| 行8数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-| 行9数据A | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  |
-| 行10数据A | 数据B | 数据C | 数据D | 数据E | 数据F | 数据G | 数据H | 数据I | 数据J |
-`)
+const mdStr = `
+::ProseLineChart{title='langchain-ai/langchain [2023-06-05,2024-06-04] Star Data' :labels='["2023-06-05","2023-06-12"]' :data='[43071,44946]'}
+`
 </script>
\ No newline at end of file
-- 
GitLab