Merge pull request #221 from SuanmoSuanyangTechnology/feature/app_statistics_zy

feat(web): add app statistics

web/src/i18n/en.ts

@@ -1231,6 +1231,12 @@ export const en = {
       priority: 'Structured Integration',
       addTool: 'Add Tool',
       tool: 'Tool',
+
+      statistics: 'Data Statistics',
+      daily_conversations: 'Daily Conversations',
+      daily_new_users: 'Daily New Users',
+      daily_api_calls: 'Daily API Calls',
+      daily_tokens: 'Token Consumption',
     },
     userMemory: {
       userMemory: 'User Memory',

web/src/i18n/zh.ts

@@ -658,7 +658,13 @@ export const zh = {
       priority: '结构化整合',
       addTool: '添加工具',
       tool: '工具',
-      variableConfig: '配置变量'
+      variableConfig: '配置变量',
+
+      statistics: '数据统计',
+      daily_conversations: '消息会话数',
+      daily_new_users: '新增用户数',
+      daily_api_calls: '调用次数',
+      daily_tokens: 'Token消耗',
     },
     role: {
       roleManagement: '角色管理',

web/src/views/ApplicationConfig/Statistics.tsx

@@ -0,0 +1,86 @@
+import { type FC, useState, useEffect } from 'react';
+import { Row, Col, Flex, DatePicker } from 'antd';
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs';
+
+const { RangePicker } = DatePicker;
+
+import type { Application } from '@/views/ApplicationManagement/types'
+import { getAppStatistics } from '@/api/application';
+import LineCard from './components/LineCard'
+import type { StatisticsData, StatisticsItem } from './types'
+
+const TotalObj: Record<string, keyof StatisticsData> = {
+  daily_conversations: 'total_conversations',
+  daily_new_users: 'total_new_users',
+  daily_api_calls: 'total_api_calls',
+  daily_tokens: 'total_tokens',
+}
+const Statistics: FC<{ application: Application | null }> = ({ application }) => {
+  const [data, setData] = useState<StatisticsData>({
+    daily_conversations: [],
+    total_conversations: 0,
+    daily_new_users: [],
+    total_new_users: 0,
+    daily_api_calls: [],
+    total_api_calls: 0,
+    daily_tokens: [],
+    total_tokens: 0
+  })
+  const [query, setQuery] = useState({
+    start_date: dayjs().subtract(6, 'd'),
+    end_date: dayjs().subtract(0, 'd'),
+  })
+
+  useEffect(() => {
+    getData()
+  }, [application, query])
+  const getData = () => {
+    if (!application?.id) {
+      return
+    }
+    const params = {
+      start_date: query.start_date.startOf('d').valueOf(),
+      end_date: query.end_date.endOf('d').valueOf(),
+    }
+
+    getAppStatistics(application.id, params)
+      .then(res => {
+        setData(res as StatisticsData)
+      })
+  }
+  const handleChange = (date: [Dayjs | null, Dayjs | null] | null) => {
+    if (!date || !date[0] || !date[1]) return
+    setQuery({
+      start_date: date[0],
+      end_date: date[1],
+    })
+  }
+  return (
+    <div className="rb:w-250 rb:mt-5 rb:pb-5 rb:mx-auto">
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Flex justify="end">
+            <RangePicker defaultValue={[query.start_date, query.end_date]} onChange={handleChange} />
+          </Flex>
+        </Col>
+        {Object.entries(data).map(([key, value]) => {
+          if (key.includes('total')) {
+            return null
+          }
+          const totalKey = TotalObj[key];
+          return (
+            <Col span={12} key={key}>
+              <LineCard
+                type={key}
+                total={totalKey ? (data[totalKey] as number) : 0}
+                chartData={value as StatisticsItem[]}
+              />
+            </Col>
+          )
+        })}
+      </Row>
+    </div>
+  );
+}
+export default Statistics;

web/src/views/ApplicationConfig/components/ConfigHeader.tsx

@@ -17,7 +17,7 @@ import CopyModal from './CopyModal'
 
 const { Header } = Layout;
 
-const tabKeys = ['arrangement', 'api', 'release']
+const tabKeys = ['arrangement', 'api', 'release', 'statistics']
 const menuIcons: Record<string, string> = {
   edit: editIcon,
   copy: copyIcon,

web/src/views/ApplicationConfig/components/LineCard.tsx

@@ -0,0 +1,127 @@
+import { type FC, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactEcharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import Empty from '@/components/Empty'
+
+import Card from './Card'
+import type { StatisticsItem } from '../types'
+
+interface LineCardProps {
+  chartData: StatisticsItem[];
+  type: string;
+  total: number;
+}
+
+const SeriesConfig = {
+  type: 'line',
+  stack: 'Total',
+  smooth: true,
+  lineStyle: {
+    width: 3
+  },
+  showSymbol: true,
+  label: {
+    show: false,
+    position: 'top'
+  },
+  emphasis: {
+    focus: 'series'
+  },
+}
+
+const ColorObj: Record<string, string> = {
+  daily_conversations: '#FFB048',
+  daily_new_users: '#4DA8FF',
+  daily_api_calls: '#155EEF',
+  daily_tokens: '#AD88FF'
+}
+
+const LineCard: FC<LineCardProps> = ({ chartData, type, total }) => {
+  const { t } = useTranslation()
+  const chartRef = useRef<ReactEcharts>(null);
+
+  useEffect(() => {
+
+  }, [chartData])
+
+  const getSeries = () => {
+    return [{
+      ...SeriesConfig,
+      name: t(`application.${type}`),
+      data: chartData.map(vo => vo.count),
+      areaStyle: {
+        opacity: 0.8,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: ColorObj[type] },
+          { offset: 1, color: '#FFFFFF' }
+        ])
+      },
+    }]
+  }
+
+  return (
+    <Card
+      title={<div>{t(`application.${type}`)} <span className="rb:text-[#155EEF] rb:font-medium rb:text-[18px]">{total}</span></div>}
+    >
+      {chartData && chartData.length > 0 ? (
+        <ReactEcharts
+          ref={chartRef}
+          option={{
+            color: [ColorObj[type]],
+            tooltip: {
+              trigger: 'axis',
+              extraCssText: 'box-shadow: 0px 2px 6px 0px rgba(33,35,50,0.16); border-radius: 8px;',
+              axisPointer: {
+                type: 'line',
+                crossStyle: {
+                  color: '#5F6266',
+                },
+                lineStyle: {
+                  color: '#5F6266',
+                },
+                label: {
+                  show: false
+                }
+              },
+            },
+
+            grid: {
+              top: 10,
+              left: 15,
+              right: 40,
+              bottom: 0,
+              containLabel: true
+            },
+            xAxis: {
+              type: 'category',
+              data: chartData.map(item => item.date),
+              boundaryGap: false,
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                color: '#A8A9AA',
+                fontFamily: 'PingFangSC, PingFang SC',
+                align: 'right',
+                lineHeight: 17,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#EBEBEB',
+                }
+              },
+            },
+            series: getSeries()
+          }}
+          style={{ height: '265px', width: '100%', minWidth: '100%', boxSizing: 'border-box' }}
+          opts={{ renderer: 'canvas' }}
+          notMerge={true}
+          lazyUpdate={true}
+        />
+      ) : <Empty size={120} className="rb:mt-12 rb:mb-20.25" />}
+    </Card>
+  )
+}
+
+export default LineCard

web/src/views/ApplicationConfig/index.tsx

@@ -9,6 +9,7 @@ import ReleasePage from './ReleasePage'
 import Cluster from './Cluster'
 import { getApplication } from '@/api/application'
 import Workflow from '@/views/Workflow';
+import Statistics from './Statistics'
 
 const ApplicationConfig: React.FC = () => {
   const { id } = useParams();
@@ -68,6 +69,7 @@ const ApplicationConfig: React.FC = () => {
       {activeTab === 'arrangement' && application?.type === 'workflow' && <Workflow ref={workflowRef} />}
       {activeTab === 'api' && <Api application={application} />}
       {activeTab === 'release' && <ReleasePage data={application as Application} refresh={getApplicationInfo} />}
+      {activeTab === 'statistics' && <Statistics application={application} />}
     </>
   );
 };

web/src/views/ApplicationConfig/types.ts

@@ -150,4 +150,19 @@ export interface AiPromptForm {
 }
 export interface ChatVariableConfigModalRef {
   handleOpen: (values: Variable[]) => void;
+}
+
+export interface StatisticsItem {
+  count: number;
+  date: string;
+}
+export interface StatisticsData {
+  daily_conversations: StatisticsItem[];
+  daily_new_users: StatisticsItem[];
+  daily_api_calls: StatisticsItem[];
+  daily_tokens: StatisticsItem[];
+  total_conversations: number;
+  total_new_users: number;
+  total_api_calls: number;
+  total_tokens: number;
 }