/* * Copyright (C) 2020 HERE Europe B.V. * Licensed under MIT, see full license in LICENSE * SPDX-License-Identifier: MIT */ import React from "react" import { Text, Link } from "@chakra-ui/core" import { formatThousand } from "../../utils/format" import { useDataDate } from "../../utils/store" const IntroParagraph = ({ points }) => { const currentDate = useDataDate(state => state.currentDate) const sum = points.length ? points.reduce((acc, cur) => { return acc + (cur.properties[currentDate] || 0) }, 0) : null return ( <Text color="gray.600" mb="1.25rem"> {`The first case of the new Coronavirus COVID-19 was recorded on 31 December in Wuhan, China (`} <Link alt="WHO — Novel coronavirus (COVID-19)" href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019" color="#00AFAA"> { "WHO" } </Link> { `). Since then,${sum ? " " + formatThousand(sum) : ""} confirmed cases have been recorded worldwide. This visualization shows the near real-time status based on data from the ` } <Link alt="Center for Systems Science and Engineering (CSSE)" href="https://github.com/CSSEGISandData/2019-nCoV" color="#00AFAA"> { "Center for Systems Science and Engineering (CSSE)" } </Link> { ` at Johns Hopkins University and ` } <Link alt="DXY" href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA"> { "DXY." } </Link> { ` Data currently available on the following zoom levels: City level - US, Canada and Australia; Province level - China; Country level - other countries.` } { ` To read more about this map, see ` } <Link color="#00AFAA" alt="How we built an interactive map displaying the COVID-19 outbreak" href="https://developer.here.com/blog/how-we-built-an-interactive-map-displaying-the-covid-19-outbreak" > { "How we built an interactive map displaying the COVID-19 outbreak" } </Link> { "." } </Text> ) } export default IntroParagraph