diff --git a/web/src/features/charts/BreakdownChart.tsx b/web/src/features/charts/BreakdownChart.tsx index 8f05b0a7ff..9c864676bb 100644 --- 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') }} /> )} - - <> - - - { - 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} - > - } - sources={powerGenerationSources} - /> - } - sources={emissionFactorSources} - emissionFactorSourcesToProductionSources={ - emissionFactorSourcesToProductionSources - } - /> - - + ); } diff --git a/web/src/features/charts/CarbonChart.tsx b/web/src/features/charts/CarbonChart.tsx index ef68381998..6c8e1e3f3a 100644 --- 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) {
- - { - trackEvent(TrackEvent.DATA_SOURCES_CLICKED, { chart: 'carbon-chart' }); - }} - title={t('data-sources.title')} - isCollapsed={dataSourcesCollapsedEmission} - setState={setDataSourcesCollapsedEmission} - > - } - sources={powerGenerationSources} - /> - } - sources={emissionFactorSources} - emissionFactorSourcesToProductionSources={ - emissionFactorSourcesToProductionSources - } - /> - ); } diff --git a/web/src/features/charts/DataSources.tsx b/web/src/features/charts/DataSources.tsx index 41ba2cd981..9eaa8c5f11 100644 --- 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 index 189bf83fa6..2e965382b9 100644 --- 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} /> - - { - trackEvent(TrackEvent.DATA_SOURCES_CLICKED, { chart: 'emission-chart' }); - }} - title={t('data-sources.title')} - className="text-md" - isCollapsed={dataSourcesCollapsedEmission} - setState={setDataSourcesCollapsedEmission} - > - } - sources={powerGenerationSources} - /> - } - sources={emissionFactorSources} - emissionFactorSourcesToProductionSources={ - emissionFactorSourcesToProductionSources - } - /> - ); } diff --git a/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx b/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx index c857ae3d02..99000df473 100644 --- 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(); 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 ( )} - {showDataSourceAccordion && ( - <> - - { - trackEvent(TrackEvent.DATA_SOURCES_CLICKED, { - chart: 'bar-breakdown-chart', - }); - }} - title={t('data-sources.title')} - className="text-md" - isCollapsed={dataSourcesCollapsedBarBreakdown} - setState={setDataSourcesCollapsedBarBreakdown} - > - } - sources={capacitySources} - /> - } - sources={powerGenerationSources} - /> - } - sources={emissionFactorSources} - emissionFactorSourcesToProductionSources={ - emissionFactorSourcesToProductionSources - } - /> - - - )} ); } diff --git a/web/src/features/panels/zone/MethodologyCard.tsx b/web/src/features/panels/zone/MethodologyCard.tsx index b0321ebc39..fe7a517b28 100644 --- a/web/src/features/panels/zone/MethodologyCard.tsx +++ b/web/src/features/panels/zone/MethodologyCard.tsx @@ -1,34 +1,71 @@ import Accordion from 'components/Accordion'; import { Link } from 'components/Link'; +import { DataSources } from 'features/charts/DataSources'; +import useZoneDataSources from 'features/charts/hooks/useZoneDataSources'; import { RoundedCard } from 'features/charts/RoundedCard'; import { t } from 'i18next'; import { EmapsIcon } from 'icons/emapsIcon'; +import { Factory, UtilityPole, Zap } from 'lucide-react'; import { useState } from 'react'; import trackEvent from 'utils/analytics'; import { TrackEvent } from 'utils/constants'; export default function MethodologyCard() { const [isCollapsed, setIsCollapsed] = useState(true); + const { + capacitySources, + emissionFactorSources, + powerGenerationSources, + emissionFactorSourcesToProductionSources, + } = useZoneDataSources(); + return ( } - title={t('left-panel.applied-methodologies.title')} + title={t('left-panel.methodologies-and-data-sources.title')} className="text-md pt-2" - onOpen={() => trackEvent(TrackEvent.APPLIED_METHODOLOGIES_EXPANDED)} + onOpen={() => trackEvent(TrackEvent.METHODOLOGIES_AND_DATA_SOURCES_EXPANDED)} isCollapsed={isCollapsed} setState={setIsCollapsed} >
- - {t('left-panel.applied-methodologies.estimations')} - - - {t('left-panel.applied-methodologies.flowtracing')} - - - {t('left-panel.applied-methodologies.carbonintensity')} - +
+ +

{t('left-panel.applied-methodologies.title')}

+
+
+ + {t('left-panel.applied-methodologies.estimations')} + + + {t('left-panel.applied-methodologies.flowtracing')} + + + {t('left-panel.applied-methodologies.carbonintensity')} + + + {t('left-panel.applied-methodologies.historicalAggregations')} + +
+ + } + sources={capacitySources} + /> + } + sources={powerGenerationSources} + /> + } + sources={emissionFactorSources} + emissionFactorSourcesToProductionSources={ + emissionFactorSourcesToProductionSources + } + />
diff --git a/web/src/locales/en.json b/web/src/locales/en.json index a8d30a711d..cef6e35289 100644 --- a/web/src/locales/en.json +++ b/web/src/locales/en.json @@ -244,7 +244,11 @@ "title": "Applied methodologies", "estimations": "Electricity Maps - Estimations", "flowtracing": "Electricity Maps - Flow-tracing", - "carbonintensity": "Electricity Maps - Carbon intensity" + "carbonintensity": "Electricity Maps - Carbon intensity", + "historicalAggregations": "Electricity Maps - Historical aggregations" + }, + "methodologies-and-data-sources": { + "title": "Methodologies and data sources" } }, "header": { diff --git a/web/src/utils/constants.ts b/web/src/utils/constants.ts index 1ed375f6e7..10a1029442 100644 --- a/web/src/utils/constants.ts +++ b/web/src/utils/constants.ts @@ -48,7 +48,6 @@ export enum Charts { } export enum TrackEvent { - DATA_SOURCES_CLICKED = 'Data Sources Clicked', APP_BANNER_CTA_CLICKED = 'App Banner CTA Clicked', APP_BANNER_DISMISSED = 'App Banner Dismissed', SHARE_BUTTON_CLICKED = 'Share Button Clicked', @@ -67,7 +66,7 @@ export enum TrackEvent { PANEL_PRODUCTION_BUTTON_CLICKED = 'PanelProductionButton Clicked', PANEL_EMISSION_BUTTON_CLICKED = 'PanelEmissionButton Clicked', ESTIMATION_CARD_METHODOLOGY_LINK_CLICKED = 'EstimationCard Methodology Link Clicked', - APPLIED_METHODOLOGIES_EXPANDED = 'AppliedMethodologies Expanded', + METHODOLOGIES_AND_DATA_SOURCES_EXPANDED = 'Methodologies and Data Sources Expanded', TIME_AGGREGATE_BUTTON_CLICKED = 'Time Aggregate Button Clicked', SOLAR_ENABLED = 'Solar Enabled', SOLAR_DISABLED = 'Solar Disabled',