Add chart

luckydiamond/src/pages/SettingsPage.vue

@@ -1,28 +1,50 @@
 <template>
-    <div class="content__grid-profile" >
-      <aside-bar-component></aside-bar-component>
-  
-      <chat-component></chat-component>
-  
-      <header-component></header-component>
-  
-    <section class="settings"></section>
-      
-    </div>
-  </template>
-  
-  <script>
-  import AsideBarComponent from "@/components/AsidebarComponent.vue";
-  import ChatComponent from "@/components/ChatComponent.vue";
-  import HeaderComponent from "@/components/HeaderComponent.vue";
+  <LineChart
+    :chart-data="data"
+    :options="options"
+    css-classes="chart-container"
+  />
+</template>
 
-  import '@/assets/css/PagesStyles/SettingsPage.css'
-  export default {
-    components: {
-    ChatComponent,
-    HeaderComponent,
-    AsideBarComponent
-  }
+<script setup>
+import { ref, computed } from "vue"
+import { LineChart } from "vue-chart-3"
+import {
+  Chart,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+} from "chart.js"
 
+Chart.register(
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+)
+
+const dataValues = ref([13, 14,16])
+
+const data = computed(() => ({
+  labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+
+  datasets: [
+    {
+      label: "Foo",
+      data: dataValues.value,
+      backgroundColor: "#dc322f"
+    }
+  ]
+}))
+
+const options = ref({
+  plugins: {
+    title: {
+      text: "Line"
+    }
   }
-  </script>
+})
+</script>