From 1ae738d048785ceb4acb2646d7129307598a5a52 Mon Sep 17 00:00:00 2001
From: Cadence Banulis <cadence.banulis@electricitymaps.com>
Date: Fri, 18 Oct 2024 10:29:40 +0200
Subject: [PATCH] feat: add scroll to chart functionality

---
 web/src/features/charts/BreakdownChart.tsx    |  4 +++-
 web/src/features/charts/CarbonChart.tsx       | 10 +++++++--
 web/src/features/charts/ChartTitle.tsx        |  7 +++++--
 web/src/features/charts/EmissionChart.tsx     |  3 ++-
 web/src/features/charts/NetExchangeChart.tsx  |  8 +++++--
 .../features/charts/NotEnoughDataMessage.tsx  |  4 ++--
 web/src/features/charts/PriceChart.tsx        | 10 +++++++--
 .../bar-breakdown/BarBreakdownChart.tsx       |  5 +++--
 .../bar-breakdown/elements/BySource.tsx       |  4 +++-
 web/src/features/panels/zone/ZoneDetails.tsx  | 21 +++++++++++++++++--
 web/src/utils/constants.ts                    |  9 ++++++++
 11 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/web/src/features/charts/BreakdownChart.tsx b/web/src/features/charts/BreakdownChart.tsx
index 3972394b5a..8c7bb1712f 100644
--- a/web/src/features/charts/BreakdownChart.tsx
+++ b/web/src/features/charts/BreakdownChart.tsx
@@ -7,7 +7,7 @@ import { Factory, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { ElectricityModeType } from 'types';
 import trackEvent from 'utils/analytics';
-import { TimeAverages, TrackEvent } from 'utils/constants';
+import { Charts, TimeAverages, TrackEvent } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
 import {
   dataSourcesCollapsedBreakdownAtom,
@@ -76,6 +76,7 @@ function BreakdownChart({
   if (!hasEnoughDataToDisplay) {
     return (
       <NotEnoughDataMessage
+        id={Charts.ORIGIN_CHART}
         title={`country-history.${titleDisplayMode}${titleMixMode}`}
       />
     );
@@ -87,6 +88,7 @@ function BreakdownChart({
         translationKey={`country-history.${titleDisplayMode}${titleMixMode}`}
         badge={badge}
         unit={valueAxisLabel}
+        id={Charts.ORIGIN_CHART}
       />
       <div className="relative ">
         <AreaGraph
diff --git a/web/src/features/charts/CarbonChart.tsx b/web/src/features/charts/CarbonChart.tsx
index 692056e408..dffdd47e73 100644
--- a/web/src/features/charts/CarbonChart.tsx
+++ b/web/src/features/charts/CarbonChart.tsx
@@ -7,7 +7,7 @@ import { useAtom } from 'jotai';
 import { Factory, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import trackEvent from 'utils/analytics';
-import { TimeAverages, TrackEvent } from 'utils/constants';
+import { Charts, TimeAverages, TrackEvent } from 'utils/constants';
 import { dataSourcesCollapsedEmissionAtom } from 'utils/state/atoms';
 
 import { ChartTitle } from './ChartTitle';
@@ -50,7 +50,12 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
   const badge = <EstimationBadge text={text} Icon={icon} />;
 
   if (!hasEnoughDataToDisplay) {
-    return <NotEnoughDataMessage title="country-history.carbonintensity" />;
+    return (
+      <NotEnoughDataMessage
+        title="country-history.carbonintensity"
+        id={Charts.CARBON_CHART}
+      />
+    );
   }
   return (
     <RoundedCard className="pb-2">
@@ -58,6 +63,7 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
         translationKey="country-history.carbonintensity"
         badge={badge}
         unit={'gCO₂eq / kWh'}
+        id={Charts.CARBON_CHART}
       />
       <AreaGraph
         testId="details-carbon-graph"
diff --git a/web/src/features/charts/ChartTitle.tsx b/web/src/features/charts/ChartTitle.tsx
index 39d5c3f3be..b6af3d2a80 100644
--- a/web/src/features/charts/ChartTitle.tsx
+++ b/web/src/features/charts/ChartTitle.tsx
@@ -7,9 +7,10 @@ type Props = {
   translationKey: string;
   unit?: string;
   badge?: React.ReactElement;
+  id: string;
 };
 
-export function ChartTitle({ translationKey, unit, badge }: Props) {
+export function ChartTitle({ translationKey, unit, badge, id }: Props) {
   const { t } = useTranslation();
   const timeAverage = useAtomValue(timeAverageAtom);
   /*
@@ -18,7 +19,9 @@ export function ChartTitle({ translationKey, unit, badge }: Props) {
   return (
     <div className="flex flex-col pb-0.5">
       <div className="flex items-center gap-1.5 pt-4">
-        <h2 className="grow">{t(`${translationKey}.${timeAverage}`)}</h2>
+        <h2 id={id} className="grow">
+          {t(`${translationKey}.${timeAverage}`)}
+        </h2>
         {badge}
       </div>
       {unit && <div className="text-sm dark:text-gray-300">{unit}</div>}
diff --git a/web/src/features/charts/EmissionChart.tsx b/web/src/features/charts/EmissionChart.tsx
index 48d13741e4..644d8a158d 100644
--- a/web/src/features/charts/EmissionChart.tsx
+++ b/web/src/features/charts/EmissionChart.tsx
@@ -5,7 +5,7 @@ import { useAtom } from 'jotai';
 import { Factory, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import trackEvent from 'utils/analytics';
-import { TimeAverages, TrackEvent } from 'utils/constants';
+import { Charts, TimeAverages, TrackEvent } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
 import { dataSourcesCollapsedEmissionAtom } from 'utils/state/atoms';
 
@@ -52,6 +52,7 @@ function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) {
         translationKey="country-history.emissions"
         badge={badge}
         unit={'CO₂eq'}
+        id={Charts.EMISSION_CHART}
       />
       <AreaGraph
         testId="history-emissions-graph"
diff --git a/web/src/features/charts/NetExchangeChart.tsx b/web/src/features/charts/NetExchangeChart.tsx
index 2a89904275..290232c191 100644
--- a/web/src/features/charts/NetExchangeChart.tsx
+++ b/web/src/features/charts/NetExchangeChart.tsx
@@ -1,5 +1,5 @@
 import { useAtom } from 'jotai';
-import { TimeAverages } from 'utils/constants';
+import { Charts, TimeAverages } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
 import { displayByEmissionsAtom, productionConsumptionAtom } from 'utils/state/atoms';
 
@@ -42,7 +42,11 @@ function NetExchangeChart({ datetimes, timeAverage }: NetExchangeChartProps) {
 
   return (
     <RoundedCard className="pb-2">
-      <ChartTitle translationKey="country-history.netExchange" unit={valueAxisLabel} />
+      <ChartTitle
+        translationKey="country-history.netExchange"
+        unit={valueAxisLabel}
+        id={Charts.NET_EXCHANGE_CHART}
+      />
       <div className="relative">
         <AreaGraph
           testId="history-exchange-graph"
diff --git a/web/src/features/charts/NotEnoughDataMessage.tsx b/web/src/features/charts/NotEnoughDataMessage.tsx
index f9d885bd4e..25c7b1dc7f 100644
--- a/web/src/features/charts/NotEnoughDataMessage.tsx
+++ b/web/src/features/charts/NotEnoughDataMessage.tsx
@@ -2,11 +2,11 @@ import { useTranslation } from 'react-i18next';
 
 import { ChartTitle } from './ChartTitle';
 
-export function NotEnoughDataMessage({ title }: { title: string }) {
+export function NotEnoughDataMessage({ title, id }: { title: string; id: string }) {
   const { t } = useTranslation();
   return (
     <div className="w-full">
-      <ChartTitle translationKey={title} />
+      <ChartTitle translationKey={title} id={id} />
       <div className="my-2 rounded bg-gray-200 py-4 text-center text-sm dark:bg-gray-800">
         <p>{t('country-history.not-enough-data')}</p>
       </div>
diff --git a/web/src/features/charts/PriceChart.tsx b/web/src/features/charts/PriceChart.tsx
index ad0466fd8e..2f472c7fba 100644
--- a/web/src/features/charts/PriceChart.tsx
+++ b/web/src/features/charts/PriceChart.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { TimeAverages } from 'utils/constants';
+import { Charts, TimeAverages } from 'utils/constants';
 
 import { ChartTitle } from './ChartTitle';
 import { DisabledMessage } from './DisabledMessage';
@@ -51,7 +51,12 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) {
   const hasEnoughDataToDisplay = datetimes?.length > 2;
 
   if (!hasEnoughDataToDisplay) {
-    return <NotEnoughDataMessage title="country-history.electricityprices" />;
+    return (
+      <NotEnoughDataMessage
+        id={Charts.ELECTRICITY_PRICES_CHART}
+        title="country-history.electricityprices"
+      />
+    );
   }
 
   return (
@@ -59,6 +64,7 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) {
       <ChartTitle
         translationKey="country-history.electricityprices"
         unit={valueAxisLabel}
+        id={Charts.ELECTRICITY_PRICES_CHART}
       />
       <div className="relative">
         {isPriceDisabled && (
diff --git a/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx b/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx
index 42e92508c5..d22e76c08f 100644
--- a/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx
+++ b/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { ElectricityModeType, ZoneKey } from 'types';
 import useResizeObserver from 'use-resize-observer';
 import trackEvent from 'utils/analytics';
-import { TrackEvent } from 'utils/constants';
+import { Charts, TrackEvent } from 'utils/constants';
 import {
   dataSourcesCollapsedBarBreakdownAtom,
   displayByEmissionsAtom,
@@ -88,7 +88,7 @@ function BarBreakdownChart({
   if (!currentZoneDetail) {
     return (
       <div className="text-md relative w-full" ref={ref}>
-        <BySource className="opacity-40" />
+        <BySource className="opacity-40" id={Charts.BAR_BREAKDOWN_CHART} />
         <EmptyBarBreakdownChart
           height={height}
           width={width}
@@ -137,6 +137,7 @@ function BarBreakdownChart({
         estimatedPercentage={currentZoneDetail.estimatedPercentage}
         unit={graphUnit}
         estimationMethod={currentZoneDetail.estimationMethod}
+        id={Charts.BAR_BREAKDOWN_CHART}
       />
       {!displayByEmissions && (
         <CapacityLegend>
diff --git a/web/src/features/charts/bar-breakdown/elements/BySource.tsx b/web/src/features/charts/bar-breakdown/elements/BySource.tsx
index b6a945de75..569b8c6f7a 100644
--- a/web/src/features/charts/bar-breakdown/elements/BySource.tsx
+++ b/web/src/features/charts/bar-breakdown/elements/BySource.tsx
@@ -38,12 +38,14 @@ export default function BySource({
   estimatedPercentage,
   unit,
   estimationMethod,
+  id,
 }: {
   className?: string;
   hasEstimationPill?: boolean;
   estimatedPercentage?: number;
   unit?: string | number;
   estimationMethod?: EstimationMethods;
+  id: string;
 }) {
   const { t } = useTranslation();
   const [timeAverage] = useAtom(timeAverageAtom);
@@ -64,7 +66,7 @@ export default function BySource({
         className={`text-md relative flex flex-row justify-between font-bold ${className}`}
       >
         <div className="flex gap-1">
-          <h2>{text}</h2>
+          <h2 id={id}>{text}</h2>
         </div>
         {hasEstimationPill && (
           <EstimationBadge
diff --git a/web/src/features/panels/zone/ZoneDetails.tsx b/web/src/features/panels/zone/ZoneDetails.tsx
index b949117430..5a220c9834 100644
--- a/web/src/features/panels/zone/ZoneDetails.tsx
+++ b/web/src/features/panels/zone/ZoneDetails.tsx
@@ -4,8 +4,8 @@ import { CommercialApiButton } from 'components/buttons/CommercialApiButton';
 import LoadingSpinner from 'components/LoadingSpinner';
 import BarBreakdownChart from 'features/charts/bar-breakdown/BarBreakdownChart';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { useEffect } from 'react';
-import { Navigate, useParams } from 'react-router-dom';
+import { useCallback, useEffect } from 'react';
+import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { ZoneMessage } from 'types';
 import { EstimationMethods, SpatialAggregate } from 'utils/constants';
@@ -54,6 +54,8 @@ export default function ZoneDetails(): JSX.Element {
     }
   }, [hasSubZones, isSubZone, setViewMode]);
 
+  useScrollHashIntoView(isLoading);
+
   if (!zoneId) {
     return <Navigate to="/" replace />;
   }
@@ -190,3 +192,18 @@ function ZoneDetailsContent({
 
   return children as JSX.Element;
 }
+
+const useScrollHashIntoView = (isLoading: boolean) => {
+  const { hash, pathname, search } = useLocation();
+  const navigate = useNavigate();
+  useEffect(() => {
+    const hashElement = hash ? document.querySelector(hash) : null;
+    if (!isLoading && hashElement) {
+      hashElement.scrollIntoView({
+        behavior: 'smooth',
+        inline: 'nearest',
+      });
+    }
+    navigate(`${pathname}${search}`);
+  }, [hash, isLoading, navigate, pathname, search]);
+};
diff --git a/web/src/utils/constants.ts b/web/src/utils/constants.ts
index ff5ba9466b..2c0535c7a8 100644
--- a/web/src/utils/constants.ts
+++ b/web/src/utils/constants.ts
@@ -38,6 +38,15 @@ export enum LeftPanelToggleOptions {
   EMISSIONS = 'emissions',
 }
 
+export enum Charts {
+  ELECTRICITY_PRICES_CHART = 'electricity_prices_chart',
+  ORIGIN_CHART = 'origin_chart',
+  BAR_BREAKDOWN_CHART = 'bar_breakdown_chart',
+  CARBON_CHART = 'carbon_chart',
+  EMISSION_CHART = 'emission_chart',
+  NET_EXCHANGE_CHART = 'net_exchange_chart',
+}
+
 export enum TrackEvent {
   DATA_SOURCES_CLICKED = 'Data Sources Clicked',
   APP_BANNER_CTA_CLICKED = 'App Banner CTA Clicked',