refactor: consolidate data sources and methodologies (#7389)

electricitymaps · Nov 5, 2024 · 555dd5d · 555dd5d
1 parent 0ac1347
commit 555dd5d
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 215 deletions.
diff --git a/web/src/features/charts/BreakdownChart.tsx b/web/src/features/charts/BreakdownChart.tsx
@@ -1,26 +1,16 @@
-import Accordion from 'components/Accordion';
-import { HorizontalDivider } from 'components/Divider';
 import EstimationBadge from 'components/EstimationBadge';
 import { max, sum } from 'd3-array';
-import { useAtom, useAtomValue } from 'jotai';
-import { Factory, Zap } from 'lucide-react';
+import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { ElectricityModeType } from 'types';
-import trackEvent from 'utils/analytics';
-import { Charts, TimeAverages, TrackEvent } from 'utils/constants';
+import { Charts, TimeAverages } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
-import {
-  dataSourcesCollapsedBreakdownAtom,
-  isConsumptionAtom,
-  isHourlyAtom,
-} from 'utils/state/atoms';
+import { isConsumptionAtom, isHourlyAtom } from 'utils/state/atoms';
 
 import { ChartTitle } from './ChartTitle';
-import { DataSources } from './DataSources';
 import AreaGraph from './elements/AreaGraph';
 import { getBadgeTextAndIcon, getGenerationTypeKey, noop } from './graphUtils';
 import useBreakdownChartData from './hooks/useBreakdownChartData';
-import useZoneDataSources from './hooks/useZoneDataSources';
 import { NotEnoughDataMessage } from './NotEnoughDataMessage';
 import ProductionSourceLegendList from './ProductionSourceLegendList';
 import { RoundedCard } from './RoundedCard';
@@ -40,14 +30,6 @@ function BreakdownChart({
 }: BreakdownChartProps) {
   const { data } = useBreakdownChartData();
   const isConsumption = useAtomValue(isConsumptionAtom);
-  const [dataSourcesCollapsedBreakdown, setDataSourcesCollapsedBreakdown] = useAtom(
-    dataSourcesCollapsedBreakdownAtom
-  );
-  const {
-    emissionFactorSources,
-    powerGenerationSources,
-    emissionFactorSourcesToProductionSources,
-  } = useZoneDataSources();
   const { t } = useTranslation();
   const isHourly = useAtomValue(isHourlyAtom);
 
@@ -115,41 +97,10 @@ function BreakdownChart({
           dangerouslySetInnerHTML={{ __html: t('country-panel.exchangesAreMissing') }}
         />
       )}
-
-      <>
-        <ProductionSourceLegendList
-          sources={getProductionSourcesInChart(chartData)}
-          className="py-1.5"
-        />
-        <HorizontalDivider />
-        <Accordion
-          onOpen={() => {
-            trackEvent(TrackEvent.DATA_SOURCES_CLICKED, {
-              chart: displayByEmissions
-                ? 'emission-origin-chart'
-                : 'electricity-origin-chart',
-            });
-          }}
-          title={t('data-sources.title')}
-          className="text-md"
-          isCollapsed={dataSourcesCollapsedBreakdown}
-          setState={setDataSourcesCollapsedBreakdown}
-        >
-          <DataSources
-            title={t('data-sources.power')}
-            icon={<Zap size={16} />}
-            sources={powerGenerationSources}
-          />
-          <DataSources
-            title={t('data-sources.emission')}
-            icon={<Factory size={16} />}
-            sources={emissionFactorSources}
-            emissionFactorSourcesToProductionSources={
-              emissionFactorSourcesToProductionSources
-            }
-          />
-        </Accordion>
-      </>
+      <ProductionSourceLegendList
+        sources={getProductionSourcesInChart(chartData)}
+        className="py-1.5"
+      />
     </RoundedCard>
   );
 }

diff --git a/web/src/features/charts/CarbonChart.tsx b/web/src/features/charts/CarbonChart.tsx
@@ -1,21 +1,13 @@
-import Accordion from 'components/Accordion';
-import { HorizontalDivider } from 'components/Divider';
 import EstimationBadge from 'components/EstimationBadge';
 import HorizontalColorbar from 'components/legend/ColorBar';
 import { useCo2ColorScale } from 'hooks/theme';
-import { useAtom } from 'jotai';
-import { Factory, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import trackEvent from 'utils/analytics';
-import { Charts, TimeAverages, TrackEvent } from 'utils/constants';
-import { dataSourcesCollapsedEmissionAtom } from 'utils/state/atoms';
+import { Charts, TimeAverages } from 'utils/constants';
 
 import { ChartTitle } from './ChartTitle';
-import { DataSources } from './DataSources';
 import AreaGraph from './elements/AreaGraph';
 import { getBadgeTextAndIcon, noop } from './graphUtils';
 import { useCarbonChartData } from './hooks/useCarbonChartData';
-import useZoneDataSources from './hooks/useZoneDataSources';
 import { NotEnoughDataMessage } from './NotEnoughDataMessage';
 import { RoundedCard } from './RoundedCard';
 import CarbonChartTooltip from './tooltips/CarbonChartTooltip';
@@ -27,14 +19,6 @@ interface CarbonChartProps {
 
 function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
   const { data, isLoading, isError } = useCarbonChartData();
-  const [dataSourcesCollapsedEmission, setDataSourcesCollapsedEmission] = useAtom(
-    dataSourcesCollapsedEmissionAtom
-  );
-  const {
-    emissionFactorSources,
-    powerGenerationSources,
-    emissionFactorSourcesToProductionSources,
-  } = useZoneDataSources();
   const { t } = useTranslation();
   const co2ColorScale = useCo2ColorScale();
 
@@ -82,29 +66,6 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
       <div className="pb-1 pt-2">
         <HorizontalColorbar colorScale={co2ColorScale} ticksCount={6} id={'co2'} />
       </div>
-      <HorizontalDivider />
-      <Accordion
-        onOpen={() => {
-          trackEvent(TrackEvent.DATA_SOURCES_CLICKED, { chart: 'carbon-chart' });
-        }}
-        title={t('data-sources.title')}
-        isCollapsed={dataSourcesCollapsedEmission}
-        setState={setDataSourcesCollapsedEmission}
-      >
-        <DataSources
-          title={t('data-sources.power')}
-          icon={<Zap size={16} />}
-          sources={powerGenerationSources}
-        />
-        <DataSources
-          title={t('data-sources.emission')}
-          icon={<Factory size={16} />}
-          sources={emissionFactorSources}
-          emissionFactorSourcesToProductionSources={
-            emissionFactorSourcesToProductionSources
-          }
-        />
-      </Accordion>
     </RoundedCard>
   );
 }

diff --git a/web/src/features/charts/DataSources.tsx b/web/src/features/charts/DataSources.tsx
@@ -26,7 +26,8 @@ export function DataSources({
   const { t } = useTranslation();
   const isMobile = !useBreakpoint('md');
   const showDataSources = Boolean(
-    sources?.length > 0 || emissionFactorSourcesToProductionSources
+    sources?.length > 0 ||
+      Object.keys(emissionFactorSourcesToProductionSources || {}).length > 0
   );
 
   if (showDataSources == false) {

diff --git a/web/src/features/charts/EmissionChart.tsx b/web/src/features/charts/EmissionChart.tsx
@@ -1,20 +1,12 @@
-import Accordion from 'components/Accordion';
-import { HorizontalDivider } from 'components/Divider';
 import EstimationBadge from 'components/EstimationBadge';
-import { useAtom } from 'jotai';
-import { Factory, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import trackEvent from 'utils/analytics';
-import { Charts, TimeAverages, TrackEvent } from 'utils/constants';
+import { Charts, TimeAverages } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
-import { dataSourcesCollapsedEmissionAtom } from 'utils/state/atoms';
 
 import { ChartTitle } from './ChartTitle';
-import { DataSources } from './DataSources';
 import AreaGraph from './elements/AreaGraph';
 import { getBadgeTextAndIcon, noop } from './graphUtils';
 import { useEmissionChartData } from './hooks/useEmissionChartData';
-import useZoneDataSources from './hooks/useZoneDataSources';
 import { RoundedCard } from './RoundedCard';
 import EmissionChartTooltip from './tooltips/EmissionChartTooltip';
 
@@ -25,14 +17,7 @@ interface EmissionChartProps {
 
 function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) {
   const { data, isLoading, isError } = useEmissionChartData();
-  const [dataSourcesCollapsedEmission, setDataSourcesCollapsedEmission] = useAtom(
-    dataSourcesCollapsedEmissionAtom
-  );
-  const {
-    emissionFactorSources,
-    powerGenerationSources,
-    emissionFactorSourcesToProductionSources,
-  } = useZoneDataSources();
+
   const { t } = useTranslation();
   if (isLoading || isError || !data) {
     return null;
@@ -68,30 +53,6 @@ function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) {
         tooltip={EmissionChartTooltip}
         formatTick={formatAxisTick}
       />
-      <HorizontalDivider />
-      <Accordion
-        onOpen={() => {
-          trackEvent(TrackEvent.DATA_SOURCES_CLICKED, { chart: 'emission-chart' });
-        }}
-        title={t('data-sources.title')}
-        className="text-md"
-        isCollapsed={dataSourcesCollapsedEmission}
-        setState={setDataSourcesCollapsedEmission}
-      >
-        <DataSources
-          title={t('data-sources.power')}
-          icon={<Zap size={16} />}
-          sources={powerGenerationSources}
-        />
-        <DataSources
-          title={t('data-sources.emission')}
-          icon={<Factory size={16} />}
-          sources={emissionFactorSources}
-          emissionFactorSourcesToProductionSources={
-            emissionFactorSourcesToProductionSources
-          }
-        />
-      </Accordion>
     </RoundedCard>
   );
 }

diff --git a/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx b/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx
@@ -1,21 +1,17 @@
 import * as Portal from '@radix-ui/react-portal';
-import Accordion from 'components/Accordion';
-import { HorizontalDivider } from 'components/Divider';
 import EstimationBadge from 'components/EstimationBadge';
 import { getOffsetTooltipPosition } from 'components/tooltips/utilities';
 import { useGetEstimationTranslation } from 'hooks/getEstimationTranslation';
 import { useHeaderHeight } from 'hooks/headerHeight';
 import { TFunction } from 'i18next';
 import { useAtom, useAtomValue } from 'jotai';
-import { CircleDashed, Factory, TrendingUpDown, UtilityPole, X, Zap } from 'lucide-react';
+import { CircleDashed, TrendingUpDown, X } from 'lucide-react';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ElectricityModeType, ZoneKey } from 'types';
 import useResizeObserver from 'use-resize-observer';
-import trackEvent from 'utils/analytics';
-import { Charts, EstimationMethods, TimeAverages, TrackEvent } from 'utils/constants';
+import { Charts, EstimationMethods, TimeAverages } from 'utils/constants';
 import {
-  dataSourcesCollapsedBarBreakdownAtom,
   displayByEmissionsAtom,
   isConsumptionAtom,
   isHourlyAtom,
@@ -25,10 +21,8 @@ import {
 import { useBreakpoint } from 'utils/styling';
 
 import { ChartTitle } from '../ChartTitle';
-import { DataSources } from '../DataSources';
 import { determineUnit } from '../graphUtils';
 import useBarBreakdownChartData from '../hooks/useBarElectricityBreakdownChartData';
-import useZoneDataSources from '../hooks/useZoneDataSources';
 import { RoundedCard } from '../RoundedCard';
 import BreakdownChartTooltip from '../tooltips/BreakdownChartTooltip';
 import BarBreakdownEmissionsChart from './BarBreakdownEmissionsChart';
@@ -52,13 +46,6 @@ function BarBreakdownChart({
     height,
   } = useBarBreakdownChartData();
 
-  const {
-    capacitySources,
-    powerGenerationSources,
-    emissionFactorSources,
-    emissionFactorSourcesToProductionSources,
-  } = useZoneDataSources();
-
   const [displayByEmissions] = useAtom(displayByEmissionsAtom);
   const { ref, width: observerWidth = 0 } = useResizeObserver<HTMLDivElement>();
   const { t } = useTranslation();
@@ -80,10 +67,6 @@ function BarBreakdownChart({
     y: number;
   } | null>(null);
 
-  const [dataSourcesCollapsedBarBreakdown, setDataSourcesCollapsedBarBreakdown] = useAtom(
-    dataSourcesCollapsedBarBreakdownAtom
-  );
-
   const headerHeight = useHeaderHeight();
 
   const titleText = useBarBreakdownChartTitle();
@@ -135,14 +118,6 @@ function BarBreakdownChart({
     setTooltipData(null);
   };
 
-  const showPowerSources = Boolean(powerGenerationSources?.length > 0);
-  const showEmissionSources = Boolean(emissionFactorSources?.length > 0);
-  const showCapacitySources = Boolean(capacitySources?.length > 0);
-
-  const showDataSourceAccordion = Boolean(
-    showCapacitySources || showPowerSources || showEmissionSources
-  );
-
   return (
     <RoundedCard ref={ref}>
       <ChartTitle
@@ -212,41 +187,6 @@ function BarBreakdownChart({
           graphUnit={graphUnit}
         />
       )}
-      {showDataSourceAccordion && (
-        <>
-          <HorizontalDivider />
-          <Accordion
-            onOpen={() => {
-              trackEvent(TrackEvent.DATA_SOURCES_CLICKED, {
-                chart: 'bar-breakdown-chart',
-              });
-            }}
-            title={t('data-sources.title')}
-            className="text-md"
-            isCollapsed={dataSourcesCollapsedBarBreakdown}
-            setState={setDataSourcesCollapsedBarBreakdown}
-          >
-            <DataSources
-              title={t('data-sources.capacity')}
-              icon={<UtilityPole size={16} />}
-              sources={capacitySources}
-            />
-            <DataSources
-              title={t('data-sources.power')}
-              icon={<Zap size={16} />}
-              sources={powerGenerationSources}
-            />
-            <DataSources
-              title={t('data-sources.emission')}
-              icon={<Factory size={16} />}
-              sources={emissionFactorSources}
-              emissionFactorSourcesToProductionSources={
-                emissionFactorSourcesToProductionSources
-              }
-            />
-          </Accordion>
-        </>
-      )}
     </RoundedCard>
   );
 }