Add chart

luckydiamond/package-lock.json

@@ -18,6 +18,7 @@
         "save": "^2.9.0",
         "swiper": "^11.0.5",
         "vue": "^3.2.13",
+        "vue-chart-3": "^3.1.8",
         "vue-recaptcha": "^3.0.0-alpha.6",
         "vue-router": "^4.2.5",
         "vue3-recaptcha2": "^1.8.0"
@@ -4306,6 +4307,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==",
+      "peer": true
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -7807,6 +7814,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.assign": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -11561,6 +11573,21 @@
         }
       }
     },
+    "node_modules/vue-chart-3": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.8.tgz",
+      "integrity": "sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==",
+      "dependencies": {
+        "@vue/runtime-core": "latest",
+        "@vue/runtime-dom": "latest",
+        "csstype": "latest",
+        "lodash-es": "latest"
+      },
+      "peerDependencies": {
+        "chart.js": "=> ^3.1.0",
+        "vue": ">= 3"
+      }
+    },
     "node_modules/vue-demi": {
       "version": "0.14.6",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",

luckydiamond/package.json

@@ -19,6 +19,7 @@
     "save": "^2.9.0",
     "swiper": "^11.0.5",
     "vue": "^3.2.13",
+    "vue-chart-3": "^3.1.8",
     "vue-recaptcha": "^3.0.0-alpha.6",
     "vue-router": "^4.2.5",
     "vue3-recaptcha2": "^1.8.0"

luckydiamond/src/pages/SettingsPage.vue

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