Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[fix]Fix map json path, map data request API add range date filter condition #97

Open
wants to merge 10 commits into
base: dev
Choose a base branch
from

Conversation

ziwu7
Copy link
Contributor

@ziwu7 ziwu7 commented Sep 10, 2024

Fix map json path, map data request API add range date filter condition

source/page/Map/component/VirusMap.tsx Outdated Show resolved Hide resolved
Comment on lines 89 to 91
export async function getHistory() {
const { body } = await epidemic.get<Province[]>('Area', { Range: '0-9' });
const { body } = await epidemic.get<AreaData[]>(
'Area?updateTime=gt.2022-01-01T10:54:11&updateTime=lt.2022-12-30T10:54:11&countryName=eq.%E4%B8%AD%E5%9B%BD'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

查询参数从函数入口传入,在每次用户点击图表时再次调用查询函数并重绘。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

当前这个api数据是用于渲染地图数据的。
当前的效果是获取某段日期范围内的所有日期数据,全部日期渲染在时间轴,对应的数据渲染到地图,点击时间轴上单个日期则对应渲染数据。

新需求:查询参数从函数入口传入,在每次用户点击图表时再次调用查询函数并重绘。

实现这个需求:
1.前提得先有个全部日期的数组么,因为需要时间轴上先显示所有的日期?
2.然后点击某个日期就显示某个日期数据?这样的话全部日期数据没有全之前,左边的自动播放按钮应该就不生效了吧?

不知是否理解有误,有误的话能否提供个草图讲解下大概效果逻辑。
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

实现这个需求:

  1. 前提得先有个全部日期的数组么,因为需要时间轴上先显示所有的日期?
  2. 然后点击某个日期就显示某个日期数据?这样的话全部日期数据没有全之前,左边的自动播放按钮应该就不生效了吧?

不知是否理解有误,有误的话能否提供个草图讲解下大概效果逻辑。

  1. 我上周例会上讲了,先人为确定一个起止时间(如 2020-01-23 武汉封城至 2023-12-01 全国放开),然后中间的日期即可用代码生成。因为整个疫情是连续时间,每次循环加一天即可。
  2. 无论手动点击还是自动播放,都要写好同样的日期生成、按日期查询的逻辑。

界面设计没有变化,只是在补全逻辑和数据。

…ine button functionality so that a click initiates a REQUEST request that contains only the current date data and renders the data to the map
source/page/Map/component/EChartsMap.tsx Outdated Show resolved Hide resolved
Comment on lines 241 to 261
// 定义开始和结束日期
const startDate = new Date('2022-09-01');
const endDate = new Date('2022-09-29');

// 计算时间间隔(以毫秒为单位)
const interval = 24 * 60 * 60 * 1000; // 一天的毫秒数
const timestampArray = Array.from(
{
length:
(endDate.getTime() - startDate.getTime()) /
(interval as number) +
1
},
(_, i) => {
const date = new Date(startDate);
date.setDate(date.getDate() + i);
return date.getTime();
}
);

return timestampArray;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// 定义开始和结束日期
const startDate = new Date('2022-09-01');
const endDate = new Date('2022-09-29');
// 计算时间间隔(以毫秒为单位)
const interval = 24 * 60 * 60 * 1000; // 一天的毫秒数
const timestampArray = Array.from(
{
length:
(endDate.getTime() - startDate.getTime()) /
(interval as number) +
1
},
(_, i) => {
const date = new Date(startDate);
date.setDate(date.getDate() + i);
return date.getTime();
}
);
return timestampArray;
// 定义疫情开始和结束日期
const startDate = +new Date('2019-12-01');
const endDate = +new Date('2022-12-01');
return Array.from(
{ length: (endDate - startDate) / Day + 1 },
(_, i) => startDate + Day * i
);

https://web-cell.dev/web-utility/variables/Day.html

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果设置日期数量太多的话,时间轴不会自适应自动隐藏,需要修改为动态滑动窗口类型的时间轴吧?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果设置日期数量太多的话,时间轴不会自适应自动隐藏,需要修改为动态滑动窗口类型的时间轴吧?

具体图表的情况我不太清楚,能实现效果就行。

source/page/Map/component/VirusMap.tsx Outdated Show resolved Hide resolved
Comment on lines 88 to 89
//updateTime=gt.2022-01-01T10:54:11&updateTime=lt.2022-12-30T10:54:11 2022-09-29T14:14:55
export async function getHistory(date: string = '2022-09-01') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
//updateTime=gt.2022-01-01T10:54:11&updateTime=lt.2022-12-30T10:54:11 2022-09-29T14:14:55
export async function getHistory(date: string = '2022-09-01') {
export async function getHistory(date = '2022-09-01') {

Comment on lines 133 to 134
// 添加一个方法来更新图表数据
updateChartData(newData) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// 添加一个方法来更新图表数据
updateChartData(newData) {
updateChartData(newData: Province[]) {

source/service/Epidemic.ts Outdated Show resolved Hide resolved
@@ -237,16 +237,24 @@ export class VirusMap extends HTMLElement implements WebCell<VirusMapProps> {
return options;
};

getTimelineData = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
getTimelineData = () => {
get timelineData() {

变成访问器属性就更简洁了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: In progress
Development

Successfully merging this pull request may close these issues.

2 participants