From 14451a8d7b93abc69cf17f45a39f6281f326aaf6 Mon Sep 17 00:00:00 2001
From: dapplion <guillem.lion.benosa@gmail.com>
Date: Sat, 3 Aug 2019 02:36:46 +0200
Subject: [PATCH] Stabilize chart axis

---
 src/SupplyVsDemandChart.tsx |  8 ++++----
 src/utils.ts                | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

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({
         <CartesianGrid strokeDasharray="3 3" />
         <XAxis
           interval={"preserveStartEnd"}
-          ticks={linspace({ to: to, steps: 4 })}
+          ticks={getLinspaceTicks(data.map(d => d[keyHorizontal]), 4)}
           dataKey={keyHorizontal}
           tickFormatter={formatter}
           unit={unit}
@@ -121,7 +121,7 @@ function SupplyVsDemandChart({
         />
         <YAxis
           interval={"preserveStartEnd"}
-          ticks={linspace({ to: f(to), steps: 3 })}
+          ticks={getLinspaceTicks(data.map(d => d[keyVertical]), 3)}
           tickFormatter={formatter}
           unit={unit}
           tick={{ fill: theme.palette.text.secondary }}
@@ -139,7 +139,7 @@ function SupplyVsDemandChart({
         <ReferenceLine
           x={R0}
           stroke="#90a4ae"
-          strokeDasharray="6 3"
+          strokeDasharray="9 0"
           label={<ReferenceLabel />}
         />
         <Legend formatter={renderColorfulLegendText} />
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
  */