From 9a9c1eda18d56966b7817339c49d28cff3413e6d Mon Sep 17 00:00:00 2001 From: Biel Stela Date: Thu, 18 Jan 2024 12:24:58 +0100 Subject: [PATCH] Moves logic branch to number-format.ts and applies new function to all the cases --- .../analysis-chart/comparison-chart/component.tsx | 4 ++-- .../comparison-chart/tooltip/component.tsx | 10 +++++----- .../analysis-chart/impact-chart/component.tsx | 4 ++-- .../impact-chart/tooltip/component.tsx | 4 ++-- .../contextual-legend-item/component.tsx | 6 ++---- .../material-legend-item/component.tsx | 6 +++--- .../analysis-map/component.tsx | 4 ++-- .../analysis-table/comparison-cell/component.tsx | 4 ++-- .../analysis-table/component.tsx | 12 +++++------- client/src/hooks/layers/impact.ts | 6 +++--- client/src/utils/number-format.ts | 7 +++++++ 11 files changed, 35 insertions(+), 32 deletions(-) diff --git a/client/src/containers/analysis-chart/comparison-chart/component.tsx b/client/src/containers/analysis-chart/comparison-chart/component.tsx index 432c83c07..2762db7f2 100644 --- a/client/src/containers/analysis-chart/comparison-chart/component.tsx +++ b/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 = ({ indicator }) => { label={{ value: chartData.unit, angle: -90, position: 'insideLeft' }} tick={{ fill: '#15181F', fontWeight: 300 }} tickLine={false} - tickFormatter={NUMBER_FORMAT} + tickFormatter={formatNumber} /> diff --git a/client/src/containers/analysis-chart/comparison-chart/tooltip/component.tsx b/client/src/containers/analysis-chart/comparison-chart/tooltip/component.tsx index a1a36121e..8a8a95eb2 100644 --- a/client/src/containers/analysis-chart/comparison-chart/tooltip/component.tsx +++ b/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 = ({ payload }) => { className="h-[1px] w-[16px] border-b-2" style={{ borderColor: tooltipData[1]?.stroke }} /> -
{NUMBER_FORMAT(comparedValue)}
+
{formatNumber(comparedValue)}
)} {(comparedValue || comparedValue === 0) && ( @@ -49,8 +49,8 @@ const CustomTooltip: React.FC = ({ payload }) => { > {absoluteDifference > 0 && '+'} {comparisonMode === 'absolute' - ? NUMBER_FORMAT(absoluteDifference) - : `${NUMBER_FORMAT(percentageDifference)}%`} + ? formatNumber(absoluteDifference) + : `${formatNumber(percentageDifference)}%`} )} @@ -59,7 +59,7 @@ const CustomTooltip: React.FC = ({ payload }) => { className="h-[1px] w-[16px] border-b-2" style={{ borderColor: tooltipData[0].stroke }} /> -
{NUMBER_FORMAT(baseValue)}
+
{formatNumber(baseValue)}
); diff --git a/client/src/containers/analysis-chart/impact-chart/component.tsx b/client/src/containers/analysis-chart/impact-chart/component.tsx index d6a383313..d1759bab7 100644 --- a/client/src/containers/analysis-chart/impact-chart/component.tsx +++ b/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 = ({ 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) => ( diff --git a/client/src/containers/analysis-chart/impact-chart/tooltip/component.tsx b/client/src/containers/analysis-chart/impact-chart/tooltip/component.tsx index c95331edc..95b45dab5 100644 --- a/client/src/containers/analysis-chart/impact-chart/tooltip/component.tsx +++ b/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 = ({ payload }) => ( style={{ backgroundColor: item.color }} />
{item.name}
-
{NUMBER_FORMAT(item.value as number)}
+
{formatNumber(item.value as number)}
))} 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 a3ece028b..f2398f559 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, SMALL_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,9 +38,7 @@ const ContextualLegendItem = ({ layer }: ContextualLegendItemProps) => { ...item, label: item.label || - `${Number.isNaN(item.value) ? item.value : - item.value > 1 ? NUMBER_FORMAT(item.value as number) : SMALL_NUMBER_FORMAT(item.value as number) - }`, + `${Number.isNaN(item.value) ? item.value : formatNumber(item.value as number)}`, })), }; switch (layer.metadata.legend.type) { diff --git a/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx index 1b281112b..a9183402a 100644 --- a/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx +++ b/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], }), ), diff --git a/client/src/containers/analysis-visualization/analysis-map/component.tsx b/client/src/containers/analysis-visualization/analysis-map/component.tsx index 4601ad6ea..ac76f83bc 100644 --- a/client/src/containers/analysis-visualization/analysis-map/component.tsx +++ b/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(); }; }; diff --git a/client/src/containers/analysis-visualization/analysis-table/comparison-cell/component.tsx b/client/src/containers/analysis-visualization/analysis-table/comparison-cell/component.tsx index a754de768..2c11ed742 100644 --- a/client/src/containers/analysis-visualization/analysis-table/comparison-cell/component.tsx +++ b/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 = ({ absoluteDifference, percentageDifference, unit, - formatter = NUMBER_FORMAT, + formatter = formatNumber, }) => { const { comparisonMode } = useAppSelector(scenarios); diff --git a/client/src/containers/analysis-visualization/analysis-table/component.tsx b/client/src/containers/analysis-visualization/analysis-table/component.tsx index 9b5e7520d..e097ab612 100644 --- a/client/src/containers/analysis-visualization/analysis-table/component.tsx +++ b/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 = ( row: ImpactRowType, ): row is ImpactRowType => { @@ -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 = () => { ); }, diff --git a/client/src/hooks/layers/impact.ts b/client/src/hooks/layers/impact.ts index 1eb765551..cc0b134de 100644 --- a/client/src/hooks/layers/impact.ts +++ b/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], }), ), diff --git a/client/src/utils/number-format.ts b/client/src/utils/number-format.ts index 80ee6b79b..41dd5cfc1 100644 --- a/client/src/utils/number-format.ts +++ b/client/src/utils/number-format.ts @@ -6,6 +6,13 @@ 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'); export const BIG_NUMBER_FORMAT = format('s');