/* * Copyright (C) 2020 HERE Europe B.V. * Licensed under MIT, see full license in LICENSE * SPDX-License-Identifier: MIT */ import React, { useState, useEffect, useMemo } from "react" import dayjs from "dayjs" import { Box, Slider, SliderTrack, SliderFilledTrack, SliderThumb, Icon, Text, Flex, Badge, Heading, } from "@chakra-ui/core" import groupBy from "lodash/groupBy" import { useDebounce } from "use-debounce" import { useDataDate } from "../../utils/store" import TimeSeries from "../TimeSeries" import BlinkingDot from "../BlinkingDot" const TimeSlider = ({ points }) => { const updateDate = useDataDate(state => state.updateDate) const uniqDays = useMemo(() => { const headers = points[0].properties.headers.split(";;") const allDates = headers .filter(d => { return d.includes("/" && ":" && "pm") || d.includes("/" && ":" && "am") }) .sort((a, b) => { const date1 = new Date(a).getTime() const date2 = new Date(b).getTime() return date1 - date2 }) const uniqDates = groupBy(allDates, o => { return dayjs(o).format("DD-MM-YYYY") }) const uniqDays = Object.keys(uniqDates).map(d => { return uniqDates[d][uniqDates[d].length - 1] }) return uniqDays }, [points]) const [currentDate, setCurrentDate] = useState(uniqDays.length - 1) const [debouncedCurrentDate] = useDebounce(currentDate, 150) useEffect(() => { updateDate(uniqDays[debouncedCurrentDate]) }, [debouncedCurrentDate, uniqDays, updateDate]) return ( <Box mt="2rem"> <Heading fontSize="md" as="h3" mb="0.5rem"> { "Timeline" } </Heading> <Flex mb="-0.75rem" zIndex={10} position="relative"> <Badge display="inline-flex" alignItems="center" bg="#FBDFCF" color="#ec610e" fontSize="sm"> <BlinkingDot /> { currentDate === uniqDays.length - 1 ? dayjs(points[0].properties["@ns:com:here:xyz"].updatedAt).format("DD MMM YYYY h:mm a") : dayjs(uniqDays[currentDate]).format("DD MMM YYYY") } </Badge> </Flex> <TimeSeries points={points} dates={uniqDays} currentDate={currentDate} /> <Box mr="2px"> <Slider defaultValue={uniqDays.length - 1} min={0} max={uniqDays.length - 1} value={currentDate} onChange={val => setCurrentDate(val)} > <SliderTrack /> <SliderFilledTrack bg="#ec610e" /> <SliderThumb size="1.5rem" ml="-0.25rem"> <Icon name="arrows" color="#ec610e" /> </SliderThumb> </Slider> </Box> <Flex justifyContent="space-between"> <Text fontSize="sm" color="gray.600" mt="-0.5rem"> { dayjs(uniqDays[0]).format("DD MMM YYYY") } </Text> <Text fontSize="sm" color="gray.600" mt="-0.5rem"> { dayjs(uniqDays[uniqDays.length - 1]).format("DD MMM YYYY") } </Text> </Flex> </Box> ) } export default TimeSlider