Add vue-resize-text. Change Dashboard

Author: JuampiRombola

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-apollo": "^3.0.0-beta.11",
+    "vue-resize-text": "^0.1.1",
     "vue-router": "^3.2.0",
     "vuetify": "^2.4.0",
     "vuex": "^3.4.0"

src/components/DashboardCardNumber.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-card class="mt-7 mx-auto">
+  <v-card class="mx-auto">
     <v-row>
       <v-col class="text-center mb-0 pb-0" cols="4">
         <v-sheet
           class="v-sheet--offset ml-3"
-          height="88"
-          width="88"
+          height="80"
+          width="80"
           rounded
           :color="color"
           elevation="12"
@@ -20,9 +20,9 @@
           </v-container>
         </v-sheet>
       </v-col>
-      <v-col cols="8" class="mb-0 pb-0">
+      <v-col cols="8" class="mb-0 pb-0 text-center">
         <v-card-text class="pt-0">
-          <div class="title font-weight-light mb-2 text-center text-no-wrap">
+          <div v-resize-text="{ratio:0.7, minFontSize: '16px', maxFontSize: '26px', delay:0}" class="font-weight-light mx-2 mb-2 text-center text-no-wrap title-color">
             {{ title }}
           </div>
           <div class="headline font-weight-medium grey--text text-center">
@@ -39,17 +39,23 @@
           >
             mdi-clock
           </v-icon>
-          <span class="caption grey--text font-weight-light">{{ captionText }}</span>
+          <span class="caption grey--text font-weight-light">{{ caption }}</span>
         </v-card-text>
       </v-col>
     </v-row>
   </v-card>
 </template>
 
 <script>
+import ResizeText from 'vue-resize-text'
+
 export default {
   name: 'DashboardCardNumber',
 
+  directives: {
+    ResizeText
+  },
+
   props: {
     title: {
       type: String
@@ -60,7 +66,7 @@ export default {
     icon: {
       type: String
     },
-    captionText: {
+    caption: {
       type: String
     },
     color: {
@@ -77,4 +83,7 @@ export default {
   top: -20px;
   position: relative;
 }
+.title-color {
+  color: #7d7b7b;
+}
 </style>

…omponents/DashboardUserRegistrations.vue src/components/DashboardSparkline.vuesrc/components/DashboardUserRegistrations.vue renamed to src/components/DashboardSparkline.vue src/components/DashboardUserRegistrations.vue renamed to src/components/DashboardSparkline.vue

@@ -1,16 +1,16 @@
 <template>
   <v-card
-    class="mt-6 mx-auto"
+    class="mx-auto"
   >
     <v-sheet
       class="v-sheet--offset mx-auto"
-      color="#18aa5e"
+      :color="color"
       elevation="12"
       max-width="calc(100% - 32px)"
     >
       <v-sparkline
         :labels="labels"
-        :value="value"
+        :value="values"
         color="white"
         line-width="2"
         padding="16"
@@ -19,10 +19,10 @@
 
     <v-card-text class="pt-0">
       <div class="title font-weight-light mb-2">
-        Usuarios Registrados
+        {{ title }}
       </div>
       <div class="subheading font-weight-light grey--text">
-        Últimas 24 horas
+        {{ subtitle }}
       </div>
       <v-divider class="my-2"></v-divider>
       <v-icon
@@ -31,37 +31,38 @@
       >
         mdi-clock
       </v-icon>
-      <span class="caption grey--text font-weight-light">último registro hace 12 minutos</span>
+      <span class="caption grey--text font-weight-light">{{ caption }}</span>
     </v-card-text>
   </v-card>
 </template>
 
 <script>
 export default {
-  name: 'DashboardUserRegistrations',
+  name: 'DashboardSparkline',
 
-  data: () => ({
-    labels: [
-      '12am',
-      '3am',
-      '6am',
-      '9am',
-      '12pm',
-      '3pm',
-      '6pm',
-      '9pm'
-    ],
-    value: [
-      200,
-      675,
-      410,
-      390,
-      310,
-      460,
-      250,
-      240
-    ]
-  })
+  props: {
+    title: {
+      type: String
+    },
+    subtitle: {
+      type: String,
+      default: 'En las últimas 12 horas'
+    },
+    caption: {
+      type: String
+    },
+    color: {
+      type: String
+    },
+    labels: {
+      type: Array
+    },
+    values: {
+      type: Array
+    }
+  },
+
+  data: () => ({})
 }
 </script>
 

src/views/Dashboard.vue

@@ -1,36 +1,43 @@
 <template>
   <v-container>
-    <v-row>
+    <v-row class="my-3">
       <v-col cols="3">
-        <DashboardCardNumber title="Online" quantity="1344" icon="mdi-account-group" captionText="En tiempo real" color="#18aa5e"></DashboardCardNumber>
+        <DashboardCardNumber title="Usuarios Online" quantity="1344" icon="mdi-account-multiple" caption="En tiempo real" color="amber"></DashboardCardNumber>
       </v-col>
       <v-col cols="3">
-        <DashboardCardNumber title="Veedurías" quantity="25" icon="mdi-account-group" captionText="Últimas 24 horas" color="#18aa5e"></DashboardCardNumber>
+        <DashboardCardNumber title="Veedurías" quantity="25" icon="mdi-shield-account" caption="Últimas 24 horas" color="blue"></DashboardCardNumber>
       </v-col>
       <v-col cols="3">
-        <DashboardCardNumber title="Patrocinios" quantity="87" icon="mdi-account-group" captionText="Últimas 24 horas" color="#18aa5e"></DashboardCardNumber>
+        <DashboardCardNumber title="Patrocinios" quantity="87" icon="mdi-charity" caption="Últimas 24 horas" color="pink"></DashboardCardNumber>
       </v-col>
       <v-col cols="3">
-        <DashboardCardNumber title="Transacciones" quantity="106" icon="mdi-account-group" captionText="Últimas 24 horas" color="#18aa5e"></DashboardCardNumber>
+        <DashboardCardNumber title="Transacciones" quantity="106" icon="mdi-cash-multiple" caption="Últimas 24 horas" color="green"></DashboardCardNumber>
       </v-col>
     </v-row>
-    <v-row>
+    <v-row class="mt-9 mb-2">
       <v-col cols="6">
-        <DashboardUserRegistrations></DashboardUserRegistrations>
+        <DashboardSparkline color="grey darken-1" title="Usuarios Registrados" caption="último registro hace 7 minutos"
+                            :labels="['6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h']"
+                            :values="[100, 200, 300, 700, 400, 600, 1000, 1300, 1200, 900, 900, 900, 100]"></DashboardSparkline>
+      </v-col>
+      <v-col cols="6">
+        <DashboardSparkline color="grey darken-1" title="Proyectos Creados" caption="última creación hace 1 minuto"
+                            :labels="['6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h']"
+                            :values="[5, 2, 7, 17, 4, 6, 10, 13, 2, 5, 9, 3, 18]"></DashboardSparkline>
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script>
-import DashboardUserRegistrations from '@/components/DashboardUserRegistrations.vue'
+import DashboardSparkline from '@/components/DashboardSparkline.vue'
 import DashboardCardNumber from '@/components/DashboardCardNumber.vue'
 
 export default {
   name: 'Dashboard',
 
   components: {
-    DashboardUserRegistrations,
+    DashboardSparkline,
     DashboardCardNumber
   },
 

yarn.lock

@@ -13474,6 +13474,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-resize-text@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vue-resize-text/-/vue-resize-text-0.1.1.tgz#b3143c086d412ca181c2b2abd0153bc22742d11b"
+  integrity sha512-teQjTzJpwYdBKG2hOc7lA6U3hUNuew3nROuPLPRzX1wxSgG/tQ+YNOHobxXxuIKf36zFTs68y2Y0JY1zx7fZrg==
+
 vue-router@^3.2.0:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"