You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.1 KiB
64 lines
2.1 KiB
import {Image, ScrollView, Text, View} from "@tarojs/components";
|
|
import {FC, useEffect, useState} from "react";
|
|
import style from './lineChart.module.scss'
|
|
import {formatDateTime, formatTime} from "@/utils/time";
|
|
import emptyLineChart from '@/static/img/emptyLineChart.png'
|
|
|
|
export interface lineData {
|
|
time: string
|
|
value: number
|
|
}
|
|
|
|
interface Props {
|
|
data: lineData[]
|
|
}
|
|
|
|
const height = 150
|
|
const LineChart: FC<Props> = ({data}) => {
|
|
const [maxHeight, setMaxHeight] = useState<lineData>({time: '', value: 0})
|
|
const [lineChartList, setLineChartList] = useState(data)
|
|
|
|
useEffect(() => {
|
|
setLineChartList(data)
|
|
setMaxHeight(data.reduce((pre, cur) => {
|
|
if (cur.value > pre.value) {
|
|
return cur
|
|
}
|
|
return pre
|
|
}, {time: formatDateTime(new Date(), 'MM/dd'), value: 0}))
|
|
}, [data])
|
|
|
|
return (
|
|
<>
|
|
<View className={style.records}>
|
|
<Text>{formatDateTime(new Date(maxHeight.time), 'MM月dd日')}</Text>
|
|
{maxHeight.value > 0 ? `日最努力` : `期间没有学习记录`}，学习了{formatTime(maxHeight.value, 0)}
|
|
</View>
|
|
<ScrollView scrollX={!!maxHeight.value} enhanced showScrollbar={false}>
|
|
<View className={style.lineChart}>
|
|
{
|
|
!maxHeight.value && <View className={style.empty}>
|
|
<View>暂无学习记录</View>
|
|
<Image src={emptyLineChart} mode='widthFix' style={{width: '100%'}}/>
|
|
</View>
|
|
}
|
|
{
|
|
!!maxHeight.value
|
|
&& lineChartList.map(d => <View key={d.time}>
|
|
<View className={style.columnBox} style={{width: "100px"}}>
|
|
<View className={style.line} style={{height: height - 10 - (d.value / maxHeight.value * height) + "px"}}/>
|
|
{
|
|
d.value > 0 && <View style={{whiteSpace: "nowrap"}}>{formatTime(d.value, 0)}</View>
|
|
}
|
|
<View className={style.column} style={{height: d.value / maxHeight.value * height + "px"}}/>
|
|
<View>{d.time}</View>
|
|
</View>
|
|
</View>)
|
|
}
|
|
</View>
|
|
</ScrollView>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default LineChart
|
|
|