Skip to content

phsl / new-api

Go to a project
Commit 22ef5b2f by CaIon
Options

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.
parent 28f7e9eb
Showing with 85 additions and 19 deletions
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'>
......
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',
......
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',
......
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 },
......
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,
},
{
......
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 {
......
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",
......
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",
......
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": "この",
......
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": "Просмотр полных деталей этой",
......
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",
......
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": "查看此条",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment