import React , { FC } from 'react' ; import { Text , StyleSheet } from 'react-native' ; import { useTranslation } from 'react-i18next' ; import { sub , startOfDay , isAfter } from 'date-fns' ; import { DataByDate } from '../../services/api' ; import { Card } from '../atoms/card' ; import { TabButtons } from '../atoms/tab-buttons' ; import { Spacing } from '../atoms/spacing' ; import { TrendChart , TrendChartProps } from '../molecules/trend-chart' ; import { text } from '../../theme' ; import { useApplication } from '../../providers/context' ; interface TrendChartCardProps extends Omit < TrendChartProps , 'a11yLabelKey' > { title ? : string ; primaryColor ? : string ; backgroundColor ? : string ; a11yLabelKeys ? : string [ ] ; data : DataByDate ; } function extractLatest ( data ) { const [ lastTimestamp ] = data [ data . length - 1 ] ; return lastTimestamp ; } export const TrendChartCard = ( { title , data , primaryColor , backgroundColor , a11yLabelKeys = [ 'confirmedChart:label:default' , 'confirmedChart:label:months' , 'confirmedChart:label:all' ] , ... areaChartProps } ) => { const { chartsTabIndex , setContext } = useApplication ( ) ; const setSelectedIndex = ( index ) => { setContext ( { chartsTabIndex : index } ) ; } ; const { t } = useTranslation ( ) ; const tabLabels = [ t ( 'confirmedChart:ranges:default' ) , t ( 'confirmedChart:ranges:months' ) , t ( 'confirmedChart:ranges:all' ) ] ; const lastTimestamp = extractLatest ( data ) ; const lastDate = startOfDay ( new Date ( lastTimestamp ) ) ; const tabFirstDates = [ sub ( lastDate , { weeks : 2 } ) , sub ( lastDate , { months : 2 } ) , null ] ; const firstDate = tabFirstDates [ chartsTabIndex ] ; const filteredData = data . filter ( ( [ dateStr ] ) => ! firstDate || isAfter ( startOfDay ( new Date ( dateStr ) ) , firstDate ) ) ; const tabChartTypes = [ 'bar' , 'area' , 'area' ] as const ; const chartType = tabChartTypes [ chartsTabIndex ] ; return ( < Card > { title && ( < > < Text style = { styles . title } > { title } < /Text> < Spacing s = { 20 } / > < />)} < TabButtons tabLabels = { tabLabels } selectedIndex = { chartsTabIndex } onChange = { setSelectedIndex } / > < Spacing s = { 24 } /> < TrendChart data = { filteredData } chartType = { chartType } primaryColor = { primaryColor } backgroundColor = { backgroundColor } a11yLabelKey = { a11yLabelKeys [ chartsTabIndex ] } { ... areaChartProps } /> < Spacing s = { 8 } / > < /Card>); } ; const styles = StyleSheet . create ( { title : { ... text . defaultBold } , stats : { flexDirection : 'row' , justifyContent : 'center' , alignItems : 'center' } , date : { ... text . default , textAlign : 'center' } } ) ;