Skip to content

Commit ecd19ee

Browse files
JuampiRombolaJuampiRombola
authored
Merge pull request #5 from JuampiRombola/dashboard
Dashboard
2 parents 0fc6680 + 613e5e8 commit ecd19ee

File tree

8 files changed

+217
-9
lines changed

8 files changed

+217
-9
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"core-js": "^3.6.5",
1313
"vue": "^2.6.11",
1414
"vue-apollo": "^3.0.0-beta.11",
15+
"vue-resize-text": "^0.1.1",
1516
"vue-router": "^3.2.0",
1617
"vuetify": "^2.4.0",
1718
"vuex": "^3.4.0"

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<v-app-bar-nav-icon @click="mini = !mini"></v-app-bar-nav-icon>
55

66
<v-img
7-
max-width="28"
7+
max-width="30"
88
:src="require('@/assets/frux-logo.svg')"
99
alt="frux logo"
1010
class="ml-2 pointer"

‎src/components/DashboardCardNumber.vue‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<v-card class="mx-auto">
3+
<v-row>
4+
<v-col class="text-center mb-0 pb-0" cols="4">
5+
<v-sheet
6+
class="v-sheet--offset ml-3"
7+
height="80"
8+
width="80"
9+
rounded
10+
:color="color"
11+
elevation="12"
12+
max-width="auto"
13+
>
14+
<v-container fill-height fluid>
15+
<v-row align="center" justify="center">
16+
<v-col class="text-center">
17+
<v-icon x-large color="white">{{ icon }}</v-icon>
18+
</v-col>
19+
</v-row>
20+
</v-container>
21+
</v-sheet>
22+
</v-col>
23+
<v-col cols="8" class="mb-0 pb-0 text-center">
24+
<v-card-text class="pt-0">
25+
<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">
26+
{{ title }}
27+
</div>
28+
<div class="headline font-weight-medium grey--text text-center">
29+
{{ quantity }}
30+
</div>
31+
</v-card-text>
32+
</v-col>
33+
<v-col cols="12" class="mt-0 pt-0">
34+
<v-card-text class="py-0">
35+
<v-divider class="my-2"></v-divider>
36+
<v-icon
37+
class="mr-2"
38+
small
39+
>
40+
mdi-clock
41+
</v-icon>
42+
<span class="caption grey--text font-weight-light">{{ caption }}</span>
43+
</v-card-text>
44+
</v-col>
45+
</v-row>
46+
</v-card>
47+
</template>
48+
49+
<script>
50+
import ResizeText from 'vue-resize-text'
51+
52+
export default {
53+
name: 'DashboardCardNumber',
54+
55+
directives: {
56+
ResizeText
57+
},
58+
59+
props: {
60+
title: {
61+
type: String
62+
},
63+
quantity: {
64+
type: String
65+
},
66+
icon: {
67+
type: String
68+
},
69+
caption: {
70+
type: String
71+
},
72+
color: {
73+
type: String
74+
}
75+
},
76+
77+
data: () => ({})
78+
}
79+
</script>
80+
81+
<style scoped>
82+
.v-sheet--offset {
83+
top: -20px;
84+
position: relative;
85+
}
86+
.title-color {
87+
color: #7d7b7b;
88+
}
89+
</style>

‎src/components/DashboardSparkline.vue‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<v-card
3+
class="mx-auto"
4+
>
5+
<v-sheet
6+
class="v-sheet--offset mx-auto"
7+
:color="color"
8+
elevation="12"
9+
max-width="calc(100% - 32px)"
10+
>
11+
<v-sparkline
12+
:labels="labels"
13+
:value="values"
14+
color="white"
15+
line-width="2"
16+
padding="16"
17+
></v-sparkline>
18+
</v-sheet>
19+
20+
<v-card-text class="pt-0">
21+
<div class="title font-weight-light mb-2">
22+
{{ title }}
23+
</div>
24+
<div class="subheading font-weight-light grey--text">
25+
{{ subtitle }}
26+
</div>
27+
<v-divider class="my-2"></v-divider>
28+
<v-icon
29+
class="mr-2"
30+
small
31+
>
32+
mdi-clock
33+
</v-icon>
34+
<span class="caption grey--text font-weight-light">{{ caption }}</span>
35+
</v-card-text>
36+
</v-card>
37+
</template>
38+
39+
<script>
40+
export default {
41+
name: 'DashboardSparkline',
42+
43+
props: {
44+
title: {
45+
type: String
46+
},
47+
subtitle: {
48+
type: String,
49+
default: 'En las últimas 12 horas'
50+
},
51+
caption: {
52+
type: String
53+
},
54+
color: {
55+
type: String
56+
},
57+
labels: {
58+
type: Array
59+
},
60+
values: {
61+
type: Array
62+
}
63+
},
64+
65+
data: () => ({})
66+
}
67+
</script>
68+
69+
<style scoped>
70+
.v-sheet--offset {
71+
top: -24px;
72+
position: relative;
73+
}
74+
</style>

‎src/views/Dashboard.vue‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,44 @@
11
<template>
2-
<h1>Dashboard {{ msg }} </h1>
2+
<v-container>
3+
<v-row class="my-3">
4+
<v-col cols="3">
5+
<DashboardCardNumber title="Usuarios Online" quantity="1344" icon="mdi-account-multiple" caption="En tiempo real" color="amber"></DashboardCardNumber>
6+
</v-col>
7+
<v-col cols="3">
8+
<DashboardCardNumber title="Veedurías" quantity="25" icon="mdi-shield-account" caption="Últimas 24 horas" color="blue"></DashboardCardNumber>
9+
</v-col>
10+
<v-col cols="3">
11+
<DashboardCardNumber title="Patrocinios" quantity="87" icon="mdi-charity" caption="Últimas 24 horas" color="pink"></DashboardCardNumber>
12+
</v-col>
13+
<v-col cols="3">
14+
<DashboardCardNumber title="Transacciones" quantity="106" icon="mdi-cash-multiple" caption="Últimas 24 horas" color="green"></DashboardCardNumber>
15+
</v-col>
16+
</v-row>
17+
<v-row class="mt-9 mb-2">
18+
<v-col cols="6">
19+
<DashboardSparkline color="grey darken-1" title="Usuarios Registrados" caption="último registro hace 7 minutos"
20+
:labels="['6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h']"
21+
:values="[100, 200, 300, 700, 400, 600, 1000, 1300, 1200, 900, 900, 900, 100]"></DashboardSparkline>
22+
</v-col>
23+
<v-col cols="6">
24+
<DashboardSparkline color="grey darken-1" title="Proyectos Creados" caption="última creación hace 1 minuto"
25+
:labels="['6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h']"
26+
:values="[5, 2, 7, 17, 4, 6, 10, 13, 2, 5, 9, 3, 18]"></DashboardSparkline>
27+
</v-col>
28+
</v-row>
29+
</v-container>
330
</template>
431

532
<script>
33+
import DashboardSparkline from '@/components/DashboardSparkline.vue'
34+
import DashboardCardNumber from '@/components/DashboardCardNumber.vue'
35+
636
export default {
737
name: 'Dashboard',
838
9-
props: {
10-
msg: String
39+
components: {
40+
DashboardSparkline,
41+
DashboardCardNumber
1142
},
1243
1344
data: () => ({

‎src/views/Servers.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
<template>
2-
<h1>Servidores</h1>
2+
<h1>Servidores {{ msg }}</h1>
33
</template>
44

55
<script>
66
export default {
7-
name: 'Servers'
7+
name: 'Servers',
8+
9+
props: {
10+
msg: String
11+
},
12+
13+
data: () => ({
14+
//
15+
})
816
}
917
</script>
1018

‎tests/unit/example.spec.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { shallowMount } from '@vue/test-utils'
2-
import Dashboard from '@/views/Dashboard.vue'
2+
import Servers from '@/views/Servers.vue'
33

4-
describe('Dashboard.vue', () => {
4+
describe('Servers.vue', () => {
55
it('renders props.msg when passed', () => {
66
const msg = 'new message'
7-
const wrapper = shallowMount(Dashboard, {
7+
const wrapper = shallowMount(Servers, {
88
propsData: { msg }
99
})
1010
expect(wrapper.text()).toMatch(msg)

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13474,6 +13474,11 @@ vue-loader@^15.9.2:
1347413474
vue-hot-reload-api "^2.3.0"
1347513475
vue-style-loader "^4.1.0"
1347613476

13477+
vue-resize-text@^0.1.1:
13478+
version "0.1.1"
13479+
resolved "https://registry.yarnpkg.com/vue-resize-text/-/vue-resize-text-0.1.1.tgz#b3143c086d412ca181c2b2abd0153bc22742d11b"
13480+
integrity sha512-teQjTzJpwYdBKG2hOc7lA6U3hUNuew3nROuPLPRzX1wxSgG/tQ+YNOHobxXxuIKf36zFTs68y2Y0JY1zx7fZrg==
13481+
1347713482
vue-router@^3.2.0:
1347813483
version "3.5.1"
1347913484
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"

0 commit comments

Comments
 (0)