diff --git a/package-lock.json b/package-lock.json
index 1c13402f..2fab3f32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
         "@coreui/coreui": "^4.0.1",
         "@coreui/icons": "^2.0.1",
         "@coreui/icons-vue": "2.0.0-alpha.0",
-        "@coreui/vue": "^4.0.0-alpha.0",
+        "@coreui/utils": "^1.3.1",
+        "@coreui/vue": "^4.0.0-alpha.2",
+        "@coreui/vue-chartjs": "2.0.0-alpha.0",
         "core-js": "^3.6.5",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0-0",
@@ -419,14 +421,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz",
-      "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==",
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.3.tgz",
+      "integrity": "sha512-HwJiz52XaS96lX+28Tnbu31VeFSQJGOeKHJeaEPQlTl7PnlhFElWPj8tUXtqFIzeN86XxXoBr+WFAyK2PPVz6g==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.8",
-        "@babel/types": "^7.14.8"
+        "@babel/traverse": "^7.15.0",
+        "@babel/types": "^7.15.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -447,9 +449,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.15.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.2.tgz",
-      "integrity": "sha512-bMJXql1Ss8lFnvr11TZDH4ArtwlAS5NG9qBmdiFW2UHHm6MVoR+GDc5XE2b9K938cyjc9O6/+vjjcffLDtfuDg==",
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.3.tgz",
+      "integrity": "sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1020,9 +1022,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
-      "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz",
+      "integrity": "sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -1600,9 +1602,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-      "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
+      "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
       "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
@@ -1673,6 +1675,23 @@
         "node": ">=0.1.95"
       }
     },
+    "node_modules/@coreui/chartjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@coreui/chartjs/-/chartjs-3.0.0.tgz",
+      "integrity": "sha512-udbvSxanTNltv94lqTMW8bLRXTtzk9G2SrmFdM/7HH+JSaLX2wdQpZ4VIJhyOCRGLCSKHktl29BnW1/uXQecAg==",
+      "dependencies": {
+        "@coreui/coreui": "4.0.0",
+        "chart.js": "^3.4.0"
+      }
+    },
+    "node_modules/@coreui/chartjs/node_modules/@coreui/coreui": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-4.0.0.tgz",
+      "integrity": "sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==",
+      "peerDependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@coreui/coreui": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-4.0.1.tgz",
@@ -1694,10 +1713,19 @@
         "vue": "^3.0.10"
       }
     },
+    "node_modules/@coreui/utils": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@coreui/utils/-/utils-1.3.1.tgz",
+      "integrity": "sha512-WuWHX7bg89cJH34TWVsLe9RsxzBhTApj+X2Ja19xhjcpxt5Gv11Ozm+fwYt6DD7DgncTvpwYrMcnNlpp701UOg==",
+      "engines": {
+        "node": ">=8.9.0",
+        "npm": ">= 5.6.0"
+      }
+    },
     "node_modules/@coreui/vue": {
-      "version": "4.0.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/@coreui/vue/-/vue-4.0.0-alpha.1.tgz",
-      "integrity": "sha512-7LjbYEKwnN1x2vQvwkHyypP+7LUhHHJCmw2U6ILljVhb/ONY/+7+9dM1AbejMsbeZ3IIAzUe56Uta+lfGveQow==",
+      "version": "4.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@coreui/vue/-/vue-4.0.0-alpha.2.tgz",
+      "integrity": "sha512-h/mrYa4gEHtnMbZyyfjyBuN160T4vjTJLSDKcGNu+wjCzVsZN/vSNbOP9QRk428ySfIFB+tmzSImSrHMx0O0kw==",
       "dependencies": {
         "@coreui/coreui": "^4.0.1",
         "@coreui/icons": "^2.0.1",
@@ -1710,10 +1738,23 @@
         "vue": "^3.0.5"
       }
     },
+    "node_modules/@coreui/vue-chartjs": {
+      "version": "2.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@coreui/vue-chartjs/-/vue-chartjs-2.0.0-alpha.0.tgz",
+      "integrity": "sha512-A9Z5uooElEyQPyn+GX0/my9OUMxtf8K5S+75ONTVc/m02YWE93UHZl1cEtbo+ooqyNiKHkGGL+iYGFUnpHQLrQ==",
+      "dependencies": {
+        "@coreui/chartjs": "^3.0.0",
+        "chart.js": "^3.4.1",
+        "vue": "^3.0.10"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.10"
+      }
+    },
     "node_modules/@coreui/vue/node_modules/@coreui/icons-vue": {
-      "version": "2.0.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/@coreui/icons-vue/-/icons-vue-2.0.0-alpha.1.tgz",
-      "integrity": "sha512-jhs21oLa7t4oqHjldnJeEmLTt9kVbZrbSbPV0/2z7MIUl9vTlmWZDX8jg9vCErs/4BTb/xPCG/vDJ8jGoEvccw==",
+      "version": "2.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@coreui/icons-vue/-/icons-vue-2.0.0-alpha.2.tgz",
+      "integrity": "sha512-r4WfLSqJasFAqTHPluq1An/dRj6+FKtiPfCugmVKZNiVVk4lxk2qMZffZb5tb148vYlK+QMKnXnVZfBdCveaFA==",
       "dependencies": {
         "vue": "^3.0.10"
       },
@@ -4190,9 +4231,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "16.4.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.13.tgz",
-      "integrity": "sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg==",
+      "version": "16.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.6.0.tgz",
+      "integrity": "sha512-OyiZPohMMjZEYqcVo/UJ04GyAxXOJEZO/FpzyXxcH4r/ArrVoXHf4MbUrkLp0Tz7/p1mMKpo5zJ6ZHl8XBNthQ==",
       "dev": true
     },
     "node_modules/@types/normalize-package-data": {
@@ -6042,13 +6083,13 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.1.tgz",
-      "integrity": "sha512-UEJf2ZGww5wGVdrWIXIZo04KdJFGPmI2bHRUsBZ3AdyCAqJ5ykRXKOBn1OR1hvA2YzimudOEyHM+DpbBv91Kww==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.2.tgz",
+      "integrity": "sha512-QhCI0ZU5nAR0LMcLgzW3v75374tIrHGp8XG5CzJS7Nsy+iuignbE4MZ2XJfh5TGIrtpuzfWA4eTIfukZf/cRdg==",
       "dependencies": {
         "@babel/parser": "^7.12.0",
         "@babel/types": "^7.12.0",
-        "@vue/shared": "3.2.1",
+        "@vue/shared": "3.2.2",
         "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       }
@@ -6062,27 +6103,27 @@
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.1.tgz",
-      "integrity": "sha512-tXg8tkPb3j54zNfWqoao9T1JI41yWPz8TROzmif/QNNA46eq8/SRuRsBd36i47GWaz7mh+yg3vOJ87/YBjcMyQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.2.tgz",
+      "integrity": "sha512-ggcc+NV/ENIE0Uc3TxVE/sKrhYVpLepMAAmEiQ047332mbKOvUkowz4TTFZ+YkgOIuBOPP0XpCxmCMg7p874mA==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/compiler-core": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.1.tgz",
-      "integrity": "sha512-fVLdme5RZVkBt+jxv2LCSRM72o4FX7BR2eu2FpjjEi1kEtUMKBDnjKwGWy7TyhTju0t0CocctyoM+G56vH7NpQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.2.tgz",
+      "integrity": "sha512-hrtqpQ5L6IPn5v7yVRo7uvLcQxv0z1+KBjZBWMBOcrXz4t+PKUxU/SWd6Tl9T8FDmYlunzKUh6lcx+2CLo6f5A==",
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.13.9",
         "@babel/types": "^7.13.0",
         "@types/estree": "^0.0.48",
-        "@vue/compiler-core": "3.2.1",
-        "@vue/compiler-dom": "3.2.1",
-        "@vue/compiler-ssr": "3.2.1",
-        "@vue/shared": "3.2.1",
+        "@vue/compiler-core": "3.2.2",
+        "@vue/compiler-dom": "3.2.2",
+        "@vue/compiler-ssr": "3.2.2",
+        "@vue/shared": "3.2.2",
         "consolidate": "^0.16.0",
         "estree-walker": "^2.0.1",
         "hash-sum": "^2.0.0",
@@ -6213,12 +6254,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.1.tgz",
-      "integrity": "sha512-6YAOtQunuEyYlVSjK1F7a7BXi7rxVfiTiJ0Ro7eq0q0MNCFV9Z+sN68lfa/E4ABVb0ledEY/Rt8kL23nwCoTCQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.2.tgz",
+      "integrity": "sha512-rVl1agMFhdEN3Go0bCriXo+3cysxKIuRP0yh1Wd8ysRrKfAmokyDhUA8PrGSq2Ymj/LdZTh+4OKfj3p2+C+hlA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/compiler-dom": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -6329,48 +6370,48 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.1.tgz",
-      "integrity": "sha512-4Lja2KmyiKvuraDed6dXK2A6+r/7x7xGDA7vVR2Aqc8hQVu0+FWeVX+IBfiVOSpbZXFlHLNmCBFkbuWLQSlgxg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.2.tgz",
+      "integrity": "sha512-IHjhtmrhK6dzacj/EnLQDWOaA3HuzzVk6w84qgV8EpS4uWGIJXiRalMRg6XvGW2ykJvIl3pLsF0aBFlTMRiLOA==",
       "dependencies": {
-        "@vue/shared": "3.2.1"
+        "@vue/shared": "3.2.2"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.1.tgz",
-      "integrity": "sha512-IsgelRM/5hYeRhz5+ECi66XvYDdjG2t4lARjHvCXw5s9Q4N6uIbjLMwtLzAWRxYf3/y258BrD+ehxAi943ScJg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.2.tgz",
+      "integrity": "sha512-/aUk1+GO/VPX0oVxhbzSWE1zrf3/wGCsO1ALNisVokYftKqfqLDjbJHE6mrI2hx3MiuwbHrWjJClkGUVTIOPEQ==",
       "dependencies": {
-        "@vue/reactivity": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/reactivity": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.1.tgz",
-      "integrity": "sha512-bUAHUSe49A5wYdHQ8wsLU1CMPXaG2fRuv2661mx/6Q9+20QxglT3ss8ZeL6AVRu16JNJMcdvTTsNpbnMbVc/lQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.2.tgz",
+      "integrity": "sha512-1Le/NpCfawCOfePfJezvWUF+oCVLU8N+IHN4oFDOxRe6/PgHNJ+yT+YdxFifBfI+TIAoXI/9PsnqzmJZV+xsmw==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.1",
-        "@vue/shared": "3.2.1",
+        "@vue/runtime-core": "3.2.2",
+        "@vue/shared": "3.2.2",
         "csstype": "^2.6.8"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.1.tgz",
-      "integrity": "sha512-Zphh7jjysefw4c4mqy2gDlg5W1MYpYuXPlbv2qnjr4IQHjR/FXQfrqo7U858SOCGXL7sXvx025/BstefP4WBTg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.2.tgz",
+      "integrity": "sha512-o2EcPOeDfXvSK85OhdUWVUYumFW57+MwGFCszOqka2EFpOQVrzvUtYeF6KN2kCuAxexnuVQYtIDQwPZRchXSnQ==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/compiler-ssr": "3.2.2",
+        "@vue/shared": "3.2.2"
       },
       "peerDependencies": {
-        "vue": "3.2.1"
+        "vue": "3.2.2"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.1.tgz",
-      "integrity": "sha512-INN92dVBNgd0TW9BqfQQKx/HWGCHhUUbAV5EZ5FgSCiEdwuZsJbGt1mdnaD9IxGhpiyOjP2ClxGG8SFp7ELcWg=="
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.2.tgz",
+      "integrity": "sha512-dvYb318tk9uOzHtSaT3WII/HscQSIRzoCZ5GyxEb3JlkEXASpAUAQwKnvSe2CudnF8XHFRTB7VITWSnWNLZUtA=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.0.0-rc.12",
@@ -8273,9 +8314,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001249",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001249.tgz",
-      "integrity": "sha512-vcX4U8lwVXPdqzPWi6cAJ3FnQaqXbBqy/GZseKNQzRj37J7qZdGcBtxq/QLFNLLlfsoXLUdHw8Iwenri86Tagw==",
+      "version": "1.0.30001251",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz",
+      "integrity": "sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -8360,6 +8401,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz",
+      "integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA=="
+    },
     "node_modules/check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -8923,9 +8969,9 @@
       }
     },
     "node_modules/colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+      "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
       "dev": true
     },
     "node_modules/combined-stream": {
@@ -10602,9 +10648,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.801",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.801.tgz",
-      "integrity": "sha512-xapG8ekC+IAHtJrGBMQSImNuN+dm+zl7UP1YbhvTkwQn8zf/yYuoxfTSAEiJ9VDD+kjvXaAhNDPSxJ+VImtAJA==",
+      "version": "1.3.803",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.803.tgz",
+      "integrity": "sha512-tmRK9qB8Zs8eLMtTBp+w2zVS9MUe62gQQQHjYdAc5Zljam3ZIokNb+vZLPRz9RCREp6EFRwyhOFwbt1fEriQ2Q==",
       "dev": true
     },
     "node_modules/elegant-spinner": {
@@ -13595,10 +13641,13 @@
       "dev": true
     },
     "node_modules/is-bigint": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.3.tgz",
-      "integrity": "sha512-ZU538ajmYJmzysE5yU4Y7uIrPQ2j704u+hXFiIPQExpqzzUbpe5jCPdTfmz7jXRxZdvjY3KZ3ZNenoXQovX+Dg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
       "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -19398,9 +19447,9 @@
       "optional": true
     },
     "node_modules/nanoid": {
-      "version": "3.1.23",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
+      "version": "3.1.25",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
+      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -19829,9 +19878,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "1.1.73",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
-      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
+      "version": "1.1.74",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.74.tgz",
+      "integrity": "sha512-caJBVempXZPepZoZAPCWRTNxYQ+xtG/KAi4ozTA5A+nJ7IU+kLQCbqaUjb5Rwy14M9upBWiQ4NutcmW04LJSRw==",
       "dev": true
     },
     "node_modules/node-status-codes": {
@@ -24878,9 +24927,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
       "dev": true
     },
     "node_modules/tsutils": {
@@ -25429,13 +25478,13 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.1.tgz",
-      "integrity": "sha512-0jhXluF5mzTAK5bXw/8yq4McvsI8HwEWI4cnQwJeN8NYGRbwh9wwuE4FNv1Kej9pxBB5ajTNsWr0M6DPs5EJZg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.2.tgz",
+      "integrity": "sha512-D/LuzAV30CgNJYGyNheE/VUs5N4toL2IgmS6c9qeOxvyh0xyn4exyRqizpXIrsvfx34zG9x5gCI2tdRHCGvF9w==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.1",
-        "@vue/runtime-dom": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/compiler-dom": "3.2.2",
+        "@vue/runtime-dom": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -27927,14 +27976,14 @@
       }
     },
     "@babel/helpers": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz",
-      "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==",
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.3.tgz",
+      "integrity": "sha512-HwJiz52XaS96lX+28Tnbu31VeFSQJGOeKHJeaEPQlTl7PnlhFElWPj8tUXtqFIzeN86XxXoBr+WFAyK2PPVz6g==",
       "dev": true,
       "requires": {
         "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.8",
-        "@babel/types": "^7.14.8"
+        "@babel/traverse": "^7.15.0",
+        "@babel/types": "^7.15.0"
       }
     },
     "@babel/highlight": {
@@ -27949,9 +27998,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.15.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.2.tgz",
-      "integrity": "sha512-bMJXql1Ss8lFnvr11TZDH4ArtwlAS5NG9qBmdiFW2UHHm6MVoR+GDc5XE2b9K938cyjc9O6/+vjjcffLDtfuDg=="
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.3.tgz",
+      "integrity": "sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA=="
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
       "version": "7.14.5",
@@ -28327,9 +28376,9 @@
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
-      "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz",
+      "integrity": "sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -28718,9 +28767,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-      "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
+      "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
       "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
@@ -28773,6 +28822,23 @@
         "minimist": "^1.2.0"
       }
     },
+    "@coreui/chartjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@coreui/chartjs/-/chartjs-3.0.0.tgz",
+      "integrity": "sha512-udbvSxanTNltv94lqTMW8bLRXTtzk9G2SrmFdM/7HH+JSaLX2wdQpZ4VIJhyOCRGLCSKHktl29BnW1/uXQecAg==",
+      "requires": {
+        "@coreui/coreui": "4.0.0",
+        "chart.js": "^3.4.0"
+      },
+      "dependencies": {
+        "@coreui/coreui": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-4.0.0.tgz",
+          "integrity": "sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==",
+          "requires": {}
+        }
+      }
+    },
     "@coreui/coreui": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-4.0.1.tgz",
@@ -28790,10 +28856,15 @@
       "integrity": "sha512-U2Wf4W/FeMsXjnTmi1MHenhOarycshkfwFeQHZtm07eQNB7pifryMpwjFX9MJcV1rmg4wvL9Ks1+hDDDJQdHjg==",
       "requires": {}
     },
+    "@coreui/utils": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@coreui/utils/-/utils-1.3.1.tgz",
+      "integrity": "sha512-WuWHX7bg89cJH34TWVsLe9RsxzBhTApj+X2Ja19xhjcpxt5Gv11Ozm+fwYt6DD7DgncTvpwYrMcnNlpp701UOg=="
+    },
     "@coreui/vue": {
-      "version": "4.0.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/@coreui/vue/-/vue-4.0.0-alpha.1.tgz",
-      "integrity": "sha512-7LjbYEKwnN1x2vQvwkHyypP+7LUhHHJCmw2U6ILljVhb/ONY/+7+9dM1AbejMsbeZ3IIAzUe56Uta+lfGveQow==",
+      "version": "4.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@coreui/vue/-/vue-4.0.0-alpha.2.tgz",
+      "integrity": "sha512-h/mrYa4gEHtnMbZyyfjyBuN160T4vjTJLSDKcGNu+wjCzVsZN/vSNbOP9QRk428ySfIFB+tmzSImSrHMx0O0kw==",
       "requires": {
         "@coreui/coreui": "^4.0.1",
         "@coreui/icons": "^2.0.1",
@@ -28804,15 +28875,25 @@
       },
       "dependencies": {
         "@coreui/icons-vue": {
-          "version": "2.0.0-alpha.1",
-          "resolved": "https://registry.npmjs.org/@coreui/icons-vue/-/icons-vue-2.0.0-alpha.1.tgz",
-          "integrity": "sha512-jhs21oLa7t4oqHjldnJeEmLTt9kVbZrbSbPV0/2z7MIUl9vTlmWZDX8jg9vCErs/4BTb/xPCG/vDJ8jGoEvccw==",
+          "version": "2.0.0-alpha.2",
+          "resolved": "https://registry.npmjs.org/@coreui/icons-vue/-/icons-vue-2.0.0-alpha.2.tgz",
+          "integrity": "sha512-r4WfLSqJasFAqTHPluq1An/dRj6+FKtiPfCugmVKZNiVVk4lxk2qMZffZb5tb148vYlK+QMKnXnVZfBdCveaFA==",
           "requires": {
             "vue": "^3.0.10"
           }
         }
       }
     },
+    "@coreui/vue-chartjs": {
+      "version": "2.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@coreui/vue-chartjs/-/vue-chartjs-2.0.0-alpha.0.tgz",
+      "integrity": "sha512-A9Z5uooElEyQPyn+GX0/my9OUMxtf8K5S+75ONTVc/m02YWE93UHZl1cEtbo+ooqyNiKHkGGL+iYGFUnpHQLrQ==",
+      "requires": {
+        "@coreui/chartjs": "^3.0.0",
+        "chart.js": "^3.4.1",
+        "vue": "^3.0.10"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -30840,9 +30921,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "16.4.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.13.tgz",
-      "integrity": "sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg==",
+      "version": "16.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.6.0.tgz",
+      "integrity": "sha512-OyiZPohMMjZEYqcVo/UJ04GyAxXOJEZO/FpzyXxcH4r/ArrVoXHf4MbUrkLp0Tz7/p1mMKpo5zJ6ZHl8XBNthQ==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -32300,13 +32381,13 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.1.tgz",
-      "integrity": "sha512-UEJf2ZGww5wGVdrWIXIZo04KdJFGPmI2bHRUsBZ3AdyCAqJ5ykRXKOBn1OR1hvA2YzimudOEyHM+DpbBv91Kww==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.2.tgz",
+      "integrity": "sha512-QhCI0ZU5nAR0LMcLgzW3v75374tIrHGp8XG5CzJS7Nsy+iuignbE4MZ2XJfh5TGIrtpuzfWA4eTIfukZf/cRdg==",
       "requires": {
         "@babel/parser": "^7.12.0",
         "@babel/types": "^7.12.0",
-        "@vue/shared": "3.2.1",
+        "@vue/shared": "3.2.2",
         "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       },
@@ -32319,27 +32400,27 @@
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.1.tgz",
-      "integrity": "sha512-tXg8tkPb3j54zNfWqoao9T1JI41yWPz8TROzmif/QNNA46eq8/SRuRsBd36i47GWaz7mh+yg3vOJ87/YBjcMyQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.2.tgz",
+      "integrity": "sha512-ggcc+NV/ENIE0Uc3TxVE/sKrhYVpLepMAAmEiQ047332mbKOvUkowz4TTFZ+YkgOIuBOPP0XpCxmCMg7p874mA==",
       "requires": {
-        "@vue/compiler-core": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/compiler-core": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.1.tgz",
-      "integrity": "sha512-fVLdme5RZVkBt+jxv2LCSRM72o4FX7BR2eu2FpjjEi1kEtUMKBDnjKwGWy7TyhTju0t0CocctyoM+G56vH7NpQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.2.tgz",
+      "integrity": "sha512-hrtqpQ5L6IPn5v7yVRo7uvLcQxv0z1+KBjZBWMBOcrXz4t+PKUxU/SWd6Tl9T8FDmYlunzKUh6lcx+2CLo6f5A==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.13.9",
         "@babel/types": "^7.13.0",
         "@types/estree": "^0.0.48",
-        "@vue/compiler-core": "3.2.1",
-        "@vue/compiler-dom": "3.2.1",
-        "@vue/compiler-ssr": "3.2.1",
-        "@vue/shared": "3.2.1",
+        "@vue/compiler-core": "3.2.2",
+        "@vue/compiler-dom": "3.2.2",
+        "@vue/compiler-ssr": "3.2.2",
+        "@vue/shared": "3.2.2",
         "consolidate": "^0.16.0",
         "estree-walker": "^2.0.1",
         "hash-sum": "^2.0.0",
@@ -32431,12 +32512,12 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.1.tgz",
-      "integrity": "sha512-6YAOtQunuEyYlVSjK1F7a7BXi7rxVfiTiJ0Ro7eq0q0MNCFV9Z+sN68lfa/E4ABVb0ledEY/Rt8kL23nwCoTCQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.2.tgz",
+      "integrity": "sha512-rVl1agMFhdEN3Go0bCriXo+3cysxKIuRP0yh1Wd8ysRrKfAmokyDhUA8PrGSq2Ymj/LdZTh+4OKfj3p2+C+hlA==",
       "requires": {
-        "@vue/compiler-dom": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/compiler-dom": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "@vue/component-compiler-utils": {
@@ -32524,45 +32605,45 @@
       "requires": {}
     },
     "@vue/reactivity": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.1.tgz",
-      "integrity": "sha512-4Lja2KmyiKvuraDed6dXK2A6+r/7x7xGDA7vVR2Aqc8hQVu0+FWeVX+IBfiVOSpbZXFlHLNmCBFkbuWLQSlgxg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.2.tgz",
+      "integrity": "sha512-IHjhtmrhK6dzacj/EnLQDWOaA3HuzzVk6w84qgV8EpS4uWGIJXiRalMRg6XvGW2ykJvIl3pLsF0aBFlTMRiLOA==",
       "requires": {
-        "@vue/shared": "3.2.1"
+        "@vue/shared": "3.2.2"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.1.tgz",
-      "integrity": "sha512-IsgelRM/5hYeRhz5+ECi66XvYDdjG2t4lARjHvCXw5s9Q4N6uIbjLMwtLzAWRxYf3/y258BrD+ehxAi943ScJg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.2.tgz",
+      "integrity": "sha512-/aUk1+GO/VPX0oVxhbzSWE1zrf3/wGCsO1ALNisVokYftKqfqLDjbJHE6mrI2hx3MiuwbHrWjJClkGUVTIOPEQ==",
       "requires": {
-        "@vue/reactivity": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/reactivity": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.1.tgz",
-      "integrity": "sha512-bUAHUSe49A5wYdHQ8wsLU1CMPXaG2fRuv2661mx/6Q9+20QxglT3ss8ZeL6AVRu16JNJMcdvTTsNpbnMbVc/lQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.2.tgz",
+      "integrity": "sha512-1Le/NpCfawCOfePfJezvWUF+oCVLU8N+IHN4oFDOxRe6/PgHNJ+yT+YdxFifBfI+TIAoXI/9PsnqzmJZV+xsmw==",
       "requires": {
-        "@vue/runtime-core": "3.2.1",
-        "@vue/shared": "3.2.1",
+        "@vue/runtime-core": "3.2.2",
+        "@vue/shared": "3.2.2",
         "csstype": "^2.6.8"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.1.tgz",
-      "integrity": "sha512-Zphh7jjysefw4c4mqy2gDlg5W1MYpYuXPlbv2qnjr4IQHjR/FXQfrqo7U858SOCGXL7sXvx025/BstefP4WBTg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.2.tgz",
+      "integrity": "sha512-o2EcPOeDfXvSK85OhdUWVUYumFW57+MwGFCszOqka2EFpOQVrzvUtYeF6KN2kCuAxexnuVQYtIDQwPZRchXSnQ==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/compiler-ssr": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "@vue/shared": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.1.tgz",
-      "integrity": "sha512-INN92dVBNgd0TW9BqfQQKx/HWGCHhUUbAV5EZ5FgSCiEdwuZsJbGt1mdnaD9IxGhpiyOjP2ClxGG8SFp7ELcWg=="
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.2.tgz",
+      "integrity": "sha512-dvYb318tk9uOzHtSaT3WII/HscQSIRzoCZ5GyxEb3JlkEXASpAUAQwKnvSe2CudnF8XHFRTB7VITWSnWNLZUtA=="
     },
     "@vue/test-utils": {
       "version": "2.0.0-rc.12",
@@ -34158,9 +34239,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001249",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001249.tgz",
-      "integrity": "sha512-vcX4U8lwVXPdqzPWi6cAJ3FnQaqXbBqy/GZseKNQzRj37J7qZdGcBtxq/QLFNLLlfsoXLUdHw8Iwenri86Tagw==",
+      "version": "1.0.30001251",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz",
+      "integrity": "sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==",
       "dev": true
     },
     "capture-exit": {
@@ -34225,6 +34306,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz",
+      "integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA=="
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -34667,9 +34753,9 @@
       }
     },
     "colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+      "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
       "dev": true
     },
     "combined-stream": {
@@ -36026,9 +36112,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.801",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.801.tgz",
-      "integrity": "sha512-xapG8ekC+IAHtJrGBMQSImNuN+dm+zl7UP1YbhvTkwQn8zf/yYuoxfTSAEiJ9VDD+kjvXaAhNDPSxJ+VImtAJA==",
+      "version": "1.3.803",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.803.tgz",
+      "integrity": "sha512-tmRK9qB8Zs8eLMtTBp+w2zVS9MUe62gQQQHjYdAc5Zljam3ZIokNb+vZLPRz9RCREp6EFRwyhOFwbt1fEriQ2Q==",
       "dev": true
     },
     "elegant-spinner": {
@@ -38363,10 +38449,13 @@
       "dev": true
     },
     "is-bigint": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.3.tgz",
-      "integrity": "sha512-ZU538ajmYJmzysE5yU4Y7uIrPQ2j704u+hXFiIPQExpqzzUbpe5jCPdTfmz7jXRxZdvjY3KZ3ZNenoXQovX+Dg==",
-      "dev": true
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
     },
     "is-binary-path": {
       "version": "2.1.0",
@@ -43081,9 +43170,9 @@
       "optional": true
     },
     "nanoid": {
-      "version": "3.1.23",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
+      "version": "3.1.25",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
+      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
       "dev": true
     },
     "nanomatch": {
@@ -43425,9 +43514,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.73",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
-      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
+      "version": "1.1.74",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.74.tgz",
+      "integrity": "sha512-caJBVempXZPepZoZAPCWRTNxYQ+xtG/KAi4ozTA5A+nJ7IU+kLQCbqaUjb5Rwy14M9upBWiQ4NutcmW04LJSRw==",
       "dev": true
     },
     "node-status-codes": {
@@ -47539,9 +47628,9 @@
       }
     },
     "tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
       "dev": true
     },
     "tsutils": {
@@ -47983,13 +48072,13 @@
       "dev": true
     },
     "vue": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.1.tgz",
-      "integrity": "sha512-0jhXluF5mzTAK5bXw/8yq4McvsI8HwEWI4cnQwJeN8NYGRbwh9wwuE4FNv1Kej9pxBB5ajTNsWr0M6DPs5EJZg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.2.tgz",
+      "integrity": "sha512-D/LuzAV30CgNJYGyNheE/VUs5N4toL2IgmS6c9qeOxvyh0xyn4exyRqizpXIrsvfx34zG9x5gCI2tdRHCGvF9w==",
       "requires": {
-        "@vue/compiler-dom": "3.2.1",
-        "@vue/runtime-dom": "3.2.1",
-        "@vue/shared": "3.2.1"
+        "@vue/compiler-dom": "3.2.2",
+        "@vue/runtime-dom": "3.2.2",
+        "@vue/shared": "3.2.2"
       }
     },
     "vue-eslint-parser": {
diff --git a/package.json b/package.json
index 6c200478..2f5bbe2f 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,9 @@
     "@coreui/coreui": "^4.0.1",
     "@coreui/icons": "^2.0.1",
     "@coreui/icons-vue": "2.0.0-alpha.0",
-    "@coreui/vue": "^4.0.0-alpha.0",
+    "@coreui/utils": "^1.3.1",
+    "@coreui/vue": "^4.0.0-alpha.2",
+    "@coreui/vue-chartjs": "2.0.0-alpha.0",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
diff --git a/src/_nav.js b/src/_nav.js
index d2014d2d..6cdca215 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -147,12 +147,12 @@ export default [
 //      }
     ]
   },
-  // {
-  //   _name: 'CNavItem',
-  //   name: 'Charts',
-  //   to: '/charts',
-  //   icon: 'cil-chart-pie'
-  // },
+  {
+    _name: 'CNavItem',
+    name: 'Charts',
+    to: '/charts',
+    icon: 'cil-chart-pie'
+  },
   {
    _name: 'CNavGroup',
     name: 'Icons',
diff --git a/src/router/index.js b/src/router/index.js
index 93ed9427..0432da2f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -168,6 +168,11 @@ const routes = [
           */ 
         ]
       },
+      {
+        path: "/charts",
+        name: "Charts",
+        component: () => import("@/views/charts/Charts.vue"),
+      },
       {
         path: "/icons",
         name: "Icons",
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index d9f2c72a..9a54da32 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,5 +1,493 @@
 <template>
-  <div class="dashboard">
-    <h1>Dashboard</h1>
+  <div>
+  <CRow>
+  <CCol md="12">
+    <CCard>
+      <CCardBody>
+        <CRow>
+          <CCol sm="5">
+            <h4 id="traffic" class="card-title mb-0">Traffic</h4>
+            <div class="small text-muted">November 2017</div>
+          </CCol>
+          <CCol sm="7" class="d-none d-md-block">
+            <CButton color="primary" class="float-right">
+              <CIcon name="cil-cloud-download"/>
+            </CButton>
+            <CButtonGroup class="float-right mr-3">
+              <CButton
+                color="outline-secondary"
+                v-for="(value, key) in ['Day', 'Month', 'Year']"
+                :key="key"
+                class="mx-0"
+                :pressed="value === selected ? true : false"
+                @click="selected = value"
+              >
+                {{value}}
+              </CButton>
+            </CButtonGroup>
+          </CCol>
+        </CRow>
+        <CRow>
+          <MainChartExample style="height:300px;max-height:300px;margin-top:40px;"/>
+        </CRow>
+      </CCardBody>
+    </CCard>
+</CCol>
+<CCol md="12" class="mt-4">
+    <CCard>
+      <CCardBody>
+        <CRow class="text-center">
+          <CCol md sm="12" class="mb-sm-2 mb-0">
+            <div class="text-muted">Visits</div>
+            <strong>29.703 Users (40%)</strong>
+            <CProgress
+              class="progress-xs mt-2"
+              :precision="1"
+              color="success"
+              :value="40"
+            />
+          </CCol>
+          <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
+            <div class="text-muted">Unique</div>
+            <strong>24.093 Users (20%)</strong>
+            <CProgress
+              class="progress-xs mt-2"
+              :precision="1"
+              color="info"
+              :value="20"
+            />
+          </CCol>
+          <CCol md sm="12" class="mb-sm-2 mb-0">
+            <div class="text-muted">Pageviews</div>
+            <strong>78.706 Views (60%)</strong>
+            <CProgress
+              class="progress-xs mt-2"
+              :precision="1"
+              color="warning"
+              :value="60"
+            />
+          </CCol>
+          <CCol md sm="12" class="mb-sm-2 mb-0">
+            <div class="text-muted">New Users</div>
+            <strong>22.123 Users (80%)</strong>
+            <CProgress
+              class="progress-xs mt-2"
+              :precision="1"
+              color="danger"
+              :value="80"
+            />
+          </CCol>
+          <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
+            <div class="text-muted">Bounce Rate</div>
+            <strong>Average Rate (40.15%)</strong>
+            <CProgress
+              class="progress-xs mt-2"
+              :precision="1"
+              :value="40"
+            />
+          </CCol>
+        </CRow>
+      </CCardBody>
+    </CCard>
+</CCol>
+    </CRow>
+    <CRow>
+      <CCol md="12">
+        <CCard>
+          <CCardHeader>
+            Traffic &amp; Sales
+          </CCardHeader>
+          <CCardBody>
+            <CRow>
+              <CCol sm="12" lg="6">
+                <CRow>
+                  <CCol sm="6">
+                    <CCallout color="info">
+                      <small class="text-muted">New Clients</small><br>
+                      <strong class="h4">9,123</strong>
+                    </CCallout>
+                  </CCol>
+                  <CCol sm="6">
+                    <CCallout color="danger">
+                      <small class="text-muted">Recurring Clients</small><br>
+                      <strong class="h4">22,643</strong>
+                    </CCallout>
+                  </CCol>
+                </CRow>
+                <hr class="mt-0">
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Monday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      color="info"
+                      :value="34"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      color="danger"
+                      :value="78"
+                    />
+                  </div>
+                </div>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Tuesday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="56"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="94"
+                      color="danger"
+                    />
+                  </div>
+                </div>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Wednesday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="12"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="67"
+                      color="danger"
+                    />
+                  </div>
+                </div>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Thursday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="43"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="91"
+                      color="danger"
+                    />
+                  </div>
+                </div>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Friday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="22"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="73"
+                      color="danger"
+                    />
+                  </div>
+                </div>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Saturday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="53"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="82"
+                      color="danger"
+                    />
+                  </div>
+                </div>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Sunday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="9"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="69"
+                      color="danger"
+                    />
+                  </div>
+                </div>
+                <div class="legend text-center">
+                  <small>
+                    <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
+                    New clients
+                    &nbsp;&nbsp;
+                    <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
+                    Recurring clients
+                  </small>
+                </div>
+              </CCol>
+              <CCol sm="12" lg="6">
+                <CRow>
+                  <CCol sm="6">
+                    <CCallout color="warning">
+                      <small class="text-muted">Pageviews</small><br>
+                      <strong class="h4">78,623</strong>
+                    </CCallout>
+                  </CCol>
+                  <CCol sm="6">
+                    <CCallout color="success">
+                      <small class="text-muted">Organic</small><br>
+                      <strong class="h4">49,123</strong>
+                    </CCallout>
+                  </CCol>
+                </CRow>
+                <hr class="mt-0">
+                <ul class="horizontal-bars type-2">
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon name="cil-user" class="progress-group-icon"/>
+                      <span class="title">Male</span>
+                      <span class="ml-auto font-weight-bold">43%</span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="43"
+                        color="warning"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group mb-5">
+                    <div class="progress-group-header">
+                      <CIcon name="cil-user-female" class="progress-group-icon"/>
+                      <span class="title">Female</span>
+                      <span class="ml-auto font-weight-bold">37%</span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="37"
+                        color="warning"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon name="cil-globe-alt" class="progress-group-icon"/>
+                      <span class="title">Organic Search</span>
+                      <span class="ml-auto font-weight-bold">
+                        191,235 <span class="text-muted small">(56%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="56"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="cib-facebook"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">Facebook</span>
+                      <span class="ml-auto font-weight-bold">
+                        51,223 <span class="text-muted small">(15%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="15"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="cib-twitter"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">Twitter</span>
+                      <span class="ml-auto font-weight-bold">
+                        37,564 <span class="text-muted small">(11%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="11"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="cib-linkedin"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">LinkedIn</span>
+                      <span class="ml-auto font-weight-bold">
+                        27,319 <span class="text-muted small">&nbsp;(8%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="8"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="divider text-center">
+                    <CButton color="link" size="sm" class="text-muted">
+                      <CIcon name="cil-options"/>
+                    </CButton>
+                  </div>
+                </ul>
+              </CCol>
+            </CRow>
+            <br/>
+            <CDataTable
+              class="mb-0 table-outline"
+              hover
+              :items="tableItems"
+              :fields="tableFields"
+              head-color="light"
+              no-sorting
+            >
+            </CDataTable>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
+
+<script>
+import MainChartExample from './charts/MainChartExample'
+export default {
+  name: 'Dashboard',
+  components: {
+    MainChartExample,
+  },
+  data () {
+    return {
+      selected: 'Month',
+      tableItems: [
+        {
+          avatar: { url: 'img/avatars/1.jpg', status: 'success' },
+          user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'USA', flag: 'cif-us' },
+          usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
+          activity: '10 sec ago'
+        },
+        {
+          avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
+          user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
+          country: { name: 'Brazil', flag: 'cif-br' },
+          usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          payment: { name: 'Visa', icon: 'cib-cc-visa' },
+          activity: '5 minutes ago'
+        },
+        {
+          avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
+          user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'India', flag: 'cif-in' },
+          usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          payment: { name: 'Stripe', icon: 'cib-stripe' },
+          activity: '1 hour ago'
+        },
+        {
+          avatar: { url: 'img/avatars/4.jpg', status: '' },
+          user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'France', flag: 'cif-fr' },
+          usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          payment: { name: 'PayPal', icon: 'cib-paypal' },
+          activity: 'Last month'
+        },
+        {
+          avatar: { url: 'img/avatars/5.jpg', status: 'success' },
+          user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'Spain', flag: 'cif-es' },
+          usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          payment: { name: 'Google Wallet', icon: 'cib-google-pay' },
+          activity: 'Last week'
+        },
+        {
+          avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
+          user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'Poland', flag: 'cif-pl' },
+          usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          payment: { name: 'Amex', icon: 'cib-cc-amex' },
+          activity: 'Last week'
+        }
+      ],
+      tableFields: [
+        { key: 'avatar', label: '', _classes: 'text-center' },
+        { key: 'user' },
+        { key: 'country', _classes: 'text-center' },
+        { key: 'usage' },
+        { key: 'payment', label: 'Payment method', _classes: 'text-center' },
+        { key: 'activity' },
+      ]
+    }
+  },
+  methods: {
+    color (value) {
+      let $color
+      if (value <= 25) {
+        $color = 'info'
+      } else if (value > 25 && value <= 50) {
+        $color = 'success'
+      } else if (value > 50 && value <= 75) {
+        $color = 'warning'
+      } else if (value > 75 && value <= 100) {
+        $color = 'danger'
+      }
+      return $color
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue
index cf31189c..70b92639 100644
--- a/src/views/Widgets.vue
+++ b/src/views/Widgets.vue
@@ -6,8 +6,142 @@
           <strong>Vue Widgets</strong>
         </CCardHeader>
         <CCardBody>
+          <h4 class="mt-4">Simple Widgets</h4>
           <Example href="">
+            <CRow>
+              <CCol class="mt-4" md="4">
+                <CWidgetSimple title="Lorem" value="3,141"/>
+              </CCol>
+              <CCol class="mt-4" md="4">
+                <CWidgetSimple title="Ipsum" value="5,926"/>
+              </CCol>
+              <CCol class="mt-4" md="4">
+                <CWidgetSimple title="Dolor" value="5,358"/>
+              </CCol>
+            </CRow>
+            <CRow>
+              <CCol class="mt-4" md="6">
+                <CWidgetSimple title="Lorem" value="3,141"/>
+              </CCol>
+              <CCol class="mt-4" md="6">
+                <CWidgetSimple title="Ipsum" value="5,926"/>
+              </CCol>
+            </CRow>
+          </Example>
 
+          <h4 class="mt-4">Brand Widgets</h4>
+          <Example href="">
+            <CRow>
+              <CCol class="mt-4" md="4">
+                <CWidgetBrand color="primary" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
+              </CCol>
+              <CCol class="mt-4" md="4">
+                <CWidgetBrand color="success" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
+              </CCol>
+              <CCol class="mt-4" md="4">
+                <CWidgetBrand color="danger" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
+              </CCol>
+            </CRow>
+            <CRow>
+              <CCol class="mt-4" md="6">
+                <CWidgetBrand color="info" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
+              </CCol>
+              <CCol class="mt-4" md="6">
+                <CWidgetBrand color="secondary" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
+              </CCol>
+            </CRow>
+          </Example>
+
+          <h4 class="mt-4">Dropdown Widgets</h4>
+          <Example href="">
+            <CRow>
+              <CCol class="mt-4" v-for="(item, index) in ['primary', 'success', 'danger', 'info', 'secondary']" :md="index<3 ? 4 : 6">
+                <CWidgetDropdown :color="item">
+                  <template #value>
+                    3,141
+                  </template>
+                  <template #change>
+                    Dolor emit
+                  </template>
+                  <template #title>
+                    <p>Lorem ipsum</p>
+                  </template>
+                  <template #action>
+                    <CDropdown>
+                      <CDropdownToggle :color="item" class="text-white">Dropdown Button</CDropdownToggle>
+                      <CDropdownMenu>
+                          <CDropdownItem href="#">Action</CDropdownItem>
+                          <CDropdownItem href="#">Another action</CDropdownItem>
+                          <CDropdownItem href="#">Something else here</CDropdownItem>
+                      </CDropdownMenu>
+                    </CDropdown>
+                  </template>
+                </CWidgetDropdown>
+              </CCol>
+            </CRow>
+          </Example>
+
+          <h4 class="mt-4">Brand Widgets</h4>
+          <Example href="">
+            <CRow>
+              <CCol class="mt-4" md="4">
+                <CWidgetIcon color="primary" title="Lorem ipsum" value="3,141">
+                  <template #default>
+                    <CIcon name="cil-puzzle" size="lg"/>
+                  </template>
+                </CWidgetIcon>
+              </CCol>
+              <CCol class="mt-4" md="4">
+                <CWidgetIcon color="success" title="Lorem ipsum" value="5,926">
+                  <template #default>
+                    <CIcon name="cil-speedometer" size="lg"/>
+                  </template>
+                </CWidgetIcon>
+              </CCol>
+              <CCol class="mt-4" md="4">
+                <CWidgetIcon color="danger" title="Lorem ipsum" value="5,358">
+                  <template #default>
+                    <CIcon name="cil-cursor" size="lg"/>
+                  </template>
+                </CWidgetIcon>
+              </CCol>
+              <CCol class="mt-4" md="6">
+                <CWidgetIcon color="info" title="Lorem ipsum" value="3,141">
+                  <template #default>
+                    <CIcon name="cil-drop" size="lg"/>
+                  </template>
+                </CWidgetIcon>
+              </CCol>
+              <CCol class="mt-4" md="6">
+                <CWidgetIcon color="secondary" title="Lorem ipsum" value="5,926">
+                  <template #default>
+                    <CIcon name="cil-pencil" size="lg"/>
+                  </template>
+                </CWidgetIcon>
+              </CCol>
+            </CRow>
+          </Example>
+
+          <h4 class="mt-4">Progress Widgets</h4>
+          <Example href="">
+            <CRow>
+              <CCol class="mt-4" v-for="(item, index) in ['primary', 'success', 'danger', 'info', 'secondary']" :md="index<3 ? 4 : 6">
+                <CWidgetProgress :color="item" progressValue="70" text="Lorem ipsum" title="Dolor cet emit" value="3,141" inverse/>
+              </CCol>
+            </CRow>
+          </Example>
+
+          <h4 class="mt-4">Progress Icon Widgets</h4>
+          <Example href="">
+            <CRow>
+              <CCol class="mt-4" v-for="(item, index) in widgetProgressIconItems" :md="index<3 ? 4 : 6">
+                <CWidgetProgressIcon :color="item.color" progressValue="70" text="Lorem ipsum" title="Dolor cet emit" value="3,141" inverse>
+                  <template #icon>
+                    <CIcon :name="item.icon" size="lg"/>
+                  </template>
+                </CWidgetProgressIcon>
+              </CCol>
+            </CRow>
           </Example>
         </CCardBody>
       </CCard>
@@ -18,5 +152,16 @@
 <script>
 export default {
   name: "Widgets",
+  data: function(){
+    return {
+      widgetProgressIconItems: [
+        { color: 'primary', icon: 'cil-puzzle'}, 
+        { color: 'success', icon: 'cil-speedometer'}, 
+        { color: 'danger', icon: 'cil-cursor'}, 
+        { color: 'info', icon: 'cil-drop'}, 
+        { color: 'secondary', icon: 'cil-pencil'}, 
+      ]
+    }
+  }
 };
 </script>
\ No newline at end of file
diff --git a/src/views/charts/CChartBarExample.vue b/src/views/charts/CChartBarExample.vue
new file mode 100644
index 00000000..32da4e44
--- /dev/null
+++ b/src/views/charts/CChartBarExample.vue
@@ -0,0 +1,27 @@
+<template>
+  <CChartBar
+    :data="defaultData"
+  />
+</template>
+
+<script>
+import { CChartBar } from '@coreui/vue-chartjs'
+export default {
+  name: 'CChartBarExample',
+  components: { CChartBar },
+  computed: {
+    defaultData () {
+      return {
+        labels: ['months'],
+        datasets: [
+          {
+            label: 'GitHub Commits',
+            backgroundColor: '#f87979',
+            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/CChartBarSimple.vue b/src/views/charts/CChartBarSimple.vue
new file mode 100644
index 00000000..53f8ec43
--- /dev/null
+++ b/src/views/charts/CChartBarSimple.vue
@@ -0,0 +1,65 @@
+<template>
+  <CChartBar
+    :data="computedData"
+  />
+</template>
+
+<script>
+import { CChartBar } from '@coreui/vue-chartjs'
+import { getColor, deepObjectsMerge } from '@coreui/utils/src'
+export default {
+  name: 'CChartBarSimple',
+  components: { CChartBar },
+  props: {
+    ...CChartBar.props,
+    backgroundColor: {
+      type: String,
+      default: '#f87979'
+    },
+    pointHoverBackgroundColor: String,
+    dataPoints: {
+      type: Array,
+      default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    label: {
+      type: String,
+      default: 'Sales'
+    },
+    pointed: Boolean
+  },
+  computed: {
+    defaultOptions () {
+      return {
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            display: false
+          }],
+          yAxes: [{
+            display: false
+          }]
+        }
+      }
+    },
+    computedData () {
+      return {
+        labels: ['4','5','6','7','8','9','10','11','12','13','14','15'],
+        datasets: [
+          {
+            data: this.dataPoints,
+            backgroundColor: getColor(this.backgroundColor),
+            pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
+            label: this.label,
+            barPercentage: 0.5,
+            categoryPercentage: 1
+          }
+        ],
+        options: this.defaultOptions
+      }     
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/CChartDoughnutExample.vue b/src/views/charts/CChartDoughnutExample.vue
new file mode 100644
index 00000000..a79aceed
--- /dev/null
+++ b/src/views/charts/CChartDoughnutExample.vue
@@ -0,0 +1,31 @@
+<template>
+  <CChartDoughnut
+    :data="defaultData"
+  />
+</template>
+
+<script>
+import { CChartDoughnut } from '@coreui/vue-chartjs'
+export default {
+  name: 'CChartDoughnutExample',
+  components: { CChartDoughnut },
+  computed: {
+    defaultData () {
+      return {
+        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+        datasets: [
+          {
+            backgroundColor: [
+              '#41B883',
+              '#E46651',
+              '#00D8FF',
+              '#DD1B16'
+            ],
+            data: [40, 20, 80, 10]
+          }
+        ],
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/CChartLineExample.vue b/src/views/charts/CChartLineExample.vue
new file mode 100644
index 00000000..f8e030ea
--- /dev/null
+++ b/src/views/charts/CChartLineExample.vue
@@ -0,0 +1,30 @@
+<template>
+  <CChartLine :data="defaultData"/>
+</template>
+
+<script>
+import { CChartLine } from '@coreui/vue-chartjs'
+export default {
+  name: 'CChartLineExample',
+  components: { CChartLine },
+  computed: {
+    defaultData () {
+      return {
+        labels: ['months', 'a', 'b', 'c', 'd'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: 'rgb(228,102,81,0.9)',
+            data: [30, 39, 10, 50, 30, 70, 35]
+          },
+          {
+            label: 'Data Two',
+            backgroundColor: 'rgb(0,216,255,0.9)',
+            data: [39, 80, 40, 35, 40, 20, 45]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/CChartLineSimple.vue b/src/views/charts/CChartLineSimple.vue
new file mode 100644
index 00000000..6d7954c0
--- /dev/null
+++ b/src/views/charts/CChartLineSimple.vue
@@ -0,0 +1,83 @@
+<template>
+  <CChartLine
+    :data="computedData"
+  />
+</template>
+
+<script>
+import { CChartLine } from '@coreui/vue-chartjs'
+import { getColor, deepObjectsMerge } from '@coreui/utils/src'
+export default {
+  name: 'CChartLineSimple',
+  components: { CChartLine },
+  props: {
+    ...CChartLine.props,
+    borderColor: {
+      type: String,
+      default: 'rgba(255,255,255,.55)'
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    dataPoints: {
+      type: Array,
+      default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    label: {
+      type: String,
+      default: 'Sales'
+    },
+    pointed: {
+      type: Boolean,
+      default: true
+    },
+    pointHoverBackgroundColor: String
+  },
+  computed: {
+    pointHoverColor () {
+      if (this.pointHoverBackgroundColor) {
+        return this.pointHoverBackgroundColor
+      } else if (this.backgroundColor !== 'transparent') {
+        return this.backgroundColor
+      }
+      return this.borderColor
+    },
+    computedData () {
+      return {
+        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
+        datasets: [
+          {
+            data: this.dataPoints,
+            borderColor: getColor(this.borderColor),
+            backgroundColor: getColor(this.backgroundColor),
+            pointBackgroundColor: getColor(this.pointHoverColor),
+            pointHoverBackgroundColor: getColor(this.pointHoverColor),
+            label: this.label
+          }
+        ],
+        options: {
+          scales: {
+            xAxes: [{
+              display: false
+            }],
+            yAxes: [{
+              display: false
+            }]
+          },
+          elements: {
+            line: {
+              borderWidth: 2
+            },
+            point: {
+              radius: 0,
+              hitRadius: 10,
+              hoverRadius: 4
+            }
+          }
+        }
+      }
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/CChartLineSimplePointed.vue b/src/views/charts/CChartLineSimplePointed.vue
new file mode 100644
index 00000000..0268a9ea
--- /dev/null
+++ b/src/views/charts/CChartLineSimplePointed.vue
@@ -0,0 +1,100 @@
+<template>
+  <CChartLine
+    :data="computedData"
+  />
+</template>
+
+<script>
+import { CChartLine } from '@coreui/vue-chartjs'
+import { getColor, deepObjectsMerge } from '@coreui/utils/src'
+export default {
+  name: 'CChartLineSimplePointed',
+  components: { CChartLine },
+  props: {
+    ...CChartLine.props,
+    borderColor: {
+      type: String,
+      default: 'rgba(255,255,255,.55)'
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    dataPoints: {
+      type: Array,
+      default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    label: {
+      type: String,
+      default: 'Sales'
+    },
+    pointed: {
+      type: Boolean,
+      default: true
+    },
+    pointHoverBackgroundColor: String
+  },
+  computed: {
+    pointHoverColor () {
+      if (this.pointHoverBackgroundColor) {
+        return this.pointHoverBackgroundColor
+      } else if (this.backgroundColor !== 'transparent') {
+        return this.backgroundColor
+      }
+      return this.borderColor
+    },
+    computedData () {
+      return {
+        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
+        datasets: [
+          {
+            data: this.dataPoints,
+            borderColor: getColor(this.borderColor),
+            backgroundColor: getColor(this.backgroundColor),
+            pointBackgroundColor: getColor(this.pointHoverColor),
+            pointHoverBackgroundColor: getColor(this.pointHoverColor),
+            label: this.label
+          }
+        ],
+        options: {
+          scales: {
+            xAxes: [
+              {
+                offset: true,
+                gridLines: {
+                  color: 'transparent',
+                  zeroLineColor: 'transparent'
+                },
+                ticks: {
+                  fontSize: 2,
+                  fontColor: 'transparent'
+                }
+              }
+            ],
+            yAxes: [
+              {
+                display: false,
+                ticks: {
+                  display: false,
+                  min: Math.min.apply(Math, this.dataPoints) - 5,
+                  max: Math.max.apply(Math, this.dataPoints) + 5
+                }
+              }
+            ]
+          },
+          elements: {
+            line: {
+              borderWidth: 1
+            },
+            point: {
+              radius: 4,
+              hitRadius: 10,
+              hoverRadius: 4
+            }
+          }
+        }
+      }
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/CChartPieExample.vue b/src/views/charts/CChartPieExample.vue
new file mode 100644
index 00000000..a17f9fd3
--- /dev/null
+++ b/src/views/charts/CChartPieExample.vue
@@ -0,0 +1,31 @@
+<template>
+  <CChartPie
+    :data="defaultData"
+  />
+</template>
+
+<script>
+import { CChartPie } from '@coreui/vue-chartjs'
+export default {
+  name: 'CChartPieExample',
+  components: { CChartPie },
+  computed: {
+    defaultData () {
+      return {
+        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+        datasets: [
+          {
+            backgroundColor: [
+              '#41B883',
+              '#E46651',
+              '#00D8FF',
+              '#DD1B16'
+            ],
+            data: [40, 20, 80, 10]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/CChartPolarAreaExample.vue b/src/views/charts/CChartPolarAreaExample.vue
new file mode 100644
index 00000000..dbffa994
--- /dev/null
+++ b/src/views/charts/CChartPolarAreaExample.vue
@@ -0,0 +1,43 @@
+<template>
+  <CChartPolarArea
+    :data="defaultData"
+  />
+</template>
+
+<script>
+import { CChartPolarArea } from '@coreui/vue-chartjs'
+export default {
+  name: 'CChartPolarAreaExample',
+  components: { CChartPolarArea },
+  computed: {
+    defaultData () {
+      return {
+        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+        datasets: [
+          {
+            label: 'My First dataset',
+            backgroundColor: 'rgba(179,181,198,0.5)',
+            pointBackgroundColor: 'rgba(179,181,198,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+            pointHoverBorderColor: 'rgba(179,181,198,1)',
+            data: [65, 59, 90, 81, 56, 55, 40]
+          },
+          {
+            label: 'My Second dataset',
+            backgroundColor: 'rgba(255,99,132,0.5)',
+            pointBackgroundColor: 'rgba(255,99,132,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+            pointHoverBorderColor: 'rgba(255,99,132,1)',
+            data: [28, 48, 40, 19, 96, 27, 100]
+          }
+        ],
+        options: {
+          aspectRatio: 1.5
+        }
+      }
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/CChartRadarExample.vue b/src/views/charts/CChartRadarExample.vue
new file mode 100644
index 00000000..8413bd25
--- /dev/null
+++ b/src/views/charts/CChartRadarExample.vue
@@ -0,0 +1,47 @@
+<template>
+  <CChartRadar
+    :data="defaultData"
+  />
+</template>
+
+<script>
+import { CChartRadar } from '@coreui/vue-chartjs'
+export default {
+  name: 'CChartRadarExample',
+  components: { CChartRadar },
+  computed: {
+    defaultData () {
+      return {
+        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+        datasets: [
+          {
+            label: '2020',
+            backgroundColor: 'rgba(179,181,198,0.2)',
+            borderColor: 'rgba(179,181,198,1)',
+            pointBackgroundColor: 'rgba(179,181,198,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: 'rgba(179,181,198,1)',
+            tooltipLabelColor: 'rgba(179,181,198,1)',
+            data: [65, 59, 90, 81, 56, 55, 40]
+          },
+          {
+            label: '2021',
+            backgroundColor: 'rgba(255,99,132,0.2)',
+            borderColor: 'rgba(255,99,132,1)',
+            pointBackgroundColor: 'rgba(255,99,132,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: 'rgba(255,99,132,1)',
+            tooltipLabelColor: 'rgba(255,99,132,1)',
+            data: [28, 48, 40, 19, 96, 27, 100]
+          }
+        ],
+        options:  {
+          aspectRatio: 1.5
+        }
+      }
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/Charts.vue b/src/views/charts/Charts.vue
new file mode 100644
index 00000000..90492dac
--- /dev/null
+++ b/src/views/charts/Charts.vue
@@ -0,0 +1,76 @@
+<template>
+  <CRow>
+    <CCol md="6" class="mt-4">
+      <CCard>
+        <CCardHeader>
+          Line Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartLineExample/>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol md="6" class="mt-4">
+      <CCard>
+        <CCardHeader>Bar Chart</CCardHeader>
+        <CCardBody><CChartBarExample/></CCardBody>
+      </CCard>
+    </CCol>
+    <CCol md="6" class="mt-4">
+      <CCard>
+        <CCardHeader>Doughnut Chart</CCardHeader>
+        <CCardBody><CChartDoughnutExample/></CCardBody>
+      </CCard>
+    </CCol>
+    <CCol md="6" class="mt-4">
+      <CCard>
+        <CCardHeader>Radar Chart</CCardHeader>
+        <CCardBody><CChartRadarExample/></CCardBody>
+      </CCard>
+    </CCol>
+    <CCol md="6" class="mt-4">
+      <CCard>
+         <CCardHeader>Pie Chart</CCardHeader>
+        <CCardBody><CChartPieExample/></CCardBody>
+      </CCard>
+    </CCol>
+    <CCol md="6" class="mt-4">
+      <CCard>
+        <CCardHeader>Polar Area Chart</CCardHeader>
+        <CCardBody><CChartPolarAreaExample/></CCardBody>
+      </CCard>
+    </CCol>
+    <CCol md="6" class="mt-4">
+      <CCard>
+        <CCardHeader>Simple line chart</CCardHeader>
+        <CCardBody>
+          <CChartLineSimple border-color="success" labels="months"/>
+        </CCardBody>        
+      </CCard>
+    </CCol>
+    <!--
+    <CCol md="6" class="mt-4">
+      <CCard>
+        <CCardHeader>Simple pointed chart</CCardHeader>
+        <CCardBody><CChartLineSimplePointed :pointed="true" border-color="warning"/></CCardBody>
+      </CCard>
+    </CCol>
+    -->
+    <CCol md="6" class="mt-4">
+      <CCard>
+        <CCardHeader>Simple bar chart</CCardHeader>
+        <CCardBody><CChartBarSimple background-color="danger"/></CCardBody>        
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+import * as Charts from './index.js'
+export default {
+  name: 'Charts',
+  components: {
+    ...Charts
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/charts/MainChartExample.vue b/src/views/charts/MainChartExample.vue
new file mode 100644
index 00000000..c52e670d
--- /dev/null
+++ b/src/views/charts/MainChartExample.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="chart-container" style="position: relative; height:100px;">
+    <CChartLine :data="defaultData" />
+  </div>
+</template>
+
+<script>
+import { CChartLine } from '@coreui/vue-chartjs'
+import { getStyle, hexToRgba } from '@coreui/utils/src'
+function random (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+export default {
+  name: 'MainChartExample',
+  components: {
+    CChartLine
+  },
+  computed: {
+    defaultData () {
+      return {
+        labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        datasets: this.defaultDatasets,
+        options: this.defaultOptions
+      }
+    },
+    defaultDatasets () {
+      const brandSuccess = getStyle('success2') || '#4dbd74'
+      const brandInfo = getStyle('info') || '#20a8d8'
+      const brandDanger = getStyle('danger') || '#f86c6b'
+      let elements = 27
+      const data1 = []
+      const data2 = []
+      const data3 = []
+      for (let i = 0; i <= elements; i++) {
+        data1.push(random(50, 200))
+        data2.push(random(80, 100))
+        data3.push(65)
+      }
+      return [
+        {
+          label: 'My First dataset',
+          backgroundColor: hexToRgba(brandInfo, 10),
+          borderColor: brandInfo,
+          pointHoverBackgroundColor: brandInfo,
+          borderWidth: 2,
+          data: data1
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'transparent',
+          borderColor: brandSuccess,
+          pointHoverBackgroundColor: brandSuccess,
+          borderWidth: 2,
+          data: data2
+        },
+        {
+          label: 'My Third dataset',
+          backgroundColor: 'transparent',
+          borderColor: brandDanger,
+          pointHoverBackgroundColor: brandDanger,
+          borderWidth: 1,
+          borderDash: [8, 5],
+          data: data3
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+        maintainAspectRatio: false,
+        aspectRatio: 30,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            gridLines: {
+              drawOnChartArea: false
+            }
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: true,
+              maxTicksLimit: 5,
+              stepSize: Math.ceil(250 / 5),
+              max: 250
+            },
+            gridLines: {
+              display: true
+            }
+          }]
+        },
+        elements: {
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4,
+            hoverBorderWidth: 3
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.chart-wrapper canvas{
+  max-height: 288px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/charts/index.js b/src/views/charts/index.js
new file mode 100644
index 00000000..76497d5f
--- /dev/null
+++ b/src/views/charts/index.js
@@ -0,0 +1,21 @@
+import CChartLineSimple from './CChartLineSimple'
+import CChartLineSimplePointed from './CChartLineSimplePointed'
+import CChartBarSimple from './CChartBarSimple'
+import CChartLineExample from './CChartLineExample'
+import CChartBarExample from './CChartBarExample'
+import CChartDoughnutExample from './CChartDoughnutExample'
+import CChartRadarExample from './CChartRadarExample'
+import CChartPieExample from './CChartPieExample'
+import CChartPolarAreaExample from './CChartPolarAreaExample'
+
+export {
+  CChartLineSimple,
+  CChartLineSimplePointed,
+  CChartBarSimple,
+  CChartLineExample,
+  CChartBarExample,
+  CChartDoughnutExample,
+  CChartRadarExample,
+  CChartPieExample,
+  CChartPolarAreaExample
+}
\ No newline at end of file