feat: add admin site stats page with DAU chart

open-isle-cli/package-lock.json

@@ -9,11 +9,13 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "echarts": "^5.6.0",
         "ldrs": "^1.1.7",
         "markdown-it": "^14.1.0",
         "vditor": "^3.8.7",
         "vue": "^3.2.13",
         "vue-easy-lightbox": "^1.19.0",
+        "vue-echarts": "^7.0.3",
         "vue-router": "^4.5.1",
         "vue-toastification": "^2.0.0-rc.5"
       },
@@ -5225,6 +5227,22 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -11344,6 +11362,32 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-easy-lightbox": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/vue-easy-lightbox/-/vue-easy-lightbox-1.19.0.tgz",
@@ -11356,6 +11400,25 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-echarts": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-7.0.3.tgz",
+      "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.5.1",
+        "vue": "^2.7.0 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -12272,6 +12335,21 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }

open-isle-cli/package.json

@@ -15,7 +15,9 @@
     "vue": "^3.2.13",
     "vue-router": "^4.5.1",
     "vue-toastification": "^2.0.0-rc.5",
-    "vue-easy-lightbox": "^1.19.0"
+    "vue-easy-lightbox": "^1.19.0",
+    "echarts": "^5.6.0",
+    "vue-echarts": "^7.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

open-isle-cli/src/components/MenuComponent.vue

@@ -17,6 +17,15 @@
           <i class="menu-item-icon fas fa-info-circle"></i>
           <span class="menu-item-text">关于</span>
         </router-link>
+        <router-link
+          v-if="authState.role === 'ADMIN'"
+          class="menu-item"
+          exact-active-class="selected"
+          to="/about/stats"
+        >
+          <i class="menu-item-icon fas fa-chart-line"></i>
+          <span class="menu-item-text">站点统计</span>
+        </router-link>
         <router-link class="menu-item" exact-active-class="selected" to="/new-post">
           <i class="menu-item-icon fas fa-edit"></i>
           <span class="menu-item-text">发帖</span>

open-isle-cli/src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomePageView from '../views/HomePageView.vue'
 import MessagePageView from '../views/MessagePageView.vue'
 import AboutPageView from '../views/AboutPageView.vue'
+import SiteStatsPageView from '../views/SiteStatsPageView.vue'
 import PostPageView from '../views/PostPageView.vue'
 import LoginPageView from '../views/LoginPageView.vue'
 import SignupPageView from '../views/SignupPageView.vue'
@@ -26,6 +27,11 @@ const routes = [
     name: 'about',
     component: AboutPageView
   },
+  {
+    path: '/about/stats',
+    name: 'site-stats',
+    component: SiteStatsPageView
+  },
   {
     path: '/new-post',
     name: 'new-post',

open-isle-cli/src/views/SiteStatsPageView.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="site-stats-page">
+    <VChart v-if="option" :option="option" :autoresize="true" style="height:400px" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, GridComponent, DataZoomComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { API_BASE_URL } from '../main'
+import { getToken } from '../utils/auth'
+
+use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
+
+const option = ref(null)
+
+async function loadData() {
+  const token = getToken()
+  const res = await fetch(`${API_BASE_URL}/api/stats/dau-range?days=30`, {
+    headers: { Authorization: `Bearer ${token}` }
+  })
+  if (res.ok) {
+    const data = await res.json()
+    const dates = data.map(d => d.date)
+    const values = data.map(d => d.value)
+    option.value = {
+      title: { text: '站点 DAU' },
+      tooltip: { trigger: 'axis' },
+      xAxis: { type: 'category', data: dates },
+      yAxis: { type: 'value' },
+      dataZoom: [{ type: 'slider', start: 80 }, { type: 'inside' }],
+      series: [{ type: 'line', areaStyle: {}, smooth: true, data: values }]
+    }
+  }
+}
+
+onMounted(loadData)
+</script>
+
+<style scoped>
+.site-stats-page {
+  padding: 20px;
+  max-width: var(--page-max-width);
+  margin: 0 auto;
+  height: calc(100vh - var(--header-height) - 40px);
+}
+</style>

src/main/java/com/openisle/controller/StatController.java

@@ -9,6 +9,7 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.time.LocalDate;
+import java.util.List;
 import java.util.Map;
 
 @RestController
@@ -23,4 +24,15 @@ public class StatController {
         long count = userVisitService.countDau(date);
         return Map.of("dau", count);
     }
+
+    @GetMapping("/dau-range")
+    public List<Map<String, Object>> dauRange(@RequestParam(value = "days", defaultValue = "30") int days) {
+        if (days < 1) days = 1;
+        LocalDate end = LocalDate.now();
+        LocalDate start = end.minusDays(days - 1L);
+        var data = userVisitService.countDauRange(start, end);
+        return data.entrySet().stream()
+                .map(e -> Map.of("date", e.getKey().toString(), "value", e.getValue()))
+                .toList();
+    }
 }

src/main/java/com/openisle/repository/UserVisitRepository.java

@@ -3,6 +3,8 @@ package com.openisle.repository;
 import com.openisle.model.User;
 import com.openisle.model.UserVisit;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 
 import java.time.LocalDate;
 import java.util.Optional;
@@ -11,4 +13,7 @@ public interface UserVisitRepository extends JpaRepository<UserVisit, Long> {
     Optional<UserVisit> findByUserAndVisitDate(User user, LocalDate visitDate);
     long countByUser(User user);
     long countByVisitDate(LocalDate visitDate);
+
+    @Query("SELECT uv.visitDate AS d, COUNT(uv) AS c FROM UserVisit uv WHERE uv.visitDate BETWEEN :start AND :end GROUP BY uv.visitDate ORDER BY uv.visitDate")
+    java.util.List<Object[]> countRange(@Param("start") LocalDate start, @Param("end") LocalDate end);
 }

src/main/java/com/openisle/service/UserVisitService.java

@@ -8,6 +8,8 @@ import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 
 import java.time.LocalDate;
+import java.util.LinkedHashMap;
+import java.util.Map;
 
 @Service
 @RequiredArgsConstructor
@@ -37,4 +39,22 @@ public class UserVisitService {
         LocalDate d = date != null ? date : LocalDate.now();
         return userVisitRepository.countByVisitDate(d);
     }
+
+    public Map<LocalDate, Long> countDauRange(LocalDate start, LocalDate end) {
+        Map<LocalDate, Long> result = new LinkedHashMap<>();
+        if (start == null || end == null || start.isAfter(end)) {
+            return result;
+        }
+        var list = userVisitRepository.countRange(start, end);
+        for (var obj : list) {
+            LocalDate d = (LocalDate) obj[0];
+            Long c = (Long) obj[1];
+            result.put(d, c);
+        }
+        // fill zero counts for missing dates
+        for (LocalDate d = start; !d.isAfter(end); d = d.plusDays(1)) {
+            result.putIfAbsent(d, 0L);
+        }
+        return result;
+    }
 }

src/test/java/com/openisle/controller/StatControllerTest.java

@@ -51,4 +51,24 @@ class StatControllerTest {
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$.dau").value(3));
     }
+
+    @Test
+    void dauRangeReturnsSeries() throws Exception {
+        Mockito.when(jwtService.validateAndGetSubject("token")).thenReturn("user");
+        User user = new User();
+        user.setUsername("user");
+        user.setPassword("p");
+        user.setEmail("u@example.com");
+        user.setRole(Role.USER);
+        Mockito.when(userRepository.findByUsername("user")).thenReturn(Optional.of(user));
+        java.util.Map<java.time.LocalDate, Long> map = new java.util.LinkedHashMap<>();
+        map.put(java.time.LocalDate.now().minusDays(1), 1L);
+        map.put(java.time.LocalDate.now(), 2L);
+        Mockito.when(userVisitService.countDauRange(Mockito.any(), Mockito.any())).thenReturn(map);
+
+        mockMvc.perform(get("/api/stats/dau-range").param("days", "2").header("Authorization", "Bearer token"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].value").value(1))
+                .andExpect(jsonPath("$[1].value").value(2));
+    }
 }