fixes percentiles (#583)

- aligns superscript position
- adds intl.plural rules fn to add ordinal superscripts
- updates units tests
- updates snapshot

client/src/components/AreaDetail/areaDetail.module.scss

@@ -55,6 +55,10 @@ $featureSelectBorderColor: #00bde3;
   font-weight: bolder;
 }
 
+.indicatorSuperscript {
+  top: -0.2em
+}
+
 .scoreSuperscript {
   font-size: large;
   padding-bottom: 1rem;

client/src/components/AreaDetail/areaDetail.module.scss.d.ts

@@ -21,6 +21,7 @@ declare namespace MapModuleScssNamespace {
     indicatorDescription:string;
     indicatorValue:string;
     score:string;
+    indicatorSuperscript: string;
   }
 }
 

client/src/components/AreaDetail/index.tsx

@@ -9,8 +9,25 @@ import {defineMessages} from 'react-intl';
 import * as styles from './areaDetail.module.scss';
 import * as constants from '../../data/constants';
 
-export const readablePercent = (percent: number) => {
-  return `${(percent * 100).toFixed(1)}`;
+export const readablePercentile = (percentile: number) => {
+  return Math.round(percentile * 100);
+};
+
+
+// Todo: Add internationalization to superscript ticket #582
+const getSuperscriptOrdinal = (percentile: number) => {
+  const englishOrdinalRules = new Intl.PluralRules('en', {
+    type: 'ordinal',
+  });
+  const suffixes = {
+    zero: 'th',
+    one: 'st',
+    two: 'nd',
+    few: 'rd',
+    many: 'th',
+    other: 'th',
+  };
+  return suffixes[englishOrdinalRules.select(percentile)];
 };
 
 export const getCategorization = (percentile: number) => {
@@ -158,7 +175,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
       <header className={styles.topRow }>
         <div className={styles.cumulativeIndexScore}>
           <div className={styles.topRowTitle}>{intl.formatMessage(messages.cumulativeIndexScore)}</div>
-          <div className={styles.score} data-cy={'score'}>{`${readablePercent(score)}`}
+          <div className={styles.score} data-cy={'score'}>{`${readablePercentile(score)}`}
             <sup className={styles.scoreSuperscript}><span>th</span></sup>
           </div>
           <div className={styles.topRowSubTitle}>{intl.formatMessage(messages.percentile)}</div>
@@ -202,7 +219,12 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
               {indicator.description}
             </div>
           </div>
-          <div className={styles.indicatorValue}>{readablePercent(indicator.value)}</div>
+          <div className={styles.indicatorValue}>
+            {readablePercentile(indicator.value)}
+            <sup className={styles.indicatorSuperscript}><span>
+              {getSuperscriptOrdinal(readablePercentile(indicator.value))}
+            </span></sup>
+          </div>
         </li>
       ))}
 

client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         <div
           data-cy="score"
         >
-          9500.0
+          9500
           <sup>
             <span>
               th
@@ -86,7 +86,12 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         </div>
       </div>
       <div>
-        9900.0
+        9900
+        <sup>
+          <span>
+            th
+          </span>
+        </sup>
       </div>
     </li>
     <li
@@ -101,7 +106,12 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         </div>
       </div>
       <div>
-        9800.0
+        9800
+        <sup>
+          <span>
+            th
+          </span>
+        </sup>
       </div>
     </li>
     <li
@@ -116,7 +126,12 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         </div>
       </div>
       <div>
-        9700.0
+        9700
+        <sup>
+          <span>
+            th
+          </span>
+        </sup>
       </div>
     </li>
     <li
@@ -131,7 +146,12 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         </div>
       </div>
       <div>
-        9600.0
+        9600
+        <sup>
+          <span>
+            th
+          </span>
+        </sup>
       </div>
     </li>
     <li
@@ -146,7 +166,12 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         </div>
       </div>
       <div>
-        9500.0
+        9500
+        <sup>
+          <span>
+            th
+          </span>
+        </sup>
       </div>
     </li>
   </aside>

client/src/components/AreaDetail/tests/areaDetail.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {render} from '@testing-library/react';
-import AreaDetail, {getCategorization, readablePercent} from '..';
+import AreaDetail, {getCategorization, readablePercentile} from '..';
 import {LocalizedComponent} from '../../../test/testHelpers';
 import * as constants from '../../../data/constants';
 
@@ -28,8 +28,11 @@ describe('rendering of the AreaDetail', () => {
   });
 });
 
-describe('tests the readablePercent function', () => {
-  expect(readablePercent(.9877665443)).toEqual('98.8');
+describe('tests the readablePercentile function', () => {
+  expect(readablePercentile(.98)).toEqual(98);
+  expect(readablePercentile(.07)).toEqual(7);
+  expect(readablePercentile(.123)).toEqual(12);
+  expect(readablePercentile(.789)).toEqual(79);
 });
 
 describe('tests the getCategorization function', () => {