import React, {useContext, useState, useEffect, useCallback} from 'react' import {BarChart2} from 'react-feather' import colors from '../../../styles/colors' import {AppContext} from '../../../pages' import {getPreviousReport, getReport} from '../../../lib/data' import Counters from './big-picture-counters' import MixedChart from '../../charts/mixed-chart' import IndicateurCumulChart from '../../charts/indicateur-cumul' import IndicateurVariationChart from '../../charts/indicateur-variation' import Button from '../../button' import {BigPictureContext} from '.' const charts = { mixed: { name: 'Tout afficher', chart: MixedChart }, confirmed: { name: 'Cas confirmés', type: 'indicateur', options: { label: 'Cas confirmés', metricName: 'casConfirmes', color: 'orange' } }, hospitalises: { name: 'Patients hospitalisés', type: 'indicateur', options: { label: 'Patients hospitalisés', metricName: 'hospitalises', color: 'darkGrey' } }, nouvellesHospitalisations: { name: 'Nouveaux patients hospitalisés', type: 'indicateur', options: { label: 'Nouveaux patients hospitalisés', metricName: 'nouvellesHospitalisations', color: 'darkGrey' } }, reanimation: { name: 'Patients en réanimation', type: 'indicateur', options: { label: 'Patients en réanimation', metricName: 'reanimation', color: 'darkerGrey' } }, nouvellesReanimations: { name: 'Nouveaux patients en réanimation', type: 'indicateur', options: { label: 'Nouveaux patients en réanimation', metricName: 'nouvellesReanimations', color: 'darkerGrey' } }, deces: { name: 'Décès à l’hôpital', type: 'indicateur', options: { label: 'Décès à l’hôpital', metricName: 'deces', color: 'red' } }, gueris: { name: 'Retours à domicile', type: 'indicateur', options: { label: 'Retours à domicile', metricName: 'gueris', color: 'green' } }, casConfirmesEhpad: { name: 'Cas confirmés', type: 'indicateur', options: { label: 'Cas confirmés', metricName: 'casConfirmesEhpad', color: 'darkOrange' } }, decesEhpad: { name: 'Décès', type: 'indicateur', options: { label: 'Décès', metricName: 'decesEhpad', color: 'darkRed' } }, cumulPremieresInjections: { name: 'Nombre de premières doses injectées', type: 'indicateur', options: { label: 'Nombre de premières doses injectées', metricName: 'cumulPremieresInjections', color: 'green' } } } function getChart(chartName, showVariations) { if (chartName) { if (charts[chartName].chart) { return charts[chartName].chart } if (charts[chartName].type === 'indicateur') { return showVariations ? IndicateurVariationChart : IndicateurCumulChart } } } const BigPictureStatistics = () => { const {date, selectedLocation, setSelectedLocation, isMobileDevice} = useContext(AppContext) const [report, setReport] = useState(null) const [previousReport, setPreviousReport] = useState(null) useEffect(() => { async function fetchReport() { setReport(await getReport(date, selectedLocation)) } fetchReport() }, [date, selectedLocation]) useEffect(() => { async function fetchPreviousReport() { setPreviousReport(await getPreviousReport(report)) } if (report) { fetchPreviousReport() } }, [report]) const {selectedStat, setSelectedStat} = useContext(BigPictureContext) const [showVariations, setShowVariations] = useState(false) const stat = selectedStat || 'mixed' const Chart = getChart(stat, showVariations) const toggleable = useCallback(chartName => { if (chartName) { return charts[stat].type === 'indicateur' } return false }, [stat]) const chartOptions = useCallback(chartName => { if (chartName) { return charts[stat].options || {} } }, [stat]) const isToggleable = toggleable(stat) const selectedChartOptions = chartOptions(stat) 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> {report && ( <Counters report={report} previousReport={previousReport} /> )} {report && report.history && stat && ( <> {isToggleable && <a className='toggle' onClick={() => setShowVariations(!showVariations)}>{showVariations ? 'Afficher les valeurs cumulées' : 'Afficher les variations quotidiennes'}</a>} <div className='chart-container'> <Chart reports={report.history.filter(r => date >= r.date)} {...selectedChartOptions} /> </div> {stat !== 'mixed' && <Button title='Afficher le cumul' onClick={() => setSelectedStat('mixed')} isMobileDevice={isMobileDevice} />} </> )} <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}; } .chart-container { margin: ${isMobileDevice ? '0 0.2em' : '0 1em'}; } .toggle { padding: 2px 20px; text-align: right; font-size: 0.8em; cursor: pointer; } `}</style> </> ) } export default BigPictureStatistics