Fix tooltip lack of formatting

Author: luccasmmg

deployment/frontend/package-lock.json

@@ -105,6 +105,7 @@
     "next-sitemap": "^4.2.3",
     "nodemailer": "^6.7.8",
     "nprogress": "^0.2.0",
+    "numeral": "^2.0.6",
     "old-vizzuality-components": "npm:[email protected]",
     "papaparse": "^5.4.1",
     "plotly.js": "^2.28.0",

deployment/frontend/package.json

@@ -10,6 +10,7 @@ import { Map, MapLayerMouseEvent } from 'mapbox-gl'
 import { LngLat, MapGeoJSONFeature } from 'react-map-gl/dist/esm/types'
 import { Popup } from 'react-map-gl'
 import { useLayersFromRW } from '@/utils/queryHooks'
+import numeral from 'numeral';
 
 export interface TooltipRef {
     onClickLayer: (e: MapLayerMouseEvent) => void | undefined
@@ -102,6 +103,7 @@ export default forwardRef<TooltipRef>(function Tooltip({}, ref) {
                         </h1>
                         <div>
                             {info.properties?.map((prop: any, j: number) => {
+                                const value = prop.config.format && prop.config.type === 'number' ? numeral(prop.value).format(prop.config.format) : prop.value 
                                 return (
                                     <p
                                         key={`tooltip-layer-${i}-prop-${j}`}
@@ -114,7 +116,7 @@ export default forwardRef<TooltipRef>(function Tooltip({}, ref) {
                                         </span>{' '}
                                         {/* TODO: format value according to prop.config.format */}
                                         {prop.config.prefix}
-                                        {prop.value}
+                                        {value}
                                         {prop.config.suffix}
                                     </p>
                                 )