diff --git a/www/js/metrics/CarbonFootprintCard.tsx b/www/js/metrics/CarbonFootprintCard.tsx index 68b68c5b1..1478e646b 100644 --- a/www/js/metrics/CarbonFootprintCard.tsx +++ b/www/js/metrics/CarbonFootprintCard.tsx @@ -26,13 +26,17 @@ import { useAppTheme } from '../appTheme'; import { logDebug, logWarn } from '../plugin/logger'; import TimelineContext from '../TimelineContext'; import { isoDatesDifference } from '../diary/timelineHelper'; +import useAppConfig from '../useAppConfig'; type Props = { userMetrics?: MetricsData; aggMetrics?: MetricsData }; const CarbonFootprintCard = ({ userMetrics, aggMetrics }: Props) => { const { colors } = useAppTheme(); const { dateRange } = useContext(TimelineContext); + const appConfig = useAppConfig(); const { t } = useTranslation(); - + // Whether to show the uncertainty on the carbon footprint charts, default: true + const showUnlabeledMetrics = + appConfig?.metrics?.phone_dashboard_ui?.footprint_options?.unlabeled_uncertainty ?? true; const [emissionsChange, setEmissionsChange] = useState(undefined); const userCarbonRecords = useMemo(() => { @@ -72,11 +76,13 @@ const CarbonFootprintCard = ({ userMetrics, aggMetrics }: Props) => { low: getFootprintForMetrics(userLastWeekSummaryMap, 0), high: getFootprintForMetrics(userLastWeekSummaryMap, getHighestFootprint()), }; - graphRecords.push({ - label: t('main-metrics.unlabeled'), - x: userPrevWeek.high - userPrevWeek.low, - y: `${t('main-metrics.prev-week')}\n(${formatDateRangeOfDays(lastWeekDistance)})`, - }); + if (showUnlabeledMetrics) { + graphRecords.push({ + label: t('main-metrics.unlabeled'), + x: userPrevWeek.high - userPrevWeek.low, + y: `${t('main-metrics.prev-week')}\n(${formatDateRangeOfDays(lastWeekDistance)})`, + }); + } graphRecords.push({ label: t('main-metrics.labeled'), x: userPrevWeek.low, @@ -89,11 +95,13 @@ const CarbonFootprintCard = ({ userMetrics, aggMetrics }: Props) => { low: getFootprintForMetrics(userThisWeekSummaryMap, 0), high: getFootprintForMetrics(userThisWeekSummaryMap, getHighestFootprint()), }; - graphRecords.push({ - label: t('main-metrics.unlabeled'), - x: userPastWeek.high - userPastWeek.low, - y: `${t('main-metrics.past-week')}\n(${formatDateRangeOfDays(thisWeekDistance)})`, - }); + if (showUnlabeledMetrics) { + graphRecords.push({ + label: t('main-metrics.unlabeled'), + x: userPastWeek.high - userPastWeek.low, + y: `${t('main-metrics.past-week')}\n(${formatDateRangeOfDays(thisWeekDistance)})`, + }); + } graphRecords.push({ label: t('main-metrics.labeled'), x: userPastWeek.low, @@ -111,7 +119,6 @@ const CarbonFootprintCard = ({ userMetrics, aggMetrics }: Props) => { x: worstCarbon, y: `${t('main-metrics.worst-case')}`, }); - return graphRecords; } }, [userMetrics?.distance]); @@ -145,11 +152,13 @@ const CarbonFootprintCard = ({ userMetrics, aggMetrics }: Props) => { high: getFootprintForMetrics(aggCarbonData, getHighestFootprint()), }; logDebug(`groupCarbonRecords: aggCarbon = ${JSON.stringify(aggCarbon)}`); - groupRecords.push({ - label: t('main-metrics.unlabeled'), - x: aggCarbon.high - aggCarbon.low, - y: `${t('main-metrics.average')}\n(${formatDateRangeOfDays(thisWeekDistance)})`, - }); + if (showUnlabeledMetrics) { + groupRecords.push({ + label: t('main-metrics.unlabeled'), + x: aggCarbon.high - aggCarbon.low, + y: `${t('main-metrics.average')}\n(${formatDateRangeOfDays(thisWeekDistance)})`, + }); + } groupRecords.push({ label: t('main-metrics.labeled'), x: aggCarbon.low,