@nivo/legends - npm Package Compare versions

Comparing version 0.44.0 to 0.45.0

cjs/nivo-legends.js

@@ -7,2 +7,3 @@ 'use strict';
 
+var PropTypes = _interopDefault(require('prop-types'));
 var isNumber = _interopDefault(require('lodash/isNumber'));
@@ -12,3 +13,3 @@ var isPlainObject = _interopDefault(require('lodash/isPlainObject'));
 var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var lodash = require('lodash');
 
@@ -39,10 +40,2 @@ var DIRECTION_ROW = 'row';
 
-
-
-
-
-
-
-
-
 var _extends = Object.assign || function (target) {
@@ -62,4 +55,2 @@ for (var i = 1; i < arguments.length; i++) {
 
-
-
 var inherits = function (subClass, superClass) {
@@ -81,20 +72,83 @@ if (typeof superClass !== "function" && superClass !== null) {
 
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
 
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
 
+/**
+ * This can be used to add effect on legends on interaction.
+ */
+var legendEffectPropType = PropTypes.shape({
+    on: PropTypes.oneOfType([PropTypes.oneOf(['hover'])]).isRequired,
+    style: PropTypes.shape({
+        itemTextColor: PropTypes.string,
+        itemBackground: PropTypes.string,
+        itemOpacity: PropTypes.number,
+        symbolSize: PropTypes.number,
+        symbolBorderWidth: PropTypes.number,
+        symbolBorderColor: PropTypes.string
+    }).isRequired
+});
 
+var symbolPropTypes = {
+    symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    symbolSize: PropTypes.number,
+    symbolSpacing: PropTypes.number,
+    symbolBorderWidth: PropTypes.number,
+    symbolBorderColor: PropTypes.string
+};
 
+var interactivityPropTypes = {
+    onClick: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func
+};
 
+var datumPropType = PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    color: PropTypes.string.isRequired,
+    fill: PropTypes.string
+});
 
+/**
+ * The prop type is exported as a simple object instead of `PropTypes.shape`
+ * to be able to add extra properties.
+ *
+ * @example
+ * ```javascript
+ * import { LegendPropShape } from '@nivo/legends'
+ *
+ * const customLegendPropType = PropTypes.shape({
+ *     ...LegendPropShape,
+ *     extra: PropTypes.any.isRequired,
+ * })
+ * ```
+ */
+var LegendPropShape = _extends({
+    data: PropTypes.arrayOf(datumPropType),
 
+    // position & layout
+    anchor: PropTypes.oneOf([ANCHOR_TOP, ANCHOR_TOP_RIGHT, ANCHOR_RIGHT, ANCHOR_BOTTOM_RIGHT, ANCHOR_BOTTOM, ANCHOR_BOTTOM_LEFT, ANCHOR_LEFT, ANCHOR_TOP_LEFT, ANCHOR_CENTER]).isRequired,
+    translateX: PropTypes.number,
+    translateY: PropTypes.number,
+    direction: PropTypes.oneOf([DIRECTION_ROW, DIRECTION_COLUMN]).isRequired,
 
+    // item
+    itemsSpacing: PropTypes.number,
+    itemWidth: PropTypes.number.isRequired,
+    itemHeight: PropTypes.number.isRequired,
+    itemDirection: PropTypes.oneOf([DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP]),
+    itemTextColor: PropTypes.string,
+    itemBackground: PropTypes.string,
+    itemOpacity: PropTypes.number
 
+}, symbolPropTypes, interactivityPropTypes, {
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+    effects: PropTypes.arrayOf(legendEffectPropType)
+});
 
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
 var zeroPadding = {
@@ -286,77 +340,169 @@ top: 0,
 
-var SymbolCircle = function SymbolCircle(_ref) {
-    var x = _ref.x,
-        y = _ref.y,
-        size = _ref.size,
-        fill = _ref.fill;
-    return React__default.createElement('circle', { r: size / 2, cx: x + size / 2, cy: y + size / 2, fill: fill });
-};
-
-SymbolCircle.propTypes = {
+var symbolPropTypes$1 = {
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
     size: PropTypes.number.isRequired,
-    fill: PropTypes.string.isRequired
+    fill: PropTypes.string.isRequired,
+    borderWidth: PropTypes.number.isRequired,
+    borderColor: PropTypes.string.isRequired
 };
 
-var SymbolDiamond = function SymbolDiamond(_ref) {
-    var x = _ref.x,
-        y = _ref.y,
-        size = _ref.size,
-        fill = _ref.fill;
+var symbolDefaultProps = {
+    borderWidth: 0,
+    borderColor: 'transparent'
+};
 
-    return React__default.createElement(
-        'g',
-        { transform: 'translate(' + x + ',' + y + ')' },
-        React__default.createElement('path', {
+var SymbolCircle = function (_PureComponent) {
+    inherits(SymbolCircle, _PureComponent);
+
+    function SymbolCircle() {
+        classCallCheck(this, SymbolCircle);
+        return possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
+    }
+
+    SymbolCircle.prototype.render = function render() {
+        var _props = this.props,
+            x = _props.x,
+            y = _props.y,
+            size = _props.size,
+            fill = _props.fill,
+            borderWidth = _props.borderWidth,
+            borderColor = _props.borderColor;
+
+
+        return React__default.createElement('circle', {
+            r: size / 2,
+            cx: x + size / 2,
+            cy: y + size / 2,
             fill: fill,
-            d: '\n                    M' + size / 2 + ' 0\n                    L' + size * 0.8 + ' ' + size / 2 + '\n                    L' + size / 2 + ' ' + size + '\n                    L' + size * 0.2 + ' ' + size / 2 + '\n                    L' + size / 2 + ' 0\n                '
-        })
-    );
-};
+            strokeWidth: borderWidth,
+            stroke: borderColor,
+            style: {
+                pointerEvents: 'none'
+            }
+        });
+    };
 
-SymbolDiamond.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    size: PropTypes.number.isRequired,
-    fill: PropTypes.string.isRequired
-};
+    return SymbolCircle;
+}(React.PureComponent);
 
-var SymbolSquare = function SymbolSquare(_ref) {
-    var x = _ref.x,
-        y = _ref.y,
-        size = _ref.size,
-        fill = _ref.fill;
-    return React__default.createElement('rect', { x: x, y: y, fill: fill, width: size, height: size });
-};
+SymbolCircle.propTypes = _extends({}, symbolPropTypes$1);
+SymbolCircle.defaultProps = _extends({}, symbolDefaultProps);
 
-SymbolSquare.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    size: PropTypes.number.isRequired,
-    fill: PropTypes.string.isRequired
-};
+var SymbolDiamond = function (_PureComponent) {
+    inherits(SymbolDiamond, _PureComponent);
 
-var SymbolTriangle = function SymbolTriangle(_ref) {
-    var x = _ref.x,
-        y = _ref.y,
-        size = _ref.size,
-        fill = _ref.fill;
-    return React__default.createElement(
-        'g',
-        { transform: 'translate(' + x + ',' + y + ')' },
-        React__default.createElement('path', {
+    function SymbolDiamond() {
+        classCallCheck(this, SymbolDiamond);
+        return possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
+    }
+
+    SymbolDiamond.prototype.render = function render() {
+        var _props = this.props,
+            x = _props.x,
+            y = _props.y,
+            size = _props.size,
+            fill = _props.fill,
+            borderWidth = _props.borderWidth,
+            borderColor = _props.borderColor;
+
+
+        return React__default.createElement(
+            'g',
+            { transform: 'translate(' + x + ',' + y + ')' },
+            React__default.createElement('path', {
+                d: '\n                    M' + size / 2 + ' 0\n                    L' + size * 0.8 + ' ' + size / 2 + '\n                    L' + size / 2 + ' ' + size + '\n                    L' + size * 0.2 + ' ' + size / 2 + '\n                    L' + size / 2 + ' 0\n                ',
+                fill: fill,
+                strokeWidth: borderWidth,
+                stroke: borderColor,
+                style: {
+                    pointerEvents: 'none'
+                }
+            })
+        );
+    };
+
+    return SymbolDiamond;
+}(React.PureComponent);
+
+SymbolDiamond.propTypes = _extends({}, symbolPropTypes$1);
+SymbolDiamond.defaultProps = _extends({}, symbolDefaultProps);
+
+var SymbolSquare = function (_PureComponent) {
+    inherits(SymbolSquare, _PureComponent);
+
+    function SymbolSquare() {
+        classCallCheck(this, SymbolSquare);
+        return possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
+    }
+
+    SymbolSquare.prototype.render = function render() {
+        var _props = this.props,
+            x = _props.x,
+            y = _props.y,
+            size = _props.size,
+            fill = _props.fill,
+            borderWidth = _props.borderWidth,
+            borderColor = _props.borderColor;
+
+
+        return React__default.createElement('rect', {
+            x: x,
+            y: y,
             fill: fill,
-            d: '\n                M' + size / 2 + ' 0\n                L' + size + ' ' + size + '\n                L0 ' + size + '\n                L' + size / 2 + ' 0\n            '
-        })
-    );
-};
+            strokeWidth: borderWidth,
+            stroke: borderColor,
+            width: size,
+            height: size,
+            style: {
+                pointerEvents: 'none'
+            }
+        });
+    };
 
-SymbolTriangle.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    size: PropTypes.number.isRequired,
-    fill: PropTypes.string.isRequired
-};
+    return SymbolSquare;
+}(React.PureComponent);
 
+SymbolSquare.propTypes = _extends({}, symbolPropTypes$1);
+SymbolSquare.defaultProps = _extends({}, symbolDefaultProps);
+
+var SymbolTriangle = function (_PureComponent) {
+    inherits(SymbolTriangle, _PureComponent);
+
+    function SymbolTriangle() {
+        classCallCheck(this, SymbolTriangle);
+        return possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
+    }
+
+    SymbolTriangle.prototype.render = function render() {
+        var _props = this.props,
+            x = _props.x,
+            y = _props.y,
+            size = _props.size,
+            fill = _props.fill,
+            borderWidth = _props.borderWidth,
+            borderColor = _props.borderColor;
+
+
+        return React__default.createElement(
+            'g',
+            { transform: 'translate(' + x + ',' + y + ')' },
+            React__default.createElement('path', {
+                d: '\n                M' + size / 2 + ' 0\n                L' + size + ' ' + size + '\n                L0 ' + size + '\n                L' + size / 2 + ' 0\n            ',
+                fill: fill,
+                strokeWidth: borderWidth,
+                stroke: borderColor,
+                style: {
+                    pointerEvents: 'none'
+                }
+            })
+        );
+    };
+
+    return SymbolTriangle;
+}(React.PureComponent);
+
+SymbolTriangle.propTypes = _extends({}, symbolPropTypes$1);
+SymbolTriangle.defaultProps = _extends({}, symbolDefaultProps);
+
 var symbolByShape = {
@@ -373,4 +519,61 @@ circle: SymbolCircle,
     function LegendSvgItem() {
+        var _temp, _this, _ret;
+
         classCallCheck(this, LegendSvgItem);
-        return possibleConstructorReturn(this, _Component.apply(this, arguments));
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
+            style: {}
+        }, _this.handleClick = function (event) {
+            var _this$props = _this.props,
+                onClick = _this$props.onClick,
+                data = _this$props.data;
+
+
+            if (onClick === undefined) return;
+            onClick(data, event);
+        }, _this.handleMouseEnter = function (event) {
+            var _this$props2 = _this.props,
+                onMouseEnter = _this$props2.onMouseEnter,
+                data = _this$props2.data,
+                effects = _this$props2.effects;
+
+
+            if (effects.length > 0) {
+                var applyEffects = effects.filter(function (_ref) {
+                    var on = _ref.on;
+                    return on === 'hover';
+                });
+                var style = applyEffects.reduce(function (acc, effect) {
+                    return _extends({}, acc, effect.style);
+                }, {});
+                _this.setState({ style: style });
+            }
+
+            if (onMouseEnter === undefined) return;
+            onMouseEnter(data, event);
+        }, _this.handleMouseLeave = function () {
+            var _this$props3 = _this.props,
+                onMouseLeave = _this$props3.onMouseLeave,
+                data = _this$props3.data,
+                effects = _this$props3.effects;
+
+
+            if (effects.length > 0) {
+                var applyEffects = effects.filter(function (_ref2) {
+                    var on = _ref2.on;
+                    return on !== 'hover';
+                });
+                var style = applyEffects.reduce(function (acc, effect) {
+                    return _extends({}, acc, effect.style);
+                }, {});
+                _this.setState({ style: style });
+            }
+
+            if (onMouseLeave === undefined) return;
+            onMouseLeave(data, event);
+        }, _temp), possibleConstructorReturn(_this, _ret);
     }
@@ -384,10 +587,17 @@
             height = _props.height,
+            data = _props.data,
+            direction = _props.direction,
+            justify = _props.justify,
+            textColor = _props.textColor,
+            background = _props.background,
+            opacity = _props.opacity,
+            symbolShape = _props.symbolShape,
             symbolSize = _props.symbolSize,
             symbolSpacing = _props.symbolSpacing,
-            symbolShape = _props.symbolShape,
-            label = _props.label,
-            fill = _props.fill,
-            textColor = _props.textColor,
-            direction = _props.direction,
-            justify = _props.justify;
+            symbolBorderWidth = _props.symbolBorderWidth,
+            symbolBorderColor = _props.symbolBorderColor,
+            onClick = _props.onClick,
+            onMouseEnter = _props.onMouseEnter,
+            onMouseLeave = _props.onMouseLeave;
+        var style = this.state.style;
 
@@ -397,3 +607,3 @@ var _computeItemLayout = computeItemLayout({
             justify: justify,
-            symbolSize: symbolSize,
+            symbolSize: style.symbolSize || symbolSize,
             symbolSpacing: symbolSpacing,
@@ -410,8 +620,40 @@ width: width,
 
-        var Symbol = symbolByShape[symbolShape];
+        var isInteractive = [onClick, onMouseEnter, onMouseLeave].some(function (handler) {
+            return handler !== undefined;
+        });
 
+        var Symbol = void 0;
+        if (lodash.isFunction(symbolShape)) {
+            Symbol = symbolShape;
+        } else {
+            Symbol = symbolByShape[symbolShape];
+        }
+
         return React__default.createElement(
             'g',
-            { transform: 'translate(' + x + ',' + y + ')' },
-            React__default.createElement(Symbol, { x: symbolX, y: symbolY, size: symbolSize, fill: fill }),
+            {
+                transform: 'translate(' + x + ',' + y + ')',
+                style: {
+                    opacity: style.itemOpacity !== undefined ? style.itemOpacity : opacity
+                }
+            },
+            React__default.createElement('rect', {
+                width: width,
+                height: height,
+                fill: style.itemBackground || background,
+                style: {
+                    cursor: isInteractive ? 'pointer' : 'auto'
+                },
+                onClick: this.handleClick,
+                onMouseEnter: this.handleMouseEnter,
+                onMouseLeave: this.handleMouseLeave
+            }),
+            React__default.createElement(Symbol, {
+                x: symbolX,
+                y: symbolY,
+                size: style.symbolSize || symbolSize,
+                fill: data.fill || data.color,
+                borderWidth: style.symbolBorderWidth !== undefined ? style.symbolBorderWidth : symbolBorderWidth,
+                borderColor: style.symbolBorderColor || symbolBorderColor
+            }),
             React__default.createElement(
@@ -421,7 +663,12 @@ 'text',
                     textAnchor: labelAnchor,
-                    style: { fill: textColor, alignmentBaseline: labelAlignment },
+                    style: {
+                        fill: style.itemTextColor || textColor,
+                        alignmentBaseline: labelAlignment,
+                        pointerEvents: 'none',
+                        userSelect: 'none'
+                    },
                     x: labelX,
                     y: labelY
                 },
-                label
+                data.label
             )
@@ -434,3 +681,5 @@ );
 
-LegendSvgItem.propTypes = {
+LegendSvgItem.propTypes = _extends({
+    data: datumPropType.isRequired,
+
     x: PropTypes.number.isRequired,
@@ -441,19 +690,26 @@ y: PropTypes.number.isRequired,
 
-    symbolSize: PropTypes.number.isRequired,
-    symbolSpacing: PropTypes.number.isRequired,
-    symbolShape: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(symbolByShape)), PropTypes.func]).isRequired,
+    textColor: PropTypes.string,
+    background: PropTypes.string,
+    opacity: PropTypes.number,
 
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    fill: PropTypes.string.isRequired,
-    textColor: PropTypes.string.isRequired,
-
     direction: PropTypes.oneOf([DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP]).isRequired,
     justify: PropTypes.bool.isRequired
-};
+
+}, symbolPropTypes, interactivityPropTypes);
 LegendSvgItem.defaultProps = {
     direction: DIRECTION_LEFT_TO_RIGHT,
     justify: false,
+
+    textColor: 'black',
+    background: 'transparent',
+    opacity: 1,
+
+    // symbol
+    symbolShape: 'square',
     symbolSize: 16,
     symbolSpacing: 8,
-    symbolShape: 'square'
+    symbolBorderWidth: 0,
+    symbolBorderColor: 'transparent',
+
+    effects: []
 };
@@ -468,2 +724,3 @@
         justify = _ref.justify,
+        effects = _ref.effects,
         itemWidth = _ref.itemWidth,
@@ -473,6 +730,13 @@ itemHeight = _ref.itemHeight,
         itemsSpacing = _ref.itemsSpacing,
+        itemTextColor = _ref.itemTextColor,
+        itemBackground = _ref.itemBackground,
+        itemOpacity = _ref.itemOpacity,
+        symbolShape = _ref.symbolShape,
         symbolSize = _ref.symbolSize,
         symbolSpacing = _ref.symbolSpacing,
-        symbolShape = _ref.symbolShape,
-        textColor = _ref.textColor;
+        symbolBorderWidth = _ref.symbolBorderWidth,
+        symbolBorderColor = _ref.symbolBorderColor,
+        onClick = _ref.onClick,
+        onMouseEnter = _ref.onMouseEnter,
+        onMouseLeave = _ref.onMouseLeave;
 
@@ -488,4 +752,2 @@ // eslint-disable-next-line no-unused-vars
     }),
-        width = _computeDimensions.width,
-        height = _computeDimensions.height,
         padding = _computeDimensions.padding;
@@ -504,7 +766,6 @@
         { transform: 'translate(' + x + ',' + y + ')' },
-        data.map(function (_ref2, i) {
-            var label = _ref2.label,
-                fill = _ref2.fill;
+        data.map(function (data, i) {
             return React__default.createElement(LegendSvgItem, {
                 key: i,
+                data: data,
                 x: i * xStep + padding.left,
@@ -514,10 +775,19 @@ y: i * yStep + padding.top,
                 height: itemHeight,
+                direction: itemDirection,
+                justify: justify,
+                effects: effects
+                // item
+                , textColor: itemTextColor,
+                background: itemBackground,
+                opacity: itemOpacity
+                // symbol
+                , symbolShape: symbolShape,
                 symbolSize: symbolSize,
                 symbolSpacing: symbolSpacing,
-                symbolShape: symbolShape,
-                direction: itemDirection,
-                justify: justify,
-                label: label,
-                fill: fill,
-                textColor: textColor
+                symbolBorderWidth: symbolBorderWidth,
+                symbolBorderColor: symbolBorderColor
+                // interactivity
+                , onClick: onClick,
+                onMouseEnter: onMouseEnter,
+                onMouseLeave: onMouseLeave
             });
@@ -528,7 +798,4 @@ })
 
-LegendSvg.propTypes = {
-    data: PropTypes.arrayOf(PropTypes.shape({
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        fill: PropTypes.string.isRequired
-    })).isRequired,
+LegendSvg.propTypes = _extends({
+    data: PropTypes.arrayOf(datumPropType).isRequired,
 
@@ -548,14 +815,11 @@ // position/layout
     // items
+    itemsSpacing: PropTypes.number.isRequired,
     itemWidth: PropTypes.number.isRequired,
     itemHeight: PropTypes.number.isRequired,
     itemDirection: PropTypes.oneOf([DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP]).isRequired,
-    itemsSpacing: PropTypes.number.isRequired,
-    symbolSize: PropTypes.number,
-    symbolSpacing: PropTypes.number,
-    symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    textColor: PropTypes.string.isRequired,
+    itemTextColor: PropTypes.string.isRequired,
+    itemBackground: PropTypes.string.isRequired,
+    itemOpacity: PropTypes.number.isRequired
 
-    // interactivity
-    onClick: PropTypes.func.isRequired
-};
+}, symbolPropTypes, interactivityPropTypes);
 
@@ -568,8 +832,7 @@ LegendSvg.defaultProps = {
     // items
+    itemsSpacing: 0,
     itemDirection: DIRECTION_LEFT_TO_RIGHT,
-    itemsSpacing: 0,
-    textColor: 'black',
-
-    // interactivity
-    onClick: function onClick() {}
+    itemTextColor: 'black',
+    itemBackground: 'transparent',
+    itemOpacity: 1
 };
@@ -587,16 +850,24 @@
         justify = _ref.justify,
+        itemsSpacing = _ref.itemsSpacing,
         itemWidth = _ref.itemWidth,
         itemHeight = _ref.itemHeight,
         itemDirection = _ref.itemDirection,
-        itemsSpacing = _ref.itemsSpacing,
+        itemTextColor = _ref.itemTextColor,
+        itemBackground = _ref.itemBackground,
+        itemOpacity = _ref.itemOpacity,
+        symbolShape = _ref.symbolShape,
         symbolSize = _ref.symbolSize,
         symbolSpacing = _ref.symbolSpacing,
-        symbolShape = _ref.symbolShape,
-        textColor = _ref.textColor;
+        symbolBorderWidth = _ref.symbolBorderWidth,
+        symbolBorderColor = _ref.symbolBorderColor,
+        onClick = _ref.onClick,
+        onMouseEnter = _ref.onMouseEnter,
+        onMouseLeave = _ref.onMouseLeave,
+        effects = _ref.effects;
 
     var _computeDimensions = computeDimensions({
         itemCount: data.length,
+        itemsSpacing: itemsSpacing,
         itemWidth: itemWidth,
         itemHeight: itemHeight,
-        itemsSpacing: itemsSpacing,
         direction: direction,
@@ -627,18 +898,26 @@ padding: padding
         justify: justify,
+        effects: effects
+        // item
+        , itemsSpacing: itemsSpacing,
         itemWidth: itemWidth,
         itemHeight: itemHeight,
         itemDirection: itemDirection,
-        itemsSpacing: itemsSpacing,
+        itemTextColor: itemTextColor,
+        itemBackground: itemBackground,
+        itemOpacity: itemOpacity
+        // symbol
+        , symbolShape: symbolShape,
         symbolSize: symbolSize,
         symbolSpacing: symbolSpacing,
-        symbolShape: symbolShape,
-        textColor: textColor
+        symbolBorderWidth: symbolBorderWidth,
+        symbolBorderColor: symbolBorderColor
+        // interactivity
+        , onClick: onClick,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
     });
 };
 
-BoxLegendSvg.propTypes = {
-    data: PropTypes.arrayOf(PropTypes.shape({
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        fill: PropTypes.string.isRequired
-    })).isRequired,
+BoxLegendSvg.propTypes = _extends({
+    data: PropTypes.arrayOf(datumPropType).isRequired,
     containerWidth: PropTypes.number.isRequired,
@@ -662,8 +941,8 @@ containerHeight: PropTypes.number.isRequired,
     itemsSpacing: PropTypes.number.isRequired,
-    symbolSize: PropTypes.number,
-    symbolSpacing: PropTypes.number,
-    symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    textColor: PropTypes.string
-};
+    itemTextColor: PropTypes.string,
+    itemBackground: PropTypes.string,
+    itemOpacity: PropTypes.number
 
+}, symbolPropTypes, interactivityPropTypes);
+
 BoxLegendSvg.defaultProps = {
@@ -703,2 +982,4 @@ translateX: 0,
         justify = _ref$justify === undefined ? LegendSvgItem.defaultProps.justify : _ref$justify,
+        _ref$itemsSpacing = _ref.itemsSpacing,
+        itemsSpacing = _ref$itemsSpacing === undefined ? LegendSvg.defaultProps.itemsSpacing : _ref$itemsSpacing,
         itemWidth = _ref.itemWidth,
@@ -708,10 +989,8 @@ itemHeight = _ref.itemHeight,
         itemDirection = _ref$itemDirection === undefined ? LegendSvgItem.defaultProps.direction : _ref$itemDirection,
-        _ref$itemsSpacing = _ref.itemsSpacing,
-        itemsSpacing = _ref$itemsSpacing === undefined ? LegendSvg.defaultProps.itemsSpacing : _ref$itemsSpacing,
+        _ref$itemTextColor = _ref.itemTextColor,
+        itemTextColor = _ref$itemTextColor === undefined ? LegendSvg.defaultProps.textColor : _ref$itemTextColor,
         _ref$symbolSize = _ref.symbolSize,
         symbolSize = _ref$symbolSize === undefined ? LegendSvgItem.defaultProps.symbolSize : _ref$symbolSize,
         _ref$symbolSpacing = _ref.symbolSpacing,
-        symbolSpacing = _ref$symbolSpacing === undefined ? LegendSvgItem.defaultProps.symbolSpacing : _ref$symbolSpacing,
-        _ref$textColor = _ref.textColor,
-        textColor = _ref$textColor === undefined ? LegendSvg.defaultProps.textColor : _ref$textColor;
+        symbolSpacing = _ref$symbolSpacing === undefined ? LegendSvgItem.defaultProps.symbolSpacing : _ref$symbolSpacing;
 
@@ -772,3 +1051,3 @@ var _computeDimensions = computeDimensions({
 
-        ctx.fillStyle = d.fill;
+        ctx.fillStyle = d.color;
         ctx.fillRect(itemX + symbolX, itemY + symbolY, symbolSize, symbolSize);
@@ -778,3 +1057,3 @@
         ctx.textBaseline = textPropsMapping.baseline[labelAlignment];
-        ctx.fillStyle = textColor;
+        ctx.fillStyle = itemTextColor;
         ctx.fillText(d.label, itemX + labelX, itemY + labelY);
@@ -786,39 +1065,2 @@ });
 
-/**
- * The prop type is exported as a simple object instead of `PropTypes.shape`
- * to be able to add extra properties.
- *
- * @example
- * ```javascript
- * import { LegendPropShape } from '@nivo/legends'
- *
- * const customLegendPropType = PropTypes.shape({
- *     ...LegendPropShape,
- *     extra: PropTypes.any.isRequired,
- * })
- * ```
- */
-var LegendPropShape = {
-    data: PropTypes.arrayOf(PropTypes.shape({
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        fill: PropTypes.string.isRequired
-    })),
-
-    // position & layout
-    anchor: PropTypes.oneOf([ANCHOR_TOP, ANCHOR_TOP_RIGHT, ANCHOR_RIGHT, ANCHOR_BOTTOM_RIGHT, ANCHOR_BOTTOM, ANCHOR_BOTTOM_LEFT, ANCHOR_LEFT, ANCHOR_TOP_LEFT, ANCHOR_CENTER]).isRequired,
-    translateX: PropTypes.number,
-    translateY: PropTypes.number,
-    direction: PropTypes.oneOf([DIRECTION_ROW, DIRECTION_COLUMN]).isRequired,
-
-    // items
-    itemWidth: PropTypes.number.isRequired,
-    itemHeight: PropTypes.number.isRequired,
-    itemDirection: PropTypes.oneOf([DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP]),
-    itemsSpacing: PropTypes.number,
-    symbolSize: PropTypes.number,
-    symbolSpacing: PropTypes.number,
-    symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    textColor: PropTypes.string
-};
-
 exports.BoxLegendSvg = BoxLegendSvg;
@@ -843,2 +1085,6 @@ exports.LegendSvg = LegendSvg;
 exports.DIRECTION_BOTTOM_TO_TOP = DIRECTION_BOTTOM_TO_TOP;
+exports.legendEffectPropType = legendEffectPropType;
+exports.symbolPropTypes = symbolPropTypes;
+exports.interactivityPropTypes = interactivityPropTypes;
+exports.datumPropType = datumPropType;
 exports.LegendPropShape = LegendPropShape;

package.json

 {
   "name": "@nivo/legends",
   "description": "legend components for nivo dataviz library",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "license": "MIT",
@@ -23,3 +23,4 @@ "main": "./index.js",
     "access": "public"
-  }
+  },
+  "gitHead": "7467c8b2fa9dfb1e75007bf52a4bf437d12ce690"
 }

No alert changes

Improved metrics

Total package byte prevSize

38030

increased by35.79%

Number of package files

6

increased by20%

Lines of code

971

increased by29.81%

No dependency changes