-
Notifications
You must be signed in to change notification settings - Fork 140
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
base: dev
Are you sure you want to change the base?
Conversation
and chart performance optimization
map data request API add range date filter condition
source/service/Epidemic.ts
Outdated
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' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
查询参数从函数入口传入,在每次用户点击图表时再次调用查询函数并重绘。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
实现这个需求:
- 前提得先有个全部日期的数组么,因为需要时间轴上先显示所有的日期?
- 然后点击某个日期就显示某个日期数据?这样的话全部日期数据没有全之前,左边的自动播放按钮应该就不生效了吧?
不知是否理解有误,有误的话能否提供个草图讲解下大概效果逻辑。
- 我上周例会上讲了,先人为确定一个起止时间(如 2020-01-23 武汉封城至 2023-12-01 全国放开),然后中间的日期即可用代码生成。因为整个疫情是连续时间,每次循环加一天即可。
- 无论手动点击还是自动播放,都要写好同样的日期生成、按日期查询的逻辑。
界面设计没有变化,只是在补全逻辑和数据。
…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
// 定义开始和结束日期 | ||
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// 定义开始和结束日期 | |
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 | |
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
如果设置日期数量太多的话,时间轴不会自适应自动隐藏,需要修改为动态滑动窗口类型的时间轴吧?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
如果设置日期数量太多的话,时间轴不会自适应自动隐藏,需要修改为动态滑动窗口类型的时间轴吧?
具体图表的情况我不太清楚,能实现效果就行。
source/service/Epidemic.ts
Outdated
//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') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
//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') { |
// 添加一个方法来更新图表数据 | ||
updateChartData(newData) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// 添加一个方法来更新图表数据 | |
updateChartData(newData) { | |
updateChartData(newData: Province[]) { |
@@ -237,16 +237,24 @@ export class VirusMap extends HTMLElement implements WebCell<VirusMapProps> { | |||
return options; | |||
}; | |||
|
|||
getTimelineData = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
getTimelineData = () => { | |
get timelineData() { |
变成访问器属性就更简洁了
Fix map json path, map data request API add range date filter condition