Convert top and bottom compression into single compression variable

Author: umairnadeem

spec/_constants/index.js

@@ -10,5 +10,5 @@ module.exports = {
     }
     return data;
   })(),
-  pointsExtreme: [[0, 50], [10, 100], [20, 10], [30,110]],
+  pointsExtreme: [[0, 50], [10, 100], [20, 10], [30,300]],
 };

src/components/App.jsx

@@ -7,7 +7,7 @@ const App = () => {
   const data = points.pointsExtreme; // Get random set of points
   const props = {
     data,
-    smoothing: 0.4,
+    smoothing: 0.3,
     hover: true,
     accent: 'rgb(73,88,209)',
     fillBelow: 'url(#grad1)',

src/components/LineGraph/index.jsx

@@ -87,7 +87,7 @@ LineGraph.defaultProps = {
   accent: 'black',
   strokeWidth: '0.5',
   onHover: () => {},
-  compression: 0,
+  compression: 0.1,
 };
 
 export default LineGraph;

src/components/_helpers/line.js

@@ -30,16 +30,13 @@ export const normalize = (points = [], compression = 0, xCeil = 0, yCeil = 0) =>
     Math.min(elem[0], accum[2]),
     Math.min(elem[1], accum[3]),
   ]), [-Infinity, -Infinity, Infinity, Infinity]);
-  // Top compression
-  const topComp = 0.95;
-  // Bottom compression
-  const bottomComp = (1 - Math.min(Math.abs(compression), 1));
+  const compFactor = (1 - Math.min(Math.abs(compression), 1));
   const xDiff = (xMax - xMin) || 1;
   const yDiff = (yMax - yMin) || 1;
   const xFactor = xCeil / xDiff;
-  const yFactor = ((yCeil * topComp) / yDiff) * bottomComp;
+  const yFactor = ((yCeil * compFactor) / yDiff) * compFactor;
   const xConst = xCeil - (xFactor * xMax);
-  const yConst = yCeil * topComp - (yFactor * yMax);
+  const yConst = yCeil * compFactor - (yFactor * yMax);
   return points.map(([x, y]) => [
     Number((x * xFactor + xConst).toFixed(2)),
     Number((y * yFactor + yConst).toFixed(2)),