|
@@ -10,8 +10,8 @@ import { useTranslation } from 'react-i18next'
|
|
|
import { formatNumber } from '@/utils/format'
|
|
|
import Basic from '@/app/components/app-sidebar/basic'
|
|
|
import Loading from '@/app/components/base/loading'
|
|
|
-import type { AppDailyConversationsResponse, AppDailyEndUsersResponse, AppTokenCostsResponse } from '@/models/app'
|
|
|
-import { getAppDailyConversations, getAppDailyEndUsers, getAppStatistics, getAppTokenCosts, getWorkflowDailyConversations } from '@/service/apps'
|
|
|
+import type { AppDailyConversationsResponse, AppDailyEndUsersResponse, AppDailyMessagesResponse, AppTokenCostsResponse } from '@/models/app'
|
|
|
+import { getAppDailyConversations, getAppDailyEndUsers, getAppDailyMessages, getAppStatistics, getAppTokenCosts, getWorkflowDailyConversations } from '@/service/apps'
|
|
|
const valueFormatter = (v: string | number) => v
|
|
|
|
|
|
const COLOR_TYPE_MAP = {
|
|
@@ -36,12 +36,15 @@ const COMMON_COLOR_MAP = {
|
|
|
}
|
|
|
|
|
|
type IColorType = 'green' | 'orange' | 'blue'
|
|
|
-type IChartType = 'conversations' | 'endUsers' | 'costs' | 'workflowCosts'
|
|
|
+type IChartType = 'messages' | 'conversations' | 'endUsers' | 'costs' | 'workflowCosts'
|
|
|
type IChartConfigType = { colorType: IColorType; showTokens?: boolean }
|
|
|
|
|
|
const commonDateFormat = 'MMM D, YYYY'
|
|
|
|
|
|
const CHART_TYPE_CONFIG: Record<string, IChartConfigType> = {
|
|
|
+ messages: {
|
|
|
+ colorType: 'green',
|
|
|
+ },
|
|
|
conversations: {
|
|
|
colorType: 'green',
|
|
|
},
|
|
@@ -89,7 +92,7 @@ export type IChartProps = {
|
|
|
unit?: string
|
|
|
yMax?: number
|
|
|
chartType: IChartType
|
|
|
- chartData: AppDailyConversationsResponse | AppDailyEndUsersResponse | AppTokenCostsResponse | { data: Array<{ date: string; count: number }> }
|
|
|
+ chartData: AppDailyMessagesResponse | AppDailyConversationsResponse | AppDailyEndUsersResponse | AppTokenCostsResponse | { data: Array<{ date: string; count: number }> }
|
|
|
}
|
|
|
|
|
|
const Chart: React.FC<IChartProps> = ({
|
|
@@ -258,6 +261,20 @@ const getDefaultChartData = ({ start, end, key = 'count' }: { start: string; end
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+export const MessagesChart: FC<IBizChartProps> = ({ id, period }) => {
|
|
|
+ const { t } = useTranslation()
|
|
|
+ const { data: response } = useSWR({ url: `/apps/${id}/statistics/daily-messages`, params: period.query }, getAppDailyMessages)
|
|
|
+ if (!response)
|
|
|
+ return <Loading />
|
|
|
+ const noDataFlag = !response.data || response.data.length === 0
|
|
|
+ return <Chart
|
|
|
+ basicInfo={{ title: t('appOverview.analysis.totalMessages.title'), explanation: t('appOverview.analysis.totalMessages.explanation'), timePeriod: period.name }}
|
|
|
+ chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) }}
|
|
|
+ chartType='messages'
|
|
|
+ {...(noDataFlag && { yMax: 500 })}
|
|
|
+ />
|
|
|
+}
|
|
|
+
|
|
|
export const ConversationsChart: FC<IBizChartProps> = ({ id, period }) => {
|
|
|
const { t } = useTranslation()
|
|
|
const { data: response } = useSWR({ url: `/apps/${id}/statistics/daily-conversations`, params: period.query }, getAppDailyConversations)
|
|
@@ -265,7 +282,7 @@ export const ConversationsChart: FC<IBizChartProps> = ({ id, period }) => {
|
|
|
return <Loading />
|
|
|
const noDataFlag = !response.data || response.data.length === 0
|
|
|
return <Chart
|
|
|
- basicInfo={{ title: t('appOverview.analysis.totalMessages.title'), explanation: t('appOverview.analysis.totalMessages.explanation'), timePeriod: period.name }}
|
|
|
+ basicInfo={{ title: t('appOverview.analysis.totalConversations.title'), explanation: t('appOverview.analysis.totalConversations.explanation'), timePeriod: period.name }}
|
|
|
chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) }}
|
|
|
chartType='conversations'
|
|
|
{...(noDataFlag && { yMax: 500 })}
|