import React, { useEffect, useState, memo } from "react"; import { string, bool } from "prop-types"; import gradient from "./linearGradient"; import Loader from "../Loader"; import updateTooltipLang from "../Header/UpdateTooltipLang"; const Kpi = ({ id, label, value, diff, caption, chartName, percent, isActive, }) => { const [graph, setGraph] = useState(null); const [isLoading, setIsLoading] = useState(true); useEffect(() => { if (chartName) { let svgURL = `https://data.covid19japan.com/charts/${chartName}`; fetch(svgURL).then((response) => { if (response.status === 200) { response.text().then((data) => { setIsLoading(false); setGraph(data); }); } }); isActive && updateTooltipLang(); } }, [chartName, isActive]); return ( <> <div className="vitals"> <a href={`#${id}`} className="inline"> <div className="label"> {label} {isActive && <span> ⓘ</span>} </div> </a> <div className="value">{value} </div> <div className="diff">( {diff} )</div> <div className="description" dangerouslySetInnerHTML={{ __html: percent }} /> </div> <Loader isLoaded={isLoading} /> <div> {graph && ( <div className="chart-container" id={`kpi-${id}-chart`} dangerouslySetInnerHTML={{ __html: `${gradient[id]}${graph}`, }} /> )} {!isLoading && <p className="chart-caption">{caption}</p>} </div> </> ); }; Kpi.propTypes = { id: string, label: string, value: string, diff: string, caption: string, chartName: string, percent: string, isActive: bool, }; Kpi.defaultProps = { id: "", label: "", value: "", diff: "", caption: "", chartName: "", percent: "", isActive: false, }; export default memo(Kpi);