Legend: format numbers and units

Vizzuality · Nov 28, 2023 · 4874a06 · 4874a06
1 parent 25fc8e2
commit 4874a06
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/client/src/components/map/legend/item-types/basic/index.tsx b/client/src/components/map/legend/item-types/basic/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { cn } from "@/lib/classnames";
+import { formatNumber } from "@/lib/utils/formats";
 
 import { LegendTypeProps } from "../../types";
 
@@ -20,7 +21,7 @@ export const LegendTypeBasic: React.FC<LegendTypeProps> = ({ className = "", ite
                 backgroundColor: color,
               }}
             />
-            <div>{value}</div>
+            <div>{formatNumber(value)}</div>
           </li>
         ))}
       </ul>

diff --git a/client/src/components/map/legend/item-types/choropleth/index.tsx b/client/src/components/map/legend/item-types/choropleth/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { cn } from "@/lib/classnames";
+import { formatNumber } from "@/lib/utils/formats";
 
 import { LegendTypeProps } from "../../types";
 
@@ -33,7 +34,7 @@ export const LegendTypeChoropleth: React.FC<LegendTypeProps> = ({ className = ""
               width: `${100 / items.length}%`,
             }}
           >
-            {value}
+            {formatNumber(value)}
           </li>
         ))}
       </ul>

diff --git a/client/src/components/map/legend/item-types/gradient/index.tsx b/client/src/components/map/legend/item-types/gradient/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { cn } from "@/lib/classnames";
+import { formatNumber } from "@/lib/utils/formats";
 
 import { LegendTypeProps } from "../../types";
 
@@ -30,7 +31,7 @@ export const LegendTypeGradient: React.FC<LegendTypeProps> = ({ className = "",
                 "flex-shrink-0 text-xs": true,
               })}
             >
-              {value}
+              {formatNumber(value)}
             </li>
           ))}
       </ul>

diff --git a/client/src/containers/map/legend/item.tsx b/client/src/containers/map/legend/item.tsx
@@ -59,6 +59,13 @@ const MapLegendItem = ({ id, ...props }: MapLegendItemProps) => {
 
   const settingsManager = getSettingsManager(attributes);
 
+  const LEGEND_NAME = useMemo(() => {
+    if (attributes?.dataset?.data?.attributes?.unit) {
+      return `${attributes?.name} (${attributes?.dataset?.data?.attributes?.unit})`;
+    }
+    return attributes?.name;
+  }, [attributes]);
+
   const LEGEND_COMPONENT = useMemo(() => {
     const l = parseConfig<LegendConfig | ReactElement | null>({
       config: legend_config,
@@ -91,7 +98,7 @@ const MapLegendItem = ({ id, ...props }: MapLegendItemProps) => {
     >
       <LegendItem
         id={id}
-        name={attributes?.name}
+        name={LEGEND_NAME}
         settingsManager={settingsManager}
         {...props}
         onRemove={() => {

diff --git a/client/src/lib/utils/formats.ts b/client/src/lib/utils/formats.ts
@@ -1,3 +1,24 @@
+export function formatNumber(value: unknown, options?: Intl.NumberFormatOptions) {
+  const { format } = Intl.NumberFormat("en-US", {
+    style: "decimal",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    ...options,
+  });
+
+  if (typeof value === "number" || typeof value === "string") {
+    const v = +value;
+
+    if (Number.isNaN(v)) {
+      return value;
+    }
+
+    return format(v);
+  }
+
+  return `${value}`;
+}
+
 export function formatPercentage(value: number, options?: Intl.NumberFormatOptions) {
   const v = Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,