LANDGRIF-1509 Fix small number formatting

client/src/containers/analysis-chart/comparison-chart/component.tsx

@@ -19,7 +19,7 @@ import { useAppSelector } from 'store/hooks';
 import { filtersForTabularAPI } from 'store/features/analysis/selector';
 import { useImpactComparison } from 'hooks/impact/comparison';
 import Loading from 'components/loading';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 
 import type { Indicator } from 'types';
 import type { ImpactComparisonParams } from 'hooks/impact/comparison';
@@ -197,7 +197,7 @@ const StackedAreaChart: React.FC<StackedAreaChartProps> = ({ indicator }) => {
                     label={{ value: chartData.unit, angle: -90, position: 'insideLeft' }}
                     tick={{ fill: '#15181F', fontWeight: 300 }}
                     tickLine={false}
-                    tickFormatter={NUMBER_FORMAT}
+                    tickFormatter={formatNumber}
                   />
                   <Tooltip animationDuration={500} content={renderTooltip} />
 

client/src/containers/analysis-chart/comparison-chart/tooltip/component.tsx

@@ -3,7 +3,7 @@ import { uniqBy } from 'lodash-es';
 
 import { useAppSelector } from 'store/hooks';
 import { scenarios } from 'store/features/analysis';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 
 type CustomTooltipProps = {
   payload: {
@@ -35,7 +35,7 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload }) => {
               className="h-[1px] w-[16px] border-b-2"
               style={{ borderColor: tooltipData[1]?.stroke }}
             />
-            <div>{NUMBER_FORMAT(comparedValue)}</div>
+            <div>{formatNumber(comparedValue)}</div>
           </div>
         )}
         {(comparedValue || comparedValue === 0) && (
@@ -49,8 +49,8 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload }) => {
           >
             {absoluteDifference > 0 && '+'}
             {comparisonMode === 'absolute'
-              ? NUMBER_FORMAT(absoluteDifference)
-              : `${NUMBER_FORMAT(percentageDifference)}%`}
+              ? formatNumber(absoluteDifference)
+              : `${formatNumber(percentageDifference)}%`}
           </div>
         )}
       </div>
@@ -59,7 +59,7 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload }) => {
           className="h-[1px] w-[16px] border-b-2"
           style={{ borderColor: tooltipData[0].stroke }}
         />
-        <div className="text-gray-400">{NUMBER_FORMAT(baseValue)}</div>
+        <div className="text-gray-400">{formatNumber(baseValue)}</div>
       </div>
     </div>
   );

client/src/containers/analysis-chart/impact-chart/component.tsx

@@ -20,7 +20,7 @@ import { useImpactRanking } from 'hooks/impact/ranking';
 import { useAppSelector } from 'store/hooks';
 import { scenarios } from 'store/features/analysis';
 import Loading from 'components/loading';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 
 import type { ExtendedLegendProps } from './legend/component';
 import type { Indicator } from 'types';
@@ -316,7 +316,7 @@ const StackedAreaChart: React.FC<StackedAreaChartProps> = ({ indicator }) => {
                     label={{ value: chartData.unit, angle: -90, position: 'insideLeft' }}
                     tick={{ fill: '#15181F', fontWeight: 300 }}
                     tickLine={false}
-                    tickFormatter={NUMBER_FORMAT}
+                    tickFormatter={formatNumber}
                   />
 
                   {CHART_DATA.keys.map((key) => (

client/src/containers/analysis-chart/impact-chart/tooltip/component.tsx

@@ -1,4 +1,4 @@
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 
 type CustomTooltipProps = {
   payload: {
@@ -22,7 +22,7 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload }) => (
               style={{ backgroundColor: item.color }}
             />
             <div className="flex-1 truncate text-left">{item.name}</div>
-            <div className="text-gray-400">{NUMBER_FORMAT(item.value as number)}</div>
+            <div className="text-gray-400">{formatNumber(item.value as number)}</div>
           </li>
         ))}
     </ul>

client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 
 import { useAppDispatch } from 'store/hooks';
 import { setLayer } from 'store/features/analysis/map';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 import LegendItem from 'components/legend/item';
 import LegendTypeBasic from 'components/legend/types/basic';
 import LegendTypeCategorical from 'components/legend/types/categorical';
@@ -38,7 +38,7 @@ const ContextualLegendItem = ({ layer }: ContextualLegendItemProps) => {
         ...item,
         label:
           item.label ||
-          `${!Number.isNaN(item.value) ? NUMBER_FORMAT(item.value as number) : item.value}`,
+          `${Number.isNaN(item.value) ? item.value : formatNumber(item.value as number)}`,
       })),
     };
     switch (layer.metadata.legend.type) {

client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx

@@ -5,7 +5,7 @@ import { analysisMap, setLayer } from 'store/features/analysis/map';
 import { analysisFilters } from 'store/features/analysis';
 import LegendTypeChoropleth from 'components/legend/types/choropleth';
 import LegendItem from 'components/legend/item';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 import { COLOR_RAMPS } from 'utils/colors';
 import Materials from 'containers/analysis-visualization/analysis-filters/materials/component';
 import { useMaterial } from 'hooks/materials';
@@ -43,10 +43,10 @@ const MaterialLayer = () => {
                 type: 'basic',
                 name: `${material.metadata.name}`,
                 unit: data.metadata.unit,
-                min: !!data.metadata.quantiles.length && NUMBER_FORMAT(data.metadata.quantiles[0]),
+                min: !!data.metadata.quantiles.length && formatNumber(data.metadata.quantiles[0]),
                 items: data.metadata.quantiles.slice(1).map(
                   (v, index): LegendItemsProps => ({
-                    value: NUMBER_FORMAT(v),
+                    value: formatNumber(v),
                     color: COLOR_RAMPS[LAYER_ID][index],
                   }),
                 ),

client/src/containers/analysis-visualization/analysis-map/component.tsx

@@ -12,7 +12,7 @@ import PageLoading from 'containers/page-loading';
 import ZoomControl from 'components/map/controls/zoom';
 import PopUp from 'components/map/popup';
 import BasemapControl from 'components/map/controls/basemap';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 import Map, { INITIAL_VIEW_STATE } from 'components/map';
 import { getLayerConfig } from 'components/map/layers/utils';
 
@@ -32,7 +32,7 @@ const getLegendScale = (legendInfo: LegendType) => {
   }
   return (value: number) => {
     if (!value) return null;
-    if (!Number.isNaN(value)) return NUMBER_FORMAT(Number(value));
+    if (!Number.isNaN(value)) return formatNumber(Number(value));
     return value.toString();
   };
 };

client/src/containers/analysis-visualization/analysis-table/comparison-cell/component.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 
 import { useAppSelector } from 'store/hooks';
 import { scenarios } from 'store/features/analysis/scenarios';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 
 export interface ComparisonCellProps {
   value: number;
@@ -20,7 +20,7 @@ const ComparisonCell: React.FC<ComparisonCellProps> = ({
   absoluteDifference,
   percentageDifference,
   unit,
-  formatter = NUMBER_FORMAT,
+  formatter = formatNumber,
 }) => {
   const { comparisonMode } = useAppSelector(scenarios);
 

client/src/containers/analysis-visualization/analysis-table/component.tsx

@@ -21,7 +21,7 @@ import { useImpactComparison, useImpactScenarioComparison } from 'hooks/impact/c
 import AnalysisDynamicMetadata from 'containers/analysis-visualization/analysis-dynamic-metadata';
 import { Button } from 'components/button';
 import Table from 'components/table/component';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 import { DEFAULT_PAGE_SIZES } from 'components/table/pagination/constants';
 import { useIndicatorParam } from 'utils/indicator-param';
 import { handleResponseError } from 'services/api';
@@ -39,8 +39,6 @@ import type { ColumnDefinition } from 'components/table/column';
 import type { ChartData } from './chart-cell/types';
 import type { ComparisonMode, ImpactRowType, ImpactTableValueItem } from './types';
 
-const NUMBER_FORMATTER = NUMBER_FORMAT;
-
 const isParentRow = <Mode extends ComparisonMode>(
   row: ImpactRowType<Mode, true | false>,
 ): row is ImpactRowType<Mode, true> => {
@@ -366,9 +364,9 @@ const AnalysisTable = () => {
 
           if (!isComparison && !isScenarioComparison) {
             if (unit) {
-              return `${NUMBER_FORMATTER(value.value)} ${unit}`;
+              return `${formatNumber(value.value)} ${unit}`;
             }
-            return NUMBER_FORMATTER(value?.value);
+            return formatNumber(value?.value);
           }
 
           if (isScenarioComparison) {
@@ -379,7 +377,7 @@ const AnalysisTable = () => {
                 value={baseScenarioValue}
                 scenarioValue={comparedScenarioValue}
                 unit={unit}
-                formatter={NUMBER_FORMATTER}
+                formatter={formatNumber}
                 isFirs
               />
             );
@@ -389,7 +387,7 @@ const AnalysisTable = () => {
             <ComparisonCell
               {...value}
               scenarioValue={value.comparedScenarioValue}
-              formatter={NUMBER_FORMATTER}
+              formatter={formatNumber}
             />
           );
         },

client/src/hooks/layers/impact.ts

@@ -5,7 +5,7 @@ import { omit } from 'lodash-es';
 import { useAppDispatch, useAppSelector } from 'store/hooks';
 import { analysisFilters } from 'store/features/analysis/filters';
 import { analysisMap, setLayer, setLayerDeckGLProps } from 'store/features/analysis/map';
-import { NUMBER_FORMAT } from 'utils/number-format';
+import { formatNumber } from 'utils/number-format';
 import { COLOR_RAMPS } from 'utils/colors';
 import useH3ImpactData from 'hooks/h3-data/impact';
 import useH3ComparisonData from 'hooks/h3-data/impact/comparison';
@@ -71,13 +71,13 @@ export const useImpactLayer = () => {
                 type: 'basic',
                 name: `${indicator.label} in ${year}`,
                 unit: data.metadata.unit,
-                min: !!data.metadata.quantiles.length && NUMBER_FORMAT(data.metadata.quantiles[0]),
+                min: !!data.metadata.quantiles.length && formatNumber(data.metadata.quantiles[0]),
                 items: data.metadata.quantiles
                   .sort((a, b) => a - b) // always sort quantiles
                   .slice(1)
                   .map(
                     (v, index): LegendItemProp => ({
-                      value: NUMBER_FORMAT(v),
+                      value: formatNumber(v),
                       color: COLOR_RAMPS[colorKey][index],
                     }),
                   ),

client/src/utils/number-format.ts

@@ -1,6 +1,17 @@
 import { format } from 'd3-format';
 
-export const NUMBER_FORMAT = format(',.3~s');
+// for numbers bigger than 1
+export const NUMBER_FORMAT = format('.3~s');
+
+// for numbers smaller than 1
+export const SMALL_NUMBER_FORMAT = format('.3~g');
+
+export function formatNumber(number: number): string {
+  if (number < 1) {
+    return SMALL_NUMBER_FORMAT(number);
+  }
+  return NUMBER_FORMAT(number);
+}
 
 export const PRECISE_NUMBER_FORMAT = format(',.3~r');