Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@nivo/pie - npm Package Compare versions
Comparing version 0.74.1 to 0.75.0
@@ -1,1118 +0,2 @@ | ||
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var react = require('react'); | ||
| var core = require('@nivo/core'); | ||
| var arcs = require('@nivo/arcs'); | ||
| var legends = require('@nivo/legends'); | ||
| var jsxRuntime = require('react/jsx-runtime'); | ||
| var d3Shape = require('d3-shape'); | ||
| var colors = require('@nivo/colors'); | ||
| var tooltip = require('@nivo/tooltip'); | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| if (enumerableOnly) symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| }); | ||
| keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| if (i % 2) { | ||
| ownKeys(Object(source), true).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } else if (Object.getOwnPropertyDescriptors) { | ||
| Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
| } else { | ||
| ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = {}; | ||
| var sourceKeys = Object.keys(source); | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
| key = sourceKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutProperties(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = _objectWithoutPropertiesLoose(source, excluded); | ||
| var key, i; | ||
| if (Object.getOwnPropertySymbols) { | ||
| var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
| for (i = 0; i < sourceSymbolKeys.length; i++) { | ||
| key = sourceSymbolKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| var PieLegends = function PieLegends(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height, | ||
| legends$1 = _ref.legends, | ||
| data = _ref.data, | ||
| toggleSerie = _ref.toggleSerie; | ||
| return jsxRuntime.jsx(jsxRuntime.Fragment, { | ||
| children: legends$1.map(function (legend, i) { | ||
| var _legend$data; | ||
| return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, { | ||
| containerWidth: width, | ||
| containerHeight: height, | ||
| data: (_legend$data = legend.data) !== null && _legend$data !== void 0 ? _legend$data : data, | ||
| toggleSerie: legend.toggleSerie ? toggleSerie : undefined | ||
| }), i); | ||
| }) | ||
| }); | ||
| }; | ||
| 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(o); | ||
| 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) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
| if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"] != null) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| function _slicedToArray(arr, i) { | ||
| return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); | ||
| } | ||
| var PieTooltip = function PieTooltip(_ref) { | ||
| var datum = _ref.datum; | ||
| return jsxRuntime.jsx(tooltip.BasicTooltip, { | ||
| id: datum.id, | ||
| value: datum.formattedValue, | ||
| enableChip: true, | ||
| color: datum.color | ||
| }); | ||
| }; | ||
| var _window$devicePixelRa; | ||
| var defaultProps = { | ||
| id: 'id', | ||
| value: 'value', | ||
| sortByValue: false, | ||
| innerRadius: 0, | ||
| padAngle: 0, | ||
| cornerRadius: 0, | ||
| layers: ['arcLinkLabels', 'arcs', 'arcLabels', 'legends'], | ||
| startAngle: 0, | ||
| endAngle: 360, | ||
| fit: true, | ||
| activeInnerRadiusOffset: 0, | ||
| activeOuterRadiusOffset: 0, | ||
| borderWidth: 0, | ||
| borderColor: { | ||
| from: 'color', | ||
| modifiers: [['darker', 1]] | ||
| }, | ||
| enableArcLabels: true, | ||
| arcLabel: 'formattedValue', | ||
| arcLabelsSkipAngle: 0, | ||
| arcLabelsRadiusOffset: 0.5, | ||
| arcLabelsTextColor: { | ||
| theme: 'labels.text.fill' | ||
| }, | ||
| enableArcLinkLabels: true, | ||
| arcLinkLabel: 'id', | ||
| arcLinkLabelsSkipAngle: 0, | ||
| arcLinkLabelsOffset: 0, | ||
| arcLinkLabelsDiagonalLength: 16, | ||
| arcLinkLabelsStraightLength: 24, | ||
| arcLinkLabelsThickness: 1, | ||
| arcLinkLabelsTextOffset: 6, | ||
| arcLinkLabelsTextColor: { | ||
| theme: 'labels.text.fill' | ||
| }, | ||
| arcLinkLabelsColor: { | ||
| theme: 'axis.ticks.line.stroke' | ||
| }, | ||
| colors: { | ||
| scheme: 'nivo' | ||
| }, | ||
| defs: [], | ||
| fill: [], | ||
| isInteractive: true, | ||
| animate: true, | ||
| motionConfig: 'gentle', | ||
| transitionMode: 'innerRadius', | ||
| tooltip: PieTooltip, | ||
| legends: [], | ||
| role: 'img', | ||
| pixelRatio: typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) !== null && _window$devicePixelRa !== void 0 ? _window$devicePixelRa : 1 : 1 | ||
| }; | ||
| var useNormalizedData = function useNormalizedData(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$colors = _ref.colors, | ||
| colors$1 = _ref$colors === void 0 ? defaultProps.colors : _ref$colors; | ||
| var getId = core.usePropertyAccessor(id); | ||
| var getValue = core.usePropertyAccessor(value); | ||
| var formatValue = core.useValueFormatter(valueFormat); | ||
| var getColor = colors.useOrdinalColorScale(colors$1, 'id'); | ||
| return react.useMemo(function () { | ||
| return data.map(function (datum) { | ||
| var _datum$label; | ||
| var datumId = getId(datum); | ||
| var datumValue = getValue(datum); | ||
| var normalizedDatum = { | ||
| id: datumId, | ||
| label: (_datum$label = datum.label) !== null && _datum$label !== void 0 ? _datum$label : datumId, | ||
| hidden: false, | ||
| value: datumValue, | ||
| formattedValue: formatValue(datumValue), | ||
| data: datum | ||
| }; | ||
| return _objectSpread2(_objectSpread2({}, normalizedDatum), {}, { | ||
| color: getColor(normalizedDatum) | ||
| }); | ||
| }); | ||
| }, [data, getId, getValue, formatValue, getColor]); | ||
| }; | ||
| var usePieArcs = function usePieArcs(_ref2) { | ||
| var data = _ref2.data, | ||
| startAngle = _ref2.startAngle, | ||
| endAngle = _ref2.endAngle, | ||
| innerRadius = _ref2.innerRadius, | ||
| outerRadius = _ref2.outerRadius, | ||
| padAngle = _ref2.padAngle, | ||
| sortByValue = _ref2.sortByValue, | ||
| activeId = _ref2.activeId, | ||
| activeInnerRadiusOffset = _ref2.activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset, | ||
| hiddenIds = _ref2.hiddenIds; | ||
| var pie = react.useMemo(function () { | ||
| var innerPie = d3Shape.pie().value(function (d) { | ||
| return d.value; | ||
| }).startAngle(core.degreesToRadians(startAngle)).endAngle(core.degreesToRadians(endAngle)).padAngle(core.degreesToRadians(padAngle)); | ||
| if (!sortByValue) { | ||
| innerPie.sortValues(null); | ||
| } | ||
| return innerPie; | ||
| }, [startAngle, endAngle, padAngle, sortByValue]); | ||
| return react.useMemo(function () { | ||
| 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); | ||
| return _objectSpread2(_objectSpread2({}, arc.data), {}, { | ||
| arc: { | ||
| index: arc.index, | ||
| startAngle: arc.startAngle, | ||
| endAngle: arc.endAngle, | ||
| innerRadius: activeId === arc.data.id ? innerRadius - activeInnerRadiusOffset : innerRadius, | ||
| outerRadius: activeId === arc.data.id ? outerRadius + activeOuterRadiusOffset : outerRadius, | ||
| thickness: outerRadius - innerRadius, | ||
| padAngle: arc.padAngle, | ||
| angle: angle, | ||
| angleDeg: core.radiansToDegrees(angle) | ||
| } | ||
| }); | ||
| }); | ||
| 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]); | ||
| }; | ||
| var usePie = function usePie(_ref3) { | ||
| var data = _ref3.data, | ||
| radius = _ref3.radius, | ||
| innerRadius = _ref3.innerRadius, | ||
| _ref3$startAngle = _ref3.startAngle, | ||
| startAngle = _ref3$startAngle === void 0 ? defaultProps.startAngle : _ref3$startAngle, | ||
| _ref3$endAngle = _ref3.endAngle, | ||
| endAngle = _ref3$endAngle === void 0 ? defaultProps.endAngle : _ref3$endAngle, | ||
| _ref3$padAngle = _ref3.padAngle, | ||
| padAngle = _ref3$padAngle === void 0 ? defaultProps.padAngle : _ref3$padAngle, | ||
| _ref3$sortByValue = _ref3.sortByValue, | ||
| sortByValue = _ref3$sortByValue === void 0 ? defaultProps.sortByValue : _ref3$sortByValue, | ||
| _ref3$cornerRadius = _ref3.cornerRadius, | ||
| cornerRadius = _ref3$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref3$cornerRadius, | ||
| _ref3$activeInnerRadi = _ref3.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref3$activeInnerRadi === void 0 ? defaultProps.activeInnerRadiusOffset : _ref3$activeInnerRadi, | ||
| _ref3$activeOuterRadi = _ref3.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref3$activeOuterRadi === void 0 ? defaultProps.activeOuterRadiusOffset : _ref3$activeOuterRadi; | ||
| var _useState = react.useState(null), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| activeId = _useState2[0], | ||
| setActiveId = _useState2[1]; | ||
| var _useState3 = react.useState([]), | ||
| _useState4 = _slicedToArray(_useState3, 2), | ||
| hiddenIds = _useState4[0], | ||
| setHiddenIds = _useState4[1]; | ||
| var pieArcs = usePieArcs({ | ||
| data: data, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: radius, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| activeId: activeId, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| 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({ | ||
| cornerRadius: cornerRadius, | ||
| padAngle: core.degreesToRadians(padAngle) | ||
| }); | ||
| return _objectSpread2(_objectSpread2({}, pieArcs), {}, { | ||
| arcGenerator: arcGenerator, | ||
| setActiveId: setActiveId, | ||
| toggleSerie: toggleSerie | ||
| }); | ||
| }; | ||
| var usePieFromBox = function usePieFromBox(_ref4) { | ||
| var data = _ref4.data, | ||
| width = _ref4.width, | ||
| height = _ref4.height, | ||
| _ref4$innerRadius = _ref4.innerRadius, | ||
| innerRadiusRatio = _ref4$innerRadius === void 0 ? defaultProps.innerRadius : _ref4$innerRadius, | ||
| _ref4$startAngle = _ref4.startAngle, | ||
| startAngle = _ref4$startAngle === void 0 ? defaultProps.startAngle : _ref4$startAngle, | ||
| _ref4$endAngle = _ref4.endAngle, | ||
| endAngle = _ref4$endAngle === void 0 ? defaultProps.endAngle : _ref4$endAngle, | ||
| _ref4$padAngle = _ref4.padAngle, | ||
| padAngle = _ref4$padAngle === void 0 ? defaultProps.padAngle : _ref4$padAngle, | ||
| _ref4$sortByValue = _ref4.sortByValue, | ||
| sortByValue = _ref4$sortByValue === void 0 ? defaultProps.sortByValue : _ref4$sortByValue, | ||
| _ref4$cornerRadius = _ref4.cornerRadius, | ||
| cornerRadius = _ref4$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref4$cornerRadius, | ||
| _ref4$fit = _ref4.fit, | ||
| fit = _ref4$fit === void 0 ? defaultProps.fit : _ref4$fit, | ||
| _ref4$activeInnerRadi = _ref4.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref4$activeInnerRadi === void 0 ? defaultProps.activeInnerRadiusOffset : _ref4$activeInnerRadi, | ||
| _ref4$activeOuterRadi = _ref4.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref4$activeOuterRadi === void 0 ? defaultProps.activeOuterRadiusOffset : _ref4$activeOuterRadi; | ||
| 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 () { | ||
| var radius = Math.min(width, height) / 2; | ||
| var innerRadius = radius * Math.min(innerRadiusRatio, 1); | ||
| var centerX = width / 2; | ||
| var centerY = height / 2; | ||
| var boundingBox; | ||
| if (fit) { | ||
| var _computeArcBoundingBo = arcs.computeArcBoundingBox(centerX, centerY, radius, startAngle - 90, endAngle - 90), | ||
| points = _computeArcBoundingBo.points, | ||
| box = _objectWithoutProperties(_computeArcBoundingBo, ["points"]); | ||
| var ratio = Math.min(width / box.width, height / box.height); | ||
| var adjustedBox = { | ||
| width: box.width * ratio, | ||
| height: box.height * ratio | ||
| }; | ||
| adjustedBox.x = (width - adjustedBox.width) / 2; | ||
| adjustedBox.y = (height - adjustedBox.height) / 2; | ||
| centerX = (centerX - box.x) / box.width * box.width * ratio + adjustedBox.x; | ||
| centerY = (centerY - box.y) / box.height * box.height * ratio + adjustedBox.y; | ||
| boundingBox = { | ||
| box: box, | ||
| ratio: ratio, | ||
| points: points | ||
| }; | ||
| radius = radius * ratio; | ||
| innerRadius = innerRadius * ratio; | ||
| } | ||
| return { | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius, | ||
| debug: boundingBox | ||
| }; | ||
| }, [width, height, innerRadiusRatio, startAngle, endAngle, fit, cornerRadius]); | ||
| var pieArcs = usePieArcs({ | ||
| data: data, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: computedProps.innerRadius, | ||
| outerRadius: computedProps.radius, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| activeId: activeId, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| 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({ | ||
| cornerRadius: cornerRadius, | ||
| padAngle: core.degreesToRadians(padAngle) | ||
| }); | ||
| return _objectSpread2(_objectSpread2({ | ||
| arcGenerator: arcGenerator, | ||
| setActiveId: setActiveId, | ||
| toggleSerie: toggleSerie | ||
| }, pieArcs), computedProps); | ||
| }; | ||
| var usePieLayerContext = function usePieLayerContext(_ref5) { | ||
| var dataWithArc = _ref5.dataWithArc, | ||
| arcGenerator = _ref5.arcGenerator, | ||
| centerX = _ref5.centerX, | ||
| centerY = _ref5.centerY, | ||
| radius = _ref5.radius, | ||
| innerRadius = _ref5.innerRadius; | ||
| return react.useMemo(function () { | ||
| return { | ||
| dataWithArc: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius | ||
| }; | ||
| }, [dataWithArc, arcGenerator, centerX, centerY, radius, innerRadius]); | ||
| }; | ||
| var Arcs = function Arcs(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| arcGenerator = _ref.arcGenerator, | ||
| borderWidth = _ref.borderWidth, | ||
| borderColor = _ref.borderColor, | ||
| isInteractive = _ref.isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| setActiveId = _ref.setActiveId, | ||
| tooltip$1 = _ref.tooltip, | ||
| transitionMode = _ref.transitionMode; | ||
| var _useTooltip = tooltip.useTooltip(), | ||
| showTooltipFromEvent = _useTooltip.showTooltipFromEvent, | ||
| hideTooltip = _useTooltip.hideTooltip; | ||
| var handleClick = react.useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| onClick === null || onClick === void 0 ? void 0 : onClick(datum, event); | ||
| }; | ||
| }, [isInteractive, onClick]); | ||
| var handleMouseEnter = react.useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| showTooltipFromEvent(react.createElement(tooltip$1, { | ||
| datum: datum | ||
| }), event); | ||
| setActiveId(datum.id); | ||
| onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(datum, event); | ||
| }; | ||
| }, [isInteractive, showTooltipFromEvent, setActiveId, onMouseEnter]); | ||
| var handleMouseMove = react.useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| showTooltipFromEvent(react.createElement(tooltip$1, { | ||
| datum: datum | ||
| }), event); | ||
| onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| }; | ||
| }, [isInteractive, showTooltipFromEvent, onMouseMove]); | ||
| var handleMouseLeave = react.useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| hideTooltip(); | ||
| setActiveId(null); | ||
| onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(datum, event); | ||
| }; | ||
| }, [isInteractive, hideTooltip, setActiveId, onMouseLeave]); | ||
| return jsxRuntime.jsx(arcs.ArcsLayer, { | ||
| center: center, | ||
| data: data, | ||
| arcGenerator: arcGenerator, | ||
| borderWidth: borderWidth, | ||
| borderColor: borderColor, | ||
| transitionMode: transitionMode, | ||
| onClick: handleClick, | ||
| onMouseEnter: handleMouseEnter, | ||
| onMouseMove: handleMouseMove, | ||
| onMouseLeave: handleMouseLeave | ||
| }); | ||
| }; | ||
| var InnerPie = function InnerPie(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$sortByValue = _ref.sortByValue, | ||
| sortByValue = _ref$sortByValue === void 0 ? defaultProps.sortByValue : _ref$sortByValue, | ||
| _ref$layers = _ref.layers, | ||
| layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers, | ||
| _ref$startAngle = _ref.startAngle, | ||
| startAngle = _ref$startAngle === void 0 ? defaultProps.startAngle : _ref$startAngle, | ||
| _ref$endAngle = _ref.endAngle, | ||
| endAngle = _ref$endAngle === void 0 ? defaultProps.endAngle : _ref$endAngle, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? defaultProps.padAngle : _ref$padAngle, | ||
| _ref$fit = _ref.fit, | ||
| fit = _ref$fit === void 0 ? defaultProps.fit : _ref$fit, | ||
| _ref$innerRadius = _ref.innerRadius, | ||
| innerRadiusRatio = _ref$innerRadius === void 0 ? defaultProps.innerRadius : _ref$innerRadius, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref$cornerRadius, | ||
| _ref$activeInnerRadiu = _ref.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref$activeInnerRadiu === void 0 ? defaultProps.activeInnerRadiusOffset : _ref$activeInnerRadiu, | ||
| _ref$activeOuterRadiu = _ref.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref$activeOuterRadiu === void 0 ? defaultProps.activeOuterRadiusOffset : _ref$activeOuterRadiu, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| partialMargin = _ref.margin, | ||
| _ref$colors = _ref.colors, | ||
| colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors, | ||
| _ref$borderWidth = _ref.borderWidth, | ||
| borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth, | ||
| _ref$borderColor = _ref.borderColor, | ||
| borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor, | ||
| _ref$enableArcLabels = _ref.enableArcLabels, | ||
| enableArcLabels = _ref$enableArcLabels === void 0 ? defaultProps.enableArcLabels : _ref$enableArcLabels, | ||
| _ref$arcLabel = _ref.arcLabel, | ||
| arcLabel = _ref$arcLabel === void 0 ? defaultProps.arcLabel : _ref$arcLabel, | ||
| _ref$arcLabelsSkipAng = _ref.arcLabelsSkipAngle, | ||
| arcLabelsSkipAngle = _ref$arcLabelsSkipAng === void 0 ? defaultProps.arcLabelsSkipAngle : _ref$arcLabelsSkipAng, | ||
| _ref$arcLabelsTextCol = _ref.arcLabelsTextColor, | ||
| arcLabelsTextColor = _ref$arcLabelsTextCol === void 0 ? defaultProps.arcLabelsTextColor : _ref$arcLabelsTextCol, | ||
| _ref$arcLabelsRadiusO = _ref.arcLabelsRadiusOffset, | ||
| arcLabelsRadiusOffset = _ref$arcLabelsRadiusO === void 0 ? defaultProps.arcLabelsRadiusOffset : _ref$arcLabelsRadiusO, | ||
| arcLabelsComponent = _ref.arcLabelsComponent, | ||
| _ref$enableArcLinkLab = _ref.enableArcLinkLabels, | ||
| enableArcLinkLabels = _ref$enableArcLinkLab === void 0 ? defaultProps.enableArcLinkLabels : _ref$enableArcLinkLab, | ||
| _ref$arcLinkLabel = _ref.arcLinkLabel, | ||
| arcLinkLabel = _ref$arcLinkLabel === void 0 ? defaultProps.arcLinkLabel : _ref$arcLinkLabel, | ||
| _ref$arcLinkLabelsSki = _ref.arcLinkLabelsSkipAngle, | ||
| arcLinkLabelsSkipAngle = _ref$arcLinkLabelsSki === void 0 ? defaultProps.arcLinkLabelsSkipAngle : _ref$arcLinkLabelsSki, | ||
| _ref$arcLinkLabelsOff = _ref.arcLinkLabelsOffset, | ||
| arcLinkLabelsOffset = _ref$arcLinkLabelsOff === void 0 ? defaultProps.arcLinkLabelsOffset : _ref$arcLinkLabelsOff, | ||
| _ref$arcLinkLabelsDia = _ref.arcLinkLabelsDiagonalLength, | ||
| arcLinkLabelsDiagonalLength = _ref$arcLinkLabelsDia === void 0 ? defaultProps.arcLinkLabelsDiagonalLength : _ref$arcLinkLabelsDia, | ||
| _ref$arcLinkLabelsStr = _ref.arcLinkLabelsStraightLength, | ||
| arcLinkLabelsStraightLength = _ref$arcLinkLabelsStr === void 0 ? defaultProps.arcLinkLabelsStraightLength : _ref$arcLinkLabelsStr, | ||
| _ref$arcLinkLabelsThi = _ref.arcLinkLabelsThickness, | ||
| arcLinkLabelsThickness = _ref$arcLinkLabelsThi === void 0 ? defaultProps.arcLinkLabelsThickness : _ref$arcLinkLabelsThi, | ||
| _ref$arcLinkLabelsTex = _ref.arcLinkLabelsTextOffset, | ||
| arcLinkLabelsTextOffset = _ref$arcLinkLabelsTex === void 0 ? defaultProps.arcLinkLabelsTextOffset : _ref$arcLinkLabelsTex, | ||
| _ref$arcLinkLabelsTex2 = _ref.arcLinkLabelsTextColor, | ||
| arcLinkLabelsTextColor = _ref$arcLinkLabelsTex2 === void 0 ? defaultProps.arcLinkLabelsTextColor : _ref$arcLinkLabelsTex2, | ||
| _ref$arcLinkLabelsCol = _ref.arcLinkLabelsColor, | ||
| arcLinkLabelsColor = _ref$arcLinkLabelsCol === void 0 ? defaultProps.arcLinkLabelsColor : _ref$arcLinkLabelsCol, | ||
| arcLinkLabelComponent = _ref.arcLinkLabelComponent, | ||
| _ref$defs = _ref.defs, | ||
| defs = _ref$defs === void 0 ? defaultProps.defs : _ref$defs, | ||
| _ref$fill = _ref.fill, | ||
| fill = _ref$fill === void 0 ? defaultProps.fill : _ref$fill, | ||
| _ref$isInteractive = _ref.isInteractive, | ||
| isInteractive = _ref$isInteractive === void 0 ? defaultProps.isInteractive : _ref$isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| _ref$tooltip = _ref.tooltip, | ||
| tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip, | ||
| _ref$transitionMode = _ref.transitionMode, | ||
| transitionMode = _ref$transitionMode === void 0 ? defaultProps.transitionMode : _ref$transitionMode, | ||
| _ref$legends = _ref.legends, | ||
| legends = _ref$legends === void 0 ? defaultProps.legends : _ref$legends, | ||
| _ref$role = _ref.role, | ||
| role = _ref$role === void 0 ? defaultProps.role : _ref$role; | ||
| var _useDimensions = core.useDimensions(width, height, partialMargin), | ||
| outerWidth = _useDimensions.outerWidth, | ||
| outerHeight = _useDimensions.outerHeight, | ||
| margin = _useDimensions.margin, | ||
| innerWidth = _useDimensions.innerWidth, | ||
| innerHeight = _useDimensions.innerHeight; | ||
| var normalizedData = useNormalizedData({ | ||
| data: data, | ||
| id: id, | ||
| value: value, | ||
| valueFormat: valueFormat, | ||
| colors: colors | ||
| }); | ||
| var _usePieFromBox = usePieFromBox({ | ||
| data: normalizedData, | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| fit: fit, | ||
| innerRadius: innerRadiusRatio, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| cornerRadius: cornerRadius, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset: activeOuterRadiusOffset | ||
| }), | ||
| dataWithArc = _usePieFromBox.dataWithArc, | ||
| legendData = _usePieFromBox.legendData, | ||
| arcGenerator = _usePieFromBox.arcGenerator, | ||
| centerX = _usePieFromBox.centerX, | ||
| centerY = _usePieFromBox.centerY, | ||
| radius = _usePieFromBox.radius, | ||
| innerRadius = _usePieFromBox.innerRadius, | ||
| setActiveId = _usePieFromBox.setActiveId, | ||
| toggleSerie = _usePieFromBox.toggleSerie; | ||
| var boundDefs = core.bindDefs(defs, dataWithArc, fill); | ||
| var layerById = { | ||
| arcLinkLabels: null, | ||
| arcs: null, | ||
| arcLabels: null, | ||
| legends: null | ||
| }; | ||
| if (enableArcLinkLabels && layers.includes('arcLinkLabels')) { | ||
| layerById.arcLinkLabels = jsxRuntime.jsx(arcs.ArcLinkLabelsLayer, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| label: arcLinkLabel, | ||
| skipAngle: arcLinkLabelsSkipAngle, | ||
| offset: arcLinkLabelsOffset, | ||
| diagonalLength: arcLinkLabelsDiagonalLength, | ||
| straightLength: arcLinkLabelsStraightLength, | ||
| strokeWidth: arcLinkLabelsThickness, | ||
| textOffset: arcLinkLabelsTextOffset, | ||
| textColor: arcLinkLabelsTextColor, | ||
| linkColor: arcLinkLabelsColor, | ||
| component: arcLinkLabelComponent | ||
| }, "arcLinkLabels"); | ||
| } | ||
| if (layers.includes('arcs')) { | ||
| layerById.arcs = jsxRuntime.jsx(Arcs, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| borderWidth: borderWidth, | ||
| borderColor: borderColor, | ||
| isInteractive: isInteractive, | ||
| onClick: onClick, | ||
| onMouseEnter: onMouseEnter, | ||
| onMouseMove: onMouseMove, | ||
| onMouseLeave: onMouseLeave, | ||
| setActiveId: setActiveId, | ||
| tooltip: tooltip, | ||
| transitionMode: transitionMode | ||
| }, "arcs"); | ||
| } | ||
| if (enableArcLabels && layers.includes('arcLabels')) { | ||
| layerById.arcLabels = jsxRuntime.jsx(arcs.ArcLabelsLayer, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| label: arcLabel, | ||
| radiusOffset: arcLabelsRadiusOffset, | ||
| skipAngle: arcLabelsSkipAngle, | ||
| textColor: arcLabelsTextColor, | ||
| transitionMode: transitionMode, | ||
| component: arcLabelsComponent | ||
| }, "arcLabels"); | ||
| } | ||
| if (legends.length > 0 && layers.includes('legends')) { | ||
| layerById.legends = jsxRuntime.jsx(PieLegends, { | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| data: legendData, | ||
| legends: legends, | ||
| toggleSerie: toggleSerie | ||
| }, "legends"); | ||
| } | ||
| var layerContext = usePieLayerContext({ | ||
| dataWithArc: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius | ||
| }); | ||
| return jsxRuntime.jsx(core.SvgWrapper, { | ||
| width: outerWidth, | ||
| height: outerHeight, | ||
| margin: margin, | ||
| defs: boundDefs, | ||
| role: role, | ||
| children: layers.map(function (layer, i) { | ||
| if (layerById[layer] !== undefined) { | ||
| return layerById[layer]; | ||
| } | ||
| if (typeof layer === 'function') { | ||
| return jsxRuntime.jsx(react.Fragment, { | ||
| children: react.createElement(layer, layerContext) | ||
| }, i); | ||
| } | ||
| return null; | ||
| }) | ||
| }); | ||
| }; | ||
| var Pie = function Pie(_ref2) { | ||
| var _ref2$isInteractive = _ref2.isInteractive, | ||
| isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive, | ||
| _ref2$animate = _ref2.animate, | ||
| animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate, | ||
| _ref2$motionConfig = _ref2.motionConfig, | ||
| motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig, | ||
| theme = _ref2.theme, | ||
| renderWrapper = _ref2.renderWrapper, | ||
| otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]); | ||
| return jsxRuntime.jsx(core.Container, { | ||
| animate: animate, | ||
| isInteractive: isInteractive, | ||
| motionConfig: motionConfig, | ||
| renderWrapper: renderWrapper, | ||
| theme: theme, | ||
| children: jsxRuntime.jsx(InnerPie, _objectSpread2({ | ||
| isInteractive: isInteractive | ||
| }, otherProps)) | ||
| }); | ||
| }; | ||
| var ResponsivePie = function ResponsivePie(props) { | ||
| return jsxRuntime.jsx(core.ResponsiveWrapper, { | ||
| children: function children(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height; | ||
| return jsxRuntime.jsx(Pie, _objectSpread2({ | ||
| width: width, | ||
| height: height | ||
| }, props)); | ||
| } | ||
| }); | ||
| }; | ||
| var InnerPieCanvas = function InnerPieCanvas(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$sortByValue = _ref.sortByValue, | ||
| sortByValue = _ref$sortByValue === void 0 ? defaultProps.sortByValue : _ref$sortByValue, | ||
| _ref$startAngle = _ref.startAngle, | ||
| startAngle = _ref$startAngle === void 0 ? defaultProps.startAngle : _ref$startAngle, | ||
| _ref$endAngle = _ref.endAngle, | ||
| endAngle = _ref$endAngle === void 0 ? defaultProps.endAngle : _ref$endAngle, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? defaultProps.padAngle : _ref$padAngle, | ||
| _ref$fit = _ref.fit, | ||
| fit = _ref$fit === void 0 ? defaultProps.fit : _ref$fit, | ||
| _ref$innerRadius = _ref.innerRadius, | ||
| innerRadiusRatio = _ref$innerRadius === void 0 ? defaultProps.innerRadius : _ref$innerRadius, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref$cornerRadius, | ||
| _ref$activeInnerRadiu = _ref.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref$activeInnerRadiu === void 0 ? defaultProps.activeInnerRadiusOffset : _ref$activeInnerRadiu, | ||
| _ref$activeOuterRadiu = _ref.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref$activeOuterRadiu === void 0 ? defaultProps.activeOuterRadiusOffset : _ref$activeOuterRadiu, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| partialMargin = _ref.margin, | ||
| _ref$pixelRatio = _ref.pixelRatio, | ||
| pixelRatio = _ref$pixelRatio === void 0 ? 1 : _ref$pixelRatio, | ||
| _ref$colors = _ref.colors, | ||
| colors$1 = _ref$colors === void 0 ? defaultProps.colors : _ref$colors, | ||
| _ref$borderWidth = _ref.borderWidth, | ||
| borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth, | ||
| _ref$borderColor = _ref.borderColor, | ||
| borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor, | ||
| _ref$enableArcLabels = _ref.enableArcLabels, | ||
| enableArcLabels = _ref$enableArcLabels === void 0 ? defaultProps.enableArcLabels : _ref$enableArcLabels, | ||
| _ref$arcLabel = _ref.arcLabel, | ||
| arcLabel = _ref$arcLabel === void 0 ? defaultProps.arcLabel : _ref$arcLabel, | ||
| _ref$arcLabelsSkipAng = _ref.arcLabelsSkipAngle, | ||
| arcLabelsSkipAngle = _ref$arcLabelsSkipAng === void 0 ? defaultProps.arcLabelsSkipAngle : _ref$arcLabelsSkipAng, | ||
| _ref$arcLabelsTextCol = _ref.arcLabelsTextColor, | ||
| arcLabelsTextColor = _ref$arcLabelsTextCol === void 0 ? defaultProps.arcLabelsTextColor : _ref$arcLabelsTextCol, | ||
| _ref$arcLabelsRadiusO = _ref.arcLabelsRadiusOffset, | ||
| arcLabelsRadiusOffset = _ref$arcLabelsRadiusO === void 0 ? defaultProps.arcLabelsRadiusOffset : _ref$arcLabelsRadiusO, | ||
| _ref$enableArcLinkLab = _ref.enableArcLinkLabels, | ||
| enableArcLinkLabels = _ref$enableArcLinkLab === void 0 ? defaultProps.enableArcLinkLabels : _ref$enableArcLinkLab, | ||
| _ref$arcLinkLabel = _ref.arcLinkLabel, | ||
| arcLinkLabel = _ref$arcLinkLabel === void 0 ? defaultProps.arcLinkLabel : _ref$arcLinkLabel, | ||
| _ref$arcLinkLabelsSki = _ref.arcLinkLabelsSkipAngle, | ||
| arcLinkLabelsSkipAngle = _ref$arcLinkLabelsSki === void 0 ? defaultProps.arcLinkLabelsSkipAngle : _ref$arcLinkLabelsSki, | ||
| _ref$arcLinkLabelsOff = _ref.arcLinkLabelsOffset, | ||
| arcLinkLabelsOffset = _ref$arcLinkLabelsOff === void 0 ? defaultProps.arcLinkLabelsOffset : _ref$arcLinkLabelsOff, | ||
| _ref$arcLinkLabelsDia = _ref.arcLinkLabelsDiagonalLength, | ||
| arcLinkLabelsDiagonalLength = _ref$arcLinkLabelsDia === void 0 ? defaultProps.arcLinkLabelsDiagonalLength : _ref$arcLinkLabelsDia, | ||
| _ref$arcLinkLabelsStr = _ref.arcLinkLabelsStraightLength, | ||
| arcLinkLabelsStraightLength = _ref$arcLinkLabelsStr === void 0 ? defaultProps.arcLinkLabelsStraightLength : _ref$arcLinkLabelsStr, | ||
| _ref$arcLinkLabelsThi = _ref.arcLinkLabelsThickness, | ||
| arcLinkLabelsThickness = _ref$arcLinkLabelsThi === void 0 ? defaultProps.arcLinkLabelsThickness : _ref$arcLinkLabelsThi, | ||
| _ref$arcLinkLabelsTex = _ref.arcLinkLabelsTextOffset, | ||
| arcLinkLabelsTextOffset = _ref$arcLinkLabelsTex === void 0 ? defaultProps.arcLinkLabelsTextOffset : _ref$arcLinkLabelsTex, | ||
| _ref$arcLinkLabelsTex2 = _ref.arcLinkLabelsTextColor, | ||
| arcLinkLabelsTextColor = _ref$arcLinkLabelsTex2 === void 0 ? defaultProps.arcLinkLabelsTextColor : _ref$arcLinkLabelsTex2, | ||
| _ref$arcLinkLabelsCol = _ref.arcLinkLabelsColor, | ||
| arcLinkLabelsColor = _ref$arcLinkLabelsCol === void 0 ? defaultProps.arcLinkLabelsColor : _ref$arcLinkLabelsCol, | ||
| _ref$isInteractive = _ref.isInteractive, | ||
| isInteractive = _ref$isInteractive === void 0 ? defaultProps.isInteractive : _ref$isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseMove = _ref.onMouseMove, | ||
| _ref$tooltip = _ref.tooltip, | ||
| tooltip$1 = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip, | ||
| _ref$legends = _ref.legends, | ||
| legends$1 = _ref$legends === void 0 ? defaultProps.legends : _ref$legends; | ||
| var canvasEl = react.useRef(null); | ||
| var theme = core.useTheme(); | ||
| var _useDimensions = core.useDimensions(width, height, partialMargin), | ||
| margin = _useDimensions.margin, | ||
| innerWidth = _useDimensions.innerWidth, | ||
| innerHeight = _useDimensions.innerHeight, | ||
| outerWidth = _useDimensions.outerWidth, | ||
| outerHeight = _useDimensions.outerHeight; | ||
| var normalizedData = useNormalizedData({ | ||
| data: data, | ||
| id: id, | ||
| value: value, | ||
| valueFormat: valueFormat, | ||
| colors: colors$1 | ||
| }); | ||
| var _usePieFromBox = usePieFromBox({ | ||
| data: normalizedData, | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| fit: fit, | ||
| innerRadius: innerRadiusRatio, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| cornerRadius: cornerRadius, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset: activeOuterRadiusOffset | ||
| }), | ||
| dataWithArc = _usePieFromBox.dataWithArc, | ||
| arcGenerator = _usePieFromBox.arcGenerator, | ||
| centerX = _usePieFromBox.centerX, | ||
| centerY = _usePieFromBox.centerY, | ||
| radius = _usePieFromBox.radius, | ||
| innerRadius = _usePieFromBox.innerRadius, | ||
| setActiveId = _usePieFromBox.setActiveId; | ||
| var getBorderColor = colors.useInheritedColor(borderColor, theme); | ||
| var arcLabels = arcs.useArcLabels({ | ||
| data: dataWithArc, | ||
| label: arcLabel, | ||
| skipAngle: arcLabelsSkipAngle, | ||
| offset: arcLabelsRadiusOffset, | ||
| textColor: arcLabelsTextColor | ||
| }); | ||
| var arcLinkLabels = arcs.useArcLinkLabels({ | ||
| data: dataWithArc, | ||
| skipAngle: arcLinkLabelsSkipAngle, | ||
| offset: arcLinkLabelsOffset, | ||
| diagonalLength: arcLinkLabelsDiagonalLength, | ||
| straightLength: arcLinkLabelsStraightLength, | ||
| label: arcLinkLabel, | ||
| linkColor: arcLinkLabelsColor, | ||
| textOffset: arcLinkLabelsTextOffset, | ||
| textColor: arcLinkLabelsTextColor | ||
| }); | ||
| react.useEffect(function () { | ||
| if (!canvasEl.current) return; | ||
| canvasEl.current.width = outerWidth * pixelRatio; | ||
| canvasEl.current.height = outerHeight * pixelRatio; | ||
| var ctx = canvasEl.current.getContext('2d'); | ||
| ctx.scale(pixelRatio, pixelRatio); | ||
| ctx.fillStyle = theme.background; | ||
| ctx.fillRect(0, 0, outerWidth, outerHeight); | ||
| ctx.save(); | ||
| ctx.translate(margin.left, margin.top); | ||
| arcGenerator.context(ctx); | ||
| ctx.save(); | ||
| ctx.translate(centerX, centerY); | ||
| dataWithArc.forEach(function (arc) { | ||
| ctx.beginPath(); | ||
| ctx.fillStyle = arc.color; | ||
| ctx.strokeStyle = getBorderColor(arc); | ||
| ctx.lineWidth = borderWidth; | ||
| arcGenerator(arc.arc); | ||
| ctx.fill(); | ||
| if (borderWidth > 0) { | ||
| ctx.stroke(); | ||
| } | ||
| }); | ||
| if (enableArcLinkLabels === true) { | ||
| arcs.drawCanvasArcLinkLabels(ctx, arcLinkLabels, theme, arcLinkLabelsThickness); | ||
| } | ||
| if (enableArcLabels === true) { | ||
| arcs.drawCanvasArcLabels(ctx, arcLabels, theme); | ||
| } | ||
| ctx.restore(); | ||
| legends$1.forEach(function (legend) { | ||
| legends.renderLegendToCanvas(ctx, _objectSpread2(_objectSpread2({}, legend), {}, { | ||
| data: dataWithArc, | ||
| containerWidth: innerWidth, | ||
| containerHeight: innerHeight, | ||
| theme: theme | ||
| })); | ||
| }); | ||
| }, [canvasEl, innerWidth, innerHeight, outerWidth, outerHeight, margin.top, margin.left, pixelRatio, centerX, centerY, arcGenerator, dataWithArc, getBorderColor, enableArcLabels, arcLabels, enableArcLinkLabels, arcLinkLabels, arcLinkLabelsThickness, legends$1, theme]); | ||
| var arcs$1 = react.useMemo(function () { | ||
| return dataWithArc.map(function (datum) { | ||
| return _objectSpread2({ | ||
| id: datum.id | ||
| }, datum.arc); | ||
| }); | ||
| }, [dataWithArc]); | ||
| var getArcFromMouse = function getArcFromMouse(event) { | ||
| if (!canvasEl.current) return null; | ||
| var _getRelativeCursor = core.getRelativeCursor(canvasEl.current, event), | ||
| _getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2), | ||
| x = _getRelativeCursor2[0], | ||
| y = _getRelativeCursor2[1]; | ||
| var hoveredArc = arcs.findArcUnderCursor(margin.left + centerX, margin.top + centerY, radius, innerRadius, arcs$1, x, y); | ||
| if (!hoveredArc) return null; | ||
| return dataWithArc.find(function (datum) { | ||
| return datum.id === hoveredArc.id; | ||
| }); | ||
| }; | ||
| var _useTooltip = tooltip.useTooltip(), | ||
| showTooltipFromEvent = _useTooltip.showTooltipFromEvent, | ||
| hideTooltip = _useTooltip.hideTooltip; | ||
| var handleMouseHover = function handleMouseHover(event) { | ||
| var datum = getArcFromMouse(event); | ||
| if (datum) { | ||
| onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| setActiveId(datum.id); | ||
| showTooltipFromEvent(react.createElement(tooltip$1, { | ||
| datum: datum | ||
| }), event); | ||
| } else { | ||
| setActiveId(null); | ||
| hideTooltip(); | ||
| } | ||
| }; | ||
| var handleMouseLeave = function handleMouseLeave() { | ||
| hideTooltip(); | ||
| }; | ||
| var handleClick = function handleClick(event) { | ||
| if (!onClick) return; | ||
| var arc = getArcFromMouse(event); | ||
| if (arc) { | ||
| onClick(arc, event); | ||
| } | ||
| }; | ||
| return jsxRuntime.jsx("canvas", { | ||
| ref: canvasEl, | ||
| width: outerWidth * pixelRatio, | ||
| height: outerHeight * pixelRatio, | ||
| style: { | ||
| width: outerWidth, | ||
| height: outerHeight, | ||
| cursor: isInteractive ? 'auto' : 'normal' | ||
| }, | ||
| onMouseEnter: isInteractive ? handleMouseHover : undefined, | ||
| onMouseMove: isInteractive ? handleMouseHover : undefined, | ||
| onMouseLeave: isInteractive ? handleMouseLeave : undefined, | ||
| onClick: isInteractive ? handleClick : undefined | ||
| }); | ||
| }; | ||
| var PieCanvas = function PieCanvas(_ref2) { | ||
| var _ref2$isInteractive = _ref2.isInteractive, | ||
| isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive, | ||
| theme = _ref2.theme, | ||
| renderWrapper = _ref2.renderWrapper, | ||
| otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "theme", "renderWrapper"]); | ||
| return jsxRuntime.jsx(core.Container, { | ||
| isInteractive: isInteractive, | ||
| renderWrapper: renderWrapper, | ||
| theme: theme, | ||
| children: jsxRuntime.jsx(InnerPieCanvas, _objectSpread2({ | ||
| isInteractive: isInteractive | ||
| }, otherProps)) | ||
| }); | ||
| }; | ||
| var ResponsivePieCanvas = function ResponsivePieCanvas(props) { | ||
| return jsxRuntime.jsx(core.ResponsiveWrapper, { | ||
| children: function children(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height; | ||
| return jsxRuntime.jsx(PieCanvas, _objectSpread2({ | ||
| width: width, | ||
| height: height | ||
| }, props)); | ||
| } | ||
| }); | ||
| }; | ||
| exports.Pie = Pie; | ||
| exports.PieCanvas = PieCanvas; | ||
| exports.ResponsivePie = ResponsivePie; | ||
| exports.ResponsivePieCanvas = ResponsivePieCanvas; | ||
| exports.defaultProps = defaultProps; | ||
| exports.useNormalizedData = useNormalizedData; | ||
| exports.usePie = usePie; | ||
| exports.usePieArcs = usePieArcs; | ||
| exports.usePieFromBox = usePieFromBox; | ||
| exports.usePieLayerContext = usePieLayerContext; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),i=require("@nivo/core"),r=require("@nivo/arcs"),n=require("@nivo/legends"),t=require("react/jsx-runtime"),a=require("d3-shape"),o=require("@nivo/colors"),s=require("@nivo/tooltip");function d(){return d=Object.assign||function(e){for(var i=1;i<arguments.length;i++){var r=arguments[i];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},d.apply(this,arguments)}function l(e,i){if(null==e)return{};var r,n,t={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],i.indexOf(r)>=0||(t[r]=e[r]);return t}var u,c=function(e){var i=e.width,r=e.height,a=e.legends,o=e.data,s=e.toggleSerie;return t.jsx(t.Fragment,{children:a.map((function(e,a){var l;return t.jsx(n.BoxLegendSvg,d({},e,{containerWidth:i,containerHeight:r,data:null!=(l=e.data)?l:o,toggleSerie:e.toggleSerie?s:void 0}),a)}))})},v={id:"id",value:"value",sortByValue:!1,innerRadius:0,padAngle:0,cornerRadius:0,layers:["arcLinkLabels","arcs","arcLabels","legends"],startAngle:0,endAngle:360,fit:!0,activeInnerRadiusOffset:0,activeOuterRadiusOffset:0,borderWidth:0,borderColor:{from:"color",modifiers:[["darker",1]]},enableArcLabels:!0,arcLabel:"formattedValue",arcLabelsSkipAngle:0,arcLabelsRadiusOffset:.5,arcLabelsTextColor:{theme:"labels.text.fill"},enableArcLinkLabels:!0,arcLinkLabel:"id",arcLinkLabelsSkipAngle:0,arcLinkLabelsOffset:0,arcLinkLabelsDiagonalLength:16,arcLinkLabelsStraightLength:24,arcLinkLabelsThickness:1,arcLinkLabelsTextOffset:6,arcLinkLabelsTextColor:{theme:"labels.text.fill"},arcLinkLabelsColor:{theme:"axis.ticks.line.stroke"},colors:{scheme:"nivo"},defs:[],fill:[],isInteractive:!0,animate:!0,motionConfig:"gentle",transitionMode:"innerRadius",tooltip:function(e){var i=e.datum;return t.jsx(s.BasicTooltip,{id:i.id,value:i.formattedValue,enableChip:!0,color:i.color})},legends:[],role:"img",pixelRatio:"undefined"!=typeof window&&null!=(u=window.devicePixelRatio)?u:1},f=["points"],g=function(r){var n=r.data,t=r.id,a=void 0===t?v.id:t,s=r.value,l=void 0===s?v.value:s,u=r.valueFormat,c=r.colors,f=void 0===c?v.colors:c,g=i.usePropertyAccessor(a),L=i.usePropertyAccessor(l),h=i.useValueFormatter(u),b=o.useOrdinalColorScale(f,"id");return e.useMemo((function(){return n.map((function(e){var i,r=g(e),n=L(e),t={id:r,label:null!=(i=e.label)?i:r,hidden:!1,value:n,formattedValue:h(n),data:e};return d({},t,{color:b(t)})}))}),[n,g,L,h,b])},L=function(r){var n=r.data,t=r.startAngle,o=r.endAngle,s=r.innerRadius,l=r.outerRadius,u=r.padAngle,c=r.sortByValue,v=r.activeId,f=r.activeInnerRadiusOffset,g=r.activeOuterRadiusOffset,L=r.hiddenIds,h=e.useMemo((function(){var e=a.pie().value((function(e){return e.value})).startAngle(i.degreesToRadians(t)).endAngle(i.degreesToRadians(o)).padAngle(i.degreesToRadians(u));return c||e.sortValues(null),e}),[t,o,u,c]);return e.useMemo((function(){var e=n.filter((function(e){return!L.includes(e.id)}));return{dataWithArc:h(e).map((function(e){var r=Math.abs(e.endAngle-e.startAngle);return d({},e.data,{arc:{index:e.index,startAngle:e.startAngle,endAngle:e.endAngle,innerRadius:v===e.data.id?s-f:s,outerRadius:v===e.data.id?l+g:l,thickness:l-s,padAngle:e.padAngle,angle:r,angleDeg:i.radiansToDegrees(r)}})})),legendData:n.map((function(e){return d({},e,{hidden:L.includes(e.id)})}))}}),[h,n,L,v,s,f,l,g])},h=function(n){var t=n.data,a=n.width,o=n.height,s=n.innerRadius,u=void 0===s?v.innerRadius:s,c=n.startAngle,g=void 0===c?v.startAngle:c,h=n.endAngle,b=void 0===h?v.endAngle:h,p=n.padAngle,A=void 0===p?v.padAngle:p,k=n.sortByValue,R=void 0===k?v.sortByValue:k,m=n.cornerRadius,x=void 0===m?v.cornerRadius:m,O=n.fit,C=void 0===O?v.fit:O,I=n.activeInnerRadiusOffset,M=void 0===I?v.activeInnerRadiusOffset:I,y=n.activeOuterRadiusOffset,T=void 0===y?v.activeOuterRadiusOffset:y,S=e.useState(null),W=S[0],w=S[1],j=e.useState([]),B=j[0],V=j[1],P=e.useMemo((function(){var e,i=Math.min(a,o)/2,n=i*Math.min(u,1),t=a/2,s=o/2;if(C){var d=r.computeArcBoundingBox(t,s,i,g-90,b-90),c=d.points,v=l(d,f),L=Math.min(a/v.width,o/v.height),h={width:v.width*L,height:v.height*L};h.x=(a-h.width)/2,h.y=(o-h.height)/2,t=(t-v.x)/v.width*v.width*L+h.x,s=(s-v.y)/v.height*v.height*L+h.y,e={box:v,ratio:L,points:c},i*=L,n*=L}return{centerX:t,centerY:s,radius:i,innerRadius:n,debug:e}}),[a,o,u,g,b,C,x]),E=L({data:t,startAngle:g,endAngle:b,innerRadius:P.innerRadius,outerRadius:P.radius,padAngle:A,sortByValue:R,activeId:W,activeInnerRadiusOffset:M,activeOuterRadiusOffset:T,hiddenIds:B}),D=e.useCallback((function(e){V((function(i){return i.indexOf(e)>-1?i.filter((function(i){return i!==e})):[].concat(i,[e])}))}),[]);return d({arcGenerator:r.useArcGenerator({cornerRadius:x,padAngle:i.degreesToRadians(A)}),setActiveId:w,toggleSerie:D},E,P)},b=function(i){var r=i.dataWithArc,n=i.arcGenerator,t=i.centerX,a=i.centerY,o=i.radius,s=i.innerRadius;return e.useMemo((function(){return{dataWithArc:r,arcGenerator:n,centerX:t,centerY:a,radius:o,innerRadius:s}}),[r,n,t,a,o,s])},p=function(i){var n=i.center,a=i.data,o=i.arcGenerator,d=i.borderWidth,l=i.borderColor,u=i.isInteractive,c=i.onClick,v=i.onMouseEnter,f=i.onMouseMove,g=i.onMouseLeave,L=i.setActiveId,h=i.tooltip,b=i.transitionMode,p=s.useTooltip(),A=p.showTooltipFromEvent,k=p.hideTooltip,R=e.useMemo((function(){if(u)return function(e,i){null==c||c(e,i)}}),[u,c]),m=e.useMemo((function(){if(u)return function(i,r){A(e.createElement(h,{datum:i}),r),L(i.id),null==v||v(i,r)}}),[u,A,L,v]),x=e.useMemo((function(){if(u)return function(i,r){A(e.createElement(h,{datum:i}),r),null==f||f(i,r)}}),[u,A,f]),O=e.useMemo((function(){if(u)return function(e,i){k(),L(null),null==g||g(e,i)}}),[u,k,L,g]);return t.jsx(r.ArcsLayer,{center:n,data:a,arcGenerator:o,borderWidth:d,borderColor:l,transitionMode:b,onClick:R,onMouseEnter:m,onMouseMove:x,onMouseLeave:O})},A=["isInteractive","animate","motionConfig","theme","renderWrapper"],k=function(n){var a=n.data,o=n.id,s=void 0===o?v.id:o,d=n.value,l=void 0===d?v.value:d,u=n.valueFormat,f=n.sortByValue,L=void 0===f?v.sortByValue:f,A=n.layers,k=void 0===A?v.layers:A,R=n.startAngle,m=void 0===R?v.startAngle:R,x=n.endAngle,O=void 0===x?v.endAngle:x,C=n.padAngle,I=void 0===C?v.padAngle:C,M=n.fit,y=void 0===M?v.fit:M,T=n.innerRadius,S=void 0===T?v.innerRadius:T,W=n.cornerRadius,w=void 0===W?v.cornerRadius:W,j=n.activeInnerRadiusOffset,B=void 0===j?v.activeInnerRadiusOffset:j,V=n.activeOuterRadiusOffset,P=void 0===V?v.activeOuterRadiusOffset:V,E=n.width,D=n.height,G=n.margin,F=n.colors,q=void 0===F?v.colors:F,H=n.borderWidth,X=void 0===H?v.borderWidth:H,Y=n.borderColor,_=void 0===Y?v.borderColor:Y,z=n.enableArcLabels,N=void 0===z?v.enableArcLabels:z,U=n.arcLabel,J=void 0===U?v.arcLabel:U,K=n.arcLabelsSkipAngle,Q=void 0===K?v.arcLabelsSkipAngle:K,Z=n.arcLabelsTextColor,$=void 0===Z?v.arcLabelsTextColor:Z,ee=n.arcLabelsRadiusOffset,ie=void 0===ee?v.arcLabelsRadiusOffset:ee,re=n.arcLabelsComponent,ne=n.enableArcLinkLabels,te=void 0===ne?v.enableArcLinkLabels:ne,ae=n.arcLinkLabel,oe=void 0===ae?v.arcLinkLabel:ae,se=n.arcLinkLabelsSkipAngle,de=void 0===se?v.arcLinkLabelsSkipAngle:se,le=n.arcLinkLabelsOffset,ue=void 0===le?v.arcLinkLabelsOffset:le,ce=n.arcLinkLabelsDiagonalLength,ve=void 0===ce?v.arcLinkLabelsDiagonalLength:ce,fe=n.arcLinkLabelsStraightLength,ge=void 0===fe?v.arcLinkLabelsStraightLength:fe,Le=n.arcLinkLabelsThickness,he=void 0===Le?v.arcLinkLabelsThickness:Le,be=n.arcLinkLabelsTextOffset,pe=void 0===be?v.arcLinkLabelsTextOffset:be,Ae=n.arcLinkLabelsTextColor,ke=void 0===Ae?v.arcLinkLabelsTextColor:Ae,Re=n.arcLinkLabelsColor,me=void 0===Re?v.arcLinkLabelsColor:Re,xe=n.arcLinkLabelComponent,Oe=n.defs,Ce=void 0===Oe?v.defs:Oe,Ie=n.fill,Me=void 0===Ie?v.fill:Ie,ye=n.isInteractive,Te=void 0===ye?v.isInteractive:ye,Se=n.onClick,We=n.onMouseEnter,we=n.onMouseMove,je=n.onMouseLeave,Be=n.tooltip,Ve=void 0===Be?v.tooltip:Be,Pe=n.transitionMode,Ee=void 0===Pe?v.transitionMode:Pe,De=n.legends,Ge=void 0===De?v.legends:De,Fe=n.role,qe=void 0===Fe?v.role:Fe,He=i.useDimensions(E,D,G),Xe=He.outerWidth,Ye=He.outerHeight,_e=He.margin,ze=He.innerWidth,Ne=He.innerHeight,Ue=g({data:a,id:s,value:l,valueFormat:u,colors:q}),Je=h({data:Ue,width:ze,height:Ne,fit:y,innerRadius:S,startAngle:m,endAngle:O,padAngle:I,sortByValue:L,cornerRadius:w,activeInnerRadiusOffset:B,activeOuterRadiusOffset:P}),Ke=Je.dataWithArc,Qe=Je.legendData,Ze=Je.arcGenerator,$e=Je.centerX,ei=Je.centerY,ii=Je.radius,ri=Je.innerRadius,ni=Je.setActiveId,ti=Je.toggleSerie,ai=i.bindDefs(Ce,Ke,Me),oi={arcLinkLabels:null,arcs:null,arcLabels:null,legends:null};te&&k.includes("arcLinkLabels")&&(oi.arcLinkLabels=t.jsx(r.ArcLinkLabelsLayer,{center:[$e,ei],data:Ke,label:oe,skipAngle:de,offset:ue,diagonalLength:ve,straightLength:ge,strokeWidth:he,textOffset:pe,textColor:ke,linkColor:me,component:xe},"arcLinkLabels")),k.includes("arcs")&&(oi.arcs=t.jsx(p,{center:[$e,ei],data:Ke,arcGenerator:Ze,borderWidth:X,borderColor:_,isInteractive:Te,onClick:Se,onMouseEnter:We,onMouseMove:we,onMouseLeave:je,setActiveId:ni,tooltip:Ve,transitionMode:Ee},"arcs")),N&&k.includes("arcLabels")&&(oi.arcLabels=t.jsx(r.ArcLabelsLayer,{center:[$e,ei],data:Ke,label:J,radiusOffset:ie,skipAngle:Q,textColor:$,transitionMode:Ee,component:re},"arcLabels")),Ge.length>0&&k.includes("legends")&&(oi.legends=t.jsx(c,{width:ze,height:Ne,data:Qe,legends:Ge,toggleSerie:ti},"legends"));var si=b({dataWithArc:Ke,arcGenerator:Ze,centerX:$e,centerY:ei,radius:ii,innerRadius:ri});return t.jsx(i.SvgWrapper,{width:Xe,height:Ye,margin:_e,defs:ai,role:qe,children:k.map((function(i,r){return void 0!==oi[i]?oi[i]:"function"==typeof i?t.jsx(e.Fragment,{children:e.createElement(i,si)},r):null}))})},R=function(e){var r=e.isInteractive,n=void 0===r?v.isInteractive:r,a=e.animate,o=void 0===a?v.animate:a,s=e.motionConfig,u=void 0===s?v.motionConfig:s,c=e.theme,f=e.renderWrapper,g=l(e,A);return t.jsx(i.Container,{animate:o,isInteractive:n,motionConfig:u,renderWrapper:f,theme:c,children:t.jsx(k,d({isInteractive:n},g))})},m=["isInteractive","theme","renderWrapper"],x=function(a){var l=a.data,u=a.id,c=void 0===u?v.id:u,f=a.value,L=void 0===f?v.value:f,b=a.valueFormat,p=a.sortByValue,A=void 0===p?v.sortByValue:p,k=a.startAngle,R=void 0===k?v.startAngle:k,m=a.endAngle,x=void 0===m?v.endAngle:m,O=a.padAngle,C=void 0===O?v.padAngle:O,I=a.fit,M=void 0===I?v.fit:I,y=a.innerRadius,T=void 0===y?v.innerRadius:y,S=a.cornerRadius,W=void 0===S?v.cornerRadius:S,w=a.activeInnerRadiusOffset,j=void 0===w?v.activeInnerRadiusOffset:w,B=a.activeOuterRadiusOffset,V=void 0===B?v.activeOuterRadiusOffset:B,P=a.width,E=a.height,D=a.margin,G=a.pixelRatio,F=void 0===G?1:G,q=a.colors,H=void 0===q?v.colors:q,X=a.borderWidth,Y=void 0===X?v.borderWidth:X,_=a.borderColor,z=void 0===_?v.borderColor:_,N=a.enableArcLabels,U=void 0===N?v.enableArcLabels:N,J=a.arcLabel,K=void 0===J?v.arcLabel:J,Q=a.arcLabelsSkipAngle,Z=void 0===Q?v.arcLabelsSkipAngle:Q,$=a.arcLabelsTextColor,ee=void 0===$?v.arcLabelsTextColor:$,ie=a.arcLabelsRadiusOffset,re=void 0===ie?v.arcLabelsRadiusOffset:ie,ne=a.enableArcLinkLabels,te=void 0===ne?v.enableArcLinkLabels:ne,ae=a.arcLinkLabel,oe=void 0===ae?v.arcLinkLabel:ae,se=a.arcLinkLabelsSkipAngle,de=void 0===se?v.arcLinkLabelsSkipAngle:se,le=a.arcLinkLabelsOffset,ue=void 0===le?v.arcLinkLabelsOffset:le,ce=a.arcLinkLabelsDiagonalLength,ve=void 0===ce?v.arcLinkLabelsDiagonalLength:ce,fe=a.arcLinkLabelsStraightLength,ge=void 0===fe?v.arcLinkLabelsStraightLength:fe,Le=a.arcLinkLabelsThickness,he=void 0===Le?v.arcLinkLabelsThickness:Le,be=a.arcLinkLabelsTextOffset,pe=void 0===be?v.arcLinkLabelsTextOffset:be,Ae=a.arcLinkLabelsTextColor,ke=void 0===Ae?v.arcLinkLabelsTextColor:Ae,Re=a.arcLinkLabelsColor,me=void 0===Re?v.arcLinkLabelsColor:Re,xe=a.isInteractive,Oe=void 0===xe?v.isInteractive:xe,Ce=a.onClick,Ie=a.onMouseMove,Me=a.tooltip,ye=void 0===Me?v.tooltip:Me,Te=a.legends,Se=void 0===Te?v.legends:Te,We=e.useRef(null),we=i.useTheme(),je=i.useDimensions(P,E,D),Be=je.margin,Ve=je.innerWidth,Pe=je.innerHeight,Ee=je.outerWidth,De=je.outerHeight,Ge=g({data:l,id:c,value:L,valueFormat:b,colors:H}),Fe=h({data:Ge,width:Ve,height:Pe,fit:M,innerRadius:T,startAngle:R,endAngle:x,padAngle:C,sortByValue:A,cornerRadius:W,activeInnerRadiusOffset:j,activeOuterRadiusOffset:V}),qe=Fe.dataWithArc,He=Fe.arcGenerator,Xe=Fe.centerX,Ye=Fe.centerY,_e=Fe.radius,ze=Fe.innerRadius,Ne=Fe.setActiveId,Ue=o.useInheritedColor(z,we),Je=r.useArcLabels({data:qe,label:K,skipAngle:Z,offset:re,textColor:ee}),Ke=r.useArcLinkLabels({data:qe,skipAngle:de,offset:ue,diagonalLength:ve,straightLength:ge,label:oe,linkColor:me,textOffset:pe,textColor:ke});e.useEffect((function(){if(We.current){We.current.width=Ee*F,We.current.height=De*F;var e=We.current.getContext("2d");e.scale(F,F),e.fillStyle=we.background,e.fillRect(0,0,Ee,De),e.save(),e.translate(Be.left,Be.top),He.context(e),e.save(),e.translate(Xe,Ye),qe.forEach((function(i){e.beginPath(),e.fillStyle=i.color,e.strokeStyle=Ue(i),e.lineWidth=Y,He(i.arc),e.fill(),Y>0&&e.stroke()})),!0===te&&r.drawCanvasArcLinkLabels(e,Ke,we,he),!0===U&&r.drawCanvasArcLabels(e,Je,we),e.restore(),Se.forEach((function(i){n.renderLegendToCanvas(e,d({},i,{data:qe,containerWidth:Ve,containerHeight:Pe,theme:we}))}))}}),[We,Ve,Pe,Ee,De,Be.top,Be.left,F,Xe,Ye,He,qe,Ue,U,Je,te,Ke,he,Se,we]);var Qe=e.useMemo((function(){return qe.map((function(e){return d({id:e.id},e.arc)}))}),[qe]),Ze=function(e){if(!We.current)return null;var n=i.getRelativeCursor(We.current,e),t=n[0],a=n[1],o=r.findArcUnderCursor(Be.left+Xe,Be.top+Ye,_e,ze,Qe,t,a);return o?qe.find((function(e){return e.id===o.id})):null},$e=s.useTooltip(),ei=$e.showTooltipFromEvent,ii=$e.hideTooltip,ri=function(i){var r=Ze(i);r?(null==Ie||Ie(r,i),Ne(r.id),ei(e.createElement(ye,{datum:r}),i)):(Ne(null),ii())};return t.jsx("canvas",{ref:We,width:Ee*F,height:De*F,style:{width:Ee,height:De,cursor:Oe?"auto":"normal"},onMouseEnter:Oe?ri:void 0,onMouseMove:Oe?ri:void 0,onMouseLeave:Oe?function(){ii()}:void 0,onClick:Oe?function(e){if(Ce){var i=Ze(e);i&&Ce(i,e)}}:void 0})},O=function(e){var r=e.isInteractive,n=void 0===r?v.isInteractive:r,a=e.theme,o=e.renderWrapper,s=l(e,m);return t.jsx(i.Container,{isInteractive:n,renderWrapper:o,theme:a,children:t.jsx(x,d({isInteractive:n},s))})};exports.Pie=R,exports.PieCanvas=O,exports.ResponsivePie=function(e){return t.jsx(i.ResponsiveWrapper,{children:function(i){var r=i.width,n=i.height;return t.jsx(R,d({width:r,height:n},e))}})},exports.ResponsivePieCanvas=function(e){return t.jsx(i.ResponsiveWrapper,{children:function(i){var r=i.width,n=i.height;return t.jsx(O,d({width:r,height:n},e))}})},exports.defaultProps=v,exports.useNormalizedData=g,exports.usePie=function(n){var t=n.data,a=n.radius,o=n.innerRadius,s=n.startAngle,l=void 0===s?v.startAngle:s,u=n.endAngle,c=void 0===u?v.endAngle:u,f=n.padAngle,g=void 0===f?v.padAngle:f,h=n.sortByValue,b=void 0===h?v.sortByValue:h,p=n.cornerRadius,A=void 0===p?v.cornerRadius:p,k=n.activeInnerRadiusOffset,R=void 0===k?v.activeInnerRadiusOffset:k,m=n.activeOuterRadiusOffset,x=void 0===m?v.activeOuterRadiusOffset:m,O=e.useState(null),C=O[0],I=O[1],M=e.useState([]),y=M[0],T=M[1],S=L({data:t,startAngle:l,endAngle:c,innerRadius:o,outerRadius:a,padAngle:g,sortByValue:b,activeId:C,activeInnerRadiusOffset:R,activeOuterRadiusOffset:x,hiddenIds:y}),W=e.useCallback((function(e){T((function(i){return i.indexOf(e)>-1?i.filter((function(i){return i!==e})):[].concat(i,[e])}))}),[]);return d({},S,{arcGenerator:r.useArcGenerator({cornerRadius:A,padAngle:i.degreesToRadians(g)}),setActiveId:I,toggleSerie:W})},exports.usePieArcs=L,exports.usePieFromBox=h,exports.usePieLayerContext=b; | ||
| //# sourceMappingURL=nivo-pie.cjs.js.map |
@@ -1,1105 +0,2 @@ | ||
| import { useMemo, useState, useCallback, createElement, Fragment as Fragment$1, useRef, useEffect } from 'react'; | ||
| import { usePropertyAccessor, useValueFormatter, degreesToRadians, radiansToDegrees, Container, useDimensions, bindDefs, SvgWrapper, ResponsiveWrapper, useTheme, getRelativeCursor } from '@nivo/core'; | ||
| import { useArcGenerator, computeArcBoundingBox, ArcsLayer, ArcLinkLabelsLayer, ArcLabelsLayer, useArcLabels, useArcLinkLabels, drawCanvasArcLinkLabels, drawCanvasArcLabels, findArcUnderCursor } from '@nivo/arcs'; | ||
| import { BoxLegendSvg, renderLegendToCanvas } from '@nivo/legends'; | ||
| import { jsx, Fragment } from 'react/jsx-runtime'; | ||
| import { pie } from 'd3-shape'; | ||
| import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'; | ||
| import { BasicTooltip, useTooltip } from '@nivo/tooltip'; | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| if (enumerableOnly) symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| }); | ||
| keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| if (i % 2) { | ||
| ownKeys(Object(source), true).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } else if (Object.getOwnPropertyDescriptors) { | ||
| Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
| } else { | ||
| ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = {}; | ||
| var sourceKeys = Object.keys(source); | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
| key = sourceKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutProperties(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = _objectWithoutPropertiesLoose(source, excluded); | ||
| var key, i; | ||
| if (Object.getOwnPropertySymbols) { | ||
| var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
| for (i = 0; i < sourceSymbolKeys.length; i++) { | ||
| key = sourceSymbolKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| var PieLegends = function PieLegends(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height, | ||
| legends = _ref.legends, | ||
| data = _ref.data, | ||
| toggleSerie = _ref.toggleSerie; | ||
| return jsx(Fragment, { | ||
| children: legends.map(function (legend, i) { | ||
| var _legend$data; | ||
| return jsx(BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, { | ||
| containerWidth: width, | ||
| containerHeight: height, | ||
| data: (_legend$data = legend.data) !== null && _legend$data !== void 0 ? _legend$data : data, | ||
| toggleSerie: legend.toggleSerie ? toggleSerie : undefined | ||
| }), i); | ||
| }) | ||
| }); | ||
| }; | ||
| 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(o); | ||
| 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) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
| if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"] != null) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| function _slicedToArray(arr, i) { | ||
| return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); | ||
| } | ||
| var PieTooltip = function PieTooltip(_ref) { | ||
| var datum = _ref.datum; | ||
| return jsx(BasicTooltip, { | ||
| id: datum.id, | ||
| value: datum.formattedValue, | ||
| enableChip: true, | ||
| color: datum.color | ||
| }); | ||
| }; | ||
| var _window$devicePixelRa; | ||
| var defaultProps = { | ||
| id: 'id', | ||
| value: 'value', | ||
| sortByValue: false, | ||
| innerRadius: 0, | ||
| padAngle: 0, | ||
| cornerRadius: 0, | ||
| layers: ['arcLinkLabels', 'arcs', 'arcLabels', 'legends'], | ||
| startAngle: 0, | ||
| endAngle: 360, | ||
| fit: true, | ||
| activeInnerRadiusOffset: 0, | ||
| activeOuterRadiusOffset: 0, | ||
| borderWidth: 0, | ||
| borderColor: { | ||
| from: 'color', | ||
| modifiers: [['darker', 1]] | ||
| }, | ||
| enableArcLabels: true, | ||
| arcLabel: 'formattedValue', | ||
| arcLabelsSkipAngle: 0, | ||
| arcLabelsRadiusOffset: 0.5, | ||
| arcLabelsTextColor: { | ||
| theme: 'labels.text.fill' | ||
| }, | ||
| enableArcLinkLabels: true, | ||
| arcLinkLabel: 'id', | ||
| arcLinkLabelsSkipAngle: 0, | ||
| arcLinkLabelsOffset: 0, | ||
| arcLinkLabelsDiagonalLength: 16, | ||
| arcLinkLabelsStraightLength: 24, | ||
| arcLinkLabelsThickness: 1, | ||
| arcLinkLabelsTextOffset: 6, | ||
| arcLinkLabelsTextColor: { | ||
| theme: 'labels.text.fill' | ||
| }, | ||
| arcLinkLabelsColor: { | ||
| theme: 'axis.ticks.line.stroke' | ||
| }, | ||
| colors: { | ||
| scheme: 'nivo' | ||
| }, | ||
| defs: [], | ||
| fill: [], | ||
| isInteractive: true, | ||
| animate: true, | ||
| motionConfig: 'gentle', | ||
| transitionMode: 'innerRadius', | ||
| tooltip: PieTooltip, | ||
| legends: [], | ||
| role: 'img', | ||
| pixelRatio: typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) !== null && _window$devicePixelRa !== void 0 ? _window$devicePixelRa : 1 : 1 | ||
| }; | ||
| var useNormalizedData = function useNormalizedData(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$colors = _ref.colors, | ||
| colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors; | ||
| var getId = usePropertyAccessor(id); | ||
| var getValue = usePropertyAccessor(value); | ||
| var formatValue = useValueFormatter(valueFormat); | ||
| var getColor = useOrdinalColorScale(colors, 'id'); | ||
| return useMemo(function () { | ||
| return data.map(function (datum) { | ||
| var _datum$label; | ||
| var datumId = getId(datum); | ||
| var datumValue = getValue(datum); | ||
| var normalizedDatum = { | ||
| id: datumId, | ||
| label: (_datum$label = datum.label) !== null && _datum$label !== void 0 ? _datum$label : datumId, | ||
| hidden: false, | ||
| value: datumValue, | ||
| formattedValue: formatValue(datumValue), | ||
| data: datum | ||
| }; | ||
| return _objectSpread2(_objectSpread2({}, normalizedDatum), {}, { | ||
| color: getColor(normalizedDatum) | ||
| }); | ||
| }); | ||
| }, [data, getId, getValue, formatValue, getColor]); | ||
| }; | ||
| var usePieArcs = function usePieArcs(_ref2) { | ||
| var data = _ref2.data, | ||
| startAngle = _ref2.startAngle, | ||
| endAngle = _ref2.endAngle, | ||
| innerRadius = _ref2.innerRadius, | ||
| outerRadius = _ref2.outerRadius, | ||
| padAngle = _ref2.padAngle, | ||
| sortByValue = _ref2.sortByValue, | ||
| activeId = _ref2.activeId, | ||
| activeInnerRadiusOffset = _ref2.activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset, | ||
| hiddenIds = _ref2.hiddenIds; | ||
| var pie$1 = useMemo(function () { | ||
| var innerPie = pie().value(function (d) { | ||
| return d.value; | ||
| }).startAngle(degreesToRadians(startAngle)).endAngle(degreesToRadians(endAngle)).padAngle(degreesToRadians(padAngle)); | ||
| if (!sortByValue) { | ||
| innerPie.sortValues(null); | ||
| } | ||
| return innerPie; | ||
| }, [startAngle, endAngle, padAngle, sortByValue]); | ||
| return useMemo(function () { | ||
| 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); | ||
| return _objectSpread2(_objectSpread2({}, arc.data), {}, { | ||
| arc: { | ||
| index: arc.index, | ||
| startAngle: arc.startAngle, | ||
| endAngle: arc.endAngle, | ||
| innerRadius: activeId === arc.data.id ? innerRadius - activeInnerRadiusOffset : innerRadius, | ||
| outerRadius: activeId === arc.data.id ? outerRadius + activeOuterRadiusOffset : outerRadius, | ||
| thickness: outerRadius - innerRadius, | ||
| padAngle: arc.padAngle, | ||
| angle: angle, | ||
| angleDeg: radiansToDegrees(angle) | ||
| } | ||
| }); | ||
| }); | ||
| 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]); | ||
| }; | ||
| var usePie = function usePie(_ref3) { | ||
| var data = _ref3.data, | ||
| radius = _ref3.radius, | ||
| innerRadius = _ref3.innerRadius, | ||
| _ref3$startAngle = _ref3.startAngle, | ||
| startAngle = _ref3$startAngle === void 0 ? defaultProps.startAngle : _ref3$startAngle, | ||
| _ref3$endAngle = _ref3.endAngle, | ||
| endAngle = _ref3$endAngle === void 0 ? defaultProps.endAngle : _ref3$endAngle, | ||
| _ref3$padAngle = _ref3.padAngle, | ||
| padAngle = _ref3$padAngle === void 0 ? defaultProps.padAngle : _ref3$padAngle, | ||
| _ref3$sortByValue = _ref3.sortByValue, | ||
| sortByValue = _ref3$sortByValue === void 0 ? defaultProps.sortByValue : _ref3$sortByValue, | ||
| _ref3$cornerRadius = _ref3.cornerRadius, | ||
| cornerRadius = _ref3$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref3$cornerRadius, | ||
| _ref3$activeInnerRadi = _ref3.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref3$activeInnerRadi === void 0 ? defaultProps.activeInnerRadiusOffset : _ref3$activeInnerRadi, | ||
| _ref3$activeOuterRadi = _ref3.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref3$activeOuterRadi === void 0 ? defaultProps.activeOuterRadiusOffset : _ref3$activeOuterRadi; | ||
| var _useState = useState(null), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| activeId = _useState2[0], | ||
| setActiveId = _useState2[1]; | ||
| var _useState3 = useState([]), | ||
| _useState4 = _slicedToArray(_useState3, 2), | ||
| hiddenIds = _useState4[0], | ||
| setHiddenIds = _useState4[1]; | ||
| var pieArcs = usePieArcs({ | ||
| data: data, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: radius, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| activeId: activeId, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| 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({ | ||
| cornerRadius: cornerRadius, | ||
| padAngle: degreesToRadians(padAngle) | ||
| }); | ||
| return _objectSpread2(_objectSpread2({}, pieArcs), {}, { | ||
| arcGenerator: arcGenerator, | ||
| setActiveId: setActiveId, | ||
| toggleSerie: toggleSerie | ||
| }); | ||
| }; | ||
| var usePieFromBox = function usePieFromBox(_ref4) { | ||
| var data = _ref4.data, | ||
| width = _ref4.width, | ||
| height = _ref4.height, | ||
| _ref4$innerRadius = _ref4.innerRadius, | ||
| innerRadiusRatio = _ref4$innerRadius === void 0 ? defaultProps.innerRadius : _ref4$innerRadius, | ||
| _ref4$startAngle = _ref4.startAngle, | ||
| startAngle = _ref4$startAngle === void 0 ? defaultProps.startAngle : _ref4$startAngle, | ||
| _ref4$endAngle = _ref4.endAngle, | ||
| endAngle = _ref4$endAngle === void 0 ? defaultProps.endAngle : _ref4$endAngle, | ||
| _ref4$padAngle = _ref4.padAngle, | ||
| padAngle = _ref4$padAngle === void 0 ? defaultProps.padAngle : _ref4$padAngle, | ||
| _ref4$sortByValue = _ref4.sortByValue, | ||
| sortByValue = _ref4$sortByValue === void 0 ? defaultProps.sortByValue : _ref4$sortByValue, | ||
| _ref4$cornerRadius = _ref4.cornerRadius, | ||
| cornerRadius = _ref4$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref4$cornerRadius, | ||
| _ref4$fit = _ref4.fit, | ||
| fit = _ref4$fit === void 0 ? defaultProps.fit : _ref4$fit, | ||
| _ref4$activeInnerRadi = _ref4.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref4$activeInnerRadi === void 0 ? defaultProps.activeInnerRadiusOffset : _ref4$activeInnerRadi, | ||
| _ref4$activeOuterRadi = _ref4.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref4$activeOuterRadi === void 0 ? defaultProps.activeOuterRadiusOffset : _ref4$activeOuterRadi; | ||
| 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 () { | ||
| var radius = Math.min(width, height) / 2; | ||
| var innerRadius = radius * Math.min(innerRadiusRatio, 1); | ||
| var centerX = width / 2; | ||
| var centerY = height / 2; | ||
| var boundingBox; | ||
| if (fit) { | ||
| var _computeArcBoundingBo = computeArcBoundingBox(centerX, centerY, radius, startAngle - 90, endAngle - 90), | ||
| points = _computeArcBoundingBo.points, | ||
| box = _objectWithoutProperties(_computeArcBoundingBo, ["points"]); | ||
| var ratio = Math.min(width / box.width, height / box.height); | ||
| var adjustedBox = { | ||
| width: box.width * ratio, | ||
| height: box.height * ratio | ||
| }; | ||
| adjustedBox.x = (width - adjustedBox.width) / 2; | ||
| adjustedBox.y = (height - adjustedBox.height) / 2; | ||
| centerX = (centerX - box.x) / box.width * box.width * ratio + adjustedBox.x; | ||
| centerY = (centerY - box.y) / box.height * box.height * ratio + adjustedBox.y; | ||
| boundingBox = { | ||
| box: box, | ||
| ratio: ratio, | ||
| points: points | ||
| }; | ||
| radius = radius * ratio; | ||
| innerRadius = innerRadius * ratio; | ||
| } | ||
| return { | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius, | ||
| debug: boundingBox | ||
| }; | ||
| }, [width, height, innerRadiusRatio, startAngle, endAngle, fit, cornerRadius]); | ||
| var pieArcs = usePieArcs({ | ||
| data: data, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: computedProps.innerRadius, | ||
| outerRadius: computedProps.radius, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| activeId: activeId, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| 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({ | ||
| cornerRadius: cornerRadius, | ||
| padAngle: degreesToRadians(padAngle) | ||
| }); | ||
| return _objectSpread2(_objectSpread2({ | ||
| arcGenerator: arcGenerator, | ||
| setActiveId: setActiveId, | ||
| toggleSerie: toggleSerie | ||
| }, pieArcs), computedProps); | ||
| }; | ||
| var usePieLayerContext = function usePieLayerContext(_ref5) { | ||
| var dataWithArc = _ref5.dataWithArc, | ||
| arcGenerator = _ref5.arcGenerator, | ||
| centerX = _ref5.centerX, | ||
| centerY = _ref5.centerY, | ||
| radius = _ref5.radius, | ||
| innerRadius = _ref5.innerRadius; | ||
| return useMemo(function () { | ||
| return { | ||
| dataWithArc: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius | ||
| }; | ||
| }, [dataWithArc, arcGenerator, centerX, centerY, radius, innerRadius]); | ||
| }; | ||
| var Arcs = function Arcs(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| arcGenerator = _ref.arcGenerator, | ||
| borderWidth = _ref.borderWidth, | ||
| borderColor = _ref.borderColor, | ||
| isInteractive = _ref.isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| setActiveId = _ref.setActiveId, | ||
| tooltip = _ref.tooltip, | ||
| transitionMode = _ref.transitionMode; | ||
| var _useTooltip = useTooltip(), | ||
| showTooltipFromEvent = _useTooltip.showTooltipFromEvent, | ||
| hideTooltip = _useTooltip.hideTooltip; | ||
| var handleClick = useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| onClick === null || onClick === void 0 ? void 0 : onClick(datum, event); | ||
| }; | ||
| }, [isInteractive, onClick]); | ||
| var handleMouseEnter = useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| showTooltipFromEvent(createElement(tooltip, { | ||
| datum: datum | ||
| }), event); | ||
| setActiveId(datum.id); | ||
| onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(datum, event); | ||
| }; | ||
| }, [isInteractive, showTooltipFromEvent, setActiveId, onMouseEnter]); | ||
| var handleMouseMove = useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| showTooltipFromEvent(createElement(tooltip, { | ||
| datum: datum | ||
| }), event); | ||
| onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| }; | ||
| }, [isInteractive, showTooltipFromEvent, onMouseMove]); | ||
| var handleMouseLeave = useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| hideTooltip(); | ||
| setActiveId(null); | ||
| onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(datum, event); | ||
| }; | ||
| }, [isInteractive, hideTooltip, setActiveId, onMouseLeave]); | ||
| return jsx(ArcsLayer, { | ||
| center: center, | ||
| data: data, | ||
| arcGenerator: arcGenerator, | ||
| borderWidth: borderWidth, | ||
| borderColor: borderColor, | ||
| transitionMode: transitionMode, | ||
| onClick: handleClick, | ||
| onMouseEnter: handleMouseEnter, | ||
| onMouseMove: handleMouseMove, | ||
| onMouseLeave: handleMouseLeave | ||
| }); | ||
| }; | ||
| var InnerPie = function InnerPie(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$sortByValue = _ref.sortByValue, | ||
| sortByValue = _ref$sortByValue === void 0 ? defaultProps.sortByValue : _ref$sortByValue, | ||
| _ref$layers = _ref.layers, | ||
| layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers, | ||
| _ref$startAngle = _ref.startAngle, | ||
| startAngle = _ref$startAngle === void 0 ? defaultProps.startAngle : _ref$startAngle, | ||
| _ref$endAngle = _ref.endAngle, | ||
| endAngle = _ref$endAngle === void 0 ? defaultProps.endAngle : _ref$endAngle, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? defaultProps.padAngle : _ref$padAngle, | ||
| _ref$fit = _ref.fit, | ||
| fit = _ref$fit === void 0 ? defaultProps.fit : _ref$fit, | ||
| _ref$innerRadius = _ref.innerRadius, | ||
| innerRadiusRatio = _ref$innerRadius === void 0 ? defaultProps.innerRadius : _ref$innerRadius, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref$cornerRadius, | ||
| _ref$activeInnerRadiu = _ref.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref$activeInnerRadiu === void 0 ? defaultProps.activeInnerRadiusOffset : _ref$activeInnerRadiu, | ||
| _ref$activeOuterRadiu = _ref.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref$activeOuterRadiu === void 0 ? defaultProps.activeOuterRadiusOffset : _ref$activeOuterRadiu, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| partialMargin = _ref.margin, | ||
| _ref$colors = _ref.colors, | ||
| colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors, | ||
| _ref$borderWidth = _ref.borderWidth, | ||
| borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth, | ||
| _ref$borderColor = _ref.borderColor, | ||
| borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor, | ||
| _ref$enableArcLabels = _ref.enableArcLabels, | ||
| enableArcLabels = _ref$enableArcLabels === void 0 ? defaultProps.enableArcLabels : _ref$enableArcLabels, | ||
| _ref$arcLabel = _ref.arcLabel, | ||
| arcLabel = _ref$arcLabel === void 0 ? defaultProps.arcLabel : _ref$arcLabel, | ||
| _ref$arcLabelsSkipAng = _ref.arcLabelsSkipAngle, | ||
| arcLabelsSkipAngle = _ref$arcLabelsSkipAng === void 0 ? defaultProps.arcLabelsSkipAngle : _ref$arcLabelsSkipAng, | ||
| _ref$arcLabelsTextCol = _ref.arcLabelsTextColor, | ||
| arcLabelsTextColor = _ref$arcLabelsTextCol === void 0 ? defaultProps.arcLabelsTextColor : _ref$arcLabelsTextCol, | ||
| _ref$arcLabelsRadiusO = _ref.arcLabelsRadiusOffset, | ||
| arcLabelsRadiusOffset = _ref$arcLabelsRadiusO === void 0 ? defaultProps.arcLabelsRadiusOffset : _ref$arcLabelsRadiusO, | ||
| arcLabelsComponent = _ref.arcLabelsComponent, | ||
| _ref$enableArcLinkLab = _ref.enableArcLinkLabels, | ||
| enableArcLinkLabels = _ref$enableArcLinkLab === void 0 ? defaultProps.enableArcLinkLabels : _ref$enableArcLinkLab, | ||
| _ref$arcLinkLabel = _ref.arcLinkLabel, | ||
| arcLinkLabel = _ref$arcLinkLabel === void 0 ? defaultProps.arcLinkLabel : _ref$arcLinkLabel, | ||
| _ref$arcLinkLabelsSki = _ref.arcLinkLabelsSkipAngle, | ||
| arcLinkLabelsSkipAngle = _ref$arcLinkLabelsSki === void 0 ? defaultProps.arcLinkLabelsSkipAngle : _ref$arcLinkLabelsSki, | ||
| _ref$arcLinkLabelsOff = _ref.arcLinkLabelsOffset, | ||
| arcLinkLabelsOffset = _ref$arcLinkLabelsOff === void 0 ? defaultProps.arcLinkLabelsOffset : _ref$arcLinkLabelsOff, | ||
| _ref$arcLinkLabelsDia = _ref.arcLinkLabelsDiagonalLength, | ||
| arcLinkLabelsDiagonalLength = _ref$arcLinkLabelsDia === void 0 ? defaultProps.arcLinkLabelsDiagonalLength : _ref$arcLinkLabelsDia, | ||
| _ref$arcLinkLabelsStr = _ref.arcLinkLabelsStraightLength, | ||
| arcLinkLabelsStraightLength = _ref$arcLinkLabelsStr === void 0 ? defaultProps.arcLinkLabelsStraightLength : _ref$arcLinkLabelsStr, | ||
| _ref$arcLinkLabelsThi = _ref.arcLinkLabelsThickness, | ||
| arcLinkLabelsThickness = _ref$arcLinkLabelsThi === void 0 ? defaultProps.arcLinkLabelsThickness : _ref$arcLinkLabelsThi, | ||
| _ref$arcLinkLabelsTex = _ref.arcLinkLabelsTextOffset, | ||
| arcLinkLabelsTextOffset = _ref$arcLinkLabelsTex === void 0 ? defaultProps.arcLinkLabelsTextOffset : _ref$arcLinkLabelsTex, | ||
| _ref$arcLinkLabelsTex2 = _ref.arcLinkLabelsTextColor, | ||
| arcLinkLabelsTextColor = _ref$arcLinkLabelsTex2 === void 0 ? defaultProps.arcLinkLabelsTextColor : _ref$arcLinkLabelsTex2, | ||
| _ref$arcLinkLabelsCol = _ref.arcLinkLabelsColor, | ||
| arcLinkLabelsColor = _ref$arcLinkLabelsCol === void 0 ? defaultProps.arcLinkLabelsColor : _ref$arcLinkLabelsCol, | ||
| arcLinkLabelComponent = _ref.arcLinkLabelComponent, | ||
| _ref$defs = _ref.defs, | ||
| defs = _ref$defs === void 0 ? defaultProps.defs : _ref$defs, | ||
| _ref$fill = _ref.fill, | ||
| fill = _ref$fill === void 0 ? defaultProps.fill : _ref$fill, | ||
| _ref$isInteractive = _ref.isInteractive, | ||
| isInteractive = _ref$isInteractive === void 0 ? defaultProps.isInteractive : _ref$isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| _ref$tooltip = _ref.tooltip, | ||
| tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip, | ||
| _ref$transitionMode = _ref.transitionMode, | ||
| transitionMode = _ref$transitionMode === void 0 ? defaultProps.transitionMode : _ref$transitionMode, | ||
| _ref$legends = _ref.legends, | ||
| legends = _ref$legends === void 0 ? defaultProps.legends : _ref$legends, | ||
| _ref$role = _ref.role, | ||
| role = _ref$role === void 0 ? defaultProps.role : _ref$role; | ||
| var _useDimensions = useDimensions(width, height, partialMargin), | ||
| outerWidth = _useDimensions.outerWidth, | ||
| outerHeight = _useDimensions.outerHeight, | ||
| margin = _useDimensions.margin, | ||
| innerWidth = _useDimensions.innerWidth, | ||
| innerHeight = _useDimensions.innerHeight; | ||
| var normalizedData = useNormalizedData({ | ||
| data: data, | ||
| id: id, | ||
| value: value, | ||
| valueFormat: valueFormat, | ||
| colors: colors | ||
| }); | ||
| var _usePieFromBox = usePieFromBox({ | ||
| data: normalizedData, | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| fit: fit, | ||
| innerRadius: innerRadiusRatio, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| cornerRadius: cornerRadius, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset: activeOuterRadiusOffset | ||
| }), | ||
| dataWithArc = _usePieFromBox.dataWithArc, | ||
| legendData = _usePieFromBox.legendData, | ||
| arcGenerator = _usePieFromBox.arcGenerator, | ||
| centerX = _usePieFromBox.centerX, | ||
| centerY = _usePieFromBox.centerY, | ||
| radius = _usePieFromBox.radius, | ||
| innerRadius = _usePieFromBox.innerRadius, | ||
| setActiveId = _usePieFromBox.setActiveId, | ||
| toggleSerie = _usePieFromBox.toggleSerie; | ||
| var boundDefs = bindDefs(defs, dataWithArc, fill); | ||
| var layerById = { | ||
| arcLinkLabels: null, | ||
| arcs: null, | ||
| arcLabels: null, | ||
| legends: null | ||
| }; | ||
| if (enableArcLinkLabels && layers.includes('arcLinkLabels')) { | ||
| layerById.arcLinkLabels = jsx(ArcLinkLabelsLayer, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| label: arcLinkLabel, | ||
| skipAngle: arcLinkLabelsSkipAngle, | ||
| offset: arcLinkLabelsOffset, | ||
| diagonalLength: arcLinkLabelsDiagonalLength, | ||
| straightLength: arcLinkLabelsStraightLength, | ||
| strokeWidth: arcLinkLabelsThickness, | ||
| textOffset: arcLinkLabelsTextOffset, | ||
| textColor: arcLinkLabelsTextColor, | ||
| linkColor: arcLinkLabelsColor, | ||
| component: arcLinkLabelComponent | ||
| }, "arcLinkLabels"); | ||
| } | ||
| if (layers.includes('arcs')) { | ||
| layerById.arcs = jsx(Arcs, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| borderWidth: borderWidth, | ||
| borderColor: borderColor, | ||
| isInteractive: isInteractive, | ||
| onClick: onClick, | ||
| onMouseEnter: onMouseEnter, | ||
| onMouseMove: onMouseMove, | ||
| onMouseLeave: onMouseLeave, | ||
| setActiveId: setActiveId, | ||
| tooltip: tooltip, | ||
| transitionMode: transitionMode | ||
| }, "arcs"); | ||
| } | ||
| if (enableArcLabels && layers.includes('arcLabels')) { | ||
| layerById.arcLabels = jsx(ArcLabelsLayer, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| label: arcLabel, | ||
| radiusOffset: arcLabelsRadiusOffset, | ||
| skipAngle: arcLabelsSkipAngle, | ||
| textColor: arcLabelsTextColor, | ||
| transitionMode: transitionMode, | ||
| component: arcLabelsComponent | ||
| }, "arcLabels"); | ||
| } | ||
| if (legends.length > 0 && layers.includes('legends')) { | ||
| layerById.legends = jsx(PieLegends, { | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| data: legendData, | ||
| legends: legends, | ||
| toggleSerie: toggleSerie | ||
| }, "legends"); | ||
| } | ||
| var layerContext = usePieLayerContext({ | ||
| dataWithArc: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius | ||
| }); | ||
| return jsx(SvgWrapper, { | ||
| width: outerWidth, | ||
| height: outerHeight, | ||
| margin: margin, | ||
| defs: boundDefs, | ||
| role: role, | ||
| children: layers.map(function (layer, i) { | ||
| if (layerById[layer] !== undefined) { | ||
| return layerById[layer]; | ||
| } | ||
| if (typeof layer === 'function') { | ||
| return jsx(Fragment$1, { | ||
| children: createElement(layer, layerContext) | ||
| }, i); | ||
| } | ||
| return null; | ||
| }) | ||
| }); | ||
| }; | ||
| var Pie = function Pie(_ref2) { | ||
| var _ref2$isInteractive = _ref2.isInteractive, | ||
| isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive, | ||
| _ref2$animate = _ref2.animate, | ||
| animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate, | ||
| _ref2$motionConfig = _ref2.motionConfig, | ||
| motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig, | ||
| theme = _ref2.theme, | ||
| renderWrapper = _ref2.renderWrapper, | ||
| otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]); | ||
| return jsx(Container, { | ||
| animate: animate, | ||
| isInteractive: isInteractive, | ||
| motionConfig: motionConfig, | ||
| renderWrapper: renderWrapper, | ||
| theme: theme, | ||
| children: jsx(InnerPie, _objectSpread2({ | ||
| isInteractive: isInteractive | ||
| }, otherProps)) | ||
| }); | ||
| }; | ||
| var ResponsivePie = function ResponsivePie(props) { | ||
| return jsx(ResponsiveWrapper, { | ||
| children: function children(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height; | ||
| return jsx(Pie, _objectSpread2({ | ||
| width: width, | ||
| height: height | ||
| }, props)); | ||
| } | ||
| }); | ||
| }; | ||
| var InnerPieCanvas = function InnerPieCanvas(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$sortByValue = _ref.sortByValue, | ||
| sortByValue = _ref$sortByValue === void 0 ? defaultProps.sortByValue : _ref$sortByValue, | ||
| _ref$startAngle = _ref.startAngle, | ||
| startAngle = _ref$startAngle === void 0 ? defaultProps.startAngle : _ref$startAngle, | ||
| _ref$endAngle = _ref.endAngle, | ||
| endAngle = _ref$endAngle === void 0 ? defaultProps.endAngle : _ref$endAngle, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? defaultProps.padAngle : _ref$padAngle, | ||
| _ref$fit = _ref.fit, | ||
| fit = _ref$fit === void 0 ? defaultProps.fit : _ref$fit, | ||
| _ref$innerRadius = _ref.innerRadius, | ||
| innerRadiusRatio = _ref$innerRadius === void 0 ? defaultProps.innerRadius : _ref$innerRadius, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref$cornerRadius, | ||
| _ref$activeInnerRadiu = _ref.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref$activeInnerRadiu === void 0 ? defaultProps.activeInnerRadiusOffset : _ref$activeInnerRadiu, | ||
| _ref$activeOuterRadiu = _ref.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref$activeOuterRadiu === void 0 ? defaultProps.activeOuterRadiusOffset : _ref$activeOuterRadiu, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| partialMargin = _ref.margin, | ||
| _ref$pixelRatio = _ref.pixelRatio, | ||
| pixelRatio = _ref$pixelRatio === void 0 ? 1 : _ref$pixelRatio, | ||
| _ref$colors = _ref.colors, | ||
| colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors, | ||
| _ref$borderWidth = _ref.borderWidth, | ||
| borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth, | ||
| _ref$borderColor = _ref.borderColor, | ||
| borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor, | ||
| _ref$enableArcLabels = _ref.enableArcLabels, | ||
| enableArcLabels = _ref$enableArcLabels === void 0 ? defaultProps.enableArcLabels : _ref$enableArcLabels, | ||
| _ref$arcLabel = _ref.arcLabel, | ||
| arcLabel = _ref$arcLabel === void 0 ? defaultProps.arcLabel : _ref$arcLabel, | ||
| _ref$arcLabelsSkipAng = _ref.arcLabelsSkipAngle, | ||
| arcLabelsSkipAngle = _ref$arcLabelsSkipAng === void 0 ? defaultProps.arcLabelsSkipAngle : _ref$arcLabelsSkipAng, | ||
| _ref$arcLabelsTextCol = _ref.arcLabelsTextColor, | ||
| arcLabelsTextColor = _ref$arcLabelsTextCol === void 0 ? defaultProps.arcLabelsTextColor : _ref$arcLabelsTextCol, | ||
| _ref$arcLabelsRadiusO = _ref.arcLabelsRadiusOffset, | ||
| arcLabelsRadiusOffset = _ref$arcLabelsRadiusO === void 0 ? defaultProps.arcLabelsRadiusOffset : _ref$arcLabelsRadiusO, | ||
| _ref$enableArcLinkLab = _ref.enableArcLinkLabels, | ||
| enableArcLinkLabels = _ref$enableArcLinkLab === void 0 ? defaultProps.enableArcLinkLabels : _ref$enableArcLinkLab, | ||
| _ref$arcLinkLabel = _ref.arcLinkLabel, | ||
| arcLinkLabel = _ref$arcLinkLabel === void 0 ? defaultProps.arcLinkLabel : _ref$arcLinkLabel, | ||
| _ref$arcLinkLabelsSki = _ref.arcLinkLabelsSkipAngle, | ||
| arcLinkLabelsSkipAngle = _ref$arcLinkLabelsSki === void 0 ? defaultProps.arcLinkLabelsSkipAngle : _ref$arcLinkLabelsSki, | ||
| _ref$arcLinkLabelsOff = _ref.arcLinkLabelsOffset, | ||
| arcLinkLabelsOffset = _ref$arcLinkLabelsOff === void 0 ? defaultProps.arcLinkLabelsOffset : _ref$arcLinkLabelsOff, | ||
| _ref$arcLinkLabelsDia = _ref.arcLinkLabelsDiagonalLength, | ||
| arcLinkLabelsDiagonalLength = _ref$arcLinkLabelsDia === void 0 ? defaultProps.arcLinkLabelsDiagonalLength : _ref$arcLinkLabelsDia, | ||
| _ref$arcLinkLabelsStr = _ref.arcLinkLabelsStraightLength, | ||
| arcLinkLabelsStraightLength = _ref$arcLinkLabelsStr === void 0 ? defaultProps.arcLinkLabelsStraightLength : _ref$arcLinkLabelsStr, | ||
| _ref$arcLinkLabelsThi = _ref.arcLinkLabelsThickness, | ||
| arcLinkLabelsThickness = _ref$arcLinkLabelsThi === void 0 ? defaultProps.arcLinkLabelsThickness : _ref$arcLinkLabelsThi, | ||
| _ref$arcLinkLabelsTex = _ref.arcLinkLabelsTextOffset, | ||
| arcLinkLabelsTextOffset = _ref$arcLinkLabelsTex === void 0 ? defaultProps.arcLinkLabelsTextOffset : _ref$arcLinkLabelsTex, | ||
| _ref$arcLinkLabelsTex2 = _ref.arcLinkLabelsTextColor, | ||
| arcLinkLabelsTextColor = _ref$arcLinkLabelsTex2 === void 0 ? defaultProps.arcLinkLabelsTextColor : _ref$arcLinkLabelsTex2, | ||
| _ref$arcLinkLabelsCol = _ref.arcLinkLabelsColor, | ||
| arcLinkLabelsColor = _ref$arcLinkLabelsCol === void 0 ? defaultProps.arcLinkLabelsColor : _ref$arcLinkLabelsCol, | ||
| _ref$isInteractive = _ref.isInteractive, | ||
| isInteractive = _ref$isInteractive === void 0 ? defaultProps.isInteractive : _ref$isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseMove = _ref.onMouseMove, | ||
| _ref$tooltip = _ref.tooltip, | ||
| tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip, | ||
| _ref$legends = _ref.legends, | ||
| legends = _ref$legends === void 0 ? defaultProps.legends : _ref$legends; | ||
| var canvasEl = useRef(null); | ||
| var theme = useTheme(); | ||
| var _useDimensions = useDimensions(width, height, partialMargin), | ||
| margin = _useDimensions.margin, | ||
| innerWidth = _useDimensions.innerWidth, | ||
| innerHeight = _useDimensions.innerHeight, | ||
| outerWidth = _useDimensions.outerWidth, | ||
| outerHeight = _useDimensions.outerHeight; | ||
| var normalizedData = useNormalizedData({ | ||
| data: data, | ||
| id: id, | ||
| value: value, | ||
| valueFormat: valueFormat, | ||
| colors: colors | ||
| }); | ||
| var _usePieFromBox = usePieFromBox({ | ||
| data: normalizedData, | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| fit: fit, | ||
| innerRadius: innerRadiusRatio, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| cornerRadius: cornerRadius, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset: activeOuterRadiusOffset | ||
| }), | ||
| dataWithArc = _usePieFromBox.dataWithArc, | ||
| arcGenerator = _usePieFromBox.arcGenerator, | ||
| centerX = _usePieFromBox.centerX, | ||
| centerY = _usePieFromBox.centerY, | ||
| radius = _usePieFromBox.radius, | ||
| innerRadius = _usePieFromBox.innerRadius, | ||
| setActiveId = _usePieFromBox.setActiveId; | ||
| var getBorderColor = useInheritedColor(borderColor, theme); | ||
| var arcLabels = useArcLabels({ | ||
| data: dataWithArc, | ||
| label: arcLabel, | ||
| skipAngle: arcLabelsSkipAngle, | ||
| offset: arcLabelsRadiusOffset, | ||
| textColor: arcLabelsTextColor | ||
| }); | ||
| var arcLinkLabels = useArcLinkLabels({ | ||
| data: dataWithArc, | ||
| skipAngle: arcLinkLabelsSkipAngle, | ||
| offset: arcLinkLabelsOffset, | ||
| diagonalLength: arcLinkLabelsDiagonalLength, | ||
| straightLength: arcLinkLabelsStraightLength, | ||
| label: arcLinkLabel, | ||
| linkColor: arcLinkLabelsColor, | ||
| textOffset: arcLinkLabelsTextOffset, | ||
| textColor: arcLinkLabelsTextColor | ||
| }); | ||
| useEffect(function () { | ||
| if (!canvasEl.current) return; | ||
| canvasEl.current.width = outerWidth * pixelRatio; | ||
| canvasEl.current.height = outerHeight * pixelRatio; | ||
| var ctx = canvasEl.current.getContext('2d'); | ||
| ctx.scale(pixelRatio, pixelRatio); | ||
| ctx.fillStyle = theme.background; | ||
| ctx.fillRect(0, 0, outerWidth, outerHeight); | ||
| ctx.save(); | ||
| ctx.translate(margin.left, margin.top); | ||
| arcGenerator.context(ctx); | ||
| ctx.save(); | ||
| ctx.translate(centerX, centerY); | ||
| dataWithArc.forEach(function (arc) { | ||
| ctx.beginPath(); | ||
| ctx.fillStyle = arc.color; | ||
| ctx.strokeStyle = getBorderColor(arc); | ||
| ctx.lineWidth = borderWidth; | ||
| arcGenerator(arc.arc); | ||
| ctx.fill(); | ||
| if (borderWidth > 0) { | ||
| ctx.stroke(); | ||
| } | ||
| }); | ||
| if (enableArcLinkLabels === true) { | ||
| drawCanvasArcLinkLabels(ctx, arcLinkLabels, theme, arcLinkLabelsThickness); | ||
| } | ||
| if (enableArcLabels === true) { | ||
| drawCanvasArcLabels(ctx, arcLabels, theme); | ||
| } | ||
| ctx.restore(); | ||
| legends.forEach(function (legend) { | ||
| renderLegendToCanvas(ctx, _objectSpread2(_objectSpread2({}, legend), {}, { | ||
| data: dataWithArc, | ||
| containerWidth: innerWidth, | ||
| containerHeight: innerHeight, | ||
| theme: theme | ||
| })); | ||
| }); | ||
| }, [canvasEl, innerWidth, innerHeight, outerWidth, outerHeight, margin.top, margin.left, pixelRatio, centerX, centerY, arcGenerator, dataWithArc, getBorderColor, enableArcLabels, arcLabels, enableArcLinkLabels, arcLinkLabels, arcLinkLabelsThickness, legends, theme]); | ||
| var arcs = useMemo(function () { | ||
| return dataWithArc.map(function (datum) { | ||
| return _objectSpread2({ | ||
| id: datum.id | ||
| }, datum.arc); | ||
| }); | ||
| }, [dataWithArc]); | ||
| var getArcFromMouse = function getArcFromMouse(event) { | ||
| if (!canvasEl.current) return null; | ||
| var _getRelativeCursor = getRelativeCursor(canvasEl.current, event), | ||
| _getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2), | ||
| x = _getRelativeCursor2[0], | ||
| y = _getRelativeCursor2[1]; | ||
| var hoveredArc = findArcUnderCursor(margin.left + centerX, margin.top + centerY, radius, innerRadius, arcs, x, y); | ||
| if (!hoveredArc) return null; | ||
| return dataWithArc.find(function (datum) { | ||
| return datum.id === hoveredArc.id; | ||
| }); | ||
| }; | ||
| var _useTooltip = useTooltip(), | ||
| showTooltipFromEvent = _useTooltip.showTooltipFromEvent, | ||
| hideTooltip = _useTooltip.hideTooltip; | ||
| var handleMouseHover = function handleMouseHover(event) { | ||
| var datum = getArcFromMouse(event); | ||
| if (datum) { | ||
| onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| setActiveId(datum.id); | ||
| showTooltipFromEvent(createElement(tooltip, { | ||
| datum: datum | ||
| }), event); | ||
| } else { | ||
| setActiveId(null); | ||
| hideTooltip(); | ||
| } | ||
| }; | ||
| var handleMouseLeave = function handleMouseLeave() { | ||
| hideTooltip(); | ||
| }; | ||
| var handleClick = function handleClick(event) { | ||
| if (!onClick) return; | ||
| var arc = getArcFromMouse(event); | ||
| if (arc) { | ||
| onClick(arc, event); | ||
| } | ||
| }; | ||
| return jsx("canvas", { | ||
| ref: canvasEl, | ||
| width: outerWidth * pixelRatio, | ||
| height: outerHeight * pixelRatio, | ||
| style: { | ||
| width: outerWidth, | ||
| height: outerHeight, | ||
| cursor: isInteractive ? 'auto' : 'normal' | ||
| }, | ||
| onMouseEnter: isInteractive ? handleMouseHover : undefined, | ||
| onMouseMove: isInteractive ? handleMouseHover : undefined, | ||
| onMouseLeave: isInteractive ? handleMouseLeave : undefined, | ||
| onClick: isInteractive ? handleClick : undefined | ||
| }); | ||
| }; | ||
| var PieCanvas = function PieCanvas(_ref2) { | ||
| var _ref2$isInteractive = _ref2.isInteractive, | ||
| isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive, | ||
| theme = _ref2.theme, | ||
| renderWrapper = _ref2.renderWrapper, | ||
| otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "theme", "renderWrapper"]); | ||
| return jsx(Container, { | ||
| isInteractive: isInteractive, | ||
| renderWrapper: renderWrapper, | ||
| theme: theme, | ||
| children: jsx(InnerPieCanvas, _objectSpread2({ | ||
| isInteractive: isInteractive | ||
| }, otherProps)) | ||
| }); | ||
| }; | ||
| var ResponsivePieCanvas = function ResponsivePieCanvas(props) { | ||
| return jsx(ResponsiveWrapper, { | ||
| children: function children(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height; | ||
| return jsx(PieCanvas, _objectSpread2({ | ||
| width: width, | ||
| height: height | ||
| }, props)); | ||
| } | ||
| }); | ||
| }; | ||
| export { Pie, PieCanvas, ResponsivePie, ResponsivePieCanvas, defaultProps, useNormalizedData, usePie, usePieArcs, usePieFromBox, usePieLayerContext }; | ||
| import{useMemo as e,useState as i,useCallback as t,createElement as n,Fragment as r,useRef as a,useEffect as o}from"react";import{usePropertyAccessor as d,useValueFormatter as l,degreesToRadians as s,radiansToDegrees as c,Container as u,useDimensions as v,bindDefs as f,SvgWrapper as g,ResponsiveWrapper as L,useTheme as h,getRelativeCursor as b}from"@nivo/core";import{useArcGenerator as p,computeArcBoundingBox as k,ArcsLayer as A,ArcLinkLabelsLayer as R,ArcLabelsLayer as m,useArcLabels as O,useArcLinkLabels as C,drawCanvasArcLinkLabels as I,drawCanvasArcLabels as x,findArcUnderCursor as M}from"@nivo/arcs";import{BoxLegendSvg as y,renderLegendToCanvas as w}from"@nivo/legends";import{jsx as W,Fragment as S}from"react/jsx-runtime";import{pie as T}from"d3-shape";import{useOrdinalColorScale as V,useInheritedColor as B}from"@nivo/colors";import{BasicTooltip as G,useTooltip as E}from"@nivo/tooltip";function D(){return D=Object.assign||function(e){for(var i=1;i<arguments.length;i++){var t=arguments[i];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},D.apply(this,arguments)}function F(e,i){if(null==e)return{};var t,n,r={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],i.indexOf(t)>=0||(r[t]=e[t]);return r}var H,X=function(e){var i=e.width,t=e.height,n=e.legends,r=e.data,a=e.toggleSerie;return W(S,{children:n.map((function(e,n){var o;return W(y,D({},e,{containerWidth:i,containerHeight:t,data:null!=(o=e.data)?o:r,toggleSerie:e.toggleSerie?a:void 0}),n)}))})},Y={id:"id",value:"value",sortByValue:!1,innerRadius:0,padAngle:0,cornerRadius:0,layers:["arcLinkLabels","arcs","arcLabels","legends"],startAngle:0,endAngle:360,fit:!0,activeInnerRadiusOffset:0,activeOuterRadiusOffset:0,borderWidth:0,borderColor:{from:"color",modifiers:[["darker",1]]},enableArcLabels:!0,arcLabel:"formattedValue",arcLabelsSkipAngle:0,arcLabelsRadiusOffset:.5,arcLabelsTextColor:{theme:"labels.text.fill"},enableArcLinkLabels:!0,arcLinkLabel:"id",arcLinkLabelsSkipAngle:0,arcLinkLabelsOffset:0,arcLinkLabelsDiagonalLength:16,arcLinkLabelsStraightLength:24,arcLinkLabelsThickness:1,arcLinkLabelsTextOffset:6,arcLinkLabelsTextColor:{theme:"labels.text.fill"},arcLinkLabelsColor:{theme:"axis.ticks.line.stroke"},colors:{scheme:"nivo"},defs:[],fill:[],isInteractive:!0,animate:!0,motionConfig:"gentle",transitionMode:"innerRadius",tooltip:function(e){var i=e.datum;return W(G,{id:i.id,value:i.formattedValue,enableChip:!0,color:i.color})},legends:[],role:"img",pixelRatio:"undefined"!=typeof window&&null!=(H=window.devicePixelRatio)?H:1},j=["points"],P=function(i){var t=i.data,n=i.id,r=void 0===n?Y.id:n,a=i.value,o=void 0===a?Y.value:a,s=i.valueFormat,c=i.colors,u=void 0===c?Y.colors:c,v=d(r),f=d(o),g=l(s),L=V(u,"id");return e((function(){return t.map((function(e){var i,t=v(e),n=f(e),r={id:t,label:null!=(i=e.label)?i:t,hidden:!1,value:n,formattedValue:g(n),data:e};return D({},r,{color:L(r)})}))}),[t,v,f,g,L])},q=function(i){var t=i.data,n=i.startAngle,r=i.endAngle,a=i.innerRadius,o=i.outerRadius,d=i.padAngle,l=i.sortByValue,u=i.activeId,v=i.activeInnerRadiusOffset,f=i.activeOuterRadiusOffset,g=i.hiddenIds,L=e((function(){var e=T().value((function(e){return e.value})).startAngle(s(n)).endAngle(s(r)).padAngle(s(d));return l||e.sortValues(null),e}),[n,r,d,l]);return e((function(){var e=t.filter((function(e){return!g.includes(e.id)}));return{dataWithArc:L(e).map((function(e){var i=Math.abs(e.endAngle-e.startAngle);return D({},e.data,{arc:{index:e.index,startAngle:e.startAngle,endAngle:e.endAngle,innerRadius:u===e.data.id?a-v:a,outerRadius:u===e.data.id?o+f:o,thickness:o-a,padAngle:e.padAngle,angle:i,angleDeg:c(i)}})})),legendData:t.map((function(e){return D({},e,{hidden:g.includes(e.id)})}))}}),[L,t,g,u,a,v,o,f])},z=function(e){var n=e.data,r=e.radius,a=e.innerRadius,o=e.startAngle,d=void 0===o?Y.startAngle:o,l=e.endAngle,c=void 0===l?Y.endAngle:l,u=e.padAngle,v=void 0===u?Y.padAngle:u,f=e.sortByValue,g=void 0===f?Y.sortByValue:f,L=e.cornerRadius,h=void 0===L?Y.cornerRadius:L,b=e.activeInnerRadiusOffset,k=void 0===b?Y.activeInnerRadiusOffset:b,A=e.activeOuterRadiusOffset,R=void 0===A?Y.activeOuterRadiusOffset:A,m=i(null),O=m[0],C=m[1],I=i([]),x=I[0],M=I[1],y=q({data:n,startAngle:d,endAngle:c,innerRadius:a,outerRadius:r,padAngle:v,sortByValue:g,activeId:O,activeInnerRadiusOffset:k,activeOuterRadiusOffset:R,hiddenIds:x}),w=t((function(e){M((function(i){return i.indexOf(e)>-1?i.filter((function(i){return i!==e})):[].concat(i,[e])}))}),[]);return D({},y,{arcGenerator:p({cornerRadius:h,padAngle:s(v)}),setActiveId:C,toggleSerie:w})},J=function(n){var r=n.data,a=n.width,o=n.height,d=n.innerRadius,l=void 0===d?Y.innerRadius:d,c=n.startAngle,u=void 0===c?Y.startAngle:c,v=n.endAngle,f=void 0===v?Y.endAngle:v,g=n.padAngle,L=void 0===g?Y.padAngle:g,h=n.sortByValue,b=void 0===h?Y.sortByValue:h,A=n.cornerRadius,R=void 0===A?Y.cornerRadius:A,m=n.fit,O=void 0===m?Y.fit:m,C=n.activeInnerRadiusOffset,I=void 0===C?Y.activeInnerRadiusOffset:C,x=n.activeOuterRadiusOffset,M=void 0===x?Y.activeOuterRadiusOffset:x,y=i(null),w=y[0],W=y[1],S=i([]),T=S[0],V=S[1],B=e((function(){var e,i=Math.min(a,o)/2,t=i*Math.min(l,1),n=a/2,r=o/2;if(O){var d=k(n,r,i,u-90,f-90),s=d.points,c=F(d,j),v=Math.min(a/c.width,o/c.height),g={width:c.width*v,height:c.height*v};g.x=(a-g.width)/2,g.y=(o-g.height)/2,n=(n-c.x)/c.width*c.width*v+g.x,r=(r-c.y)/c.height*c.height*v+g.y,e={box:c,ratio:v,points:s},i*=v,t*=v}return{centerX:n,centerY:r,radius:i,innerRadius:t,debug:e}}),[a,o,l,u,f,O,R]),G=q({data:r,startAngle:u,endAngle:f,innerRadius:B.innerRadius,outerRadius:B.radius,padAngle:L,sortByValue:b,activeId:w,activeInnerRadiusOffset:I,activeOuterRadiusOffset:M,hiddenIds:T}),E=t((function(e){V((function(i){return i.indexOf(e)>-1?i.filter((function(i){return i!==e})):[].concat(i,[e])}))}),[]);return D({arcGenerator:p({cornerRadius:R,padAngle:s(L)}),setActiveId:W,toggleSerie:E},G,B)},K=function(i){var t=i.dataWithArc,n=i.arcGenerator,r=i.centerX,a=i.centerY,o=i.radius,d=i.innerRadius;return e((function(){return{dataWithArc:t,arcGenerator:n,centerX:r,centerY:a,radius:o,innerRadius:d}}),[t,n,r,a,o,d])},N=function(i){var t=i.center,r=i.data,a=i.arcGenerator,o=i.borderWidth,d=i.borderColor,l=i.isInteractive,s=i.onClick,c=i.onMouseEnter,u=i.onMouseMove,v=i.onMouseLeave,f=i.setActiveId,g=i.tooltip,L=i.transitionMode,h=E(),b=h.showTooltipFromEvent,p=h.hideTooltip,k=e((function(){if(l)return function(e,i){null==s||s(e,i)}}),[l,s]),R=e((function(){if(l)return function(e,i){b(n(g,{datum:e}),i),f(e.id),null==c||c(e,i)}}),[l,b,f,c]),m=e((function(){if(l)return function(e,i){b(n(g,{datum:e}),i),null==u||u(e,i)}}),[l,b,u]),O=e((function(){if(l)return function(e,i){p(),f(null),null==v||v(e,i)}}),[l,p,f,v]);return W(A,{center:t,data:r,arcGenerator:a,borderWidth:o,borderColor:d,transitionMode:L,onClick:k,onMouseEnter:R,onMouseMove:m,onMouseLeave:O})},Q=["isInteractive","animate","motionConfig","theme","renderWrapper"],U=function(e){var i=e.data,t=e.id,a=void 0===t?Y.id:t,o=e.value,d=void 0===o?Y.value:o,l=e.valueFormat,s=e.sortByValue,c=void 0===s?Y.sortByValue:s,u=e.layers,L=void 0===u?Y.layers:u,h=e.startAngle,b=void 0===h?Y.startAngle:h,p=e.endAngle,k=void 0===p?Y.endAngle:p,A=e.padAngle,O=void 0===A?Y.padAngle:A,C=e.fit,I=void 0===C?Y.fit:C,x=e.innerRadius,M=void 0===x?Y.innerRadius:x,y=e.cornerRadius,w=void 0===y?Y.cornerRadius:y,S=e.activeInnerRadiusOffset,T=void 0===S?Y.activeInnerRadiusOffset:S,V=e.activeOuterRadiusOffset,B=void 0===V?Y.activeOuterRadiusOffset:V,G=e.width,E=e.height,D=e.margin,F=e.colors,H=void 0===F?Y.colors:F,j=e.borderWidth,q=void 0===j?Y.borderWidth:j,z=e.borderColor,Q=void 0===z?Y.borderColor:z,U=e.enableArcLabels,Z=void 0===U?Y.enableArcLabels:U,$=e.arcLabel,_=void 0===$?Y.arcLabel:$,ee=e.arcLabelsSkipAngle,ie=void 0===ee?Y.arcLabelsSkipAngle:ee,te=e.arcLabelsTextColor,ne=void 0===te?Y.arcLabelsTextColor:te,re=e.arcLabelsRadiusOffset,ae=void 0===re?Y.arcLabelsRadiusOffset:re,oe=e.arcLabelsComponent,de=e.enableArcLinkLabels,le=void 0===de?Y.enableArcLinkLabels:de,se=e.arcLinkLabel,ce=void 0===se?Y.arcLinkLabel:se,ue=e.arcLinkLabelsSkipAngle,ve=void 0===ue?Y.arcLinkLabelsSkipAngle:ue,fe=e.arcLinkLabelsOffset,ge=void 0===fe?Y.arcLinkLabelsOffset:fe,Le=e.arcLinkLabelsDiagonalLength,he=void 0===Le?Y.arcLinkLabelsDiagonalLength:Le,be=e.arcLinkLabelsStraightLength,pe=void 0===be?Y.arcLinkLabelsStraightLength:be,ke=e.arcLinkLabelsThickness,Ae=void 0===ke?Y.arcLinkLabelsThickness:ke,Re=e.arcLinkLabelsTextOffset,me=void 0===Re?Y.arcLinkLabelsTextOffset:Re,Oe=e.arcLinkLabelsTextColor,Ce=void 0===Oe?Y.arcLinkLabelsTextColor:Oe,Ie=e.arcLinkLabelsColor,xe=void 0===Ie?Y.arcLinkLabelsColor:Ie,Me=e.arcLinkLabelComponent,ye=e.defs,we=void 0===ye?Y.defs:ye,We=e.fill,Se=void 0===We?Y.fill:We,Te=e.isInteractive,Ve=void 0===Te?Y.isInteractive:Te,Be=e.onClick,Ge=e.onMouseEnter,Ee=e.onMouseMove,De=e.onMouseLeave,Fe=e.tooltip,He=void 0===Fe?Y.tooltip:Fe,Xe=e.transitionMode,Ye=void 0===Xe?Y.transitionMode:Xe,je=e.legends,Pe=void 0===je?Y.legends:je,qe=e.role,ze=void 0===qe?Y.role:qe,Je=v(G,E,D),Ke=Je.outerWidth,Ne=Je.outerHeight,Qe=Je.margin,Ue=Je.innerWidth,Ze=Je.innerHeight,$e=P({data:i,id:a,value:d,valueFormat:l,colors:H}),_e=J({data:$e,width:Ue,height:Ze,fit:I,innerRadius:M,startAngle:b,endAngle:k,padAngle:O,sortByValue:c,cornerRadius:w,activeInnerRadiusOffset:T,activeOuterRadiusOffset:B}),ei=_e.dataWithArc,ii=_e.legendData,ti=_e.arcGenerator,ni=_e.centerX,ri=_e.centerY,ai=_e.radius,oi=_e.innerRadius,di=_e.setActiveId,li=_e.toggleSerie,si=f(we,ei,Se),ci={arcLinkLabels:null,arcs:null,arcLabels:null,legends:null};le&&L.includes("arcLinkLabels")&&(ci.arcLinkLabels=W(R,{center:[ni,ri],data:ei,label:ce,skipAngle:ve,offset:ge,diagonalLength:he,straightLength:pe,strokeWidth:Ae,textOffset:me,textColor:Ce,linkColor:xe,component:Me},"arcLinkLabels")),L.includes("arcs")&&(ci.arcs=W(N,{center:[ni,ri],data:ei,arcGenerator:ti,borderWidth:q,borderColor:Q,isInteractive:Ve,onClick:Be,onMouseEnter:Ge,onMouseMove:Ee,onMouseLeave:De,setActiveId:di,tooltip:He,transitionMode:Ye},"arcs")),Z&&L.includes("arcLabels")&&(ci.arcLabels=W(m,{center:[ni,ri],data:ei,label:_,radiusOffset:ae,skipAngle:ie,textColor:ne,transitionMode:Ye,component:oe},"arcLabels")),Pe.length>0&&L.includes("legends")&&(ci.legends=W(X,{width:Ue,height:Ze,data:ii,legends:Pe,toggleSerie:li},"legends"));var ui=K({dataWithArc:ei,arcGenerator:ti,centerX:ni,centerY:ri,radius:ai,innerRadius:oi});return W(g,{width:Ke,height:Ne,margin:Qe,defs:si,role:ze,children:L.map((function(e,i){return void 0!==ci[e]?ci[e]:"function"==typeof e?W(r,{children:n(e,ui)},i):null}))})},Z=function(e){var i=e.isInteractive,t=void 0===i?Y.isInteractive:i,n=e.animate,r=void 0===n?Y.animate:n,a=e.motionConfig,o=void 0===a?Y.motionConfig:a,d=e.theme,l=e.renderWrapper,s=F(e,Q);return W(u,{animate:r,isInteractive:t,motionConfig:o,renderWrapper:l,theme:d,children:W(U,D({isInteractive:t},s))})},$=function(e){return W(L,{children:function(i){var t=i.width,n=i.height;return W(Z,D({width:t,height:n},e))}})},_=["isInteractive","theme","renderWrapper"],ee=function(i){var t=i.data,r=i.id,d=void 0===r?Y.id:r,l=i.value,s=void 0===l?Y.value:l,c=i.valueFormat,u=i.sortByValue,f=void 0===u?Y.sortByValue:u,g=i.startAngle,L=void 0===g?Y.startAngle:g,p=i.endAngle,k=void 0===p?Y.endAngle:p,A=i.padAngle,R=void 0===A?Y.padAngle:A,m=i.fit,y=void 0===m?Y.fit:m,S=i.innerRadius,T=void 0===S?Y.innerRadius:S,V=i.cornerRadius,G=void 0===V?Y.cornerRadius:V,F=i.activeInnerRadiusOffset,H=void 0===F?Y.activeInnerRadiusOffset:F,X=i.activeOuterRadiusOffset,j=void 0===X?Y.activeOuterRadiusOffset:X,q=i.width,z=i.height,K=i.margin,N=i.pixelRatio,Q=void 0===N?1:N,U=i.colors,Z=void 0===U?Y.colors:U,$=i.borderWidth,_=void 0===$?Y.borderWidth:$,ee=i.borderColor,ie=void 0===ee?Y.borderColor:ee,te=i.enableArcLabels,ne=void 0===te?Y.enableArcLabels:te,re=i.arcLabel,ae=void 0===re?Y.arcLabel:re,oe=i.arcLabelsSkipAngle,de=void 0===oe?Y.arcLabelsSkipAngle:oe,le=i.arcLabelsTextColor,se=void 0===le?Y.arcLabelsTextColor:le,ce=i.arcLabelsRadiusOffset,ue=void 0===ce?Y.arcLabelsRadiusOffset:ce,ve=i.enableArcLinkLabels,fe=void 0===ve?Y.enableArcLinkLabels:ve,ge=i.arcLinkLabel,Le=void 0===ge?Y.arcLinkLabel:ge,he=i.arcLinkLabelsSkipAngle,be=void 0===he?Y.arcLinkLabelsSkipAngle:he,pe=i.arcLinkLabelsOffset,ke=void 0===pe?Y.arcLinkLabelsOffset:pe,Ae=i.arcLinkLabelsDiagonalLength,Re=void 0===Ae?Y.arcLinkLabelsDiagonalLength:Ae,me=i.arcLinkLabelsStraightLength,Oe=void 0===me?Y.arcLinkLabelsStraightLength:me,Ce=i.arcLinkLabelsThickness,Ie=void 0===Ce?Y.arcLinkLabelsThickness:Ce,xe=i.arcLinkLabelsTextOffset,Me=void 0===xe?Y.arcLinkLabelsTextOffset:xe,ye=i.arcLinkLabelsTextColor,we=void 0===ye?Y.arcLinkLabelsTextColor:ye,We=i.arcLinkLabelsColor,Se=void 0===We?Y.arcLinkLabelsColor:We,Te=i.isInteractive,Ve=void 0===Te?Y.isInteractive:Te,Be=i.onClick,Ge=i.onMouseMove,Ee=i.tooltip,De=void 0===Ee?Y.tooltip:Ee,Fe=i.legends,He=void 0===Fe?Y.legends:Fe,Xe=a(null),Ye=h(),je=v(q,z,K),Pe=je.margin,qe=je.innerWidth,ze=je.innerHeight,Je=je.outerWidth,Ke=je.outerHeight,Ne=P({data:t,id:d,value:s,valueFormat:c,colors:Z}),Qe=J({data:Ne,width:qe,height:ze,fit:y,innerRadius:T,startAngle:L,endAngle:k,padAngle:R,sortByValue:f,cornerRadius:G,activeInnerRadiusOffset:H,activeOuterRadiusOffset:j}),Ue=Qe.dataWithArc,Ze=Qe.arcGenerator,$e=Qe.centerX,_e=Qe.centerY,ei=Qe.radius,ii=Qe.innerRadius,ti=Qe.setActiveId,ni=B(ie,Ye),ri=O({data:Ue,label:ae,skipAngle:de,offset:ue,textColor:se}),ai=C({data:Ue,skipAngle:be,offset:ke,diagonalLength:Re,straightLength:Oe,label:Le,linkColor:Se,textOffset:Me,textColor:we});o((function(){if(Xe.current){Xe.current.width=Je*Q,Xe.current.height=Ke*Q;var e=Xe.current.getContext("2d");e.scale(Q,Q),e.fillStyle=Ye.background,e.fillRect(0,0,Je,Ke),e.save(),e.translate(Pe.left,Pe.top),Ze.context(e),e.save(),e.translate($e,_e),Ue.forEach((function(i){e.beginPath(),e.fillStyle=i.color,e.strokeStyle=ni(i),e.lineWidth=_,Ze(i.arc),e.fill(),_>0&&e.stroke()})),!0===fe&&I(e,ai,Ye,Ie),!0===ne&&x(e,ri,Ye),e.restore(),He.forEach((function(i){w(e,D({},i,{data:Ue,containerWidth:qe,containerHeight:ze,theme:Ye}))}))}}),[Xe,qe,ze,Je,Ke,Pe.top,Pe.left,Q,$e,_e,Ze,Ue,ni,ne,ri,fe,ai,Ie,He,Ye]);var oi=e((function(){return Ue.map((function(e){return D({id:e.id},e.arc)}))}),[Ue]),di=function(e){if(!Xe.current)return null;var i=b(Xe.current,e),t=i[0],n=i[1],r=M(Pe.left+$e,Pe.top+_e,ei,ii,oi,t,n);return r?Ue.find((function(e){return e.id===r.id})):null},li=E(),si=li.showTooltipFromEvent,ci=li.hideTooltip,ui=function(e){var i=di(e);i?(null==Ge||Ge(i,e),ti(i.id),si(n(De,{datum:i}),e)):(ti(null),ci())};return W("canvas",{ref:Xe,width:Je*Q,height:Ke*Q,style:{width:Je,height:Ke,cursor:Ve?"auto":"normal"},onMouseEnter:Ve?ui:void 0,onMouseMove:Ve?ui:void 0,onMouseLeave:Ve?function(){ci()}:void 0,onClick:Ve?function(e){if(Be){var i=di(e);i&&Be(i,e)}}:void 0})},ie=function(e){var i=e.isInteractive,t=void 0===i?Y.isInteractive:i,n=e.theme,r=e.renderWrapper,a=F(e,_);return W(u,{isInteractive:t,renderWrapper:r,theme:n,children:W(ee,D({isInteractive:t},a))})},te=function(e){return W(L,{children:function(i){var t=i.width,n=i.height;return W(ie,D({width:t,height:n},e))}})};export{Z as Pie,ie as PieCanvas,$ as ResponsivePie,te as ResponsivePieCanvas,Y as defaultProps,P as useNormalizedData,z as usePie,q as usePieArcs,J as usePieFromBox,K as usePieLayerContext}; | ||
| //# sourceMappingURL=nivo-pie.es.js.map |
@@ -1,1115 +0,2 @@ | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/arcs'), require('@nivo/legends'), require('react/jsx-runtime'), require('d3-shape'), require('@nivo/colors'), require('@nivo/tooltip')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/arcs', '@nivo/legends', 'react/jsx-runtime', 'd3-shape', '@nivo/colors', '@nivo/tooltip'], factory) : | ||
| (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.nivo, global['react/jsx-runtime'], global.d3, global.nivo, global.nivo)); | ||
| }(this, (function (exports, react, core, arcs, legends, jsxRuntime, d3Shape, colors, tooltip) { 'use strict'; | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| if (enumerableOnly) symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| }); | ||
| keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| if (i % 2) { | ||
| ownKeys(Object(source), true).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } else if (Object.getOwnPropertyDescriptors) { | ||
| Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
| } else { | ||
| ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = {}; | ||
| var sourceKeys = Object.keys(source); | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
| key = sourceKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutProperties(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = _objectWithoutPropertiesLoose(source, excluded); | ||
| var key, i; | ||
| if (Object.getOwnPropertySymbols) { | ||
| var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
| for (i = 0; i < sourceSymbolKeys.length; i++) { | ||
| key = sourceSymbolKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| var PieLegends = function PieLegends(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height, | ||
| legends$1 = _ref.legends, | ||
| data = _ref.data, | ||
| toggleSerie = _ref.toggleSerie; | ||
| return jsxRuntime.jsx(jsxRuntime.Fragment, { | ||
| children: legends$1.map(function (legend, i) { | ||
| var _legend$data; | ||
| return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, { | ||
| containerWidth: width, | ||
| containerHeight: height, | ||
| data: (_legend$data = legend.data) !== null && _legend$data !== void 0 ? _legend$data : data, | ||
| toggleSerie: legend.toggleSerie ? toggleSerie : undefined | ||
| }), i); | ||
| }) | ||
| }); | ||
| }; | ||
| 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(o); | ||
| 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) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
| if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"] != null) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| function _slicedToArray(arr, i) { | ||
| return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); | ||
| } | ||
| var PieTooltip = function PieTooltip(_ref) { | ||
| var datum = _ref.datum; | ||
| return jsxRuntime.jsx(tooltip.BasicTooltip, { | ||
| id: datum.id, | ||
| value: datum.formattedValue, | ||
| enableChip: true, | ||
| color: datum.color | ||
| }); | ||
| }; | ||
| var _window$devicePixelRa; | ||
| var defaultProps = { | ||
| id: 'id', | ||
| value: 'value', | ||
| sortByValue: false, | ||
| innerRadius: 0, | ||
| padAngle: 0, | ||
| cornerRadius: 0, | ||
| layers: ['arcLinkLabels', 'arcs', 'arcLabels', 'legends'], | ||
| startAngle: 0, | ||
| endAngle: 360, | ||
| fit: true, | ||
| activeInnerRadiusOffset: 0, | ||
| activeOuterRadiusOffset: 0, | ||
| borderWidth: 0, | ||
| borderColor: { | ||
| from: 'color', | ||
| modifiers: [['darker', 1]] | ||
| }, | ||
| enableArcLabels: true, | ||
| arcLabel: 'formattedValue', | ||
| arcLabelsSkipAngle: 0, | ||
| arcLabelsRadiusOffset: 0.5, | ||
| arcLabelsTextColor: { | ||
| theme: 'labels.text.fill' | ||
| }, | ||
| enableArcLinkLabels: true, | ||
| arcLinkLabel: 'id', | ||
| arcLinkLabelsSkipAngle: 0, | ||
| arcLinkLabelsOffset: 0, | ||
| arcLinkLabelsDiagonalLength: 16, | ||
| arcLinkLabelsStraightLength: 24, | ||
| arcLinkLabelsThickness: 1, | ||
| arcLinkLabelsTextOffset: 6, | ||
| arcLinkLabelsTextColor: { | ||
| theme: 'labels.text.fill' | ||
| }, | ||
| arcLinkLabelsColor: { | ||
| theme: 'axis.ticks.line.stroke' | ||
| }, | ||
| colors: { | ||
| scheme: 'nivo' | ||
| }, | ||
| defs: [], | ||
| fill: [], | ||
| isInteractive: true, | ||
| animate: true, | ||
| motionConfig: 'gentle', | ||
| transitionMode: 'innerRadius', | ||
| tooltip: PieTooltip, | ||
| legends: [], | ||
| role: 'img', | ||
| pixelRatio: typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) !== null && _window$devicePixelRa !== void 0 ? _window$devicePixelRa : 1 : 1 | ||
| }; | ||
| var useNormalizedData = function useNormalizedData(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$colors = _ref.colors, | ||
| colors$1 = _ref$colors === void 0 ? defaultProps.colors : _ref$colors; | ||
| var getId = core.usePropertyAccessor(id); | ||
| var getValue = core.usePropertyAccessor(value); | ||
| var formatValue = core.useValueFormatter(valueFormat); | ||
| var getColor = colors.useOrdinalColorScale(colors$1, 'id'); | ||
| return react.useMemo(function () { | ||
| return data.map(function (datum) { | ||
| var _datum$label; | ||
| var datumId = getId(datum); | ||
| var datumValue = getValue(datum); | ||
| var normalizedDatum = { | ||
| id: datumId, | ||
| label: (_datum$label = datum.label) !== null && _datum$label !== void 0 ? _datum$label : datumId, | ||
| hidden: false, | ||
| value: datumValue, | ||
| formattedValue: formatValue(datumValue), | ||
| data: datum | ||
| }; | ||
| return _objectSpread2(_objectSpread2({}, normalizedDatum), {}, { | ||
| color: getColor(normalizedDatum) | ||
| }); | ||
| }); | ||
| }, [data, getId, getValue, formatValue, getColor]); | ||
| }; | ||
| var usePieArcs = function usePieArcs(_ref2) { | ||
| var data = _ref2.data, | ||
| startAngle = _ref2.startAngle, | ||
| endAngle = _ref2.endAngle, | ||
| innerRadius = _ref2.innerRadius, | ||
| outerRadius = _ref2.outerRadius, | ||
| padAngle = _ref2.padAngle, | ||
| sortByValue = _ref2.sortByValue, | ||
| activeId = _ref2.activeId, | ||
| activeInnerRadiusOffset = _ref2.activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset = _ref2.activeOuterRadiusOffset, | ||
| hiddenIds = _ref2.hiddenIds; | ||
| var pie = react.useMemo(function () { | ||
| var innerPie = d3Shape.pie().value(function (d) { | ||
| return d.value; | ||
| }).startAngle(core.degreesToRadians(startAngle)).endAngle(core.degreesToRadians(endAngle)).padAngle(core.degreesToRadians(padAngle)); | ||
| if (!sortByValue) { | ||
| innerPie.sortValues(null); | ||
| } | ||
| return innerPie; | ||
| }, [startAngle, endAngle, padAngle, sortByValue]); | ||
| return react.useMemo(function () { | ||
| 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); | ||
| return _objectSpread2(_objectSpread2({}, arc.data), {}, { | ||
| arc: { | ||
| index: arc.index, | ||
| startAngle: arc.startAngle, | ||
| endAngle: arc.endAngle, | ||
| innerRadius: activeId === arc.data.id ? innerRadius - activeInnerRadiusOffset : innerRadius, | ||
| outerRadius: activeId === arc.data.id ? outerRadius + activeOuterRadiusOffset : outerRadius, | ||
| thickness: outerRadius - innerRadius, | ||
| padAngle: arc.padAngle, | ||
| angle: angle, | ||
| angleDeg: core.radiansToDegrees(angle) | ||
| } | ||
| }); | ||
| }); | ||
| 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]); | ||
| }; | ||
| var usePie = function usePie(_ref3) { | ||
| var data = _ref3.data, | ||
| radius = _ref3.radius, | ||
| innerRadius = _ref3.innerRadius, | ||
| _ref3$startAngle = _ref3.startAngle, | ||
| startAngle = _ref3$startAngle === void 0 ? defaultProps.startAngle : _ref3$startAngle, | ||
| _ref3$endAngle = _ref3.endAngle, | ||
| endAngle = _ref3$endAngle === void 0 ? defaultProps.endAngle : _ref3$endAngle, | ||
| _ref3$padAngle = _ref3.padAngle, | ||
| padAngle = _ref3$padAngle === void 0 ? defaultProps.padAngle : _ref3$padAngle, | ||
| _ref3$sortByValue = _ref3.sortByValue, | ||
| sortByValue = _ref3$sortByValue === void 0 ? defaultProps.sortByValue : _ref3$sortByValue, | ||
| _ref3$cornerRadius = _ref3.cornerRadius, | ||
| cornerRadius = _ref3$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref3$cornerRadius, | ||
| _ref3$activeInnerRadi = _ref3.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref3$activeInnerRadi === void 0 ? defaultProps.activeInnerRadiusOffset : _ref3$activeInnerRadi, | ||
| _ref3$activeOuterRadi = _ref3.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref3$activeOuterRadi === void 0 ? defaultProps.activeOuterRadiusOffset : _ref3$activeOuterRadi; | ||
| var _useState = react.useState(null), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| activeId = _useState2[0], | ||
| setActiveId = _useState2[1]; | ||
| var _useState3 = react.useState([]), | ||
| _useState4 = _slicedToArray(_useState3, 2), | ||
| hiddenIds = _useState4[0], | ||
| setHiddenIds = _useState4[1]; | ||
| var pieArcs = usePieArcs({ | ||
| data: data, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: radius, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| activeId: activeId, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| 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({ | ||
| cornerRadius: cornerRadius, | ||
| padAngle: core.degreesToRadians(padAngle) | ||
| }); | ||
| return _objectSpread2(_objectSpread2({}, pieArcs), {}, { | ||
| arcGenerator: arcGenerator, | ||
| setActiveId: setActiveId, | ||
| toggleSerie: toggleSerie | ||
| }); | ||
| }; | ||
| var usePieFromBox = function usePieFromBox(_ref4) { | ||
| var data = _ref4.data, | ||
| width = _ref4.width, | ||
| height = _ref4.height, | ||
| _ref4$innerRadius = _ref4.innerRadius, | ||
| innerRadiusRatio = _ref4$innerRadius === void 0 ? defaultProps.innerRadius : _ref4$innerRadius, | ||
| _ref4$startAngle = _ref4.startAngle, | ||
| startAngle = _ref4$startAngle === void 0 ? defaultProps.startAngle : _ref4$startAngle, | ||
| _ref4$endAngle = _ref4.endAngle, | ||
| endAngle = _ref4$endAngle === void 0 ? defaultProps.endAngle : _ref4$endAngle, | ||
| _ref4$padAngle = _ref4.padAngle, | ||
| padAngle = _ref4$padAngle === void 0 ? defaultProps.padAngle : _ref4$padAngle, | ||
| _ref4$sortByValue = _ref4.sortByValue, | ||
| sortByValue = _ref4$sortByValue === void 0 ? defaultProps.sortByValue : _ref4$sortByValue, | ||
| _ref4$cornerRadius = _ref4.cornerRadius, | ||
| cornerRadius = _ref4$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref4$cornerRadius, | ||
| _ref4$fit = _ref4.fit, | ||
| fit = _ref4$fit === void 0 ? defaultProps.fit : _ref4$fit, | ||
| _ref4$activeInnerRadi = _ref4.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref4$activeInnerRadi === void 0 ? defaultProps.activeInnerRadiusOffset : _ref4$activeInnerRadi, | ||
| _ref4$activeOuterRadi = _ref4.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref4$activeOuterRadi === void 0 ? defaultProps.activeOuterRadiusOffset : _ref4$activeOuterRadi; | ||
| 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 () { | ||
| var radius = Math.min(width, height) / 2; | ||
| var innerRadius = radius * Math.min(innerRadiusRatio, 1); | ||
| var centerX = width / 2; | ||
| var centerY = height / 2; | ||
| var boundingBox; | ||
| if (fit) { | ||
| var _computeArcBoundingBo = arcs.computeArcBoundingBox(centerX, centerY, radius, startAngle - 90, endAngle - 90), | ||
| points = _computeArcBoundingBo.points, | ||
| box = _objectWithoutProperties(_computeArcBoundingBo, ["points"]); | ||
| var ratio = Math.min(width / box.width, height / box.height); | ||
| var adjustedBox = { | ||
| width: box.width * ratio, | ||
| height: box.height * ratio | ||
| }; | ||
| adjustedBox.x = (width - adjustedBox.width) / 2; | ||
| adjustedBox.y = (height - adjustedBox.height) / 2; | ||
| centerX = (centerX - box.x) / box.width * box.width * ratio + adjustedBox.x; | ||
| centerY = (centerY - box.y) / box.height * box.height * ratio + adjustedBox.y; | ||
| boundingBox = { | ||
| box: box, | ||
| ratio: ratio, | ||
| points: points | ||
| }; | ||
| radius = radius * ratio; | ||
| innerRadius = innerRadius * ratio; | ||
| } | ||
| return { | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius, | ||
| debug: boundingBox | ||
| }; | ||
| }, [width, height, innerRadiusRatio, startAngle, endAngle, fit, cornerRadius]); | ||
| var pieArcs = usePieArcs({ | ||
| data: data, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: computedProps.innerRadius, | ||
| outerRadius: computedProps.radius, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| activeId: activeId, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| 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({ | ||
| cornerRadius: cornerRadius, | ||
| padAngle: core.degreesToRadians(padAngle) | ||
| }); | ||
| return _objectSpread2(_objectSpread2({ | ||
| arcGenerator: arcGenerator, | ||
| setActiveId: setActiveId, | ||
| toggleSerie: toggleSerie | ||
| }, pieArcs), computedProps); | ||
| }; | ||
| var usePieLayerContext = function usePieLayerContext(_ref5) { | ||
| var dataWithArc = _ref5.dataWithArc, | ||
| arcGenerator = _ref5.arcGenerator, | ||
| centerX = _ref5.centerX, | ||
| centerY = _ref5.centerY, | ||
| radius = _ref5.radius, | ||
| innerRadius = _ref5.innerRadius; | ||
| return react.useMemo(function () { | ||
| return { | ||
| dataWithArc: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius | ||
| }; | ||
| }, [dataWithArc, arcGenerator, centerX, centerY, radius, innerRadius]); | ||
| }; | ||
| var Arcs = function Arcs(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| arcGenerator = _ref.arcGenerator, | ||
| borderWidth = _ref.borderWidth, | ||
| borderColor = _ref.borderColor, | ||
| isInteractive = _ref.isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| setActiveId = _ref.setActiveId, | ||
| tooltip$1 = _ref.tooltip, | ||
| transitionMode = _ref.transitionMode; | ||
| var _useTooltip = tooltip.useTooltip(), | ||
| showTooltipFromEvent = _useTooltip.showTooltipFromEvent, | ||
| hideTooltip = _useTooltip.hideTooltip; | ||
| var handleClick = react.useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| onClick === null || onClick === void 0 ? void 0 : onClick(datum, event); | ||
| }; | ||
| }, [isInteractive, onClick]); | ||
| var handleMouseEnter = react.useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| showTooltipFromEvent(react.createElement(tooltip$1, { | ||
| datum: datum | ||
| }), event); | ||
| setActiveId(datum.id); | ||
| onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(datum, event); | ||
| }; | ||
| }, [isInteractive, showTooltipFromEvent, setActiveId, onMouseEnter]); | ||
| var handleMouseMove = react.useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| showTooltipFromEvent(react.createElement(tooltip$1, { | ||
| datum: datum | ||
| }), event); | ||
| onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| }; | ||
| }, [isInteractive, showTooltipFromEvent, onMouseMove]); | ||
| var handleMouseLeave = react.useMemo(function () { | ||
| if (!isInteractive) return undefined; | ||
| return function (datum, event) { | ||
| hideTooltip(); | ||
| setActiveId(null); | ||
| onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(datum, event); | ||
| }; | ||
| }, [isInteractive, hideTooltip, setActiveId, onMouseLeave]); | ||
| return jsxRuntime.jsx(arcs.ArcsLayer, { | ||
| center: center, | ||
| data: data, | ||
| arcGenerator: arcGenerator, | ||
| borderWidth: borderWidth, | ||
| borderColor: borderColor, | ||
| transitionMode: transitionMode, | ||
| onClick: handleClick, | ||
| onMouseEnter: handleMouseEnter, | ||
| onMouseMove: handleMouseMove, | ||
| onMouseLeave: handleMouseLeave | ||
| }); | ||
| }; | ||
| var InnerPie = function InnerPie(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$sortByValue = _ref.sortByValue, | ||
| sortByValue = _ref$sortByValue === void 0 ? defaultProps.sortByValue : _ref$sortByValue, | ||
| _ref$layers = _ref.layers, | ||
| layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers, | ||
| _ref$startAngle = _ref.startAngle, | ||
| startAngle = _ref$startAngle === void 0 ? defaultProps.startAngle : _ref$startAngle, | ||
| _ref$endAngle = _ref.endAngle, | ||
| endAngle = _ref$endAngle === void 0 ? defaultProps.endAngle : _ref$endAngle, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? defaultProps.padAngle : _ref$padAngle, | ||
| _ref$fit = _ref.fit, | ||
| fit = _ref$fit === void 0 ? defaultProps.fit : _ref$fit, | ||
| _ref$innerRadius = _ref.innerRadius, | ||
| innerRadiusRatio = _ref$innerRadius === void 0 ? defaultProps.innerRadius : _ref$innerRadius, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref$cornerRadius, | ||
| _ref$activeInnerRadiu = _ref.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref$activeInnerRadiu === void 0 ? defaultProps.activeInnerRadiusOffset : _ref$activeInnerRadiu, | ||
| _ref$activeOuterRadiu = _ref.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref$activeOuterRadiu === void 0 ? defaultProps.activeOuterRadiusOffset : _ref$activeOuterRadiu, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| partialMargin = _ref.margin, | ||
| _ref$colors = _ref.colors, | ||
| colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors, | ||
| _ref$borderWidth = _ref.borderWidth, | ||
| borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth, | ||
| _ref$borderColor = _ref.borderColor, | ||
| borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor, | ||
| _ref$enableArcLabels = _ref.enableArcLabels, | ||
| enableArcLabels = _ref$enableArcLabels === void 0 ? defaultProps.enableArcLabels : _ref$enableArcLabels, | ||
| _ref$arcLabel = _ref.arcLabel, | ||
| arcLabel = _ref$arcLabel === void 0 ? defaultProps.arcLabel : _ref$arcLabel, | ||
| _ref$arcLabelsSkipAng = _ref.arcLabelsSkipAngle, | ||
| arcLabelsSkipAngle = _ref$arcLabelsSkipAng === void 0 ? defaultProps.arcLabelsSkipAngle : _ref$arcLabelsSkipAng, | ||
| _ref$arcLabelsTextCol = _ref.arcLabelsTextColor, | ||
| arcLabelsTextColor = _ref$arcLabelsTextCol === void 0 ? defaultProps.arcLabelsTextColor : _ref$arcLabelsTextCol, | ||
| _ref$arcLabelsRadiusO = _ref.arcLabelsRadiusOffset, | ||
| arcLabelsRadiusOffset = _ref$arcLabelsRadiusO === void 0 ? defaultProps.arcLabelsRadiusOffset : _ref$arcLabelsRadiusO, | ||
| arcLabelsComponent = _ref.arcLabelsComponent, | ||
| _ref$enableArcLinkLab = _ref.enableArcLinkLabels, | ||
| enableArcLinkLabels = _ref$enableArcLinkLab === void 0 ? defaultProps.enableArcLinkLabels : _ref$enableArcLinkLab, | ||
| _ref$arcLinkLabel = _ref.arcLinkLabel, | ||
| arcLinkLabel = _ref$arcLinkLabel === void 0 ? defaultProps.arcLinkLabel : _ref$arcLinkLabel, | ||
| _ref$arcLinkLabelsSki = _ref.arcLinkLabelsSkipAngle, | ||
| arcLinkLabelsSkipAngle = _ref$arcLinkLabelsSki === void 0 ? defaultProps.arcLinkLabelsSkipAngle : _ref$arcLinkLabelsSki, | ||
| _ref$arcLinkLabelsOff = _ref.arcLinkLabelsOffset, | ||
| arcLinkLabelsOffset = _ref$arcLinkLabelsOff === void 0 ? defaultProps.arcLinkLabelsOffset : _ref$arcLinkLabelsOff, | ||
| _ref$arcLinkLabelsDia = _ref.arcLinkLabelsDiagonalLength, | ||
| arcLinkLabelsDiagonalLength = _ref$arcLinkLabelsDia === void 0 ? defaultProps.arcLinkLabelsDiagonalLength : _ref$arcLinkLabelsDia, | ||
| _ref$arcLinkLabelsStr = _ref.arcLinkLabelsStraightLength, | ||
| arcLinkLabelsStraightLength = _ref$arcLinkLabelsStr === void 0 ? defaultProps.arcLinkLabelsStraightLength : _ref$arcLinkLabelsStr, | ||
| _ref$arcLinkLabelsThi = _ref.arcLinkLabelsThickness, | ||
| arcLinkLabelsThickness = _ref$arcLinkLabelsThi === void 0 ? defaultProps.arcLinkLabelsThickness : _ref$arcLinkLabelsThi, | ||
| _ref$arcLinkLabelsTex = _ref.arcLinkLabelsTextOffset, | ||
| arcLinkLabelsTextOffset = _ref$arcLinkLabelsTex === void 0 ? defaultProps.arcLinkLabelsTextOffset : _ref$arcLinkLabelsTex, | ||
| _ref$arcLinkLabelsTex2 = _ref.arcLinkLabelsTextColor, | ||
| arcLinkLabelsTextColor = _ref$arcLinkLabelsTex2 === void 0 ? defaultProps.arcLinkLabelsTextColor : _ref$arcLinkLabelsTex2, | ||
| _ref$arcLinkLabelsCol = _ref.arcLinkLabelsColor, | ||
| arcLinkLabelsColor = _ref$arcLinkLabelsCol === void 0 ? defaultProps.arcLinkLabelsColor : _ref$arcLinkLabelsCol, | ||
| arcLinkLabelComponent = _ref.arcLinkLabelComponent, | ||
| _ref$defs = _ref.defs, | ||
| defs = _ref$defs === void 0 ? defaultProps.defs : _ref$defs, | ||
| _ref$fill = _ref.fill, | ||
| fill = _ref$fill === void 0 ? defaultProps.fill : _ref$fill, | ||
| _ref$isInteractive = _ref.isInteractive, | ||
| isInteractive = _ref$isInteractive === void 0 ? defaultProps.isInteractive : _ref$isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| _ref$tooltip = _ref.tooltip, | ||
| tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip, | ||
| _ref$transitionMode = _ref.transitionMode, | ||
| transitionMode = _ref$transitionMode === void 0 ? defaultProps.transitionMode : _ref$transitionMode, | ||
| _ref$legends = _ref.legends, | ||
| legends = _ref$legends === void 0 ? defaultProps.legends : _ref$legends, | ||
| _ref$role = _ref.role, | ||
| role = _ref$role === void 0 ? defaultProps.role : _ref$role; | ||
| var _useDimensions = core.useDimensions(width, height, partialMargin), | ||
| outerWidth = _useDimensions.outerWidth, | ||
| outerHeight = _useDimensions.outerHeight, | ||
| margin = _useDimensions.margin, | ||
| innerWidth = _useDimensions.innerWidth, | ||
| innerHeight = _useDimensions.innerHeight; | ||
| var normalizedData = useNormalizedData({ | ||
| data: data, | ||
| id: id, | ||
| value: value, | ||
| valueFormat: valueFormat, | ||
| colors: colors | ||
| }); | ||
| var _usePieFromBox = usePieFromBox({ | ||
| data: normalizedData, | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| fit: fit, | ||
| innerRadius: innerRadiusRatio, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| cornerRadius: cornerRadius, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset: activeOuterRadiusOffset | ||
| }), | ||
| dataWithArc = _usePieFromBox.dataWithArc, | ||
| legendData = _usePieFromBox.legendData, | ||
| arcGenerator = _usePieFromBox.arcGenerator, | ||
| centerX = _usePieFromBox.centerX, | ||
| centerY = _usePieFromBox.centerY, | ||
| radius = _usePieFromBox.radius, | ||
| innerRadius = _usePieFromBox.innerRadius, | ||
| setActiveId = _usePieFromBox.setActiveId, | ||
| toggleSerie = _usePieFromBox.toggleSerie; | ||
| var boundDefs = core.bindDefs(defs, dataWithArc, fill); | ||
| var layerById = { | ||
| arcLinkLabels: null, | ||
| arcs: null, | ||
| arcLabels: null, | ||
| legends: null | ||
| }; | ||
| if (enableArcLinkLabels && layers.includes('arcLinkLabels')) { | ||
| layerById.arcLinkLabels = jsxRuntime.jsx(arcs.ArcLinkLabelsLayer, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| label: arcLinkLabel, | ||
| skipAngle: arcLinkLabelsSkipAngle, | ||
| offset: arcLinkLabelsOffset, | ||
| diagonalLength: arcLinkLabelsDiagonalLength, | ||
| straightLength: arcLinkLabelsStraightLength, | ||
| strokeWidth: arcLinkLabelsThickness, | ||
| textOffset: arcLinkLabelsTextOffset, | ||
| textColor: arcLinkLabelsTextColor, | ||
| linkColor: arcLinkLabelsColor, | ||
| component: arcLinkLabelComponent | ||
| }, "arcLinkLabels"); | ||
| } | ||
| if (layers.includes('arcs')) { | ||
| layerById.arcs = jsxRuntime.jsx(Arcs, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| borderWidth: borderWidth, | ||
| borderColor: borderColor, | ||
| isInteractive: isInteractive, | ||
| onClick: onClick, | ||
| onMouseEnter: onMouseEnter, | ||
| onMouseMove: onMouseMove, | ||
| onMouseLeave: onMouseLeave, | ||
| setActiveId: setActiveId, | ||
| tooltip: tooltip, | ||
| transitionMode: transitionMode | ||
| }, "arcs"); | ||
| } | ||
| if (enableArcLabels && layers.includes('arcLabels')) { | ||
| layerById.arcLabels = jsxRuntime.jsx(arcs.ArcLabelsLayer, { | ||
| center: [centerX, centerY], | ||
| data: dataWithArc, | ||
| label: arcLabel, | ||
| radiusOffset: arcLabelsRadiusOffset, | ||
| skipAngle: arcLabelsSkipAngle, | ||
| textColor: arcLabelsTextColor, | ||
| transitionMode: transitionMode, | ||
| component: arcLabelsComponent | ||
| }, "arcLabels"); | ||
| } | ||
| if (legends.length > 0 && layers.includes('legends')) { | ||
| layerById.legends = jsxRuntime.jsx(PieLegends, { | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| data: legendData, | ||
| legends: legends, | ||
| toggleSerie: toggleSerie | ||
| }, "legends"); | ||
| } | ||
| var layerContext = usePieLayerContext({ | ||
| dataWithArc: dataWithArc, | ||
| arcGenerator: arcGenerator, | ||
| centerX: centerX, | ||
| centerY: centerY, | ||
| radius: radius, | ||
| innerRadius: innerRadius | ||
| }); | ||
| return jsxRuntime.jsx(core.SvgWrapper, { | ||
| width: outerWidth, | ||
| height: outerHeight, | ||
| margin: margin, | ||
| defs: boundDefs, | ||
| role: role, | ||
| children: layers.map(function (layer, i) { | ||
| if (layerById[layer] !== undefined) { | ||
| return layerById[layer]; | ||
| } | ||
| if (typeof layer === 'function') { | ||
| return jsxRuntime.jsx(react.Fragment, { | ||
| children: react.createElement(layer, layerContext) | ||
| }, i); | ||
| } | ||
| return null; | ||
| }) | ||
| }); | ||
| }; | ||
| var Pie = function Pie(_ref2) { | ||
| var _ref2$isInteractive = _ref2.isInteractive, | ||
| isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive, | ||
| _ref2$animate = _ref2.animate, | ||
| animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate, | ||
| _ref2$motionConfig = _ref2.motionConfig, | ||
| motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig, | ||
| theme = _ref2.theme, | ||
| renderWrapper = _ref2.renderWrapper, | ||
| otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]); | ||
| return jsxRuntime.jsx(core.Container, { | ||
| animate: animate, | ||
| isInteractive: isInteractive, | ||
| motionConfig: motionConfig, | ||
| renderWrapper: renderWrapper, | ||
| theme: theme, | ||
| children: jsxRuntime.jsx(InnerPie, _objectSpread2({ | ||
| isInteractive: isInteractive | ||
| }, otherProps)) | ||
| }); | ||
| }; | ||
| var ResponsivePie = function ResponsivePie(props) { | ||
| return jsxRuntime.jsx(core.ResponsiveWrapper, { | ||
| children: function children(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height; | ||
| return jsxRuntime.jsx(Pie, _objectSpread2({ | ||
| width: width, | ||
| height: height | ||
| }, props)); | ||
| } | ||
| }); | ||
| }; | ||
| var InnerPieCanvas = function InnerPieCanvas(_ref) { | ||
| var data = _ref.data, | ||
| _ref$id = _ref.id, | ||
| id = _ref$id === void 0 ? defaultProps.id : _ref$id, | ||
| _ref$value = _ref.value, | ||
| value = _ref$value === void 0 ? defaultProps.value : _ref$value, | ||
| valueFormat = _ref.valueFormat, | ||
| _ref$sortByValue = _ref.sortByValue, | ||
| sortByValue = _ref$sortByValue === void 0 ? defaultProps.sortByValue : _ref$sortByValue, | ||
| _ref$startAngle = _ref.startAngle, | ||
| startAngle = _ref$startAngle === void 0 ? defaultProps.startAngle : _ref$startAngle, | ||
| _ref$endAngle = _ref.endAngle, | ||
| endAngle = _ref$endAngle === void 0 ? defaultProps.endAngle : _ref$endAngle, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? defaultProps.padAngle : _ref$padAngle, | ||
| _ref$fit = _ref.fit, | ||
| fit = _ref$fit === void 0 ? defaultProps.fit : _ref$fit, | ||
| _ref$innerRadius = _ref.innerRadius, | ||
| innerRadiusRatio = _ref$innerRadius === void 0 ? defaultProps.innerRadius : _ref$innerRadius, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? defaultProps.cornerRadius : _ref$cornerRadius, | ||
| _ref$activeInnerRadiu = _ref.activeInnerRadiusOffset, | ||
| activeInnerRadiusOffset = _ref$activeInnerRadiu === void 0 ? defaultProps.activeInnerRadiusOffset : _ref$activeInnerRadiu, | ||
| _ref$activeOuterRadiu = _ref.activeOuterRadiusOffset, | ||
| activeOuterRadiusOffset = _ref$activeOuterRadiu === void 0 ? defaultProps.activeOuterRadiusOffset : _ref$activeOuterRadiu, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| partialMargin = _ref.margin, | ||
| _ref$pixelRatio = _ref.pixelRatio, | ||
| pixelRatio = _ref$pixelRatio === void 0 ? 1 : _ref$pixelRatio, | ||
| _ref$colors = _ref.colors, | ||
| colors$1 = _ref$colors === void 0 ? defaultProps.colors : _ref$colors, | ||
| _ref$borderWidth = _ref.borderWidth, | ||
| borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth, | ||
| _ref$borderColor = _ref.borderColor, | ||
| borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor, | ||
| _ref$enableArcLabels = _ref.enableArcLabels, | ||
| enableArcLabels = _ref$enableArcLabels === void 0 ? defaultProps.enableArcLabels : _ref$enableArcLabels, | ||
| _ref$arcLabel = _ref.arcLabel, | ||
| arcLabel = _ref$arcLabel === void 0 ? defaultProps.arcLabel : _ref$arcLabel, | ||
| _ref$arcLabelsSkipAng = _ref.arcLabelsSkipAngle, | ||
| arcLabelsSkipAngle = _ref$arcLabelsSkipAng === void 0 ? defaultProps.arcLabelsSkipAngle : _ref$arcLabelsSkipAng, | ||
| _ref$arcLabelsTextCol = _ref.arcLabelsTextColor, | ||
| arcLabelsTextColor = _ref$arcLabelsTextCol === void 0 ? defaultProps.arcLabelsTextColor : _ref$arcLabelsTextCol, | ||
| _ref$arcLabelsRadiusO = _ref.arcLabelsRadiusOffset, | ||
| arcLabelsRadiusOffset = _ref$arcLabelsRadiusO === void 0 ? defaultProps.arcLabelsRadiusOffset : _ref$arcLabelsRadiusO, | ||
| _ref$enableArcLinkLab = _ref.enableArcLinkLabels, | ||
| enableArcLinkLabels = _ref$enableArcLinkLab === void 0 ? defaultProps.enableArcLinkLabels : _ref$enableArcLinkLab, | ||
| _ref$arcLinkLabel = _ref.arcLinkLabel, | ||
| arcLinkLabel = _ref$arcLinkLabel === void 0 ? defaultProps.arcLinkLabel : _ref$arcLinkLabel, | ||
| _ref$arcLinkLabelsSki = _ref.arcLinkLabelsSkipAngle, | ||
| arcLinkLabelsSkipAngle = _ref$arcLinkLabelsSki === void 0 ? defaultProps.arcLinkLabelsSkipAngle : _ref$arcLinkLabelsSki, | ||
| _ref$arcLinkLabelsOff = _ref.arcLinkLabelsOffset, | ||
| arcLinkLabelsOffset = _ref$arcLinkLabelsOff === void 0 ? defaultProps.arcLinkLabelsOffset : _ref$arcLinkLabelsOff, | ||
| _ref$arcLinkLabelsDia = _ref.arcLinkLabelsDiagonalLength, | ||
| arcLinkLabelsDiagonalLength = _ref$arcLinkLabelsDia === void 0 ? defaultProps.arcLinkLabelsDiagonalLength : _ref$arcLinkLabelsDia, | ||
| _ref$arcLinkLabelsStr = _ref.arcLinkLabelsStraightLength, | ||
| arcLinkLabelsStraightLength = _ref$arcLinkLabelsStr === void 0 ? defaultProps.arcLinkLabelsStraightLength : _ref$arcLinkLabelsStr, | ||
| _ref$arcLinkLabelsThi = _ref.arcLinkLabelsThickness, | ||
| arcLinkLabelsThickness = _ref$arcLinkLabelsThi === void 0 ? defaultProps.arcLinkLabelsThickness : _ref$arcLinkLabelsThi, | ||
| _ref$arcLinkLabelsTex = _ref.arcLinkLabelsTextOffset, | ||
| arcLinkLabelsTextOffset = _ref$arcLinkLabelsTex === void 0 ? defaultProps.arcLinkLabelsTextOffset : _ref$arcLinkLabelsTex, | ||
| _ref$arcLinkLabelsTex2 = _ref.arcLinkLabelsTextColor, | ||
| arcLinkLabelsTextColor = _ref$arcLinkLabelsTex2 === void 0 ? defaultProps.arcLinkLabelsTextColor : _ref$arcLinkLabelsTex2, | ||
| _ref$arcLinkLabelsCol = _ref.arcLinkLabelsColor, | ||
| arcLinkLabelsColor = _ref$arcLinkLabelsCol === void 0 ? defaultProps.arcLinkLabelsColor : _ref$arcLinkLabelsCol, | ||
| _ref$isInteractive = _ref.isInteractive, | ||
| isInteractive = _ref$isInteractive === void 0 ? defaultProps.isInteractive : _ref$isInteractive, | ||
| onClick = _ref.onClick, | ||
| onMouseMove = _ref.onMouseMove, | ||
| _ref$tooltip = _ref.tooltip, | ||
| tooltip$1 = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip, | ||
| _ref$legends = _ref.legends, | ||
| legends$1 = _ref$legends === void 0 ? defaultProps.legends : _ref$legends; | ||
| var canvasEl = react.useRef(null); | ||
| var theme = core.useTheme(); | ||
| var _useDimensions = core.useDimensions(width, height, partialMargin), | ||
| margin = _useDimensions.margin, | ||
| innerWidth = _useDimensions.innerWidth, | ||
| innerHeight = _useDimensions.innerHeight, | ||
| outerWidth = _useDimensions.outerWidth, | ||
| outerHeight = _useDimensions.outerHeight; | ||
| var normalizedData = useNormalizedData({ | ||
| data: data, | ||
| id: id, | ||
| value: value, | ||
| valueFormat: valueFormat, | ||
| colors: colors$1 | ||
| }); | ||
| var _usePieFromBox = usePieFromBox({ | ||
| data: normalizedData, | ||
| width: innerWidth, | ||
| height: innerHeight, | ||
| fit: fit, | ||
| innerRadius: innerRadiusRatio, | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| padAngle: padAngle, | ||
| sortByValue: sortByValue, | ||
| cornerRadius: cornerRadius, | ||
| activeInnerRadiusOffset: activeInnerRadiusOffset, | ||
| activeOuterRadiusOffset: activeOuterRadiusOffset | ||
| }), | ||
| dataWithArc = _usePieFromBox.dataWithArc, | ||
| arcGenerator = _usePieFromBox.arcGenerator, | ||
| centerX = _usePieFromBox.centerX, | ||
| centerY = _usePieFromBox.centerY, | ||
| radius = _usePieFromBox.radius, | ||
| innerRadius = _usePieFromBox.innerRadius, | ||
| setActiveId = _usePieFromBox.setActiveId; | ||
| var getBorderColor = colors.useInheritedColor(borderColor, theme); | ||
| var arcLabels = arcs.useArcLabels({ | ||
| data: dataWithArc, | ||
| label: arcLabel, | ||
| skipAngle: arcLabelsSkipAngle, | ||
| offset: arcLabelsRadiusOffset, | ||
| textColor: arcLabelsTextColor | ||
| }); | ||
| var arcLinkLabels = arcs.useArcLinkLabels({ | ||
| data: dataWithArc, | ||
| skipAngle: arcLinkLabelsSkipAngle, | ||
| offset: arcLinkLabelsOffset, | ||
| diagonalLength: arcLinkLabelsDiagonalLength, | ||
| straightLength: arcLinkLabelsStraightLength, | ||
| label: arcLinkLabel, | ||
| linkColor: arcLinkLabelsColor, | ||
| textOffset: arcLinkLabelsTextOffset, | ||
| textColor: arcLinkLabelsTextColor | ||
| }); | ||
| react.useEffect(function () { | ||
| if (!canvasEl.current) return; | ||
| canvasEl.current.width = outerWidth * pixelRatio; | ||
| canvasEl.current.height = outerHeight * pixelRatio; | ||
| var ctx = canvasEl.current.getContext('2d'); | ||
| ctx.scale(pixelRatio, pixelRatio); | ||
| ctx.fillStyle = theme.background; | ||
| ctx.fillRect(0, 0, outerWidth, outerHeight); | ||
| ctx.save(); | ||
| ctx.translate(margin.left, margin.top); | ||
| arcGenerator.context(ctx); | ||
| ctx.save(); | ||
| ctx.translate(centerX, centerY); | ||
| dataWithArc.forEach(function (arc) { | ||
| ctx.beginPath(); | ||
| ctx.fillStyle = arc.color; | ||
| ctx.strokeStyle = getBorderColor(arc); | ||
| ctx.lineWidth = borderWidth; | ||
| arcGenerator(arc.arc); | ||
| ctx.fill(); | ||
| if (borderWidth > 0) { | ||
| ctx.stroke(); | ||
| } | ||
| }); | ||
| if (enableArcLinkLabels === true) { | ||
| arcs.drawCanvasArcLinkLabels(ctx, arcLinkLabels, theme, arcLinkLabelsThickness); | ||
| } | ||
| if (enableArcLabels === true) { | ||
| arcs.drawCanvasArcLabels(ctx, arcLabels, theme); | ||
| } | ||
| ctx.restore(); | ||
| legends$1.forEach(function (legend) { | ||
| legends.renderLegendToCanvas(ctx, _objectSpread2(_objectSpread2({}, legend), {}, { | ||
| data: dataWithArc, | ||
| containerWidth: innerWidth, | ||
| containerHeight: innerHeight, | ||
| theme: theme | ||
| })); | ||
| }); | ||
| }, [canvasEl, innerWidth, innerHeight, outerWidth, outerHeight, margin.top, margin.left, pixelRatio, centerX, centerY, arcGenerator, dataWithArc, getBorderColor, enableArcLabels, arcLabels, enableArcLinkLabels, arcLinkLabels, arcLinkLabelsThickness, legends$1, theme]); | ||
| var arcs$1 = react.useMemo(function () { | ||
| return dataWithArc.map(function (datum) { | ||
| return _objectSpread2({ | ||
| id: datum.id | ||
| }, datum.arc); | ||
| }); | ||
| }, [dataWithArc]); | ||
| var getArcFromMouse = function getArcFromMouse(event) { | ||
| if (!canvasEl.current) return null; | ||
| var _getRelativeCursor = core.getRelativeCursor(canvasEl.current, event), | ||
| _getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2), | ||
| x = _getRelativeCursor2[0], | ||
| y = _getRelativeCursor2[1]; | ||
| var hoveredArc = arcs.findArcUnderCursor(margin.left + centerX, margin.top + centerY, radius, innerRadius, arcs$1, x, y); | ||
| if (!hoveredArc) return null; | ||
| return dataWithArc.find(function (datum) { | ||
| return datum.id === hoveredArc.id; | ||
| }); | ||
| }; | ||
| var _useTooltip = tooltip.useTooltip(), | ||
| showTooltipFromEvent = _useTooltip.showTooltipFromEvent, | ||
| hideTooltip = _useTooltip.hideTooltip; | ||
| var handleMouseHover = function handleMouseHover(event) { | ||
| var datum = getArcFromMouse(event); | ||
| if (datum) { | ||
| onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| setActiveId(datum.id); | ||
| showTooltipFromEvent(react.createElement(tooltip$1, { | ||
| datum: datum | ||
| }), event); | ||
| } else { | ||
| setActiveId(null); | ||
| hideTooltip(); | ||
| } | ||
| }; | ||
| var handleMouseLeave = function handleMouseLeave() { | ||
| hideTooltip(); | ||
| }; | ||
| var handleClick = function handleClick(event) { | ||
| if (!onClick) return; | ||
| var arc = getArcFromMouse(event); | ||
| if (arc) { | ||
| onClick(arc, event); | ||
| } | ||
| }; | ||
| return jsxRuntime.jsx("canvas", { | ||
| ref: canvasEl, | ||
| width: outerWidth * pixelRatio, | ||
| height: outerHeight * pixelRatio, | ||
| style: { | ||
| width: outerWidth, | ||
| height: outerHeight, | ||
| cursor: isInteractive ? 'auto' : 'normal' | ||
| }, | ||
| onMouseEnter: isInteractive ? handleMouseHover : undefined, | ||
| onMouseMove: isInteractive ? handleMouseHover : undefined, | ||
| onMouseLeave: isInteractive ? handleMouseLeave : undefined, | ||
| onClick: isInteractive ? handleClick : undefined | ||
| }); | ||
| }; | ||
| var PieCanvas = function PieCanvas(_ref2) { | ||
| var _ref2$isInteractive = _ref2.isInteractive, | ||
| isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive, | ||
| theme = _ref2.theme, | ||
| renderWrapper = _ref2.renderWrapper, | ||
| otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "theme", "renderWrapper"]); | ||
| return jsxRuntime.jsx(core.Container, { | ||
| isInteractive: isInteractive, | ||
| renderWrapper: renderWrapper, | ||
| theme: theme, | ||
| children: jsxRuntime.jsx(InnerPieCanvas, _objectSpread2({ | ||
| isInteractive: isInteractive | ||
| }, otherProps)) | ||
| }); | ||
| }; | ||
| var ResponsivePieCanvas = function ResponsivePieCanvas(props) { | ||
| return jsxRuntime.jsx(core.ResponsiveWrapper, { | ||
| children: function children(_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height; | ||
| return jsxRuntime.jsx(PieCanvas, _objectSpread2({ | ||
| width: width, | ||
| height: height | ||
| }, props)); | ||
| } | ||
| }); | ||
| }; | ||
| exports.Pie = Pie; | ||
| exports.PieCanvas = PieCanvas; | ||
| exports.ResponsivePie = ResponsivePie; | ||
| exports.ResponsivePieCanvas = ResponsivePieCanvas; | ||
| exports.defaultProps = defaultProps; | ||
| exports.useNormalizedData = useNormalizedData; | ||
| exports.usePie = usePie; | ||
| exports.usePieArcs = usePieArcs; | ||
| exports.usePieFromBox = usePieFromBox; | ||
| exports.usePieLayerContext = usePieLayerContext; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| }))); | ||
| !function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("react"),require("@nivo/core"),require("@nivo/arcs"),require("@nivo/legends"),require("react/jsx-runtime"),require("d3-shape"),require("@nivo/colors"),require("@nivo/tooltip")):"function"==typeof define&&define.amd?define(["exports","react","@nivo/core","@nivo/arcs","@nivo/legends","react/jsx-runtime","d3-shape","@nivo/colors","@nivo/tooltip"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).nivo=e.nivo||{},e.React,e.nivo,e.nivo,e.nivo,e["react/jsx-runtime"],e.d3,e.nivo,e.nivo)}(this,(function(e,i,n,t,r,a,o,s,d){"use strict";function l(){return l=Object.assign||function(e){for(var i=1;i<arguments.length;i++){var n=arguments[i];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},l.apply(this,arguments)}function c(e,i){if(null==e)return{};var n,t,r={},a=Object.keys(e);for(t=0;t<a.length;t++)n=a[t],i.indexOf(n)>=0||(r[n]=e[n]);return r}var u,v=function(e){var i=e.width,n=e.height,t=e.legends,o=e.data,s=e.toggleSerie;return a.jsx(a.Fragment,{children:t.map((function(e,t){var d;return a.jsx(r.BoxLegendSvg,l({},e,{containerWidth:i,containerHeight:n,data:null!=(d=e.data)?d:o,toggleSerie:e.toggleSerie?s:void 0}),t)}))})},f={id:"id",value:"value",sortByValue:!1,innerRadius:0,padAngle:0,cornerRadius:0,layers:["arcLinkLabels","arcs","arcLabels","legends"],startAngle:0,endAngle:360,fit:!0,activeInnerRadiusOffset:0,activeOuterRadiusOffset:0,borderWidth:0,borderColor:{from:"color",modifiers:[["darker",1]]},enableArcLabels:!0,arcLabel:"formattedValue",arcLabelsSkipAngle:0,arcLabelsRadiusOffset:.5,arcLabelsTextColor:{theme:"labels.text.fill"},enableArcLinkLabels:!0,arcLinkLabel:"id",arcLinkLabelsSkipAngle:0,arcLinkLabelsOffset:0,arcLinkLabelsDiagonalLength:16,arcLinkLabelsStraightLength:24,arcLinkLabelsThickness:1,arcLinkLabelsTextOffset:6,arcLinkLabelsTextColor:{theme:"labels.text.fill"},arcLinkLabelsColor:{theme:"axis.ticks.line.stroke"},colors:{scheme:"nivo"},defs:[],fill:[],isInteractive:!0,animate:!0,motionConfig:"gentle",transitionMode:"innerRadius",tooltip:function(e){var i=e.datum;return a.jsx(d.BasicTooltip,{id:i.id,value:i.formattedValue,enableChip:!0,color:i.color})},legends:[],role:"img",pixelRatio:"undefined"!=typeof window&&null!=(u=window.devicePixelRatio)?u:1},g=["points"],L=function(e){var t=e.data,r=e.id,a=void 0===r?f.id:r,o=e.value,d=void 0===o?f.value:o,c=e.valueFormat,u=e.colors,v=void 0===u?f.colors:u,g=n.usePropertyAccessor(a),L=n.usePropertyAccessor(d),h=n.useValueFormatter(c),b=s.useOrdinalColorScale(v,"id");return i.useMemo((function(){return t.map((function(e){var i,n=g(e),t=L(e),r={id:n,label:null!=(i=e.label)?i:n,hidden:!1,value:t,formattedValue:h(t),data:e};return l({},r,{color:b(r)})}))}),[t,g,L,h,b])},h=function(e){var t=e.data,r=e.startAngle,a=e.endAngle,s=e.innerRadius,d=e.outerRadius,c=e.padAngle,u=e.sortByValue,v=e.activeId,f=e.activeInnerRadiusOffset,g=e.activeOuterRadiusOffset,L=e.hiddenIds,h=i.useMemo((function(){var e=o.pie().value((function(e){return e.value})).startAngle(n.degreesToRadians(r)).endAngle(n.degreesToRadians(a)).padAngle(n.degreesToRadians(c));return u||e.sortValues(null),e}),[r,a,c,u]);return i.useMemo((function(){var e=t.filter((function(e){return!L.includes(e.id)}));return{dataWithArc:h(e).map((function(e){var i=Math.abs(e.endAngle-e.startAngle);return l({},e.data,{arc:{index:e.index,startAngle:e.startAngle,endAngle:e.endAngle,innerRadius:v===e.data.id?s-f:s,outerRadius:v===e.data.id?d+g:d,thickness:d-s,padAngle:e.padAngle,angle:i,angleDeg:n.radiansToDegrees(i)}})})),legendData:t.map((function(e){return l({},e,{hidden:L.includes(e.id)})}))}}),[h,t,L,v,s,f,d,g])},b=function(e){var r=e.data,a=e.width,o=e.height,s=e.innerRadius,d=void 0===s?f.innerRadius:s,u=e.startAngle,v=void 0===u?f.startAngle:u,L=e.endAngle,b=void 0===L?f.endAngle:L,p=e.padAngle,A=void 0===p?f.padAngle:p,k=e.sortByValue,R=void 0===k?f.sortByValue:k,m=e.cornerRadius,O=void 0===m?f.cornerRadius:m,x=e.fit,C=void 0===x?f.fit:x,I=e.activeInnerRadiusOffset,M=void 0===I?f.activeInnerRadiusOffset:I,y=e.activeOuterRadiusOffset,T=void 0===y?f.activeOuterRadiusOffset:y,S=i.useState(null),W=S[0],w=S[1],j=i.useState([]),B=j[0],V=j[1],P=i.useMemo((function(){var e,i=Math.min(a,o)/2,n=i*Math.min(d,1),r=a/2,s=o/2;if(C){var l=t.computeArcBoundingBox(r,s,i,v-90,b-90),u=l.points,f=c(l,g),L=Math.min(a/f.width,o/f.height),h={width:f.width*L,height:f.height*L};h.x=(a-h.width)/2,h.y=(o-h.height)/2,r=(r-f.x)/f.width*f.width*L+h.x,s=(s-f.y)/f.height*f.height*L+h.y,e={box:f,ratio:L,points:u},i*=L,n*=L}return{centerX:r,centerY:s,radius:i,innerRadius:n,debug:e}}),[a,o,d,v,b,C,O]),E=h({data:r,startAngle:v,endAngle:b,innerRadius:P.innerRadius,outerRadius:P.radius,padAngle:A,sortByValue:R,activeId:W,activeInnerRadiusOffset:M,activeOuterRadiusOffset:T,hiddenIds:B}),D=i.useCallback((function(e){V((function(i){return i.indexOf(e)>-1?i.filter((function(i){return i!==e})):[].concat(i,[e])}))}),[]);return l({arcGenerator:t.useArcGenerator({cornerRadius:O,padAngle:n.degreesToRadians(A)}),setActiveId:w,toggleSerie:D},E,P)},p=function(e){var n=e.dataWithArc,t=e.arcGenerator,r=e.centerX,a=e.centerY,o=e.radius,s=e.innerRadius;return i.useMemo((function(){return{dataWithArc:n,arcGenerator:t,centerX:r,centerY:a,radius:o,innerRadius:s}}),[n,t,r,a,o,s])},A=function(e){var n=e.center,r=e.data,o=e.arcGenerator,s=e.borderWidth,l=e.borderColor,c=e.isInteractive,u=e.onClick,v=e.onMouseEnter,f=e.onMouseMove,g=e.onMouseLeave,L=e.setActiveId,h=e.tooltip,b=e.transitionMode,p=d.useTooltip(),A=p.showTooltipFromEvent,k=p.hideTooltip,R=i.useMemo((function(){if(c)return function(e,i){null==u||u(e,i)}}),[c,u]),m=i.useMemo((function(){if(c)return function(e,n){A(i.createElement(h,{datum:e}),n),L(e.id),null==v||v(e,n)}}),[c,A,L,v]),O=i.useMemo((function(){if(c)return function(e,n){A(i.createElement(h,{datum:e}),n),null==f||f(e,n)}}),[c,A,f]),x=i.useMemo((function(){if(c)return function(e,i){k(),L(null),null==g||g(e,i)}}),[c,k,L,g]);return a.jsx(t.ArcsLayer,{center:n,data:r,arcGenerator:o,borderWidth:s,borderColor:l,transitionMode:b,onClick:R,onMouseEnter:m,onMouseMove:O,onMouseLeave:x})},k=["isInteractive","animate","motionConfig","theme","renderWrapper"],R=function(e){var r=e.data,o=e.id,s=void 0===o?f.id:o,d=e.value,l=void 0===d?f.value:d,c=e.valueFormat,u=e.sortByValue,g=void 0===u?f.sortByValue:u,h=e.layers,k=void 0===h?f.layers:h,R=e.startAngle,m=void 0===R?f.startAngle:R,O=e.endAngle,x=void 0===O?f.endAngle:O,C=e.padAngle,I=void 0===C?f.padAngle:C,M=e.fit,y=void 0===M?f.fit:M,T=e.innerRadius,S=void 0===T?f.innerRadius:T,W=e.cornerRadius,w=void 0===W?f.cornerRadius:W,j=e.activeInnerRadiusOffset,B=void 0===j?f.activeInnerRadiusOffset:j,V=e.activeOuterRadiusOffset,P=void 0===V?f.activeOuterRadiusOffset:V,E=e.width,D=e.height,G=e.margin,F=e.colors,q=void 0===F?f.colors:F,H=e.borderWidth,X=void 0===H?f.borderWidth:H,Y=e.borderColor,_=void 0===Y?f.borderColor:Y,z=e.enableArcLabels,N=void 0===z?f.enableArcLabels:z,U=e.arcLabel,J=void 0===U?f.arcLabel:U,K=e.arcLabelsSkipAngle,Q=void 0===K?f.arcLabelsSkipAngle:K,Z=e.arcLabelsTextColor,$=void 0===Z?f.arcLabelsTextColor:Z,ee=e.arcLabelsRadiusOffset,ie=void 0===ee?f.arcLabelsRadiusOffset:ee,ne=e.arcLabelsComponent,te=e.enableArcLinkLabels,re=void 0===te?f.enableArcLinkLabels:te,ae=e.arcLinkLabel,oe=void 0===ae?f.arcLinkLabel:ae,se=e.arcLinkLabelsSkipAngle,de=void 0===se?f.arcLinkLabelsSkipAngle:se,le=e.arcLinkLabelsOffset,ce=void 0===le?f.arcLinkLabelsOffset:le,ue=e.arcLinkLabelsDiagonalLength,ve=void 0===ue?f.arcLinkLabelsDiagonalLength:ue,fe=e.arcLinkLabelsStraightLength,ge=void 0===fe?f.arcLinkLabelsStraightLength:fe,Le=e.arcLinkLabelsThickness,he=void 0===Le?f.arcLinkLabelsThickness:Le,be=e.arcLinkLabelsTextOffset,pe=void 0===be?f.arcLinkLabelsTextOffset:be,Ae=e.arcLinkLabelsTextColor,ke=void 0===Ae?f.arcLinkLabelsTextColor:Ae,Re=e.arcLinkLabelsColor,me=void 0===Re?f.arcLinkLabelsColor:Re,Oe=e.arcLinkLabelComponent,xe=e.defs,Ce=void 0===xe?f.defs:xe,Ie=e.fill,Me=void 0===Ie?f.fill:Ie,ye=e.isInteractive,Te=void 0===ye?f.isInteractive:ye,Se=e.onClick,We=e.onMouseEnter,we=e.onMouseMove,je=e.onMouseLeave,Be=e.tooltip,Ve=void 0===Be?f.tooltip:Be,Pe=e.transitionMode,Ee=void 0===Pe?f.transitionMode:Pe,De=e.legends,Ge=void 0===De?f.legends:De,Fe=e.role,qe=void 0===Fe?f.role:Fe,He=n.useDimensions(E,D,G),Xe=He.outerWidth,Ye=He.outerHeight,_e=He.margin,ze=He.innerWidth,Ne=He.innerHeight,Ue=L({data:r,id:s,value:l,valueFormat:c,colors:q}),Je=b({data:Ue,width:ze,height:Ne,fit:y,innerRadius:S,startAngle:m,endAngle:x,padAngle:I,sortByValue:g,cornerRadius:w,activeInnerRadiusOffset:B,activeOuterRadiusOffset:P}),Ke=Je.dataWithArc,Qe=Je.legendData,Ze=Je.arcGenerator,$e=Je.centerX,ei=Je.centerY,ii=Je.radius,ni=Je.innerRadius,ti=Je.setActiveId,ri=Je.toggleSerie,ai=n.bindDefs(Ce,Ke,Me),oi={arcLinkLabels:null,arcs:null,arcLabels:null,legends:null};re&&k.includes("arcLinkLabels")&&(oi.arcLinkLabels=a.jsx(t.ArcLinkLabelsLayer,{center:[$e,ei],data:Ke,label:oe,skipAngle:de,offset:ce,diagonalLength:ve,straightLength:ge,strokeWidth:he,textOffset:pe,textColor:ke,linkColor:me,component:Oe},"arcLinkLabels")),k.includes("arcs")&&(oi.arcs=a.jsx(A,{center:[$e,ei],data:Ke,arcGenerator:Ze,borderWidth:X,borderColor:_,isInteractive:Te,onClick:Se,onMouseEnter:We,onMouseMove:we,onMouseLeave:je,setActiveId:ti,tooltip:Ve,transitionMode:Ee},"arcs")),N&&k.includes("arcLabels")&&(oi.arcLabels=a.jsx(t.ArcLabelsLayer,{center:[$e,ei],data:Ke,label:J,radiusOffset:ie,skipAngle:Q,textColor:$,transitionMode:Ee,component:ne},"arcLabels")),Ge.length>0&&k.includes("legends")&&(oi.legends=a.jsx(v,{width:ze,height:Ne,data:Qe,legends:Ge,toggleSerie:ri},"legends"));var si=p({dataWithArc:Ke,arcGenerator:Ze,centerX:$e,centerY:ei,radius:ii,innerRadius:ni});return a.jsx(n.SvgWrapper,{width:Xe,height:Ye,margin:_e,defs:ai,role:qe,children:k.map((function(e,n){return void 0!==oi[e]?oi[e]:"function"==typeof e?a.jsx(i.Fragment,{children:i.createElement(e,si)},n):null}))})},m=function(e){var i=e.isInteractive,t=void 0===i?f.isInteractive:i,r=e.animate,o=void 0===r?f.animate:r,s=e.motionConfig,d=void 0===s?f.motionConfig:s,u=e.theme,v=e.renderWrapper,g=c(e,k);return a.jsx(n.Container,{animate:o,isInteractive:t,motionConfig:d,renderWrapper:v,theme:u,children:a.jsx(R,l({isInteractive:t},g))})},O=["isInteractive","theme","renderWrapper"],x=function(e){var o=e.data,c=e.id,u=void 0===c?f.id:c,v=e.value,g=void 0===v?f.value:v,h=e.valueFormat,p=e.sortByValue,A=void 0===p?f.sortByValue:p,k=e.startAngle,R=void 0===k?f.startAngle:k,m=e.endAngle,O=void 0===m?f.endAngle:m,x=e.padAngle,C=void 0===x?f.padAngle:x,I=e.fit,M=void 0===I?f.fit:I,y=e.innerRadius,T=void 0===y?f.innerRadius:y,S=e.cornerRadius,W=void 0===S?f.cornerRadius:S,w=e.activeInnerRadiusOffset,j=void 0===w?f.activeInnerRadiusOffset:w,B=e.activeOuterRadiusOffset,V=void 0===B?f.activeOuterRadiusOffset:B,P=e.width,E=e.height,D=e.margin,G=e.pixelRatio,F=void 0===G?1:G,q=e.colors,H=void 0===q?f.colors:q,X=e.borderWidth,Y=void 0===X?f.borderWidth:X,_=e.borderColor,z=void 0===_?f.borderColor:_,N=e.enableArcLabels,U=void 0===N?f.enableArcLabels:N,J=e.arcLabel,K=void 0===J?f.arcLabel:J,Q=e.arcLabelsSkipAngle,Z=void 0===Q?f.arcLabelsSkipAngle:Q,$=e.arcLabelsTextColor,ee=void 0===$?f.arcLabelsTextColor:$,ie=e.arcLabelsRadiusOffset,ne=void 0===ie?f.arcLabelsRadiusOffset:ie,te=e.enableArcLinkLabels,re=void 0===te?f.enableArcLinkLabels:te,ae=e.arcLinkLabel,oe=void 0===ae?f.arcLinkLabel:ae,se=e.arcLinkLabelsSkipAngle,de=void 0===se?f.arcLinkLabelsSkipAngle:se,le=e.arcLinkLabelsOffset,ce=void 0===le?f.arcLinkLabelsOffset:le,ue=e.arcLinkLabelsDiagonalLength,ve=void 0===ue?f.arcLinkLabelsDiagonalLength:ue,fe=e.arcLinkLabelsStraightLength,ge=void 0===fe?f.arcLinkLabelsStraightLength:fe,Le=e.arcLinkLabelsThickness,he=void 0===Le?f.arcLinkLabelsThickness:Le,be=e.arcLinkLabelsTextOffset,pe=void 0===be?f.arcLinkLabelsTextOffset:be,Ae=e.arcLinkLabelsTextColor,ke=void 0===Ae?f.arcLinkLabelsTextColor:Ae,Re=e.arcLinkLabelsColor,me=void 0===Re?f.arcLinkLabelsColor:Re,Oe=e.isInteractive,xe=void 0===Oe?f.isInteractive:Oe,Ce=e.onClick,Ie=e.onMouseMove,Me=e.tooltip,ye=void 0===Me?f.tooltip:Me,Te=e.legends,Se=void 0===Te?f.legends:Te,We=i.useRef(null),we=n.useTheme(),je=n.useDimensions(P,E,D),Be=je.margin,Ve=je.innerWidth,Pe=je.innerHeight,Ee=je.outerWidth,De=je.outerHeight,Ge=L({data:o,id:u,value:g,valueFormat:h,colors:H}),Fe=b({data:Ge,width:Ve,height:Pe,fit:M,innerRadius:T,startAngle:R,endAngle:O,padAngle:C,sortByValue:A,cornerRadius:W,activeInnerRadiusOffset:j,activeOuterRadiusOffset:V}),qe=Fe.dataWithArc,He=Fe.arcGenerator,Xe=Fe.centerX,Ye=Fe.centerY,_e=Fe.radius,ze=Fe.innerRadius,Ne=Fe.setActiveId,Ue=s.useInheritedColor(z,we),Je=t.useArcLabels({data:qe,label:K,skipAngle:Z,offset:ne,textColor:ee}),Ke=t.useArcLinkLabels({data:qe,skipAngle:de,offset:ce,diagonalLength:ve,straightLength:ge,label:oe,linkColor:me,textOffset:pe,textColor:ke});i.useEffect((function(){if(We.current){We.current.width=Ee*F,We.current.height=De*F;var e=We.current.getContext("2d");e.scale(F,F),e.fillStyle=we.background,e.fillRect(0,0,Ee,De),e.save(),e.translate(Be.left,Be.top),He.context(e),e.save(),e.translate(Xe,Ye),qe.forEach((function(i){e.beginPath(),e.fillStyle=i.color,e.strokeStyle=Ue(i),e.lineWidth=Y,He(i.arc),e.fill(),Y>0&&e.stroke()})),!0===re&&t.drawCanvasArcLinkLabels(e,Ke,we,he),!0===U&&t.drawCanvasArcLabels(e,Je,we),e.restore(),Se.forEach((function(i){r.renderLegendToCanvas(e,l({},i,{data:qe,containerWidth:Ve,containerHeight:Pe,theme:we}))}))}}),[We,Ve,Pe,Ee,De,Be.top,Be.left,F,Xe,Ye,He,qe,Ue,U,Je,re,Ke,he,Se,we]);var Qe=i.useMemo((function(){return qe.map((function(e){return l({id:e.id},e.arc)}))}),[qe]),Ze=function(e){if(!We.current)return null;var i=n.getRelativeCursor(We.current,e),r=i[0],a=i[1],o=t.findArcUnderCursor(Be.left+Xe,Be.top+Ye,_e,ze,Qe,r,a);return o?qe.find((function(e){return e.id===o.id})):null},$e=d.useTooltip(),ei=$e.showTooltipFromEvent,ii=$e.hideTooltip,ni=function(e){var n=Ze(e);n?(null==Ie||Ie(n,e),Ne(n.id),ei(i.createElement(ye,{datum:n}),e)):(Ne(null),ii())};return a.jsx("canvas",{ref:We,width:Ee*F,height:De*F,style:{width:Ee,height:De,cursor:xe?"auto":"normal"},onMouseEnter:xe?ni:void 0,onMouseMove:xe?ni:void 0,onMouseLeave:xe?function(){ii()}:void 0,onClick:xe?function(e){if(Ce){var i=Ze(e);i&&Ce(i,e)}}:void 0})},C=function(e){var i=e.isInteractive,t=void 0===i?f.isInteractive:i,r=e.theme,o=e.renderWrapper,s=c(e,O);return a.jsx(n.Container,{isInteractive:t,renderWrapper:o,theme:r,children:a.jsx(x,l({isInteractive:t},s))})};e.Pie=m,e.PieCanvas=C,e.ResponsivePie=function(e){return a.jsx(n.ResponsiveWrapper,{children:function(i){var n=i.width,t=i.height;return a.jsx(m,l({width:n,height:t},e))}})},e.ResponsivePieCanvas=function(e){return a.jsx(n.ResponsiveWrapper,{children:function(i){var n=i.width,t=i.height;return a.jsx(C,l({width:n,height:t},e))}})},e.defaultProps=f,e.useNormalizedData=L,e.usePie=function(e){var r=e.data,a=e.radius,o=e.innerRadius,s=e.startAngle,d=void 0===s?f.startAngle:s,c=e.endAngle,u=void 0===c?f.endAngle:c,v=e.padAngle,g=void 0===v?f.padAngle:v,L=e.sortByValue,b=void 0===L?f.sortByValue:L,p=e.cornerRadius,A=void 0===p?f.cornerRadius:p,k=e.activeInnerRadiusOffset,R=void 0===k?f.activeInnerRadiusOffset:k,m=e.activeOuterRadiusOffset,O=void 0===m?f.activeOuterRadiusOffset:m,x=i.useState(null),C=x[0],I=x[1],M=i.useState([]),y=M[0],T=M[1],S=h({data:r,startAngle:d,endAngle:u,innerRadius:o,outerRadius:a,padAngle:g,sortByValue:b,activeId:C,activeInnerRadiusOffset:R,activeOuterRadiusOffset:O,hiddenIds:y}),W=i.useCallback((function(e){T((function(i){return i.indexOf(e)>-1?i.filter((function(i){return i!==e})):[].concat(i,[e])}))}),[]);return l({},S,{arcGenerator:t.useArcGenerator({cornerRadius:A,padAngle:n.degreesToRadians(g)}),setActiveId:I,toggleSerie:W})},e.usePieArcs=h,e.usePieFromBox=b,e.usePieLayerContext=p,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| //# sourceMappingURL=nivo-pie.umd.js.map |
| { | ||
| "name": "@nivo/pie", | ||
| "version": "0.74.1", | ||
| "version": "0.75.0", | ||
| "license": "MIT", | ||
@@ -32,14 +32,14 @@ "author": { | ||
| "dependencies": { | ||
| "@nivo/arcs": "0.74.1", | ||
| "@nivo/colors": "0.74.1", | ||
| "@nivo/legends": "0.74.1", | ||
| "@nivo/tooltip": "0.74.1", | ||
| "@nivo/arcs": "0.75.0", | ||
| "@nivo/colors": "0.75.0", | ||
| "@nivo/legends": "0.75.0", | ||
| "@nivo/tooltip": "0.75.0", | ||
| "d3-shape": "^1.3.5" | ||
| }, | ||
| "devDependencies": { | ||
| "@nivo/core": "0.74.1", | ||
| "@nivo/core": "0.75.0", | ||
| "@types/d3-shape": "^2.0.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "@nivo/core": "0.74.1", | ||
| "@nivo/core": "0.75.0", | ||
| "react": ">= 16.14.0 < 18.0.0" | ||
@@ -50,3 +50,3 @@ }, | ||
| }, | ||
| "gitHead": "4ae8bc60779cb9bb8cb14b16726819217da16133" | ||
| "gitHead": "bfe8126876bf0e46ad82251935ab78178e901bcf" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-43.81%
224063
- Lines of code
- decreased by-85.96%
479
- Number of low quality alerts
- increased by100%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@nivo/arcs@0.75.0(transitive)
+ Added@nivo/colors@0.75.0(transitive)
+ Added@nivo/core@0.75.0(transitive)
+ Added@nivo/legends@0.75.0(transitive)
+ Added@nivo/recompose@0.75.0(transitive)
+ Added@nivo/tooltip@0.75.0(transitive)
- Removed@nivo/arcs@0.74.1(transitive)
- Removed@nivo/colors@0.74.1(transitive)
- Removed@nivo/core@0.74.1(transitive)
- Removed@nivo/legends@0.74.1(transitive)
- Removed@nivo/recompose@0.74.0(transitive)
- Removed@nivo/tooltip@0.74.1(transitive)
Updated@nivo/arcs@0.75.0
Updated@nivo/colors@0.75.0
Updated@nivo/legends@0.75.0
Updated@nivo/tooltip@0.75.0