Fine tune chart tooltips

src/PriceSimulationChart.tsx

@@ -12,7 +12,7 @@ import {
 } from "recharts";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { useTheme } from "@material-ui/styles";
-import { linspace } from "./utils";
+import { linspace, getUnits } from "./utils";
 
 const keyHorizontal = "x";
 const keyVerticalLeft = "Price (DAI/token)";
@@ -84,22 +84,34 @@ function PriceSimulationChart({
     };
   });
 
-  // Chart components
+  // Compute chart related math
+
+  const totalFundsMin = totalFundsRaisedTimeseries[0];
+  const totalFundsMax = totalFundsRaisedTimeseries.slice(-1)[0];
+  const totalFundsRange = totalFundsMax - totalFundsMin;
+
+  const daiFormatter = (n: number) => (+n.toFixed(2)).toLocaleString();
+  const { scaling, unit } = getUnits(totalFundsMax);
+  const fundsFormatter = (n: number) => (+n.toPrecision(3)).toLocaleString();
+  const fundsFormatterShort = (n: number) =>
+    (+(n / scaling).toPrecision(3)).toLocaleString();
+
+  // Load styles
 
   const theme: any = useTheme();
   const classes = useStyles();
 
+  // Chart components
+
   function renderColorfulLegendText(value: string) {
     return <span style={{ color: theme.palette.text.secondary }}>{value}</span>;
   }
 
-  const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();
-
   function ReferenceLabel(props: any) {
     const { textAnchor, viewBox, text, fill } = props;
     return (
       <text
-        x={viewBox.x + 8}
+        x={viewBox.x + 4}
         y={viewBox.y + 17}
         fill={referenceLineColor}
         textAnchor={textAnchor}
@@ -113,12 +125,12 @@ function PriceSimulationChart({
     if (active) {
       const price = payload[0].value;
       const floor = payload[1].value;
-      const exit = payload[2].value;
+      const funds = payload[2].value;
       const weekNum = label;
       const toolTipData: string[][] = [
-        ["Price", price.toFixed(2), "DAI/tk"],
-        ["Floor P.", floor.toFixed(2), "DAI/tk"],
-        ["Funds R.", formatter(exit), "DAI"],
+        ["Price", daiFormatter(price), "DAI/tk"],
+        ["Floor P.", daiFormatter(floor), "DAI/tk"],
+        ["Funds R.", fundsFormatterShort(funds) + unit, "DAI"],
         ["Week", weekNum, ""]
       ];
 
@@ -140,10 +152,6 @@ function PriceSimulationChart({
     } else return null;
   }
 
-  const totalFundsMin = totalFundsRaisedTimeseries[0];
-  const totalFundsMax = totalFundsRaisedTimeseries.slice(-1)[0];
-  const totalFundsRange = totalFundsMax - totalFundsMin;
-
   return (
     <ResponsiveContainer debounce={1}>
       <AreaChart
@@ -179,7 +187,7 @@ function PriceSimulationChart({
         <YAxis
           yAxisId="left"
           domain={[0, Math.max(...priceTimeseries, p1 * 1.25)]}
-          tickFormatter={formatter}
+          tickFormatter={daiFormatter}
           tick={{ fill: yLeftColor }}
           stroke={yLeftColor}
         />
@@ -192,7 +200,7 @@ function PriceSimulationChart({
             +(totalFundsMax + totalFundsRange).toPrecision(2)
           ]}
           orientation="right"
-          tickFormatter={formatter}
+          tickFormatter={fundsFormatter}
           tick={{ fill: yRightColor }}
           stroke={yRightColor}
         />

src/SupplyVsDemandChart.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip
 } from "recharts";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
-import { getLinspaceTicks } from "./utils";
+import { getLinspaceTicks, getUnits } from "./utils";
 import { getInitialParams, getPriceR } from "./math";
 import { useTheme } from "@material-ui/styles";
 
@@ -73,18 +73,7 @@ function SupplyVsDemandChart({
    * Prettify the result converting 1000000 to 1M
    */
   const biggest = Math.max(to, f(to));
-  const [scaling, unit] =
-    // Billion
-    biggest > 0.5e9
-      ? [1e9, "B"]
-      : // Million
-      biggest > 0.5e6
-      ? [1e6, "M"]
-      : // 1 thousand
-      biggest > 0.5e3
-      ? [1e3, "K"]
-      : // No scale
-        [1, ""];
+  const { scaling, unit } = getUnits(biggest);
 
   const data = [];
   for (let i = 0; i < steps; i++) {
@@ -135,11 +124,11 @@ function SupplyVsDemandChart({
         <div className={classes.tooltip}>
           <table>
             <tbody>
-              {toolTipData.map(([name, value, unit]) => (
+              {toolTipData.map(([name, value, _unit]) => (
                 <tr key={name}>
                   <td>{name}</td>
                   <td>{value}</td>
-                  <td>{unit}</td>
+                  <td>{_unit}</td>
                 </tr>
               ))}
             </tbody>

src/utils.ts

@@ -49,3 +49,24 @@ export function getAvg(a: number[]) {
 export function pause(ms: number) {
   return new Promise(r => setTimeout(r, ms));
 }
+
+/**
+ * Parse the units of big numbers
+ */
+export function getUnits(
+  biggestNum: number
+): { scaling: number; unit: string } {
+  const [scaling, unit] =
+    // Billion
+    biggestNum > 0.5e9
+      ? [1e9, "B"]
+      : // Million
+      biggestNum > 0.5e6
+      ? [1e6, "M"]
+      : // 1 thousand
+      biggestNum > 0.5e3
+      ? [1e3, "K"]
+      : // No scale
+        [1, ""];
+  return { scaling, unit };
+}