From b521c3cef2fe092b4214058e0b092211709f60c1 Mon Sep 17 00:00:00 2001 From: Daniil Isakov <12859907+oplexz@users.noreply.github.com> Date: Sat, 13 Jan 2024 01:15:56 +0300 Subject: [PATCH] Add apexcharts --- webui/package-lock.json | 115 +++++++++++++++++++++++++++++++++++++++- webui/package.json | 4 +- webui/src/App.vue | 40 ++++++++++---- 3 files changed, 147 insertions(+), 12 deletions(-) diff --git a/webui/package-lock.json b/webui/package-lock.json index 69fb46cb..c2eb424f 100644 --- a/webui/package-lock.json +++ b/webui/package-lock.json @@ -8,8 +8,10 @@ "name": "webui", "version": "0.0.0", "dependencies": { + "apexcharts": "^3.45.1", "crypto-js": "^4.2.0", - "vue": "^3.3.11" + "vue": "^3.3.11", + "vue3-apexcharts": "^1.4.4" }, "devDependencies": { "@vitejs/plugin-vue": "^4.5.2", @@ -797,6 +799,11 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.10.tgz", "integrity": "sha512-C0mIVhwW1xQLMFyqMJxnhq6fWyE02lCgcE+TDdtGpg6B3H6kh/0YcqS54qYc76UJNlWegf3VgsLqgk6D9hBmzQ==" }, + "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/ansi-regex": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", @@ -840,6 +847,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/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -2074,6 +2095,89 @@ "url": "https://github.com/sponsors/ljharb" } }, + "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/tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", @@ -2261,6 +2365,15 @@ } } }, + "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" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/webui/package.json b/webui/package.json index 5624aa62..6a904cb9 100644 --- a/webui/package.json +++ b/webui/package.json @@ -10,8 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "apexcharts": "^3.45.1", "crypto-js": "^4.2.0", - "vue": "^3.3.11" + "vue": "^3.3.11", + "vue3-apexcharts": "^1.4.4" }, "devDependencies": { "@vitejs/plugin-vue": "^4.5.2", diff --git a/webui/src/App.vue b/webui/src/App.vue index 2148341b..f98e0ef9 100644 --- a/webui/src/App.vue +++ b/webui/src/App.vue @@ -4,6 +4,7 @@ import sha256 from 'crypto-js/sha256'; import { useDateTime } from './composables/useDateTime'; import { useTimeAgo } from './composables/useTimeAgo'; +import { useBytes } from './composables/useBytes'; import UpdateNotification from './components/UpdateNotification.vue'; import ClientNewButton from './components/ClientNewButton.vue'; @@ -22,6 +23,7 @@ import IconClose from './components/icons/IconClose.vue'; import IconWarning from './components/icons/IconWarning.vue'; import IconAvatarDefault from './components/icons/IconAvatarDefault.vue'; import ClientTransfer from './components/ClientTransfer.vue'; +import VueApexCharts from 'vue3-apexcharts'; class API { async call({ method, path, body }) { @@ -341,6 +343,7 @@ export default { IconWarning, IconAvatarDefault, ClientTransfer, + apexchart: VueApexCharts, }, methods: { handleNewClient() { @@ -553,26 +556,43 @@ export default { class="relative overflow-hidden border-b last:border-b-0 border-gray-100 dark:border-neutral-600 border-solid" > - - +
- + type="bar" + :options="chartOptions" + :series="[ + { + name: 'Upload (TX)', + data: client.transferTxHistory, + }, + ]" + />
-
+
-
--> +