From f1cca326b864d5d870a414b43a7804e2d39559f2 Mon Sep 17 00:00:00 2001 From: Daneric Date: Wed, 10 Jan 2024 15:24:59 +0100 Subject: [PATCH] feat: admin index page & charts --- src/package-lock.json | 115 +++++++++++++++++++++++- src/package.json | 4 +- src/resources/js/app.js | 2 + src/resources/vue/pages/admin/index.vue | 52 +++++++++++ 4 files changed, 171 insertions(+), 2 deletions(-) create mode 100644 src/resources/vue/pages/admin/index.vue diff --git a/src/package-lock.json b/src/package-lock.json index d7c127b..22468d6 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -7,9 +7,11 @@ "dependencies": { "@inertiajs/vue3": "^1.0.14", "@vitejs/plugin-vue": "^4.5.0", + "apexcharts": "^3.45.1", "pinia": "^2.1.7", "vue": "^3.3.8", - "vue-toastification": "^2.0.0-rc.5" + "vue-toastification": "^2.0.0-rc.5", + "vue3-apexcharts": "^1.4.4" }, "devDependencies": { "axios": "^1.6.1", @@ -507,6 +509,11 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz", "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==" }, + "node_modules/@yr/monotone-cubic-spline": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz", + "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==" + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -520,6 +527,20 @@ "node": ">= 8" } }, + "node_modules/apexcharts": { + "version": "3.45.1", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.45.1.tgz", + "integrity": "sha512-pPjj/SA6dfPvR/IKRZF0STdfBGpBh3WRt7K0DFuW9P8erypYkX17EHu3/molPRfo2zSiQwTVpshHC5ncysqfkA==", + "dependencies": { + "@yr/monotone-cubic-spline": "^1.0.3", + "svg.draggable.js": "^2.2.2", + "svg.easing.js": "^2.0.0", + "svg.filter.js": "^2.0.2", + "svg.pathmorphing.js": "^0.1.3", + "svg.resize.js": "^1.4.3", + "svg.select.js": "^3.0.1" + } + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -1163,6 +1184,89 @@ "node": ">=0.10.0" } }, + "node_modules/svg.draggable.js": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", + "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", + "dependencies": { + "svg.js": "^2.0.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.easing.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", + "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==", + "dependencies": { + "svg.js": ">=2.3.x" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.filter.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", + "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==", + "dependencies": { + "svg.js": "^2.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", + "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==" + }, + "node_modules/svg.pathmorphing.js": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", + "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", + "dependencies": { + "svg.js": "^2.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.resize.js": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", + "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", + "dependencies": { + "svg.js": "^2.6.5", + "svg.select.js": "^2.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.resize.js/node_modules/svg.select.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", + "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", + "dependencies": { + "svg.js": "^2.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.select.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", + "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", + "dependencies": { + "svg.js": "^2.6.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -1266,6 +1370,15 @@ "peerDependencies": { "vue": "^3.0.2" } + }, + "node_modules/vue3-apexcharts": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.4.4.tgz", + "integrity": "sha512-TH89uZrxGjaDvkaYAISvj8+k6Bf1rUKFillc8oJirs5XZEPiwM1ELKZQ786wz0rfPqkSHHny2lqqUCK7Rw+LcQ==", + "peerDependencies": { + "apexcharts": "> 3.0.0", + "vue": "> 3.0.0" + } } } } diff --git a/src/package.json b/src/package.json index 3e16a40..3dec16a 100644 --- a/src/package.json +++ b/src/package.json @@ -14,8 +14,10 @@ "dependencies": { "@inertiajs/vue3": "^1.0.14", "@vitejs/plugin-vue": "^4.5.0", + "apexcharts": "^3.45.1", "pinia": "^2.1.7", "vue": "^3.3.8", - "vue-toastification": "^2.0.0-rc.5" + "vue-toastification": "^2.0.0-rc.5", + "vue3-apexcharts": "^1.4.4" } } diff --git a/src/resources/js/app.js b/src/resources/js/app.js index 559286d..6f2edcd 100644 --- a/src/resources/js/app.js +++ b/src/resources/js/app.js @@ -6,6 +6,7 @@ import ToastPlugin from "vue-toastification"; import "vue-toastification/dist/index.css"; import '../vue/scss/global.scss' import '../vue/scss/variables.scss' +import VueApexCharts from "vue3-apexcharts"; createInertiaApp({ resolve: name => { @@ -17,6 +18,7 @@ createInertiaApp({ .use(plugin) .use(createPinia()) .use(ToastPlugin) + .use(VueApexCharts) .mount(el) }, }) diff --git a/src/resources/vue/pages/admin/index.vue b/src/resources/vue/pages/admin/index.vue new file mode 100644 index 0000000..eed7296 --- /dev/null +++ b/src/resources/vue/pages/admin/index.vue @@ -0,0 +1,52 @@ + + + + +