feat: convert EUR/MWh to EUR/KWh

web/src/features/charts/bar-breakdown/utils.test.ts

@@ -1,6 +1,7 @@
 import { Mode } from 'utils/constants';
 
 import {
+  convertPrice,
   ExchangeDataType,
   getDataBlockPositions,
   getElectricityProductionValue,
@@ -461,3 +462,35 @@ describe('getExchangeCo2Intensity', () => {
     });
   });
 });
+
+describe('convertPrice', () => {
+  it('converts EUR to price/KWh', () => {
+    const result = convertPrice(120, 'EUR');
+    expect(result).to.deep.eq({ value: 0.12, currency: 'EUR', unit: 'kWh' });
+  });
+
+  it('dont convert USD to price/KWh', () => {
+    const result = convertPrice(120, 'USD');
+    expect(result).to.deep.eq({ value: 120, currency: 'USD', unit: 'MWh' });
+  });
+
+  it('handles missing currency', () => {
+    const result = convertPrice(120, undefined);
+    expect(result).to.deep.eq({ value: 120, currency: undefined, unit: 'MWh' });
+  });
+
+  it('handles missing price with EUR', () => {
+    const result = convertPrice(undefined, 'EUR');
+    expect(result).to.deep.eq({ value: undefined, currency: 'EUR', unit: 'kWh' });
+  });
+
+  it('handles missing price without EUR', () => {
+    const result = convertPrice(undefined, 'USD');
+    expect(result).to.deep.eq({ value: undefined, currency: 'USD', unit: 'MWh' });
+  });
+
+  it('handles missing price and currency', () => {
+    const result = convertPrice(undefined, undefined);
+    expect(result).to.deep.eq({ value: undefined, currency: undefined, unit: 'MWh' });
+  });
+});

web/src/features/charts/bar-breakdown/utils.ts

@@ -8,7 +8,8 @@ import {
   ZoneKey,
 } from 'types';
 import { Mode, modeOrderBarBreakdown } from 'utils/constants';
-import { getProductionCo2Intensity } from 'utils/helpers';
+import { getProductionCo2Intensity, round } from 'utils/helpers';
+import { EnergyUnits } from 'utils/units';
 
 import exchangesToExclude from '../../../../config/excluded_aggregated_exchanges.json';
 
@@ -192,3 +193,22 @@ export const getExchangesToDisplay = (
     (exchangeZoneKey) => !exchangeZoneKeysToRemove.has(exchangeZoneKey)
   );
 };
+
+/**
+ * Convents the price value and unit to the correct value and unit for the matching currency.
+ *
+ * If no currency is provided, the parameters are returned as is.
+ */
+export const convertPrice = (
+  value?: number,
+  currency?: string,
+  unit: EnergyUnits = EnergyUnits.MEGAWATT_HOURS
+): { value?: number; currency?: string; unit: EnergyUnits } => {
+  if (currency === 'EUR') {
+    if (value) {
+      value = round(value / 1000, 4);
+    }
+    return { value: value, currency, unit: EnergyUnits.KILOWATT_HOURS };
+  }
+  return { value, currency, unit };
+};

web/src/features/charts/hooks/usePriceChartData.ts

@@ -2,8 +2,8 @@ import useGetZone from 'api/getZone';
 import getSymbolFromCurrency from 'currency-symbol-map';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
-import { EnergyUnits } from 'utils/units';
 
+import { convertPrice } from '../bar-breakdown/utils';
 import { AreaGraphElement } from '../types';
 
 export function getFills(data: AreaGraphElement[]) {
@@ -32,26 +32,32 @@ export function usePriceChartData() {
     return { isLoading, isError };
   }
 
+  const firstZoneState = Object.values(zoneData.zoneStates)[0].price;
   // We assume that if the first element has price disabled, all of them do
-  const priceDisabledReason = Object.values(zoneData.zoneStates)[0].price?.disabledReason;
+  const priceDisabledReason = firstZoneState?.disabledReason;
+
+  const { currency, unit } = convertPrice(
+    firstZoneState?.value,
+    firstZoneState?.currency
+  );
 
   const chartData: AreaGraphElement[] = [];
 
   for (const [datetimeString, value] of Object.entries(zoneData.zoneStates)) {
     const datetime = new Date(datetimeString);
+    const { value: price } = convertPrice(value.price?.value, value.price?.currency);
+
     chartData.push({
       datetime,
       layerData: {
-        price: value.price?.value ?? Number.NaN,
+        price: price ?? Number.NaN,
       },
       meta: value,
     });
   }
 
-  const currencySymbol: string = getSymbolFromCurrency(
-    Object.values(zoneData.zoneStates)[0].price?.currency // Every price has the same currency
-  );
-  const valueAxisLabel = `${currencySymbol || '?'} / ${EnergyUnits.MEGAWATT_HOURS}`;
+  const currencySymbol: string = getSymbolFromCurrency(currency?.toUpperCase());
+  const valueAxisLabel = `${currencySymbol || '?'} / ${unit}`;
 
   const { layerFill, markerFill } = getFills(chartData);
 

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

@@ -2,8 +2,8 @@ import getSymbolFromCurrency from 'currency-symbol-map';
 import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { timeAverageAtom } from 'utils/state/atoms';
-import { EnergyUnits } from 'utils/units';
 
+import { convertPrice } from '../bar-breakdown/utils';
 import { InnerAreaGraphTooltipProps } from '../types';
 import AreaGraphToolTipHeader from './AreaGraphTooltipHeader';
 
@@ -14,23 +14,25 @@ export default function PriceChartTooltip({ zoneDetail }: InnerAreaGraphTooltipP
   if (!zoneDetail) {
     return null;
   }
-  const { price, stateDatetime } = zoneDetail;
-
-  const priceIsDefined = typeof price?.value === 'number';
-  const currency = priceIsDefined ? getSymbolFromCurrency(price?.currency) : '?';
-  const value = priceIsDefined ? price?.value : '';
+  const { price: priceObject, stateDatetime } = zoneDetail;
+  const { value, currency, unit } = convertPrice(
+    priceObject?.value,
+    priceObject?.currency
+  );
+  const currencySymbol = getSymbolFromCurrency(currency) ?? '?';
+  const price = value ?? Number.NaN;
 
   return (
     <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)}
         timeAverage={timeAverage}
         squareColor="#7f7f7f" // TODO: use price scale color
-        title={t('tooltips.price')} // TODO: get from translation
+        title={t('tooltips.price')}
       />
       <p className="flex justify-center text-base">
-        <b className="mr-1">{value}</b>
-        {currency} / {EnergyUnits.MEGAWATT_HOURS}
+        <b className="mr-1">{price}</b>
+        {currencySymbol} / {unit}
       </p>
     </div>
   );