You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AppStats.vue 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <div v-if="$dreamtrack.enabled" class="stats">
  3. <div v-tippy
  4. data-tippy-content="Users like you who are using the application right now!"
  5. data-tippy-placement="bottom"
  6. class="box">
  7. <span class="stats__value">{{ stats | stat('users.realtime') }}</span>
  8. <span class="stats__label">real-time users</span>
  9. </div>
  10. <div v-tippy
  11. data-tippy-content="Number of unique users who have used the application."
  12. data-tippy-placement="bottom"
  13. class="box">
  14. <span class="stats__value">{{ stats | stat('users.total') }}</span>
  15. <span class="stats__label">users</span>
  16. </div>
  17. <div v-tippy
  18. data-tippy-content="Number of times the application has been opened."
  19. data-tippy-placement="bottom"
  20. class="box">
  21. <span class="stats__value">{{ stats | stat('sessions.total') }}</span>
  22. <span class="stats__label">sessions</span>
  23. </div>
  24. <div v-tippy
  25. data-tippy-content="Number of photos that have been nudified."
  26. data-tippy-placement="bottom"
  27. class="box">
  28. <span class="stats__value">{{ stats | stat('events.total.DREAM_COMPLETED') }}</span>
  29. <span class="stats__label">nudifications</span>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import { get } from 'lodash'
  35. export default {
  36. filters: {
  37. stat(value, key) {
  38. value = get(value, key, 0)
  39. return new Intl.NumberFormat('en-us', { }).format(value)
  40. },
  41. },
  42. data: () => ({
  43. channel: null,
  44. stats: {},
  45. }),
  46. created() {
  47. this.init()
  48. },
  49. beforeDestroy() {
  50. this.shutdown()
  51. },
  52. methods: {
  53. init() {
  54. if (!this.$dreamtrack.enabled) {
  55. return
  56. }
  57. this.channel = this.$dreamtrack.service.subscribe('dreamtime:stats')
  58. this.channel.on('data', (payload) => {
  59. this.stats = payload
  60. })
  61. },
  62. shutdown() {
  63. if (!this.channel) {
  64. return
  65. }
  66. this.channel.close()
  67. this.channel = null
  68. },
  69. },
  70. }
  71. </script>
  72. <style lang="scss" scoped>
  73. .stats {
  74. @apply grid grid-cols-4 gap-3;
  75. @apply mb-9;
  76. }
  77. .box {
  78. @apply mb-0 items-center px-3 py-6;
  79. }
  80. .stats__value {
  81. @apply text-lg text-white font-bold;
  82. }
  83. .stats__label {
  84. @apply text-sm;
  85. }
  86. </style>