feat(web): pop-over for 72h view (#7558)

electricitymaps · Dec 16, 2024 · 2622944 · 2622944
1 parent 6621ab7
commit 2622944
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 43 deletions.
diff --git a/web/src/components/NewFeaturePopover/NewFeaturePopover.tsx b/web/src/components/NewFeaturePopover/NewFeaturePopover.tsx
@@ -3,7 +3,7 @@ import { useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 import { X } from 'lucide-react';
 
-export const POPOVER_ID = 'historical-storytelling-popover';
+export const POPOVER_ID = '72-hour-popover';
 const popoverDismissed = `${POPOVER_ID}-dismissed`;
 
 export const newFeatureDismissedAtom = atomWithStorage(
@@ -57,7 +57,9 @@ export function NewFeaturePopover({
 
   return (
     <Popover.Root open={isOpenByDefault && !isDismissed}>
-      <Popover.Anchor>{children}</Popover.Anchor>
+      <Popover.Anchor asChild>
+        <div className="flex h-full w-full grow basis-0">{children}</div>
+      </Popover.Anchor>
       {portal ? <Popover.Portal>{inner}</Popover.Portal> : inner}
     </Popover.Root>
   );

diff --git a/web/src/components/TimeRangeToggle.tsx b/web/src/components/TimeRangeToggle.tsx
@@ -8,6 +8,9 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TimeRange } from 'utils/constants';
 
+import { NewFeaturePopover, POPOVER_ID } from './NewFeaturePopover/NewFeaturePopover';
+import { NewFeaturePopoverContent } from './NewFeaturePopover/NewFeaturePopoverContent';
+
 const createOption = (
   time: TimeRange,
   t: TFunction,
@@ -29,7 +32,7 @@ function TimeRangeToggle({ timeRange, onToggleGroupClick }: TimeRangeToggleProps
   const { t } = useTranslation();
   const historicalLinkingEnabled = useFeatureFlag('historical-linking');
   const is72HourEnabled = useFeatureFlag('72-hours');
-
+  const isNewFeaturePopoverEnabled = useFeatureFlag(POPOVER_ID);
   const timeOptions = is72HourEnabled
     ? Object.values(TimeRange)
     : Object.values(TimeRange).filter((option) => option !== TimeRange.H72);
@@ -50,25 +53,52 @@ function TimeRangeToggle({ timeRange, onToggleGroupClick }: TimeRangeToggleProps
       type="multiple"
       aria-label="Toggle between time averages"
     >
-      {options.map(({ value, label, dataTestId }) => (
-        <ToggleGroupItem
-          key={`group-item-${value}-${label}`}
-          data-testid={dataTestId}
-          value={value}
-          aria-label={label}
-          onClick={() => onToggleGroupClick(value)}
-          className={`
+      {options.map(({ value, label, dataTestId }) =>
+        value === TimeRange.H72 ? (
+          <NewFeaturePopover
+            side="top"
+            content={<NewFeaturePopoverContent />}
+            isOpenByDefault={isNewFeaturePopoverEnabled}
+            key="popover"
+          >
+            <ToggleGroupItem
+              key={`group-item-${value}-${label}`}
+              data-testid={dataTestId}
+              value={value}
+              aria-label={label}
+              onClick={() => onToggleGroupClick(value)}
+              className={`
+            h-full grow basis-0 select-none rounded-full text-xs font-semibold capitalize
+              ${
+                timeRange === value
+                  ? 'bg-white/80 text-brand-green outline outline-1 outline-neutral-200 dark:bg-gray-600/80 dark:text-white dark:outline-gray-400/10'
+                  : ''
+              }
+              focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-green dark:focus-visible:outline-brand-green-dark`}
+            >
+              {label}
+            </ToggleGroupItem>
+          </NewFeaturePopover>
+        ) : (
+          <ToggleGroupItem
+            key={`group-item-${value}-${label}`}
+            data-testid={dataTestId}
+            value={value}
+            aria-label={label}
+            onClick={() => onToggleGroupClick(value)}
+            className={`
           h-full grow basis-0 select-none rounded-full text-xs font-semibold capitalize
             ${
               timeRange === value
                 ? 'bg-white/80 text-brand-green outline outline-1 outline-neutral-200 dark:bg-gray-600/80 dark:text-white dark:outline-gray-400/10'
                 : ''
             }
             focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-green dark:focus-visible:outline-brand-green-dark`}
-        >
-          {label}
-        </ToggleGroupItem>
-      ))}
+          >
+            {label}
+          </ToggleGroupItem>
+        )
+      )}
     </ToggleGroupRoot>
   );
 }

diff --git a/web/src/features/time/HistoricalTimeHeader.tsx b/web/src/features/time/HistoricalTimeHeader.tsx
@@ -103,28 +103,22 @@ export default function HistoricalTimeHeader() {
   return (
     <div className="relative flex h-6 w-full items-center">
       <div className="absolute flex w-full items-center justify-between px-10">
-        <NewFeaturePopover
-          side="top"
-          content={<NewFeaturePopoverContent />}
-          isOpenByDefault={isNewFeaturePopoverEnabled}
-        >
-          <Button
-            backgroundClasses="bg-transparent"
-            onClick={handleLeftClick}
-            size="sm"
-            type="tertiary"
-            isDisabled={!isWithinHistoricalLimit}
-            icon={
-              <ChevronLeft
-                size={22}
-                className={twMerge(
-                  'text-brand-green dark:text-success-dark',
-                  !isWithinHistoricalLimit && 'opacity-50'
-                )}
-              />
-            }
-          />
-        </NewFeaturePopover>
+        <Button
+          backgroundClasses="bg-transparent"
+          onClick={handleLeftClick}
+          size="sm"
+          type="tertiary"
+          isDisabled={!isWithinHistoricalLimit}
+          icon={
+            <ChevronLeft
+              size={22}
+              className={twMerge(
+                'text-brand-green dark:text-success-dark',
+                !isWithinHistoricalLimit && 'opacity-50'
+              )}
+            />
+          }
+        />
         {startDatetime && endDatetime && (
           <FormattedTime
             datetime={startDatetime}

diff --git a/web/src/locales/en.json b/web/src/locales/en.json
@@ -57,8 +57,8 @@
     "summary": "Discover real-time electricity insights with the Electricity Maps app!"
   },
   "new-feature-popover": {
-    "title": "Share granular historical insights",
-    "content": "Explore historical hourly carbon intensity and energy mix. Use the buttons to navigate through time by 24 hours and share specific dates via the three dots in the zone panel."
+    "title": "New feature: 72-hour view",
+    "content": "Explore trends in live and historical data with the new 72-hour window."
   },
   "onboarding-modal": {
     "view1": {

diff --git a/web/src/locales/fr.json b/web/src/locales/fr.json
@@ -49,10 +49,6 @@
     "preliminary-data": "Les données préliminaires peuvent changer avec le temps.",
     "summary": "Découvrez des informations sur l'électricité en temps réel avec l'application Electricity Maps !"
   },
-  "new-feature-popover": {
-    "title": "Partagez des informations historiques détaillées",
-    "content": "Explorez l'historique horaire de l'intensité carbone et du mix énergétique. Utilisez les boutons pour naviguer dans le temps par période de 24 heures et partagez des dates spécifiques en cliquant sur les trois points dans le panneau latéral."
-  },
   "onboarding-modal": {
     "view1": {
       "header": "Bienvenue sur Electricity Maps",