@nivo/legends - npm Package Compare versions

Comparing version 0.33.0-4 to 0.33.0-5

es/compute.js

@@ -12,3 +12,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 import { isNumber, isPlainObject } from 'lodash-es';
-import { DIRECTION_COLUMN, DIRECTION_ROW } from './constants';
+import { ANCHOR_BOTTOM, ANCHOR_BOTTOM_LEFT, ANCHOR_BOTTOM_RIGHT, ANCHOR_CENTER, ANCHOR_LEFT, ANCHOR_RIGHT, ANCHOR_TOP, ANCHOR_TOP_RIGHT, DIRECTION_BOTTOM_TO_TOP, DIRECTION_COLUMN, DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_ROW, DIRECTION_TOP_TO_BOTTOM } from './constants';
 
@@ -56,2 +56,145 @@ var zeroPadding = {
     return { width: width, height: height, padding: padding };
+};
+
+export var computePositionFromAnchor = function computePositionFromAnchor(_ref2) {
+    var anchor = _ref2.anchor,
+        translateX = _ref2.translateX,
+        translateY = _ref2.translateY,
+        containerWidth = _ref2.containerWidth,
+        containerHeight = _ref2.containerHeight,
+        width = _ref2.width,
+        height = _ref2.height;
+
+    var x = translateX;
+    var y = translateY;
+
+    switch (anchor) {
+        case ANCHOR_TOP:
+            x += (containerWidth - width) / 2;
+            break;
+
+        case ANCHOR_TOP_RIGHT:
+            x += containerWidth - width;
+            break;
+
+        case ANCHOR_RIGHT:
+            x += containerWidth - width;
+            y += (containerHeight - height) / 2;
+            break;
+
+        case ANCHOR_BOTTOM_RIGHT:
+            x += containerWidth - width;
+            y += containerHeight - height;
+            break;
+
+        case ANCHOR_BOTTOM:
+            x += (containerWidth - width) / 2;
+            y += containerHeight - height;
+            break;
+
+        case ANCHOR_BOTTOM_LEFT:
+            y += containerHeight - height;
+            break;
+
+        case ANCHOR_LEFT:
+            y += (containerHeight - height) / 2;
+            break;
+
+        case ANCHOR_CENTER:
+            x += (containerWidth - width) / 2;
+            y += (containerHeight - height) / 2;
+            break;
+    }
+
+    return { x: x, y: y };
+};
+
+export var computeItemLayout = function computeItemLayout(_ref3) {
+    var direction = _ref3.direction,
+        justify = _ref3.justify,
+        symbolSize = _ref3.symbolSize,
+        symbolSpacing = _ref3.symbolSpacing,
+        width = _ref3.width,
+        height = _ref3.height;
+
+    var symbolX = void 0;
+    var symbolY = void 0;
+
+    var labelX = void 0;
+    var labelY = void 0;
+    var labelAnchor = void 0;
+    var labelAlignment = void 0;
+
+    switch (direction) {
+        case DIRECTION_LEFT_TO_RIGHT:
+            symbolX = 0;
+            symbolY = (height - symbolSize) / 2;
+
+            labelY = height / 2;
+            labelAlignment = 'middle';
+            if (justify === true) {
+                labelX = width;
+                labelAnchor = 'end';
+            } else {
+                labelX = symbolSize + symbolSpacing;
+                labelAnchor = 'start';
+            }
+            break;
+
+        case DIRECTION_RIGHT_TO_LEFT:
+            symbolX = width - symbolSize;
+            symbolY = (height - symbolSize) / 2;
+
+            labelY = height / 2;
+            labelAlignment = 'middle';
+            if (justify === true) {
+                labelX = 0;
+                labelAnchor = 'start';
+            } else {
+                labelX = width - symbolSize - symbolSpacing;
+                labelAnchor = 'end';
+            }
+            break;
+
+        case DIRECTION_TOP_TO_BOTTOM:
+            symbolX = (width - symbolSize) / 2;
+            symbolY = 0;
+
+            labelX = width / 2;
+
+            labelAnchor = 'middle';
+            if (justify === true) {
+                labelY = height;
+                labelAlignment = 'baseline';
+            } else {
+                labelY = symbolSize + symbolSpacing;
+                labelAlignment = 'hanging';
+            }
+            break;
+
+        case DIRECTION_BOTTOM_TO_TOP:
+            symbolX = (width - symbolSize) / 2;
+            symbolY = height - symbolSize;
+
+            labelX = width / 2;
+            labelAnchor = 'middle';
+            if (justify === true) {
+                labelY = 0;
+                labelAlignment = 'hanging';
+            } else {
+                labelY = height - symbolSize - symbolSpacing;
+                labelAlignment = 'baseline';
+            }
+            break;
+    }
+
+    return {
+        symbolX: symbolX,
+        symbolY: symbolY,
+
+        labelX: labelX,
+        labelY: labelY,
+        labelAnchor: labelAnchor,
+        labelAlignment: labelAlignment
+    };
 };

es/index.js

@@ -10,3 +10,4 @@ /*
 export * from './svg';
+export * from './canvas';
 export * from './constants';
 export * from './props';

es/svg/BoxLegendSvg.js

@@ -12,3 +12,3 @@ /*
 import LegendSvg from './LegendSvg';
-import { computeDimensions } from '../compute';
+import { computeDimensions, computePositionFromAnchor } from '../compute';
 import { DIRECTION_ROW, DIRECTION_COLUMN, DIRECTION_BOTTOM_TO_TOP, DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, ANCHOR_TOP, ANCHOR_TOP_RIGHT, ANCHOR_RIGHT, ANCHOR_BOTTOM_RIGHT, ANCHOR_BOTTOM, ANCHOR_BOTTOM_LEFT, ANCHOR_LEFT, ANCHOR_TOP_LEFT, ANCHOR_CENTER } from '../constants';
@@ -45,42 +45,14 @@
 
-    var x = translateX;
-    var y = translateY;
-    switch (anchor) {
-        case ANCHOR_TOP:
-            x += (containerWidth - width) / 2;
-            break;
+    var _computePositionFromA = computePositionFromAnchor({
+        anchor: anchor,
+        translateX: translateX,
+        translateY: translateY,
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        width: width,
+        height: height
+    }),
+        x = _computePositionFromA.x,
+        y = _computePositionFromA.y;
 
-        case ANCHOR_TOP_RIGHT:
-            x += containerWidth - width;
-            break;
-
-        case ANCHOR_RIGHT:
-            x += containerWidth - width;
-            y += (containerHeight - height) / 2;
-            break;
-
-        case ANCHOR_BOTTOM_RIGHT:
-            x += containerWidth - width;
-            y += containerHeight - height;
-            break;
-
-        case ANCHOR_BOTTOM:
-            x += (containerWidth - width) / 2;
-            y += containerHeight - height;
-            break;
-
-        case ANCHOR_BOTTOM_LEFT:
-            y += containerHeight - height;
-            break;
-
-        case ANCHOR_LEFT:
-            y += (containerHeight - height) / 2;
-            break;
-
-        case ANCHOR_CENTER:
-            x += (containerWidth - width) / 2;
-            y += (containerHeight - height) / 2;
-            break;
-    }
-
     return React.createElement(LegendSvg, {
@@ -87,0 +59,0 @@ data: data,

es/svg/LegendSvgItem.js

@@ -18,2 +18,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 import { DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP } from '../constants';
+import { computeItemLayout } from '../compute';
 import { SymbolCircle, SymbolDiamond, SymbolSquare, SymbolTriangle } from './symbols';
@@ -51,74 +52,17 @@
 
+        var _computeItemLayout = computeItemLayout({
+            direction: direction,
+            justify: justify,
+            symbolSize: symbolSize,
+            symbolSpacing: symbolSpacing,
+            width: width,
+            height: height
+        }),
+            symbolX = _computeItemLayout.symbolX,
+            symbolY = _computeItemLayout.symbolY,
+            labelX = _computeItemLayout.labelX,
+            labelY = _computeItemLayout.labelY,
+            labelAnchor = _computeItemLayout.labelAnchor,
+            labelAlignment = _computeItemLayout.labelAlignment;
 
-        var symbolX = void 0;
-        var symbolY = void 0;
-
-        var labelX = void 0;
-        var labelY = void 0;
-        var labelAnchor = void 0;
-        var labelAlignment = void 0;
-
-        switch (direction) {
-            case DIRECTION_LEFT_TO_RIGHT:
-                symbolX = 0;
-                symbolY = (height - symbolSize) / 2;
-
-                labelY = height / 2;
-                labelAlignment = 'middle';
-                if (justify === true) {
-                    labelX = width;
-                    labelAnchor = 'end';
-                } else {
-                    labelX = symbolSize + symbolSpacing;
-                    labelAnchor = 'start';
-                }
-                break;
-
-            case DIRECTION_RIGHT_TO_LEFT:
-                symbolX = width - symbolSize;
-                symbolY = (height - symbolSize) / 2;
-
-                labelY = height / 2;
-                labelAlignment = 'middle';
-                if (justify === true) {
-                    labelX = 0;
-                    labelAnchor = 'start';
-                } else {
-                    labelX = width - symbolSize - symbolSpacing;
-                    labelAnchor = 'end';
-                }
-                break;
-
-            case DIRECTION_TOP_TO_BOTTOM:
-                symbolX = (width - symbolSize) / 2;
-                symbolY = 0;
-
-                labelX = width / 2;
-
-                labelAnchor = 'middle';
-                if (justify === true) {
-                    labelY = height;
-                    labelAlignment = 'baseline';
-                } else {
-                    labelY = symbolSize + symbolSpacing;
-                    labelAlignment = 'hanging';
-                }
-                break;
-
-            case DIRECTION_BOTTOM_TO_TOP:
-                symbolX = (width - symbolSize) / 2;
-                symbolY = height - symbolSize;
-
-                labelX = width / 2;
-                labelAnchor = 'middle';
-                if (justify === true) {
-                    labelY = 0;
-                    labelAlignment = 'hanging';
-                } else {
-                    labelY = height - symbolSize - symbolSpacing;
-                    labelAlignment = 'baseline';
-                }
-                break;
-        }
-
         var Symbol = symbolByShape[symbolShape];
@@ -125,0 +69,0 @@

lib/compute.js

 'use strict';
 
 exports.__esModule = true;
-exports.computeDimensions = undefined;
+exports.computeItemLayout = exports.computePositionFromAnchor = exports.computeDimensions = undefined;
 
@@ -61,2 +61,145 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /*
     return { width: width, height: height, padding: padding };
+};
+
+var computePositionFromAnchor = exports.computePositionFromAnchor = function computePositionFromAnchor(_ref2) {
+    var anchor = _ref2.anchor,
+        translateX = _ref2.translateX,
+        translateY = _ref2.translateY,
+        containerWidth = _ref2.containerWidth,
+        containerHeight = _ref2.containerHeight,
+        width = _ref2.width,
+        height = _ref2.height;
+
+    var x = translateX;
+    var y = translateY;
+
+    switch (anchor) {
+        case _constants.ANCHOR_TOP:
+            x += (containerWidth - width) / 2;
+            break;
+
+        case _constants.ANCHOR_TOP_RIGHT:
+            x += containerWidth - width;
+            break;
+
+        case _constants.ANCHOR_RIGHT:
+            x += containerWidth - width;
+            y += (containerHeight - height) / 2;
+            break;
+
+        case _constants.ANCHOR_BOTTOM_RIGHT:
+            x += containerWidth - width;
+            y += containerHeight - height;
+            break;
+
+        case _constants.ANCHOR_BOTTOM:
+            x += (containerWidth - width) / 2;
+            y += containerHeight - height;
+            break;
+
+        case _constants.ANCHOR_BOTTOM_LEFT:
+            y += containerHeight - height;
+            break;
+
+        case _constants.ANCHOR_LEFT:
+            y += (containerHeight - height) / 2;
+            break;
+
+        case _constants.ANCHOR_CENTER:
+            x += (containerWidth - width) / 2;
+            y += (containerHeight - height) / 2;
+            break;
+    }
+
+    return { x: x, y: y };
+};
+
+var computeItemLayout = exports.computeItemLayout = function computeItemLayout(_ref3) {
+    var direction = _ref3.direction,
+        justify = _ref3.justify,
+        symbolSize = _ref3.symbolSize,
+        symbolSpacing = _ref3.symbolSpacing,
+        width = _ref3.width,
+        height = _ref3.height;
+
+    var symbolX = void 0;
+    var symbolY = void 0;
+
+    var labelX = void 0;
+    var labelY = void 0;
+    var labelAnchor = void 0;
+    var labelAlignment = void 0;
+
+    switch (direction) {
+        case _constants.DIRECTION_LEFT_TO_RIGHT:
+            symbolX = 0;
+            symbolY = (height - symbolSize) / 2;
+
+            labelY = height / 2;
+            labelAlignment = 'middle';
+            if (justify === true) {
+                labelX = width;
+                labelAnchor = 'end';
+            } else {
+                labelX = symbolSize + symbolSpacing;
+                labelAnchor = 'start';
+            }
+            break;
+
+        case _constants.DIRECTION_RIGHT_TO_LEFT:
+            symbolX = width - symbolSize;
+            symbolY = (height - symbolSize) / 2;
+
+            labelY = height / 2;
+            labelAlignment = 'middle';
+            if (justify === true) {
+                labelX = 0;
+                labelAnchor = 'start';
+            } else {
+                labelX = width - symbolSize - symbolSpacing;
+                labelAnchor = 'end';
+            }
+            break;
+
+        case _constants.DIRECTION_TOP_TO_BOTTOM:
+            symbolX = (width - symbolSize) / 2;
+            symbolY = 0;
+
+            labelX = width / 2;
+
+            labelAnchor = 'middle';
+            if (justify === true) {
+                labelY = height;
+                labelAlignment = 'baseline';
+            } else {
+                labelY = symbolSize + symbolSpacing;
+                labelAlignment = 'hanging';
+            }
+            break;
+
+        case _constants.DIRECTION_BOTTOM_TO_TOP:
+            symbolX = (width - symbolSize) / 2;
+            symbolY = height - symbolSize;
+
+            labelX = width / 2;
+            labelAnchor = 'middle';
+            if (justify === true) {
+                labelY = 0;
+                labelAlignment = 'hanging';
+            } else {
+                labelY = height - symbolSize - symbolSpacing;
+                labelAlignment = 'baseline';
+            }
+            break;
+    }
+
+    return {
+        symbolX: symbolX,
+        symbolY: symbolY,
+
+        labelX: labelX,
+        labelY: labelY,
+        labelAnchor: labelAnchor,
+        labelAlignment: labelAlignment
+    };
 };

lib/index.js

@@ -17,2 +17,14 @@ 'use strict';
 
+var _canvas = require('./canvas');
+
+Object.keys(_canvas).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _canvas[key];
+    }
+  });
+});
+
 var _constants = require('./constants');
@@ -19,0 +31,0 @@

lib/svg/BoxLegendSvg.js

@@ -52,42 +52,14 @@ 'use strict';
 
-    var x = translateX;
-    var y = translateY;
-    switch (anchor) {
-        case _constants.ANCHOR_TOP:
-            x += (containerWidth - width) / 2;
-            break;
+    var _computePositionFromA = (0, _compute.computePositionFromAnchor)({
+        anchor: anchor,
+        translateX: translateX,
+        translateY: translateY,
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        width: width,
+        height: height
+    }),
+        x = _computePositionFromA.x,
+        y = _computePositionFromA.y;
 
-        case _constants.ANCHOR_TOP_RIGHT:
-            x += containerWidth - width;
-            break;
-
-        case _constants.ANCHOR_RIGHT:
-            x += containerWidth - width;
-            y += (containerHeight - height) / 2;
-            break;
-
-        case _constants.ANCHOR_BOTTOM_RIGHT:
-            x += containerWidth - width;
-            y += containerHeight - height;
-            break;
-
-        case _constants.ANCHOR_BOTTOM:
-            x += (containerWidth - width) / 2;
-            y += containerHeight - height;
-            break;
-
-        case _constants.ANCHOR_BOTTOM_LEFT:
-            y += containerHeight - height;
-            break;
-
-        case _constants.ANCHOR_LEFT:
-            y += (containerHeight - height) / 2;
-            break;
-
-        case _constants.ANCHOR_CENTER:
-            x += (containerWidth - width) / 2;
-            y += (containerHeight - height) / 2;
-            break;
-    }
-
     return _react2.default.createElement(_LegendSvg2.default, {
@@ -94,0 +66,0 @@ data: data,

lib/svg/LegendSvgItem.js

@@ -15,2 +15,4 @@ 'use strict';
 
+var _compute = require('../compute');
+
 var _symbols = require('./symbols');
@@ -64,74 +66,17 @@
 
+        var _computeItemLayout = (0, _compute.computeItemLayout)({
+            direction: direction,
+            justify: justify,
+            symbolSize: symbolSize,
+            symbolSpacing: symbolSpacing,
+            width: width,
+            height: height
+        }),
+            symbolX = _computeItemLayout.symbolX,
+            symbolY = _computeItemLayout.symbolY,
+            labelX = _computeItemLayout.labelX,
+            labelY = _computeItemLayout.labelY,
+            labelAnchor = _computeItemLayout.labelAnchor,
+            labelAlignment = _computeItemLayout.labelAlignment;
 
-        var symbolX = void 0;
-        var symbolY = void 0;
-
-        var labelX = void 0;
-        var labelY = void 0;
-        var labelAnchor = void 0;
-        var labelAlignment = void 0;
-
-        switch (direction) {
-            case _constants.DIRECTION_LEFT_TO_RIGHT:
-                symbolX = 0;
-                symbolY = (height - symbolSize) / 2;
-
-                labelY = height / 2;
-                labelAlignment = 'middle';
-                if (justify === true) {
-                    labelX = width;
-                    labelAnchor = 'end';
-                } else {
-                    labelX = symbolSize + symbolSpacing;
-                    labelAnchor = 'start';
-                }
-                break;
-
-            case _constants.DIRECTION_RIGHT_TO_LEFT:
-                symbolX = width - symbolSize;
-                symbolY = (height - symbolSize) / 2;
-
-                labelY = height / 2;
-                labelAlignment = 'middle';
-                if (justify === true) {
-                    labelX = 0;
-                    labelAnchor = 'start';
-                } else {
-                    labelX = width - symbolSize - symbolSpacing;
-                    labelAnchor = 'end';
-                }
-                break;
-
-            case _constants.DIRECTION_TOP_TO_BOTTOM:
-                symbolX = (width - symbolSize) / 2;
-                symbolY = 0;
-
-                labelX = width / 2;
-
-                labelAnchor = 'middle';
-                if (justify === true) {
-                    labelY = height;
-                    labelAlignment = 'baseline';
-                } else {
-                    labelY = symbolSize + symbolSpacing;
-                    labelAlignment = 'hanging';
-                }
-                break;
-
-            case _constants.DIRECTION_BOTTOM_TO_TOP:
-                symbolX = (width - symbolSize) / 2;
-                symbolY = height - symbolSize;
-
-                labelX = width / 2;
-                labelAnchor = 'middle';
-                if (justify === true) {
-                    labelY = 0;
-                    labelAlignment = 'hanging';
-                } else {
-                    labelY = height - symbolSize - symbolSpacing;
-                    labelAlignment = 'baseline';
-                }
-                break;
-        }
-
         var Symbol = symbolByShape[symbolShape];
@@ -138,0 +83,0 @@

package.json

 {
   "name": "@nivo/legends",
   "description": "legend components for nivo dataviz library",
-  "version": "0.33.0-4",
+  "version": "0.33.0-5",
   "license": "MIT",
@@ -13,3 +13,3 @@ "main": "./lib/index.js",
   "devDependencies": {
-    "@nivo/babel-preset": "0.32.0",
+    "@nivo/babel-preset": "0.33.0-5",
     "babel-cli": "^6.26.0",
@@ -16,0 +16,0 @@ "babel-jest": "^20.0.3",

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

179622

increased by8%

Number of package files

32

increased by10.34%

Lines of code

1644

increased by25.3%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

4

increased byInfinity%

No dependency changes