Add apexcharts

3 years ago · b521c3cef2
3 changed files with 147 additions and 12 deletions
--- 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",
--- 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",
--- 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"
            >
              <!-- Chart -->
-              <!-- FIXME: Not working yet -->
-              <!-- <div class="absolute z-0 bottom-0 left-0 right-0" style="top: 60%">
+              <!-- TODO: Individual bars are too wide -->
+              <div
+                class="absolute z-0 bottom-0 left-0 right-0"
+                style="top: 60%"
+              >
                <apexchart
                  width="100%"
                  height="100%"
-                  :options="client.chartOptions"
-                  :series="client.transferTxSeries"
-                >
-                </apexchart>
+                  type="bar"
+                  :options="chartOptions"
+                  :series="[
+                    {
+                      name: 'Upload (TX)',
+                      data: client.transferTxHistory,
+                    },
+                  ]"
+                />
              </div>
-              <div class="absolute z-0 top-0 left-0 right-0" style="bottom: 60%">
+              <div
+                class="absolute z-0 top-0 left-0 right-0"
+                style="bottom: 60%"
+              >
                <apexchart
                  width="100%"
                  height="100%"
-                  :options="client.chartOptions"
-                  :series="client.transferRxSeries"
+                  type="bar"
+                  :options="chartOptions"
+                  :series="[
+                    {
+                      name: 'Download (RX)',
+                      data: client.transferRxHistory,
+                    },
+                  ]"
                  style="transform: scaleY(-1)"
                >
                </apexchart>
-              </div> -->
+              </div>

              <div
                class="relative p-5 z-10 flex flex-col md:flex-row justify-between"