This repository has been archived by the owner on May 1, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #114 from sanchis/change-api-infected
Change api infected
- Loading branch information
Showing
19 changed files
with
254 additions
and
267 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from 'react' | ||
| import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis } from 'recharts' | ||
|
|
||
| export default function ZoneChart ({ data }) { | ||
| return ( | ||
| <> | ||
| <h2>Datos zona sanitaria <span style={{ color: 'var(--primary-light-2)' }}>{data.name}</span></h2> | ||
| <p className='text-cursive'> | ||
| Número de PCR positivas. | ||
| </p> | ||
| <ResponsiveContainer height={500}> | ||
| <LineChart data={data.value} width={500} height={500}> | ||
| <CartesianGrid strokeDasharray='3 3' /> | ||
| <XAxis dataKey='date' fontSize='12px' minTickGap={0} interval='preserveStartEnd' /> | ||
| <Tooltip /> | ||
| <Legend /> | ||
| <Line type='monotone' name='Nuevos positivos' dataKey='positiveNumber' stroke='rgb(21,64,74)' /> | ||
| </LineChart> | ||
| </ResponsiveContainer> | ||
| </> | ||
| ) | ||
| } |
19 changes: 19 additions & 0 deletions
19
components/zonesList/components/filterZones/filterZones.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| .containerFilter { | ||
| margin: var(--size-8) 0 var(--size-6) 0; | ||
| display: flex; | ||
| } | ||
|
|
||
| .selectOrder { | ||
| min-width: 200px; | ||
| width: auto; | ||
| } | ||
|
|
||
| @media (max-width: 600px) { | ||
| .containerFilter { | ||
| flex-direction: column; | ||
| margin: 0px; | ||
| } | ||
| .selectOrder { | ||
| width: 100%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import Card from 'components/ui/card' | ||
| import Input from 'components/ui/input' | ||
| import Select from 'components/ui/select' | ||
| import debounce from 'just-debounce-it' | ||
| import styles from './filterZones.module.css' | ||
|
|
||
| export default function FilterZones ({ onChangeSearchText, onChangeOrderBy }) { | ||
| const debounceOnChangeSearch = debounce((event) => onChangeSearchText(event.target.value), 250) | ||
| return ( | ||
| <Card className={styles.containerFilter}> | ||
| <Select className={styles.selectOrder} onChange={(event) => onChangeOrderBy(event.target.value)}> | ||
| <option value='name'>Alfabéticamente</option> | ||
| <option value='positiveNumber'>Positivos COVID</option> | ||
| </Select> | ||
| <Input placeholder='Buscar por nombre' type='text' onChange={debounceOnChangeSearch} /> | ||
|
|
||
| </Card> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import Card from 'components/ui/card' | ||
| import { useRouter } from 'next/router' | ||
| import { useEffect, useState } from 'react' | ||
| import FilterZones from './components/filterZones' | ||
| import styles from './zonesList.module.css' | ||
|
|
||
| export default function ZonesList ({ zonesData }) { | ||
| const [searchText, setSearchText] = useState('') | ||
| const [orderBy, setOrderBy] = useState('name') | ||
| const [zones, setZones] = useState(zonesData) | ||
| const router = useRouter() | ||
|
|
||
| useEffect(() => { | ||
| setZones( | ||
| zonesData | ||
| .filter(zonesFilter => zonesFilter.name.toLowerCase().includes(searchText)) | ||
| ) | ||
| }, [searchText, zonesData]) | ||
|
|
||
| useEffect(() => { | ||
| setZones(zn => | ||
| [...zn].sort((a, b) => | ||
| isNaN(a[orderBy]) | ||
| ? (a[orderBy] > b[orderBy] ? 1 : -1) | ||
| : (a[orderBy] < b[orderBy] ? 1 : -1) | ||
| ) | ||
| ) | ||
| }, [orderBy]) | ||
|
|
||
| return ( | ||
| <> | ||
| <h2 className={styles.header}>Información sobre distrito sanitarios</h2> | ||
| <p className='text-cursive'>Datos de los últimos 14 días</p> | ||
|
|
||
| <FilterZones onChangeOrderBy={(val) => setOrderBy(val)} onChangeSearchText={(val) => setSearchText(val.trim().toLowerCase())} /> | ||
| <div className={styles.cardContainer}> | ||
| {zones | ||
| .map(zn => | ||
| <Card key={zn.name} onClick={() => router.push(`zone/${zn.name}`)}> | ||
| <h3>{zn.name}</h3> | ||
| <h1 className='align-center'>{zn.positiveNumber}</h1> | ||
| <small className={`align-center ${styles.descriptionLabel}`}>Positivos</small> | ||
| </Card>)} | ||
| </div> | ||
| </> | ||
|
|
||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| .header { | ||
| margin-top: var(--size-1); | ||
| } | ||
|
|
||
| .cardContainer { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | ||
| justify-content: center; | ||
| align-items: center; | ||
| align-content: center; | ||
| grid-gap: var(--size-4); | ||
| } | ||
|
|
||
| .descriptionLabel{ | ||
| margin-top: 0px; | ||
| display: block; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,27 @@ | ||
| import NewInfectedChart from 'components/charts/NewInfectedChart' | ||
| import newInfected from 'scripts/data/infected.json' | ||
| import ZonesList from 'components/zonesList' | ||
| import Head from 'next/head' | ||
| import { getNewInfected } from 'services/infected' | ||
|
|
||
| export default function Home ({ newInfected, municipalitiesData }) { | ||
| export default function Home ({ infected, zones }) { | ||
| return ( | ||
| <> | ||
| <Head> | ||
| <title>Covid-19 Alicante | Estadísticas diarias</title> | ||
| </Head> | ||
|
|
||
| <NewInfectedChart newInfected={newInfected} /> | ||
| <NewInfectedChart newInfected={infected} /> | ||
| <ZonesList zonesData={zones} /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export async function getStaticProps () { | ||
| const { zones, infected } = await getNewInfected() | ||
| return { | ||
| props: { | ||
| newInfected | ||
| infected, | ||
| zones | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import Head from 'next/head' | ||
| import ZoneChart from 'components/charts/ZoneChart' | ||
| import { getNewInfected } from 'services/infected' | ||
|
|
||
| export default function Municipios ({ data }) { | ||
| const title = `Covid-19 ${data.name} | Estadísticas diarias` | ||
| return ( | ||
| <> | ||
| <Head> | ||
| <meta name='description' content={`Ultimas estadísticas sobre el covid en la zona sanitaria de ${data.name}. Información sobre todos los municipios de la ciudad de Alicante`} /> | ||
| <title>{title}</title> | ||
| <meta property='og:description' content={`Ultimas estadísticas sobre el covid en la zona sanitaria de ${data.name}. Información sobre todos los municipios de la ciudad de Alicante`} /> | ||
| <meta property='og:title' content={`Covid 19 ${data.name} | Estadísticas diarias`} /> | ||
| </Head> | ||
| <ZoneChart data={data} /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export async function getStaticProps ({ params }) { | ||
| const { zones } = await getNewInfected() | ||
| const zone = zones.find(zn => zn.name === params.id) | ||
|
|
||
| return { | ||
| props: { | ||
| data: zone | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export async function getStaticPaths () { | ||
| const { zones } = await getNewInfected() | ||
| const paths = zones.map(zn => ({ params: { id: zn.name } })) | ||
| return { paths, fallback: false } | ||
| } |
Oops, something went wrong.