From 450d0a54fe4a5774b69f0f2ca2655c6f470ffe9f Mon Sep 17 00:00:00 2001 From: Archer <545436317@qq.com> Date: Mon, 16 Jun 2025 16:09:14 +0800 Subject: [PATCH] perf: dashboard (#5038) * perf: dashboard * fix: path --- .../common/charts}/LineChartComponent.tsx | 39 +++++++++++++------ packages/web/i18n/en/account_model.json | 2 - packages/web/i18n/en/common.json | 8 ++-- packages/web/i18n/zh-CN/account_model.json | 2 - packages/web/i18n/zh-CN/common.json | 8 ++-- packages/web/i18n/zh-Hant/account_model.json | 2 - packages/web/i18n/zh-Hant/common.json | 8 ++-- packages/web/package.json | 1 + pnpm-lock.yaml | 3 ++ .../account/model/ModelDashboard/index.tsx | 4 +- projects/app/src/web/core/ai/channel.ts | 1 - 11 files changed, 48 insertions(+), 30 deletions(-) rename {projects/app/src/pageComponents/account/model/ModelDashboard => packages/web/components/common/charts}/LineChartComponent.tsx (83%) diff --git a/projects/app/src/pageComponents/account/model/ModelDashboard/LineChartComponent.tsx b/packages/web/components/common/charts/LineChartComponent.tsx similarity index 83% rename from projects/app/src/pageComponents/account/model/ModelDashboard/LineChartComponent.tsx rename to packages/web/components/common/charts/LineChartComponent.tsx index 9a260947e..f5d7b8944 100644 --- a/projects/app/src/pageComponents/account/model/ModelDashboard/LineChartComponent.tsx +++ b/packages/web/components/common/charts/LineChartComponent.tsx @@ -12,7 +12,7 @@ import { } from 'recharts'; import { type NameType, type ValueType } from 'recharts/types/component/DefaultTooltipContent'; import { formatNumber } from '@fastgpt/global/common/math/tools'; -import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs'; +import FillRowTabs from '../Tabs/FillRowTabs'; import { useTranslation } from 'next-i18next'; import { cloneDeep } from 'lodash'; @@ -37,7 +37,12 @@ type LineChartComponentProps = { HeaderLeftChildren?: React.ReactNode; lines: LineConfig[]; tooltipItems?: TooltipItem[]; + + defaultDisplayMode?: 'incremental' | 'cumulative'; + enableIncremental?: boolean; enableCumulative?: boolean; + enableTooltip?: boolean; + startDateValue?: number; }; const CustomTooltip = ({ @@ -78,19 +83,26 @@ const LineChartComponent = ({ HeaderLeftChildren, lines, tooltipItems, - enableCumulative = true + defaultDisplayMode = 'incremental', + enableIncremental = true, + enableCumulative = true, + startDateValue = 0 }: LineChartComponentProps) => { const theme = useTheme(); const { t } = useTranslation(); - const [displayMode, setDisplayMode] = useState<'incremental' | 'cumulative'>('incremental'); + const [displayMode, setDisplayMode] = useState<'incremental' | 'cumulative'>(defaultDisplayMode); // Tab list constant const tabList = useMemo( () => [ - { label: t('account_model:chart_mode_incremental'), value: 'incremental' as const }, - { label: t('account_model:chart_mode_cumulative'), value: 'cumulative' as const } + ...(enableIncremental + ? [{ label: t('common:chart_mode_incremental'), value: 'incremental' as const }] + : []), + ...(enableCumulative + ? [{ label: t('common:chart_mode_cumulative'), value: 'cumulative' as const }] + : []) ], - [t] + [enableCumulative, enableIncremental, t] ); // Y-axis number formatter function @@ -105,7 +117,7 @@ const LineChartComponent = ({ // Process data based on display mode const processedData = useMemo(() => { - if (displayMode === 'incremental' || !enableCumulative) { + if (displayMode === 'incremental') { return data; } @@ -115,7 +127,10 @@ const LineChartComponent = ({ const dataKeys = lines.map((item) => item.dataKey); return cloneData.map((item, index) => { - if (index === 0) return item; + if (index === 0) { + item[dataKeys[0]] = startDateValue + item[dataKeys[0]]; + return item; + } dataKeys.forEach((key) => { if (typeof item[key] === 'number') { @@ -125,7 +140,7 @@ const LineChartComponent = ({ return item; }); - }, [data, displayMode, lines, enableCumulative]); + }, [displayMode, data, lines, startDateValue]); // Generate gradient definitions const gradientDefs = useMemo( @@ -157,7 +172,7 @@ const LineChartComponent = ({ {HeaderLeftChildren} - {enableCumulative && ( + {tabList.length > 1 && ( list={tabList} py={0.5} @@ -177,14 +192,14 @@ const LineChartComponent = ({ diff --git a/packages/web/i18n/en/account_model.json b/packages/web/i18n/en/account_model.json index 8cfaca091..7e27f56fb 100644 --- a/packages/web/i18n/en/account_model.json +++ b/packages/web/i18n/en/account_model.json @@ -16,8 +16,6 @@ "channel_status_enabled": "Enable", "channel_status_unknown": "unknown", "channel_type": "Protocol Type", - "chart_mode_cumulative": "Cumulative", - "chart_mode_incremental": "Incremental", "clear_model": "Clear the model", "confirm_delete_channel": "Confirm the deletion of the [{{name}}] channel?", "copy_model_id_success": "Copyed model id", diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json index 374176b41..5f6df8cd9 100644 --- a/packages/web/i18n/en/common.json +++ b/packages/web/i18n/en/common.json @@ -108,6 +108,8 @@ "button.extra_dataset_size_tip": "You are purchasing [Extra Knowledge Base Capacity]", "button.extra_points_tip": "You are purchasing [Extra AI Points]", "can_copy_content_tip": "It is not possible to copy automatically using the browser, please manually copy the following content", + "chart_mode_cumulative": "Cumulative", + "chart_mode_incremental": "Incremental", "choosable": "Choosable", "chose_condition": "Choose Condition", "chosen": "Chosen", @@ -264,7 +266,6 @@ "core.app.have_saved": "Saved", "core.app.logs.Source And Time": "Source & Time", "core.app.more": "View More", - "name": "name", "core.app.no_app": "No Apps Yet, Create One Now!", "core.app.not_saved": "Not Saved", "core.app.outLink.Can Drag": "Icon Can Be Dragged", @@ -732,7 +733,6 @@ "core.workflow.inputType.switch": "Switch", "core.workflow.inputType.textInput": "Text Input box", "core.workflow.inputType.textarea": "Multi-line Input Box", - "key": "key", "core.workflow.publish.OnRevert version": "Click to Revert to This Version", "core.workflow.publish.OnRevert version confirm": "Confirm to Revert to This Version? The configuration of the editing version will be saved, and a new release version will be created for the reverted version.", "core.workflow.publish.histories": "Release Records", @@ -741,7 +741,6 @@ "core.workflow.template.Search": "Search", "core.workflow.tool.Handle": "Tool Connector", "core.workflow.tool.Select Tool": "Select Tool", - "value": "Value", "core.workflow.variable": "Variable", "create": "Create", "create_failed": "Create failed", @@ -861,6 +860,7 @@ "json_config": "JSON Configuration", "json_parse_error": "Possible JSON Error, Please Check Carefully", "just_now": "just", + "key": "key", "key_repetition": "Key Repetition", "last_step": "Previous", "last_use_time": "Last Use Time", @@ -903,6 +903,7 @@ "move.confirm": "Confirm move", "move_success": "Moved Successfully", "move_to": "Move to", + "name": "name", "name_is_empty": "Name Cannot Be Empty", "navbar.Account": "Account", "navbar.Chat": "Chat", @@ -1300,6 +1301,7 @@ "user.team.role.writer": "writable member", "user.type": "Type", "user_leaved": "Leaved", + "value": "Value", "verification": "Verification", "workflow.template.communication": "Communication", "xx_search_result": "{{key}} Search Results", diff --git a/packages/web/i18n/zh-CN/account_model.json b/packages/web/i18n/zh-CN/account_model.json index b92981aff..9aaf255b6 100644 --- a/packages/web/i18n/zh-CN/account_model.json +++ b/packages/web/i18n/zh-CN/account_model.json @@ -16,8 +16,6 @@ "channel_status_enabled": "启用", "channel_status_unknown": "未知", "channel_type": "协议类型", - "chart_mode_cumulative": "累积", - "chart_mode_incremental": "分时", "clear_model": "清空模型", "confirm_delete_channel": "确认删除 【{{name}}】渠道？", "copy_model_id_success": "已复制模型id", diff --git a/packages/web/i18n/zh-CN/common.json b/packages/web/i18n/zh-CN/common.json index 3d7ddf154..9a43b1eb5 100644 --- a/packages/web/i18n/zh-CN/common.json +++ b/packages/web/i18n/zh-CN/common.json @@ -108,6 +108,8 @@ "button.extra_dataset_size_tip": "您正在购买【额外知识库容量】", "button.extra_points_tip": "您正在购买【额外 AI 积分】", "can_copy_content_tip": "无法使用浏览器自动复制，请手动复制下面内容", + "chart_mode_cumulative": "累积", + "chart_mode_incremental": "分时", "choosable": "可选", "chose_condition": "选择条件", "chosen": "已选", @@ -264,7 +266,6 @@ "core.app.have_saved": "已保存", "core.app.logs.Source And Time": "来源 & 时间", "core.app.more": "查看更多", - "name": "名称", "core.app.no_app": "还没有应用，快去创建一个吧！", "core.app.not_saved": "未保存", "core.app.outLink.Can Drag": "图标可拖拽", @@ -732,7 +733,6 @@ "core.workflow.inputType.switch": "开关", "core.workflow.inputType.textInput": "文本输入框", "core.workflow.inputType.textarea": "多行输入框", - "key": "键", "core.workflow.publish.OnRevert version": "点击回退到该版本", "core.workflow.publish.OnRevert version confirm": "确认回退至该版本？会为您保存编辑中版本的配置，并为回退版本创建一个新的发布版本。", "core.workflow.publish.histories": "发布记录", @@ -741,7 +741,6 @@ "core.workflow.template.Search": "搜索", "core.workflow.tool.Handle": "工具连接器", "core.workflow.tool.Select Tool": "选择工具", - "value": "值", "core.workflow.variable": "变量", "create": "去创建", "create_failed": "创建失败", @@ -861,6 +860,7 @@ "json_config": "JSON 配置", "json_parse_error": "JSON 可能有误，请仔细检查", "just_now": "刚刚", + "key": "键", "key_repetition": "key 重复", "last_step": "上一步", "last_use_time": "最后使用时间", @@ -903,6 +903,7 @@ "move.confirm": "确认移动", "move_success": "移动成功", "move_to": "移动到", + "name": "名称", "name_is_empty": "名称不能为空", "navbar.Account": "账号", "navbar.Chat": "聊天", @@ -1300,6 +1301,7 @@ "user.team.role.writer": "可写成员", "user.type": "类型", "user_leaved": "已离开", + "value": "值", "verification": "验证", "workflow.template.communication": "通信", "xx_search_result": "{{key}} 的搜索结果", diff --git a/packages/web/i18n/zh-Hant/account_model.json b/packages/web/i18n/zh-Hant/account_model.json index 69f6c04f6..04b83c6d8 100644 --- a/packages/web/i18n/zh-Hant/account_model.json +++ b/packages/web/i18n/zh-Hant/account_model.json @@ -16,8 +16,6 @@ "channel_status_enabled": "啟用", "channel_status_unknown": "未知", "channel_type": "協議類型", - "chart_mode_cumulative": "累積", - "chart_mode_incremental": "分時", "clear_model": "清空模型", "confirm_delete_channel": "確認刪除【{{name}}】管道？", "copy_model_id_success": "已復制模型 id", diff --git a/packages/web/i18n/zh-Hant/common.json b/packages/web/i18n/zh-Hant/common.json index 55264c703..78a7302c4 100644 --- a/packages/web/i18n/zh-Hant/common.json +++ b/packages/web/i18n/zh-Hant/common.json @@ -108,6 +108,8 @@ "button.extra_dataset_size_tip": "您正在購買【額外知識庫容量】", "button.extra_points_tip": "您正在購買【額外 AI 積分】", "can_copy_content_tip": "無法使用瀏覽器自動複製，請手動複製下面內容", + "chart_mode_cumulative": "累積", + "chart_mode_incremental": "分時", "choosable": "可選擇", "chose_condition": "選擇條件", "chosen": "已選擇", @@ -264,7 +266,6 @@ "core.app.have_saved": "已儲存", "core.app.logs.Source And Time": "來源與時間", "core.app.more": "檢視更多", - "name": "名稱", "core.app.no_app": "還沒有應用程式，快來建立一個吧！", "core.app.not_saved": "未儲存", "core.app.outLink.Can Drag": "圖示可拖曳", @@ -732,7 +733,6 @@ "core.workflow.inputType.switch": "開關", "core.workflow.inputType.textInput": "文字輸入框", "core.workflow.inputType.textarea": "多行輸入框", - "key": "鍵", "core.workflow.publish.OnRevert version": "點選回復至此版本", "core.workflow.publish.OnRevert version confirm": "確認回復至此版本？將為您儲存編輯中版本的設定，並為回復版本建立一個新的發布版本。", "core.workflow.publish.histories": "發布記錄", @@ -741,7 +741,6 @@ "core.workflow.template.Search": "搜尋", "core.workflow.tool.Handle": "工具聯結器", "core.workflow.tool.Select Tool": "選擇工具", - "value": "值", "core.workflow.variable": "變數", "create": "建立", "create_failed": "建立失敗", @@ -861,6 +860,7 @@ "json_config": "JSON 設定", "json_parse_error": "可能有 JSON 錯誤，請仔細檢查", "just_now": "剛剛", + "key": "鍵", "key_repetition": "鍵值重複", "last_step": "上一步", "last_use_time": "最後使用時間", @@ -903,6 +903,7 @@ "move.confirm": "確認移動", "move_success": "移動成功", "move_to": "移動至", + "name": "名稱", "name_is_empty": "名稱不能為空", "navbar.Account": "帳戶", "navbar.Chat": "對話", @@ -1300,6 +1301,7 @@ "user.team.role.writer": "可寫入成員", "user.type": "類型", "user_leaved": "已離開", + "value": "值", "verification": "驗證", "workflow.template.communication": "通訊", "xx_search_result": "{{key}} 的搜尋結果", diff --git a/packages/web/package.json b/packages/web/package.json index 5d821a819..4be2dbf6b 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -21,6 +21,7 @@ "ahooks": "^3.7.11", "date-fns": "2.30.0", "dayjs": "^1.11.7", + "recharts": "^2.15.0", "i18next": "23.16.8", "js-cookie": "^3.0.5", "lexical": "0.12.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9c06a1d12..c6b38b62a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -437,6 +437,9 @@ importers: react-photo-view: specifier: ^1.2.6 version: 1.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + recharts: + specifier: ^2.15.0 + version: 2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) use-context-selector: specifier: ^1.4.4 version: 1.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2) diff --git a/projects/app/src/pageComponents/account/model/ModelDashboard/index.tsx b/projects/app/src/pageComponents/account/model/ModelDashboard/index.tsx index bd7aaebb5..d5e1aa60d 100644 --- a/projects/app/src/pageComponents/account/model/ModelDashboard/index.tsx +++ b/projects/app/src/pageComponents/account/model/ModelDashboard/index.tsx @@ -4,7 +4,7 @@ import { Box, Grid, HStack, useTheme } from '@chakra-ui/react'; import MyBox from '@fastgpt/web/components/common/MyBox'; import { useRequest2 } from '@fastgpt/web/hooks/useRequest'; import { useTranslation } from 'next-i18next'; -import { addDays, addHours } from 'date-fns'; +import { addHours } from 'date-fns'; import dayjs from 'dayjs'; import DateRangePicker, { type DateRangeType @@ -14,7 +14,7 @@ import MySelect from '@fastgpt/web/components/common/MySelect'; import { getChannelList, getDashboardV2 } from '@/web/core/ai/channel'; import { getSystemModelList } from '@/web/core/ai/config'; import { getModelProvider } from '@fastgpt/global/core/ai/provider'; -import LineChartComponent from './LineChartComponent'; +import LineChartComponent from '@fastgpt/web/components/common/charts/LineChartComponent'; import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs'; import { useSystemStore } from '@/web/common/system/useSystemStore'; import DataTableComponent from './DataTableComponent'; diff --git a/projects/app/src/web/core/ai/channel.ts b/projects/app/src/web/core/ai/channel.ts index 299819826..40f5488a0 100644 --- a/projects/app/src/web/core/ai/channel.ts +++ b/projects/app/src/web/core/ai/channel.ts @@ -117,7 +117,6 @@ export const getChannelList = () => } return b.priority - a.priority; }); - console.log(res); return res; });