import React, {useContext, useMemo, useCallback} from 'react' import {BarChart2} from 'react-feather' import departements from '@etalab/decoupage-administratif/data/departements.json' import colors from '../../../styles/colors' import {AppContext} from '../../../pages' import {indicatorsList} from '../../../lib/indicators' import Counter from '../../counter' import IndicateurChart from '../../charts/indicateurs-chart' import IndicatorsDepartement from './indicators-departement' import {IndicatorsContext} from '.' const IndicatorsStatistics = () => { const {selectedLocation, setSelectedLocation, isMobileDevice} = useContext(AppContext) const {report, selectedDate, selectedStat, setSelectedStat} = useContext(IndicatorsContext) const [locationType, code] = selectedLocation.split('-') const getIndicatorValue = useCallback(indicator => { const indicatorValue = report[indicator] if (indicatorValue && !isNaN(indicatorValue) && typeof indicatorValue === 'number') { return parseFloat(indicatorValue.toFixed(2)) } return null }, [report]) const departementsRegion = useMemo(() => { if (report && locationType === 'REG') { return departements.filter(d => d.region === code) } return [] }, [locationType, code, report]) return ( <> <div className='header'> {selectedLocation && !isMobileDevice && ( <div onClick={() => setSelectedLocation('FRA')} className='back'><BarChart2 /> <span>France</span></div> )} <h3>COVID-19 - {report ? report.nom : 'France'}</h3> </div> <div className='indicators-container'> {locationType === 'REG' ? ( <> {departementsRegion.map(r => ( <div key={r.code}> <h3>{r.nom}</h3> <IndicatorsDepartement code={r.code} /> </div> ))} </> ) : ( report && !report.code.includes('REG') && // `locationType` peut être désynchronisé de `report` Object.keys(indicatorsList).map(indicator => { const {label, details, min, max} = indicatorsList[indicator] const value = getIndicatorValue(indicator) return ( <div className={`indicators ${selectedStat === indicator ? 'selected' : ''}`} key={indicator} onClick={() => setSelectedStat(indicator)}> <Counter value={value} label={label} details={details} onClick={() => setSelectedStat(indicator)} isPercent={['tauxOccupationRea', 'tauxPositiviteTests'].includes(indicator)} isSelected={selectedStat === indicator} /> <IndicateurChart label={label} metricName={indicator} min={min} max={max} reports={report.history.filter(r => selectedDate >= r.date)} /> </div> ) }) )} </div> <style jsx>{` .header { z-index: 2; text-align: center; position: sticky; top: 0; background-color: white; padding: ${isMobileDevice ? '0.2em' : 0}; box-shadow: 0 1px 4px ${colors.lightGrey}; } .header h3 { margin: 0.4em; } .back { display: flex; align-items: center; justify-content: center; width: 100%; background: ${colors.lighterGrey}; padding: 0.5em; font-size: larger; } .back span { margin: 0 0.5em; } .back:hover { cursor: pointer; background: ${colors.lightGrey}; } .indicators-container { padding: 0.5em; } .indicators { border-radius: 5px; margin-bottom: 0.5em; background: ${colors.lighterGrey}; cursor: pointer } .indicators:hover, .selected{ background: ${colors.lightGrey}; } `}</style> </> ) } export default IndicatorsStatistics