feat(dashboard): update model analytics section and enhance user charts functionality

- Renamed "Models" to "Model Call Analytics" and updated descriptions for clarity. - Introduced a new state for top user limits in user charts, allowing users to select the number of top users displayed. - Enhanced user charts to include total call count display and improved data processing for better analytics. - Added new translations for updated terms in multiple languages to support internationalization.
2026-04-28 19:16:18 +08:00 · 2026-04-28 19:16:18 +08:00 · 22ef5b2f80
commit 22ef5b2f80
parent 28f7e9eb2e
12 changed files with 85 additions and 19 deletions
--- a/web/default/src/features/dashboard/components/models/model-charts.tsx
+++ b/web/default/src/features/dashboard/components/models/model-charts.tsx
@ -78,7 +78,12 @@ export function ModelCharts(props: ModelChartsProps) {
      <div className='flex w-full flex-col gap-3 border-b px-4 py-3 sm:px-5 lg:flex-row lg:items-center lg:justify-between'>
        <div className='flex items-center gap-2'>
          <PieChartIcon className='text-muted-foreground/60 size-4' />
-          <div className='text-sm font-semibold'>{t('Model Analytics')}</div>
+          <div className='text-sm font-semibold'>
+            {t('Model Call Analytics')}
+          </div>
+          <span className='text-muted-foreground text-xs'>
+            {t('Total:')} {chartData.totalCountDisplay}
+          </span>
        </div>

        <div className='bg-muted/60 inline-flex h-8 rounded-md border p-0.5'>
--- a/web/default/src/features/dashboard/components/users/user-charts.tsx
+++ b/web/default/src/features/dashboard/components/users/user-charts.tsx
@ -41,6 +41,8 @@ const USER_CHARTS: {
  },
 ]

+const TOP_USER_LIMIT_OPTIONS = [5, 10, 20, 50]
+
 export function UserCharts() {
  const { t } = useTranslation()
  const { resolvedTheme } = useTheme()
@ -55,6 +57,7 @@ export function UserCharts() {
  const [selectedRange, setSelectedRange] = useState<number>(() =>
    getDefaultDays(timeGranularity)
  )
+  const [topUserLimit, setTopUserLimit] = useState(10)
  const [timeRange, setTimeRange] = useState(() => {
    const days = getDefaultDays(timeGranularity)
    const { start, end } = getNormalizedDateRange(days)
@ -113,9 +116,10 @@ export function UserCharts() {
      processUserChartData(
        isLoading ? [] : (userData ?? []),
        timeGranularity,
-        t
+        t,
+        topUserLimit
      ),
-    [userData, isLoading, timeGranularity, t]
+    [userData, isLoading, timeGranularity, t, topUserLimit]
  )

  return (
@ -158,6 +162,26 @@ export function UserCharts() {
          ))}
        </div>

+        <div className='flex items-center gap-1.5 rounded-md border p-0.5'>
+          <span className='text-muted-foreground px-2 text-xs font-medium'>
+            {t('Top Users')}
+          </span>
+          {TOP_USER_LIMIT_OPTIONS.map((limit) => (
+            <button
+              key={limit}
+              type='button'
+              onClick={() => setTopUserLimit(limit)}
+              className={`rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors ${
+                topUserLimit === limit
+                  ? 'bg-primary text-primary-foreground shadow-sm'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              }`}
+            >
+              {t('Top {{count}}', { count: limit })}
+            </button>
+          ))}
+        </div>
+
        {isLoading && (
          <Loader2 className='text-muted-foreground size-4 animate-spin' />
        )}
@ -184,7 +208,7 @@ export function UserCharts() {
                  themeReady &&
                  spec && (
                    <VChart
-                      key={`user-${chart.value}-${resolvedTheme}`}
+                      key={`user-${chart.value}-${topUserLimit}-${resolvedTheme}`}
                      spec={{
                        ...spec,
                        theme: resolvedTheme === 'dark' ? 'dark' : 'light',
--- a/web/default/src/features/dashboard/index.tsx
+++ b/web/default/src/features/dashboard/index.tsx
@ -86,8 +86,8 @@ const SECTION_META: Record<
    descriptionKey: 'View dashboard overview and statistics',
  },
  models: {
-    titleKey: 'Models',
-    descriptionKey: 'View model statistics and charts',
+    titleKey: 'Model Call Analytics',
+    descriptionKey: 'View model call count analytics and charts',
  },
  users: {
    titleKey: 'User Analytics',
--- a/web/default/src/features/dashboard/lib/charts.ts
+++ b/web/default/src/features/dashboard/lib/charts.ts
@ -158,7 +158,6 @@ export function processChartData(
        title: {
          visible: true,
          text: tt('Call Trend'),
-          subtext: `${tt('Total:')} ${formatInt(0)}`,
        },
      },
      spec_rank_bar: {
@ -171,10 +170,10 @@ export function processChartData(
        title: {
          visible: true,
          text: tt('Call Count Ranking'),
-          subtext: `${tt('Total:')} ${formatInt(0)}`,
        },
      },
      totalQuotaDisplay: formatQuotaTotal(0),
+      totalCountDisplay: formatInt(0),
    }
  }

@ -426,7 +425,6 @@ export function processChartData(
      title: {
        visible: true,
        text: tt('Call Count Distribution'),
-        subtext: `${tt('Total:')} ${formatInt(totalTimes)}`,
      },
      legends: { visible: true, orient: 'left' },
      label: { visible: true },
@ -541,7 +539,6 @@ export function processChartData(
      title: {
        visible: true,
        text: tt('Call Trend'),
-        subtext: `${tt('Total:')} ${formatInt(totalTimes)}`,
      },
      tooltip: {
        mark: {
@ -611,7 +608,6 @@ export function processChartData(
      title: {
        visible: true,
        text: tt('Call Count Ranking'),
-        subtext: `${tt('Total:')} ${formatInt(totalTimes)}`,
      },
      bar: {
        state: {
@ -633,6 +629,7 @@ export function processChartData(
      animation: true,
    },
    totalQuotaDisplay: formatQuotaTotal(totalQuotaRaw),
+    totalCountDisplay: formatInt(totalTimes),
  }
 }

@ -796,6 +793,21 @@ export function processUserChartData(
                formatVal(Number(datum?.rawQuota) || 0),
            },
          ],
+          updateContent: (
+            array: Array<{
+              key: string
+              value: string | number
+              datum?: Record<string, unknown>
+            }>
+          ) => {
+            for (let i = 0; i < array.length; i++) {
+              const rawQuota = array[i].datum?.rawQuota
+              const value =
+                rawQuota === undefined ? array[i].value : Number(rawQuota)
+              array[i].value = formatVal(Number(value) || 0)
+            }
+            return array
+          },
        },
      },
      color: { specified: userColorMap },
--- a/web/default/src/features/dashboard/section-registry.tsx
+++ b/web/default/src/features/dashboard/section-registry.tsx
@ -13,8 +13,8 @@ const DASHBOARD_SECTIONS = [
  },
  {
    id: 'models',
-    titleKey: 'Models',
-    descriptionKey: 'View model statistics and charts',
+    titleKey: 'Model Call Analytics',
+    descriptionKey: 'View model call count analytics and charts',
    build: () => null,
  },
  {
--- a/web/default/src/features/dashboard/types.ts
+++ b/web/default/src/features/dashboard/types.ts
@ -75,6 +75,7 @@ export interface ProcessedChartData {
  spec_model_line: VChartSpec
  spec_rank_bar: VChartSpec
  totalQuotaDisplay: string
+  totalCountDisplay: string
 }

 export interface ProcessedUserChartData {
--- a/web/default/src/i18n/locales/en.json
+++ b/web/default/src/i18n/locales/en.json
@ -1957,6 +1957,7 @@
    "Model": "Model",
    "Model Access": "Model Access",
    "Model Analytics": "Model Analytics",
+    "Model Call Analytics": "Model Call Analytics",
    "Model context usage": "Model context usage",
    "Model deleted": "Model deleted",
    "Model deleted successfully": "Model deleted successfully",
@ -3303,7 +3304,9 @@
    "Tool identifier": "Tool identifier",
    "Tool price settings": "Tool price settings",
    "Tool prices": "Tool prices",
+    "Top {{count}}": "Top {{count}}",
    "Top Models": "Top Models",
+    "Top Users": "Top Users",
    "Top up balance and view billing history.": "Top up balance and view billing history.",
    "Top-up": "Top-up",
    "Top-up amount options": "Top-up amount options",
@ -3548,6 +3551,7 @@
    "View document": "View document",
    "View logs": "View logs",
    "View mode": "View mode",
+    "View model call count analytics and charts": "View model call count analytics and charts",
    "View model statistics and charts": "View model statistics and charts",
    "View Pricing": "View Pricing",
    "View the complete details for this": "View the complete details for this",
--- a/web/default/src/i18n/locales/fr.json
+++ b/web/default/src/i18n/locales/fr.json
@ -1957,6 +1957,7 @@
    "Model": "Modèle",
    "Model Access": "Accès au modèle",
    "Model Analytics": "Analyse des modèles",
+    "Model Call Analytics": "Analyse des appels de modèles",
    "Model context usage": "Utilisation du contexte du modèle",
    "Model deleted": "Modèle supprimé",
    "Model deleted successfully": "Modèle supprimé avec succès",
@ -3303,7 +3304,9 @@
    "Tool identifier": "Identifiant d’outil",
    "Tool price settings": "Paramètres de prix des outils",
    "Tool prices": "Prix des outils",
+    "Top {{count}}": "Top {{count}}",
    "Top Models": "Top Modèles",
+    "Top Users": "Top utilisateurs",
    "Top up balance and view billing history.": "Recharger le solde et consulter l'historique de facturation.",
    "Top-up": "Recharge",
    "Top-up amount options": "Options de montant de recharge",
@ -3548,6 +3551,7 @@
    "View document": "Afficher le document",
    "View logs": "Voir les logs",
    "View mode": "Mode d'affichage",
+    "View model call count analytics and charts": "Afficher les analyses et graphiques du nombre d'appels par modèle",
    "View model statistics and charts": "Afficher les statistiques et graphiques des modèles",
    "View Pricing": "Voir les tarifs",
    "View the complete details for this": "Voir les détails complets de ce",
--- a/web/default/src/i18n/locales/ja.json
+++ b/web/default/src/i18n/locales/ja.json
@ -1957,6 +1957,7 @@
    "Model": "モデル",
    "Model Access": "モデルアクセス",
    "Model Analytics": "モデル分析",
+    "Model Call Analytics": "モデル呼び出し分析",
    "Model context usage": "モデルのコンテキスト使用量",
    "Model deleted": "モデルが削除されました",
    "Model deleted successfully": "モデルが正常に削除されました",
@ -3303,7 +3304,9 @@
    "Tool identifier": "ツールID",
    "Tool price settings": "ツール価格設定",
    "Tool prices": "ツール価格",
+    "Top {{count}}": "上位 {{count}}",
    "Top Models": "トップモデル",
+    "Top Users": "上位ユーザー",
    "Top up balance and view billing history.": "残高をチャージし、請求履歴を確認。",
    "Top-up": "チャージ",
    "Top-up amount options": "トップアップ金額オプション",
@ -3548,6 +3551,7 @@
    "View document": "ドキュメントを表示",
    "View logs": "ログを表示",
    "View mode": "表示モード",
+    "View model call count analytics and charts": "モデル呼び出し回数の分析とグラフを表示",
    "View model statistics and charts": "モデルの統計とグラフを表示",
    "View Pricing": "価格を見る",
    "View the complete details for this": "この",
--- a/web/default/src/i18n/locales/ru.json
+++ b/web/default/src/i18n/locales/ru.json
@ -1957,6 +1957,7 @@
    "Model": "Модель",
    "Model Access": "Доступ к моделям",
    "Model Analytics": "Аналитика моделей",
+    "Model Call Analytics": "Аналитика вызовов моделей",
    "Model context usage": "Использование контекста модели",
    "Model deleted": "Модель удалена",
    "Model deleted successfully": "Модель успешно удалена",
@ -3303,7 +3304,9 @@
    "Tool identifier": "Идентификатор инструмента",
    "Tool price settings": "Настройки цен на инструменты",
    "Tool prices": "Цены инструментов",
+    "Top {{count}}": "Топ {{count}}",
    "Top Models": "Лучшие модели",
+    "Top Users": "Лучшие пользователи",
    "Top up balance and view billing history.": "Пополнить баланс и просмотреть историю платежей.",
    "Top-up": "Пополнение",
    "Top-up amount options": "Варианты суммы пополнения",
@ -3548,6 +3551,7 @@
    "View document": "Просмотреть документ",
    "View logs": "Просмотреть логи",
    "View mode": "Режим отображения",
+    "View model call count analytics and charts": "Просмотр аналитики и графиков количества вызовов моделей",
    "View model statistics and charts": "Просмотр статистики и графиков моделей",
    "View Pricing": "Посмотреть цены",
    "View the complete details for this": "Просмотр полных деталей этой",
--- a/web/default/src/i18n/locales/vi.json
+++ b/web/default/src/i18n/locales/vi.json
@ -1957,6 +1957,7 @@
    "Model": "Mô hình",
    "Model Access": "Truy cập mô hình",
    "Model Analytics": "Phân tích mô hình",
+    "Model Call Analytics": "Phân tích lượt gọi mô hình",
    "Model context usage": "Sử dụng ngữ cảnh mô hình",
    "Model deleted": "Đã xóa mô hình",
    "Model deleted successfully": "Model đã được xóa thành công",
@ -3303,7 +3304,9 @@
    "Tool identifier": "Định danh công cụ",
    "Tool price settings": "Cài đặt giá công cụ",
    "Tool prices": "Giá công cụ",
+    "Top {{count}}": "Top {{count}}",
    "Top Models": "Người mẫu hàng đầu",
+    "Top Users": "Người dùng hàng đầu",
    "Top up balance and view billing history.": "Nạp tiền vào tài khoản và xem lịch sử thanh toán.",
    "Top-up": "Nạp tiền",
    "Top-up amount options": "Tùy chọn số tiền nạp",
@ -3548,6 +3551,7 @@
    "View document": "Xem tài liệu",
    "View logs": "Xem nhật ký",
    "View mode": "Chế độ xem",
+    "View model call count analytics and charts": "Xem phân tích và biểu đồ số lượt gọi mô hình",
    "View model statistics and charts": "Xem thống kê và biểu đồ mô hình",
    "View Pricing": "View price",
    "View the complete details for this": "Xem chi tiết đầy đủ của",
--- a/web/default/src/i18n/locales/zh.json
+++ b/web/default/src/i18n/locales/zh.json
@ -351,7 +351,7 @@
    "Audio playback failed": "音频无法播放",
    "Audio Preview": "音乐预览",
    "Audio ratio": "音频倍率",
-    "Audio Tokens": "语音令牌",
+    "Audio Tokens": "语音 Token",
    "Auth Style": "认证方式",
    "Authentication": "身份验证",
    "Authenticator code": "身份验证器代码",
@ -911,7 +911,7 @@
    "Default API Version *": "默认 API 版本 *",
    "Default API version for this channel": "此渠道的默认 API 版本",
    "Default Collapse Sidebar": "默认折叠侧边栏",
-    "Default Max Tokens": "默认最大令牌数",
+    "Default Max Tokens": "默认最大 Token 数",
    "Default Responses API version, if empty, will use the API version above": "默认响应 API 版本，如果为空，将使用上面的 API 版本",
    "Default system prompt for this channel": "此渠道的默认系统提示",
    "Default time granularity": "默认时间粒度",
@ -1030,7 +1030,7 @@
    "Display name for this payment method.": "此支付方式的显示名称。",
    "Display name shown to users.": "显示给用户的名称。",
    "Display Options": "显示选项",
-    "Display Token Statistics": "显示令牌统计信息",
+    "Display Token Statistics": "显示 Token 统计信息",
    "Displays the mobile sidebar.": "显示移动侧边栏。",
    "Do not over-trust this feature. IP may be spoofed. Please use with nginx, CDN and other gateways.": "请勿过度信任此功能，IP 可能被伪造，请配合 nginx 和 cdn 等网关使用",
    "Do not repeat check-in; only once per day": "请勿重复签到；每天仅一次",
@ -1957,6 +1957,7 @@
    "Model": "模型",
    "Model Access": "模型访问",
    "Model Analytics": "模型数据分析",
+    "Model Call Analytics": "模型调用分析",
    "Model context usage": "模型上下文用量",
    "Model deleted": "模型已删除",
    "Model deleted successfully": "模型删除成功",
@ -3053,7 +3054,7 @@
    "Static page describing the platform.": "描述平台的静态页面。",
    "Statistical count": "统计计数",
    "Statistical quota": "统计配额",
-    "Statistical tokens": "统计令牌",
+    "Statistical tokens": "统计 Token 数",
    "Statistics reset": "统计已重置",
    "Status": "状态",
    "Status & Sync": "状态与同步",
@ -3297,13 +3298,15 @@
    "tokens": "令牌",
    "Tokens": "令牌",
    "Tokens Only": "仅限 Token",
-    "Tokens per minute": "每分钟令牌数",
+    "Tokens per minute": "每分钟 Token 数",
    "Tokens-only mode will show raw quota values regardless of this toggle.": "Tokens-only 模式将无视此开关显示原始配额值。",
    "Too many files. Some were not added.": "文件过多。部分未添加。",
    "Tool identifier": "工具标识",
    "Tool price settings": "工具价格设置",
    "Tool prices": "工具价格",
+    "Top {{count}}": "前 {{count}}",
    "Top Models": "热门模型",
+    "Top Users": "热门用户",
    "Top up balance and view billing history.": "充值余额并查看账单历史。",
    "Top-up": "充值",
    "Top-up amount options": "充值金额选项",
@ -3328,7 +3331,7 @@
    "Total Quota": "总额度",
    "Total requests allowed per period. 0 = unlimited.": "每周期允许的总请求数。0 = 无限制。",
    "Total requests made": "总请求数",
-    "Total Tokens": "总令牌数",
+    "Total Tokens": "总 Token 数",
    "Total Usage": "总用量",
    "Total:": "总计：",
    "TPM": "TPM",
@ -3548,6 +3551,7 @@
    "View document": "查看文档",
    "View logs": "查看日志",
    "View mode": "视图模式",
+    "View model call count analytics and charts": "查看模型调用次数统计和图表",
    "View model statistics and charts": "查看模型统计和图表",
    "View Pricing": "查看定价",
    "View the complete details for this": "查看此条",