Add top and bottom compression constants

Author: umairnadeem

README.md

@@ -136,7 +136,7 @@ Distributed under the MIT license. See ``LICENSE`` for more information.
 [travis-url]: https://travis-ci.org/dbader/node-datadog-metrics
 [wiki]: https://github.com/umairnadeem/react-line-graph/wiki
 
-## TODO
+## Feature Requests
 - Put all helper methods in a class
 - Fix smoothing algorithm to be more precise using cubic Beziers
 - Clean up prop passing in InteractionLayer*
@@ -147,6 +147,7 @@ Distributed under the MIT license. See ``LICENSE`` for more information.
 - Refactor LineGraph's index.jsx with React Hooks*
 - Publish on NPM, update README tags
 - Allow multiple transformation functions in drawPath function, using piping
+- Add X-Y padding option
 
 ## Challenges
 - Make hovering compatible with responsive height/width: need 3 data points per axis (viewBox dimension, cursor position, current dimension)

spec/_constants/index.js

@@ -1,7 +1,7 @@
 module.exports = {
   pointsWithIntegers: [[0, 10], [10, 70], [20, 45], [30, 100], [40, 10], [60, 80]],
   pointsWithNegatives: [[0, -10], [-10, -70], [20, -45], [-30, 100], [40, -10], [-60, 80]],
-  pointsWithDecimals: [[0.001, -10.92], [-10, -7230.87], [20.2100, -45.00000]],
+  pointsWithDecimals: [[0.001, -10.92], [-10, -7230.87], [20.21, -45.0]],
   pointsUnordered: [[20, 45], [0, 10], [40, 10], [10, 70], [60, 80], [30, 100]],
   pointsRandom: (() => {
     const data = [];
@@ -10,4 +10,5 @@ module.exports = {
     }
     return data;
   })(),
+  pointsExtreme: [[0, 50], [10, 100], [20, 10], [30,110]],
 };

src/components/App.jsx

@@ -4,7 +4,7 @@ import points from '../../spec/_constants';
 
 const App = () => {
   const [hovered, onHover] = useState([0, 0]);
-  const data = points.pointsRandom; // Get random set of points
+  const data = points.pointsExtreme; // Get random set of points
   const props = {
     data,
     smoothing: 0.4,
@@ -13,7 +13,7 @@ const App = () => {
     fillBelow: 'url(#grad1)',
     strokeWidth: 3,
     onHover,
-    compression: 0.5,
+    compression: 0,
   };
 
   return (

src/components/_helpers/line.js

@@ -30,13 +30,16 @@ 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 xDiff = (xMax - xMin) || 1;
   const yDiff = (yMax - yMin) || 1;
-  const compFactor = (1 - Math.min(Math.abs(compression), 1));
   const xFactor = xCeil / xDiff;
-  const yFactor = (yCeil / yDiff) * compFactor;
+  const yFactor = ((yCeil * topComp) / yDiff) * bottomComp;
   const xConst = xCeil - (xFactor * xMax);
-  const yConst = yCeil - (yFactor * yMax);
+  const yConst = yCeil * topComp - (yFactor * yMax);
   return points.map(([x, y]) => [
     Number((x * xFactor + xConst).toFixed(2)),
     Number((y * yFactor + yConst).toFixed(2)),

src/components/_transformations/smooth-alt.js

@@ -0,0 +1,16 @@
+import { findCtrlPoint } from '../_services';
+
+/**
+ * A alternative transformation function that smooths out the lines using
+ * cubic Bezier transformations
+ * @param {Tuple} point - An array with two values, [x,y]
+ * @param {Number} index - The index of the current point in the graph
+ * @param {Array.<Array>} points - The entire points array
+ * @param {Number} ratio - (optional) A smoothing ratio, from 0 to 1
+ */
+export const smoothAlt = (point = [0, 0], index = 0, points = [], ratio = 0) => `C${findCtrlPoint(
+  ratio,
+  points[index - 1],
+  point,
+  points[index + 1],
+).join(',')} ${point.join(',')}`;