improve chart

hardin90 · Jun 12, 2022 · a72029d · a72029d
1 parent 274aeb2
commit a72029d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git a/src/www/index.html b/src/www/index.html
@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="apple-mobile-web-app-capable" content="yes">
 </head>
-  
+
 <style>
   [v-cloak] {
     display: none;
@@ -78,13 +78,8 @@ <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="top: 60%;">
-                <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferTxSeries">
-                </apexchart>
-              </div>
-              <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"
-                  style="transform: scaleY(-1);">
+              <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>
 
@@ -160,7 +155,7 @@ <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)">
                       ·
                       <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                         fill="currentColor">
@@ -488,4 +483,4 @@ <h1 class="text-4xl font-medium my-16 text-gray-700 text-center">WireGuard</h1>
   <script src="./js/app.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/src/www/js/app.js b/src/www/js/app.js
@@ -51,31 +51,36 @@ new Vue({
     chartOptions: {
       chart: {
         background: 'transparent',
-        type: 'area',
+        type: 'bar',
+        stacked: false,
         toolbar: {
           show: false,
         },
+        animations: {
+          enabled: false,
+        },
       },
-      fill: {
-        type: 'gradient',
-      },
-      colors: ['#CCCCCC'],
+      colors: [
+        '#DDDDDD', // rx
+        '#EEEEEE', // tx
+      ],
       dataLabels: {
         enabled: false,
       },
-      stroke: {
-        curve: 'smooth',
-        width: 0,
+      plotOptions: {
+        bar: {
+          horizontal: false,
+        },
       },
       xaxis: {
         labels: {
           show: false,
         },
         axisTicks: {
-          show: false,
+          show: true,
         },
         axisBorder: {
-          show: false,
+          show: true,
         },
       },
       yaxis: {
@@ -130,9 +135,9 @@ new Vue({
 
         if (!this.clientsPersist[client.id]) {
           this.clientsPersist[client.id] = {};
-          this.clientsPersist[client.id].transferRxHistory = Array(20).fill(0);
+          this.clientsPersist[client.id].transferRxHistory = Array(100).fill(0);
           this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
-          this.clientsPersist[client.id].transferTxHistory = Array(20).fill(0);
+          this.clientsPersist[client.id].transferTxHistory = Array(100).fill(0);
           this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
 
           this.clientsPersist[client.id].chartOptions = {
@@ -155,22 +160,20 @@ new Vue({
         this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
         this.clientsPersist[client.id].transferTxHistory.shift();
 
+        this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
+
         client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
-        client.transferTxSeries = [{
+        client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
+
+        client.chartOptions = this.clientsPersist[client.id].chartOptions;
+        client.chartSeries = [{
           name: 'tx',
           data: this.clientsPersist[client.id].transferTxHistory,
-        }];
-
-        client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
-        client.transferRxSeries = [{
+        }, {
           name: 'rx',
           data: this.clientsPersist[client.id].transferRxHistory,
         }];
 
-        this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
-
-        client.chartOptions = this.clientsPersist[client.id].chartOptions;
-
         return client;
       });
     },