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

feat: add website overview refresh

Browse Source
This commit is contained in:
moonrailgun 2023-09-17 14:41:50 +08:00
parent 440947c9a8
commit 4f4a1cfcef
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/client/api/model/website.ts
View File

@ -128,7 +128,7 @@ export function useWorkspaceWebsitePageview(
startAt: number, startAt: number,
endAt: number endAt: number
) { ) {
const { data, isLoading } = useQuery( const { data, isLoading, refetch } = useQuery(
['websitePageview', { workspaceId, websiteId }], ['websitePageview', { workspaceId, websiteId }],
() => { () => {
return getWorkspaceWebsitePageview(workspaceId, websiteId, { return getWorkspaceWebsitePageview(workspaceId, websiteId, {
@ -144,5 +144,6 @@ export function useWorkspaceWebsitePageview(
pageviews: data?.pageviews ?? [], pageviews: data?.pageviews ?? [],
sessions: data?.sessions ?? [], sessions: data?.sessions ?? [],
isLoading, isLoading,
refetch,
}; };
} }

17
src/client/components/WebsiteOverview.tsx
View File

@ -1,4 +1,4 @@
import { Button, Tag } from 'antd'; import { Button, message, Tag } from 'antd';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { Column, ColumnConfig } from '@ant-design/charts'; import { Column, ColumnConfig } from '@ant-design/charts';
import { ArrowRightOutlined, SyncOutlined } from '@ant-design/icons'; import { ArrowRightOutlined, SyncOutlined } from '@ant-design/icons';
@ -17,6 +17,7 @@ import {
formatDateWithUnit, formatDateWithUnit,
getDateArray, getDateArray,
} from '../utils/date'; } from '../utils/date';
import { useEvent } from '../hooks/useEvent';
interface WebsiteOverviewProps { interface WebsiteOverviewProps {
workspaceId: string; workspaceId: string;
@ -47,13 +48,19 @@ const WebsiteOverviewItem: React.FC<{
const startDate = dayjs().subtract(1, 'day').add(1, unit).startOf(unit); const startDate = dayjs().subtract(1, 'day').add(1, unit).startOf(unit);
const endDate = dayjs().endOf(unit); const endDate = dayjs().endOf(unit);
const { pageviews, sessions, isLoading } = useWorkspaceWebsitePageview( const { pageviews, sessions, isLoading, refetch } =
useWorkspaceWebsitePageview(
props.website.workspaceId, props.website.workspaceId,
props.website.id, props.website.id,
startDate.unix() * 1000, startDate.unix() * 1000,
endDate.unix() * 1000 endDate.unix() * 1000
); );
const handleRefresh = useEvent(async () => {
await refetch();
message.success('Refreshed');
});
const chartData = useMemo(() => { const chartData = useMemo(() => {
const pageviewsArr = getDateArray(pageviews, startDate, endDate, unit); const pageviewsArr = getDateArray(pageviews, startDate, endDate, unit);
const sessionsArr = getDateArray(sessions, startDate, endDate, unit); const sessionsArr = getDateArray(sessions, startDate, endDate, unit);
@ -104,7 +111,11 @@ const WebsiteOverviewItem: React.FC<{
</div> </div>
<div className="flex items-center gap-2 justify-end w-full lg:w-1/3"> <div className="flex items-center gap-2 justify-end w-full lg:w-1/3">
<Button size="large" icon={<SyncOutlined />} /> <Button
size="large"
icon={<SyncOutlined />}
onClick={handleRefresh}
/>
<DateFilter /> <DateFilter />
</div> </div>