From 2e327dc4d78ecc973aeb0cafb092e5a9df6543a1 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 16 Jan 2024 10:59:23 +0000 Subject: [PATCH 1/8] Use one decimal place in the Marine Conservation Coverage widget --- .../map/sidebar/details/widgets/marine-conservation/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx b/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx index c919949f..281a6c30 100644 --- a/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx +++ b/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx @@ -83,7 +83,7 @@ const MarineConservationWidget: React.FC = ({ loc const lastYearData = mergedProtectionStats[mergedProtectionStats.length - 1]; const { protectedArea } = lastYearData; const formatter = Intl.NumberFormat('en-US', { - maximumFractionDigits: 0, + maximumFractionDigits: 1, }); const percentageFormatted = formatter.format((protectedArea / totalArea) * 100); const protectedAreaFormatted = formatKM(protectedArea); From a93f2d5bddd1481f0adf8a1c4cbec57f7cf9a171 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 16 Jan 2024 11:46:53 +0000 Subject: [PATCH 2/8] formatPercentage util to support hiding the units, and change maximumFractiondigits to 1 --- frontend/src/lib/utils/formats.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/lib/utils/formats.ts b/frontend/src/lib/utils/formats.ts index 3ad4f41c..25fd494b 100644 --- a/frontend/src/lib/utils/formats.ts +++ b/frontend/src/lib/utils/formats.ts @@ -1,11 +1,16 @@ -export function formatPercentage(value: number, options?: Intl.NumberFormatOptions) { +export function formatPercentage( + value: number, + options?: Intl.NumberFormatOptions & { displayPercentageSign?: boolean } +) { + const { displayPercentageSign = true, ...intlNumberFormatOptions } = options || {}; + const v = Intl.NumberFormat('en-US', { - maximumFractionDigits: 3, - style: 'percent', - ...options, + maximumFractionDigits: 1, + style: displayPercentageSign ? 'percent' : 'decimal', + ...intlNumberFormatOptions, }); - return v.format(value); + return v.format(displayPercentageSign ? value / 100 : value); } export function formatKM(value: number, options?: Intl.NumberFormatOptions) { From 3f48bc8dcefd0dc8157953fe52fd9a745975a7ec Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 16 Jan 2024 12:31:08 +0000 Subject: [PATCH 3/8] Fix misleading percentage calculation on protected area popup --- .../containers/map/content/map/popup/protected-area/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/containers/map/content/map/popup/protected-area/index.tsx b/frontend/src/containers/map/content/map/popup/protected-area/index.tsx index e75fb8b4..2b870100 100644 --- a/frontend/src/containers/map/content/map/popup/protected-area/index.tsx +++ b/frontend/src/containers/map/content/map/popup/protected-area/index.tsx @@ -102,7 +102,7 @@ const ProtectedAreaPopup = ({ locationId }: { locationId: number }) => { if (!DATA) return null; - const globalCoverage = DATA.REP_M_AREA / locationQuery.data?.attributes?.totalMarineArea; + const globalCoveragePercentage = (DATA.REP_M_AREA / locationQuery.data?.attributes?.totalMarineArea) * 100; const classNameByMPAType = cn({ 'text-green': DATA?.PA_DEF === '1', @@ -125,7 +125,7 @@ const ProtectedAreaPopup = ({ locationId }: { locationId: number }) => {
Global coverage
{format({ - value: globalCoverage, + value: globalCoveragePercentage, id: 'formatPercentage', })}
From 73bc7e4fdaab1fcb3b7bc5cfca8a3a15af7f2841 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 16 Jan 2024 11:49:14 +0000 Subject: [PATCH 4/8] Marine Conservation Coverage widget to use the formatPercentage util --- .../map/content/map/popup/protected-area/index.tsx | 3 ++- .../sidebar/details/widgets/marine-conservation/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/containers/map/content/map/popup/protected-area/index.tsx b/frontend/src/containers/map/content/map/popup/protected-area/index.tsx index 2b870100..53446716 100644 --- a/frontend/src/containers/map/content/map/popup/protected-area/index.tsx +++ b/frontend/src/containers/map/content/map/popup/protected-area/index.tsx @@ -102,7 +102,8 @@ const ProtectedAreaPopup = ({ locationId }: { locationId: number }) => { if (!DATA) return null; - const globalCoveragePercentage = (DATA.REP_M_AREA / locationQuery.data?.attributes?.totalMarineArea) * 100; + const globalCoveragePercentage = + (DATA.REP_M_AREA / locationQuery.data?.attributes?.totalMarineArea) * 100; const classNameByMPAType = cn({ 'text-green': DATA?.PA_DEF === '1', diff --git a/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx b/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx index 281a6c30..979fa9bd 100644 --- a/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx +++ b/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx @@ -5,6 +5,7 @@ import { groupBy } from 'lodash-es'; import ConservationChart from '@/components/charts/conservation-chart'; import Widget from '@/components/widget'; import { formatKM } from '@/lib/utils/formats'; +import { formatPercentage } from '@/lib/utils/formats'; import { useGetProtectionCoverageStats } from '@/types/generated/protection-coverage-stat'; import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; @@ -82,10 +83,9 @@ const MarineConservationWidget: React.FC = ({ loc const totalArea = location.totalMarineArea; const lastYearData = mergedProtectionStats[mergedProtectionStats.length - 1]; const { protectedArea } = lastYearData; - const formatter = Intl.NumberFormat('en-US', { - maximumFractionDigits: 1, + const percentageFormatted = formatPercentage((protectedArea / totalArea) * 100, { + displayPercentageSign: false, }); - const percentageFormatted = formatter.format((protectedArea / totalArea) * 100); const protectedAreaFormatted = formatKM(protectedArea); return { From 9e438415e0e4ba1de61814345a2fcd9a549494d0 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 16 Jan 2024 11:53:32 +0000 Subject: [PATCH 5/8] Horizontal Bar Chart component to use the formatPercentage util --- .../src/components/charts/horizontal-bar-chart/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/charts/horizontal-bar-chart/index.tsx b/frontend/src/components/charts/horizontal-bar-chart/index.tsx index 2e60c795..d1adb245 100644 --- a/frontend/src/components/charts/horizontal-bar-chart/index.tsx +++ b/frontend/src/components/charts/horizontal-bar-chart/index.tsx @@ -4,6 +4,7 @@ import { format } from 'd3-format'; import TooltipButton from '@/components/tooltip-button'; import { cn } from '@/lib/classnames'; +import { formatPercentage } from '@/lib/utils/formats'; const DEFAULT_MAX_PERCENTAGE = 100; const PROTECTION_TARGET = 30; @@ -34,12 +35,7 @@ const HorizontalBarChart: React.FC = ({ }, []); const protectedAreaPercentage = useMemo(() => { - if (!totalArea || !protectedArea) return format('.0%')(0); - - if (protectedArea / totalArea < 0.01) return format('.3%')(protectedArea / totalArea); - if (protectedArea / totalArea < 0.1) return format('.2%')(protectedArea / totalArea); - - return format('.0%')(protectedArea / totalArea); + return formatPercentage((protectedArea / totalArea) * 100, { displayPercentageSign: false }); }, [totalArea, protectedArea]); const barFillPercentage = useMemo(() => { From c0505d0b76abdf0831f5dd658070431f2c164d90 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 16 Jan 2024 12:25:28 +0000 Subject: [PATCH 6/8] cellFormatter.percentage to use the new formatPercentage util --- frontend/src/containers/map/content/details/table/helpers.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/containers/map/content/details/table/helpers.ts b/frontend/src/containers/map/content/details/table/helpers.ts index 539e4261..59a69d66 100644 --- a/frontend/src/containers/map/content/details/table/helpers.ts +++ b/frontend/src/containers/map/content/details/table/helpers.ts @@ -1,7 +1,9 @@ import { format } from 'd3-format'; +import { formatPercentage } from '@/lib/utils/formats'; + const percentage = (value: number) => { - return format(',.2r')(value) == '0.0' ? '0' : format(',.2r')(value); + return formatPercentage(value, { displayPercentageSign: false }); }; const area = (value: number) => { From 9dd4dce9f590311d31e39257af9121070f430e45 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 16 Jan 2024 12:51:19 +0000 Subject: [PATCH 7/8] If percentage values greater than 0 but smaller than 0.1, display <0.1% --- frontend/src/lib/utils/formats.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/lib/utils/formats.ts b/frontend/src/lib/utils/formats.ts index 25fd494b..dbd5fb8a 100644 --- a/frontend/src/lib/utils/formats.ts +++ b/frontend/src/lib/utils/formats.ts @@ -4,6 +4,10 @@ export function formatPercentage( ) { const { displayPercentageSign = true, ...intlNumberFormatOptions } = options || {}; + if (value < 0.1 && value > 0) { + return displayPercentageSign ? '<0.1%' : '<0.1'; + } + const v = Intl.NumberFormat('en-US', { maximumFractionDigits: 1, style: displayPercentageSign ? 'percent' : 'decimal', From db4c83e44bc039b686192fc5758ac079cc2d5590 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 16 Jan 2024 12:54:50 +0000 Subject: [PATCH 8/8] Minor tweak on the percentage sign spacing for the HorizontalBarChart component --- frontend/src/components/charts/horizontal-bar-chart/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/charts/horizontal-bar-chart/index.tsx b/frontend/src/components/charts/horizontal-bar-chart/index.tsx index d1adb245..c5187cec 100644 --- a/frontend/src/components/charts/horizontal-bar-chart/index.tsx +++ b/frontend/src/components/charts/horizontal-bar-chart/index.tsx @@ -54,7 +54,7 @@ const HorizontalBarChart: React.FC = ({
{protectedAreaPercentage} - % + %