diff --git a/src/PriceSimulationChart.tsx b/src/PriceSimulationChart.tsx
index 5362664..034de87 100644
--- a/src/PriceSimulationChart.tsx
+++ b/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 {value};
}
- const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();
-
function ReferenceLabel(props: any) {
const { textAnchor, viewBox, text, fill } = props;
return (
@@ -192,7 +200,7 @@ function PriceSimulationChart({
+(totalFundsMax + totalFundsRange).toPrecision(2)
]}
orientation="right"
- tickFormatter={formatter}
+ tickFormatter={fundsFormatter}
tick={{ fill: yRightColor }}
stroke={yRightColor}
/>
diff --git a/src/SupplyVsDemandChart.tsx b/src/SupplyVsDemandChart.tsx
index 1e00f92..f37552e 100644
--- a/src/SupplyVsDemandChart.tsx
+++ b/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({
- {toolTipData.map(([name, value, unit]) => (
+ {toolTipData.map(([name, value, _unit]) => (
| {name} |
{value} |
- {unit} |
+ {_unit} |
))}
diff --git a/src/utils.ts b/src/utils.ts
index a3aaf16..e1fa43b 100644
--- a/src/utils.ts
+++ b/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 };
+}