Dashboard V3 optimization

Strides-Admin/src/views/dashboard/components/Connectors.vue

@@ -232,10 +232,12 @@ export default {
   
   .card-value {
     color: #333;
+    cursor: pointer;
+    padding: 10px 0;
     font-size: 42px;
     line-height: 63px;
     text-align: center;
-    padding: 10px 0;
+    transition: all .3s;
     font-family: sans-serif;
     &.avaliable {
       color: #1ABD00;
@@ -252,6 +254,9 @@ export default {
     &.unavaliable {
       color: #000000;
     }
+    &:hover {
+      transform: scale(1.2);
+    }
   }
   
   .title-underline {

Strides-Admin/src/views/dashboard/components/Incidents.vue

@@ -233,14 +233,19 @@ export default {
   
   .card-value {
     color: $--color-accent;
+    cursor: pointer;
+    padding: 10px 0;
     font-size: 42px;
     line-height: 63px;
     text-align: center;
-    padding: 10px 0;
+    transition: all .3s;
     font-family: sans-serif;
     &.error {
       color: #FF3500;
     }
+    &:hover {
+      transform: scale(1.2);
+    }
   }
   
   .title-underline {

Strides-Admin/src/views/dashboard/components/SummaryV2.vue

@@ -24,7 +24,7 @@
     </div>
     <div class="charts-card">
       <div class="flex">
-        <div class="chart-title hourly">Hourly Utilization(kWh)</div>
+        <div class="chart-title">Hourly Utilization(kWh)</div>
       </div>
       <LineChart
         index="hourly"
@@ -34,7 +34,8 @@
       <StatisticCard
         title="Total Transactions"
         :value="statisticsData.totalTransCard.totalTrans"
-        v-if="statisticsData.totalTransCard">
+        v-if="statisticsData.totalTransCard"
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Public Users</div>
           <div class="scard-item-value">{{statisticsData.totalTransCard.totalPublic}}</div>
@@ -55,7 +56,8 @@
       <StatisticCard
         title="Total Users"
         :value="statisticsData.totalUsersCard.totalUsers"
-        v-if="statisticsData.totalUsersCard">
+        v-if="statisticsData.totalUsersCard"
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Public Users</div>
           <div class="scard-item-value">{{statisticsData.totalUsersCard.totalPublic}}</div>
@@ -76,7 +78,8 @@
       <StatisticCard
         title="Total Revenue"
         :value="statisticsData.totalRevenue.totalRevenue"
-        v-if="statisticsData.totalRevenue">
+        v-if="statisticsData.totalRevenue"
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Charging Revenue</div>
           <div class="scard-item-value">{{statisticsData.totalRevenue.totalChargingRevenue}}</div>
@@ -97,8 +100,9 @@
       <StatisticCard
         title="Today’s Consumption"
         :value="statisticsData.totalTodayConsumption.totalTodayConsumption"
+        v-if="statisticsData.totalTodayConsumption"
         unit="kWh"
-        v-if="statisticsData.totalTodayConsumption">
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Total Delivered</div>
           <div class="scard-item-value">{{statisticsData.totalTodayConsumption.totalTotalDelivered}}</div>
@@ -119,7 +123,8 @@
       <StatisticCard
         title="Today’s Incidents"
         :value="statisticsData.totalTodayIncidents.totalTodayIncidents"
-        v-if="statisticsData.totalTodayIncidents">
+        v-if="statisticsData.totalTodayIncidents"
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Disconnected</div>
           <div class="scard-item-value">{{statisticsData.totalTodayIncidents.totalDisconnected}}</div>
@@ -140,7 +145,8 @@
       <StatisticCard
         title="Today’s Revenue"
         :value="statisticsData.totalTodayRevenue.totalTodayRevenue"
-        v-if="statisticsData.totalTodayRevenue">
+        v-if="statisticsData.totalTodayRevenue"
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Transactions Completed</div>
           <div class="scard-item-value">{{statisticsData.totalTodayRevenue.totalTransCompleted}}</div>
@@ -161,7 +167,8 @@
       <StatisticCard
         title="Credit Expenditure"
         :value="statisticsData.totalCreditExpenditure.totalCreditExpenditure"
-        v-if="statisticsData.totalCreditExpenditure">
+        v-if="statisticsData.totalCreditExpenditure"
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Wallet Expenditure</div>
           <div class="scard-item-value">{{statisticsData.totalCreditExpenditure.totalWalletExpenditure}}</div>
@@ -182,7 +189,8 @@
       <StatisticCard
         title="Connectors In Use"
         :value="statisticsData.totalConnectorsInUse.totalConnectorsInUse"
-        v-if="statisticsData.totalConnectorsInUse">
+        v-if="statisticsData.totalConnectorsInUse"
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Available</div>
           <div class="scard-item-value">{{statisticsData.totalConnectorsInUse.totalAvailable}}</div>
@@ -207,7 +215,8 @@
       <StatisticCard
         title="Total Wallet Credit"
         :value="statisticsData.totalWalletCredit.totalWalletCredit"
-        v-if="statisticsData.totalWalletCredit">
+        v-if="statisticsData.totalWalletCredit"
+        :size="size2">
         <div class="scard-item-row">
           <div class="scard-item-title">Credits Purchase</div>
           <div class="scard-item-value">{{statisticsData.totalWalletCredit.totalCreditsPurchase}}</div>
@@ -227,18 +236,21 @@
       </StatisticCard>
     </div>
     <div class="charts-card">
-      <div class="radio-group">
-        <el-radio-group
-          v-model="dateTabIndex"
-          size="small"
-          @change="changeBarDateTab">
-          <el-radio-button
-            v-for="(item,index) in dateRangeTab"
-            :key="index"
-            :label="item.value">
-            {{item.name}}
-          </el-radio-button>
-        </el-radio-group>
+      <div class="flexcr">
+        <div class="chart-title flex1">Performance Summary</div>
+        <div class="radio-group">
+          <el-radio-group
+            v-model="dateTabIndex"
+            size="small"
+            @change="changeBarDateTab">
+            <el-radio-button
+              v-for="(item,index) in dateRangeTab"
+              :key="index"
+              :label="item.value">
+              {{item.name}}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
       </div>
       <el-row
         class="barGroup"
@@ -319,6 +331,10 @@ export default {
     size: {
       type: String | Number,
       default: ""
+    },
+    size2: {
+      type: String | Number,
+      default: ""
     }
   },
   components: {
@@ -541,10 +557,15 @@ export default {
   }
   .summary-max-value {
     color: $--color-accent;
+    cursor: pointer;
+    padding: 10px 0;
     font-size: 42px;
     line-height: 63px;
     text-align: center;
-    padding: 10px 0;
+    transition: all .3s;
+  }
+  .summary-max-value:hover {
+    transform: scale(1.2);
   }
   .charts-card {
     display: flex;
@@ -558,7 +579,7 @@ export default {
   }
   .chart-title {
     color: #333;
-    font-size: 32px;
+    font-size: 22px;
     padding-top: 5px;
     padding-bottom: 15px;
     &.hourly {

Strides-Admin/src/views/dashboard/fragment/StatisticCard.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="scard-layout">
+  <div class="scard-layout" :style="'max-width:' + size + 'px;' + minWidth">
     <div class="scard-left">
       <div class="title">{{title}}</div>
-      <div :style='"height: " + (scalePixel * 2) + "px;"'></div>
+      <div :style='"height: " + (scalePixel * 2.5) + "px;"'></div>
       <div
         class="total-value"
         :style='"zoom: " + scaleText + ";"'
@@ -27,10 +27,15 @@ export default {
       type: String|Number,
       default: 0
     },
+    size: {
+      type: String | Number,
+      default: ""
+    },
     unit: String
   },
   data() {
     return {
+      minWidth: "",
       scaleText: 1,
       scalePixel: 0
     };
@@ -41,19 +46,31 @@ export default {
       handler(val) {
         this.getValueTextSize()
       }
+    },
+    size: {
+      handler(val) {
+        this.getMinWidth();
+      }
     }
   },
   mounted() {
-    this.getValueTextSize()
+    this.getMinWidth();
+    this.getValueTextSize();
   },
   methods: {
+    getMinWidth() {
+      this.minWidth = "min-width:" + (this.size - 20) + "px;"
+    },
     getValueTextSize() {
       this.scaleText = 1;
       if (this.value) {
         const length = ("" + this.value).length;
         if (length > 6) {
-          this.scalePixel = (length - 6) % 2 + 1;
-          this.scaleText -= this.scalePixel * 0.12;
+          this.scalePixel = (length - 6);
+          this.scaleText -= this.scalePixel * 0.13;
+        }
+        if (this.scaleText < 0.35) {
+          this.scaleText = 0.35
         }
       }
     }
@@ -67,16 +84,18 @@ export default {
     flex: 1;
     display: flex;
     min-width: 30vw;
-    max-width: 33vw;
     padding: 10px 20px;
     border-radius: 6px;
     background-color: white;
   }
   .scard-left {
     flex: 2;
+    display: flex;
     overflow: hidden;
+    min-height: 90px;
+    align-items: center;
+    flex-direction: column;
     padding: 5px 15px 5px 0;
-    text-align: center;
     border-right: 1px solid #333;
   }
   .title {
@@ -88,13 +107,20 @@ export default {
   }
   .total-value {
     color: $--color-accent;
+    cursor: pointer;
     font-size: 42px;
+    max-width: 92%;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     padding: 15px 0 5px;
+    transition: all .3s;
     text-overflow: ellipsis;
   }
+  .total-value:hover {
+    transform: scale(1.1);
+    text-shadow: 0px 1px 2px rgba($--color-accent, .2);
+  }
   .unit-text {
     color: #333;
     font-size: 14px;
@@ -121,30 +147,27 @@ export default {
     font-size: 14px;
   }
   @media screen and (max-width: 1500px) {
-    .scard-layout {
-      min-width: 400px;
-      max-width: calc(50% - 10px);
-    }
     .total-value {
       font-size: 40px;
     }
   }
   @media screen and (max-width: 900px) {
-    .scard-layout {
-      min-width: 45vw;
-      max-width: calc(50% - 10px);
-    }
     .total-value {
       font-size: 35px;
     }
   }
   @media screen and (max-width: 600px) {
+    .total-value {
+      font-size: 35px;
+    }
+  }
+  @media screen and (max-width: 400px) {
     .scard-layout {
-      min-width: 90vw;
-      max-width: 100%;
+      min-width: 100%;
+      overflow: hidden;
     }
     .total-value {
-      font-size: 35px;
+      font-size: 32px;
     }
   }
 </style>

Strides-Admin/src/views/dashboard/index2.vue

@@ -39,7 +39,8 @@
     <Summary
       :filters="filters"
       v-show="filterTab=='summary'"
-      :size="size"/>
+      :size="size"
+      :size2="size2"/>
     <Incidents
       :filters="filters"
       v-show="filterTab=='incident'"
@@ -90,6 +91,7 @@ export default {
         provider: []
       },
       size: 0,
+      size2: 0,
       resize: 0,
       columns: 0,
       width: 1920,
@@ -128,10 +130,14 @@ export default {
           this.columns = parseInt(this.width / this.minWidth);
           if (this.columns > 5) this.columns = 5;
           this.size = parseInt(this.width / this.columns) - 9;
+          let col2 = parseInt(this.width / 400);
+          if (col2 > 3) col2 = 3;
+          this.size2 = parseInt(this.width / col2) - 10;
         } else {
           this.width = width; //(this.maxWidth + 0);
           this.columns = 5;
           this.size = parseInt(this.width / this.columns) - 9;
+          this.size2 = parseInt(this.width / 3) - 10;
         }
       }
     },