diff --git a/src/SupplyVsDemandChart.tsx b/src/SupplyVsDemandChart.tsx index 44b53f1..c52a7d3 100644 --- a/src/SupplyVsDemandChart.tsx +++ b/src/SupplyVsDemandChart.tsx @@ -10,7 +10,7 @@ import { ResponsiveContainer, Tooltip } from "recharts"; -import { linspace } from "./utils"; +import { getLinspaceTicks } from "./utils"; import { useTheme } from "@material-ui/styles"; function SupplyVsDemandChart({ @@ -112,7 +112,7 @@ function SupplyVsDemandChart({ d[keyHorizontal]), 4)} dataKey={keyHorizontal} tickFormatter={formatter} unit={unit} @@ -121,7 +121,7 @@ function SupplyVsDemandChart({ /> d[keyVertical]), 3)} tickFormatter={formatter} unit={unit} tick={{ fill: theme.palette.text.secondary }} @@ -139,7 +139,7 @@ function SupplyVsDemandChart({ } /> diff --git a/src/utils.ts b/src/utils.ts index 63e4dd4..a3aaf16 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -15,6 +15,20 @@ export function linspace({ return arr; } +/** + * Returns a uniform distribution of `num` ticks + */ +export function getLinspaceTicks(data: number[], num: number) { + const desiredPoints = []; + const step = (data[data.length - 1] - data[0]) / num; + for (let x = data[0]; x < data[data.length - 1]; x += step) { + desiredPoints.push(x); + } + if (desiredPoints.length < num + 1) desiredPoints.push(data[data.length - 1]); + + return desiredPoints; +} + /** * Returns the last element of an array */