schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add click event for status page item which allow hide/show chart

Browse Source
This commit is contained in:
moonrailgun 2024-10-14 00:28:09 +08:00
parent 3d2971bce2
commit ee192d9686
2 changed files with 12 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/client/components/monitor/MonitorPublicDataChart.tsx
View File

@ -100,10 +100,7 @@ export const MonitorPublicDataChart: React.FC<MonitorPublicDataChartProps> =
domain={['dataMin', 'dataMax']} domain={['dataMin', 'dataMax']}
tickFormatter={(date) => dayjs(date).format('HH:mm')} tickFormatter={(date) => dayjs(date).format('HH:mm')}
/> />
<YAxis <YAxis domain={[isTrendingMode ? 'dataMin' : 0, 'dataMax']} />
mirror
domain={[isTrendingMode ? 'dataMin' : 0, 'dataMax']}
/>
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
<ChartTooltip <ChartTooltip
labelFormatter={(label, payload) => labelFormatter={(label, payload) =>

30
src/client/components/monitor/StatusPage/Body.tsx
View File

@ -1,5 +1,5 @@
import { AppRouterOutput, trpc } from '@/api/trpc'; import { AppRouterOutput, trpc } from '@/api/trpc';
import React, { useMemo } from 'react'; import React, { useMemo, useReducer } from 'react';
import { bodySchema } from './schema'; import { bodySchema } from './schema';
import { Empty } from 'antd'; import { Empty } from 'antd';
import { useTranslation } from '@i18next-toolkit/react'; import { useTranslation } from '@i18next-toolkit/react';
@ -88,6 +88,8 @@ export const StatusItemMonitor: React.FC<{
monitorId: props.monitorId, monitorId: props.monitorId,
}); });
const [showChart, toggleShowChart] = useReducer((state) => !state, false);
const { summaryStatus, summaryPercent } = useMemo(() => { const { summaryStatus, summaryPercent } = useMemo(() => {
let upCount = 0; let upCount = 0;
let totalCount = 0; let totalCount = 0;
@ -112,8 +114,9 @@ export const StatusItemMonitor: React.FC<{
<div> <div>
<div <div
className={cn( className={cn(
'mb-1 flex items-center overflow-hidden rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10' 'mb-1 flex cursor-pointer items-center overflow-hidden rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10'
)} )}
onClick={toggleShowChart}
> >
<div> <div>
<span <span
@ -157,10 +160,12 @@ export const StatusItemMonitor: React.FC<{
</div> </div>
</div> </div>
<MonitorRecentChart {showChart && (
workspaceId={props.workspaceId} <MonitorPublicDataChart
monitorId={props.monitorId} workspaceId={props.workspaceId}
/> monitorId={props.monitorId}
/>
)}
</div> </div>
); );
}); });
@ -207,16 +212,3 @@ const MonitorLatestResponse: React.FC<{
); );
}); });
MonitorLatestResponse.displayName = 'MonitorLatestResponse'; MonitorLatestResponse.displayName = 'MonitorLatestResponse';
export const MonitorRecentChart: React.FC<{
workspaceId: string;
monitorId: string;
}> = React.memo((props) => {
return (
<MonitorPublicDataChart
workspaceId={props.workspaceId}
monitorId={props.monitorId}
/>
);
});
MonitorRecentChart.displayName = 'MonitorRecentChart';