Merge pull request #1307 from COVID19Tracking/kevee/crdt-percentage-1305

chore(crdt-dashboard): Fix less than zero percent display

src/__tests__/components/pages/race/dashboard/__snapshots__/breakdown-tables.js.snap

@@ -132,7 +132,7 @@ exports[`Components : Pages : Race : Dashboard : Ethnicity Table renders correct
         <td
           className="borderLeft"
         >
-          0
+          &lt;1
           %
         </td>
       </tr>

src/__tests__/components/pages/race/dashboard/__snapshots__/percent.js.snap

@@ -7,7 +7,7 @@ Array [
 ]
 `;
 
-exports[`Components : Race : Dashboard : Percent renders correctly 2`] = `"–"`;
+exports[`Components : Race : Dashboard : Percent renders correctly 2`] = `"-"`;
 
 exports[`Components : Race : Dashboard : Percent renders correctly 3`] = `
 Array [
@@ -18,7 +18,7 @@ Array [
 
 exports[`Components : Race : Dashboard : Percent renders correctly 4`] = `
 Array [
-  "0",
+  "<1",
   "%",
 ]
 `;

src/components/pages/race/dashboard/percent.js

@@ -2,20 +2,20 @@ import React from 'react'
 import percentStyles from './percent.module.scss'
 
 export default ({ number, highlight }) => {
-  if (number !== null) {
-    let percentage = '0'
-    if (Math.round(number * 100) > 0) {
-      percentage = number * 100 > 1 ? Math.round(number * 100) : '<1'
-    }
-    return (
-      <>
-        {highlight ? (
-          <span className={percentStyles.highlight}>{percentage}%</span>
-        ) : (
-          <>{percentage}%</>
-        )}
-      </>
-    )
+  if (number === null) {
+    return <>-</>
   }
-  return <>–</>
+  let percentage = '0'
+  if (number > 0) {
+    percentage = number * 100 > 1 ? Math.round(number * 100) : '<1'
+  }
+  return (
+    <>
+      {highlight ? (
+        <span className={percentStyles.highlight}>{percentage}%</span>
+      ) : (
+        <>{percentage}%</>
+      )}
+    </>
+  )
 }