add spacing for units (electricitymaps#140)

Co-authored-by: Mads Nedergaard <[email protected]>
VIKTORVAV99 · Jan 12, 2023 · 59659f8 · 59659f8
1 parent ca9f0fa
commit 59659f8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/web/src/components/CarbonIntensitySquare.tsx b/web/src/components/CarbonIntensitySquare.tsx
@@ -55,6 +55,7 @@ function CarbonIntensitySquare({
             <animated.span className="font-bold">
               {number.to((x) => `${Math.round(x) || '?'}`)}
             </animated.span>
+            &nbsp;
             <span>g</span>
           </p>
         </animated.div>

diff --git a/web/src/features/exchanges/ExchangeTooltip.tsx b/web/src/features/exchanges/ExchangeTooltip.tsx
@@ -14,7 +14,8 @@ export function CarbonIntensity({ intensity }: { intensity?: number }) {
         className="mr-1 h-3 w-3"
         style={{ backgroundColor: co2ColorScale(intensity ?? 0) }}
       />
-      <b className="flex items-center">{Math.round(intensity ?? 0) || '?'}</b> gCO₂eq/kWh
+      <b className="flex items-center">{Math.round(intensity ?? 0) || '?'}</b>
+      <p className="pl-0.5"> gCO₂eq/kWh</p>
     </div>
   );
 }
@@ -38,7 +39,7 @@ export default function ExchangeTooltip(
       {__('tooltips.crossborderexport')}:
       <div className="flex items-center p-1">
         <ZoneName zone={zoneFrom} /> <p className="m-2">→</p> <ZoneName zone={zoneTo} />
-        <b className="pt-0 text-xs ">:{formatPower(roundedNetFlow)}</b>
+        <b className="pt-0 text-xs ">: {formatPower(roundedNetFlow)}</b>
       </div>
       {__('tooltips.carbonintensityexport')}:
       <div className="p-1">

diff --git a/web/src/utils/formatting.ts b/web/src/utils/formatting.ts
@@ -9,7 +9,10 @@ export const formatPower = function (d: number, numberDigits = DEFAULT_NUM_DIGIT
   if (d == undefined || Number.isNaN(d)) {
     return d;
   }
-  return `${d3.format(`.${numberDigits}s`)(d * 1e6)}W`;
+  const power = `${d3.format(`.${numberDigits}s`)(d * 1e6)}W` //Add a space between the number and the unit
+    .replace(/([A-Z])/, ' $1')
+    .trim();
+  return power;
 };
 
 export const formatCo2 = function (d, numberDigits = DEFAULT_NUM_DIGITS) {