Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@nivo/arcs
Advanced tools
@nivo/arcs - npm Package Compare versions
Comparing version 0.74.1 to 0.75.0
@@ -1,1144 +0,2 @@ | ||
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var react = require('react'); | ||
| var core = require('@nivo/core'); | ||
| var colors = require('@nivo/colors'); | ||
| var web = require('@react-spring/web'); | ||
| var jsxRuntime = require('react/jsx-runtime'); | ||
| var d3Shape = require('d3-shape'); | ||
| 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; | ||
| } | ||
| var getNormalizedAngle = function getNormalizedAngle(angle) { | ||
| var normalizedAngle = angle % (Math.PI * 2); | ||
| if (normalizedAngle < 0) { | ||
| normalizedAngle += Math.PI * 2; | ||
| } | ||
| return normalizedAngle; | ||
| }; | ||
| var filterDataBySkipAngle = function filterDataBySkipAngle(data, skipAngle) { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(core.radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }); | ||
| }; | ||
| var useFilteredDataBySkipAngle = function useFilteredDataBySkipAngle(data, skipAngle) { | ||
| return react.useMemo(function () { | ||
| return filterDataBySkipAngle(data, skipAngle); | ||
| }, [data, skipAngle]); | ||
| }; | ||
| var svgEllipticalArcCommand = function svgEllipticalArcCommand(radius, largeArcFlag, sweepFlag, x, y) { | ||
| return ['A', radius, radius, 0, largeArcFlag, sweepFlag, x, y].join(' '); | ||
| }; | ||
| var generateSvgArc = function generateSvgArc(radius, originalStartAngle, originalEndAngle) { | ||
| var startAngle = Math.min(originalStartAngle, originalEndAngle); | ||
| var endAngle = Math.max(originalStartAngle, originalEndAngle); | ||
| var start = core.positionFromAngle(core.degreesToRadians(endAngle), radius); | ||
| var end = core.positionFromAngle(core.degreesToRadians(startAngle), radius); | ||
| if (endAngle - startAngle >= 360) { | ||
| var mid = core.positionFromAngle(core.degreesToRadians(startAngle + 180), radius); | ||
| return ["M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, 1, 1, mid.x, mid.y), "M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, 1, 0, mid.x, mid.y)].join(' '); | ||
| } | ||
| var largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1; | ||
| return ["M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, largeArcFlag, 0, end.x, end.y)].join(' '); | ||
| }; | ||
| var arcTransitionModes = ['startAngle', 'middleAngle', 'endAngle', 'innerRadius', 'centerRadius', 'outerRadius', 'pushIn', 'pushOut']; | ||
| var arcTransitionModeById = { | ||
| startAngle: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| endAngle: arc.startAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: arc.endAngle | ||
| }); | ||
| } | ||
| }, | ||
| middleAngle: { | ||
| enter: function enter(arc) { | ||
| var middleAngle = arc.startAngle + (arc.endAngle - arc.startAngle) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: middleAngle, | ||
| endAngle: middleAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| var middleAngle = arc.startAngle + (arc.endAngle - arc.startAngle) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: middleAngle, | ||
| endAngle: middleAngle | ||
| }); | ||
| } | ||
| }, | ||
| endAngle: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: arc.endAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| endAngle: arc.startAngle | ||
| }); | ||
| } | ||
| }, | ||
| innerRadius: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius | ||
| }); | ||
| } | ||
| }, | ||
| centerRadius: { | ||
| enter: function enter(arc) { | ||
| var centerRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: centerRadius, | ||
| outerRadius: centerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| var centerRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: centerRadius, | ||
| outerRadius: centerRadius | ||
| }); | ||
| } | ||
| }, | ||
| outerRadius: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| } | ||
| }, | ||
| pushIn: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.innerRadius - arc.outerRadius + arc.innerRadius, | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius, | ||
| outerRadius: arc.outerRadius + arc.outerRadius - arc.innerRadius | ||
| }); | ||
| } | ||
| }, | ||
| pushOut: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius, | ||
| outerRadius: arc.outerRadius + arc.outerRadius - arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.innerRadius - arc.outerRadius + arc.innerRadius, | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| var useArcTransitionMode = function useArcTransitionMode(mode, extraTransition) { | ||
| return react.useMemo(function () { | ||
| var transitionMode = arcTransitionModeById[mode]; | ||
| return { | ||
| enter: function enter(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 0 | ||
| }, transitionMode.enter(datum.arc)), extraTransition ? extraTransition.enter(datum) : {}); | ||
| }, | ||
| update: function update(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 1 | ||
| }, transitionMode.update(datum.arc)), extraTransition ? extraTransition.update(datum) : {}); | ||
| }, | ||
| leave: function leave(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 0 | ||
| }, transitionMode.leave(datum.arc)), extraTransition ? extraTransition.leave(datum) : {}); | ||
| } | ||
| }; | ||
| }, [mode, extraTransition]); | ||
| }; | ||
| var computeArcCenter = function computeArcCenter(arc, offset) { | ||
| var angle = core.midAngle(arc) - Math.PI / 2; | ||
| var radius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) * offset; | ||
| return core.positionFromAngle(angle, radius); | ||
| }; | ||
| var interpolateArcCenter = function interpolateArcCenter(offset) { | ||
| return function (startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| var centroid = computeArcCenter({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset); | ||
| return "translate(".concat(centroid.x, ",").concat(centroid.y, ")"); | ||
| }); | ||
| }; | ||
| }; | ||
| var useArcCentersTransition = function useArcCentersTransition(data) { | ||
| var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5; | ||
| var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'innerRadius'; | ||
| var extra = arguments.length > 3 ? arguments[3] : undefined; | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var phases = useArcTransitionMode(mode, extra); | ||
| var transition = web.useTransition(data, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: phases.update, | ||
| from: phases.enter, | ||
| enter: phases.update, | ||
| update: phases.update, | ||
| leave: phases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolate: interpolateArcCenter(offset) | ||
| }; | ||
| }; | ||
| var useArcCenters = function useArcCenters(_ref) { | ||
| var data = _ref.data, | ||
| _ref$offset = _ref.offset, | ||
| offset = _ref$offset === void 0 ? 0.5 : _ref$offset, | ||
| _ref$skipAngle = _ref.skipAngle, | ||
| skipAngle = _ref$skipAngle === void 0 ? 0 : _ref$skipAngle, | ||
| _ref$computeExtraProp = _ref.computeExtraProps, | ||
| computeExtraProps = _ref$computeExtraProp === void 0 ? function () { | ||
| return {}; | ||
| } : _ref$computeExtraProp; | ||
| return react.useMemo(function () { | ||
| return filterDataBySkipAngle(data, skipAngle).map(function (datum) { | ||
| var position = computeArcCenter(datum.arc, offset); | ||
| return _objectSpread2(_objectSpread2({}, computeExtraProps(datum)), {}, { | ||
| x: position.x, | ||
| y: position.y, | ||
| data: datum | ||
| }); | ||
| }); | ||
| }, [data, offset, skipAngle, computeExtraProps]); | ||
| }; | ||
| var staticStyle = { | ||
| pointerEvents: 'none' | ||
| }; | ||
| var ArcLabel = function ArcLabel(_ref) { | ||
| var label = _ref.label, | ||
| style = _ref.style; | ||
| var theme = core.useTheme(); | ||
| return jsxRuntime.jsx(web.animated.g, { | ||
| transform: style.transform, | ||
| opacity: style.progress, | ||
| style: staticStyle, | ||
| children: jsxRuntime.jsx(web.animated.text, { | ||
| textAnchor: "middle", | ||
| dominantBaseline: "central", | ||
| style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, { | ||
| fill: style.textColor | ||
| }), | ||
| children: label | ||
| }) | ||
| }); | ||
| }; | ||
| var ArcLabelsLayer = function ArcLabelsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| transitionMode = _ref.transitionMode, | ||
| labelAccessor = _ref.label, | ||
| radiusOffset = _ref.radiusOffset, | ||
| skipAngle = _ref.skipAngle, | ||
| textColor = _ref.textColor, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcLabel : _ref$component; | ||
| var getLabel = core.usePropertyAccessor(labelAccessor); | ||
| var theme = core.useTheme(); | ||
| var getTextColor = colors.useInheritedColor(textColor, theme); | ||
| var filteredData = react.useMemo(function () { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(core.radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }); | ||
| }, [data, skipAngle]); | ||
| var _useArcCentersTransit = useArcCentersTransition(filteredData, radiusOffset, transitionMode), | ||
| transition = _useArcCentersTransit.transition, | ||
| interpolate = _useArcCentersTransit.interpolate; | ||
| var Label = component; | ||
| return jsxRuntime.jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return react.createElement(Label, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| label: getLabel(datum), | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| transform: interpolate(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius), | ||
| textColor: getTextColor(datum) | ||
| }) | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| var drawCanvasArcLabels = function drawCanvasArcLabels(ctx, labels, theme) { | ||
| ctx.textAlign = 'center'; | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily); | ||
| labels.forEach(function (label) { | ||
| ctx.fillStyle = label.textColor; | ||
| ctx.fillText("".concat(label.label), label.x, label.y); | ||
| }); | ||
| }; | ||
| var useArcLabels = function useArcLabels(_ref) { | ||
| var data = _ref.data, | ||
| offset = _ref.offset, | ||
| skipAngle = _ref.skipAngle, | ||
| label = _ref.label, | ||
| textColor = _ref.textColor; | ||
| var getLabel = core.usePropertyAccessor(label); | ||
| var theme = core.useTheme(); | ||
| var getTextColor = colors.useInheritedColor(textColor, theme); | ||
| var computeExtraProps = react.useCallback(function (datum) { | ||
| return { | ||
| label: getLabel(datum), | ||
| textColor: getTextColor(datum) | ||
| }; | ||
| }, [getLabel, getTextColor]); | ||
| return useArcCenters({ | ||
| data: data, | ||
| offset: offset, | ||
| skipAngle: skipAngle, | ||
| computeExtraProps: computeExtraProps | ||
| }); | ||
| }; | ||
| var computeArcLinkTextAnchor = function computeArcLinkTextAnchor(arc) { | ||
| var centerAngle = getNormalizedAngle(arc.startAngle + (arc.endAngle - arc.startAngle) / 2 - Math.PI / 2); | ||
| if (centerAngle < Math.PI / 2 || centerAngle > Math.PI * 1.5) { | ||
| return 'start'; | ||
| } | ||
| return 'end'; | ||
| }; | ||
| var computeArcLink = function computeArcLink(arc, offset, diagonalLength, straightLength) { | ||
| var centerAngle = getNormalizedAngle(arc.startAngle + (arc.endAngle - arc.startAngle) / 2 - Math.PI / 2); | ||
| var point0 = core.positionFromAngle(centerAngle, arc.outerRadius + offset); | ||
| var point1 = core.positionFromAngle(centerAngle, arc.outerRadius + offset + diagonalLength); | ||
| var side; | ||
| var point2; | ||
| if (centerAngle < Math.PI / 2 || centerAngle > Math.PI * 1.5) { | ||
| side = 'after'; | ||
| point2 = { | ||
| x: point1.x + straightLength, | ||
| y: point1.y | ||
| }; | ||
| } else { | ||
| side = 'before'; | ||
| point2 = { | ||
| x: point1.x - straightLength, | ||
| y: point1.y | ||
| }; | ||
| } | ||
| return { | ||
| side: side, | ||
| points: [point0, point1, point2] | ||
| }; | ||
| }; | ||
| var lineGenerator = d3Shape.line().x(function (d) { | ||
| return d.x; | ||
| }).y(function (d) { | ||
| return d.y; | ||
| }); | ||
| var useTransitionPhases = function useTransitionPhases(_ref) { | ||
| var offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| textOffset = _ref.textOffset, | ||
| getLinkColor = _ref.getLinkColor, | ||
| getTextColor = _ref.getTextColor; | ||
| return react.useMemo(function () { | ||
| return { | ||
| enter: function enter(datum) { | ||
| return { | ||
| startAngle: datum.arc.startAngle, | ||
| endAngle: datum.arc.endAngle, | ||
| innerRadius: datum.arc.innerRadius, | ||
| outerRadius: datum.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: 0, | ||
| straightLength: 0, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(datum), | ||
| textColor: getTextColor(datum), | ||
| opacity: 0 | ||
| }; | ||
| }, | ||
| update: function update(d) { | ||
| return { | ||
| startAngle: d.arc.startAngle, | ||
| endAngle: d.arc.endAngle, | ||
| innerRadius: d.arc.innerRadius, | ||
| outerRadius: d.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(d), | ||
| textColor: getTextColor(d), | ||
| opacity: 1 | ||
| }; | ||
| }, | ||
| leave: function leave(d) { | ||
| return { | ||
| startAngle: d.arc.startAngle, | ||
| endAngle: d.arc.endAngle, | ||
| innerRadius: d.arc.innerRadius, | ||
| outerRadius: d.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: 0, | ||
| straightLength: 0, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(d), | ||
| textColor: getTextColor(d), | ||
| opacity: 0 | ||
| }; | ||
| } | ||
| }; | ||
| }, [diagonalLength, straightLength, textOffset, getLinkColor, getTextColor]); | ||
| }; | ||
| var interpolateLink = function interpolateLink(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue], function (startAngle, endAngle, innerRadius, outerRadius, offset, diagonalLengthAnimated, straightLengthAnimated) { | ||
| var _computeArcLink = computeArcLink({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset, diagonalLengthAnimated, straightLengthAnimated), | ||
| points = _computeArcLink.points; | ||
| return lineGenerator(points); | ||
| }); | ||
| }; | ||
| var interpolateTextAnchor = function interpolateTextAnchor(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| return computeArcLinkTextAnchor({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }); | ||
| }); | ||
| }; | ||
| var interpolateTextPosition = function interpolateTextPosition(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue, textOffsetValue) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue, textOffsetValue], function (startAngle, endAngle, innerRadius, outerRadius, offset, diagonalLengthAnimated, straightLengthAnimated, textOffset) { | ||
| var _computeArcLink2 = computeArcLink({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset, diagonalLengthAnimated, straightLengthAnimated), | ||
| points = _computeArcLink2.points, | ||
| side = _computeArcLink2.side; | ||
| var position = points[2]; | ||
| if (side === 'before') { | ||
| position.x -= textOffset; | ||
| } else { | ||
| position.x += textOffset; | ||
| } | ||
| return "translate(".concat(position.x, ",").concat(position.y, ")"); | ||
| }); | ||
| }; | ||
| var useArcLinkLabelsTransition = function useArcLinkLabelsTransition(_ref2) { | ||
| var data = _ref2.data, | ||
| _ref2$offset = _ref2.offset, | ||
| offset = _ref2$offset === void 0 ? 0 : _ref2$offset, | ||
| diagonalLength = _ref2.diagonalLength, | ||
| straightLength = _ref2.straightLength, | ||
| _ref2$skipAngle = _ref2.skipAngle, | ||
| skipAngle = _ref2$skipAngle === void 0 ? 0 : _ref2$skipAngle, | ||
| textOffset = _ref2.textOffset, | ||
| linkColor = _ref2.linkColor, | ||
| textColor = _ref2.textColor; | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var theme = core.useTheme(); | ||
| var getLinkColor = colors.useInheritedColor(linkColor, theme); | ||
| var getTextColor = colors.useInheritedColor(textColor, theme); | ||
| var filteredData = useFilteredDataBySkipAngle(data, skipAngle); | ||
| var transitionPhases = useTransitionPhases({ | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| getLinkColor: getLinkColor, | ||
| getTextColor: getTextColor | ||
| }); | ||
| var transition = web.useTransition(filteredData, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: transitionPhases.update, | ||
| from: transitionPhases.enter, | ||
| enter: transitionPhases.update, | ||
| update: transitionPhases.update, | ||
| leave: transitionPhases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolateLink: interpolateLink, | ||
| interpolateTextAnchor: interpolateTextAnchor, | ||
| interpolateTextPosition: interpolateTextPosition | ||
| }; | ||
| }; | ||
| var ArcLinkLabel = function ArcLinkLabel(_ref) { | ||
| var label = _ref.label, | ||
| style = _ref.style; | ||
| var theme = core.useTheme(); | ||
| return jsxRuntime.jsxs(web.animated.g, { | ||
| opacity: style.opacity, | ||
| children: [jsxRuntime.jsx(web.animated.path, { | ||
| fill: "none", | ||
| stroke: style.linkColor, | ||
| strokeWidth: style.thickness, | ||
| d: style.path | ||
| }), jsxRuntime.jsx(web.animated.text, { | ||
| transform: style.textPosition, | ||
| textAnchor: style.textAnchor, | ||
| dominantBaseline: "central", | ||
| style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, { | ||
| fill: style.textColor | ||
| }), | ||
| children: label | ||
| })] | ||
| }); | ||
| }; | ||
| var ArcLinkLabelsLayer = function ArcLinkLabelsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| labelAccessor = _ref.label, | ||
| skipAngle = _ref.skipAngle, | ||
| offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| strokeWidth = _ref.strokeWidth, | ||
| textOffset = _ref.textOffset, | ||
| textColor = _ref.textColor, | ||
| linkColor = _ref.linkColor, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcLinkLabel : _ref$component; | ||
| var getLabel = core.usePropertyAccessor(labelAccessor); | ||
| var _useArcLinkLabelsTran = useArcLinkLabelsTransition({ | ||
| data: data, | ||
| skipAngle: skipAngle, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| linkColor: linkColor, | ||
| textColor: textColor | ||
| }), | ||
| transition = _useArcLinkLabelsTran.transition, | ||
| interpolateLink = _useArcLinkLabelsTran.interpolateLink, | ||
| interpolateTextAnchor = _useArcLinkLabelsTran.interpolateTextAnchor, | ||
| interpolateTextPosition = _useArcLinkLabelsTran.interpolateTextPosition; | ||
| var Label = component; | ||
| return jsxRuntime.jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return react.createElement(Label, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| label: getLabel(datum), | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| thickness: strokeWidth, | ||
| path: interpolateLink(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, transitionProps.offset, transitionProps.diagonalLength, transitionProps.straightLength), | ||
| textAnchor: interpolateTextAnchor(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius), | ||
| textPosition: interpolateTextPosition(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, transitionProps.offset, transitionProps.diagonalLength, transitionProps.straightLength, transitionProps.textOffset) | ||
| }) | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| var drawCanvasArcLinkLabels = function drawCanvasArcLinkLabels(ctx, labels, theme, strokeWidth) { | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily); | ||
| labels.forEach(function (label) { | ||
| ctx.fillStyle = label.textColor; | ||
| ctx.textAlign = core.textPropsByEngine.canvas.align[label.textAnchor]; | ||
| ctx.fillText("".concat(label.label), label.x, label.y); | ||
| ctx.beginPath(); | ||
| ctx.strokeStyle = label.linkColor; | ||
| ctx.lineWidth = strokeWidth; | ||
| label.points.forEach(function (point, index) { | ||
| if (index === 0) ctx.moveTo(point.x, point.y);else ctx.lineTo(point.x, point.y); | ||
| }); | ||
| ctx.stroke(); | ||
| }); | ||
| }; | ||
| var useArcLinks = function useArcLinks(_ref) { | ||
| var data = _ref.data, | ||
| _ref$skipAngle = _ref.skipAngle, | ||
| skipAngle = _ref$skipAngle === void 0 ? 0 : _ref$skipAngle, | ||
| _ref$offset = _ref.offset, | ||
| offset = _ref$offset === void 0 ? 0.5 : _ref$offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| _ref$computeExtraProp = _ref.computeExtraProps, | ||
| computeExtraProps = _ref$computeExtraProp === void 0 ? function () { | ||
| return {}; | ||
| } : _ref$computeExtraProp; | ||
| var links = react.useMemo(function () { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(core.radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }).map(function (datum) { | ||
| return _objectSpread2(_objectSpread2({}, computeArcLink(datum.arc, offset, diagonalLength, straightLength)), {}, { | ||
| data: datum | ||
| }); | ||
| }); | ||
| }, [data, skipAngle, offset, diagonalLength, straightLength]); | ||
| return react.useMemo(function () { | ||
| return links.map(function (link) { | ||
| return _objectSpread2(_objectSpread2({}, computeExtraProps(link)), link); | ||
| }); | ||
| }, [links, computeExtraProps]); | ||
| }; | ||
| var useArcLinkLabels = function useArcLinkLabels(_ref) { | ||
| var data = _ref.data, | ||
| skipAngle = _ref.skipAngle, | ||
| offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| _ref$textOffset = _ref.textOffset, | ||
| textOffset = _ref$textOffset === void 0 ? 0 : _ref$textOffset, | ||
| label = _ref.label, | ||
| linkColor = _ref.linkColor, | ||
| textColor = _ref.textColor; | ||
| var getLabel = core.usePropertyAccessor(label); | ||
| var theme = core.useTheme(); | ||
| var getLinkColor = colors.useInheritedColor(linkColor, theme); | ||
| var getTextColor = colors.useInheritedColor(textColor, theme); | ||
| var computeExtraProps = react.useCallback(function (link) { | ||
| var position = { | ||
| x: link.points[2].x, | ||
| y: link.points[2].y | ||
| }; | ||
| var textAnchor; | ||
| if (link.side === 'before') { | ||
| position.x -= textOffset; | ||
| textAnchor = 'end'; | ||
| } else { | ||
| position.x += textOffset; | ||
| textAnchor = 'start'; | ||
| } | ||
| return _objectSpread2(_objectSpread2({}, position), {}, { | ||
| label: getLabel(link.data), | ||
| linkColor: getLinkColor(link.data), | ||
| textAnchor: textAnchor, | ||
| textColor: getTextColor(link.data) | ||
| }); | ||
| }, [getLabel, getLinkColor, getTextColor, textOffset]); | ||
| return useArcLinks({ | ||
| data: data, | ||
| skipAngle: skipAngle, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| computeExtraProps: computeExtraProps | ||
| }); | ||
| }; | ||
| 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 ArcLine = function ArcLine(_ref) { | ||
| var animatedProps = _ref.animated, | ||
| rest = _objectWithoutProperties(_ref, ["animated"]); | ||
| return jsxRuntime.jsx(web.animated.path, _objectSpread2({ | ||
| d: web.to([animatedProps.radius, animatedProps.startAngle, animatedProps.endAngle], function (radius, start, end) { | ||
| return generateSvgArc(radius, start, end); | ||
| }) | ||
| }, rest)); | ||
| }; | ||
| var ArcShape = function ArcShape(_ref) { | ||
| var datum = _ref.datum, | ||
| style = _ref.style, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave; | ||
| var handleClick = react.useCallback(function (event) { | ||
| return onClick === null || onClick === void 0 ? void 0 : onClick(datum, event); | ||
| }, [onClick, datum]); | ||
| var handleMouseEnter = react.useCallback(function (event) { | ||
| return onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(datum, event); | ||
| }, [onMouseEnter, datum]); | ||
| var handleMouseMove = react.useCallback(function (event) { | ||
| return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| }, [onMouseMove, datum]); | ||
| var handleMouseLeave = react.useCallback(function (event) { | ||
| return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(datum, event); | ||
| }, [onMouseLeave, datum]); | ||
| return jsxRuntime.jsx(web.animated.path, { | ||
| d: style.path, | ||
| opacity: style.opacity, | ||
| fill: datum.fill || style.color, | ||
| stroke: style.borderColor, | ||
| strokeWidth: style.borderWidth, | ||
| onClick: onClick ? handleClick : undefined, | ||
| onMouseEnter: onMouseEnter ? handleMouseEnter : undefined, | ||
| onMouseMove: onMouseMove ? handleMouseMove : undefined, | ||
| onMouseLeave: onMouseLeave ? handleMouseLeave : undefined | ||
| }); | ||
| }; | ||
| var interpolateArc = function interpolateArc(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, arcGenerator) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| return arcGenerator({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: Math.max(0, innerRadius), | ||
| outerRadius: Math.max(0, outerRadius) | ||
| }); | ||
| }); | ||
| }; | ||
| var useArcsTransition = function useArcsTransition(data) { | ||
| var mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'innerRadius'; | ||
| var extra = arguments.length > 2 ? arguments[2] : undefined; | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var phases = useArcTransitionMode(mode, extra); | ||
| var transition = web.useTransition(data, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: phases.update, | ||
| from: phases.enter, | ||
| enter: phases.update, | ||
| update: phases.update, | ||
| leave: phases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolate: interpolateArc | ||
| }; | ||
| }; | ||
| var ArcsLayer = function ArcsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| arcGenerator = _ref.arcGenerator, | ||
| borderWidth = _ref.borderWidth, | ||
| borderColor = _ref.borderColor, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| transitionMode = _ref.transitionMode, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcShape : _ref$component; | ||
| var theme = core.useTheme(); | ||
| var getBorderColor = colors.useInheritedColor(borderColor, theme); | ||
| var _useArcsTransition = useArcsTransition(data, transitionMode, { | ||
| enter: function enter(datum) { | ||
| return { | ||
| opacity: 0, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| }, | ||
| update: function update(datum) { | ||
| return { | ||
| opacity: 1, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| }, | ||
| leave: function leave(datum) { | ||
| return { | ||
| opacity: 0, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| } | ||
| }), | ||
| transition = _useArcsTransition.transition, | ||
| interpolate = _useArcsTransition.interpolate; | ||
| var Arc = component; | ||
| return jsxRuntime.jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return react.createElement(Arc, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| borderWidth: borderWidth, | ||
| path: interpolate(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, arcGenerator) | ||
| }), | ||
| onClick: onClick, | ||
| onMouseEnter: onMouseEnter, | ||
| onMouseMove: onMouseMove, | ||
| onMouseLeave: onMouseLeave | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| 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 computeArcBoundingBox = function computeArcBoundingBox(centerX, centerY, radius, startAngle, endAngle) { | ||
| var includeCenter = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; | ||
| var points = []; | ||
| var p0 = core.positionFromAngle(core.degreesToRadians(startAngle), radius); | ||
| points.push([p0.x, p0.y]); | ||
| var p1 = core.positionFromAngle(core.degreesToRadians(endAngle), radius); | ||
| points.push([p1.x, p1.y]); | ||
| for (var angle = Math.round(Math.min(startAngle, endAngle)); angle <= Math.round(Math.max(startAngle, endAngle)); angle++) { | ||
| if (angle % 90 === 0) { | ||
| var p = core.positionFromAngle(core.degreesToRadians(angle), radius); | ||
| points.push([p.x, p.y]); | ||
| } | ||
| } | ||
| points = points.map(function (_ref) { | ||
| var _ref2 = _slicedToArray(_ref, 2), | ||
| x = _ref2[0], | ||
| y = _ref2[1]; | ||
| return [centerX + x, centerY + y]; | ||
| }); | ||
| if (includeCenter) { | ||
| points.push([centerX, centerY]); | ||
| } | ||
| var xs = points.map(function (_ref3) { | ||
| var _ref4 = _slicedToArray(_ref3, 1), | ||
| x = _ref4[0]; | ||
| return x; | ||
| }); | ||
| var ys = points.map(function (_ref5) { | ||
| var _ref6 = _slicedToArray(_ref5, 2), | ||
| y = _ref6[1]; | ||
| return y; | ||
| }); | ||
| var x0 = Math.min.apply(Math, _toConsumableArray(xs)); | ||
| var x1 = Math.max.apply(Math, _toConsumableArray(xs)); | ||
| var y0 = Math.min.apply(Math, _toConsumableArray(ys)); | ||
| var y1 = Math.max.apply(Math, _toConsumableArray(ys)); | ||
| return { | ||
| points: points, | ||
| x: x0, | ||
| y: y0, | ||
| width: x1 - x0, | ||
| height: y1 - y0 | ||
| }; | ||
| }; | ||
| var isCursorInRing = function isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY) { | ||
| var distance = core.getDistance(cursorX, cursorY, centerX, centerY); | ||
| return distance < radius && distance > innerRadius; | ||
| }; | ||
| var findArcUnderCursor = function findArcUnderCursor(centerX, centerY, radius, innerRadius, arcs, cursorX, cursorY) { | ||
| if (!isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY)) { | ||
| return undefined; | ||
| } | ||
| var cursorAngle = core.getAngle(cursorX, cursorY, centerX, centerY); | ||
| return arcs.find(function (_ref) { | ||
| var startAngle = _ref.startAngle, | ||
| endAngle = _ref.endAngle; | ||
| return cursorAngle >= startAngle && cursorAngle < endAngle; | ||
| }); | ||
| }; | ||
| var useAnimatedArc = function useAnimatedArc(datumWithArc, arcGenerator) { | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var animatedValues = web.useSpring({ | ||
| startAngle: datumWithArc.arc.startAngle, | ||
| endAngle: datumWithArc.arc.endAngle, | ||
| innerRadius: datumWithArc.arc.innerRadius, | ||
| outerRadius: datumWithArc.arc.outerRadius, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return _objectSpread2(_objectSpread2({}, animatedValues), {}, { | ||
| path: interpolateArc(animatedValues.startAngle, animatedValues.endAngle, animatedValues.innerRadius, animatedValues.outerRadius, arcGenerator) | ||
| }); | ||
| }; | ||
| var useArcGenerator = function useArcGenerator() { | ||
| var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? 0 : _ref$cornerRadius, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? 0 : _ref$padAngle; | ||
| return react.useMemo(function () { | ||
| return d3Shape.arc().innerRadius(function (arc) { | ||
| return arc.innerRadius; | ||
| }).outerRadius(function (arc) { | ||
| return arc.outerRadius; | ||
| }).cornerRadius(cornerRadius).padAngle(padAngle); | ||
| }, [cornerRadius, padAngle]); | ||
| }; | ||
| exports.ArcLabelsLayer = ArcLabelsLayer; | ||
| exports.ArcLine = ArcLine; | ||
| exports.ArcLinkLabelsLayer = ArcLinkLabelsLayer; | ||
| exports.ArcShape = ArcShape; | ||
| exports.ArcsLayer = ArcsLayer; | ||
| exports.arcTransitionModeById = arcTransitionModeById; | ||
| exports.arcTransitionModes = arcTransitionModes; | ||
| exports.computeArcBoundingBox = computeArcBoundingBox; | ||
| exports.computeArcCenter = computeArcCenter; | ||
| exports.computeArcLink = computeArcLink; | ||
| exports.computeArcLinkTextAnchor = computeArcLinkTextAnchor; | ||
| exports.drawCanvasArcLabels = drawCanvasArcLabels; | ||
| exports.drawCanvasArcLinkLabels = drawCanvasArcLinkLabels; | ||
| exports.findArcUnderCursor = findArcUnderCursor; | ||
| exports.interpolateArc = interpolateArc; | ||
| exports.interpolateArcCenter = interpolateArcCenter; | ||
| exports.isCursorInRing = isCursorInRing; | ||
| exports.useAnimatedArc = useAnimatedArc; | ||
| exports.useArcCenters = useArcCenters; | ||
| exports.useArcCentersTransition = useArcCentersTransition; | ||
| exports.useArcGenerator = useArcGenerator; | ||
| exports.useArcLabels = useArcLabels; | ||
| exports.useArcLinkLabels = useArcLinkLabels; | ||
| exports.useArcLinkLabelsTransition = useArcLinkLabelsTransition; | ||
| exports.useArcLinks = useArcLinks; | ||
| exports.useArcTransitionMode = useArcTransitionMode; | ||
| exports.useArcsTransition = useArcsTransition; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-spring/web"),n=require("@nivo/core"),t=require("react/jsx-runtime"),r=require("react"),o=require("@nivo/colors"),i=require("d3-shape");function a(){return a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},a.apply(this,arguments)}var u={pointerEvents:"none"},s=function(r){var o=r.label,i=r.style,s=n.useTheme();return t.jsx(e.animated.g,{transform:i.transform,opacity:i.progress,style:u,children:t.jsx(e.animated.text,{textAnchor:"middle",dominantBaseline:"central",style:a({},s.labels.text,{fill:i.textColor}),children:o})})},l=function(e){var n=e%(2*Math.PI);return n<0&&(n+=2*Math.PI),n},d=function(e,t){return e.filter((function(e){return Math.abs(n.radiansToDegrees(e.arc.endAngle-e.arc.startAngle))>=t}))},c=function(e,n,t,r,o){return["A",e,e,0,n,t,r,o].join(" ")},f={startAngle:{enter:function(e){return a({},e,{endAngle:e.startAngle})},update:function(e){return e},leave:function(e){return a({},e,{startAngle:e.endAngle})}},middleAngle:{enter:function(e){var n=e.startAngle+(e.endAngle-e.startAngle)/2;return a({},e,{startAngle:n,endAngle:n})},update:function(e){return e},leave:function(e){var n=e.startAngle+(e.endAngle-e.startAngle)/2;return a({},e,{startAngle:n,endAngle:n})}},endAngle:{enter:function(e){return a({},e,{startAngle:e.endAngle})},update:function(e){return e},leave:function(e){return a({},e,{endAngle:e.startAngle})}},innerRadius:{enter:function(e){return a({},e,{outerRadius:e.innerRadius})},update:function(e){return e},leave:function(e){return a({},e,{innerRadius:e.outerRadius})}},centerRadius:{enter:function(e){var n=e.innerRadius+(e.outerRadius-e.innerRadius)/2;return a({},e,{innerRadius:n,outerRadius:n})},update:function(e){return e},leave:function(e){var n=e.innerRadius+(e.outerRadius-e.innerRadius)/2;return a({},e,{innerRadius:n,outerRadius:n})}},outerRadius:{enter:function(e){return a({},e,{innerRadius:e.outerRadius})},update:function(e){return e},leave:function(e){return a({},e,{outerRadius:e.innerRadius})}},pushIn:{enter:function(e){return a({},e,{innerRadius:e.innerRadius-e.outerRadius+e.innerRadius,outerRadius:e.innerRadius})},update:function(e){return e},leave:function(e){return a({},e,{innerRadius:e.outerRadius,outerRadius:e.outerRadius+e.outerRadius-e.innerRadius})}},pushOut:{enter:function(e){return a({},e,{innerRadius:e.outerRadius,outerRadius:e.outerRadius+e.outerRadius-e.innerRadius})},update:function(e){return e},leave:function(e){return a({},e,{innerRadius:e.innerRadius-e.outerRadius+e.innerRadius,outerRadius:e.innerRadius})}}},g=function(e,n){return r.useMemo((function(){var t=f[e];return{enter:function(e){return a({progress:0},t.enter(e.arc),n?n.enter(e):{})},update:function(e){return a({progress:1},t.update(e.arc),n?n.update(e):{})},leave:function(e){return a({progress:0},t.leave(e.arc),n?n.leave(e):{})}}}),[e,n])},p=function(e,t){var r=n.midAngle(e)-Math.PI/2,o=e.innerRadius+(e.outerRadius-e.innerRadius)*t;return n.positionFromAngle(r,o)},A=function(n){return function(t,r,o,i){return e.to([t,r,o,i],(function(e,t,r,o){var i=p({startAngle:e,endAngle:t,innerRadius:r,outerRadius:o},n);return"translate("+i.x+","+i.y+")"}))}},x=function(t,r,o,i){void 0===r&&(r=.5),void 0===o&&(o="innerRadius");var a=n.useMotionConfig(),u=a.animate,s=a.config,l=g(o,i);return{transition:e.useTransition(t,{keys:function(e){return e.id},initial:l.update,from:l.enter,enter:l.update,update:l.update,leave:l.leave,config:s,immediate:!u}),interpolate:A(r)}},h=function(e){var n=e.data,t=e.offset,o=void 0===t?.5:t,i=e.skipAngle,u=void 0===i?0:i,s=e.computeExtraProps,l=void 0===s?function(){return{}}:s;return r.useMemo((function(){return d(n,u).map((function(e){var n=p(e.arc,o);return a({},l(e),{x:n.x,y:n.y,data:e})}))}),[n,o,u,l])},v=s,R=function(r){var o=r.label,i=r.style,u=n.useTheme();return t.jsxs(e.animated.g,{opacity:i.opacity,children:[t.jsx(e.animated.path,{fill:"none",stroke:i.linkColor,strokeWidth:i.thickness,d:i.path}),t.jsx(e.animated.text,{transform:i.textPosition,textAnchor:i.textAnchor,dominantBaseline:"central",style:a({},u.labels.text,{fill:i.textColor}),children:o})]})},m=function(e){var n=l(e.startAngle+(e.endAngle-e.startAngle)/2-Math.PI/2);return n<Math.PI/2||n>1.5*Math.PI?"start":"end"},y=function(e,t,r,o){var i,a,u=l(e.startAngle+(e.endAngle-e.startAngle)/2-Math.PI/2),s=n.positionFromAngle(u,e.outerRadius+t),d=n.positionFromAngle(u,e.outerRadius+t+r);return u<Math.PI/2||u>1.5*Math.PI?(i="after",a={x:d.x+o,y:d.y}):(i="before",a={x:d.x-o,y:d.y}),{side:i,points:[s,d,a]}},C=i.line().x((function(e){return e.x})).y((function(e){return e.y})),M=function(n,t,r,o,i,a,u){return e.to([n,t,r,o,i,a,u],(function(e,n,t,r,o,i,a){var u=y({startAngle:e,endAngle:n,innerRadius:t,outerRadius:r},o,i,a).points;return C(u)}))},k=function(n,t,r,o){return e.to([n,t,r,o],(function(e,n,t,r){return m({startAngle:e,endAngle:n,innerRadius:t,outerRadius:r})}))},L=function(n,t,r,o,i,a,u,s){return e.to([n,t,r,o,i,a,u,s],(function(e,n,t,r,o,i,a,u){var s=y({startAngle:e,endAngle:n,innerRadius:t,outerRadius:r},o,i,a),l=s.points,d=s.side,c=l[2];return"before"===d?c.x-=u:c.x+=u,"translate("+c.x+","+c.y+")"}))},b=function(t){var i=t.data,a=t.offset,u=void 0===a?0:a,s=t.diagonalLength,l=t.straightLength,c=t.skipAngle,f=void 0===c?0:c,g=t.textOffset,p=t.linkColor,A=t.textColor,x=n.useMotionConfig(),h=x.animate,v=x.config,R=n.useTheme(),m=o.useInheritedColor(p,R),y=o.useInheritedColor(A,R),C=function(e,n){return r.useMemo((function(){return d(e,n)}),[e,n])}(i,f),b=function(e){var n=e.offset,t=e.diagonalLength,o=e.straightLength,i=e.textOffset,a=e.getLinkColor,u=e.getTextColor;return r.useMemo((function(){return{enter:function(e){return{startAngle:e.arc.startAngle,endAngle:e.arc.endAngle,innerRadius:e.arc.innerRadius,outerRadius:e.arc.outerRadius,offset:n,diagonalLength:0,straightLength:0,textOffset:i,linkColor:a(e),textColor:u(e),opacity:0}},update:function(e){return{startAngle:e.arc.startAngle,endAngle:e.arc.endAngle,innerRadius:e.arc.innerRadius,outerRadius:e.arc.outerRadius,offset:n,diagonalLength:t,straightLength:o,textOffset:i,linkColor:a(e),textColor:u(e),opacity:1}},leave:function(e){return{startAngle:e.arc.startAngle,endAngle:e.arc.endAngle,innerRadius:e.arc.innerRadius,outerRadius:e.arc.outerRadius,offset:n,diagonalLength:0,straightLength:0,textOffset:i,linkColor:a(e),textColor:u(e),opacity:0}}}}),[t,o,i,a,u])}({offset:u,diagonalLength:s,straightLength:l,textOffset:g,getLinkColor:m,getTextColor:y});return{transition:e.useTransition(C,{keys:function(e){return e.id},initial:b.update,from:b.enter,enter:b.update,update:b.update,leave:b.leave,config:v,immediate:!h}),interpolateLink:M,interpolateTextAnchor:k,interpolateTextPosition:L}},T=function(e){var t=e.data,o=e.skipAngle,i=void 0===o?0:o,u=e.offset,s=void 0===u?.5:u,l=e.diagonalLength,d=e.straightLength,c=e.computeExtraProps,f=void 0===c?function(){return{}}:c,g=r.useMemo((function(){return t.filter((function(e){return Math.abs(n.radiansToDegrees(e.arc.endAngle-e.arc.startAngle))>=i})).map((function(e){return a({},y(e.arc,s,l,d),{data:e})}))}),[t,i,s,l,d]);return r.useMemo((function(){return g.map((function(e){return a({},f(e),e)}))}),[g,f])},P=R,I=["animated"],O=function(n){var o=n.datum,i=n.style,a=n.onClick,u=n.onMouseEnter,s=n.onMouseMove,l=n.onMouseLeave,d=r.useCallback((function(e){return null==a?void 0:a(o,e)}),[a,o]),c=r.useCallback((function(e){return null==u?void 0:u(o,e)}),[u,o]),f=r.useCallback((function(e){return null==s?void 0:s(o,e)}),[s,o]),g=r.useCallback((function(e){return null==l?void 0:l(o,e)}),[l,o]);return t.jsx(e.animated.path,{d:i.path,opacity:i.opacity,fill:o.fill||i.color,stroke:i.borderColor,strokeWidth:i.borderWidth,onClick:a?d:void 0,onMouseEnter:u?c:void 0,onMouseMove:s?f:void 0,onMouseLeave:l?g:void 0})},j=function(n,t,r,o,i){return e.to([n,t,r,o],(function(e,n,t,r){return i({startAngle:e,endAngle:n,innerRadius:Math.max(0,t),outerRadius:Math.max(0,r)})}))},E=function(t,r,o){void 0===r&&(r="innerRadius");var i=n.useMotionConfig(),a=i.animate,u=i.config,s=g(r,o);return{transition:e.useTransition(t,{keys:function(e){return e.id},initial:s.update,from:s.enter,enter:s.update,update:s.update,leave:s.leave,config:u,immediate:!a}),interpolate:j}},F=function(e,t,r,o,i,a){var u=n.getDistance(i,a,e,t);return u<r&&u>o};exports.ArcLabelComponent=v,exports.ArcLabelsLayer=function(e){var i=e.center,u=e.data,l=e.transitionMode,d=e.label,c=e.radiusOffset,f=e.skipAngle,g=e.textColor,p=e.component,A=void 0===p?s:p,h=n.usePropertyAccessor(d),v=n.useTheme(),R=o.useInheritedColor(g,v),m=r.useMemo((function(){return u.filter((function(e){return Math.abs(n.radiansToDegrees(e.arc.endAngle-e.arc.startAngle))>=f}))}),[u,f]),y=x(m,c,l),C=y.transition,M=y.interpolate,k=A;return t.jsx("g",{transform:"translate("+i[0]+","+i[1]+")",children:C((function(e,n){return r.createElement(k,{key:n.id,datum:n,label:h(n),style:a({},e,{transform:M(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius),textColor:R(n)})})}))})},exports.ArcLine=function(r){var o=r.animated,i=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(r,I);return t.jsx(e.animated.path,a({d:e.to([o.radius,o.startAngle,o.endAngle],(function(e,t,r){return function(e,t,r){var o=Math.min(t,r),i=Math.max(t,r),a=n.positionFromAngle(n.degreesToRadians(i),e),u=n.positionFromAngle(n.degreesToRadians(o),e);if(i-o>=360){var s=n.positionFromAngle(n.degreesToRadians(o+180),e);return["M "+a.x+" "+a.y,c(e,1,1,s.x,s.y),"M "+a.x+" "+a.y,c(e,1,0,s.x,s.y)].join(" ")}var l=i-o<=180?0:1;return["M "+a.x+" "+a.y,c(e,l,0,u.x,u.y)].join(" ")}(e,t,r)}))},i))},exports.ArcLinkLabelComponent=P,exports.ArcLinkLabelsLayer=function(e){var o=e.center,i=e.data,u=e.label,s=e.skipAngle,l=e.offset,d=e.diagonalLength,c=e.straightLength,f=e.strokeWidth,g=e.textOffset,p=e.textColor,A=e.linkColor,x=e.component,h=void 0===x?R:x,v=n.usePropertyAccessor(u),m=b({data:i,skipAngle:s,offset:l,diagonalLength:d,straightLength:c,textOffset:g,linkColor:A,textColor:p}),y=m.transition,C=m.interpolateLink,M=m.interpolateTextAnchor,k=m.interpolateTextPosition,L=h;return t.jsx("g",{transform:"translate("+o[0]+","+o[1]+")",children:y((function(e,n){return r.createElement(L,{key:n.id,datum:n,label:v(n),style:a({},e,{thickness:f,path:C(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius,e.offset,e.diagonalLength,e.straightLength),textAnchor:M(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius),textPosition:k(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius,e.offset,e.diagonalLength,e.straightLength,e.textOffset)})})}))})},exports.ArcShape=O,exports.ArcsLayer=function(e){var i=e.center,u=e.data,s=e.arcGenerator,l=e.borderWidth,d=e.borderColor,c=e.onClick,f=e.onMouseEnter,g=e.onMouseMove,p=e.onMouseLeave,A=e.transitionMode,x=e.component,h=void 0===x?O:x,v=n.useTheme(),R=o.useInheritedColor(d,v),m=E(u,A,{enter:function(e){return{opacity:0,color:e.color,borderColor:R(e)}},update:function(e){return{opacity:1,color:e.color,borderColor:R(e)}},leave:function(e){return{opacity:0,color:e.color,borderColor:R(e)}}}),y=m.transition,C=m.interpolate,M=h;return t.jsx("g",{transform:"translate("+i[0]+","+i[1]+")",children:y((function(e,n){return r.createElement(M,{key:n.id,datum:n,style:a({},e,{borderWidth:l,path:C(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius,s)}),onClick:c,onMouseEnter:f,onMouseMove:g,onMouseLeave:p})}))})},exports.arcTransitionModeById=f,exports.arcTransitionModes=["startAngle","middleAngle","endAngle","innerRadius","centerRadius","outerRadius","pushIn","pushOut"],exports.computeArcBoundingBox=function(e,t,r,o,i,a){void 0===a&&(a=!0);var u=[],s=n.positionFromAngle(n.degreesToRadians(o),r);u.push([s.x,s.y]);var l=n.positionFromAngle(n.degreesToRadians(i),r);u.push([l.x,l.y]);for(var d=Math.round(Math.min(o,i));d<=Math.round(Math.max(o,i));d++)if(d%90==0){var c=n.positionFromAngle(n.degreesToRadians(d),r);u.push([c.x,c.y])}u=u.map((function(n){var r=n[0],o=n[1];return[e+r,t+o]})),a&&u.push([e,t]);var f=u.map((function(e){return e[0]})),g=u.map((function(e){return e[1]})),p=Math.min.apply(Math,f),A=Math.max.apply(Math,f),x=Math.min.apply(Math,g);return{points:u,x:p,y:x,width:A-p,height:Math.max.apply(Math,g)-x}},exports.computeArcCenter=p,exports.computeArcLink=y,exports.computeArcLinkTextAnchor=m,exports.drawCanvasArcLabels=function(e,n,t){e.textAlign="center",e.textBaseline="middle",e.font=t.labels.text.fontSize+"px "+t.labels.text.fontFamily,n.forEach((function(n){e.fillStyle=n.textColor,e.fillText(""+n.label,n.x,n.y)}))},exports.drawCanvasArcLinkLabels=function(e,t,r,o){e.textBaseline="middle",e.font=r.labels.text.fontSize+"px "+r.labels.text.fontFamily,t.forEach((function(t){e.fillStyle=t.textColor,e.textAlign=n.textPropsByEngine.canvas.align[t.textAnchor],e.fillText(""+t.label,t.x,t.y),e.beginPath(),e.strokeStyle=t.linkColor,e.lineWidth=o,t.points.forEach((function(n,t){0===t?e.moveTo(n.x,n.y):e.lineTo(n.x,n.y)})),e.stroke()}))},exports.findArcUnderCursor=function(e,t,r,o,i,a,u){if(F(e,t,r,o,a,u)){var s=n.getAngle(a,u,e,t);return i.find((function(e){var n=e.startAngle,t=e.endAngle;return s>=n&&s<t}))}},exports.interpolateArc=j,exports.interpolateArcCenter=A,exports.isCursorInRing=F,exports.useAnimatedArc=function(t,r){var o=n.useMotionConfig(),i=o.animate,u=o.config,s=e.useSpring({startAngle:t.arc.startAngle,endAngle:t.arc.endAngle,innerRadius:t.arc.innerRadius,outerRadius:t.arc.outerRadius,config:u,immediate:!i});return a({},s,{path:j(s.startAngle,s.endAngle,s.innerRadius,s.outerRadius,r)})},exports.useArcCenters=h,exports.useArcCentersTransition=x,exports.useArcGenerator=function(e){var n=void 0===e?{}:e,t=n.cornerRadius,o=void 0===t?0:t,a=n.padAngle,u=void 0===a?0:a;return r.useMemo((function(){return i.arc().innerRadius((function(e){return e.innerRadius})).outerRadius((function(e){return e.outerRadius})).cornerRadius(o).padAngle(u)}),[o,u])},exports.useArcLabels=function(e){var t=e.data,i=e.offset,a=e.skipAngle,u=e.label,s=e.textColor,l=n.usePropertyAccessor(u),d=n.useTheme(),c=o.useInheritedColor(s,d),f=r.useCallback((function(e){return{label:l(e),textColor:c(e)}}),[l,c]);return h({data:t,offset:i,skipAngle:a,computeExtraProps:f})},exports.useArcLinkLabels=function(e){var t=e.data,i=e.skipAngle,u=e.offset,s=e.diagonalLength,l=e.straightLength,d=e.textOffset,c=void 0===d?0:d,f=e.label,g=e.linkColor,p=e.textColor,A=n.usePropertyAccessor(f),x=n.useTheme(),h=o.useInheritedColor(g,x),v=o.useInheritedColor(p,x),R=r.useCallback((function(e){var n,t={x:e.points[2].x,y:e.points[2].y};return"before"===e.side?(t.x-=c,n="end"):(t.x+=c,n="start"),a({},t,{label:A(e.data),linkColor:h(e.data),textAnchor:n,textColor:v(e.data)})}),[A,h,v,c]);return T({data:t,skipAngle:i,offset:u,diagonalLength:s,straightLength:l,computeExtraProps:R})},exports.useArcLinkLabelsTransition=b,exports.useArcLinks=T,exports.useArcTransitionMode=g,exports.useArcsTransition=E; | ||
| //# sourceMappingURL=nivo-arcs.cjs.js.map |
@@ -1,1114 +0,2 @@ | ||
| import { useMemo, createElement, useCallback } from 'react'; | ||
| import { radiansToDegrees, positionFromAngle, degreesToRadians, midAngle, useMotionConfig, useTheme, usePropertyAccessor, textPropsByEngine, getDistance, getAngle } from '@nivo/core'; | ||
| import { useInheritedColor } from '@nivo/colors'; | ||
| import { to, useTransition, animated, useSpring } from '@react-spring/web'; | ||
| import { jsx, jsxs } from 'react/jsx-runtime'; | ||
| import { line, arc } from 'd3-shape'; | ||
| 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; | ||
| } | ||
| var getNormalizedAngle = function getNormalizedAngle(angle) { | ||
| var normalizedAngle = angle % (Math.PI * 2); | ||
| if (normalizedAngle < 0) { | ||
| normalizedAngle += Math.PI * 2; | ||
| } | ||
| return normalizedAngle; | ||
| }; | ||
| var filterDataBySkipAngle = function filterDataBySkipAngle(data, skipAngle) { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }); | ||
| }; | ||
| var useFilteredDataBySkipAngle = function useFilteredDataBySkipAngle(data, skipAngle) { | ||
| return useMemo(function () { | ||
| return filterDataBySkipAngle(data, skipAngle); | ||
| }, [data, skipAngle]); | ||
| }; | ||
| var svgEllipticalArcCommand = function svgEllipticalArcCommand(radius, largeArcFlag, sweepFlag, x, y) { | ||
| return ['A', radius, radius, 0, largeArcFlag, sweepFlag, x, y].join(' '); | ||
| }; | ||
| var generateSvgArc = function generateSvgArc(radius, originalStartAngle, originalEndAngle) { | ||
| var startAngle = Math.min(originalStartAngle, originalEndAngle); | ||
| var endAngle = Math.max(originalStartAngle, originalEndAngle); | ||
| var start = positionFromAngle(degreesToRadians(endAngle), radius); | ||
| var end = positionFromAngle(degreesToRadians(startAngle), radius); | ||
| if (endAngle - startAngle >= 360) { | ||
| var mid = positionFromAngle(degreesToRadians(startAngle + 180), radius); | ||
| return ["M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, 1, 1, mid.x, mid.y), "M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, 1, 0, mid.x, mid.y)].join(' '); | ||
| } | ||
| var largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1; | ||
| return ["M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, largeArcFlag, 0, end.x, end.y)].join(' '); | ||
| }; | ||
| var arcTransitionModes = ['startAngle', 'middleAngle', 'endAngle', 'innerRadius', 'centerRadius', 'outerRadius', 'pushIn', 'pushOut']; | ||
| var arcTransitionModeById = { | ||
| startAngle: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| endAngle: arc.startAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: arc.endAngle | ||
| }); | ||
| } | ||
| }, | ||
| middleAngle: { | ||
| enter: function enter(arc) { | ||
| var middleAngle = arc.startAngle + (arc.endAngle - arc.startAngle) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: middleAngle, | ||
| endAngle: middleAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| var middleAngle = arc.startAngle + (arc.endAngle - arc.startAngle) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: middleAngle, | ||
| endAngle: middleAngle | ||
| }); | ||
| } | ||
| }, | ||
| endAngle: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: arc.endAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| endAngle: arc.startAngle | ||
| }); | ||
| } | ||
| }, | ||
| innerRadius: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius | ||
| }); | ||
| } | ||
| }, | ||
| centerRadius: { | ||
| enter: function enter(arc) { | ||
| var centerRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: centerRadius, | ||
| outerRadius: centerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| var centerRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: centerRadius, | ||
| outerRadius: centerRadius | ||
| }); | ||
| } | ||
| }, | ||
| outerRadius: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| } | ||
| }, | ||
| pushIn: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.innerRadius - arc.outerRadius + arc.innerRadius, | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius, | ||
| outerRadius: arc.outerRadius + arc.outerRadius - arc.innerRadius | ||
| }); | ||
| } | ||
| }, | ||
| pushOut: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius, | ||
| outerRadius: arc.outerRadius + arc.outerRadius - arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.innerRadius - arc.outerRadius + arc.innerRadius, | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| var useArcTransitionMode = function useArcTransitionMode(mode, extraTransition) { | ||
| return useMemo(function () { | ||
| var transitionMode = arcTransitionModeById[mode]; | ||
| return { | ||
| enter: function enter(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 0 | ||
| }, transitionMode.enter(datum.arc)), extraTransition ? extraTransition.enter(datum) : {}); | ||
| }, | ||
| update: function update(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 1 | ||
| }, transitionMode.update(datum.arc)), extraTransition ? extraTransition.update(datum) : {}); | ||
| }, | ||
| leave: function leave(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 0 | ||
| }, transitionMode.leave(datum.arc)), extraTransition ? extraTransition.leave(datum) : {}); | ||
| } | ||
| }; | ||
| }, [mode, extraTransition]); | ||
| }; | ||
| var computeArcCenter = function computeArcCenter(arc, offset) { | ||
| var angle = midAngle(arc) - Math.PI / 2; | ||
| var radius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) * offset; | ||
| return positionFromAngle(angle, radius); | ||
| }; | ||
| var interpolateArcCenter = function interpolateArcCenter(offset) { | ||
| return function (startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue) { | ||
| return to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| var centroid = computeArcCenter({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset); | ||
| return "translate(".concat(centroid.x, ",").concat(centroid.y, ")"); | ||
| }); | ||
| }; | ||
| }; | ||
| var useArcCentersTransition = function useArcCentersTransition(data) { | ||
| var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5; | ||
| var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'innerRadius'; | ||
| var extra = arguments.length > 3 ? arguments[3] : undefined; | ||
| var _useMotionConfig = useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var phases = useArcTransitionMode(mode, extra); | ||
| var transition = useTransition(data, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: phases.update, | ||
| from: phases.enter, | ||
| enter: phases.update, | ||
| update: phases.update, | ||
| leave: phases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolate: interpolateArcCenter(offset) | ||
| }; | ||
| }; | ||
| var useArcCenters = function useArcCenters(_ref) { | ||
| var data = _ref.data, | ||
| _ref$offset = _ref.offset, | ||
| offset = _ref$offset === void 0 ? 0.5 : _ref$offset, | ||
| _ref$skipAngle = _ref.skipAngle, | ||
| skipAngle = _ref$skipAngle === void 0 ? 0 : _ref$skipAngle, | ||
| _ref$computeExtraProp = _ref.computeExtraProps, | ||
| computeExtraProps = _ref$computeExtraProp === void 0 ? function () { | ||
| return {}; | ||
| } : _ref$computeExtraProp; | ||
| return useMemo(function () { | ||
| return filterDataBySkipAngle(data, skipAngle).map(function (datum) { | ||
| var position = computeArcCenter(datum.arc, offset); | ||
| return _objectSpread2(_objectSpread2({}, computeExtraProps(datum)), {}, { | ||
| x: position.x, | ||
| y: position.y, | ||
| data: datum | ||
| }); | ||
| }); | ||
| }, [data, offset, skipAngle, computeExtraProps]); | ||
| }; | ||
| var staticStyle = { | ||
| pointerEvents: 'none' | ||
| }; | ||
| var ArcLabel = function ArcLabel(_ref) { | ||
| var label = _ref.label, | ||
| style = _ref.style; | ||
| var theme = useTheme(); | ||
| return jsx(animated.g, { | ||
| transform: style.transform, | ||
| opacity: style.progress, | ||
| style: staticStyle, | ||
| children: jsx(animated.text, { | ||
| textAnchor: "middle", | ||
| dominantBaseline: "central", | ||
| style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, { | ||
| fill: style.textColor | ||
| }), | ||
| children: label | ||
| }) | ||
| }); | ||
| }; | ||
| var ArcLabelsLayer = function ArcLabelsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| transitionMode = _ref.transitionMode, | ||
| labelAccessor = _ref.label, | ||
| radiusOffset = _ref.radiusOffset, | ||
| skipAngle = _ref.skipAngle, | ||
| textColor = _ref.textColor, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcLabel : _ref$component; | ||
| var getLabel = usePropertyAccessor(labelAccessor); | ||
| var theme = useTheme(); | ||
| var getTextColor = useInheritedColor(textColor, theme); | ||
| var filteredData = useMemo(function () { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }); | ||
| }, [data, skipAngle]); | ||
| var _useArcCentersTransit = useArcCentersTransition(filteredData, radiusOffset, transitionMode), | ||
| transition = _useArcCentersTransit.transition, | ||
| interpolate = _useArcCentersTransit.interpolate; | ||
| var Label = component; | ||
| return jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return createElement(Label, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| label: getLabel(datum), | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| transform: interpolate(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius), | ||
| textColor: getTextColor(datum) | ||
| }) | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| var drawCanvasArcLabels = function drawCanvasArcLabels(ctx, labels, theme) { | ||
| ctx.textAlign = 'center'; | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily); | ||
| labels.forEach(function (label) { | ||
| ctx.fillStyle = label.textColor; | ||
| ctx.fillText("".concat(label.label), label.x, label.y); | ||
| }); | ||
| }; | ||
| var useArcLabels = function useArcLabels(_ref) { | ||
| var data = _ref.data, | ||
| offset = _ref.offset, | ||
| skipAngle = _ref.skipAngle, | ||
| label = _ref.label, | ||
| textColor = _ref.textColor; | ||
| var getLabel = usePropertyAccessor(label); | ||
| var theme = useTheme(); | ||
| var getTextColor = useInheritedColor(textColor, theme); | ||
| var computeExtraProps = useCallback(function (datum) { | ||
| return { | ||
| label: getLabel(datum), | ||
| textColor: getTextColor(datum) | ||
| }; | ||
| }, [getLabel, getTextColor]); | ||
| return useArcCenters({ | ||
| data: data, | ||
| offset: offset, | ||
| skipAngle: skipAngle, | ||
| computeExtraProps: computeExtraProps | ||
| }); | ||
| }; | ||
| var computeArcLinkTextAnchor = function computeArcLinkTextAnchor(arc) { | ||
| var centerAngle = getNormalizedAngle(arc.startAngle + (arc.endAngle - arc.startAngle) / 2 - Math.PI / 2); | ||
| if (centerAngle < Math.PI / 2 || centerAngle > Math.PI * 1.5) { | ||
| return 'start'; | ||
| } | ||
| return 'end'; | ||
| }; | ||
| var computeArcLink = function computeArcLink(arc, offset, diagonalLength, straightLength) { | ||
| var centerAngle = getNormalizedAngle(arc.startAngle + (arc.endAngle - arc.startAngle) / 2 - Math.PI / 2); | ||
| var point0 = positionFromAngle(centerAngle, arc.outerRadius + offset); | ||
| var point1 = positionFromAngle(centerAngle, arc.outerRadius + offset + diagonalLength); | ||
| var side; | ||
| var point2; | ||
| if (centerAngle < Math.PI / 2 || centerAngle > Math.PI * 1.5) { | ||
| side = 'after'; | ||
| point2 = { | ||
| x: point1.x + straightLength, | ||
| y: point1.y | ||
| }; | ||
| } else { | ||
| side = 'before'; | ||
| point2 = { | ||
| x: point1.x - straightLength, | ||
| y: point1.y | ||
| }; | ||
| } | ||
| return { | ||
| side: side, | ||
| points: [point0, point1, point2] | ||
| }; | ||
| }; | ||
| var lineGenerator = line().x(function (d) { | ||
| return d.x; | ||
| }).y(function (d) { | ||
| return d.y; | ||
| }); | ||
| var useTransitionPhases = function useTransitionPhases(_ref) { | ||
| var offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| textOffset = _ref.textOffset, | ||
| getLinkColor = _ref.getLinkColor, | ||
| getTextColor = _ref.getTextColor; | ||
| return useMemo(function () { | ||
| return { | ||
| enter: function enter(datum) { | ||
| return { | ||
| startAngle: datum.arc.startAngle, | ||
| endAngle: datum.arc.endAngle, | ||
| innerRadius: datum.arc.innerRadius, | ||
| outerRadius: datum.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: 0, | ||
| straightLength: 0, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(datum), | ||
| textColor: getTextColor(datum), | ||
| opacity: 0 | ||
| }; | ||
| }, | ||
| update: function update(d) { | ||
| return { | ||
| startAngle: d.arc.startAngle, | ||
| endAngle: d.arc.endAngle, | ||
| innerRadius: d.arc.innerRadius, | ||
| outerRadius: d.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(d), | ||
| textColor: getTextColor(d), | ||
| opacity: 1 | ||
| }; | ||
| }, | ||
| leave: function leave(d) { | ||
| return { | ||
| startAngle: d.arc.startAngle, | ||
| endAngle: d.arc.endAngle, | ||
| innerRadius: d.arc.innerRadius, | ||
| outerRadius: d.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: 0, | ||
| straightLength: 0, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(d), | ||
| textColor: getTextColor(d), | ||
| opacity: 0 | ||
| }; | ||
| } | ||
| }; | ||
| }, [diagonalLength, straightLength, textOffset, getLinkColor, getTextColor]); | ||
| }; | ||
| var interpolateLink = function interpolateLink(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue) { | ||
| return to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue], function (startAngle, endAngle, innerRadius, outerRadius, offset, diagonalLengthAnimated, straightLengthAnimated) { | ||
| var _computeArcLink = computeArcLink({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset, diagonalLengthAnimated, straightLengthAnimated), | ||
| points = _computeArcLink.points; | ||
| return lineGenerator(points); | ||
| }); | ||
| }; | ||
| var interpolateTextAnchor = function interpolateTextAnchor(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue) { | ||
| return to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| return computeArcLinkTextAnchor({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }); | ||
| }); | ||
| }; | ||
| var interpolateTextPosition = function interpolateTextPosition(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue, textOffsetValue) { | ||
| return to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue, textOffsetValue], function (startAngle, endAngle, innerRadius, outerRadius, offset, diagonalLengthAnimated, straightLengthAnimated, textOffset) { | ||
| var _computeArcLink2 = computeArcLink({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset, diagonalLengthAnimated, straightLengthAnimated), | ||
| points = _computeArcLink2.points, | ||
| side = _computeArcLink2.side; | ||
| var position = points[2]; | ||
| if (side === 'before') { | ||
| position.x -= textOffset; | ||
| } else { | ||
| position.x += textOffset; | ||
| } | ||
| return "translate(".concat(position.x, ",").concat(position.y, ")"); | ||
| }); | ||
| }; | ||
| var useArcLinkLabelsTransition = function useArcLinkLabelsTransition(_ref2) { | ||
| var data = _ref2.data, | ||
| _ref2$offset = _ref2.offset, | ||
| offset = _ref2$offset === void 0 ? 0 : _ref2$offset, | ||
| diagonalLength = _ref2.diagonalLength, | ||
| straightLength = _ref2.straightLength, | ||
| _ref2$skipAngle = _ref2.skipAngle, | ||
| skipAngle = _ref2$skipAngle === void 0 ? 0 : _ref2$skipAngle, | ||
| textOffset = _ref2.textOffset, | ||
| linkColor = _ref2.linkColor, | ||
| textColor = _ref2.textColor; | ||
| var _useMotionConfig = useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var theme = useTheme(); | ||
| var getLinkColor = useInheritedColor(linkColor, theme); | ||
| var getTextColor = useInheritedColor(textColor, theme); | ||
| var filteredData = useFilteredDataBySkipAngle(data, skipAngle); | ||
| var transitionPhases = useTransitionPhases({ | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| getLinkColor: getLinkColor, | ||
| getTextColor: getTextColor | ||
| }); | ||
| var transition = useTransition(filteredData, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: transitionPhases.update, | ||
| from: transitionPhases.enter, | ||
| enter: transitionPhases.update, | ||
| update: transitionPhases.update, | ||
| leave: transitionPhases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolateLink: interpolateLink, | ||
| interpolateTextAnchor: interpolateTextAnchor, | ||
| interpolateTextPosition: interpolateTextPosition | ||
| }; | ||
| }; | ||
| var ArcLinkLabel = function ArcLinkLabel(_ref) { | ||
| var label = _ref.label, | ||
| style = _ref.style; | ||
| var theme = useTheme(); | ||
| return jsxs(animated.g, { | ||
| opacity: style.opacity, | ||
| children: [jsx(animated.path, { | ||
| fill: "none", | ||
| stroke: style.linkColor, | ||
| strokeWidth: style.thickness, | ||
| d: style.path | ||
| }), jsx(animated.text, { | ||
| transform: style.textPosition, | ||
| textAnchor: style.textAnchor, | ||
| dominantBaseline: "central", | ||
| style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, { | ||
| fill: style.textColor | ||
| }), | ||
| children: label | ||
| })] | ||
| }); | ||
| }; | ||
| var ArcLinkLabelsLayer = function ArcLinkLabelsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| labelAccessor = _ref.label, | ||
| skipAngle = _ref.skipAngle, | ||
| offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| strokeWidth = _ref.strokeWidth, | ||
| textOffset = _ref.textOffset, | ||
| textColor = _ref.textColor, | ||
| linkColor = _ref.linkColor, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcLinkLabel : _ref$component; | ||
| var getLabel = usePropertyAccessor(labelAccessor); | ||
| var _useArcLinkLabelsTran = useArcLinkLabelsTransition({ | ||
| data: data, | ||
| skipAngle: skipAngle, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| linkColor: linkColor, | ||
| textColor: textColor | ||
| }), | ||
| transition = _useArcLinkLabelsTran.transition, | ||
| interpolateLink = _useArcLinkLabelsTran.interpolateLink, | ||
| interpolateTextAnchor = _useArcLinkLabelsTran.interpolateTextAnchor, | ||
| interpolateTextPosition = _useArcLinkLabelsTran.interpolateTextPosition; | ||
| var Label = component; | ||
| return jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return createElement(Label, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| label: getLabel(datum), | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| thickness: strokeWidth, | ||
| path: interpolateLink(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, transitionProps.offset, transitionProps.diagonalLength, transitionProps.straightLength), | ||
| textAnchor: interpolateTextAnchor(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius), | ||
| textPosition: interpolateTextPosition(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, transitionProps.offset, transitionProps.diagonalLength, transitionProps.straightLength, transitionProps.textOffset) | ||
| }) | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| var drawCanvasArcLinkLabels = function drawCanvasArcLinkLabels(ctx, labels, theme, strokeWidth) { | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily); | ||
| labels.forEach(function (label) { | ||
| ctx.fillStyle = label.textColor; | ||
| ctx.textAlign = textPropsByEngine.canvas.align[label.textAnchor]; | ||
| ctx.fillText("".concat(label.label), label.x, label.y); | ||
| ctx.beginPath(); | ||
| ctx.strokeStyle = label.linkColor; | ||
| ctx.lineWidth = strokeWidth; | ||
| label.points.forEach(function (point, index) { | ||
| if (index === 0) ctx.moveTo(point.x, point.y);else ctx.lineTo(point.x, point.y); | ||
| }); | ||
| ctx.stroke(); | ||
| }); | ||
| }; | ||
| var useArcLinks = function useArcLinks(_ref) { | ||
| var data = _ref.data, | ||
| _ref$skipAngle = _ref.skipAngle, | ||
| skipAngle = _ref$skipAngle === void 0 ? 0 : _ref$skipAngle, | ||
| _ref$offset = _ref.offset, | ||
| offset = _ref$offset === void 0 ? 0.5 : _ref$offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| _ref$computeExtraProp = _ref.computeExtraProps, | ||
| computeExtraProps = _ref$computeExtraProp === void 0 ? function () { | ||
| return {}; | ||
| } : _ref$computeExtraProp; | ||
| var links = useMemo(function () { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }).map(function (datum) { | ||
| return _objectSpread2(_objectSpread2({}, computeArcLink(datum.arc, offset, diagonalLength, straightLength)), {}, { | ||
| data: datum | ||
| }); | ||
| }); | ||
| }, [data, skipAngle, offset, diagonalLength, straightLength]); | ||
| return useMemo(function () { | ||
| return links.map(function (link) { | ||
| return _objectSpread2(_objectSpread2({}, computeExtraProps(link)), link); | ||
| }); | ||
| }, [links, computeExtraProps]); | ||
| }; | ||
| var useArcLinkLabels = function useArcLinkLabels(_ref) { | ||
| var data = _ref.data, | ||
| skipAngle = _ref.skipAngle, | ||
| offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| _ref$textOffset = _ref.textOffset, | ||
| textOffset = _ref$textOffset === void 0 ? 0 : _ref$textOffset, | ||
| label = _ref.label, | ||
| linkColor = _ref.linkColor, | ||
| textColor = _ref.textColor; | ||
| var getLabel = usePropertyAccessor(label); | ||
| var theme = useTheme(); | ||
| var getLinkColor = useInheritedColor(linkColor, theme); | ||
| var getTextColor = useInheritedColor(textColor, theme); | ||
| var computeExtraProps = useCallback(function (link) { | ||
| var position = { | ||
| x: link.points[2].x, | ||
| y: link.points[2].y | ||
| }; | ||
| var textAnchor; | ||
| if (link.side === 'before') { | ||
| position.x -= textOffset; | ||
| textAnchor = 'end'; | ||
| } else { | ||
| position.x += textOffset; | ||
| textAnchor = 'start'; | ||
| } | ||
| return _objectSpread2(_objectSpread2({}, position), {}, { | ||
| label: getLabel(link.data), | ||
| linkColor: getLinkColor(link.data), | ||
| textAnchor: textAnchor, | ||
| textColor: getTextColor(link.data) | ||
| }); | ||
| }, [getLabel, getLinkColor, getTextColor, textOffset]); | ||
| return useArcLinks({ | ||
| data: data, | ||
| skipAngle: skipAngle, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| computeExtraProps: computeExtraProps | ||
| }); | ||
| }; | ||
| 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 ArcLine = function ArcLine(_ref) { | ||
| var animatedProps = _ref.animated, | ||
| rest = _objectWithoutProperties(_ref, ["animated"]); | ||
| return jsx(animated.path, _objectSpread2({ | ||
| d: to([animatedProps.radius, animatedProps.startAngle, animatedProps.endAngle], function (radius, start, end) { | ||
| return generateSvgArc(radius, start, end); | ||
| }) | ||
| }, rest)); | ||
| }; | ||
| var ArcShape = function ArcShape(_ref) { | ||
| var datum = _ref.datum, | ||
| style = _ref.style, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave; | ||
| var handleClick = useCallback(function (event) { | ||
| return onClick === null || onClick === void 0 ? void 0 : onClick(datum, event); | ||
| }, [onClick, datum]); | ||
| var handleMouseEnter = useCallback(function (event) { | ||
| return onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(datum, event); | ||
| }, [onMouseEnter, datum]); | ||
| var handleMouseMove = useCallback(function (event) { | ||
| return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| }, [onMouseMove, datum]); | ||
| var handleMouseLeave = useCallback(function (event) { | ||
| return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(datum, event); | ||
| }, [onMouseLeave, datum]); | ||
| return jsx(animated.path, { | ||
| d: style.path, | ||
| opacity: style.opacity, | ||
| fill: datum.fill || style.color, | ||
| stroke: style.borderColor, | ||
| strokeWidth: style.borderWidth, | ||
| onClick: onClick ? handleClick : undefined, | ||
| onMouseEnter: onMouseEnter ? handleMouseEnter : undefined, | ||
| onMouseMove: onMouseMove ? handleMouseMove : undefined, | ||
| onMouseLeave: onMouseLeave ? handleMouseLeave : undefined | ||
| }); | ||
| }; | ||
| var interpolateArc = function interpolateArc(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, arcGenerator) { | ||
| return to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| return arcGenerator({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: Math.max(0, innerRadius), | ||
| outerRadius: Math.max(0, outerRadius) | ||
| }); | ||
| }); | ||
| }; | ||
| var useArcsTransition = function useArcsTransition(data) { | ||
| var mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'innerRadius'; | ||
| var extra = arguments.length > 2 ? arguments[2] : undefined; | ||
| var _useMotionConfig = useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var phases = useArcTransitionMode(mode, extra); | ||
| var transition = useTransition(data, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: phases.update, | ||
| from: phases.enter, | ||
| enter: phases.update, | ||
| update: phases.update, | ||
| leave: phases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolate: interpolateArc | ||
| }; | ||
| }; | ||
| var ArcsLayer = function ArcsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| arcGenerator = _ref.arcGenerator, | ||
| borderWidth = _ref.borderWidth, | ||
| borderColor = _ref.borderColor, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| transitionMode = _ref.transitionMode, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcShape : _ref$component; | ||
| var theme = useTheme(); | ||
| var getBorderColor = useInheritedColor(borderColor, theme); | ||
| var _useArcsTransition = useArcsTransition(data, transitionMode, { | ||
| enter: function enter(datum) { | ||
| return { | ||
| opacity: 0, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| }, | ||
| update: function update(datum) { | ||
| return { | ||
| opacity: 1, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| }, | ||
| leave: function leave(datum) { | ||
| return { | ||
| opacity: 0, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| } | ||
| }), | ||
| transition = _useArcsTransition.transition, | ||
| interpolate = _useArcsTransition.interpolate; | ||
| var Arc = component; | ||
| return jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return createElement(Arc, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| borderWidth: borderWidth, | ||
| path: interpolate(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, arcGenerator) | ||
| }), | ||
| onClick: onClick, | ||
| onMouseEnter: onMouseEnter, | ||
| onMouseMove: onMouseMove, | ||
| onMouseLeave: onMouseLeave | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| 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 computeArcBoundingBox = function computeArcBoundingBox(centerX, centerY, radius, startAngle, endAngle) { | ||
| var includeCenter = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; | ||
| var points = []; | ||
| var p0 = positionFromAngle(degreesToRadians(startAngle), radius); | ||
| points.push([p0.x, p0.y]); | ||
| var p1 = positionFromAngle(degreesToRadians(endAngle), radius); | ||
| points.push([p1.x, p1.y]); | ||
| for (var angle = Math.round(Math.min(startAngle, endAngle)); angle <= Math.round(Math.max(startAngle, endAngle)); angle++) { | ||
| if (angle % 90 === 0) { | ||
| var p = positionFromAngle(degreesToRadians(angle), radius); | ||
| points.push([p.x, p.y]); | ||
| } | ||
| } | ||
| points = points.map(function (_ref) { | ||
| var _ref2 = _slicedToArray(_ref, 2), | ||
| x = _ref2[0], | ||
| y = _ref2[1]; | ||
| return [centerX + x, centerY + y]; | ||
| }); | ||
| if (includeCenter) { | ||
| points.push([centerX, centerY]); | ||
| } | ||
| var xs = points.map(function (_ref3) { | ||
| var _ref4 = _slicedToArray(_ref3, 1), | ||
| x = _ref4[0]; | ||
| return x; | ||
| }); | ||
| var ys = points.map(function (_ref5) { | ||
| var _ref6 = _slicedToArray(_ref5, 2), | ||
| y = _ref6[1]; | ||
| return y; | ||
| }); | ||
| var x0 = Math.min.apply(Math, _toConsumableArray(xs)); | ||
| var x1 = Math.max.apply(Math, _toConsumableArray(xs)); | ||
| var y0 = Math.min.apply(Math, _toConsumableArray(ys)); | ||
| var y1 = Math.max.apply(Math, _toConsumableArray(ys)); | ||
| return { | ||
| points: points, | ||
| x: x0, | ||
| y: y0, | ||
| width: x1 - x0, | ||
| height: y1 - y0 | ||
| }; | ||
| }; | ||
| var isCursorInRing = function isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY) { | ||
| var distance = getDistance(cursorX, cursorY, centerX, centerY); | ||
| return distance < radius && distance > innerRadius; | ||
| }; | ||
| var findArcUnderCursor = function findArcUnderCursor(centerX, centerY, radius, innerRadius, arcs, cursorX, cursorY) { | ||
| if (!isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY)) { | ||
| return undefined; | ||
| } | ||
| var cursorAngle = getAngle(cursorX, cursorY, centerX, centerY); | ||
| return arcs.find(function (_ref) { | ||
| var startAngle = _ref.startAngle, | ||
| endAngle = _ref.endAngle; | ||
| return cursorAngle >= startAngle && cursorAngle < endAngle; | ||
| }); | ||
| }; | ||
| var useAnimatedArc = function useAnimatedArc(datumWithArc, arcGenerator) { | ||
| var _useMotionConfig = useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var animatedValues = useSpring({ | ||
| startAngle: datumWithArc.arc.startAngle, | ||
| endAngle: datumWithArc.arc.endAngle, | ||
| innerRadius: datumWithArc.arc.innerRadius, | ||
| outerRadius: datumWithArc.arc.outerRadius, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return _objectSpread2(_objectSpread2({}, animatedValues), {}, { | ||
| path: interpolateArc(animatedValues.startAngle, animatedValues.endAngle, animatedValues.innerRadius, animatedValues.outerRadius, arcGenerator) | ||
| }); | ||
| }; | ||
| var useArcGenerator = function useArcGenerator() { | ||
| var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? 0 : _ref$cornerRadius, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? 0 : _ref$padAngle; | ||
| return useMemo(function () { | ||
| return arc().innerRadius(function (arc) { | ||
| return arc.innerRadius; | ||
| }).outerRadius(function (arc) { | ||
| return arc.outerRadius; | ||
| }).cornerRadius(cornerRadius).padAngle(padAngle); | ||
| }, [cornerRadius, padAngle]); | ||
| }; | ||
| export { ArcLabelsLayer, ArcLine, ArcLinkLabelsLayer, ArcShape, ArcsLayer, arcTransitionModeById, arcTransitionModes, computeArcBoundingBox, computeArcCenter, computeArcLink, computeArcLinkTextAnchor, drawCanvasArcLabels, drawCanvasArcLinkLabels, findArcUnderCursor, interpolateArc, interpolateArcCenter, isCursorInRing, useAnimatedArc, useArcCenters, useArcCentersTransition, useArcGenerator, useArcLabels, useArcLinkLabels, useArcLinkLabelsTransition, useArcLinks, useArcTransitionMode, useArcsTransition }; | ||
| import{animated as t,to as n,useTransition as e,useSpring as r}from"@react-spring/web";import{useTheme as i,radiansToDegrees as a,positionFromAngle as o,degreesToRadians as u,midAngle as l,useMotionConfig as s,usePropertyAccessor as d,textPropsByEngine as f,getDistance as c,getAngle as g}from"@nivo/core";import{jsx as p,jsxs as h}from"react/jsx-runtime";import{useMemo as v,createElement as A,useCallback as x}from"react";import{useInheritedColor as R}from"@nivo/colors";import{line as m,arc as y}from"d3-shape";function M(){return M=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},M.apply(this,arguments)}var k={pointerEvents:"none"},C=function(n){var e=n.label,r=n.style,a=i();return p(t.g,{transform:r.transform,opacity:r.progress,style:k,children:p(t.text,{textAnchor:"middle",dominantBaseline:"central",style:M({},a.labels.text,{fill:r.textColor}),children:e})})},b=function(t){var n=t%(2*Math.PI);return n<0&&(n+=2*Math.PI),n},L=function(t,n){return t.filter((function(t){return Math.abs(a(t.arc.endAngle-t.arc.startAngle))>=n}))},P=function(t,n,e,r,i){return["A",t,t,0,n,e,r,i].join(" ")},O=["startAngle","middleAngle","endAngle","innerRadius","centerRadius","outerRadius","pushIn","pushOut"],E={startAngle:{enter:function(t){return M({},t,{endAngle:t.startAngle})},update:function(t){return t},leave:function(t){return M({},t,{startAngle:t.endAngle})}},middleAngle:{enter:function(t){var n=t.startAngle+(t.endAngle-t.startAngle)/2;return M({},t,{startAngle:n,endAngle:n})},update:function(t){return t},leave:function(t){var n=t.startAngle+(t.endAngle-t.startAngle)/2;return M({},t,{startAngle:n,endAngle:n})}},endAngle:{enter:function(t){return M({},t,{startAngle:t.endAngle})},update:function(t){return t},leave:function(t){return M({},t,{endAngle:t.startAngle})}},innerRadius:{enter:function(t){return M({},t,{outerRadius:t.innerRadius})},update:function(t){return t},leave:function(t){return M({},t,{innerRadius:t.outerRadius})}},centerRadius:{enter:function(t){var n=t.innerRadius+(t.outerRadius-t.innerRadius)/2;return M({},t,{innerRadius:n,outerRadius:n})},update:function(t){return t},leave:function(t){var n=t.innerRadius+(t.outerRadius-t.innerRadius)/2;return M({},t,{innerRadius:n,outerRadius:n})}},outerRadius:{enter:function(t){return M({},t,{innerRadius:t.outerRadius})},update:function(t){return t},leave:function(t){return M({},t,{outerRadius:t.innerRadius})}},pushIn:{enter:function(t){return M({},t,{innerRadius:t.innerRadius-t.outerRadius+t.innerRadius,outerRadius:t.innerRadius})},update:function(t){return t},leave:function(t){return M({},t,{innerRadius:t.outerRadius,outerRadius:t.outerRadius+t.outerRadius-t.innerRadius})}},pushOut:{enter:function(t){return M({},t,{innerRadius:t.outerRadius,outerRadius:t.outerRadius+t.outerRadius-t.innerRadius})},update:function(t){return t},leave:function(t){return M({},t,{innerRadius:t.innerRadius-t.outerRadius+t.innerRadius,outerRadius:t.innerRadius})}}},I=function(t,n){return v((function(){var e=E[t];return{enter:function(t){return M({progress:0},e.enter(t.arc),n?n.enter(t):{})},update:function(t){return M({progress:1},e.update(t.arc),n?n.update(t):{})},leave:function(t){return M({progress:0},e.leave(t.arc),n?n.leave(t):{})}}}),[t,n])},T=function(t,n){var e=l(t)-Math.PI/2,r=t.innerRadius+(t.outerRadius-t.innerRadius)*n;return o(e,r)},j=function(t){return function(e,r,i,a){return n([e,r,i,a],(function(n,e,r,i){var a=T({startAngle:n,endAngle:e,innerRadius:r,outerRadius:i},t);return"translate("+a.x+","+a.y+")"}))}},W=function(t,n,r,i){void 0===n&&(n=.5),void 0===r&&(r="innerRadius");var a=s(),o=a.animate,u=a.config,l=I(r,i);return{transition:e(t,{keys:function(t){return t.id},initial:l.update,from:l.enter,enter:l.update,update:l.update,leave:l.leave,config:u,immediate:!o}),interpolate:j(n)}},S=function(t){var n=t.data,e=t.offset,r=void 0===e?.5:e,i=t.skipAngle,a=void 0===i?0:i,o=t.computeExtraProps,u=void 0===o?function(){return{}}:o;return v((function(){return L(n,a).map((function(t){var n=T(t.arc,r);return M({},u(t),{x:n.x,y:n.y,data:t})}))}),[n,r,a,u])},B=function(t){var n=t.center,e=t.data,r=t.transitionMode,o=t.label,u=t.radiusOffset,l=t.skipAngle,s=t.textColor,f=t.component,c=void 0===f?C:f,g=d(o),h=i(),x=R(s,h),m=v((function(){return e.filter((function(t){return Math.abs(a(t.arc.endAngle-t.arc.startAngle))>=l}))}),[e,l]),y=W(m,u,r),k=y.transition,b=y.interpolate,L=c;return p("g",{transform:"translate("+n[0]+","+n[1]+")",children:k((function(t,n){return A(L,{key:n.id,datum:n,label:g(n),style:M({},t,{transform:b(t.startAngle,t.endAngle,t.innerRadius,t.outerRadius),textColor:x(n)})})}))})},w=function(t,n,e){t.textAlign="center",t.textBaseline="middle",t.font=e.labels.text.fontSize+"px "+e.labels.text.fontFamily,n.forEach((function(n){t.fillStyle=n.textColor,t.fillText(""+n.label,n.x,n.y)}))},z=function(t){var n=t.data,e=t.offset,r=t.skipAngle,a=t.label,o=t.textColor,u=d(a),l=i(),s=R(o,l),f=x((function(t){return{label:u(t),textColor:s(t)}}),[u,s]);return S({data:n,offset:e,skipAngle:r,computeExtraProps:f})},F=C,G=function(n){var e=n.label,r=n.style,a=i();return h(t.g,{opacity:r.opacity,children:[p(t.path,{fill:"none",stroke:r.linkColor,strokeWidth:r.thickness,d:r.path}),p(t.text,{transform:r.textPosition,textAnchor:r.textAnchor,dominantBaseline:"central",style:M({},a.labels.text,{fill:r.textColor}),children:e})]})},q=function(t){var n=b(t.startAngle+(t.endAngle-t.startAngle)/2-Math.PI/2);return n<Math.PI/2||n>1.5*Math.PI?"start":"end"},D=function(t,n,e,r){var i,a,u=b(t.startAngle+(t.endAngle-t.startAngle)/2-Math.PI/2),l=o(u,t.outerRadius+n),s=o(u,t.outerRadius+n+e);return u<Math.PI/2||u>1.5*Math.PI?(i="after",a={x:s.x+r,y:s.y}):(i="before",a={x:s.x-r,y:s.y}),{side:i,points:[l,s,a]}},H=m().x((function(t){return t.x})).y((function(t){return t.y})),J=function(t,e,r,i,a,o,u){return n([t,e,r,i,a,o,u],(function(t,n,e,r,i,a,o){var u=D({startAngle:t,endAngle:n,innerRadius:e,outerRadius:r},i,a,o).points;return H(u)}))},K=function(t,e,r,i){return n([t,e,r,i],(function(t,n,e,r){return q({startAngle:t,endAngle:n,innerRadius:e,outerRadius:r})}))},N=function(t,e,r,i,a,o,u,l){return n([t,e,r,i,a,o,u,l],(function(t,n,e,r,i,a,o,u){var l=D({startAngle:t,endAngle:n,innerRadius:e,outerRadius:r},i,a,o),s=l.points,d=l.side,f=s[2];return"before"===d?f.x-=u:f.x+=u,"translate("+f.x+","+f.y+")"}))},Q=function(t){var n=t.data,r=t.offset,a=void 0===r?0:r,o=t.diagonalLength,u=t.straightLength,l=t.skipAngle,d=void 0===l?0:l,f=t.textOffset,c=t.linkColor,g=t.textColor,p=s(),h=p.animate,A=p.config,x=i(),m=R(c,x),y=R(g,x),M=function(t,n){return v((function(){return L(t,n)}),[t,n])}(n,d),k=function(t){var n=t.offset,e=t.diagonalLength,r=t.straightLength,i=t.textOffset,a=t.getLinkColor,o=t.getTextColor;return v((function(){return{enter:function(t){return{startAngle:t.arc.startAngle,endAngle:t.arc.endAngle,innerRadius:t.arc.innerRadius,outerRadius:t.arc.outerRadius,offset:n,diagonalLength:0,straightLength:0,textOffset:i,linkColor:a(t),textColor:o(t),opacity:0}},update:function(t){return{startAngle:t.arc.startAngle,endAngle:t.arc.endAngle,innerRadius:t.arc.innerRadius,outerRadius:t.arc.outerRadius,offset:n,diagonalLength:e,straightLength:r,textOffset:i,linkColor:a(t),textColor:o(t),opacity:1}},leave:function(t){return{startAngle:t.arc.startAngle,endAngle:t.arc.endAngle,innerRadius:t.arc.innerRadius,outerRadius:t.arc.outerRadius,offset:n,diagonalLength:0,straightLength:0,textOffset:i,linkColor:a(t),textColor:o(t),opacity:0}}}}),[e,r,i,a,o])}({offset:a,diagonalLength:o,straightLength:u,textOffset:f,getLinkColor:m,getTextColor:y});return{transition:e(M,{keys:function(t){return t.id},initial:k.update,from:k.enter,enter:k.update,update:k.update,leave:k.leave,config:A,immediate:!h}),interpolateLink:J,interpolateTextAnchor:K,interpolateTextPosition:N}},U=function(t){var n=t.center,e=t.data,r=t.label,i=t.skipAngle,a=t.offset,o=t.diagonalLength,u=t.straightLength,l=t.strokeWidth,s=t.textOffset,f=t.textColor,c=t.linkColor,g=t.component,h=void 0===g?G:g,v=d(r),x=Q({data:e,skipAngle:i,offset:a,diagonalLength:o,straightLength:u,textOffset:s,linkColor:c,textColor:f}),R=x.transition,m=x.interpolateLink,y=x.interpolateTextAnchor,k=x.interpolateTextPosition,C=h;return p("g",{transform:"translate("+n[0]+","+n[1]+")",children:R((function(t,n){return A(C,{key:n.id,datum:n,label:v(n),style:M({},t,{thickness:l,path:m(t.startAngle,t.endAngle,t.innerRadius,t.outerRadius,t.offset,t.diagonalLength,t.straightLength),textAnchor:y(t.startAngle,t.endAngle,t.innerRadius,t.outerRadius),textPosition:k(t.startAngle,t.endAngle,t.innerRadius,t.outerRadius,t.offset,t.diagonalLength,t.straightLength,t.textOffset)})})}))})},V=function(t,n,e,r){t.textBaseline="middle",t.font=e.labels.text.fontSize+"px "+e.labels.text.fontFamily,n.forEach((function(n){t.fillStyle=n.textColor,t.textAlign=f.canvas.align[n.textAnchor],t.fillText(""+n.label,n.x,n.y),t.beginPath(),t.strokeStyle=n.linkColor,t.lineWidth=r,n.points.forEach((function(n,e){0===e?t.moveTo(n.x,n.y):t.lineTo(n.x,n.y)})),t.stroke()}))},X=function(t){var n=t.data,e=t.skipAngle,r=void 0===e?0:e,i=t.offset,o=void 0===i?.5:i,u=t.diagonalLength,l=t.straightLength,s=t.computeExtraProps,d=void 0===s?function(){return{}}:s,f=v((function(){return n.filter((function(t){return Math.abs(a(t.arc.endAngle-t.arc.startAngle))>=r})).map((function(t){return M({},D(t.arc,o,u,l),{data:t})}))}),[n,r,o,u,l]);return v((function(){return f.map((function(t){return M({},d(t),t)}))}),[f,d])},Y=function(t){var n=t.data,e=t.skipAngle,r=t.offset,a=t.diagonalLength,o=t.straightLength,u=t.textOffset,l=void 0===u?0:u,s=t.label,f=t.linkColor,c=t.textColor,g=d(s),p=i(),h=R(f,p),v=R(c,p),A=x((function(t){var n,e={x:t.points[2].x,y:t.points[2].y};return"before"===t.side?(e.x-=l,n="end"):(e.x+=l,n="start"),M({},e,{label:g(t.data),linkColor:h(t.data),textAnchor:n,textColor:v(t.data)})}),[g,h,v,l]);return X({data:n,skipAngle:e,offset:r,diagonalLength:a,straightLength:o,computeExtraProps:A})},Z=G,$=["animated"],_=function(e){var r=e.animated,i=function(t,n){if(null==t)return{};var e,r,i={},a=Object.keys(t);for(r=0;r<a.length;r++)e=a[r],n.indexOf(e)>=0||(i[e]=t[e]);return i}(e,$);return p(t.path,M({d:n([r.radius,r.startAngle,r.endAngle],(function(t,n,e){return function(t,n,e){var r=Math.min(n,e),i=Math.max(n,e),a=o(u(i),t),l=o(u(r),t);if(i-r>=360){var s=o(u(r+180),t);return["M "+a.x+" "+a.y,P(t,1,1,s.x,s.y),"M "+a.x+" "+a.y,P(t,1,0,s.x,s.y)].join(" ")}var d=i-r<=180?0:1;return["M "+a.x+" "+a.y,P(t,d,0,l.x,l.y)].join(" ")}(t,n,e)}))},i))},tt=function(n){var e=n.datum,r=n.style,i=n.onClick,a=n.onMouseEnter,o=n.onMouseMove,u=n.onMouseLeave,l=x((function(t){return null==i?void 0:i(e,t)}),[i,e]),s=x((function(t){return null==a?void 0:a(e,t)}),[a,e]),d=x((function(t){return null==o?void 0:o(e,t)}),[o,e]),f=x((function(t){return null==u?void 0:u(e,t)}),[u,e]);return p(t.path,{d:r.path,opacity:r.opacity,fill:e.fill||r.color,stroke:r.borderColor,strokeWidth:r.borderWidth,onClick:i?l:void 0,onMouseEnter:a?s:void 0,onMouseMove:o?d:void 0,onMouseLeave:u?f:void 0})},nt=function(t,e,r,i,a){return n([t,e,r,i],(function(t,n,e,r){return a({startAngle:t,endAngle:n,innerRadius:Math.max(0,e),outerRadius:Math.max(0,r)})}))},et=function(t,n,r){void 0===n&&(n="innerRadius");var i=s(),a=i.animate,o=i.config,u=I(n,r);return{transition:e(t,{keys:function(t){return t.id},initial:u.update,from:u.enter,enter:u.update,update:u.update,leave:u.leave,config:o,immediate:!a}),interpolate:nt}},rt=function(t){var n=t.center,e=t.data,r=t.arcGenerator,a=t.borderWidth,o=t.borderColor,u=t.onClick,l=t.onMouseEnter,s=t.onMouseMove,d=t.onMouseLeave,f=t.transitionMode,c=t.component,g=void 0===c?tt:c,h=i(),v=R(o,h),x=et(e,f,{enter:function(t){return{opacity:0,color:t.color,borderColor:v(t)}},update:function(t){return{opacity:1,color:t.color,borderColor:v(t)}},leave:function(t){return{opacity:0,color:t.color,borderColor:v(t)}}}),m=x.transition,y=x.interpolate,k=g;return p("g",{transform:"translate("+n[0]+","+n[1]+")",children:m((function(t,n){return A(k,{key:n.id,datum:n,style:M({},t,{borderWidth:a,path:y(t.startAngle,t.endAngle,t.innerRadius,t.outerRadius,r)}),onClick:u,onMouseEnter:l,onMouseMove:s,onMouseLeave:d})}))})},it=function(t,n,e,r,i,a){void 0===a&&(a=!0);var l=[],s=o(u(r),e);l.push([s.x,s.y]);var d=o(u(i),e);l.push([d.x,d.y]);for(var f=Math.round(Math.min(r,i));f<=Math.round(Math.max(r,i));f++)if(f%90==0){var c=o(u(f),e);l.push([c.x,c.y])}l=l.map((function(e){var r=e[0],i=e[1];return[t+r,n+i]})),a&&l.push([t,n]);var g=l.map((function(t){return t[0]})),p=l.map((function(t){return t[1]})),h=Math.min.apply(Math,g),v=Math.max.apply(Math,g),A=Math.min.apply(Math,p);return{points:l,x:h,y:A,width:v-h,height:Math.max.apply(Math,p)-A}},at=function(t,n,e,r,i,a){var o=c(i,a,t,n);return o<e&&o>r},ot=function(t,n,e,r,i,a,o){if(at(t,n,e,r,a,o)){var u=g(a,o,t,n);return i.find((function(t){var n=t.startAngle,e=t.endAngle;return u>=n&&u<e}))}},ut=function(t,n){var e=s(),i=e.animate,a=e.config,o=r({startAngle:t.arc.startAngle,endAngle:t.arc.endAngle,innerRadius:t.arc.innerRadius,outerRadius:t.arc.outerRadius,config:a,immediate:!i});return M({},o,{path:nt(o.startAngle,o.endAngle,o.innerRadius,o.outerRadius,n)})},lt=function(t){var n=void 0===t?{}:t,e=n.cornerRadius,r=void 0===e?0:e,i=n.padAngle,a=void 0===i?0:i;return v((function(){return y().innerRadius((function(t){return t.innerRadius})).outerRadius((function(t){return t.outerRadius})).cornerRadius(r).padAngle(a)}),[r,a])};export{F as ArcLabelComponent,B as ArcLabelsLayer,_ as ArcLine,Z as ArcLinkLabelComponent,U as ArcLinkLabelsLayer,tt as ArcShape,rt as ArcsLayer,E as arcTransitionModeById,O as arcTransitionModes,it as computeArcBoundingBox,T as computeArcCenter,D as computeArcLink,q as computeArcLinkTextAnchor,w as drawCanvasArcLabels,V as drawCanvasArcLinkLabels,ot as findArcUnderCursor,nt as interpolateArc,j as interpolateArcCenter,at as isCursorInRing,ut as useAnimatedArc,S as useArcCenters,W as useArcCentersTransition,lt as useArcGenerator,z as useArcLabels,Y as useArcLinkLabels,Q as useArcLinkLabelsTransition,X as useArcLinks,I as useArcTransitionMode,et as useArcsTransition}; | ||
| //# sourceMappingURL=nivo-arcs.es.js.map |
@@ -1,1143 +0,2 @@ | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/colors'), require('@react-spring/web'), require('react/jsx-runtime'), require('d3-shape')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/colors', '@react-spring/web', 'react/jsx-runtime', 'd3-shape'], factory) : | ||
| (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global['@react-spring/web'], global['react/jsx-runtime'], global.d3)); | ||
| }(this, (function (exports, react, core, colors, web, jsxRuntime, d3Shape) { '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; | ||
| } | ||
| var getNormalizedAngle = function getNormalizedAngle(angle) { | ||
| var normalizedAngle = angle % (Math.PI * 2); | ||
| if (normalizedAngle < 0) { | ||
| normalizedAngle += Math.PI * 2; | ||
| } | ||
| return normalizedAngle; | ||
| }; | ||
| var filterDataBySkipAngle = function filterDataBySkipAngle(data, skipAngle) { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(core.radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }); | ||
| }; | ||
| var useFilteredDataBySkipAngle = function useFilteredDataBySkipAngle(data, skipAngle) { | ||
| return react.useMemo(function () { | ||
| return filterDataBySkipAngle(data, skipAngle); | ||
| }, [data, skipAngle]); | ||
| }; | ||
| var svgEllipticalArcCommand = function svgEllipticalArcCommand(radius, largeArcFlag, sweepFlag, x, y) { | ||
| return ['A', radius, radius, 0, largeArcFlag, sweepFlag, x, y].join(' '); | ||
| }; | ||
| var generateSvgArc = function generateSvgArc(radius, originalStartAngle, originalEndAngle) { | ||
| var startAngle = Math.min(originalStartAngle, originalEndAngle); | ||
| var endAngle = Math.max(originalStartAngle, originalEndAngle); | ||
| var start = core.positionFromAngle(core.degreesToRadians(endAngle), radius); | ||
| var end = core.positionFromAngle(core.degreesToRadians(startAngle), radius); | ||
| if (endAngle - startAngle >= 360) { | ||
| var mid = core.positionFromAngle(core.degreesToRadians(startAngle + 180), radius); | ||
| return ["M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, 1, 1, mid.x, mid.y), "M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, 1, 0, mid.x, mid.y)].join(' '); | ||
| } | ||
| var largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1; | ||
| return ["M ".concat(start.x, " ").concat(start.y), svgEllipticalArcCommand(radius, largeArcFlag, 0, end.x, end.y)].join(' '); | ||
| }; | ||
| var arcTransitionModes = ['startAngle', 'middleAngle', 'endAngle', 'innerRadius', 'centerRadius', 'outerRadius', 'pushIn', 'pushOut']; | ||
| var arcTransitionModeById = { | ||
| startAngle: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| endAngle: arc.startAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: arc.endAngle | ||
| }); | ||
| } | ||
| }, | ||
| middleAngle: { | ||
| enter: function enter(arc) { | ||
| var middleAngle = arc.startAngle + (arc.endAngle - arc.startAngle) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: middleAngle, | ||
| endAngle: middleAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| var middleAngle = arc.startAngle + (arc.endAngle - arc.startAngle) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: middleAngle, | ||
| endAngle: middleAngle | ||
| }); | ||
| } | ||
| }, | ||
| endAngle: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| startAngle: arc.endAngle | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| endAngle: arc.startAngle | ||
| }); | ||
| } | ||
| }, | ||
| innerRadius: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius | ||
| }); | ||
| } | ||
| }, | ||
| centerRadius: { | ||
| enter: function enter(arc) { | ||
| var centerRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: centerRadius, | ||
| outerRadius: centerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| var centerRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) / 2; | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: centerRadius, | ||
| outerRadius: centerRadius | ||
| }); | ||
| } | ||
| }, | ||
| outerRadius: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| } | ||
| }, | ||
| pushIn: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.innerRadius - arc.outerRadius + arc.innerRadius, | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius, | ||
| outerRadius: arc.outerRadius + arc.outerRadius - arc.innerRadius | ||
| }); | ||
| } | ||
| }, | ||
| pushOut: { | ||
| enter: function enter(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.outerRadius, | ||
| outerRadius: arc.outerRadius + arc.outerRadius - arc.innerRadius | ||
| }); | ||
| }, | ||
| update: function update(arc) { | ||
| return arc; | ||
| }, | ||
| leave: function leave(arc) { | ||
| return _objectSpread2(_objectSpread2({}, arc), {}, { | ||
| innerRadius: arc.innerRadius - arc.outerRadius + arc.innerRadius, | ||
| outerRadius: arc.innerRadius | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| var useArcTransitionMode = function useArcTransitionMode(mode, extraTransition) { | ||
| return react.useMemo(function () { | ||
| var transitionMode = arcTransitionModeById[mode]; | ||
| return { | ||
| enter: function enter(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 0 | ||
| }, transitionMode.enter(datum.arc)), extraTransition ? extraTransition.enter(datum) : {}); | ||
| }, | ||
| update: function update(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 1 | ||
| }, transitionMode.update(datum.arc)), extraTransition ? extraTransition.update(datum) : {}); | ||
| }, | ||
| leave: function leave(datum) { | ||
| return _objectSpread2(_objectSpread2({ | ||
| progress: 0 | ||
| }, transitionMode.leave(datum.arc)), extraTransition ? extraTransition.leave(datum) : {}); | ||
| } | ||
| }; | ||
| }, [mode, extraTransition]); | ||
| }; | ||
| var computeArcCenter = function computeArcCenter(arc, offset) { | ||
| var angle = core.midAngle(arc) - Math.PI / 2; | ||
| var radius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) * offset; | ||
| return core.positionFromAngle(angle, radius); | ||
| }; | ||
| var interpolateArcCenter = function interpolateArcCenter(offset) { | ||
| return function (startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| var centroid = computeArcCenter({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset); | ||
| return "translate(".concat(centroid.x, ",").concat(centroid.y, ")"); | ||
| }); | ||
| }; | ||
| }; | ||
| var useArcCentersTransition = function useArcCentersTransition(data) { | ||
| var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5; | ||
| var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'innerRadius'; | ||
| var extra = arguments.length > 3 ? arguments[3] : undefined; | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var phases = useArcTransitionMode(mode, extra); | ||
| var transition = web.useTransition(data, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: phases.update, | ||
| from: phases.enter, | ||
| enter: phases.update, | ||
| update: phases.update, | ||
| leave: phases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolate: interpolateArcCenter(offset) | ||
| }; | ||
| }; | ||
| var useArcCenters = function useArcCenters(_ref) { | ||
| var data = _ref.data, | ||
| _ref$offset = _ref.offset, | ||
| offset = _ref$offset === void 0 ? 0.5 : _ref$offset, | ||
| _ref$skipAngle = _ref.skipAngle, | ||
| skipAngle = _ref$skipAngle === void 0 ? 0 : _ref$skipAngle, | ||
| _ref$computeExtraProp = _ref.computeExtraProps, | ||
| computeExtraProps = _ref$computeExtraProp === void 0 ? function () { | ||
| return {}; | ||
| } : _ref$computeExtraProp; | ||
| return react.useMemo(function () { | ||
| return filterDataBySkipAngle(data, skipAngle).map(function (datum) { | ||
| var position = computeArcCenter(datum.arc, offset); | ||
| return _objectSpread2(_objectSpread2({}, computeExtraProps(datum)), {}, { | ||
| x: position.x, | ||
| y: position.y, | ||
| data: datum | ||
| }); | ||
| }); | ||
| }, [data, offset, skipAngle, computeExtraProps]); | ||
| }; | ||
| var staticStyle = { | ||
| pointerEvents: 'none' | ||
| }; | ||
| var ArcLabel = function ArcLabel(_ref) { | ||
| var label = _ref.label, | ||
| style = _ref.style; | ||
| var theme = core.useTheme(); | ||
| return jsxRuntime.jsx(web.animated.g, { | ||
| transform: style.transform, | ||
| opacity: style.progress, | ||
| style: staticStyle, | ||
| children: jsxRuntime.jsx(web.animated.text, { | ||
| textAnchor: "middle", | ||
| dominantBaseline: "central", | ||
| style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, { | ||
| fill: style.textColor | ||
| }), | ||
| children: label | ||
| }) | ||
| }); | ||
| }; | ||
| var ArcLabelsLayer = function ArcLabelsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| transitionMode = _ref.transitionMode, | ||
| labelAccessor = _ref.label, | ||
| radiusOffset = _ref.radiusOffset, | ||
| skipAngle = _ref.skipAngle, | ||
| textColor = _ref.textColor, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcLabel : _ref$component; | ||
| var getLabel = core.usePropertyAccessor(labelAccessor); | ||
| var theme = core.useTheme(); | ||
| var getTextColor = colors.useInheritedColor(textColor, theme); | ||
| var filteredData = react.useMemo(function () { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(core.radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }); | ||
| }, [data, skipAngle]); | ||
| var _useArcCentersTransit = useArcCentersTransition(filteredData, radiusOffset, transitionMode), | ||
| transition = _useArcCentersTransit.transition, | ||
| interpolate = _useArcCentersTransit.interpolate; | ||
| var Label = component; | ||
| return jsxRuntime.jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return react.createElement(Label, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| label: getLabel(datum), | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| transform: interpolate(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius), | ||
| textColor: getTextColor(datum) | ||
| }) | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| var drawCanvasArcLabels = function drawCanvasArcLabels(ctx, labels, theme) { | ||
| ctx.textAlign = 'center'; | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily); | ||
| labels.forEach(function (label) { | ||
| ctx.fillStyle = label.textColor; | ||
| ctx.fillText("".concat(label.label), label.x, label.y); | ||
| }); | ||
| }; | ||
| var useArcLabels = function useArcLabels(_ref) { | ||
| var data = _ref.data, | ||
| offset = _ref.offset, | ||
| skipAngle = _ref.skipAngle, | ||
| label = _ref.label, | ||
| textColor = _ref.textColor; | ||
| var getLabel = core.usePropertyAccessor(label); | ||
| var theme = core.useTheme(); | ||
| var getTextColor = colors.useInheritedColor(textColor, theme); | ||
| var computeExtraProps = react.useCallback(function (datum) { | ||
| return { | ||
| label: getLabel(datum), | ||
| textColor: getTextColor(datum) | ||
| }; | ||
| }, [getLabel, getTextColor]); | ||
| return useArcCenters({ | ||
| data: data, | ||
| offset: offset, | ||
| skipAngle: skipAngle, | ||
| computeExtraProps: computeExtraProps | ||
| }); | ||
| }; | ||
| var computeArcLinkTextAnchor = function computeArcLinkTextAnchor(arc) { | ||
| var centerAngle = getNormalizedAngle(arc.startAngle + (arc.endAngle - arc.startAngle) / 2 - Math.PI / 2); | ||
| if (centerAngle < Math.PI / 2 || centerAngle > Math.PI * 1.5) { | ||
| return 'start'; | ||
| } | ||
| return 'end'; | ||
| }; | ||
| var computeArcLink = function computeArcLink(arc, offset, diagonalLength, straightLength) { | ||
| var centerAngle = getNormalizedAngle(arc.startAngle + (arc.endAngle - arc.startAngle) / 2 - Math.PI / 2); | ||
| var point0 = core.positionFromAngle(centerAngle, arc.outerRadius + offset); | ||
| var point1 = core.positionFromAngle(centerAngle, arc.outerRadius + offset + diagonalLength); | ||
| var side; | ||
| var point2; | ||
| if (centerAngle < Math.PI / 2 || centerAngle > Math.PI * 1.5) { | ||
| side = 'after'; | ||
| point2 = { | ||
| x: point1.x + straightLength, | ||
| y: point1.y | ||
| }; | ||
| } else { | ||
| side = 'before'; | ||
| point2 = { | ||
| x: point1.x - straightLength, | ||
| y: point1.y | ||
| }; | ||
| } | ||
| return { | ||
| side: side, | ||
| points: [point0, point1, point2] | ||
| }; | ||
| }; | ||
| var lineGenerator = d3Shape.line().x(function (d) { | ||
| return d.x; | ||
| }).y(function (d) { | ||
| return d.y; | ||
| }); | ||
| var useTransitionPhases = function useTransitionPhases(_ref) { | ||
| var offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| textOffset = _ref.textOffset, | ||
| getLinkColor = _ref.getLinkColor, | ||
| getTextColor = _ref.getTextColor; | ||
| return react.useMemo(function () { | ||
| return { | ||
| enter: function enter(datum) { | ||
| return { | ||
| startAngle: datum.arc.startAngle, | ||
| endAngle: datum.arc.endAngle, | ||
| innerRadius: datum.arc.innerRadius, | ||
| outerRadius: datum.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: 0, | ||
| straightLength: 0, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(datum), | ||
| textColor: getTextColor(datum), | ||
| opacity: 0 | ||
| }; | ||
| }, | ||
| update: function update(d) { | ||
| return { | ||
| startAngle: d.arc.startAngle, | ||
| endAngle: d.arc.endAngle, | ||
| innerRadius: d.arc.innerRadius, | ||
| outerRadius: d.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(d), | ||
| textColor: getTextColor(d), | ||
| opacity: 1 | ||
| }; | ||
| }, | ||
| leave: function leave(d) { | ||
| return { | ||
| startAngle: d.arc.startAngle, | ||
| endAngle: d.arc.endAngle, | ||
| innerRadius: d.arc.innerRadius, | ||
| outerRadius: d.arc.outerRadius, | ||
| offset: offset, | ||
| diagonalLength: 0, | ||
| straightLength: 0, | ||
| textOffset: textOffset, | ||
| linkColor: getLinkColor(d), | ||
| textColor: getTextColor(d), | ||
| opacity: 0 | ||
| }; | ||
| } | ||
| }; | ||
| }, [diagonalLength, straightLength, textOffset, getLinkColor, getTextColor]); | ||
| }; | ||
| var interpolateLink = function interpolateLink(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue], function (startAngle, endAngle, innerRadius, outerRadius, offset, diagonalLengthAnimated, straightLengthAnimated) { | ||
| var _computeArcLink = computeArcLink({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset, diagonalLengthAnimated, straightLengthAnimated), | ||
| points = _computeArcLink.points; | ||
| return lineGenerator(points); | ||
| }); | ||
| }; | ||
| var interpolateTextAnchor = function interpolateTextAnchor(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| return computeArcLinkTextAnchor({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }); | ||
| }); | ||
| }; | ||
| var interpolateTextPosition = function interpolateTextPosition(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue, textOffsetValue) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, offsetValue, diagonalLengthValue, straightLengthValue, textOffsetValue], function (startAngle, endAngle, innerRadius, outerRadius, offset, diagonalLengthAnimated, straightLengthAnimated, textOffset) { | ||
| var _computeArcLink2 = computeArcLink({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: innerRadius, | ||
| outerRadius: outerRadius | ||
| }, offset, diagonalLengthAnimated, straightLengthAnimated), | ||
| points = _computeArcLink2.points, | ||
| side = _computeArcLink2.side; | ||
| var position = points[2]; | ||
| if (side === 'before') { | ||
| position.x -= textOffset; | ||
| } else { | ||
| position.x += textOffset; | ||
| } | ||
| return "translate(".concat(position.x, ",").concat(position.y, ")"); | ||
| }); | ||
| }; | ||
| var useArcLinkLabelsTransition = function useArcLinkLabelsTransition(_ref2) { | ||
| var data = _ref2.data, | ||
| _ref2$offset = _ref2.offset, | ||
| offset = _ref2$offset === void 0 ? 0 : _ref2$offset, | ||
| diagonalLength = _ref2.diagonalLength, | ||
| straightLength = _ref2.straightLength, | ||
| _ref2$skipAngle = _ref2.skipAngle, | ||
| skipAngle = _ref2$skipAngle === void 0 ? 0 : _ref2$skipAngle, | ||
| textOffset = _ref2.textOffset, | ||
| linkColor = _ref2.linkColor, | ||
| textColor = _ref2.textColor; | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var theme = core.useTheme(); | ||
| var getLinkColor = colors.useInheritedColor(linkColor, theme); | ||
| var getTextColor = colors.useInheritedColor(textColor, theme); | ||
| var filteredData = useFilteredDataBySkipAngle(data, skipAngle); | ||
| var transitionPhases = useTransitionPhases({ | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| getLinkColor: getLinkColor, | ||
| getTextColor: getTextColor | ||
| }); | ||
| var transition = web.useTransition(filteredData, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: transitionPhases.update, | ||
| from: transitionPhases.enter, | ||
| enter: transitionPhases.update, | ||
| update: transitionPhases.update, | ||
| leave: transitionPhases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolateLink: interpolateLink, | ||
| interpolateTextAnchor: interpolateTextAnchor, | ||
| interpolateTextPosition: interpolateTextPosition | ||
| }; | ||
| }; | ||
| var ArcLinkLabel = function ArcLinkLabel(_ref) { | ||
| var label = _ref.label, | ||
| style = _ref.style; | ||
| var theme = core.useTheme(); | ||
| return jsxRuntime.jsxs(web.animated.g, { | ||
| opacity: style.opacity, | ||
| children: [jsxRuntime.jsx(web.animated.path, { | ||
| fill: "none", | ||
| stroke: style.linkColor, | ||
| strokeWidth: style.thickness, | ||
| d: style.path | ||
| }), jsxRuntime.jsx(web.animated.text, { | ||
| transform: style.textPosition, | ||
| textAnchor: style.textAnchor, | ||
| dominantBaseline: "central", | ||
| style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, { | ||
| fill: style.textColor | ||
| }), | ||
| children: label | ||
| })] | ||
| }); | ||
| }; | ||
| var ArcLinkLabelsLayer = function ArcLinkLabelsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| labelAccessor = _ref.label, | ||
| skipAngle = _ref.skipAngle, | ||
| offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| strokeWidth = _ref.strokeWidth, | ||
| textOffset = _ref.textOffset, | ||
| textColor = _ref.textColor, | ||
| linkColor = _ref.linkColor, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcLinkLabel : _ref$component; | ||
| var getLabel = core.usePropertyAccessor(labelAccessor); | ||
| var _useArcLinkLabelsTran = useArcLinkLabelsTransition({ | ||
| data: data, | ||
| skipAngle: skipAngle, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| textOffset: textOffset, | ||
| linkColor: linkColor, | ||
| textColor: textColor | ||
| }), | ||
| transition = _useArcLinkLabelsTran.transition, | ||
| interpolateLink = _useArcLinkLabelsTran.interpolateLink, | ||
| interpolateTextAnchor = _useArcLinkLabelsTran.interpolateTextAnchor, | ||
| interpolateTextPosition = _useArcLinkLabelsTran.interpolateTextPosition; | ||
| var Label = component; | ||
| return jsxRuntime.jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return react.createElement(Label, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| label: getLabel(datum), | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| thickness: strokeWidth, | ||
| path: interpolateLink(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, transitionProps.offset, transitionProps.diagonalLength, transitionProps.straightLength), | ||
| textAnchor: interpolateTextAnchor(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius), | ||
| textPosition: interpolateTextPosition(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, transitionProps.offset, transitionProps.diagonalLength, transitionProps.straightLength, transitionProps.textOffset) | ||
| }) | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| var drawCanvasArcLinkLabels = function drawCanvasArcLinkLabels(ctx, labels, theme, strokeWidth) { | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily); | ||
| labels.forEach(function (label) { | ||
| ctx.fillStyle = label.textColor; | ||
| ctx.textAlign = core.textPropsByEngine.canvas.align[label.textAnchor]; | ||
| ctx.fillText("".concat(label.label), label.x, label.y); | ||
| ctx.beginPath(); | ||
| ctx.strokeStyle = label.linkColor; | ||
| ctx.lineWidth = strokeWidth; | ||
| label.points.forEach(function (point, index) { | ||
| if (index === 0) ctx.moveTo(point.x, point.y);else ctx.lineTo(point.x, point.y); | ||
| }); | ||
| ctx.stroke(); | ||
| }); | ||
| }; | ||
| var useArcLinks = function useArcLinks(_ref) { | ||
| var data = _ref.data, | ||
| _ref$skipAngle = _ref.skipAngle, | ||
| skipAngle = _ref$skipAngle === void 0 ? 0 : _ref$skipAngle, | ||
| _ref$offset = _ref.offset, | ||
| offset = _ref$offset === void 0 ? 0.5 : _ref$offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| _ref$computeExtraProp = _ref.computeExtraProps, | ||
| computeExtraProps = _ref$computeExtraProp === void 0 ? function () { | ||
| return {}; | ||
| } : _ref$computeExtraProp; | ||
| var links = react.useMemo(function () { | ||
| return data.filter(function (datum) { | ||
| return Math.abs(core.radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle)) >= skipAngle; | ||
| }).map(function (datum) { | ||
| return _objectSpread2(_objectSpread2({}, computeArcLink(datum.arc, offset, diagonalLength, straightLength)), {}, { | ||
| data: datum | ||
| }); | ||
| }); | ||
| }, [data, skipAngle, offset, diagonalLength, straightLength]); | ||
| return react.useMemo(function () { | ||
| return links.map(function (link) { | ||
| return _objectSpread2(_objectSpread2({}, computeExtraProps(link)), link); | ||
| }); | ||
| }, [links, computeExtraProps]); | ||
| }; | ||
| var useArcLinkLabels = function useArcLinkLabels(_ref) { | ||
| var data = _ref.data, | ||
| skipAngle = _ref.skipAngle, | ||
| offset = _ref.offset, | ||
| diagonalLength = _ref.diagonalLength, | ||
| straightLength = _ref.straightLength, | ||
| _ref$textOffset = _ref.textOffset, | ||
| textOffset = _ref$textOffset === void 0 ? 0 : _ref$textOffset, | ||
| label = _ref.label, | ||
| linkColor = _ref.linkColor, | ||
| textColor = _ref.textColor; | ||
| var getLabel = core.usePropertyAccessor(label); | ||
| var theme = core.useTheme(); | ||
| var getLinkColor = colors.useInheritedColor(linkColor, theme); | ||
| var getTextColor = colors.useInheritedColor(textColor, theme); | ||
| var computeExtraProps = react.useCallback(function (link) { | ||
| var position = { | ||
| x: link.points[2].x, | ||
| y: link.points[2].y | ||
| }; | ||
| var textAnchor; | ||
| if (link.side === 'before') { | ||
| position.x -= textOffset; | ||
| textAnchor = 'end'; | ||
| } else { | ||
| position.x += textOffset; | ||
| textAnchor = 'start'; | ||
| } | ||
| return _objectSpread2(_objectSpread2({}, position), {}, { | ||
| label: getLabel(link.data), | ||
| linkColor: getLinkColor(link.data), | ||
| textAnchor: textAnchor, | ||
| textColor: getTextColor(link.data) | ||
| }); | ||
| }, [getLabel, getLinkColor, getTextColor, textOffset]); | ||
| return useArcLinks({ | ||
| data: data, | ||
| skipAngle: skipAngle, | ||
| offset: offset, | ||
| diagonalLength: diagonalLength, | ||
| straightLength: straightLength, | ||
| computeExtraProps: computeExtraProps | ||
| }); | ||
| }; | ||
| 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 ArcLine = function ArcLine(_ref) { | ||
| var animatedProps = _ref.animated, | ||
| rest = _objectWithoutProperties(_ref, ["animated"]); | ||
| return jsxRuntime.jsx(web.animated.path, _objectSpread2({ | ||
| d: web.to([animatedProps.radius, animatedProps.startAngle, animatedProps.endAngle], function (radius, start, end) { | ||
| return generateSvgArc(radius, start, end); | ||
| }) | ||
| }, rest)); | ||
| }; | ||
| var ArcShape = function ArcShape(_ref) { | ||
| var datum = _ref.datum, | ||
| style = _ref.style, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave; | ||
| var handleClick = react.useCallback(function (event) { | ||
| return onClick === null || onClick === void 0 ? void 0 : onClick(datum, event); | ||
| }, [onClick, datum]); | ||
| var handleMouseEnter = react.useCallback(function (event) { | ||
| return onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(datum, event); | ||
| }, [onMouseEnter, datum]); | ||
| var handleMouseMove = react.useCallback(function (event) { | ||
| return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datum, event); | ||
| }, [onMouseMove, datum]); | ||
| var handleMouseLeave = react.useCallback(function (event) { | ||
| return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(datum, event); | ||
| }, [onMouseLeave, datum]); | ||
| return jsxRuntime.jsx(web.animated.path, { | ||
| d: style.path, | ||
| opacity: style.opacity, | ||
| fill: datum.fill || style.color, | ||
| stroke: style.borderColor, | ||
| strokeWidth: style.borderWidth, | ||
| onClick: onClick ? handleClick : undefined, | ||
| onMouseEnter: onMouseEnter ? handleMouseEnter : undefined, | ||
| onMouseMove: onMouseMove ? handleMouseMove : undefined, | ||
| onMouseLeave: onMouseLeave ? handleMouseLeave : undefined | ||
| }); | ||
| }; | ||
| var interpolateArc = function interpolateArc(startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue, arcGenerator) { | ||
| return web.to([startAngleValue, endAngleValue, innerRadiusValue, outerRadiusValue], function (startAngle, endAngle, innerRadius, outerRadius) { | ||
| return arcGenerator({ | ||
| startAngle: startAngle, | ||
| endAngle: endAngle, | ||
| innerRadius: Math.max(0, innerRadius), | ||
| outerRadius: Math.max(0, outerRadius) | ||
| }); | ||
| }); | ||
| }; | ||
| var useArcsTransition = function useArcsTransition(data) { | ||
| var mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'innerRadius'; | ||
| var extra = arguments.length > 2 ? arguments[2] : undefined; | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var phases = useArcTransitionMode(mode, extra); | ||
| var transition = web.useTransition(data, { | ||
| keys: function keys(datum) { | ||
| return datum.id; | ||
| }, | ||
| initial: phases.update, | ||
| from: phases.enter, | ||
| enter: phases.update, | ||
| update: phases.update, | ||
| leave: phases.leave, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return { | ||
| transition: transition, | ||
| interpolate: interpolateArc | ||
| }; | ||
| }; | ||
| var ArcsLayer = function ArcsLayer(_ref) { | ||
| var center = _ref.center, | ||
| data = _ref.data, | ||
| arcGenerator = _ref.arcGenerator, | ||
| borderWidth = _ref.borderWidth, | ||
| borderColor = _ref.borderColor, | ||
| onClick = _ref.onClick, | ||
| onMouseEnter = _ref.onMouseEnter, | ||
| onMouseMove = _ref.onMouseMove, | ||
| onMouseLeave = _ref.onMouseLeave, | ||
| transitionMode = _ref.transitionMode, | ||
| _ref$component = _ref.component, | ||
| component = _ref$component === void 0 ? ArcShape : _ref$component; | ||
| var theme = core.useTheme(); | ||
| var getBorderColor = colors.useInheritedColor(borderColor, theme); | ||
| var _useArcsTransition = useArcsTransition(data, transitionMode, { | ||
| enter: function enter(datum) { | ||
| return { | ||
| opacity: 0, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| }, | ||
| update: function update(datum) { | ||
| return { | ||
| opacity: 1, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| }, | ||
| leave: function leave(datum) { | ||
| return { | ||
| opacity: 0, | ||
| color: datum.color, | ||
| borderColor: getBorderColor(datum) | ||
| }; | ||
| } | ||
| }), | ||
| transition = _useArcsTransition.transition, | ||
| interpolate = _useArcsTransition.interpolate; | ||
| var Arc = component; | ||
| return jsxRuntime.jsx("g", { | ||
| transform: "translate(".concat(center[0], ",").concat(center[1], ")"), | ||
| children: transition(function (transitionProps, datum) { | ||
| return react.createElement(Arc, { | ||
| key: datum.id, | ||
| datum: datum, | ||
| style: _objectSpread2(_objectSpread2({}, transitionProps), {}, { | ||
| borderWidth: borderWidth, | ||
| path: interpolate(transitionProps.startAngle, transitionProps.endAngle, transitionProps.innerRadius, transitionProps.outerRadius, arcGenerator) | ||
| }), | ||
| onClick: onClick, | ||
| onMouseEnter: onMouseEnter, | ||
| onMouseMove: onMouseMove, | ||
| onMouseLeave: onMouseLeave | ||
| }); | ||
| }) | ||
| }); | ||
| }; | ||
| 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 computeArcBoundingBox = function computeArcBoundingBox(centerX, centerY, radius, startAngle, endAngle) { | ||
| var includeCenter = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; | ||
| var points = []; | ||
| var p0 = core.positionFromAngle(core.degreesToRadians(startAngle), radius); | ||
| points.push([p0.x, p0.y]); | ||
| var p1 = core.positionFromAngle(core.degreesToRadians(endAngle), radius); | ||
| points.push([p1.x, p1.y]); | ||
| for (var angle = Math.round(Math.min(startAngle, endAngle)); angle <= Math.round(Math.max(startAngle, endAngle)); angle++) { | ||
| if (angle % 90 === 0) { | ||
| var p = core.positionFromAngle(core.degreesToRadians(angle), radius); | ||
| points.push([p.x, p.y]); | ||
| } | ||
| } | ||
| points = points.map(function (_ref) { | ||
| var _ref2 = _slicedToArray(_ref, 2), | ||
| x = _ref2[0], | ||
| y = _ref2[1]; | ||
| return [centerX + x, centerY + y]; | ||
| }); | ||
| if (includeCenter) { | ||
| points.push([centerX, centerY]); | ||
| } | ||
| var xs = points.map(function (_ref3) { | ||
| var _ref4 = _slicedToArray(_ref3, 1), | ||
| x = _ref4[0]; | ||
| return x; | ||
| }); | ||
| var ys = points.map(function (_ref5) { | ||
| var _ref6 = _slicedToArray(_ref5, 2), | ||
| y = _ref6[1]; | ||
| return y; | ||
| }); | ||
| var x0 = Math.min.apply(Math, _toConsumableArray(xs)); | ||
| var x1 = Math.max.apply(Math, _toConsumableArray(xs)); | ||
| var y0 = Math.min.apply(Math, _toConsumableArray(ys)); | ||
| var y1 = Math.max.apply(Math, _toConsumableArray(ys)); | ||
| return { | ||
| points: points, | ||
| x: x0, | ||
| y: y0, | ||
| width: x1 - x0, | ||
| height: y1 - y0 | ||
| }; | ||
| }; | ||
| var isCursorInRing = function isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY) { | ||
| var distance = core.getDistance(cursorX, cursorY, centerX, centerY); | ||
| return distance < radius && distance > innerRadius; | ||
| }; | ||
| var findArcUnderCursor = function findArcUnderCursor(centerX, centerY, radius, innerRadius, arcs, cursorX, cursorY) { | ||
| if (!isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY)) { | ||
| return undefined; | ||
| } | ||
| var cursorAngle = core.getAngle(cursorX, cursorY, centerX, centerY); | ||
| return arcs.find(function (_ref) { | ||
| var startAngle = _ref.startAngle, | ||
| endAngle = _ref.endAngle; | ||
| return cursorAngle >= startAngle && cursorAngle < endAngle; | ||
| }); | ||
| }; | ||
| var useAnimatedArc = function useAnimatedArc(datumWithArc, arcGenerator) { | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var animatedValues = web.useSpring({ | ||
| startAngle: datumWithArc.arc.startAngle, | ||
| endAngle: datumWithArc.arc.endAngle, | ||
| innerRadius: datumWithArc.arc.innerRadius, | ||
| outerRadius: datumWithArc.arc.outerRadius, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return _objectSpread2(_objectSpread2({}, animatedValues), {}, { | ||
| path: interpolateArc(animatedValues.startAngle, animatedValues.endAngle, animatedValues.innerRadius, animatedValues.outerRadius, arcGenerator) | ||
| }); | ||
| }; | ||
| var useArcGenerator = function useArcGenerator() { | ||
| var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| _ref$cornerRadius = _ref.cornerRadius, | ||
| cornerRadius = _ref$cornerRadius === void 0 ? 0 : _ref$cornerRadius, | ||
| _ref$padAngle = _ref.padAngle, | ||
| padAngle = _ref$padAngle === void 0 ? 0 : _ref$padAngle; | ||
| return react.useMemo(function () { | ||
| return d3Shape.arc().innerRadius(function (arc) { | ||
| return arc.innerRadius; | ||
| }).outerRadius(function (arc) { | ||
| return arc.outerRadius; | ||
| }).cornerRadius(cornerRadius).padAngle(padAngle); | ||
| }, [cornerRadius, padAngle]); | ||
| }; | ||
| exports.ArcLabelsLayer = ArcLabelsLayer; | ||
| exports.ArcLine = ArcLine; | ||
| exports.ArcLinkLabelsLayer = ArcLinkLabelsLayer; | ||
| exports.ArcShape = ArcShape; | ||
| exports.ArcsLayer = ArcsLayer; | ||
| exports.arcTransitionModeById = arcTransitionModeById; | ||
| exports.arcTransitionModes = arcTransitionModes; | ||
| exports.computeArcBoundingBox = computeArcBoundingBox; | ||
| exports.computeArcCenter = computeArcCenter; | ||
| exports.computeArcLink = computeArcLink; | ||
| exports.computeArcLinkTextAnchor = computeArcLinkTextAnchor; | ||
| exports.drawCanvasArcLabels = drawCanvasArcLabels; | ||
| exports.drawCanvasArcLinkLabels = drawCanvasArcLinkLabels; | ||
| exports.findArcUnderCursor = findArcUnderCursor; | ||
| exports.interpolateArc = interpolateArc; | ||
| exports.interpolateArcCenter = interpolateArcCenter; | ||
| exports.isCursorInRing = isCursorInRing; | ||
| exports.useAnimatedArc = useAnimatedArc; | ||
| exports.useArcCenters = useArcCenters; | ||
| exports.useArcCentersTransition = useArcCentersTransition; | ||
| exports.useArcGenerator = useArcGenerator; | ||
| exports.useArcLabels = useArcLabels; | ||
| exports.useArcLinkLabels = useArcLinkLabels; | ||
| exports.useArcLinkLabelsTransition = useArcLinkLabelsTransition; | ||
| exports.useArcLinks = useArcLinks; | ||
| exports.useArcTransitionMode = useArcTransitionMode; | ||
| exports.useArcsTransition = useArcsTransition; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| }))); | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@react-spring/web"),require("@nivo/core"),require("react/jsx-runtime"),require("react"),require("@nivo/colors"),require("d3-shape")):"function"==typeof define&&define.amd?define(["exports","@react-spring/web","@nivo/core","react/jsx-runtime","react","@nivo/colors","d3-shape"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).nivo=e.nivo||{},e["@react-spring/web"],e.nivo,e["react/jsx-runtime"],e.React,e.nivo,e.d3)}(this,(function(e,n,t,r,i,o,a){"use strict";function u(){return u=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},u.apply(this,arguments)}var s={pointerEvents:"none"},l=function(e){var i=e.label,o=e.style,a=t.useTheme();return r.jsx(n.animated.g,{transform:o.transform,opacity:o.progress,style:s,children:r.jsx(n.animated.text,{textAnchor:"middle",dominantBaseline:"central",style:u({},a.labels.text,{fill:o.textColor}),children:i})})},d=function(e){var n=e%(2*Math.PI);return n<0&&(n+=2*Math.PI),n},c=function(e,n){return e.filter((function(e){return Math.abs(t.radiansToDegrees(e.arc.endAngle-e.arc.startAngle))>=n}))},f=function(e,n,t,r,i){return["A",e,e,0,n,t,r,i].join(" ")},g={startAngle:{enter:function(e){return u({},e,{endAngle:e.startAngle})},update:function(e){return e},leave:function(e){return u({},e,{startAngle:e.endAngle})}},middleAngle:{enter:function(e){var n=e.startAngle+(e.endAngle-e.startAngle)/2;return u({},e,{startAngle:n,endAngle:n})},update:function(e){return e},leave:function(e){var n=e.startAngle+(e.endAngle-e.startAngle)/2;return u({},e,{startAngle:n,endAngle:n})}},endAngle:{enter:function(e){return u({},e,{startAngle:e.endAngle})},update:function(e){return e},leave:function(e){return u({},e,{endAngle:e.startAngle})}},innerRadius:{enter:function(e){return u({},e,{outerRadius:e.innerRadius})},update:function(e){return e},leave:function(e){return u({},e,{innerRadius:e.outerRadius})}},centerRadius:{enter:function(e){var n=e.innerRadius+(e.outerRadius-e.innerRadius)/2;return u({},e,{innerRadius:n,outerRadius:n})},update:function(e){return e},leave:function(e){var n=e.innerRadius+(e.outerRadius-e.innerRadius)/2;return u({},e,{innerRadius:n,outerRadius:n})}},outerRadius:{enter:function(e){return u({},e,{innerRadius:e.outerRadius})},update:function(e){return e},leave:function(e){return u({},e,{outerRadius:e.innerRadius})}},pushIn:{enter:function(e){return u({},e,{innerRadius:e.innerRadius-e.outerRadius+e.innerRadius,outerRadius:e.innerRadius})},update:function(e){return e},leave:function(e){return u({},e,{innerRadius:e.outerRadius,outerRadius:e.outerRadius+e.outerRadius-e.innerRadius})}},pushOut:{enter:function(e){return u({},e,{innerRadius:e.outerRadius,outerRadius:e.outerRadius+e.outerRadius-e.innerRadius})},update:function(e){return e},leave:function(e){return u({},e,{innerRadius:e.innerRadius-e.outerRadius+e.innerRadius,outerRadius:e.innerRadius})}}},p=function(e,n){return i.useMemo((function(){var t=g[e];return{enter:function(e){return u({progress:0},t.enter(e.arc),n?n.enter(e):{})},update:function(e){return u({progress:1},t.update(e.arc),n?n.update(e):{})},leave:function(e){return u({progress:0},t.leave(e.arc),n?n.leave(e):{})}}}),[e,n])},A=function(e,n){var r=t.midAngle(e)-Math.PI/2,i=e.innerRadius+(e.outerRadius-e.innerRadius)*n;return t.positionFromAngle(r,i)},h=function(e){return function(t,r,i,o){return n.to([t,r,i,o],(function(n,t,r,i){var o=A({startAngle:n,endAngle:t,innerRadius:r,outerRadius:i},e);return"translate("+o.x+","+o.y+")"}))}},v=function(e,r,i,o){void 0===r&&(r=.5),void 0===i&&(i="innerRadius");var a=t.useMotionConfig(),u=a.animate,s=a.config,l=p(i,o);return{transition:n.useTransition(e,{keys:function(e){return e.id},initial:l.update,from:l.enter,enter:l.update,update:l.update,leave:l.leave,config:s,immediate:!u}),interpolate:h(r)}},x=function(e){var n=e.data,t=e.offset,r=void 0===t?.5:t,o=e.skipAngle,a=void 0===o?0:o,s=e.computeExtraProps,l=void 0===s?function(){return{}}:s;return i.useMemo((function(){return c(n,a).map((function(e){var n=A(e.arc,r);return u({},l(e),{x:n.x,y:n.y,data:e})}))}),[n,r,a,l])},m=l,R=function(e){var i=e.label,o=e.style,a=t.useTheme();return r.jsxs(n.animated.g,{opacity:o.opacity,children:[r.jsx(n.animated.path,{fill:"none",stroke:o.linkColor,strokeWidth:o.thickness,d:o.path}),r.jsx(n.animated.text,{transform:o.textPosition,textAnchor:o.textAnchor,dominantBaseline:"central",style:u({},a.labels.text,{fill:o.textColor}),children:i})]})},y=function(e){var n=d(e.startAngle+(e.endAngle-e.startAngle)/2-Math.PI/2);return n<Math.PI/2||n>1.5*Math.PI?"start":"end"},C=function(e,n,r,i){var o,a,u=d(e.startAngle+(e.endAngle-e.startAngle)/2-Math.PI/2),s=t.positionFromAngle(u,e.outerRadius+n),l=t.positionFromAngle(u,e.outerRadius+n+r);return u<Math.PI/2||u>1.5*Math.PI?(o="after",a={x:l.x+i,y:l.y}):(o="before",a={x:l.x-i,y:l.y}),{side:o,points:[s,l,a]}},M=a.line().x((function(e){return e.x})).y((function(e){return e.y})),b=function(e,t,r,i,o,a,u){return n.to([e,t,r,i,o,a,u],(function(e,n,t,r,i,o,a){var u=C({startAngle:e,endAngle:n,innerRadius:t,outerRadius:r},i,o,a).points;return M(u)}))},k=function(e,t,r,i){return n.to([e,t,r,i],(function(e,n,t,r){return y({startAngle:e,endAngle:n,innerRadius:t,outerRadius:r})}))},L=function(e,t,r,i,o,a,u,s){return n.to([e,t,r,i,o,a,u,s],(function(e,n,t,r,i,o,a,u){var s=C({startAngle:e,endAngle:n,innerRadius:t,outerRadius:r},i,o,a),l=s.points,d=s.side,c=l[2];return"before"===d?c.x-=u:c.x+=u,"translate("+c.x+","+c.y+")"}))},T=function(e){var r=e.data,a=e.offset,u=void 0===a?0:a,s=e.diagonalLength,l=e.straightLength,d=e.skipAngle,f=void 0===d?0:d,g=e.textOffset,p=e.linkColor,A=e.textColor,h=t.useMotionConfig(),v=h.animate,x=h.config,m=t.useTheme(),R=o.useInheritedColor(p,m),y=o.useInheritedColor(A,m),C=function(e,n){return i.useMemo((function(){return c(e,n)}),[e,n])}(r,f),M=function(e){var n=e.offset,t=e.diagonalLength,r=e.straightLength,o=e.textOffset,a=e.getLinkColor,u=e.getTextColor;return i.useMemo((function(){return{enter:function(e){return{startAngle:e.arc.startAngle,endAngle:e.arc.endAngle,innerRadius:e.arc.innerRadius,outerRadius:e.arc.outerRadius,offset:n,diagonalLength:0,straightLength:0,textOffset:o,linkColor:a(e),textColor:u(e),opacity:0}},update:function(e){return{startAngle:e.arc.startAngle,endAngle:e.arc.endAngle,innerRadius:e.arc.innerRadius,outerRadius:e.arc.outerRadius,offset:n,diagonalLength:t,straightLength:r,textOffset:o,linkColor:a(e),textColor:u(e),opacity:1}},leave:function(e){return{startAngle:e.arc.startAngle,endAngle:e.arc.endAngle,innerRadius:e.arc.innerRadius,outerRadius:e.arc.outerRadius,offset:n,diagonalLength:0,straightLength:0,textOffset:o,linkColor:a(e),textColor:u(e),opacity:0}}}}),[t,r,o,a,u])}({offset:u,diagonalLength:s,straightLength:l,textOffset:g,getLinkColor:R,getTextColor:y});return{transition:n.useTransition(C,{keys:function(e){return e.id},initial:M.update,from:M.enter,enter:M.update,update:M.update,leave:M.leave,config:x,immediate:!v}),interpolateLink:b,interpolateTextAnchor:k,interpolateTextPosition:L}},P=function(e){var n=e.data,r=e.skipAngle,o=void 0===r?0:r,a=e.offset,s=void 0===a?.5:a,l=e.diagonalLength,d=e.straightLength,c=e.computeExtraProps,f=void 0===c?function(){return{}}:c,g=i.useMemo((function(){return n.filter((function(e){return Math.abs(t.radiansToDegrees(e.arc.endAngle-e.arc.startAngle))>=o})).map((function(e){return u({},C(e.arc,s,l,d),{data:e})}))}),[n,o,s,l,d]);return i.useMemo((function(){return g.map((function(e){return u({},f(e),e)}))}),[g,f])},j=R,I=["animated"],O=function(e){var t=e.datum,o=e.style,a=e.onClick,u=e.onMouseEnter,s=e.onMouseMove,l=e.onMouseLeave,d=i.useCallback((function(e){return null==a?void 0:a(t,e)}),[a,t]),c=i.useCallback((function(e){return null==u?void 0:u(t,e)}),[u,t]),f=i.useCallback((function(e){return null==s?void 0:s(t,e)}),[s,t]),g=i.useCallback((function(e){return null==l?void 0:l(t,e)}),[l,t]);return r.jsx(n.animated.path,{d:o.path,opacity:o.opacity,fill:t.fill||o.color,stroke:o.borderColor,strokeWidth:o.borderWidth,onClick:a?d:void 0,onMouseEnter:u?c:void 0,onMouseMove:s?f:void 0,onMouseLeave:l?g:void 0})},E=function(e,t,r,i,o){return n.to([e,t,r,i],(function(e,n,t,r){return o({startAngle:e,endAngle:n,innerRadius:Math.max(0,t),outerRadius:Math.max(0,r)})}))},F=function(e,r,i){void 0===r&&(r="innerRadius");var o=t.useMotionConfig(),a=o.animate,u=o.config,s=p(r,i);return{transition:n.useTransition(e,{keys:function(e){return e.id},initial:s.update,from:s.enter,enter:s.update,update:s.update,leave:s.leave,config:u,immediate:!a}),interpolate:E}},B=function(e,n,r,i,o,a){var u=t.getDistance(o,a,e,n);return u<r&&u>i};e.ArcLabelComponent=m,e.ArcLabelsLayer=function(e){var n=e.center,a=e.data,s=e.transitionMode,d=e.label,c=e.radiusOffset,f=e.skipAngle,g=e.textColor,p=e.component,A=void 0===p?l:p,h=t.usePropertyAccessor(d),x=t.useTheme(),m=o.useInheritedColor(g,x),R=i.useMemo((function(){return a.filter((function(e){return Math.abs(t.radiansToDegrees(e.arc.endAngle-e.arc.startAngle))>=f}))}),[a,f]),y=v(R,c,s),C=y.transition,M=y.interpolate,b=A;return r.jsx("g",{transform:"translate("+n[0]+","+n[1]+")",children:C((function(e,n){return i.createElement(b,{key:n.id,datum:n,label:h(n),style:u({},e,{transform:M(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius),textColor:m(n)})})}))})},e.ArcLine=function(e){var i=e.animated,o=function(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,I);return r.jsx(n.animated.path,u({d:n.to([i.radius,i.startAngle,i.endAngle],(function(e,n,r){return function(e,n,r){var i=Math.min(n,r),o=Math.max(n,r),a=t.positionFromAngle(t.degreesToRadians(o),e),u=t.positionFromAngle(t.degreesToRadians(i),e);if(o-i>=360){var s=t.positionFromAngle(t.degreesToRadians(i+180),e);return["M "+a.x+" "+a.y,f(e,1,1,s.x,s.y),"M "+a.x+" "+a.y,f(e,1,0,s.x,s.y)].join(" ")}var l=o-i<=180?0:1;return["M "+a.x+" "+a.y,f(e,l,0,u.x,u.y)].join(" ")}(e,n,r)}))},o))},e.ArcLinkLabelComponent=j,e.ArcLinkLabelsLayer=function(e){var n=e.center,o=e.data,a=e.label,s=e.skipAngle,l=e.offset,d=e.diagonalLength,c=e.straightLength,f=e.strokeWidth,g=e.textOffset,p=e.textColor,A=e.linkColor,h=e.component,v=void 0===h?R:h,x=t.usePropertyAccessor(a),m=T({data:o,skipAngle:s,offset:l,diagonalLength:d,straightLength:c,textOffset:g,linkColor:A,textColor:p}),y=m.transition,C=m.interpolateLink,M=m.interpolateTextAnchor,b=m.interpolateTextPosition,k=v;return r.jsx("g",{transform:"translate("+n[0]+","+n[1]+")",children:y((function(e,n){return i.createElement(k,{key:n.id,datum:n,label:x(n),style:u({},e,{thickness:f,path:C(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius,e.offset,e.diagonalLength,e.straightLength),textAnchor:M(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius),textPosition:b(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius,e.offset,e.diagonalLength,e.straightLength,e.textOffset)})})}))})},e.ArcShape=O,e.ArcsLayer=function(e){var n=e.center,a=e.data,s=e.arcGenerator,l=e.borderWidth,d=e.borderColor,c=e.onClick,f=e.onMouseEnter,g=e.onMouseMove,p=e.onMouseLeave,A=e.transitionMode,h=e.component,v=void 0===h?O:h,x=t.useTheme(),m=o.useInheritedColor(d,x),R=F(a,A,{enter:function(e){return{opacity:0,color:e.color,borderColor:m(e)}},update:function(e){return{opacity:1,color:e.color,borderColor:m(e)}},leave:function(e){return{opacity:0,color:e.color,borderColor:m(e)}}}),y=R.transition,C=R.interpolate,M=v;return r.jsx("g",{transform:"translate("+n[0]+","+n[1]+")",children:y((function(e,n){return i.createElement(M,{key:n.id,datum:n,style:u({},e,{borderWidth:l,path:C(e.startAngle,e.endAngle,e.innerRadius,e.outerRadius,s)}),onClick:c,onMouseEnter:f,onMouseMove:g,onMouseLeave:p})}))})},e.arcTransitionModeById=g,e.arcTransitionModes=["startAngle","middleAngle","endAngle","innerRadius","centerRadius","outerRadius","pushIn","pushOut"],e.computeArcBoundingBox=function(e,n,r,i,o,a){void 0===a&&(a=!0);var u=[],s=t.positionFromAngle(t.degreesToRadians(i),r);u.push([s.x,s.y]);var l=t.positionFromAngle(t.degreesToRadians(o),r);u.push([l.x,l.y]);for(var d=Math.round(Math.min(i,o));d<=Math.round(Math.max(i,o));d++)if(d%90==0){var c=t.positionFromAngle(t.degreesToRadians(d),r);u.push([c.x,c.y])}u=u.map((function(t){var r=t[0],i=t[1];return[e+r,n+i]})),a&&u.push([e,n]);var f=u.map((function(e){return e[0]})),g=u.map((function(e){return e[1]})),p=Math.min.apply(Math,f),A=Math.max.apply(Math,f),h=Math.min.apply(Math,g);return{points:u,x:p,y:h,width:A-p,height:Math.max.apply(Math,g)-h}},e.computeArcCenter=A,e.computeArcLink=C,e.computeArcLinkTextAnchor=y,e.drawCanvasArcLabels=function(e,n,t){e.textAlign="center",e.textBaseline="middle",e.font=t.labels.text.fontSize+"px "+t.labels.text.fontFamily,n.forEach((function(n){e.fillStyle=n.textColor,e.fillText(""+n.label,n.x,n.y)}))},e.drawCanvasArcLinkLabels=function(e,n,r,i){e.textBaseline="middle",e.font=r.labels.text.fontSize+"px "+r.labels.text.fontFamily,n.forEach((function(n){e.fillStyle=n.textColor,e.textAlign=t.textPropsByEngine.canvas.align[n.textAnchor],e.fillText(""+n.label,n.x,n.y),e.beginPath(),e.strokeStyle=n.linkColor,e.lineWidth=i,n.points.forEach((function(n,t){0===t?e.moveTo(n.x,n.y):e.lineTo(n.x,n.y)})),e.stroke()}))},e.findArcUnderCursor=function(e,n,r,i,o,a,u){if(B(e,n,r,i,a,u)){var s=t.getAngle(a,u,e,n);return o.find((function(e){var n=e.startAngle,t=e.endAngle;return s>=n&&s<t}))}},e.interpolateArc=E,e.interpolateArcCenter=h,e.isCursorInRing=B,e.useAnimatedArc=function(e,r){var i=t.useMotionConfig(),o=i.animate,a=i.config,s=n.useSpring({startAngle:e.arc.startAngle,endAngle:e.arc.endAngle,innerRadius:e.arc.innerRadius,outerRadius:e.arc.outerRadius,config:a,immediate:!o});return u({},s,{path:E(s.startAngle,s.endAngle,s.innerRadius,s.outerRadius,r)})},e.useArcCenters=x,e.useArcCentersTransition=v,e.useArcGenerator=function(e){var n=void 0===e?{}:e,t=n.cornerRadius,r=void 0===t?0:t,o=n.padAngle,u=void 0===o?0:o;return i.useMemo((function(){return a.arc().innerRadius((function(e){return e.innerRadius})).outerRadius((function(e){return e.outerRadius})).cornerRadius(r).padAngle(u)}),[r,u])},e.useArcLabels=function(e){var n=e.data,r=e.offset,a=e.skipAngle,u=e.label,s=e.textColor,l=t.usePropertyAccessor(u),d=t.useTheme(),c=o.useInheritedColor(s,d),f=i.useCallback((function(e){return{label:l(e),textColor:c(e)}}),[l,c]);return x({data:n,offset:r,skipAngle:a,computeExtraProps:f})},e.useArcLinkLabels=function(e){var n=e.data,r=e.skipAngle,a=e.offset,s=e.diagonalLength,l=e.straightLength,d=e.textOffset,c=void 0===d?0:d,f=e.label,g=e.linkColor,p=e.textColor,A=t.usePropertyAccessor(f),h=t.useTheme(),v=o.useInheritedColor(g,h),x=o.useInheritedColor(p,h),m=i.useCallback((function(e){var n,t={x:e.points[2].x,y:e.points[2].y};return"before"===e.side?(t.x-=c,n="end"):(t.x+=c,n="start"),u({},t,{label:A(e.data),linkColor:v(e.data),textAnchor:n,textColor:x(e.data)})}),[A,v,x,c]);return P({data:n,skipAngle:r,offset:a,diagonalLength:s,straightLength:l,computeExtraProps:m})},e.useArcLinkLabelsTransition=T,e.useArcLinks=P,e.useArcTransitionMode=p,e.useArcsTransition=F,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| //# sourceMappingURL=nivo-arcs.umd.js.map |
@@ -0,1 +1,3 @@ | ||
| /// <reference types="react" /> | ||
| export declare const ArcLabelComponent: <Datum extends import("..").DatumWithArcAndColor>({ label, style, }: import("./ArcLabel").ArcLabelProps<Datum>) => JSX.Element; | ||
| export * from './ArcLabelsLayer'; | ||
@@ -2,0 +4,0 @@ export * from './canvas'; |
@@ -0,1 +1,3 @@ | ||
| /// <reference types="react" /> | ||
| export declare const ArcLinkLabelComponent: <Datum extends import("..").DatumWithArcAndColor>({ label, style, }: import("./ArcLinkLabel").ArcLinkLabelProps<Datum>) => JSX.Element; | ||
| export * from './ArcLinkLabelsLayer'; | ||
@@ -2,0 +4,0 @@ export * from './canvas'; |
| { | ||
| "name": "@nivo/arcs", | ||
| "version": "0.74.1", | ||
| "version": "0.75.0", | ||
| "license": "MIT", | ||
@@ -31,3 +31,3 @@ "author": { | ||
| "dependencies": { | ||
| "@nivo/colors": "0.74.1", | ||
| "@nivo/colors": "0.75.0", | ||
| "@react-spring/web": "9.3.1", | ||
@@ -37,7 +37,7 @@ "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" | ||
@@ -48,3 +48,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
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-32.91%
343948
- Lines of code
- decreased by-71.42%
1194
- Number of low quality alerts
- increased by100%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@nivo/colors@0.75.0(transitive)
+ Added@nivo/core@0.75.0(transitive)
+ Added@nivo/recompose@0.75.0(transitive)
+ Added@nivo/tooltip@0.75.0(transitive)
- Removed@nivo/colors@0.74.1(transitive)
- Removed@nivo/core@0.74.1(transitive)
- Removed@nivo/recompose@0.74.0(transitive)
- Removed@nivo/tooltip@0.74.1(transitive)
Updated@nivo/colors@0.75.0