From cd875152ca9a9609a44e44bfc2f678d9e274a108 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Fri, 27 Aug 2021 12:08:48 +0200
Subject: [PATCH 1/2] features: percentage formatter

---
 .../show-target-spf-item/component.tsx        | 39 ++++++++++---------
 app/utils/numbers.js                          |  6 +++
 2 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 app/utils/numbers.js

diff --git a/app/components/features/show-target-spf-item/component.tsx b/app/components/features/show-target-spf-item/component.tsx
index fa895a11c5..315ffaac5a 100644
--- a/app/components/features/show-target-spf-item/component.tsx
+++ b/app/components/features/show-target-spf-item/component.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import cx from 'classnames';
+import { percentageFormatter } from 'utils/numbers';
 
 import Label from 'components/forms/label';
 import InfoButton from 'components/info-button';
@@ -44,29 +45,29 @@ export const TargetSPFItem: React.FC<ShowTargetSPFItemProps> = ({
               TARGET
             </Label>
             {firstFeature && (
-            <InfoButton>
-              <div>
-                <h4 className="font-heading text-lg mb-2.5">What is a target?</h4>
-                <div className="space-y-2">
-                  <p>
-                    This value represents how much you want to conserve of a particular
-                    feature. In an ideal conservation, land or sea use plan,
-                    all your features meet their targets.
-                  </p>
-                  <p>
-                    You can set a default
-                    value for all of your features
-                    or you can set individual the targets separately for each feature.
-                    You can set your targets to 100% if you want the whole extent of
-                    your feature to be included in the solution.
-                  </p>
+              <InfoButton>
+                <div>
+                  <h4 className="font-heading text-lg mb-2.5">What is a target?</h4>
+                  <div className="space-y-2">
+                    <p>
+                      This value represents how much you want to conserve of a particular
+                      feature. In an ideal conservation, land or sea use plan,
+                      all your features meet their targets.
+                    </p>
+                    <p>
+                      You can set a default
+                      value for all of your features
+                      or you can set individual the targets separately for each feature.
+                      You can set your targets to 100% if you want the whole extent of
+                      your feature to be included in the solution.
+                    </p>
+                  </div>
                 </div>
-              </div>
-            </InfoButton>
+              </InfoButton>
             )}
           </div>
 
-          <p>{`${target}%`}</p>
+          <p>{target && percentageFormatter(target)}</p>
         </div>
         <div className="flex flex-col justify-between w-24 px-4 border-l">
           <div className="flex items-baseline space-x-3">
diff --git a/app/utils/numbers.js b/app/utils/numbers.js
new file mode 100644
index 0000000000..9c3134995a
--- /dev/null
+++ b/app/utils/numbers.js
@@ -0,0 +1,6 @@
+import { format } from 'd3';
+
+export const percentageFormatter = (value) => {
+  const fixedValue = value.toFixed(2);
+  return format('.2%')(parseFloat(fixedValue) / 100);
+};

From 95e6d0ab8f12922d6f1a79df7507ca7cdd942f23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?=
 <miguel.barrenechea@vizzuality.com>
Date: Fri, 27 Aug 2021 12:36:07 +0200
Subject: [PATCH 2/2] Fix: format

---
 app/components/features/show-target-spf-item/component.tsx | 6 +++---
 app/hoc/auth.ts                                            | 1 +
 app/utils/numbers.js                                       | 6 ------
 3 files changed, 4 insertions(+), 9 deletions(-)
 delete mode 100644 app/utils/numbers.js

diff --git a/app/components/features/show-target-spf-item/component.tsx b/app/components/features/show-target-spf-item/component.tsx
index 315ffaac5a..9a6c1d255b 100644
--- a/app/components/features/show-target-spf-item/component.tsx
+++ b/app/components/features/show-target-spf-item/component.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import cx from 'classnames';
-import { percentageFormatter } from 'utils/numbers';
+import { format } from 'd3';
 
 import Label from 'components/forms/label';
 import InfoButton from 'components/info-button';
@@ -12,7 +12,7 @@ export const TargetSPFItem: React.FC<ShowTargetSPFItemProps> = ({
   className,
   type,
   name,
-  target,
+  target = 0,
   fpf,
   id,
   firstFeature,
@@ -67,7 +67,7 @@ export const TargetSPFItem: React.FC<ShowTargetSPFItemProps> = ({
             )}
           </div>
 
-          <p>{target && percentageFormatter(target)}</p>
+          <p>{format('.2~%')(target / 100)}</p>
         </div>
         <div className="flex flex-col justify-between w-24 px-4 border-l">
           <div className="flex items-baseline space-x-3">
diff --git a/app/hoc/auth.ts b/app/hoc/auth.ts
index 8be43bd767..01cf54b868 100644
--- a/app/hoc/auth.ts
+++ b/app/hoc/auth.ts
@@ -2,6 +2,7 @@ import { QueryClient } from 'react-query';
 
 import { getSession } from 'next-auth/client';
 import { dehydrate } from 'react-query/hydration';
+
 import USERS from 'services/users';
 
 import { mergeDehydratedState } from './utils';
diff --git a/app/utils/numbers.js b/app/utils/numbers.js
deleted file mode 100644
index 9c3134995a..0000000000
--- a/app/utils/numbers.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { format } from 'd3';
-
-export const percentageFormatter = (value) => {
-  const fixedValue = value.toFixed(2);
-  return format('.2%')(parseFloat(fixedValue) / 100);
-};