From 897bd0ff166f13bbd4376c52a78a31529d630177 Mon Sep 17 00:00:00 2001 From: Biel Stela Date: Thu, 18 Jan 2024 11:50:00 +0100 Subject: [PATCH] Remove SI symbol suffix for <1 values WIP Applied the new formattings to legens only --- .../analysis-legend/contextual-legend-item/component.tsx | 6 ++++-- client/src/utils/number-format.ts | 6 +++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx index 9f23accbb..a3ece028b 100644 --- a/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx +++ b/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 {NUMBER_FORMAT, SMALL_NUMBER_FORMAT} 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,9 @@ 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 : + item.value > 1 ? NUMBER_FORMAT(item.value as number) : SMALL_NUMBER_FORMAT(item.value as number) + }`, })), }; switch (layer.metadata.legend.type) { diff --git a/client/src/utils/number-format.ts b/client/src/utils/number-format.ts index fc6ed2f67..80ee6b79b 100644 --- a/client/src/utils/number-format.ts +++ b/client/src/utils/number-format.ts @@ -1,6 +1,10 @@ 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 const PRECISE_NUMBER_FORMAT = format(',.3~r');