From 8645fc4c450a7f8bfe5db9914566ec03d1e802e1 Mon Sep 17 00:00:00 2001 From: Thanaphon Frappet Date: Tue, 4 Mar 2025 11:02:26 +0700 Subject: [PATCH] feat: add apex charts --- package.json | 2 ++ pnpm-lock.yaml | 78 ++++++++++++++++++++++++++++++++++++++++++ src/boot/components.ts | 2 ++ 3 files changed, 82 insertions(+) diff --git a/package.json b/package.json index bd2467ca..bdc29566 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@quasar/extras": "^1.16.12", "@tato30/vue-pdf": "^1.11.0", "@vuepic/vue-datepicker": "^8.8.1", + "apexcharts": "^4.5.0", "axios": "^1.7.4", "cropperjs": "^1.6.2", "keycloak-js": "^25.0.4", @@ -34,6 +35,7 @@ "udsv": "^0.6.0", "uuid": "^10.0.0", "vue": "^3.4.38", + "vue3-apexcharts": "^1.7.0", "vue-dragscroll": "^4.0.6", "vue-i18n": "^9.14.0", "vue-pdf": "^4.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4cba44ed..9543f9bc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@vuepic/vue-datepicker': specifier: ^8.8.1 version: 8.8.1(vue@3.4.38(typescript@5.5.4)) + apexcharts: + specifier: ^4.5.0 + version: 4.5.0 axios: specifier: ^1.7.4 version: 1.7.4 @@ -77,6 +80,9 @@ importers: vue-router: specifier: ^4.4.3 version: 4.4.3(vue@3.4.38(typescript@5.5.4)) + vue3-apexcharts: + specifier: ^1.7.0 + version: 1.8.0(apexcharts@4.5.0)(vue@3.4.38(typescript@5.5.4)) devDependencies: '@faker-js/faker': specifier: ^9.3.0 @@ -725,6 +731,31 @@ packages: '@socket.io/component-emitter@3.1.1': resolution: {integrity: sha512-dzJtaDAAoXx4GCOJpbB2eG/Qj8VDpdwkLsWGzGm+0L7E8/434RyMbAHmk9ubXWVAb9nXmc44jUf8GKqVDiKezg==} + '@svgdotjs/svg.draggable.js@3.0.6': + resolution: {integrity: sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==} + peerDependencies: + '@svgdotjs/svg.js': ^3.2.4 + + '@svgdotjs/svg.filter.js@3.0.9': + resolution: {integrity: sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==} + engines: {node: '>= 0.8.0'} + + '@svgdotjs/svg.js@3.2.4': + resolution: {integrity: sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==} + + '@svgdotjs/svg.resize.js@2.0.5': + resolution: {integrity: sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==} + engines: {node: '>= 14.18'} + peerDependencies: + '@svgdotjs/svg.js': ^3.2.4 + '@svgdotjs/svg.select.js': ^4.0.1 + + '@svgdotjs/svg.select.js@4.0.2': + resolution: {integrity: sha512-5gWdrvoQX3keo03SCmgaBbD+kFftq0F/f2bzCbNnpkkvW6tk4rl4MakORzFuNjvXPWwB4az9GwuvVxQVnjaK2g==} + engines: {node: '>= 14.18'} + peerDependencies: + '@svgdotjs/svg.js': ^3.2.4 + '@tato30/vue-pdf@1.11.0': resolution: {integrity: sha512-GQNfVqq8if6/tezgcW1E0iU7kO5VfzMihdU6sfRnw0ewDYcP43JFt3r2fmDggyAY5lu7ArEwCFvlWi7WbvleCw==} peerDependencies: @@ -979,6 +1010,9 @@ packages: '@xtuc/long@4.2.2': resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==} + '@yr/monotone-cubic-spline@1.0.3': + resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==} + abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} @@ -1052,6 +1086,9 @@ packages: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} engines: {node: '>= 8'} + apexcharts@4.5.0: + resolution: {integrity: sha512-E7ZkrVqPNBUWy/Rmg8DEIqHNBmElzICE/oxOX5Ekvs2ICQUOK/VkEkMH09JGJu+O/EA0NL31hxlmF+wrwrSLaQ==} + aproba@1.2.0: resolution: {integrity: sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==} @@ -3569,6 +3606,12 @@ packages: peerDependencies: vue: ^3.2.0 + vue3-apexcharts@1.8.0: + resolution: {integrity: sha512-5tSD4mXTBbIJ9ir+58qHE6oNtIe0RNgqIRYMKpcsIaxkKtwUww4JhvPkpUFlmiW4OJbbdklgjleXq1lfcM4gdA==} + peerDependencies: + apexcharts: '>=4.0.0' + vue: '>=3.0.0' + vue@3.4.38: resolution: {integrity: sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==} peerDependencies: @@ -4186,6 +4229,25 @@ snapshots: '@socket.io/component-emitter@3.1.1': {} + '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.4)': + dependencies: + '@svgdotjs/svg.js': 3.2.4 + + '@svgdotjs/svg.filter.js@3.0.9': + dependencies: + '@svgdotjs/svg.js': 3.2.4 + + '@svgdotjs/svg.js@3.2.4': {} + + '@svgdotjs/svg.resize.js@2.0.5(@svgdotjs/svg.js@3.2.4)(@svgdotjs/svg.select.js@4.0.2(@svgdotjs/svg.js@3.2.4))': + dependencies: + '@svgdotjs/svg.js': 3.2.4 + '@svgdotjs/svg.select.js': 4.0.2(@svgdotjs/svg.js@3.2.4) + + '@svgdotjs/svg.select.js@4.0.2(@svgdotjs/svg.js@3.2.4)': + dependencies: + '@svgdotjs/svg.js': 3.2.4 + '@tato30/vue-pdf@1.11.0(vue@3.4.38(typescript@5.5.4))': dependencies: pdfjs-dist: 4.5.136 @@ -4549,6 +4611,8 @@ snapshots: '@xtuc/long@4.2.2': {} + '@yr/monotone-cubic-spline@1.0.3': {} + abbrev@1.1.1: optional: true @@ -4625,6 +4689,15 @@ snapshots: normalize-path: 3.0.0 picomatch: 2.3.1 + apexcharts@4.5.0: + dependencies: + '@svgdotjs/svg.draggable.js': 3.0.6(@svgdotjs/svg.js@3.2.4) + '@svgdotjs/svg.filter.js': 3.0.9 + '@svgdotjs/svg.js': 3.2.4 + '@svgdotjs/svg.resize.js': 2.0.5(@svgdotjs/svg.js@3.2.4)(@svgdotjs/svg.select.js@4.0.2(@svgdotjs/svg.js@3.2.4)) + '@svgdotjs/svg.select.js': 4.0.2(@svgdotjs/svg.js@3.2.4) + '@yr/monotone-cubic-spline': 1.0.3 + aproba@1.2.0: {} aproba@2.0.0: @@ -7513,6 +7586,11 @@ snapshots: '@vue/devtools-api': 6.6.3 vue: 3.4.38(typescript@5.5.4) + vue3-apexcharts@1.8.0(apexcharts@4.5.0)(vue@3.4.38(typescript@5.5.4)): + dependencies: + apexcharts: 4.5.0 + vue: 3.4.38(typescript@5.5.4) + vue@3.4.38(typescript@5.5.4): dependencies: '@vue/compiler-dom': 3.4.38 diff --git a/src/boot/components.ts b/src/boot/components.ts index 0987be70..9983cfed 100644 --- a/src/boot/components.ts +++ b/src/boot/components.ts @@ -4,10 +4,12 @@ import '@vuepic/vue-datepicker/dist/main.css'; import GlobalDialog from 'components/GlobalDialog.vue'; import GlobalLoading from 'components/GlobalLoading.vue'; import VueDragscroll from 'vue-dragscroll'; +import VueApexCharts from 'vue3-apexcharts'; export default boot(({ app }) => { app.component('global-dialog', GlobalDialog); app.component('global-loading', GlobalLoading); app.component('VueDatePicker', VueDatePicker); + app.component('VueApexCharts', VueApexCharts); app.use(VueDragscroll); });