react-feather#BarChart2 JavaScript Examples

The following examples show how to use react-feather#BarChart2. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From covid19-dashboard with MIT License 5 votes vote down vote up
MobileBigPicture = () => {
  const [selectedView, setSelectedView] = useState('stats')

  const app = useContext(AppContext)
  const theme = useContext(ThemeContext)

  const views = {
    map: (
      <TerritoriesMobileMap maps={bigPictureMaps} context={BigPictureContext}>
        <BigPictureStatistics />
      </TerritoriesMobileMap>
    ),
    stats: (
      <Scrollable>
        <BigPictureStatistics />
      </Scrollable>
    ),
    informations: (
      <Scrollable>
        <BigPictureInformations />
      </Scrollable>
    )
  }

  const handleClick = view => {
    app.setSelectedLocation('FRA')
    setSelectedView(view)
  }

  return (
    <>
      <Scrollable>
        {views[selectedView]}
      </Scrollable>

      <div className='view-selector'>
        <div className={`${selectedView === 'stats' ? 'selected' : ''}`} onClick={() => handleClick('stats')}>
          <BarChart2 size={32} color={selectedView === 'stats' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'map' ? 'selected' : ''}`} onClick={() => handleClick('map')}>
          <Map size={32} color={selectedView === 'map' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'informations' ? 'selected' : ''}`} onClick={() => handleClick('informations')}>
          <FileText size={32} color={selectedView === 'informations' ? theme.primary : colors.black} />
        </div>
      </div>

      <style jsx>{`
        .view-selector {
          z-index: 1;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          box-shadow: 0 -1px 4px ${colors.lightGrey};
        }

        .view-selector > div {
          padding: 0.5em;
          margin: auto;
          margin-bottom: -4px;
        }

        .view-selector > div.selected {
          border-top: 4px solid ${theme.primary};
        }
      `}</style>
    </>
  )
}
Example #2
Source File: index.js    From covid19-dashboard with MIT License 5 votes vote down vote up
MobileCovidTests = () => {
  const [selectedView, setSelectedView] = useState('stats')

  const app = useContext(AppContext)
  const theme = useContext(ThemeContext)

  const views = {
    map: (
      <TerritoriesMobileMap
        maps={CovidTestsMaps}
        context={CovidTestsContext}
      >
        <CovidTestsStatistics />
      </TerritoriesMobileMap>
    ),
    stats: (
      <Scrollable>
        <CovidTestsStatistics />
      </Scrollable>
    ),
    informations: (
      <Scrollable>
        <CovidTestsInformations />
      </Scrollable>
    )
  }

  const handleClick = view => {
    app.setSelectedLocation('FRA')
    setSelectedView(view)
  }

  return (
    <>
      {views[selectedView]}

      <div className='view-selector'>
        <div className={`${selectedView === 'stats' ? 'selected' : ''}`} onClick={() => handleClick('stats')}>
          <BarChart2 size={32} color={selectedView === 'stats' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'map' ? 'selected' : ''}`} onClick={() => handleClick('map')}>
          <Map size={32} color={selectedView === 'map' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'informations' ? 'selected' : ''}`} onClick={() => handleClick('informations')}>
          <FileText size={32} color={selectedView === 'informations' ? theme.primary : colors.black} />
        </div>
      </div>

      <style jsx>{`
        .view-selector {
          z-index: 1;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          box-shadow: 0 -1px 4px ${colors.lightGrey};
        }

        .view-selector > div {
          padding: 0.5em;
          margin: auto;
          margin-bottom: -4px;
        }

        .view-selector > div.selected {
          border-top: 4px solid ${theme.primary};
        }
      `}</style>
    </>
  )
}
Example #3
Source File: index.js    From covid19-dashboard with MIT License 5 votes vote down vote up
MobileIndicators = () => {
  const [selectedView, setSelectedView] = useState('stats')

  const app = useContext(AppContext)
  const theme = useContext(ThemeContext)

  const views = {
    map: (
      <TerritoriesMobileMap maps={IndicatorsMaps} context={IndicatorsContext}>
        <IndicatorsStatistics />
      </TerritoriesMobileMap>
    ),
    stats: (
      <Scrollable>
        <IndicatorsStatistics />
      </Scrollable>
    ),
    informations: (
      <Scrollable>
        <indicatorsInformations />
      </Scrollable>
    )
  }

  const handleClick = view => {
    app.setSelectedLocation('FRA')
    setSelectedView(view)
  }

  return (
    <>
      <Scrollable>
        {views[selectedView]}
      </Scrollable>

      <div className='view-selector'>
        <div className={`${selectedView === 'stats' ? 'selected' : ''}`} onClick={() => handleClick('stats')}>
          <BarChart2 size={32} color={selectedView === 'stats' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'map' ? 'selected' : ''}`} onClick={() => handleClick('map')}>
          <Map size={32} color={selectedView === 'map' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'informations' ? 'selected' : ''}`} onClick={() => handleClick('informations')}>
          <FileText size={32} color={selectedView === 'informations' ? theme.primary : colors.black} />
        </div>
      </div>

      <style jsx>{`
        .view-selector {
          z-index: 1;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          box-shadow: 0 -1px 4px ${colors.lightGrey};
        }

        .view-selector > div {
          padding: 0.5em;
          margin: auto;
          margin-bottom: -4px;
        }

        .view-selector > div.selected {
          border-top: 4px solid ${theme.primary};
        }
      `}</style>
    </>
  )
}
Example #4
Source File: index.js    From covid19-dashboard with MIT License 5 votes vote down vote up
MobileVaccinations = () => {
  const [selectedView, setSelectedView] = useState('stats')

  const app = useContext(AppContext)
  const theme = useContext(ThemeContext)

  const views = {
    map: (
      <TerritoriesMobileMap maps={VaccinationsMaps} context={VaccinationsContext}>
        <VaccinationsStatistics />
      </TerritoriesMobileMap>
    ),
    stats: (
      <Scrollable>
        <VaccinationsStatistics />
      </Scrollable>
    ),
    informations: (
      <Scrollable>
        <VaccinationsInformations />
      </Scrollable>
    )
  }

  const handleClick = view => {
    app.setSelectedLocation('FRA')
    setSelectedView(view)
  }

  return (
    <>
      <Scrollable>
        {views[selectedView]}
      </Scrollable>

      <div className='view-selector'>
        <div className={`${selectedView === 'stats' ? 'selected' : ''}`} onClick={() => handleClick('stats')}>
          <BarChart2 size={32} color={selectedView === 'stats' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'map' ? 'selected' : ''}`} onClick={() => handleClick('map')}>
          <Map size={32} color={selectedView === 'map' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'informations' ? 'selected' : ''}`} onClick={() => handleClick('informations')}>
          <FileText size={32} color={selectedView === 'informations' ? theme.primary : colors.black} />
        </div>
      </div>

      <style jsx>{`
        .view-selector {
          z-index: 1;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          box-shadow: 0 -1px 4px ${colors.lightGrey};
        }

        .view-selector > div {
          padding: 0.5em;
          margin: auto;
          margin-bottom: -4px;
        }

        .view-selector > div.selected {
          border-top: 4px solid ${theme.primary};
        }
      `}</style>
    </>
  )
}
Example #5
Source File: index.js    From covid19-dashboard with MIT License 5 votes vote down vote up
MobileVaccins = () => {
  const [selectedView, setSelectedView] = useState('stats')

  const app = useContext(AppContext)
  const theme = useContext(ThemeContext)

  const views = {
    map: (
      <TerritoriesMobileMap maps={VaccinsMaps} context={VaccinsContext}>
        <VaccinsStatistics />
      </TerritoriesMobileMap>
    ),
    stats: (
      <Scrollable>
        <VaccinsStatistics />
      </Scrollable>
    ),
    informations: (
      <Scrollable>
        <VaccinsInformations />
      </Scrollable>
    )
  }

  const handleClick = view => {
    app.setSelectedLocation('FRA')
    setSelectedView(view)
  }

  return (
    <>
      <Scrollable>
        {views[selectedView]}
      </Scrollable>

      <div className='view-selector'>
        <div className={`${selectedView === 'stats' ? 'selected' : ''}`} onClick={() => handleClick('stats')}>
          <BarChart2 size={32} color={selectedView === 'stats' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'map' ? 'selected' : ''}`} onClick={() => handleClick('map')}>
          <Map size={32} color={selectedView === 'map' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'informations' ? 'selected' : ''}`} onClick={() => handleClick('informations')}>
          <FileText size={32} color={selectedView === 'informations' ? theme.primary : colors.black} />
        </div>
      </div>

      <style jsx>{`
        .view-selector {
          z-index: 1;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          box-shadow: 0 -1px 4px ${colors.lightGrey};
        }

        .view-selector > div {
          padding: 0.5em;
          margin: auto;
          margin-bottom: -4px;
        }

        .view-selector > div.selected {
          border-top: 4px solid ${theme.primary};
        }
      `}</style>
    </>
  )
}
Example #6
Source File: big-picture-statistics.js    From covid19-dashboard with MIT License 4 votes vote down vote up
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>
    </>
  )
}
Example #7
Source File: covid-tests-statistics.js    From covid19-dashboard with MIT License 4 votes vote down vote up
CovidTestsStatistics = () => {
  const {date, forcedDate, selectedLocation, setSelectedLocation, isMobileDevice} = useContext(AppContext)
  const {selectedStat, setSelectedStat} = useContext(CovidTestsContext)
  const selectedDate = forcedDate || date
  const stat = selectedStat || 'mixed'

  const [report, setReport] = useState(null)
  const [statistics, setStatistics] = useState(null)
  const [showVariations, setShowVariations] = useState(false)

  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)

  useEffect(() => {
    async function fetchReport() {
      const report = await getReport(selectedDate, selectedLocation)
      setReport(report)

      const filteredHistory = report.history.filter(r => selectedDate >= r.date)

      const testsPositifs = sumBy(filteredHistory, 'testsPositifs')
      const testsRealises = sumBy(filteredHistory, 'testsRealises')
      const testsNegatifs = testsRealises - testsPositifs

      const pieChartData = [testsNegatifs, testsPositifs]

      setStatistics({
        pieChartData,
        testsPositifs,
        testsRealises
      })
    }

    fetchReport()
  }, [selectedDate, selectedLocation])

  const pieLabels = ['Tests négatifs', 'Tests positifs']
  const pieColors = [colors.grey, colors.red]

  return (
    <>
      <div className='header'>
        {selectedLocation && !isMobileDevice && (
          <div className='back' onClick={() => setSelectedLocation('FRA')}><BarChart2 /> <span>France</span></div>
        )}
        <h3>COVID-19 - {report ? report.nom : 'France'}</h3>
      </div>
      {statistics && (
        <CovidTestsCounters testsPositifs={statistics.testsPositifs} testsRealises={statistics.testsRealises} />
      )}
      {statistics && <PieChartPercent data={statistics.pieChartData} labels={pieLabels} colors={pieColors} height={isMobileDevice ? 150 : 130} />}
      {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 => selectedDate >= r.date)} {...selectedChartOptions} />
          </div>
          {stat !== 'mixed' &&
            <Button title='Afficher le cumul' onClick={() => setSelectedStat('mixed')} isMobileDevice={isMobileDevice} />}
        </>
      )}
      {report && <CovidTestsAgeChart report={report} />}
      <style jsx>{`
        .header {
          text-align: center;
          position: sticky;
          top: 0;
          background-color: white;
          padding: ${isMobileDevice ? '0.2em' : 0};
          box-shadow: 0 1px 4px ${colors.lightGrey};
          z-index: 1;
        }

        .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};
        }

        .toggle {
          padding: 2px 20px;
          text-align: right;
          font-size: 0.8em;
          cursor: pointer;
        }

        .chart-container {
          margin: ${isMobileDevice ? '0 0.2em' : '0 1em'};
        }
        `}</style>
    </>
  )
}
Example #8
Source File: indicators-statistics.js    From covid19-dashboard with MIT License 4 votes vote down vote up
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>
    </>
  )
}
Example #9
Source File: vaccinations-statistics.js    From covid19-dashboard with MIT License 4 votes vote down vote up
VaccinationsStatistics = () => {
  const {date, selectedLocation, setSelectedLocation, isMobileDevice} = useContext(AppContext)
  const {selectedStat} = useContext(VaccinationsContext)

  const [report, setReport] = useState(null)
  const [previousReport, setPreviousReport] = useState(null)
  const [showVariations, setShowVariations] = useState(false)

  const Chart = useMemo(() => {
    const chart = charts[selectedStat]
    if (chart) {
      if (chart.type === 'indicateur') {
        return showVariations ? IndicateurVariationChart : IndicateurCumulChart
      }
    }
  }, [selectedStat, showVariations])

  const isToggleable = useMemo(() => {
    if (Chart) {
      return charts[selectedStat].type === 'indicateur'
    }

    return false
  }, [Chart, selectedStat])

  const selectedChartOptions = useMemo(() => {
    if (Chart) {
      return charts[selectedStat].options || {}
    }
  }, [Chart, selectedStat])

  useEffect(() => {
    async function fetchReport() {
      setReport(await getReport(date, selectedLocation))
    }

    fetchReport()
  }, [date, selectedLocation])

  useEffect(() => {
    async function fetchPreviousReport() {
      setPreviousReport(await getPreviousReport(report))
    }

    if (report) {
      fetchPreviousReport()
    }
  }, [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>

      {report && (
        <VaccinationsCounters report={report} previousReport={previousReport} />
      )}

      {report && report.prisesRendezVousSemaineRang1 && report.prisesRendezVousSemaineRang2 && (
        <PieChartPercent
          data={[report.prisesRendezVousSemaineRang1, report.prisesRendezVousSemaineRang2]}
          labels={['rendez-vous prévus cette semaine (première injection)', 'rendez-vous prévus cette semaine (seconde injection)']}
          colors={[colors.blueSoft, colors.purple]}
          height={isMobileDevice ? 150 : 130}
        />
      )}

      {report && report.history && selectedStat && Chart && (
        <>
          {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>
        </>
      )}

      <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};
        }

        .toggle {
          padding: 2px 20px;
          text-align: right;
          font-size: 0.8em;
          cursor: pointer;
        }
        `}</style>
    </>
  )
}
Example #10
Source File: vaccins-statistics.js    From covid19-dashboard with MIT License 4 votes vote down vote up
VaccinsStatistics = () => {
  const {date, selectedLocation, setSelectedLocation, isMobileDevice} = useContext(AppContext)
  const {selectedStat} = useContext(VaccinsContext)

  const [report, setReport] = useState(null)
  const [previousReport, setPreviousReport] = useState(null)
  const [showVariations, setShowVariations] = useState(false)

  const Chart = useMemo(() => {
    const chart = charts[selectedStat]
    if (chart) {
      if (chart.type === 'indicateur') {
        return showVariations ? IndicateurVariationChart : IndicateurCumulChart
      }
    }
  }, [selectedStat, showVariations])

  const isToggleable = useMemo(() => {
    if (Chart) {
      return charts[selectedStat].type === 'indicateur'
    }

    return false
  }, [Chart, selectedStat])

  const selectedChartOptions = useMemo(() => {
    if (Chart) {
      return charts[selectedStat].options || {}
    }
  }, [Chart, selectedStat])

  useEffect(() => {
    async function fetchReport() {
      setReport(await getReport(date, selectedLocation))
    }

    fetchReport()
  }, [date, selectedLocation])

  useEffect(() => {
    async function fetchPreviousReport() {
      setPreviousReport(await getPreviousReport(report))
    }

    if (report) {
      fetchPreviousReport()
    }
  }, [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>

      {report && (
        <VaccinsCounters report={report} previousReport={previousReport} />
      )}

      {report && report.history && selectedStat && Chart && (
        <>
          {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>
        </>
      )}

      <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};
        }

        .toggle {
          padding: 2px 20px;
          text-align: right;
          font-size: 0.8em;
          cursor: pointer;
        }
        `}</style>
    </>
  )
}