mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
added current statistics to the admin dashboard
This commit is contained in:
Grzegorz Leoniec
parent
74642777b5
commit
d9237db6fe
13
components/CountTo.vue
Normal file
13
components/CountTo.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
export default {
|
||||
extends: CountTo,
|
||||
props: {
|
||||
startVal: { type: Number, default: 0 },
|
||||
endVal: { type: Number, required: true },
|
||||
duration: { type: Number, default: 3000 },
|
||||
autoplay: { type: Boolean, default: true },
|
||||
separator: { type: String, default: '.' }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -28,6 +28,7 @@
|
||||
"nuxt-env": "^0.0.4",
|
||||
"v-tooltip": "^2.0.0-rc.33",
|
||||
"vue-cion-design-system": "file:./styleguide",
|
||||
"vue-count-to": "^1.0.13",
|
||||
"vue-izitoast": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,82 +1,157 @@
|
||||
<template>
|
||||
<ds-card>
|
||||
<ds-space margin="large">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="3802 | number(0)"
|
||||
label="Users"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="10491 | number(0)"
|
||||
label="Posts"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="43644 | number(0)"
|
||||
label="Comments"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
<ds-space margin="x-large">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="80046 | number(0)"
|
||||
label="Notifications"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="273 | number(0)"
|
||||
label="Organization"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0 | number(0)"
|
||||
label="Projects"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
<ds-space margin="x-large">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="2174 | number(0)"
|
||||
label="Open Invites"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="1383 | number(0)"
|
||||
label="Follows"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="27180 | number(0)"
|
||||
label="Shouts"
|
||||
size="x-large"
|
||||
uppercase />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
<no-ssr>
|
||||
<ds-space margin="large">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Users"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countUsers || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Posts"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countPosts || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Comments"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countComments || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
<ds-space margin="x-large">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Notifications"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countNotifications || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Organization"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countOrganizations || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Projects"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countProjects || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
<ds-space margin="x-large">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Open Invites"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countInvites || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Follows"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countFollows || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-number
|
||||
:count="0"
|
||||
label="Shouts"
|
||||
size="x-large"
|
||||
uppercase>
|
||||
<no-ssr slot="count">
|
||||
<hc-count-to :end-val="statistics.countShouts || 0" />
|
||||
</no-ssr>
|
||||
</ds-number>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
</no-ssr>
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
import HcCountTo from '~/components/CountTo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HcCountTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statistics: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isClient() {
|
||||
return process.client
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
statistics: {
|
||||
query: gql(`
|
||||
query {
|
||||
statistics {
|
||||
countUsers
|
||||
countPosts
|
||||
countComments
|
||||
countNotifications
|
||||
countOrganizations
|
||||
countProjects
|
||||
countInvites
|
||||
countFollows
|
||||
countShouts
|
||||
}
|
||||
}
|
||||
`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -182,6 +182,13 @@ export default {
|
||||
return this.User ? this.User[0] : {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
User(val) {
|
||||
if (!val || !val.length) {
|
||||
throw new Error('User not found!')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchUser() {
|
||||
// TODO: we should use subscriptions instead of fetching the whole user again
|
||||
|
||||
@ -8,9 +8,12 @@
|
||||
<ds-text
|
||||
:size="size"
|
||||
class="ds-number-count"
|
||||
style="margin-bottom: 0">{{ count }}</ds-text>
|
||||
style="margin-bottom: 0">
|
||||
<slot name="count">{{ count }}</slot>
|
||||
</ds-text>
|
||||
<ds-text
|
||||
:uppercase="uppercase"
|
||||
:size="labelSize"
|
||||
class="ds-number-label"
|
||||
color="soft"
|
||||
v-html="label" />
|
||||
@ -22,6 +25,7 @@ export default {
|
||||
name: 'DsNumber',
|
||||
props: {
|
||||
size: { type: String, default: 'x-large' },
|
||||
labelSize: { type: String, default: 'small' },
|
||||
count: { type: [Number, String], default: 0 },
|
||||
label: { type: String, default: null },
|
||||
uppercase: { type: Boolean, default: false }
|
||||
|
||||
@ -14,3 +14,20 @@
|
||||
count="1734"
|
||||
label="Contributions" />
|
||||
```
|
||||
```html
|
||||
<ds-number
|
||||
size="xx-large"
|
||||
label-size="large"
|
||||
count="1734"
|
||||
label="Contributions" />
|
||||
```
|
||||
|
||||
## Slot
|
||||
|
||||
```html
|
||||
<ds-number
|
||||
size="large"
|
||||
label="collected donations from users">
|
||||
<span slot="count">1.123.124,03 EUR</span>
|
||||
<ds-number>
|
||||
```
|
||||
|
||||
@ -7557,6 +7557,10 @@ vue-cli-plugin-apollo@^0.17.0:
|
||||
subscriptions-transport-ws "^0.9.15"
|
||||
ts-node "^7.0.1"
|
||||
|
||||
vue-count-to@^1.0.13:
|
||||
version "1.0.13"
|
||||
resolved "https://registry.yarnpkg.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"
|
||||
|
||||
vue-eslint-parser@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user