replace apexcharts with 'ye olde divs

ysechynskyy · Jun 25, 2022 · faf00d4 · faf00d4
1 parent f364e07
commit faf00d4
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 63 deletions.
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -5,5 +5,6 @@ services:
     command: npm run serve
     volumes:
       - ./src/:/app/
-    # environment: 
-    #   - PASSWORD=p
+    environment: 
+      # - PASSWORD=p
+      - WG_HOST=192.168.1.233
diff --git a/src/www/index.html b/src/www/index.html
@@ -78,9 +78,47 @@ <h2 class="text-sm text-gray-400 mb-10"></h2>
               class="relative overflow-hidden border-b border-gray-100 border-solid">
 
               <!-- Chart -->
-              <div class="absolute z-0 bottom-0 left-0 right-0" style="width: 100%; height: 30%;">
-                <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.chartSeries">
-                </apexchart>
+              <div class="absolute z-0 bottom-0 left-0 right-0" style="width: 100%; height: 20%;">
+                <!-- Bar -->
+                <div v-for="(_, index) in client.transferTxHistory" :style="{
+                    display: 'inline-flex',
+                    alignItems: 'flex-end',
+                    width: '2%', // 1/100th of client.transferTxHistory.length
+                    height: '100%',
+                    padding: '0 3px',
+                    boxSizing: 'border-box',
+                    fontSize: 0,
+                  }">
+
+                  <!-- TX -->
+                  <div :style="{
+                    minHeight: '0px',
+                    minWidth: '2px',
+                    maxWidth: '4px',
+                    width: '50%',
+                    marginRight: '1px',
+                    height: Math.round((client.transferTxHistory[index]/client.transferMax)*100) + '%',
+                    background: client.hoverTx
+                      ? '#992922'
+                      : '#F3F4F6',
+                    transition: 'all 0.2s',
+                    borderRadius: '2px 2px 0 0',
+                  }"></div>
+
+                  <!-- RX -->
+                  <div :style="{
+                    minHeight: '0px',
+                    minWidth: '2px',
+                    maxWidth: '4px',
+                    width: '50%',
+                    height: Math.round((client.transferRxHistory[index]/client.transferMax)*100) + '%',
+                    background: client.hoverRx
+                    ? '#992922'
+                    : '#F0F1F3',
+                    transition: 'all 0.2s',
+                    borderRadius: '2px 2px 0 0',
+                  }"></div>
+                </div>
               </div>
 
               <div class="relative p-5 z-10 flex flex-row">
@@ -155,7 +193,10 @@ <h2 class="text-sm text-gray-400 mb-10"></h2>
                     </span>
 
                     <!-- Transfer TX -->
-                    <span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)">
+                    <span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)"
+                      @mouseover="client.hoverTx = clientsPersist[client.id].hoverTx = true;"
+                      @mouseleave="client.hoverTx = clientsPersist[client.id].hoverTx = false;"
+                      style="cursor: default;">
                       ·
                       <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                         fill="currentColor">
@@ -167,7 +208,10 @@ <h2 class="text-sm text-gray-400 mb-10"></h2>
                     </span>
 
                     <!-- Transfer RX -->
-                    <span v-if="client.transferRx" :title="'Total Upload: ' + bytes(client.transferRx)">
+                    <span v-if="client.transferRx" :title="'Total Upload: ' + bytes(client.transferRx)"
+                      @mouseover="client.hoverRx = clientsPersist[client.id].hoverRx = true;"
+                      @mouseleave="client.hoverRx = clientsPersist[client.id].hoverRx = false;"
+                      style="cursor: default;">
                       ·
                       <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                         fill="currentColor">
@@ -475,8 +519,6 @@ <h1 class="text-4xl font-medium my-16 text-gray-700 text-center">WireGuard</h1>
   </div>
 
   <script src="./js/vendor/vue.min.js"></script>
-  <script src="./js/vendor/apexcharts.min.js"></script>
-  <script src="./js/vendor/vue-apexcharts.min.js"></script>
   <script src="./js/vendor/md5.min.js"></script>
   <script src="./js/vendor/timeago.min.js"></script>
   <script src="./js/api.js"></script>

diff --git a/src/www/js/app.js b/src/www/js/app.js
@@ -25,9 +25,6 @@ function bytes(bytes, decimals, kib, maxunit) {
 
 new Vue({
   el: '#app',
-  components: {
-    apexchart: VueApexCharts,
-  },
   data: {
     authenticated: null,
     authenticating: false,
@@ -124,7 +121,9 @@ new Vue({
         minute: 'numeric',
       }).format(value);
     },
-    async refresh() {
+    async refresh({
+      updateCharts = false,
+    } = {}) {
       if (!this.authenticated) return;
 
       const clients = await this.api.getClients();
@@ -135,44 +134,38 @@ new Vue({
 
         if (!this.clientsPersist[client.id]) {
           this.clientsPersist[client.id] = {};
-          this.clientsPersist[client.id].transferRxHistory = Array(100).fill(0);
+          this.clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
           this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
-          this.clientsPersist[client.id].transferTxHistory = Array(100).fill(0);
+          this.clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
           this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
-
-          this.clientsPersist[client.id].chartOptions = {
-            ...this.chartOptions,
-            yaxis: {
-              ...this.chartOptions.yaxis,
-              max: () => this.clientsPersist[client.id].chartMax,
-            },
-          };
         }
 
-        this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious;
-        this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
-        this.clientsPersist[client.id].transferTxCurrent = client.transferTx - this.clientsPersist[client.id].transferTxPrevious;
-        this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
+        // Debug
+        // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
+        // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
 
-        this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent);
-        this.clientsPersist[client.id].transferRxHistory.shift();
+        if (updateCharts) {
+          this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious;
+          this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
+          this.clientsPersist[client.id].transferTxCurrent = client.transferTx - this.clientsPersist[client.id].transferTxPrevious;
+          this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
 
-        this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
-        this.clientsPersist[client.id].transferTxHistory.shift();
+          this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent);
+          this.clientsPersist[client.id].transferRxHistory.shift();
 
-        this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
+          this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
+          this.clientsPersist[client.id].transferTxHistory.shift();
+        }
 
         client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
         client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
 
-        client.chartOptions = this.clientsPersist[client.id].chartOptions;
-        client.chartSeries = [{
-          name: 'tx',
-          data: this.clientsPersist[client.id].transferTxHistory,
-        }, {
-          name: 'rx',
-          data: this.clientsPersist[client.id].transferRxHistory,
-        }];
+        client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory;
+        client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory;
+        client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
+
+        client.hoverTx = this.clientsPersist[client.id].hoverTx;
+        client.hoverRx = this.clientsPersist[client.id].hoverRx;
 
         return client;
       });
@@ -259,7 +252,9 @@ new Vue({
       .then(session => {
         this.authenticated = session.authenticated;
         this.requiresPassword = session.requiresPassword;
-        this.refresh().catch(err => {
+        this.refresh({
+          updateCharts: true,
+        }).catch(err => {
           alert(err.message || err.toString());
         });
       })
@@ -268,7 +263,9 @@ new Vue({
       });
 
     setInterval(() => {
-      this.refresh().catch(console.error);
+      this.refresh({
+        updateCharts: true,
+      }).catch(console.error);
     }, 1000);
 
     Promise.resolve().then(async () => {

diff --git a/src/www/js/vendor/apexcharts.min.js b/src/www/js/vendor/apexcharts.min.js
diff --git a/src/www/js/vendor/vue-apexcharts.min.js b/src/www/js/vendor/vue-apexcharts.min.js