import React, { useMemo, useCallback, memo } from "react"; import { object, string } from "prop-types"; import { useTranslation } from "react-i18next"; import { maybeIntlNumberFormat } from "../../i18n"; import Kpi from "./Kpi"; const KpiContainer = ({ data, type }) => { const { t, i18n } = useTranslation(); const { language } = i18n; const { totals, totalsDiff } = data; const formatNumber = maybeIntlNumberFormat(language); const getPercentage = useCallback( (type, chart) => { switch (type) { case "confirmed": break; case "recovered": if (totals.confirmed > 0) { let recoveredPercent = parseInt( (totals.recovered / totals.confirmed) * 100 ); chart.percentage = t("recovered-percentage", { percent: formatNumber(recoveredPercent), }); } break; case "active": if (totals.active > 0) { let criticalPercentage = parseInt( (totals.critical / totals.active) * 100 ); if (criticalPercentage < 1) { criticalPercentage = parseInt((totals.critical / totals.active) * 1000) / 10; } chart.percentage = t("active-critical-percentage", { percent: formatNumber(criticalPercentage), }); } break; case "deceased": if (totals.confirmed > 0) { let deceasedPercent = parseInt( (totals.deceased / totals.confirmed) * 100 ); if (deceasedPercent < 1) { deceasedPercent = parseInt((totals.deceased / totals.confirmed) * 1000) / 10; } chart.percentage = t("deceased-percentage", { percent: formatNumber(deceasedPercent), }); } break; case "tested": if (totals.tested > 0) { let testedPercentage = parseInt( (totals.confirmed / totals.tested) * 100 ); if (testedPercentage < 1) { testedPercentage = parseInt((totals.confirmed / totals.tested) * 1000) / 10; } chart.percentage = t("tested-percentage", { percent: formatNumber(testedPercentage), }); } break; default: return; } }, [formatNumber, t, totals] ); const chart = useMemo(() => { const chartData = { id: type, label: t(`kpi-${type}`), value: formatNumber(totals[type]), diff: totalsDiff[type] >= 0 ? `+${formatNumber(totalsDiff[type])}` : formatNumber(totalsDiff[type]), chartName: type === "active" ? "active_cumulative_avg.svg" : `${type}_daily_avg.svg`, caption: t(`${type}-chart-caption`), }; getPercentage(type, chartData); return chartData; }, [formatNumber, getPercentage, t, totals, totalsDiff, type]); return ( <Kpi key={chart.id} id={chart.id} label={chart.label} value={chart.value} diff={chart.diff} chartName={chart.chartName} percent={chart.percentage} caption={chart.caption} isActive={type === "active"} /> ); }; KpiContainer.propTypes = { data: object, type: string, }; KpiContainer.defaultProps = { data: {}, type: "", }; export default memo(KpiContainer);