fix(insights): don't show very small numbers as zero

Author: cprussin

apps/insights/src/components/LivePrices/index.tsx

@@ -66,20 +66,17 @@ const Price = ({
 }: {
   prev?: number | undefined;
   current?: number | undefined;
-}) => {
-  const numberFormatter = useNumberFormatter({ maximumFractionDigits: 5 });
-
-  return current === undefined ? (
+}) =>
+  current === undefined ? (
     <Skeleton width={SKELETON_WIDTH} />
   ) : (
     <span
       className={styles.price}
       data-direction={prev ? getChangeDirection(prev, current) : "flat"}
     >
-      {numberFormatter.format(current)}
+      <FormattedNumber n={current} />
     </span>
   );
-};
 
 export const LiveConfidence = ({
   publisherKey,
@@ -119,21 +116,56 @@ const LiveComponentConfidence = ({
   return <Confidence confidence={current?.latest.confidence} />;
 };
 
-const Confidence = ({ confidence }: { confidence?: number | undefined }) => {
-  const numberFormatter = useNumberFormatter({ maximumFractionDigits: 5 });
+const Confidence = ({ confidence }: { confidence?: number | undefined }) => (
+  <span className={styles.confidence}>
+    <PlusMinus className={styles.plusMinus} />
+    {confidence === undefined ? (
+      <Skeleton width={SKELETON_WIDTH} />
+    ) : (
+      <span>
+        <FormattedNumber n={confidence} />
+      </span>
+    )}
+  </span>
+);
 
-  return (
-    <span className={styles.confidence}>
-      <PlusMinus className={styles.plusMinus} />
-      {confidence === undefined ? (
-        <Skeleton width={SKELETON_WIDTH} />
-      ) : (
-        <span>{numberFormatter.format(confidence)}</span>
-      )}
-    </span>
+const FormattedNumber = ({ n }: { n: number }) => {
+  const bigNumberFormatter = useNumberFormatter({ maximumFractionDigits: 2 });
+  const smallNumberFormatter = useNumberFormatter({
+    maximumSignificantDigits: 5,
+  });
+  return useMemo(
+    () =>
+      n >= 1000
+        ? bigNumberFormatter.format(n)
+        : formatToSubscriptNumber(smallNumberFormatter.format(n)),
+    [n, bigNumberFormatter, smallNumberFormatter],
   );
 };
 
+const formatToSubscriptNumber = (numString: string) => {
+  const parts = numString.split(".");
+
+  const [integerPart, decimalPart] = parts;
+  if (integerPart && decimalPart) {
+    const zerosCount =
+      decimalPart.length - decimalPart.replace(/^0+/, "").length;
+
+    return zerosCount < 5
+      ? numString
+      : integerPart +
+          "." +
+          "0" +
+          (zerosCount > 9
+            ? String.fromCodePoint(0x20_80 + Math.floor(zerosCount / 10))
+            : "") +
+          String.fromCodePoint(0x20_80 + (zerosCount % 10)) +
+          decimalPart.replace(/^0+/, "");
+  } else {
+    return numString;
+  }
+};
+
 export const LiveLastUpdated = ({
   feedKey,
   cluster,