tu

components/prose/LineChart.global.vue → components/prose/Chart.global.vue

 <template>
-    <div class="w-full">
-        <canvas id="chart"></canvas>
+    <div class="w-full relative" style="aspect-ratio: 2/1">
+        <canvas id="chart" :aria-label="title"></canvas>
     </div>
 </template>
 <script setup>
 import { Chart } from 'chart.js/auto';
 const props = defineProps({
+    type: {
+        type: String,
+        default: 'line'
+    },
     title: {
         type: String,
         default: ''
@@ -21,7 +25,7 @@ const props = defineProps({
 })
 onMounted(() => {
     new Chart(document.getElementById('chart'), {
-        type: 'line',
+        type: props.type,
         data: {
             labels: props.labels,
             datasets: [

pages/mdc.vue

 <template>
-    <IMdMdc :content="mdStr"/>
+    <div class="w-full p-6">
+        <IMdMdc :content="mdStr"/>
+    </div>
 </template>
 <script setup>
 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]'}
+::ProseChart{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