326 lines
12 KiB
TypeScript
326 lines
12 KiB
TypeScript
|
import { useEffect, useState, useCallback, useMemo } from 'react';
|
|||
|
|
import { Spin } from 'antd';
|
|||
|
|
import { ApexOptions } from 'apexcharts';
|
|||
|
|
import ReactApexChart from 'react-apexcharts';
|
|||
|
|
import { MonthlySums, Result, ChartOneState } from './type';
|
|||
|
|
import dayjs from 'dayjs';
|
|||
|
|
|
|||
|
|
const VisitorsStatisChat = () => {
|
|||
|
|
const [result, setResult] = useState<Result | null>(null);
|
|||
|
|
const [scope, setScope] = useState<"day" | "month" | "year">("day");
|
|||
|
|
const [startDate, setStartDate] = useState(dayjs(new Date()).subtract(7, "day").format("YYYY/MM/DD"));
|
|||
|
|
const [endDate, setEndDate] = useState(dayjs(new Date()).format("YYYY/MM/DD"));
|
|||
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|||
|
|
|
|||
|
|
// Echarts相关配置
|
|||
|
|
const [options, setOptions] = useState<ApexOptions>({
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
position: 'top',
|
|||
|
|
horizontalAlign: 'left',
|
|||
|
|
},
|
|||
|
|
colors: ['#3C50E0', '#80CAEE'],
|
|||
|
|
chart: {
|
|||
|
|
fontFamily: 'Satoshi, sans-serif',
|
|||
|
|
height: 335,
|
|||
|
|
type: 'area',
|
|||
|
|
dropShadow: {
|
|||
|
|
enabled: true,
|
|||
|
|
color: '#623CEA14',
|
|||
|
|
top: 10,
|
|||
|
|
blur: 4,
|
|||
|
|
left: 0,
|
|||
|
|
opacity: 0.1,
|
|||
|
|
},
|
|||
|
|
toolbar: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
responsive: [
|
|||
|
|
{
|
|||
|
|
breakpoint: 1024,
|
|||
|
|
options: {
|
|||
|
|
chart: {
|
|||
|
|
height: 300,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
breakpoint: 1366,
|
|||
|
|
options: {
|
|||
|
|
chart: {
|
|||
|
|
height: 350,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
stroke: {
|
|||
|
|
width: [2, 2],
|
|||
|
|
curve: 'straight',
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
xaxis: {
|
|||
|
|
lines: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yaxis: {
|
|||
|
|
lines: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
dataLabels: {
|
|||
|
|
enabled: false,
|
|||
|
|
},
|
|||
|
|
markers: {
|
|||
|
|
size: 4,
|
|||
|
|
colors: '#fff',
|
|||
|
|
strokeColors: ['#3056D3', '#80CAEE'],
|
|||
|
|
strokeWidth: 3,
|
|||
|
|
strokeOpacity: 0.9,
|
|||
|
|
strokeDashArray: 0,
|
|||
|
|
fillOpacity: 1,
|
|||
|
|
discrete: [],
|
|||
|
|
hover: {
|
|||
|
|
size: undefined,
|
|||
|
|
sizeOffset: 5,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
xaxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
categories: [],
|
|||
|
|
axisBorder: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTicks: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yaxis: {
|
|||
|
|
title: {
|
|||
|
|
style: {
|
|||
|
|
fontSize: '0px',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 核心数据
|
|||
|
|
const [state, setState] = useState<ChartOneState>({
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '访客数量',
|
|||
|
|
data: [],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'IP数量',
|
|||
|
|
data: [],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 获取统计数据
|
|||
|
|
const getDataList = useCallback(async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
|
|||
|
|
const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
|
|||
|
|
const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
|
|||
|
|
|
|||
|
|
const response = await fetch(`/api/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${startDate}&end_date=${endDate}&metrics=pv_count%2Cip_count&method=overview%2FgetTimeTrendRpt`);
|
|||
|
|
const data = await response.json();
|
|||
|
|
const { result } = data;
|
|||
|
|
setResult(result);
|
|||
|
|
|
|||
|
|
setLoading(false);
|
|||
|
|
}, [startDate, endDate]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
getDataList();
|
|||
|
|
}, [getDataList]);
|
|||
|
|
|
|||
|
|
// 切换不同范围的数据
|
|||
|
|
const scopeData = useMemo(() => {
|
|||
|
|
if (!result?.items?.length) return { categories: [], series: [[], []] };
|
|||
|
|
|
|||
|
|
let categories = [];
|
|||
|
|
let pvList = [];
|
|||
|
|
let ipList = [];
|
|||
|
|
|
|||
|
|
switch (scope) {
|
|||
|
|
case "day":
|
|||
|
|
categories = result.items[0].map((item: string[]) => {
|
|||
|
|
const year = new Date().getFullYear() + "/";
|
|||
|
|
return item[0].replace(year, "");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
pvList = result.items[1].map((item: number[]) => item[0]);
|
|||
|
|
ipList = result.items[1].map((item: number[]) => item[1]);
|
|||
|
|
break;
|
|||
|
|
case "month":
|
|||
|
|
const datesArray: string[][] = result.items[0];
|
|||
|
|
const valuesArray: (string | number)[][] = result.items[1];
|
|||
|
|
|
|||
|
|
const monthlySums: MonthlySums = {};
|
|||
|
|
|
|||
|
|
datesArray.forEach((dateArray, index) => {
|
|||
|
|
const date: string = dateArray[0];
|
|||
|
|
const [year, month, day] = date.split('/');
|
|||
|
|
|
|||
|
|
if (!monthlySums[month]) {
|
|||
|
|
monthlySums[month] = { pv: 0, ip: 0 };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const pair = valuesArray[index];
|
|||
|
|
|
|||
|
|
if (pair.length === 2) {
|
|||
|
|
const firstValue = parseFloat(pair[0] as string);
|
|||
|
|
const secondValue = parseFloat(pair[1] as string);
|
|||
|
|
|
|||
|
|
if (!isNaN(firstValue) && !isNaN(secondValue)) {
|
|||
|
|
monthlySums[month].pv += firstValue;
|
|||
|
|
monthlySums[month].ip += secondValue;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
categories = Object.keys(monthlySums);
|
|||
|
|
pvList = Object.values(monthlySums).map(item => item.pv);
|
|||
|
|
ipList = Object.values(monthlySums).map(item => item.ip);
|
|||
|
|
break;
|
|||
|
|
case "year":
|
|||
|
|
const yearlySums: { [year: string]: { pv: number, ip: number } } = {};
|
|||
|
|
|
|||
|
|
result.items[0].forEach((dateArray: string[], index: number) => {
|
|||
|
|
const date: string = dateArray[0];
|
|||
|
|
const [year, month, day] = date.split('/');
|
|||
|
|
|
|||
|
|
if (!yearlySums[year]) {
|
|||
|
|
yearlySums[year] = { pv: 0, ip: 0 };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const pair = result.items[1][index];
|
|||
|
|
|
|||
|
|
if (pair.length === 2) {
|
|||
|
|
const firstValue = parseFloat(pair[0] + '');
|
|||
|
|
const secondValue = parseFloat(pair[1] + '');
|
|||
|
|
|
|||
|
|
if (!isNaN(firstValue) && !isNaN(secondValue)) {
|
|||
|
|
yearlySums[year].pv += firstValue;
|
|||
|
|
yearlySums[year].ip += secondValue;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 删除没有数据的年份
|
|||
|
|
Object.keys(yearlySums).forEach(year => {
|
|||
|
|
if (yearlySums[year].pv === 0 && yearlySums[year].ip === 0) {
|
|||
|
|
delete yearlySums[year];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
categories = Object.keys(yearlySums);
|
|||
|
|
pvList = Object.values(yearlySums).map(item => item.pv);
|
|||
|
|
ipList = Object.values(yearlySums).map(item => item.ip);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return { categories, series: [pvList, ipList] };
|
|||
|
|
}, [result, scope]);
|
|||
|
|
|
|||
|
|
// 当数据发生变化时，更新图表选项和状态
|
|||
|
|
useEffect(() => {
|
|||
|
|
setOptions((data) => ({
|
|||
|
|
...data,
|
|||
|
|
xaxis: { ...options.xaxis, categories: scopeData.categories }
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
setState((prevState) => ({
|
|||
|
|
...prevState,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '访客数量',
|
|||
|
|
data: scopeData.series[0],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'IP数量',
|
|||
|
|
data: scopeData.series[1],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}));
|
|||
|
|
}, [scopeData]);
|
|||
|
|
|
|||
|
|
// 处理范围变更并相应地更新日期范围
|
|||
|
|
const handleScopeChange = (newScope: "day" | "month" | "year") => {
|
|||
|
|
setScope(newScope);
|
|||
|
|
switch (newScope) {
|
|||
|
|
case "day":
|
|||
|
|
setStartDate(dayjs(new Date()).subtract(7, "day").format("YYYY/MM/DD"));
|
|||
|
|
break;
|
|||
|
|
case "month":
|
|||
|
|
const year = new Date().getFullYear() + "";
|
|||
|
|
setStartDate(year + "/01/01");
|
|||
|
|
break;
|
|||
|
|
case "year":
|
|||
|
|
setStartDate(dayjs(new Date()).subtract(5, "year").format("YYYY/MM/DD"));
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
|
|||
|
|
<div className="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap">
|
|||
|
|
<div className="flex w-full flex-wrap gap-3 sm:gap-5">
|
|||
|
|
<div className="flex min-w-47.5">
|
|||
|
|
<span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-primary">
|
|||
|
|
<span className="block h-2.5 w-full max-w-2.5 rounded-full bg-primary"></span>
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
<div className="w-full">
|
|||
|
|
<p className="font-semibold text-primary">访客（UV）</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex min-w-47.5">
|
|||
|
|
<span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-secondary">
|
|||
|
|
<span className="block h-2.5 w-full max-w-2.5 rounded-full bg-secondary"></span>
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
<div className="w-full">
|
|||
|
|
<p className="font-semibold text-secondary">IP</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex w-full max-w-45 justify-end">
|
|||
|
|
<div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
|
|||
|
|
<button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark ${scope === "day" ? "bg-white shadow-card" : ""}`} onClick={() => handleScopeChange("day")}>
|
|||
|
|
天
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark ${scope === "month" ? "bg-white shadow-card" : ""}`} onClick={() => handleScopeChange("month")}>
|
|||
|
|
月
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark ${scope === "year" ? "bg-white shadow-card" : ""}`} onClick={() => handleScopeChange("year")}>
|
|||
|
|
年
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Spin spinning={loading}>
|
|||
|
|
<div id="chartOne" className="-ml-5">
|
|||
|
|
<ReactApexChart
|
|||
|
|
options={options}
|
|||
|
|
series={state.series}
|
|||
|
|
type="area"
|
|||
|
|
height={350}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</Spin>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default VisitorsStatisChat;
|