feat: value and unit

web/app/components/app/overview/appChart.tsx

@@ -77,6 +77,8 @@ export type IChartProps = {
   className?: string
   basicInfo: { title: string; explanation: string; timePeriod: string }
   valueKey?: string
+  isAvg?: boolean
+  unit?: string
   yMax?: number
   chartType: IChartType
   chartData: AppDailyConversationsResponse | AppDailyEndUsersResponse | AppTokenCostsResponse | { data: Array<{ date: string; count: number }> }
@@ -87,6 +89,8 @@ const Chart: React.FC<IChartProps> = ({
   chartType = 'conversations',
   chartData,
   valueKey,
+  isAvg,
+  unit = '',
   yMax,
   className,
 }) => {
@@ -213,8 +217,7 @@ const Chart: React.FC<IChartProps> = ({
       },
     ],
   }
-
-  const sumData = sum(yData)
+  const sumData = isAvg ? (sum(yData) / yData.length) : sum(yData)
 
   return (
     <div className={`flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-sm ${className ?? ''}`}>
@@ -223,7 +226,7 @@ const Chart: React.FC<IChartProps> = ({
       </div>
       <div className='mb-4'>
         <Basic
-          name={chartType !== 'costs' ? sumData.toLocaleString() : `${sumData < 1000 ? sumData : (`${formatNumber(Math.round(sumData / 1000))}k`)}`}
+          name={chartType !== 'costs' ? (sumData.toLocaleString() + unit) : `${sumData < 1000 ? sumData : (`${formatNumber(Math.round(sumData / 1000))}k`)}`}
           type={!CHART_TYPE_CONFIG[chartType].showTokens
             ? ''
             : <span>{t('appOverview.analysis.tokenUsage.consumed')} Tokens<span className='text-sm'>
@@ -238,9 +241,9 @@ const Chart: React.FC<IChartProps> = ({
   )
 }
 
-const getDefaultChartData = ({ start, end }: { start: string; end: string }) => {
+const getDefaultChartData = ({ start, end, key = 'count' }: { start: string; end: string; key?: string }) => {
   const diffDays = dayjs(end).diff(dayjs(start), 'day')
-  return Array.from({ length: diffDays || 1 }, () => ({ date: '', count: 0 })).map((item, index) => {
+  return Array.from({ length: diffDays || 1 }, () => ({ date: '', [key]: 0 })).map((item, index) => {
     item.date = dayjs(start).add(index, 'day').format(commonDateFormat)
     return item
   })
@@ -283,9 +286,10 @@ export const AvgSessionInteractions: FC<IBizChartProps> = ({ id, period }) => {
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
     basicInfo={{ title: t('appOverview.analysis.avgSessionInteractions.title'), explanation: t('appOverview.analysis.avgSessionInteractions.explanation'), timePeriod: period.name }}
-    chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query) } as any}
+    chartData={!noDataFlag ? response : { data: getDefaultChartData({ ...period.query, key: 'interactions' }) } as any}
     chartType='conversations'
     valueKey='interactions'
+    isAvg
     {...(noDataFlag && { yMax: 500 })}
   />
 }
@@ -298,9 +302,11 @@ export const AvgResponseTime: FC<IBizChartProps> = ({ id, period }) => {
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
     basicInfo={{ title: t('appOverview.analysis.avgResponseTime.title'), explanation: t('appOverview.analysis.avgResponseTime.explanation'), timePeriod: period.name }}
-    chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query) } as any}
+    chartData={!noDataFlag ? response : { data: getDefaultChartData({ ...period.query, key: 'latency' }) } as any}
     valueKey='latency'
     chartType='conversations'
+    isAvg
+    unit={t('appOverview.analysis.ms') as string}
     {...(noDataFlag && { yMax: 500 })}
   />
 }
@@ -313,10 +319,12 @@ export const UserSatisfactionRate: FC<IBizChartProps> = ({ id, period }) => {
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
     basicInfo={{ title: t('appOverview.analysis.userSatisfactionRate.title'), explanation: t('appOverview.analysis.userSatisfactionRate.explanation'), timePeriod: period.name }}
-    chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query) } as any}
+    chartData={!noDataFlag ? response : { data: getDefaultChartData({ ...period.query, key: 'rate' }) } as any}
     valueKey='rate'
     chartType='endUsers'
-    {...(noDataFlag && { yMax: 500 })}
+    isAvg
+    unit='%'
+    {...(noDataFlag && { yMax: 1 })}
   />
 }
 

web/i18n/lang/app-overview.en.ts

@@ -71,6 +71,7 @@ const translation = {
   },
   analysis: {
     title: 'Analysis',
+    ms: 'ms',
     totalMessages: {
       title: 'Total Messages',
       explanation: 'Daily AI interactions count; prompt engineering/debugging excluded.',

web/i18n/lang/app-overview.zh.ts

@@ -71,6 +71,7 @@ const translation = {
   },
   analysis: {
     title: '分析',
+    ms: '毫秒',
     totalMessages: {
       title: '全部消息数',
       explanation: '反映 AI 每天的互动总次数，每回答用户一个问题算一条 Message。提示词编排和调试的消息不计入。',