chore(date formatting): clean up date formatting in the app

web/src/components/Time.tsx

@@ -1,37 +1,32 @@
+import { useAtomValue } from 'jotai';
 import { useParams } from 'react-router-dom';
 import { RouteParameters } from 'types';
-import { TimeRange } from 'utils/constants';
-import { formatDate, formatDateRange } from 'utils/formatting';
+import { formatDate } from 'utils/formatting';
 import { getZoneTimezone } from 'utils/helpers';
+import { timeRangeAtom } from 'utils/state/atoms';
 
 export function FormattedTime({
   datetime,
   language,
-  timeRange,
   className,
   zoneId,
+  isTimeHeader = false,
   endDatetime,
 }: {
   datetime: Date;
   language: string;
-  timeRange?: TimeRange;
   className?: string;
   zoneId?: string;
+  isTimeHeader?: boolean;
   endDatetime?: Date;
 }) {
+  const timeRange = useAtomValue(timeRangeAtom);
   const { zoneId: pathZoneId } = useParams<RouteParameters>();
   const timeZoneZoneId = zoneId || pathZoneId;
   const timezone = getZoneTimezone(timeZoneZoneId);
-  if (timeRange) {
-    return (
-      <time dateTime={datetime.toISOString()} className={className}>
-        {formatDate(datetime, language, timeRange, timezone)}
-      </time>
-    );
-  }
   return (
     <time dateTime={datetime.toISOString()} className={className}>
-      {endDatetime && formatDateRange(datetime, endDatetime, language, timezone)}
+      {formatDate(datetime, language, timeRange, timezone, isTimeHeader, endDatetime)}
     </time>
   );
 }

web/src/components/TimeDisplay.tsx

@@ -1,7 +1,7 @@
 import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { ZoneKey } from 'types';
-import { selectedDatetimeIndexAtom, timeRangeAtom } from 'utils/state/atoms';
+import { selectedDatetimeIndexAtom } from 'utils/state/atoms';
 
 import { FormattedTime } from './Time';
 
@@ -13,14 +13,12 @@ export function TimeDisplay({
   zoneId?: ZoneKey;
 }) {
   const { i18n } = useTranslation();
-  const timeRange = useAtomValue(timeRangeAtom);
   const selectedDatetime = useAtomValue(selectedDatetimeIndexAtom);
 
   return (
     <FormattedTime
       datetime={selectedDatetime.datetime}
       language={i18n.languages[0]}
-      timeRange={timeRange}
       className={className}
       zoneId={zoneId}
     />

web/src/features/charts/tooltips/AreaGraphTooltipHeader.tsx

@@ -2,18 +2,15 @@ import { HorizontalDivider } from 'components/Divider';
 import EstimationBadge from 'components/EstimationBadge';
 import { FormattedTime } from 'components/Time';
 import { useGetEstimationTranslation } from 'hooks/getEstimationTranslation';
-import { useAtomValue } from 'jotai';
 import { CircleDashed, TrendingUpDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { EstimationMethods, TimeRange } from 'utils/constants';
-import { endDatetimeAtom } from 'utils/state/atoms';
+import { EstimationMethods } from 'utils/constants';
 
 import ProductionSourceIcon from '../ProductionsSourceIcons';
 
 interface AreaGraphToolTipHeaderProps {
   squareColor: string;
   datetime: Date;
-  timeRange: TimeRange;
   title: string;
   hasEstimationPill?: boolean;
   estimatedPercentage?: number;
@@ -24,7 +21,6 @@ interface AreaGraphToolTipHeaderProps {
 export default function AreaGraphToolTipHeader({
   squareColor,
   datetime,
-  timeRange,
   title,
   hasEstimationPill = false,
   estimatedPercentage,
@@ -37,7 +33,6 @@ export default function AreaGraphToolTipHeader({
     estimationMethod,
     estimatedPercentage
   );
-  const endDatetime = useAtomValue(endDatetimeAtom);
   return (
     <>
       <div className="flex items-center gap-1 font-bold">
@@ -60,10 +55,8 @@ export default function AreaGraphToolTipHeader({
         )}
       </div>
       <FormattedTime
-        endDatetime={endDatetime}
         datetime={datetime}
         language={i18n.languages[0]}
-        timeRange={timeRange}
         className="text-sm"
       />
       <HorizontalDivider />

web/src/features/charts/tooltips/BreakdownChartTooltip.stories.ts

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { TimeRange } from 'utils/constants';
 
 import { BreakdownChartTooltipContent } from './BreakdownChartTooltip';
 
@@ -17,7 +16,6 @@ export const Example: Story = {
   args: {
     datetime: new Date('2022-11-28T07:00:00.000Z'),
     usage: 599,
-    timeRange: TimeRange.H24,
     capacity: 500,
     co2Intensity: 130,
     co2IntensitySource: 'IPCC 2014; EU-ETS, ENTSO-E 2021',
@@ -35,7 +33,6 @@ export const WithoutCapacity: Story = {
   args: {
     datetime: new Date('2022-11-28T07:00:00.000Z'),
     usage: 599,
-    timeRange: TimeRange.H24,
     capacity: undefined,
     co2Intensity: 130,
     co2IntensitySource: 'IPCC 2014; EU-ETS, ENTSO-E 2021',
@@ -53,7 +50,6 @@ export const isStoring: Story = {
   args: {
     datetime: new Date('2022-11-28T07:00:00.000Z'),
     usage: 80,
-    timeRange: TimeRange.H24,
     capacity: 700,
     co2Intensity: 130,
     co2IntensitySource: 'IPCC 2014; EU-ETS, ENTSO-E 2021',
@@ -75,7 +71,6 @@ export const IsDischarging: Story = {
   args: {
     datetime: new Date('2022-11-28T07:00:00.000Z'),
     usage: 80,
-    timeRange: TimeRange.H24,
     capacity: 700,
     co2Intensity: 130,
     co2IntensitySource: 'IPCC 2014; EU-ETS, ENTSO-E 2021',
@@ -95,7 +90,6 @@ export const LongSource: Story = {
   args: {
     datetime: new Date('2022-11-28T07:00:00.000Z'),
     usage: 80,
-    timeRange: TimeRange.H24,
     capacity: 700,
     co2Intensity: 130,
     co2IntensitySource:
@@ -115,7 +109,6 @@ export const Exporting: Story = {
   args: {
     datetime: new Date('2022-11-28T07:00:00.000Z'),
     usage: 80,
-    timeRange: TimeRange.H24,
     capacity: 700,
     co2Intensity: 450,
     co2IntensitySource:

web/src/features/charts/tooltips/BreakdownChartTooltip.tsx

@@ -7,14 +7,13 @@ import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { getZoneName } from 'translation/translation';
 import { ElectricityModeType, Maybe, ZoneDetail } from 'types';
-import { EstimationMethods, modeColor, TimeRange } from 'utils/constants';
+import { EstimationMethods, modeColor } from 'utils/constants';
 import { formatCo2, formatEnergy, formatPower } from 'utils/formatting';
 import { round } from 'utils/helpers';
 import {
   displayByEmissionsAtom,
   isConsumptionAtom,
   isHourlyAtom,
-  timeRangeAtom,
 } from 'utils/state/atoms';
 
 import { getGenerationTypeKey, getRatioPercent } from '../graphUtils';
@@ -107,7 +106,6 @@ export default function BreakdownChartTooltip({
   selectedLayerKey,
 }: InnerAreaGraphTooltipProps) {
   const displayByEmissions = useAtomValue(displayByEmissionsAtom);
-  const timeRange = useAtomValue(timeRangeAtom);
   const isConsumption = useAtomValue(isConsumptionAtom);
 
   if (!zoneDetail || !selectedLayerKey) {
@@ -135,7 +133,6 @@ export default function BreakdownChartTooltip({
       datetime={new Date(stateDatetime)}
       isExchange={isExchange}
       selectedLayerKey={selectedLayerKey}
-      timeRange={timeRange}
       hasEstimationPill={hasEstimationPill}
       estimatedPercentage={roundedEstimatedPercentage}
       estimationMethod={estimationMethod}
@@ -150,7 +147,6 @@ interface BreakdownChartTooltipContentProperties {
   totalElectricity: number;
   totalEmissions: number;
   co2Intensity: number;
-  timeRange: TimeRange;
   displayByEmissions: boolean;
   emissions: number;
   zoneKey: string;
@@ -171,7 +167,6 @@ export function BreakdownChartTooltipContent({
   usage,
   totalElectricity,
   displayByEmissions,
-  timeRange,
   capacity,
   emissions,
   isExport,
@@ -206,7 +201,6 @@ export function BreakdownChartTooltipContent({
             : modeColor[selectedLayerKey as ElectricityModeType]
         }
         datetime={datetime}
-        timeRange={timeRange}
         title={title}
         hasEstimationPill={isExchange ? false : hasEstimationPill}
         estimatedPercentage={estimatedPercentage}

web/src/features/charts/tooltips/CarbonChartTooltip.tsx

@@ -4,13 +4,12 @@ import { useCo2ColorScale } from 'hooks/theme';
 import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { getCarbonIntensity, round } from 'utils/helpers';
-import { isConsumptionAtom, timeRangeAtom } from 'utils/state/atoms';
+import { isConsumptionAtom } from 'utils/state/atoms';
 
 import { InnerAreaGraphTooltipProps } from '../types';
 import AreaGraphToolTipHeader from './AreaGraphTooltipHeader';
 
 export default function CarbonChartTooltip({ zoneDetail }: InnerAreaGraphTooltipProps) {
-  const timeRange = useAtomValue(timeRangeAtom);
   const { t } = useTranslation();
   const isConsumption = useAtomValue(isConsumptionAtom);
   const co2ColorScale = useCo2ColorScale();
@@ -39,7 +38,6 @@ export default function CarbonChartTooltip({ zoneDetail }: InnerAreaGraphTooltip
     >
       <AreaGraphToolTipHeader
         datetime={new Date(stateDatetime)}
-        timeRange={timeRange}
         squareColor={co2ColorScale(intensity)}
         title={t('tooltips.carbonintensity')}
         hasEstimationPill={hasEstimationPill}

web/src/features/charts/tooltips/EmissionChartTooltip.tsx

@@ -2,14 +2,13 @@ import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { formatCo2 } from 'utils/formatting';
 import { round } from 'utils/helpers';
-import { isConsumptionAtom, timeRangeAtom } from 'utils/state/atoms';
+import { isConsumptionAtom } from 'utils/state/atoms';
 
 import { getTotalEmissionsAvailable } from '../graphUtils';
 import { InnerAreaGraphTooltipProps } from '../types';
 import AreaGraphToolTipHeader from './AreaGraphTooltipHeader';
 
 export default function EmissionChartTooltip({ zoneDetail }: InnerAreaGraphTooltipProps) {
-  const timeRange = useAtomValue(timeRangeAtom);
   const isConsumption = useAtomValue(isConsumptionAtom);
   const { t } = useTranslation();
 
@@ -27,7 +26,6 @@ export default function EmissionChartTooltip({ zoneDetail }: InnerAreaGraphToolt
     <div className="w-full rounded-md bg-white p-3 shadow-xl dark:border dark:border-gray-700 dark:bg-gray-800 sm:w-[410px]">
       <AreaGraphToolTipHeader
         datetime={new Date(stateDatetime)}
-        timeRange={timeRange}
         squareColor="#a5292a"
         title={t('country-panel.emissions')}
         hasEstimationPill={hasEstimationPill}

web/src/features/charts/tooltips/NetExchangeChartTooltip.tsx

@@ -2,15 +2,14 @@ import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { formatCo2, scalePower } from 'utils/formatting';
 import { getNetExchange, round } from 'utils/helpers';
-import { displayByEmissionsAtom, isHourlyAtom, timeRangeAtom } from 'utils/state/atoms';
+import { displayByEmissionsAtom, isHourlyAtom } from 'utils/state/atoms';
 
 import { InnerAreaGraphTooltipProps } from '../types';
 import AreaGraphToolTipHeader from './AreaGraphTooltipHeader';
 
 export default function NetExchangeChartTooltip({
   zoneDetail,
 }: InnerAreaGraphTooltipProps) {
-  const timeRange = useAtomValue(timeRangeAtom);
   const displayByEmissions = useAtomValue(displayByEmissionsAtom);
   const isHourly = useAtomValue(isHourlyAtom);
   const { t } = useTranslation();
@@ -33,7 +32,6 @@ export default function NetExchangeChartTooltip({
     <div className="w-full rounded-md bg-white p-3 shadow-xl dark:border dark:border-gray-700 dark:bg-gray-800 sm:w-[350px]">
       <AreaGraphToolTipHeader
         datetime={new Date(stateDatetime)}
-        timeRange={timeRange}
         squareColor="#7f7f7f"
         title={t('tooltips.netExchange')}
       />

web/src/features/charts/tooltips/PriceChartTooltip.tsx

@@ -1,14 +1,11 @@
 import getSymbolFromCurrency from 'currency-symbol-map';
-import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
-import { timeRangeAtom } from 'utils/state/atoms';
 
 import { convertPrice } from '../bar-breakdown/utils';
 import { InnerAreaGraphTooltipProps } from '../types';
 import AreaGraphToolTipHeader from './AreaGraphTooltipHeader';
 
 export default function PriceChartTooltip({ zoneDetail }: InnerAreaGraphTooltipProps) {
-  const timeRange = useAtomValue(timeRangeAtom);
   const { t } = useTranslation();
 
   if (!zoneDetail) {
@@ -26,7 +23,6 @@ export default function PriceChartTooltip({ zoneDetail }: InnerAreaGraphTooltipP
     <div className="w-full rounded-md bg-white p-3 shadow-xl dark:border dark:border-gray-700 dark:bg-gray-800 sm:w-64">
       <AreaGraphToolTipHeader
         datetime={new Date(stateDatetime)}
-        timeRange={timeRange}
         squareColor="#7f7f7f" // TODO: use price scale color
         title={t('tooltips.price')}
       />