Update package environment for NPM publishing

Author: umairnadeem

.npmignore

@@ -1,6 +1,15 @@
+# Development
 src
 demo
 .babelrc
 .eslintrc
+
+# Webpack
 webpack.config.js
-index.html
+webpack.config.base.js
+webpack.config.dev.js
+webpack.config.prod.js
+
+# Testing
+index.html
+coverage

README.md

@@ -86,7 +86,7 @@ _This renders a smooth graph with hovering enabled. The y-value is passed down t
 | debug     | Boolean          | false            | Displays debug information on graph, including anchor and control points.                                                          |
 | width     | String           | '100%'           | The width of the component within a container element.                                                                             |
 | height    | String           | '100%'           | The height of the component within a container element.                                                                            |
-| compression| Number           | 0           | The compression factor of the data-set from 0 to 1. Compresses data along the Y-axis.                            |
+| compression| Number           | 0.1           | The compression factor of the data-set from 0 to 1. Compresses data linearly from top and bottom along the Y-axis.                            |
 | onHover| Function           | () => {}           | The callback function to which an array containing currently hovered point ([x, y]) is passed when the user hovers. Useful for displaying the hovered value in the parent component (the one you write). Only active when 'hover' is set to true.          |
 
 _For more examples and usage, please refer to the [Wiki][wiki] (under development)._
@@ -148,6 +148,7 @@ Distributed under the MIT license. See ``LICENSE`` for more information.
 - Publish on NPM, update README tags
 - Allow multiple transformation functions in drawPath function, using piping
 - Add X-Y padding option
+- Prevent re-run of findCtrlPoint function upon hover
 
 ## Challenges
 - Make hovering compatible with responsive height/width: need 3 data points per axis (viewBox dimension, cursor position, current dimension)

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "jest --coverage --verbose --watch",
     "start": "webpack-dev-server --open --env=dev",
-    "build": "webpack -d --watch --env=dev"
+    "build": "webpack -d --watch --env=prod"
   },
   "repository": {
     "type": "git",

spec/_constants/index.js

@@ -1,14 +1,14 @@
 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.21, -45.0]],
-  pointsUnordered: [[20, 45], [0, 10], [40, 10], [10, 70], [60, 80], [30, 100]],
-  pointsRandom: (() => {
+  integers: [[0, 10], [10, 70], [20, 45], [30, 100], [40, 10], [60, 80]],
+  negative: [[0, -10], [-10, -70], [20, -45], [-30, 100], [40, -10], [-60, 80]],
+  decimals: [[0.001, -10.92], [-10, -7230.87], [20.21, -45.0]],
+  unordered: [[20, 45], [0, 10], [40, 10], [10, 70], [60, 80], [30, 100]],
+  random: (() => {
     const data = [];
     for (let i = 0; i < 100; i += 1) {
       data.push([i, Math.random() * 20]);
     }
     return data;
   })(),
-  pointsExtreme: [[0, 50], [10, 100], [20, 10], [30,300]],
+  extreme: [[0, 0], [28, 0.97], [29, 19.69], [30, 19.63], [31, 7.96], [60, 0]],
 };

spec/_services-spec/drawPath.test.js

@@ -3,36 +3,36 @@ const CONSTANTS = require('../_constants');
 
 describe('Basic functionality of drawPath', () => {
   it('draws a path given integer coordinates', () => {
-    const integerPath = drawPath(CONSTANTS.pointsWithIntegers);
+    const integerPath = drawPath(CONSTANTS.integers);
     expect(integerPath).toBe('M0,10 L10,70 L20,45 L30,100 L40,10 L60,80');
   });
 
   it('draws a valid path upon given an unordered dataset', () => {
-    const integerPath = drawPath(CONSTANTS.pointsUnordered);
+    const integerPath = drawPath(CONSTANTS.unordered);
     expect(integerPath).toBe('M0,10 L10,70 L20,45 L30,100 L40,10 L60,80');
   });
 
   it('draws a path given negative coordinates', () => {
-    const negativePath = drawPath(CONSTANTS.pointsWithNegatives);
+    const negativePath = drawPath(CONSTANTS.negatives);
     expect(negativePath).toBe('M-60,80 L-30,100 L-10,-70 L0,-10 L20,-45 L40,-10');
   });
 
   it('draws a path given decimal coordinates', () => {
-    const decimalPath = drawPath(CONSTANTS.pointsWithDecimals);
+    const decimalPath = drawPath(CONSTANTS.decimals);
     expect(decimalPath).toBe('M-10,-7230.87 L0.001,-10.92 L20.21,-45');
   });
 });
 
 describe('Advanced functionality of drawPath', () => {
   it('draws a transformed path given a transformation function', () => {
     const transform = (point) => `H${point[0]}`;
-    const integerPath = drawPath(CONSTANTS.pointsWithIntegers, transform);
+    const integerPath = drawPath(CONSTANTS.integers, transform);
     expect(integerPath).toBe('M0,10 H10 H20 H30 H40 H60');
   });
 
   it('passes in a payload to the transformation function', () => {
     const transform = (point, _index, _points, payload) => `H${point[0] + payload}`;
-    const integerPath = drawPath(CONSTANTS.pointsWithIntegers, transform, 10);
+    const integerPath = drawPath(CONSTANTS.integers, transform, 10);
     expect(integerPath).toBe('M0,10 H20 H30 H40 H50 H70');
   });
 });

src/components/App.jsx

@@ -1,23 +1,24 @@
 import React, { useState } from 'react';
 import LineGraph from './LineGraph';
-import points from '../../spec/_constants';
+import POINTS from '../../spec/_constants';
 
 const App = () => {
   const [hovered, onHover] = useState([0, 0]);
-  const data = points.pointsExtreme; // Get random set of points
+  const data = POINTS.extreme;
   const props = {
     data,
-    smoothing: 0.3,
+    smoothing: 1,
     hover: true,
     accent: 'rgb(73,88,209)',
     fillBelow: 'url(#grad1)',
     strokeWidth: 3,
     onHover,
-    compression: 0,
+    compression: 0.3,
   };
 
   return (
     <div id="test">
+      <h1 id="logo">{Number(hovered[0]).toFixed(2)}</h1>
       <h1 id="logo">{Number(hovered[1]).toFixed(2)}</h1>
       <LineGraph {...props} />
     </div>

src/components/_services/findCtrlPoint.js

@@ -28,7 +28,7 @@ export const findCtrlPoint = (smoothing = 0, ...args) => {
   // Apply smoothing ratio
   let [outX] = parse(midPoint);
   const [anchor] = parse(startPoint);
-  const proximity = outX - anchor;
+  const proximity = (outX - anchor) * 0.5;
   outX -= Math.min(Math.abs(smoothing), 1) * proximity;
   const outY = slope * outX + intercept;
 

src/index.jsx

@@ -2,4 +2,4 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
 
-ReactDOM.render(<App />, document.getElementById('main'));
+ReactDOM.render(<App />, document.getElementById('main'));

webpack.config.prod.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const base = require('./webpack.config.base');
 
 module.exports = {
@@ -7,6 +8,23 @@ module.exports = {
     libraryTarget: 'commonjs2',
   },
   externals: {
-    react: 'commonjs react',
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'React',
+      root: 'React',
+    },
+    'react-dom': {
+      commonjs: 'react-dom',
+      commonjs2: 'react-dom',
+      amd: 'ReactDOM',
+      root: 'ReactDOM',
+    },
+  },
+  resolve: {
+    alias: {
+      react: path.resolve(__dirname, './node_modules/react'),
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+    },
   },
 };