From 5130653a8091c58ecf519187de1c3c6f211bcb5c Mon Sep 17 00:00:00 2001
From: Jijeong Lee <jijeong0114@gmail.com>
Date: Thu, 4 Apr 2024 15:19:36 -0700
Subject: [PATCH] show/hide unlabeled metrics based on config

---
 www/js/metrics/CarbonFootprintCard.tsx | 43 ++++++++++++++++----------
 1 file changed, 26 insertions(+), 17 deletions(-)

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<CarbonChange>(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,