feat: charts

client/src/api/app.ts

@@ -48,6 +48,6 @@ export const triggerModelCollection = (appId: string) =>
 export const getAppTotalUsage = (data: { appId: string }) =>
 export const getAppTotalUsage = (data: { appId: string }) =>
   POST<{ total: number; date: Date }[]>(`/app/data/totalUsage`, {
   POST<{ total: number; date: Date }[]>(`/app/data/totalUsage`, {
     ...data,
     ...data,
-    start: addDays(new Date(), -7),
-    end: new Date()
+    start: addDays(new Date(), -13).setHours(0, 0, 0, 0),
+    end: addDays(new Date(), 1).setHours(0, 0, 0, 0)
   });
   });

client/src/pages/api/app/data/totalUsage.ts

@@ -3,11 +3,27 @@ import { jsonRes } from '@/service/response';
 import { connectToDatabase, Bill } from '@/service/mongo';
 import { connectToDatabase, Bill } from '@/service/mongo';
 import { authUser } from '@/service/utils/auth';
 import { authUser } from '@/service/utils/auth';
 import { Types } from 'mongoose';
 import { Types } from 'mongoose';
+import dayjs from 'dayjs';
+import { addDays, isSameDay } from 'date-fns';
+
+const fillMissingDates = (start: number, end: number, data: { date: Date; total: number }[]) => {
+  const result: { date: Date; total: number }[] = [];
+  const dayStart = dayjs(start);
+  const dayEnd = dayjs(end);
+  const diff = +dayEnd.diff(dayStart, 'day');
+
+  for (let i = 0; i < diff; i++) {
+    const date = addDays(start, i);
+    const dataItem = data.find((item) => isSameDay(date, item.date));
+    result[i] = { date, total: dataItem?.total || 0 };
+  }
+
+  return result;
+};
 
 
-/* get one app chat history content number. */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
   try {
-    const { appId, start, end } = req.body as { appId: string; start: Date; end: Date };
+    const { appId, start, end } = req.body as { appId: string; start: number; end: number };
     const { userId } = await authUser({ req, authToken: true });
     const { userId } = await authUser({ req, authToken: true });
 
 
     await connectToDatabase();
     await connectToDatabase();
@@ -41,7 +57,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     ]);
     ]);
 
 
     jsonRes(res, {
     jsonRes(res, {
-      data: result
+      data: fillMissingDates(start, end, result)
     });
     });
   } catch (err) {
   } catch (err) {
     jsonRes(res, {
     jsonRes(res, {

client/src/pages/app/detail/components/Charts/TotalUsage.tsx

@@ -113,7 +113,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
       },
       },
       yAxis: {
       yAxis: {
         type: 'value',
         type: 'value',
-        max: Math.max(...data.map((item) => item.total)),
+        splitNumber: 3,
         min: 0
         min: 0
       },
       },
       grid: {
       grid: {
@@ -145,7 +145,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
           data: data.map((item) => item.total),
           data: data.map((item) => item.total),
           type: 'line',
           type: 'line',
           showSymbol: true,
           showSymbol: true,
-          animationDuration: 300,
+          animationDuration: 1000,
           animationEasingUpdate: 'linear',
           animationEasingUpdate: 'linear',
           areaStyle: {
           areaStyle: {
             color: map['blue'].backgroundColor
             color: map['blue'].backgroundColor

client/src/pages/app/detail/components/Settings.tsx

-import React, { useCallback, useState, useMemo } from 'react';
-import { Box, Flex, Button, Grid, useTheme, BoxProps, IconButton } from '@chakra-ui/react';
+import React, { useCallback, useState } from 'react';
+import { Box, Flex, Button, Grid, useTheme, IconButton } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import { useUserStore } from '@/store/user';
 import { useUserStore } from '@/store/user';
@@ -12,10 +12,10 @@ import { AppSchema } from '@/types/mongoSchema';
 
 
 import Avatar from '@/components/Avatar';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
 import MyIcon from '@/components/Icon';
+import TotalUsage from './Charts/TotalUsage';
 
 
 const InfoModal = dynamic(() => import('./InfoModal'));
 const InfoModal = dynamic(() => import('./InfoModal'));
-const TotalUsage = dynamic(() => import('./Charts/TotalUsage'), { ssr: false });
-const AppEdit = dynamic(() => import('./edit'), { ssr: false });
+const AppEdit = dynamic(() => import('./edit'), { ssr: true });
 import styles from '../../list/index.module.scss';
 import styles from '../../list/index.module.scss';
 
 
 const Settings = ({ appId }: { appId: string }) => {
 const Settings = ({ appId }: { appId: string }) => {

client/src/pages/number/components/BillTable.tsx

@@ -21,8 +21,6 @@ const BillTable = () => {
     data: bills,
     data: bills,
     isLoading,
     isLoading,
     Pagination,
     Pagination,
-    pageSize,
-    total,
     getData
     getData
   } = usePagination<UserBillType>({
   } = usePagination<UserBillType>({
     api: getUserBills,
     api: getUserBills,

client/src/pages/number/index.tsx

@@ -278,10 +278,12 @@ const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => {
   );
   );
 };
 };
 
 
-export default NumberSetting;
-
-NumberSetting.getInitialProps = ({ query, req }: any) => {
+export async function getServerSideProps({ query }: any) {
   return {
   return {
+    props: {
       tableType: query?.type || TableEnum.bill
       tableType: query?.type || TableEnum.bill
+    }
   };
   };
-};
+}
+
+export default NumberSetting;