react-boxplot - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

CHANGELOG.md

 # Changelog
 
+## 3.l.0 -- Jan 1, 2019
+
+- Support React 16.8.
+- Upgrade to Babel 7 and Rollup 1.
+- Switch test runner back to Mocha.
+- Update example app.
+
 ## 3.0.1 -- Jan 1, 2019
@@ -4,0 +11,0 @@

dist/index.es.js

 /**
  * @class Boxplot
  */
-
 var React = require('react');
-var PropTypes = require('prop-types');
 
-// Inspiration:
+var PropTypes = require('prop-types'); // Inspiration:
 //
@@ -15,2 +13,4 @@ // - https://turgar.github.io/
 //
+
+
 var Boxplot = function Boxplot(_ref) {
@@ -33,23 +33,16 @@ var width = _ref.width,
       className = _ref.className;
+  var xMax, horizScaleFactor, vertScaleFactor, transforms;
 
-  var xMax = void 0,
-      horizScaleFactor = void 0,
-      vertScaleFactor = void 0,
-      transforms = void 0;
   if (orientation === 'vertical') {
     xMax = width;
-
     vertScaleFactor = height / (max - min);
-    horizScaleFactor = 1.0;
+    horizScaleFactor = 1.0; // Coordinate system: +y at the top, +x to the right.
 
-    // Coordinate system: +y at the top, +x to the right.
-    transforms = ['translate (' + -min + ', 0)', 'translate (0, ' + height + ')', 'scale(1, -' + vertScaleFactor + ')'];
+    transforms = ["translate (".concat(-min, ", 0)"), "translate (0, ".concat(height, ")"), "scale(1, -".concat(vertScaleFactor, ")")];
   } else {
     xMax = height;
-
     horizScaleFactor = width / (max - min);
-    vertScaleFactor = 1.0;
+    vertScaleFactor = 1.0; // Coordinate system: +y at the right, +x to the top.
 
-    // Coordinate system: +y at the right, +x to the top.
-    transforms = ['scale(' + horizScaleFactor + ', 1) ', 'translate (' + -min + ', 0) ', 'translate (0, ' + height + ') ', 'rotate(-90)'];
+    transforms = ["scale(".concat(horizScaleFactor, ", 1) "), "translate (".concat(-min, ", 0) "), "translate (0, ".concat(height, ") "), 'rotate(-90)'];
   }
@@ -59,78 +52,69 @@
   var xCenter = xMax / 2;
-
-  return React.createElement(
-    'svg',
-    { width: width, height: height, className: className },
-    React.createElement(
-      'g',
-      { transform: transforms.join(' '), style: style },
-      React.createElement('line', {
-        key: 'tick-low',
-        x1: xMin,
-        x2: xMax,
-        y1: stats.whiskerLow,
-        y2: stats.whiskerLow,
-        strokeWidth: whiskerStrokeWidth / horizScaleFactor,
-        style: tickStyle
-      }),
-      React.createElement('line', {
-        key: 'whisker-low',
-        x1: xCenter,
-        x2: xCenter,
-        y1: stats.whiskerLow,
-        y2: stats.quartile1,
-        strokeWidth: whiskerStrokeWidth / vertScaleFactor,
-        style: whiskerStyle
-      }),
-      React.createElement('rect', {
-        key: 'box',
-        x: xMin,
-        width: xMax - xMin,
-        y: stats.quartile1,
-        height: stats.quartile3 - stats.quartile1,
-        strokeWidth: '0',
-        style: boxStyle
-      }),
-      React.createElement('line', {
-        key: 'median',
-        x1: xMin,
-        x2: xMax,
-        y1: stats.quartile2,
-        y2: stats.quartile2,
-        strokeWidth: medianStrokeWidth / horizScaleFactor,
-        style: medianStyle
-      }),
-      React.createElement('line', {
-        key: 'whisker-high',
-        x1: xCenter,
-        x2: xCenter,
-        y1: stats.whiskerHigh,
-        y2: stats.quartile3,
-        strokeWidth: whiskerStrokeWidth / vertScaleFactor,
-        style: whiskerStyle
-      }),
-      React.createElement('line', {
-        key: 'tick-high',
-        x1: xMin,
-        x2: xMax,
-        y1: stats.whiskerHigh,
-        y2: stats.whiskerHigh,
-        strokeWidth: whiskerStrokeWidth / horizScaleFactor,
-        style: tickStyle
-      }),
-      stats.outliers.map(function (outlier, index) {
-        return React.createElement('ellipse', {
-          key: 'outlier-' + index,
-          cx: xCenter,
-          cy: outlier,
-          rx: outlierRadius / vertScaleFactor,
-          ry: outlierRadius / horizScaleFactor,
-          strokeWidth: '0',
-          style: outlierStyle
-        });
-      })
-    )
-  );
+  return React.createElement("svg", {
+    width: width,
+    height: height,
+    className: className
+  }, React.createElement("g", {
+    transform: transforms.join(' '),
+    style: style
+  }, React.createElement("line", {
+    key: "tick-low",
+    x1: xMin,
+    x2: xMax,
+    y1: stats.whiskerLow,
+    y2: stats.whiskerLow,
+    strokeWidth: whiskerStrokeWidth / horizScaleFactor,
+    style: tickStyle
+  }), React.createElement("line", {
+    key: "whisker-low",
+    x1: xCenter,
+    x2: xCenter,
+    y1: stats.whiskerLow,
+    y2: stats.quartile1,
+    strokeWidth: whiskerStrokeWidth / vertScaleFactor,
+    style: whiskerStyle
+  }), React.createElement("rect", {
+    key: "box",
+    x: xMin,
+    width: xMax - xMin,
+    y: stats.quartile1,
+    height: stats.quartile3 - stats.quartile1,
+    strokeWidth: "0",
+    style: boxStyle
+  }), React.createElement("line", {
+    key: "median",
+    x1: xMin,
+    x2: xMax,
+    y1: stats.quartile2,
+    y2: stats.quartile2,
+    strokeWidth: medianStrokeWidth / horizScaleFactor,
+    style: medianStyle
+  }), React.createElement("line", {
+    key: "whisker-high",
+    x1: xCenter,
+    x2: xCenter,
+    y1: stats.whiskerHigh,
+    y2: stats.quartile3,
+    strokeWidth: whiskerStrokeWidth / vertScaleFactor,
+    style: whiskerStyle
+  }), React.createElement("line", {
+    key: "tick-high",
+    x1: xMin,
+    x2: xMax,
+    y1: stats.whiskerHigh,
+    y2: stats.whiskerHigh,
+    strokeWidth: whiskerStrokeWidth / horizScaleFactor,
+    style: tickStyle
+  }), stats.outliers.map(function (outlier, index) {
+    return React.createElement("ellipse", {
+      key: "outlier-".concat(index),
+      cx: xCenter,
+      cy: outlier,
+      rx: outlierRadius / vertScaleFactor,
+      ry: outlierRadius / horizScaleFactor,
+      strokeWidth: "0",
+      style: outlierStyle
+    });
+  })));
 };
-
 Boxplot.propTypes = {
@@ -144,3 +128,2 @@ // Width of the svg element
   orientation: PropTypes.oneOf(['vertical', 'horizontal']),
-
   // Minimum and maximum values for the axis. Values outside this
@@ -150,3 +133,2 @@ // range are clipped.
   max: PropTypes.number.isRequired,
-
   // The stats to plot.
@@ -167,3 +149,2 @@ stats: PropTypes.shape({
   }),
-
   style: PropTypes.object,
@@ -178,20 +159,33 @@ tickStyle: PropTypes.object,
   outlierStyle: PropTypes.object,
-
   // Pass through, to support styled-components.
   className: PropTypes.string
 };
-
 Boxplot.defaultProps = {
   orientation: 'vertical',
-  style: { strokeOpacity: 1, fillOpacity: 0.75 },
+  style: {
+    strokeOpacity: 1,
+    fillOpacity: 0.75
+  },
   // tickStyle: { stroke: 'black', strokeDasharray: '2,2' },
-  tickStyle: { stroke: 'black' },
+  tickStyle: {
+    stroke: 'black'
+  },
   whiskerStrokeWidth: 1,
   // whiskerStyle: { stroke: 'black', strokeDasharray: '2,2' },
-  whiskerStyle: { stroke: 'black' },
-  boxStyle: { stroke: 'black', fill: 'black' },
+  whiskerStyle: {
+    stroke: 'black'
+  },
+  boxStyle: {
+    stroke: 'black',
+    fill: 'black'
+  },
   medianStrokeWidth: 2,
-  medianStyle: { stroke: 'white' },
+  medianStyle: {
+    stroke: 'white'
+  },
   outlierRadius: 2.5,
-  outlierStyle: { stroke: 'black', fill: 'black' }
+  outlierStyle: {
+    stroke: 'black',
+    fill: 'black'
+  }
 };
@@ -203,10 +197,7 @@
   var quartile2 = ss.median(data);
-
   var quartile1 = ss.quantile(data, 0.25);
   var quartile3 = ss.quantile(data, 0.75);
   var interQuartileRange = quartile3 - quartile1;
-
   var lowerOutlierCutoff = quartile1 - 1.5 * interQuartileRange;
   var upperOutlierCutoff = quartile3 + 1.5 * interQuartileRange;
-
   var outliers = [];
@@ -221,6 +212,4 @@ var nonOutliers = [];
   });
-
   var whiskerLow = ss.min(nonOutliers);
   var whiskerHigh = ss.max(nonOutliers);
-
   return {
@@ -227,0 +216,0 @@ whiskerLow: whiskerLow,

dist/index.js

@@ -8,7 +8,5 @@ 'use strict';
  */
-
 var React = require('react');
-var PropTypes = require('prop-types');
 
-// Inspiration:
+var PropTypes = require('prop-types'); // Inspiration:
 //
@@ -20,2 +18,4 @@ // - https://turgar.github.io/
 //
+
+
 var Boxplot = function Boxplot(_ref) {
@@ -38,23 +38,16 @@ var width = _ref.width,
       className = _ref.className;
+  var xMax, horizScaleFactor, vertScaleFactor, transforms;
 
-  var xMax = void 0,
-      horizScaleFactor = void 0,
-      vertScaleFactor = void 0,
-      transforms = void 0;
   if (orientation === 'vertical') {
     xMax = width;
-
     vertScaleFactor = height / (max - min);
-    horizScaleFactor = 1.0;
+    horizScaleFactor = 1.0; // Coordinate system: +y at the top, +x to the right.
 
-    // Coordinate system: +y at the top, +x to the right.
-    transforms = ['translate (' + -min + ', 0)', 'translate (0, ' + height + ')', 'scale(1, -' + vertScaleFactor + ')'];
+    transforms = ["translate (".concat(-min, ", 0)"), "translate (0, ".concat(height, ")"), "scale(1, -".concat(vertScaleFactor, ")")];
   } else {
     xMax = height;
-
     horizScaleFactor = width / (max - min);
-    vertScaleFactor = 1.0;
+    vertScaleFactor = 1.0; // Coordinate system: +y at the right, +x to the top.
 
-    // Coordinate system: +y at the right, +x to the top.
-    transforms = ['scale(' + horizScaleFactor + ', 1) ', 'translate (' + -min + ', 0) ', 'translate (0, ' + height + ') ', 'rotate(-90)'];
+    transforms = ["scale(".concat(horizScaleFactor, ", 1) "), "translate (".concat(-min, ", 0) "), "translate (0, ".concat(height, ") "), 'rotate(-90)'];
   }
@@ -64,78 +57,69 @@
   var xCenter = xMax / 2;
-
-  return React.createElement(
-    'svg',
-    { width: width, height: height, className: className },
-    React.createElement(
-      'g',
-      { transform: transforms.join(' '), style: style },
-      React.createElement('line', {
-        key: 'tick-low',
-        x1: xMin,
-        x2: xMax,
-        y1: stats.whiskerLow,
-        y2: stats.whiskerLow,
-        strokeWidth: whiskerStrokeWidth / horizScaleFactor,
-        style: tickStyle
-      }),
-      React.createElement('line', {
-        key: 'whisker-low',
-        x1: xCenter,
-        x2: xCenter,
-        y1: stats.whiskerLow,
-        y2: stats.quartile1,
-        strokeWidth: whiskerStrokeWidth / vertScaleFactor,
-        style: whiskerStyle
-      }),
-      React.createElement('rect', {
-        key: 'box',
-        x: xMin,
-        width: xMax - xMin,
-        y: stats.quartile1,
-        height: stats.quartile3 - stats.quartile1,
-        strokeWidth: '0',
-        style: boxStyle
-      }),
-      React.createElement('line', {
-        key: 'median',
-        x1: xMin,
-        x2: xMax,
-        y1: stats.quartile2,
-        y2: stats.quartile2,
-        strokeWidth: medianStrokeWidth / horizScaleFactor,
-        style: medianStyle
-      }),
-      React.createElement('line', {
-        key: 'whisker-high',
-        x1: xCenter,
-        x2: xCenter,
-        y1: stats.whiskerHigh,
-        y2: stats.quartile3,
-        strokeWidth: whiskerStrokeWidth / vertScaleFactor,
-        style: whiskerStyle
-      }),
-      React.createElement('line', {
-        key: 'tick-high',
-        x1: xMin,
-        x2: xMax,
-        y1: stats.whiskerHigh,
-        y2: stats.whiskerHigh,
-        strokeWidth: whiskerStrokeWidth / horizScaleFactor,
-        style: tickStyle
-      }),
-      stats.outliers.map(function (outlier, index) {
-        return React.createElement('ellipse', {
-          key: 'outlier-' + index,
-          cx: xCenter,
-          cy: outlier,
-          rx: outlierRadius / vertScaleFactor,
-          ry: outlierRadius / horizScaleFactor,
-          strokeWidth: '0',
-          style: outlierStyle
-        });
-      })
-    )
-  );
+  return React.createElement("svg", {
+    width: width,
+    height: height,
+    className: className
+  }, React.createElement("g", {
+    transform: transforms.join(' '),
+    style: style
+  }, React.createElement("line", {
+    key: "tick-low",
+    x1: xMin,
+    x2: xMax,
+    y1: stats.whiskerLow,
+    y2: stats.whiskerLow,
+    strokeWidth: whiskerStrokeWidth / horizScaleFactor,
+    style: tickStyle
+  }), React.createElement("line", {
+    key: "whisker-low",
+    x1: xCenter,
+    x2: xCenter,
+    y1: stats.whiskerLow,
+    y2: stats.quartile1,
+    strokeWidth: whiskerStrokeWidth / vertScaleFactor,
+    style: whiskerStyle
+  }), React.createElement("rect", {
+    key: "box",
+    x: xMin,
+    width: xMax - xMin,
+    y: stats.quartile1,
+    height: stats.quartile3 - stats.quartile1,
+    strokeWidth: "0",
+    style: boxStyle
+  }), React.createElement("line", {
+    key: "median",
+    x1: xMin,
+    x2: xMax,
+    y1: stats.quartile2,
+    y2: stats.quartile2,
+    strokeWidth: medianStrokeWidth / horizScaleFactor,
+    style: medianStyle
+  }), React.createElement("line", {
+    key: "whisker-high",
+    x1: xCenter,
+    x2: xCenter,
+    y1: stats.whiskerHigh,
+    y2: stats.quartile3,
+    strokeWidth: whiskerStrokeWidth / vertScaleFactor,
+    style: whiskerStyle
+  }), React.createElement("line", {
+    key: "tick-high",
+    x1: xMin,
+    x2: xMax,
+    y1: stats.whiskerHigh,
+    y2: stats.whiskerHigh,
+    strokeWidth: whiskerStrokeWidth / horizScaleFactor,
+    style: tickStyle
+  }), stats.outliers.map(function (outlier, index) {
+    return React.createElement("ellipse", {
+      key: "outlier-".concat(index),
+      cx: xCenter,
+      cy: outlier,
+      rx: outlierRadius / vertScaleFactor,
+      ry: outlierRadius / horizScaleFactor,
+      strokeWidth: "0",
+      style: outlierStyle
+    });
+  })));
 };
-
 Boxplot.propTypes = {
@@ -149,3 +133,2 @@ // Width of the svg element
   orientation: PropTypes.oneOf(['vertical', 'horizontal']),
-
   // Minimum and maximum values for the axis. Values outside this
@@ -155,3 +138,2 @@ // range are clipped.
   max: PropTypes.number.isRequired,
-
   // The stats to plot.
@@ -172,3 +154,2 @@ stats: PropTypes.shape({
   }),
-
   style: PropTypes.object,
@@ -183,20 +164,33 @@ tickStyle: PropTypes.object,
   outlierStyle: PropTypes.object,
-
   // Pass through, to support styled-components.
   className: PropTypes.string
 };
-
 Boxplot.defaultProps = {
   orientation: 'vertical',
-  style: { strokeOpacity: 1, fillOpacity: 0.75 },
+  style: {
+    strokeOpacity: 1,
+    fillOpacity: 0.75
+  },
   // tickStyle: { stroke: 'black', strokeDasharray: '2,2' },
-  tickStyle: { stroke: 'black' },
+  tickStyle: {
+    stroke: 'black'
+  },
   whiskerStrokeWidth: 1,
   // whiskerStyle: { stroke: 'black', strokeDasharray: '2,2' },
-  whiskerStyle: { stroke: 'black' },
-  boxStyle: { stroke: 'black', fill: 'black' },
+  whiskerStyle: {
+    stroke: 'black'
+  },
+  boxStyle: {
+    stroke: 'black',
+    fill: 'black'
+  },
   medianStrokeWidth: 2,
-  medianStyle: { stroke: 'white' },
+  medianStyle: {
+    stroke: 'white'
+  },
   outlierRadius: 2.5,
-  outlierStyle: { stroke: 'black', fill: 'black' }
+  outlierStyle: {
+    stroke: 'black',
+    fill: 'black'
+  }
 };
@@ -208,10 +202,7 @@
   var quartile2 = ss.median(data);
-
   var quartile1 = ss.quantile(data, 0.25);
   var quartile3 = ss.quantile(data, 0.75);
   var interQuartileRange = quartile3 - quartile1;
-
   var lowerOutlierCutoff = quartile1 - 1.5 * interQuartileRange;
   var upperOutlierCutoff = quartile3 + 1.5 * interQuartileRange;
-
   var outliers = [];
@@ -226,6 +217,4 @@ var nonOutliers = [];
   });
-
   var whiskerLow = ss.min(nonOutliers);
   var whiskerHigh = ss.max(nonOutliers);
-
   return {
@@ -232,0 +221,0 @@ whiskerLow: whiskerLow,

package.json

 {
   "name": "react-boxplot",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Simple SVG box plots in React",
@@ -21,3 +21,3 @@ "author": "Paul Melnikow <[e-mail]>",
     "prettier-check": "prettier-check \"**/*.@(js|md|yml|json)\"",
-    "test": "CI=1 jest --env=jsdom",
+    "test": "BABEL_ENV=test mocha --require @babel/register \"src/**/*.spec.js\"",
     "build": "rollup --config",
@@ -28,3 +28,3 @@ "start": "rollup --config --watch",
     "now-build:rearrange": "cd dist && mkdir dist example && mv *.js dist && cp -r ../example/build/* example/",
-    "now-build": "rm -rf ../example/node_modules && npm run predeploy && npm run now-build:rearrange",
+    "now-build": "npm run build && npm run predeploy && npm run now-build:rearrange",
     "deploy": "gh-pages -d example/build"
@@ -41,15 +41,15 @@ },
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "acorn": "^6.1.0",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "23.6.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "eslint": "^5.9.0",
-    "eslint-config-prettier": "^3.0.1",
+    "eslint": "^6.0.1",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-config-standard-jsx": "^6.0.2",
     "eslint-config-standard-react": "^7.0.2",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-mocha": "^5.1.0",
@@ -61,14 +61,14 @@ "eslint-plugin-node": "^8.0.0",
     "gh-pages": "^2.0.1",
-    "jest": "23.6.0",
+    "mocha": "^6.0.0",
     "prettier": "^1.14.2",
     "prettier-check": "^2.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0",
-    "rollup": "^0.68.0",
-    "rollup-plugin-babel": "^3.0.3",
+    "react": "~16.8.0",
+    "react-dom": "~16.8.0",
+    "react-test-renderer": "~16.8.0",
+    "rollup": "^1.1.2",
+    "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.0.0",
-    "rollup-plugin-url": "^2.0.1",
+    "rollup-plugin-url": "^2.2.2",
     "source-map-support": "^0.5.9"
@@ -78,3 +78,23 @@ },
     "dist"
-  ]
+  ],
+  "babel": {
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "modules": false
+        }
+      ],
+      "@babel/preset-react"
+    ],
+    "env": {
+      "test": {
+        "presets": [
+          "@babel/preset-env",
+          "@babel/preset-react"
+        ],
+        "plugins": []
+      }
+    }
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

415

increased by0.97%

Worsened metrics

Total package byte prevSize

20748

decreased by-0.37%

No dependency changes