ui: add more precision to small percentages

Cases where the percentage was 0 < value < 1 could be showing
as 0 because there was not enough decimal points being displayed,
which was causing confusion.
This commit adds a new function where we treat this cases differently,
adding more decimal points (up to 10) or indicating that the value
is approximately zero (~0.0 %), but not exactly zero.

Part Of #104605

Release note (bug fix): Show more precision to small percentage values
on the percentage bars on the Console.

pkg/ui/workspaces/cluster-ui/src/barCharts/barCharts.tsx

@@ -10,7 +10,7 @@
 
 import * as protos from "@cockroachlabs/crdb-protobuf-client";
 import { stdDevLong, longToInt } from "src/util";
-import { Duration, Bytes, Percentage } from "src/util/format";
+import { Duration, Bytes, PercentageCustom } from "src/util/format";
 import classNames from "classnames/bind";
 import styles from "./barCharts.module.scss";
 import { bar, approximify } from "./utils";
@@ -140,6 +140,6 @@ export function workloadPctBarChart(
           : 0,
       ),
     ],
-    v => Percentage(v, 1, 1),
+    v => PercentageCustom(v, 1, 1),
   )(statements, defaultBarChartOptions);
 }

pkg/ui/workspaces/cluster-ui/src/util/format.spec.ts

@@ -17,6 +17,7 @@ import {
   HexStringToInt64String,
   FixFingerprintHexValue,
   EncodeUriName,
+  PercentageCustom,
 } from "./format";
 
 describe("Format utils", () => {
@@ -89,4 +90,19 @@ describe("Format utils", () => {
       expect(EncodeUriName("12%abc")).toBe("12%252525abc");
     });
   });
+
+  describe("PercentageCustom", () => {
+    it("percentages bigger than 1", () => {
+      assert.equal(PercentageCustom(1, 1, 1), "100.0 %");
+      assert.equal(PercentageCustom(0.1234, 1, 1), "12.3 %");
+      assert.equal(PercentageCustom(0.23432, 1, 1), "23.4 %");
+      assert.equal(PercentageCustom(0.23432, 1, 2), "23.43 %");
+    });
+    it("percentages between 0 and 1", () => {
+      assert.equal(PercentageCustom(0, 1, 1), "0.0 %");
+      assert.equal(PercentageCustom(0.00023, 1, 1), "0.02 %");
+      assert.equal(PercentageCustom(0.0000023, 1, 1), "0.0002 %");
+      assert.equal(PercentageCustom(0.00000000000000004, 1, 1), "~0.0 %");
+    });
+  });
 });

pkg/ui/workspaces/cluster-ui/src/util/format.ts

@@ -132,6 +132,41 @@ export function Percentage(
   return Math.floor((numerator / denominator) * 100).toString() + " %";
 }
 
+/**
+ * PercentageCustom creates a string representation of a fraction as a percentage.
+ * Accepts a precision parameter as optional indicating how many digits
+ * after the decimal point are desired. (e.g. precision 2 returns 8.37 %)
+ * If the number is zero or grater than 1, it works the same way as the Percentage
+ * function above, if is between 0 and 1, it looks for the first non-zero
+ * decimal number, up to 10 decimal points, otherwise shows ~0.0%
+ */
+export function PercentageCustom(
+  numerator: number,
+  denominator: number,
+  precision?: number,
+): string {
+  if (denominator === 0) {
+    return "--%";
+  }
+  const pct = (numerator / denominator) * 100;
+  if (pct <= 0 || pct >= 1) {
+    return Percentage(numerator, denominator, precision);
+  }
+  const pctString = pct.toFixed(10);
+  let finalPct = "0.";
+  let found = false;
+  for (let index = 2; index < pctString.length && !found; index++) {
+    finalPct = `${finalPct}${pctString[index]}`;
+    if (pctString[index] != "0") {
+      found = true;
+    }
+  }
+  if (found) {
+    return finalPct + " %";
+  }
+  return "~0.0 %";
+}
+
 /**
  * ComputeDurationScale calculates an appropriate scale factor and unit to use
  * to display a given duration value, without actually converting the value.