From ed42bb6ce84bd2a74fcdb73600ec3ce66d85ef6c Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Mon, 17 Jul 2023 11:04:27 +0800
Subject: [PATCH] feat: charts

---
 client/src/api/app.ts                         |  4 ++--
 client/src/pages/api/app/data/totalUsage.ts   | 22 ++++++++++++++++---
 .../detail/components/Charts/TotalUsage.tsx   |  4 ++--
 .../pages/app/detail/components/Settings.tsx  |  8 +++----
 .../src/pages/number/components/BillTable.tsx |  2 --
 client/src/pages/number/index.tsx             | 12 +++++-----
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/client/src/api/app.ts b/client/src/api/app.ts
index 511a3fd26..d54e6daa1 100644
--- a/client/src/api/app.ts
+++ b/client/src/api/app.ts
@@ -48,6 +48,6 @@ export const triggerModelCollection = (appId: string) =>
 export const getAppTotalUsage = (data: { appId: string }) =>
   POST<{ total: number; date: Date }[]>(`/app/data/totalUsage`, {
     ...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)
   });
diff --git a/client/src/pages/api/app/data/totalUsage.ts b/client/src/pages/api/app/data/totalUsage.ts
index b34cbe19c..97e68965c 100644
--- a/client/src/pages/api/app/data/totalUsage.ts
+++ b/client/src/pages/api/app/data/totalUsage.ts
@@ -3,11 +3,27 @@ import { jsonRes } from '@/service/response';
 import { connectToDatabase, Bill } from '@/service/mongo';
 import { authUser } from '@/service/utils/auth';
 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) {
   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 });
 
     await connectToDatabase();
@@ -41,7 +57,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     ]);
 
     jsonRes(res, {
-      data: result
+      data: fillMissingDates(start, end, result)
     });
   } catch (err) {
     jsonRes(res, {
diff --git a/client/src/pages/app/detail/components/Charts/TotalUsage.tsx b/client/src/pages/app/detail/components/Charts/TotalUsage.tsx
index aa3959b78..8e6bb2ddc 100644
--- a/client/src/pages/app/detail/components/Charts/TotalUsage.tsx
+++ b/client/src/pages/app/detail/components/Charts/TotalUsage.tsx
@@ -113,7 +113,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
       },
       yAxis: {
         type: 'value',
-        max: Math.max(...data.map((item) => item.total)),
+        splitNumber: 3,
         min: 0
       },
       grid: {
@@ -145,7 +145,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
           data: data.map((item) => item.total),
           type: 'line',
           showSymbol: true,
-          animationDuration: 300,
+          animationDuration: 1000,
           animationEasingUpdate: 'linear',
           areaStyle: {
             color: map['blue'].backgroundColor
diff --git a/client/src/pages/app/detail/components/Settings.tsx b/client/src/pages/app/detail/components/Settings.tsx
index 8ce8ac6bf..e3f966f7b 100644
--- a/client/src/pages/app/detail/components/Settings.tsx
+++ b/client/src/pages/app/detail/components/Settings.tsx
@@ -1,5 +1,5 @@
-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 { useRouter } from 'next/router';
 import { useUserStore } from '@/store/user';
@@ -12,10 +12,10 @@ import { AppSchema } from '@/types/mongoSchema';
 
 import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
+import TotalUsage from './Charts/TotalUsage';
 
 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';
 
 const Settings = ({ appId }: { appId: string }) => {
diff --git a/client/src/pages/number/components/BillTable.tsx b/client/src/pages/number/components/BillTable.tsx
index dd932d816..1d65150d3 100644
--- a/client/src/pages/number/components/BillTable.tsx
+++ b/client/src/pages/number/components/BillTable.tsx
@@ -21,8 +21,6 @@ const BillTable = () => {
     data: bills,
     isLoading,
     Pagination,
-    pageSize,
-    total,
     getData
   } = usePagination<UserBillType>({
     api: getUserBills,
diff --git a/client/src/pages/number/index.tsx b/client/src/pages/number/index.tsx
index 368739bba..a7cb51aab 100644
--- a/client/src/pages/number/index.tsx
+++ b/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 {
-    tableType: query?.type || TableEnum.bill
+    props: {
+      tableType: query?.type || TableEnum.bill
+    }
   };
-};
+}
+
+export default NumberSetting;