number fmt tweak

runsascoded · Oct 12, 2023 · 351fb36 · 351fb36
1 parent 9ac1d8c
commit 351fb36
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1315,7 +1315,7 @@ export function Body() {
                     const label = `{ ${containerIdxs.map(idx => sets[idx].name).join(', ')} }`
                     const gridArea = totalRegionAreas && totalRegionAreas[key] || 0
                     const area = gridArea / curStep.total_area.v * curStep.targets.total_area
-                    const areaLabel = fmt(area, 4)
+                    const areaLabel = fmt(area)
                     const target = targets.all.get(key) || 0
                     // console.log("key:", key, "hoveredRegion:", hoveredRegion)
                     return (
@@ -1324,7 +1324,7 @@ export function Body() {
                             show={key == hoveredRegion}
                             overlay={<Tooltip className={css.regionTooltip} onMouseOver={() => setHoveredRegion(key)}>
                                 <p className={css.regionTooltipLabel}>{label}</p>
-                                {fmt(target, 4)} → {areaLabel}
+                                {fmt(target)} → {areaLabel}
                             </Tooltip>}>
                             <text
                                 transform={`translate(${center.x}, ${center.y}) scale(1, -1)`}

diff --git a/src/components/tables/targets.tsx b/src/components/tables/targets.tsx
@@ -113,7 +113,7 @@ export function TargetsTable(
         const valueStr =
             editingValue && editingValue[0] == key
                 ? editingValue[1]
-                : fmt(value, 4)
+                : fmt(value)
         return <tr className={className} key={key}>
             <td className={`${css.val} ${negativeKey}`}>{name}</td>
             <td className={`${css.val} ${css.targetVal}`}>

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,7 +1,7 @@
 import Edge from "./edge";
 import {Point} from "../components/point";
 import {XY} from "./ellipse";
-import {r3} from "./math";
+import { abs, r3 } from "./math";
 import {Dispatch, SetStateAction} from "react";
 
 export const cmp = (a: number, b: number) => a - b;
@@ -106,4 +106,10 @@ export const spaces = (n: number) => {
 
 export type State<T> = [T, Dispatch<SetStateAction<T>>]
 
-export const fmt = (value: number, n: number = 3) => value.toPrecision(n).replace(/\.?0+$/, '')
+export const fmt = (value: number, n?: number) => {
+    if (n === undefined) {
+        // TODO: precision based on max sibling value
+        n = abs(value) >= 1000 ? 4 : 3
+    }
+    return value.toPrecision(n).replace(/\.?0+$/, '')
+}