achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成月份统计功能

Browse Source
This commit is contained in:
宇阳
2024-08-15 14:38:26 +08:00
parent c910a350c5
commit bd8dc261d0
2 changed files with 145 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/Charts/ChartOne.tsx
View File

@@ -2,6 +2,7 @@ import { ApexOptions } from 'apexcharts';
import { useEffect, useState } from 'react';
import ReactApexChart from 'react-apexcharts';
import dayjs from 'dayjs'
import { MonthlySums, Result } from './chart';
interface ChartOneState {
series: {
@@ -11,6 +12,8 @@ interface ChartOneState {
}
const ChartOne = () => {
const [result, setResult] = useState<Result>({} as Result)
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"))
@@ -130,41 +133,114 @@ const ChartOne = () => {
useEffect(() => {
const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID
const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN
// fetch(`https://openapi.baidu.com/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`).then(async res => {
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`).then(async res => {
const { result } = await res.json()
console.log(result);
console.log({ result });
setResult(result)
})
}, [scope])
useEffect(() => {
if (!result?.items?.length) return
switch (scope) {
// 处理天数据
case "day":
// 处理分类数据
const categories = result.items[0].map((item: string[]) => {
const categories_weeks = result.items[0].map((item: string[]) => {
const year = new Date().getFullYear() + "/"
return item[0].replace(year, "")
})
setOptions((data) => (
{
...data,
xaxis: { ...options.xaxis, categories }
xaxis: { ...options.xaxis, categories: categories_weeks }
}
))
// 处理访客和IP数据
const pvList = result.items[1].map((item: number[]) => item[0])
const ipList = result.items[1].map((item: number[]) => item[1])
const pvList_weeks = result.items[1].map((item: number[]) => item[0])
const ipList_weeks = result.items[1].map((item: number[]) => item[1])
setState((prevState) => ({
...prevState,
series: [
{
name: '访客数量',
data: pvList,
data: pvList_weeks,
},
{
name: 'IP数量',
data: ipList,
data: ipList_weeks,
},
],
}));
})
}, [])
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;
}
}
});
setOptions((data) => (
{
...data,
xaxis: { ...options.xaxis, categories: Object.keys(monthlySums) }
}
))
const list = Object.values(monthlySums)
// 处理访客和IP数据
const pvList_month = list.map(item => item.pv)
const ipList_month = list.map(item => item.ip)
setState((prevState) => ({
...prevState,
series: [
{
name: '访客数量',
data: pvList_month,
},
{
name: 'IP数量',
data: ipList_month,
},
],
}));
break
case "year":
break
}
}, [result])
const handleReset = () => {
setState((prevState) => ({
@@ -200,22 +276,30 @@ const ChartOne = () => {
<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 bg-white py-1 px-3 text-xs font-medium text-black shadow-card hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark">
周
<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={() => {
setScope("day")
setStartDate(dayjs(new Date()).subtract(7, "day").format("YYYY/MM/DD"))
}}>
天
</button>
<button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
<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={() => {
setScope("month")
const year = new Date().getFullYear() + ""
setStartDate(year + "/01/01")
}}>
月
</button>
<button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
<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={() => {
setScope("year")
}}>
年
</button>
</div>
</div>
</div>
<div>
<div id="chartOne" className="-ml-5">
<ReactApexChart
options={options}
@@ -225,7 +309,6 @@ const ChartOne = () => {
/>
</div>
</div>
</div>
);
};

17
src/components/Charts/chart.d.ts vendored Normal file
View File

@@ -0,0 +1,17 @@
export interface Result {
timeSpan: string[];
fields: string[];
items: [
string[][],
number[][],
any[],
any[]
];
}
export interface MonthlySums {
[key: string]: {
pv: number;
ip: number;
};
}