perf: dashboard (#5038)

* perf: dashboard * fix: path

perf: dashboard (#5038)
* perf: dashboard * fix: path
450d0a54 · Archer · GitHub · 9d6a48a6 · 450d0a54 · 450d0a54
Commit 450d0a54 authored Jun 16, 2025 by Archer Committed by GitHub Jun 16, 2025
11 changed files
--- a/projects/app/src/pageComponents/account/model/ModelDashboard/LineChartComponent.tsx
+++ b/projects/app/src/pageComponents/account/model/ModelDashboard/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 },
+      ...(enableIncremental
-      { label: t('account_model:chart_mode_cumulative'), value: 'cumulative' as const }
+        ? [{ 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 = ({
        </Box>
        <HStack spacing={2}>
          {HeaderLeftChildren}
-          {enableCumulative && (
+          {tabList.length > 1 && (
            <FillRowTabs<'incremental' | 'cumulative'>
              list={tabList}
              py={0.5}
@@ -177,14 +192,14 @@ const LineChartComponent = ({
          <XAxis
            dataKey="x"
            tickMargin={10}
-            tick={{ fontSize: '12px', color: theme.colors.myGray['500'], fontWeight: '500' }}
+            tick={{ fontSize: '12px', color: theme?.colors?.myGray['500'], fontWeight: '500' }}
            interval="preserveStartEnd"
          />
          <YAxis
            axisLine={false}
            tickSize={0}
            tickMargin={10}
-            tick={{ fontSize: '12px', color: theme.colors.myGray['500'], fontWeight: '500' }}
+            tick={{ fontSize: '12px', color: theme?.colors?.myGray['500'], fontWeight: '500' }}
            interval="preserveStartEnd"
            tickFormatter={formatYAxisNumber}
          />

--- 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",

--- 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",

--- 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",

--- 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}} 的搜索结果",

--- 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",

--- 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}} 的搜尋結果",

--- 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",

--- 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)

--- 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';

--- 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;
  });