@nivo/pie - npm Package Compare versions

Comparing version 0.70.1 to 0.71.0

dist/nivo-pie.cjs.js

@@ -49,4 +49,7 @@ 'use strict';
       legends$1 = _ref.legends,
-      dataWithArc = _ref.dataWithArc;
+      data = _ref.data,
+      toggleSerie = _ref.toggleSerie;
   return React__default.createElement(React__default.Fragment, null, legends$1.map(function (legend, i) {
+    var _legend$data;
+
     return React__default.createElement(legends.BoxLegendSvg, Object.assign({
@@ -57,3 +60,4 @@ key: i
       containerHeight: height,
-      data: dataWithArc
+      data: (_legend$data = legend.data) !== null && _legend$data !== void 0 ? _legend$data : data,
+      toggleSerie: legend.toggleSerie ? toggleSerie : undefined
     }));
@@ -63,2 +67,35 @@ }));
 
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 function _arrayWithHoles(arr) {
@@ -92,19 +129,2 @@ if (Array.isArray(arr)) return arr;
 
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
 function _nonIterableRest() {
@@ -248,2 +268,3 @@ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         label: (_datum$label = datum.label) !== null && _datum$label !== void 0 ? _datum$label : datumId,
+        hidden: false,
         value: datumValue,
@@ -269,3 +290,4 @@ formattedValue: formatValue(datumValue),
       activeInnerRadiusOffset = _ref2.activeInnerRadiusOffset,
-      activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset;
+      activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset,
+      hiddenIds = _ref2.hiddenIds;
   var pie = React.useMemo(function () {
@@ -283,3 +305,6 @@ var innerPie = d3Shape.pie().value(function (d) {
   return React.useMemo(function () {
-    return pie(data).map(function (arc) {
+    var hiddenData = data.filter(function (item) {
+      return !hiddenIds.includes(item.id);
+    });
+    var dataWithArc = pie(hiddenData).map(function (arc) {
       var angle = Math.abs(arc.endAngle - arc.startAngle);
@@ -300,3 +325,12 @@ return _objectSpread2(_objectSpread2({}, arc.data), {}, {
     });
-  }, [pie, data, innerRadius, outerRadius, activeId, activeInnerRadiusOffset, activeInnerRadiusOffset]);
+    var legendData = data.map(function (item) {
+      return _objectSpread2(_objectSpread2({}, item), {}, {
+        hidden: hiddenIds.includes(item.id)
+      });
+    });
+    return {
+      dataWithArc: dataWithArc,
+      legendData: legendData
+    };
+  }, [pie, data, hiddenIds, activeId, innerRadius, activeInnerRadiusOffset, outerRadius, activeOuterRadiusOffset]);
 };
@@ -327,3 +361,8 @@ var usePie = function usePie(_ref3) {
 
-  var dataWithArc = usePieArcs({
+  var _useState3 = React.useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hiddenIds = _useState4[0],
+      setHiddenIds = _useState4[1];
+
+  var pieArcs = usePieArcs({
     data: data,
@@ -338,4 +377,12 @@ startAngle: startAngle,
     activeInnerRadiusOffset: activeInnerRadiusOffset,
-    activeOuterRadiusOffset: activeOuterRadiusOffset
+    activeOuterRadiusOffset: activeOuterRadiusOffset,
+    hiddenIds: hiddenIds
   });
+  var toggleSerie = React.useCallback(function (id) {
+    setHiddenIds(function (state) {
+      return state.indexOf(id) > -1 ? state.filter(function (item) {
+        return item !== id;
+      }) : [].concat(_toConsumableArray(state), [id]);
+    });
+  }, []);
   var arcGenerator = arcs.useArcGenerator({
@@ -345,7 +392,7 @@ cornerRadius: cornerRadius,
   });
-  return {
-    dataWithArc: dataWithArc,
+  return _objectSpread2(_objectSpread2({}, pieArcs), {}, {
     arcGenerator: arcGenerator,
-    setActiveId: setActiveId
-  };
+    setActiveId: setActiveId,
+    toggleSerie: toggleSerie
+  });
 };
@@ -375,7 +422,12 @@ var usePieFromBox = function usePieFromBox(_ref4) {
 
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      activeId = _useState4[0],
-      setActiveId = _useState4[1];
+  var _useState5 = React.useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      activeId = _useState6[0],
+      setActiveId = _useState6[1];
 
+  var _useState7 = React.useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      hiddenIds = _useState8[0],
+      setHiddenIds = _useState8[1];
+
   var computedProps = React.useMemo(function () {
@@ -419,3 +471,3 @@ var radius = Math.min(width, height) / 2;
   }, [width, height, innerRadiusRatio, startAngle, endAngle, fit, cornerRadius]);
-  var dataWithArc = usePieArcs({
+  var pieArcs = usePieArcs({
     data: data,
@@ -430,4 +482,12 @@ startAngle: startAngle,
     activeInnerRadiusOffset: activeInnerRadiusOffset,
-    activeOuterRadiusOffset: activeOuterRadiusOffset
+    activeOuterRadiusOffset: activeOuterRadiusOffset,
+    hiddenIds: hiddenIds
   });
+  var toggleSerie = React.useCallback(function (id) {
+    setHiddenIds(function (state) {
+      return state.indexOf(id) > -1 ? state.filter(function (item) {
+        return item !== id;
+      }) : [].concat(_toConsumableArray(state), [id]);
+    });
+  }, []);
   var arcGenerator = arcs.useArcGenerator({
@@ -437,7 +497,7 @@ cornerRadius: cornerRadius,
   });
-  return _objectSpread2({
-    dataWithArc: dataWithArc,
+  return _objectSpread2(_objectSpread2({
     arcGenerator: arcGenerator,
-    setActiveId: setActiveId
-  }, computedProps);
+    setActiveId: setActiveId,
+    toggleSerie: toggleSerie
+  }, pieArcs), computedProps);
 };
@@ -646,2 +706,3 @@ var usePieLayerContext = function usePieLayerContext(_ref5) {
       dataWithArc = _usePieFromBox.dataWithArc,
+      legendData = _usePieFromBox.legendData,
       arcGenerator = _usePieFromBox.arcGenerator,
@@ -652,3 +713,4 @@ centerX = _usePieFromBox.centerX,
       innerRadius = _usePieFromBox.innerRadius,
-      setActiveId = _usePieFromBox.setActiveId;
+      setActiveId = _usePieFromBox.setActiveId,
+      toggleSerie = _usePieFromBox.toggleSerie;
 
@@ -719,4 +781,5 @@ var boundDefs = core.bindDefs(defs, dataWithArc, fill);
       height: innerHeight,
-      dataWithArc: dataWithArc,
-      legends: legends
+      data: legendData,
+      legends: legends,
+      toggleSerie: toggleSerie
     });
@@ -723,0 +786,0 @@ }

dist/nivo-pie.es.js

@@ -1,2 +0,2 @@
-import React, { useMemo, useState, createElement, Fragment, useRef, useEffect } from 'react';
+import React, { useMemo, useState, useCallback, createElement, Fragment, useRef, useEffect } from 'react';
 import { usePropertyAccessor, useValueFormatter, degreesToRadians, radiansToDegrees, Container, useDimensions, bindDefs, SvgWrapper, ResponsiveWrapper, useTheme, getRelativeCursor } from '@nivo/core';
@@ -42,4 +42,7 @@ import { useArcGenerator, computeArcBoundingBox, ArcsLayer, ArcLinkLabelsLayer, ArcLabelsLayer, useArcLabels, useArcLinkLabels, drawCanvasArcLinkLabels, drawCanvasArcLabels, findArcUnderCursor } from '@nivo/arcs';
       legends = _ref.legends,
-      dataWithArc = _ref.dataWithArc;
+      data = _ref.data,
+      toggleSerie = _ref.toggleSerie;
   return React.createElement(React.Fragment, null, legends.map(function (legend, i) {
+    var _legend$data;
+
     return React.createElement(BoxLegendSvg, Object.assign({
@@ -50,3 +53,4 @@ key: i
       containerHeight: height,
-      data: dataWithArc
+      data: (_legend$data = legend.data) !== null && _legend$data !== void 0 ? _legend$data : data,
+      toggleSerie: legend.toggleSerie ? toggleSerie : undefined
     }));
@@ -56,2 +60,35 @@ }));
 
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 function _arrayWithHoles(arr) {
@@ -85,19 +122,2 @@ if (Array.isArray(arr)) return arr;
 
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
 function _nonIterableRest() {
@@ -241,2 +261,3 @@ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         label: (_datum$label = datum.label) !== null && _datum$label !== void 0 ? _datum$label : datumId,
+        hidden: false,
         value: datumValue,
@@ -262,3 +283,4 @@ formattedValue: formatValue(datumValue),
       activeInnerRadiusOffset = _ref2.activeInnerRadiusOffset,
-      activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset;
+      activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset,
+      hiddenIds = _ref2.hiddenIds;
   var pie$1 = useMemo(function () {
@@ -276,3 +298,6 @@ var innerPie = pie().value(function (d) {
   return useMemo(function () {
-    return pie$1(data).map(function (arc) {
+    var hiddenData = data.filter(function (item) {
+      return !hiddenIds.includes(item.id);
+    });
+    var dataWithArc = pie$1(hiddenData).map(function (arc) {
       var angle = Math.abs(arc.endAngle - arc.startAngle);
@@ -293,3 +318,12 @@ return _objectSpread2(_objectSpread2({}, arc.data), {}, {
     });
-  }, [pie$1, data, innerRadius, outerRadius, activeId, activeInnerRadiusOffset, activeInnerRadiusOffset]);
+    var legendData = data.map(function (item) {
+      return _objectSpread2(_objectSpread2({}, item), {}, {
+        hidden: hiddenIds.includes(item.id)
+      });
+    });
+    return {
+      dataWithArc: dataWithArc,
+      legendData: legendData
+    };
+  }, [pie$1, data, hiddenIds, activeId, innerRadius, activeInnerRadiusOffset, outerRadius, activeOuterRadiusOffset]);
 };
@@ -320,3 +354,8 @@ var usePie = function usePie(_ref3) {
 
-  var dataWithArc = usePieArcs({
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hiddenIds = _useState4[0],
+      setHiddenIds = _useState4[1];
+
+  var pieArcs = usePieArcs({
     data: data,
@@ -331,4 +370,12 @@ startAngle: startAngle,
     activeInnerRadiusOffset: activeInnerRadiusOffset,
-    activeOuterRadiusOffset: activeOuterRadiusOffset
+    activeOuterRadiusOffset: activeOuterRadiusOffset,
+    hiddenIds: hiddenIds
   });
+  var toggleSerie = useCallback(function (id) {
+    setHiddenIds(function (state) {
+      return state.indexOf(id) > -1 ? state.filter(function (item) {
+        return item !== id;
+      }) : [].concat(_toConsumableArray(state), [id]);
+    });
+  }, []);
   var arcGenerator = useArcGenerator({
@@ -338,7 +385,7 @@ cornerRadius: cornerRadius,
   });
-  return {
-    dataWithArc: dataWithArc,
+  return _objectSpread2(_objectSpread2({}, pieArcs), {}, {
     arcGenerator: arcGenerator,
-    setActiveId: setActiveId
-  };
+    setActiveId: setActiveId,
+    toggleSerie: toggleSerie
+  });
 };
@@ -368,7 +415,12 @@ var usePieFromBox = function usePieFromBox(_ref4) {
 
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      activeId = _useState4[0],
-      setActiveId = _useState4[1];
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      activeId = _useState6[0],
+      setActiveId = _useState6[1];
 
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      hiddenIds = _useState8[0],
+      setHiddenIds = _useState8[1];
+
   var computedProps = useMemo(function () {
@@ -412,3 +464,3 @@ var radius = Math.min(width, height) / 2;
   }, [width, height, innerRadiusRatio, startAngle, endAngle, fit, cornerRadius]);
-  var dataWithArc = usePieArcs({
+  var pieArcs = usePieArcs({
     data: data,
@@ -423,4 +475,12 @@ startAngle: startAngle,
     activeInnerRadiusOffset: activeInnerRadiusOffset,
-    activeOuterRadiusOffset: activeOuterRadiusOffset
+    activeOuterRadiusOffset: activeOuterRadiusOffset,
+    hiddenIds: hiddenIds
   });
+  var toggleSerie = useCallback(function (id) {
+    setHiddenIds(function (state) {
+      return state.indexOf(id) > -1 ? state.filter(function (item) {
+        return item !== id;
+      }) : [].concat(_toConsumableArray(state), [id]);
+    });
+  }, []);
   var arcGenerator = useArcGenerator({
@@ -430,7 +490,7 @@ cornerRadius: cornerRadius,
   });
-  return _objectSpread2({
-    dataWithArc: dataWithArc,
+  return _objectSpread2(_objectSpread2({
     arcGenerator: arcGenerator,
-    setActiveId: setActiveId
-  }, computedProps);
+    setActiveId: setActiveId,
+    toggleSerie: toggleSerie
+  }, pieArcs), computedProps);
 };
@@ -639,2 +699,3 @@ var usePieLayerContext = function usePieLayerContext(_ref5) {
       dataWithArc = _usePieFromBox.dataWithArc,
+      legendData = _usePieFromBox.legendData,
       arcGenerator = _usePieFromBox.arcGenerator,
@@ -645,3 +706,4 @@ centerX = _usePieFromBox.centerX,
       innerRadius = _usePieFromBox.innerRadius,
-      setActiveId = _usePieFromBox.setActiveId;
+      setActiveId = _usePieFromBox.setActiveId,
+      toggleSerie = _usePieFromBox.toggleSerie;
 
@@ -712,4 +774,5 @@ var boundDefs = bindDefs(defs, dataWithArc, fill);
       height: innerHeight,
-      dataWithArc: dataWithArc,
-      legends: legends
+      data: legendData,
+      legends: legends,
+      toggleSerie: toggleSerie
     });
@@ -716,0 +779,0 @@ }

dist/nivo-pie.umd.js

@@ -42,4 +42,7 @@ (function (global, factory) {
         legends$1 = _ref.legends,
-        dataWithArc = _ref.dataWithArc;
+        data = _ref.data,
+        toggleSerie = _ref.toggleSerie;
     return React__default.createElement(React__default.Fragment, null, legends$1.map(function (legend, i) {
+      var _legend$data;
+
       return React__default.createElement(legends.BoxLegendSvg, Object.assign({
@@ -50,3 +53,4 @@ key: i
         containerHeight: height,
-        data: dataWithArc
+        data: (_legend$data = legend.data) !== null && _legend$data !== void 0 ? _legend$data : data,
+        toggleSerie: legend.toggleSerie ? toggleSerie : undefined
       }));
@@ -56,2 +60,35 @@ }));
 
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++) {
+      arr2[i] = arr[i];
+    }
+    return arr2;
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
   function _arrayWithHoles(arr) {
@@ -85,19 +122,2 @@ if (Array.isArray(arr)) return arr;
 
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for (var i = 0, arr2 = new Array(len); i < len; i++) {
-      arr2[i] = arr[i];
-    }
-    return arr2;
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
   function _nonIterableRest() {
@@ -241,2 +261,3 @@ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
           label: (_datum$label = datum.label) !== null && _datum$label !== void 0 ? _datum$label : datumId,
+          hidden: false,
           value: datumValue,
@@ -262,3 +283,4 @@ formattedValue: formatValue(datumValue),
         activeInnerRadiusOffset = _ref2.activeInnerRadiusOffset,
-        activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset;
+        activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset,
+        hiddenIds = _ref2.hiddenIds;
     var pie = React.useMemo(function () {
@@ -276,3 +298,6 @@ var innerPie = d3Shape.pie().value(function (d) {
     return React.useMemo(function () {
-      return pie(data).map(function (arc) {
+      var hiddenData = data.filter(function (item) {
+        return !hiddenIds.includes(item.id);
+      });
+      var dataWithArc = pie(hiddenData).map(function (arc) {
         var angle = Math.abs(arc.endAngle - arc.startAngle);
@@ -293,3 +318,12 @@ return _objectSpread2(_objectSpread2({}, arc.data), {}, {
       });
-    }, [pie, data, innerRadius, outerRadius, activeId, activeInnerRadiusOffset, activeInnerRadiusOffset]);
+      var legendData = data.map(function (item) {
+        return _objectSpread2(_objectSpread2({}, item), {}, {
+          hidden: hiddenIds.includes(item.id)
+        });
+      });
+      return {
+        dataWithArc: dataWithArc,
+        legendData: legendData
+      };
+    }, [pie, data, hiddenIds, activeId, innerRadius, activeInnerRadiusOffset, outerRadius, activeOuterRadiusOffset]);
   };
@@ -320,3 +354,8 @@ var usePie = function usePie(_ref3) {
 
-    var dataWithArc = usePieArcs({
+    var _useState3 = React.useState([]),
+        _useState4 = _slicedToArray(_useState3, 2),
+        hiddenIds = _useState4[0],
+        setHiddenIds = _useState4[1];
+
+    var pieArcs = usePieArcs({
       data: data,
@@ -331,4 +370,12 @@ startAngle: startAngle,
       activeInnerRadiusOffset: activeInnerRadiusOffset,
-      activeOuterRadiusOffset: activeOuterRadiusOffset
+      activeOuterRadiusOffset: activeOuterRadiusOffset,
+      hiddenIds: hiddenIds
     });
+    var toggleSerie = React.useCallback(function (id) {
+      setHiddenIds(function (state) {
+        return state.indexOf(id) > -1 ? state.filter(function (item) {
+          return item !== id;
+        }) : [].concat(_toConsumableArray(state), [id]);
+      });
+    }, []);
     var arcGenerator = arcs.useArcGenerator({
@@ -338,7 +385,7 @@ cornerRadius: cornerRadius,
     });
-    return {
-      dataWithArc: dataWithArc,
+    return _objectSpread2(_objectSpread2({}, pieArcs), {}, {
       arcGenerator: arcGenerator,
-      setActiveId: setActiveId
-    };
+      setActiveId: setActiveId,
+      toggleSerie: toggleSerie
+    });
   };
@@ -368,7 +415,12 @@ var usePieFromBox = function usePieFromBox(_ref4) {
 
-    var _useState3 = React.useState(null),
-        _useState4 = _slicedToArray(_useState3, 2),
-        activeId = _useState4[0],
-        setActiveId = _useState4[1];
+    var _useState5 = React.useState(null),
+        _useState6 = _slicedToArray(_useState5, 2),
+        activeId = _useState6[0],
+        setActiveId = _useState6[1];
 
+    var _useState7 = React.useState([]),
+        _useState8 = _slicedToArray(_useState7, 2),
+        hiddenIds = _useState8[0],
+        setHiddenIds = _useState8[1];
+
     var computedProps = React.useMemo(function () {
@@ -412,3 +464,3 @@ var radius = Math.min(width, height) / 2;
     }, [width, height, innerRadiusRatio, startAngle, endAngle, fit, cornerRadius]);
-    var dataWithArc = usePieArcs({
+    var pieArcs = usePieArcs({
       data: data,
@@ -423,4 +475,12 @@ startAngle: startAngle,
       activeInnerRadiusOffset: activeInnerRadiusOffset,
-      activeOuterRadiusOffset: activeOuterRadiusOffset
+      activeOuterRadiusOffset: activeOuterRadiusOffset,
+      hiddenIds: hiddenIds
     });
+    var toggleSerie = React.useCallback(function (id) {
+      setHiddenIds(function (state) {
+        return state.indexOf(id) > -1 ? state.filter(function (item) {
+          return item !== id;
+        }) : [].concat(_toConsumableArray(state), [id]);
+      });
+    }, []);
     var arcGenerator = arcs.useArcGenerator({
@@ -430,7 +490,7 @@ cornerRadius: cornerRadius,
     });
-    return _objectSpread2({
-      dataWithArc: dataWithArc,
+    return _objectSpread2(_objectSpread2({
       arcGenerator: arcGenerator,
-      setActiveId: setActiveId
-    }, computedProps);
+      setActiveId: setActiveId,
+      toggleSerie: toggleSerie
+    }, pieArcs), computedProps);
   };
@@ -639,2 +699,3 @@ var usePieLayerContext = function usePieLayerContext(_ref5) {
         dataWithArc = _usePieFromBox.dataWithArc,
+        legendData = _usePieFromBox.legendData,
         arcGenerator = _usePieFromBox.arcGenerator,
@@ -645,3 +706,4 @@ centerX = _usePieFromBox.centerX,
         innerRadius = _usePieFromBox.innerRadius,
-        setActiveId = _usePieFromBox.setActiveId;
+        setActiveId = _usePieFromBox.setActiveId,
+        toggleSerie = _usePieFromBox.toggleSerie;
 
@@ -712,4 +774,5 @@ var boundDefs = core.bindDefs(defs, dataWithArc, fill);
         height: innerHeight,
-        dataWithArc: dataWithArc,
-        legends: legends
+        data: legendData,
+        legends: legends,
+        toggleSerie: toggleSerie
       });
@@ -716,0 +779,0 @@ }

dist/types/hooks.d.ts

 /// <reference types="react" />
-import { ArcGenerator } from '@nivo/arcs';
 import { CompletePieSvgProps, ComputedDatum, DatumId, PieCustomLayerProps } from './types';
@@ -13,8 +12,8 @@ interface MayHaveLabel {
     data: RawDatum[];
-}) => Pick<ComputedDatum<RawDatum>, "color" | "data" | "label" | "id" | "value" | "formattedValue">[];
+}) => Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "data" | "label" | "id" | "value" | "formattedValue">[];
 /**
  * Compute arcs, which don't depend yet on radius.
  */
-export declare const usePieArcs: <RawDatum>({ data, startAngle, endAngle, innerRadius, outerRadius, padAngle, sortByValue, activeId, activeInnerRadiusOffset, activeOuterRadiusOffset, }: {
-    data: Pick<ComputedDatum<RawDatum>, "color" | "data" | "label" | "id" | "value" | "formattedValue">[];
+export declare const usePieArcs: <RawDatum>({ data, startAngle, endAngle, innerRadius, outerRadius, padAngle, sortByValue, activeId, activeInnerRadiusOffset, activeOuterRadiusOffset, hiddenIds, }: {
+    data: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "data" | "label" | "id" | "value" | "formattedValue">[];
     startAngle: number;
@@ -29,3 +28,7 @@ endAngle: number;
     activeOuterRadiusOffset: number;
-}) => Pick<ComputedDatum<RawDatum>, "color" | "data" | "label" | "id" | "value" | "arc" | "formattedValue">[];
+    hiddenIds: DatumId[];
+}) => {
+    dataWithArc: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "data" | "label" | "id" | "value" | "arc" | "formattedValue">[];
+    legendData: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "data" | "label" | "id" | "value" | "formattedValue">[];
+};
 /**
@@ -35,10 +38,12 @@ * Compute pie layout using explicit radius/innerRadius,
  */
-export declare const usePie: <RawDatum>({ data, radius, innerRadius, startAngle, endAngle, padAngle, sortByValue, cornerRadius, activeInnerRadiusOffset, activeOuterRadiusOffset, }: Pick<CompletePieSvgProps<RawDatum>, "startAngle" | "endAngle" | "cornerRadius" | "padAngle" | "sortByValue" | "activeInnerRadiusOffset" | "activeOuterRadiusOffset"> & {
-    data: Pick<ComputedDatum<RawDatum>, "color" | "fill" | "data" | "label" | "id" | "value" | "formattedValue">[];
+export declare const usePie: <RawDatum>({ data, radius, innerRadius, startAngle, endAngle, padAngle, sortByValue, cornerRadius, activeInnerRadiusOffset, activeOuterRadiusOffset, }: Pick<Partial<CompletePieSvgProps<RawDatum>>, "startAngle" | "endAngle" | "cornerRadius" | "padAngle" | "sortByValue" | "activeInnerRadiusOffset" | "activeOuterRadiusOffset"> & {
+    data: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "fill" | "data" | "label" | "id" | "value" | "formattedValue">[];
     radius: number;
     innerRadius: number;
 }) => {
-    dataWithArc: Pick<ComputedDatum<RawDatum>, "color" | "data" | "label" | "id" | "value" | "arc" | "formattedValue">[];
-    arcGenerator: ArcGenerator;
+    arcGenerator: import("@nivo/arcs").ArcGenerator;
     setActiveId: import("react").Dispatch<import("react").SetStateAction<string | number | null>>;
+    toggleSerie: (id: DatumId) => void;
+    dataWithArc: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "data" | "label" | "id" | "value" | "arc" | "formattedValue">[];
+    legendData: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "data" | "label" | "id" | "value" | "formattedValue">[];
 };
@@ -54,3 +59,3 @@ /**
 export declare const usePieFromBox: <RawDatum>({ data, width, height, innerRadius: innerRadiusRatio, startAngle, endAngle, padAngle, sortByValue, cornerRadius, fit, activeInnerRadiusOffset, activeOuterRadiusOffset, }: Pick<CompletePieSvgProps<RawDatum>, "height" | "width" | "startAngle" | "endAngle" | "innerRadius" | "cornerRadius" | "padAngle" | "sortByValue" | "fit" | "activeInnerRadiusOffset" | "activeOuterRadiusOffset"> & {
-    data: Pick<ComputedDatum<RawDatum>, "color" | "fill" | "data" | "label" | "id" | "value" | "formattedValue">[];
+    data: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "fill" | "data" | "label" | "id" | "value" | "formattedValue">[];
 }) => {
@@ -71,5 +76,7 @@ centerX: number;
     } | undefined;
-    dataWithArc: Pick<ComputedDatum<RawDatum>, "color" | "data" | "label" | "id" | "value" | "arc" | "formattedValue">[];
-    arcGenerator: ArcGenerator;
+    dataWithArc: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "data" | "label" | "id" | "value" | "arc" | "formattedValue">[];
+    legendData: Pick<ComputedDatum<RawDatum>, "hidden" | "color" | "data" | "label" | "id" | "value" | "formattedValue">[];
+    arcGenerator: import("@nivo/arcs").ArcGenerator;
     setActiveId: import("react").Dispatch<import("react").SetStateAction<string | number | null>>;
+    toggleSerie: (id: DatumId) => void;
 };
@@ -79,11 +86,4 @@ /**
  */
-export declare const usePieLayerContext: <RawDatum>({ dataWithArc, arcGenerator, centerX, centerY, radius, innerRadius, }: {
-    dataWithArc: ComputedDatum<RawDatum>[];
-    arcGenerator: ArcGenerator;
-    centerX: number;
-    centerY: number;
-    radius: number;
-    innerRadius: number;
-}) => PieCustomLayerProps<RawDatum>;
+export declare const usePieLayerContext: <RawDatum>({ dataWithArc, arcGenerator, centerX, centerY, radius, innerRadius, }: PieCustomLayerProps<RawDatum>) => PieCustomLayerProps<RawDatum>;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

dist/types/PieLegends.d.ts

 /// <reference types="react" />
-import { CompletePieSvgProps, ComputedDatum } from './types';
+import { CompletePieSvgProps, ComputedDatum, DatumId } from './types';
 interface PieLegendsProps<RawDatum> {
@@ -7,6 +7,7 @@ width: number;
     legends: CompletePieSvgProps<RawDatum>['legends'];
-    dataWithArc: ComputedDatum<RawDatum>[];
+    data: Omit<ComputedDatum<RawDatum>, 'arc'>[];
+    toggleSerie: (id: DatumId) => void;
 }
-declare const PieLegends: <RawDatum>({ width, height, legends, dataWithArc, }: PieLegendsProps<RawDatum>) => JSX.Element;
+declare const PieLegends: <RawDatum>({ width, height, legends, data, toggleSerie, }: PieLegendsProps<RawDatum>) => JSX.Element;
 export default PieLegends;
 //# sourceMappingURL=PieLegends.d.ts.map

dist/types/types.d.ts

@@ -27,2 +27,3 @@ import * as React from 'react';
     arc: PieArc;
+    hidden: boolean;
 }
@@ -29,0 +30,0 @@ export interface DataProps<RawDatum> {

package.json

 {
   "name": "@nivo/pie",
-  "version": "0.70.1",
+  "version": "0.71.0",
   "license": "MIT",
@@ -32,14 +32,14 @@ "author": {
   "dependencies": {
-    "@nivo/arcs": "0.70.1",
-    "@nivo/colors": "0.70.1",
-    "@nivo/legends": "0.70.1",
-    "@nivo/tooltip": "0.70.1",
+    "@nivo/arcs": "0.71.0",
+    "@nivo/colors": "0.71.0",
+    "@nivo/legends": "0.71.0",
+    "@nivo/tooltip": "0.71.0",
     "d3-shape": "^1.3.5"
   },
   "devDependencies": {
-    "@nivo/core": "0.70.1",
+    "@nivo/core": "0.71.0",
     "@types/d3-shape": "^2.0.0"
   },
   "peerDependencies": {
-    "@nivo/core": "0.70.1",
+    "@nivo/core": "0.71.0",
     "react": ">= 16.8.4 < 18.0.0"
@@ -50,3 +50,3 @@ },
   },
-  "gitHead": "460d79b04e335bd32a80226da417d41d312b893d"
+  "gitHead": "232b613bd61d2b8e5c783f4181b2d14580e2fd27"
 }

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

Total package byte prevSize

401081

increased by5.58%

Lines of code

3410

increased by5.25%

Dependency changes

• + Added@nivo/arcs@0.71.0(transitive)

• + Added@nivo/colors@0.71.0(transitive)

• + Added@nivo/core@0.71.0(transitive)

• + Added@nivo/legends@0.71.0(transitive)

• + Added@nivo/recompose@0.71.0(transitive)

• + Added@nivo/tooltip@0.71.0(transitive)

• + Added@react-spring/animated@9.2.6(transitive)

• + Added@react-spring/core@9.2.6(transitive)

• + Added@react-spring/rafz@9.2.6(transitive)

• + Added@react-spring/shared@9.2.6(transitive)

• + Added@react-spring/types@9.2.6(transitive)

• + Added@react-spring/web@9.2.0(transitive)

• + Addedd3-time-format@3.0.0(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)

• - Removed@nivo/arcs@0.70.1(transitive)

• - Removed@nivo/colors@0.70.1(transitive)

• - Removed@nivo/core@0.70.1(transitive)

• - Removed@nivo/legends@0.70.1(transitive)

• - Removed@nivo/recompose@0.70.0(transitive)

• - Removed@nivo/tooltip@0.70.1(transitive)

• - Removed@react-spring/animated@9.1.2(transitive)

• - Removed@react-spring/core@9.1.2(transitive)

• - Removed@react-spring/shared@9.1.2(transitive)

• - Removed@react-spring/types@9.1.2(transitive)

• - Removed@react-spring/web@9.1.2(transitive)

• - Removedd3-time@1.1.0(transitive)

• - Removedd3-time-format@2.3.0(transitive)

• - Removedrafz@0.1.14(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• Updated@nivo/arcs@0.71.0

• Updated@nivo/colors@0.71.0

• Updated@nivo/legends@0.71.0

• Updated@nivo/tooltip@0.71.0