perf: all-time ratio card (#777)

src/components/Core/StringCard.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-card flat color="secondary" class="mr-2 ml-2">
+    <v-layout row wrap class="pa-3 mx-auto">
+      <v-flex md6>
+        <div style="margin-top: 6px" :class="color + '--text'" data-testid="StringCard-label">
+          {{ label }}
+        </div>
+      </v-flex>
+      <v-flex md6>
+        <span data-testid="StringCard-Wrapper" :class="color + '--text title'">
+          <span data-testid="StringCard-value"> {{ value }} </span>
+        </span>
+      </v-flex>
+    </v-layout>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'StringCard',
+  props: ['color', 'label', 'value']
+}
+</script>

src/components/Navbar/TransferStats.vue

@@ -13,17 +13,19 @@
     </v-tooltip>
     <StorageCard class="mb-4 mt-4" :label="titleCase($t('downloaded'))" color="download" :value="getDownload" />
     <StorageCard :label="titleCase($t('uploaded'))" color="upload" :value="getUpload" />
+    <StringCard v-if="!isSession" class="mt-4" :label="titleCase($t('ratio'))" color="ratio" :value="getRatio" />
   </div>
 </template>
 
 <script>
 import { mdiInformationOutline } from '@mdi/js'
 import StorageCard from '../Core/StorageCard.vue'
+import StringCard from "../Core/StringCard.vue";
 import { titleCase } from '@/filters'
 
 export default {
   name: 'TransferStats',
-  components: { StorageCard },
+  components: { StorageCard, StringCard },
   props: ['status', 'session'],
   data: () => ({
     mdiInformationOutline
@@ -37,6 +39,9 @@ export default {
     },
     getUpload() {
       return this.isSession ? this.status.sessionUploaded : this.status.alltimeUploaded
+    },
+    getRatio() {
+      return this.isSession ? "" : this.status.alltimeRatio
     }
   },
   methods: {

src/models/Status.ts

@@ -6,6 +6,7 @@ import type { Optional } from '@/global'
 export default class Status {
   alltimeDownloaded: number = 0
   alltimeUploaded: number = 0
+  alltimeRatio: string = ""
   altSpeed: boolean = false
   dlspeed: number = 0
   dlspeedRaw: number = 0
@@ -21,6 +22,7 @@ export default class Status {
 
     this.alltimeDownloaded = in_state?.alltime_dl || previous.alltimeDownloaded
     this.alltimeUploaded = in_state?.alltime_ul || previous.alltimeUploaded
+    this.alltimeRatio = in_state?.global_ratio || previous.alltimeRatio
     this.altSpeed = in_state?.use_alt_speed_limits !== undefined ? in_state.use_alt_speed_limits : previous.altSpeed
     this.dlspeed = in_state?.dl_info_speed || 0
     this.dlspeedRaw = this.formatSpeed(in_state?.dl_info_speed || 0)

src/plugins/vuetify.ts

@@ -19,6 +19,7 @@ const variables = {
   secondary: '#3e556d',
   download: '#64CEAA',
   upload: '#00b3fa',
+  ratio: '#00b2f8',
   // Torrent status colors
   'torrent-done': '#16573e',
   'torrent-downloading': '#5bb974',

src/styles/colors.scss

@@ -3,6 +3,7 @@ $primary: #35495e;
 $secondary: #3e556d;
 $download: #64ceaa;
 $upload: #00b3fa;
+$ratio: #00b2f8;
 // Torrent status colors
 $torrent-done: #16573e;
 $torrent-downloading: #5bb974;
@@ -21,6 +22,7 @@ $torrent-unknown: #000000;
   secondary: $secondary;
   download: $download;
   upload: $upload;
+  ratio: $ratio;
 
   torrent-done-color: $torrent-done;
   torrent-downloading-color: $torrent-downloading;

src/types/qbit/models/ServerState.ts

@@ -3,6 +3,7 @@ import type { ConnectionStatus } from '@/enums/qbit'
 export default interface ServerState {
   alltime_dl: number
   alltime_ul: number
+  alltime_ratio: number
   average_time_queue: number
   connection_status: ConnectionStatus
   dht_nodes: number