New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@nivo/circle-packing

Package Overview
Dependencies
Maintainers
2
Versions
80
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nivo/circle-packing - npm Package Compare versions

Comparing version 0.74.1 to 0.75.0

1247

dist/nivo-circle-packing.cjs.js

@@ -1,1247 +0,2 @@

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var core = require('@nivo/core');
var d3Hierarchy = require('d3-hierarchy');
var cloneDeep = _interopDefault(require('lodash/cloneDeep'));
var sortBy = _interopDefault(require('lodash/sortBy'));
var colors = require('@nivo/colors');
var tooltip = require('@nivo/tooltip');
var jsxRuntime = require('react/jsx-runtime');
var web = require('@react-spring/web');
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
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 _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
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();
}
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 _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();
}
var useCirclePacking = function useCirclePacking(_ref) {
var _hierarchy$value;
var data = _ref.data,
id = _ref.id,
value = _ref.value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
padding = _ref.padding,
leavesOnly = _ref.leavesOnly,
colors$1 = _ref.colors,
colorBy = _ref.colorBy,
inheritColorFromParent = _ref.inheritColorFromParent,
childColor = _ref.childColor;
var getId = core.usePropertyAccessor(id);
var getValue = core.usePropertyAccessor(value);
var formatValue = core.useValueFormatter(valueFormat);
var getColor = colors.useOrdinalColorScale(colors$1, colorBy);
var theme = core.useTheme();
var getChildColor = colors.useInheritedColor(childColor, theme);
var clonedData = cloneDeep(data);
var hierarchy = d3Hierarchy.hierarchy(clonedData).sum(getValue);
var pack = d3Hierarchy.pack().size([width, height]).padding(padding);
var packedData = pack(hierarchy);
var nodes = leavesOnly ? packedData.leaves() : packedData.descendants();
var sortedNodes = sortBy(nodes, 'depth');
var total = (_hierarchy$value = hierarchy.value) !== null && _hierarchy$value !== void 0 ? _hierarchy$value : 0;
var computedNodes = sortedNodes.reduce(function (acc, descendant) {
var id = getId(descendant.data);
var value = descendant.value;
var percentage = 100 * value / total;
var path = descendant.ancestors().map(function (ancestor) {
return getId(ancestor.data);
});
var parent;
if (descendant.parent) {
parent = acc.find(function (node) {
return node.id === getId(descendant.parent.data);
});
}
var normalizedNode = {
id: id,
path: path,
value: value,
percentage: percentage,
formattedValue: valueFormat ? formatValue(value) : "".concat(percentage.toFixed(2), "%"),
x: descendant.x,
y: descendant.y,
radius: descendant.r,
color: '',
data: descendant.data,
depth: descendant.depth,
height: descendant.height
};
if (inheritColorFromParent && parent && normalizedNode.depth > 1) {
normalizedNode.color = getChildColor(parent);
} else {
normalizedNode.color = getColor(normalizedNode);
}
return [].concat(_toConsumableArray(acc), [normalizedNode]);
}, []);
return computedNodes;
};
var useCirclePackingZoom = function useCirclePackingZoom(nodes, zoomedId, width, height) {
return React.useMemo(function () {
if (!zoomedId) return nodes;
var zoomedNode = nodes.find(function (_ref2) {
var id = _ref2.id;
return id === zoomedId;
});
if (!zoomedNode) return nodes;
var ratio = Math.min(width, height) / (zoomedNode.radius * 2);
var offsetX = width / 2 - zoomedNode.x * ratio;
var offsetY = height / 2 - zoomedNode.y * ratio;
return nodes.map(function (node) {
return _objectSpread2(_objectSpread2({}, node), {}, {
x: node.x * ratio + offsetX,
y: node.y * ratio + offsetY,
radius: node.radius * ratio
});
});
}, [nodes, zoomedId, width, height]);
};
var useCirclePackingLabels = function useCirclePackingLabels(_ref3) {
var nodes = _ref3.nodes,
label = _ref3.label,
filter = _ref3.filter,
skipRadius = _ref3.skipRadius,
textColor = _ref3.textColor;
var getLabel = core.usePropertyAccessor(label);
var theme = core.useTheme();
var getTextColor = colors.useInheritedColor(textColor, theme);
var labels = React.useMemo(function () {
return nodes.filter(function (node) {
return node.radius >= skipRadius;
}).map(function (node) {
return {
label: getLabel(node),
textColor: getTextColor(node),
node: node
};
});
}, [nodes, skipRadius, getLabel, getTextColor]);
return React.useMemo(function () {
if (!filter) return labels;
return labels.filter(filter);
}, [labels, filter]);
};
var useNodeMouseHandlers = function useNodeMouseHandlers(node, _ref4) {
var onMouseEnter = _ref4.onMouseEnter,
onMouseMove = _ref4.onMouseMove,
onMouseLeave = _ref4.onMouseLeave,
onClick = _ref4.onClick;
return React.useMemo(function () {
return {
onMouseEnter: onMouseEnter ? function (event) {
onMouseEnter(node, event);
} : undefined,
onMouseMove: onMouseMove ? function (event) {
onMouseMove(node, event);
} : undefined,
onMouseLeave: onMouseLeave ? function (event) {
onMouseLeave(node, event);
} : undefined,
onClick: onClick ? function (event) {
onClick(node, event);
} : undefined
};
}, [node, onMouseEnter, onMouseMove, onMouseLeave, onClick]);
};
var useMouseCircleDetection = function useMouseCircleDetection(_ref5) {
var nodes = _ref5.nodes,
canvasEl = _ref5.canvasEl,
margin = _ref5.margin;
var sortedNodes = React.useMemo(function () {
return sortBy(nodes, 'height');
}, [nodes]);
return React.useCallback(function (event) {
if (!canvasEl.current) return null;
var _getRelativeCursor = core.getRelativeCursor(canvasEl.current, event),
_getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2),
x = _getRelativeCursor2[0],
y = _getRelativeCursor2[1];
return sortedNodes.find(function (node) {
var distanceFromNode = core.getDistance(node.x, node.y, x - margin.left, y - margin.top);
return distanceFromNode <= node.radius;
});
}, [canvasEl, margin, sortedNodes]);
};
var useCirclePackingLayerContext = function useCirclePackingLayerContext(_ref6) {
var nodes = _ref6.nodes;
return React.useMemo(function () {
return {
nodes: nodes
};
}, [nodes]);
};
var CirclePackingTooltip = function CirclePackingTooltip(_ref) {
var id = _ref.id,
formattedValue = _ref.formattedValue,
color = _ref.color;
return jsxRuntime.jsx(tooltip.BasicTooltip, {
id: id,
value: formattedValue,
enableChip: true,
color: color
});
};
var _window$devicePixelRa;
var defaultProps = {
id: 'id',
value: 'value',
padding: 0,
leavesOnly: false,
layers: ['circles', 'labels'],
colors: {
scheme: 'nivo'
},
colorBy: 'depth',
inheritColorFromParent: false,
childColor: {
from: 'color',
modifiers: [['darker', 0.3]]
},
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [['darker', 0.3]]
},
defs: [],
fill: [],
enableLabels: false,
label: 'id',
labelTextColor: {
from: 'color',
modifiers: [['darker', 1.6]]
},
labelsSkipRadius: 8,
isInteractive: true,
tooltip: CirclePackingTooltip,
animate: true,
motionConfig: 'gentle',
role: 'img',
pixelRatio: typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) !== null && _window$devicePixelRa !== void 0 ? _window$devicePixelRa : 1 : 1
};
var interpolateRadius = function interpolateRadius(radiusValue) {
return web.to([radiusValue], function (radius) {
return Math.max(0, radius);
});
};
var getTransitionPhases = function getTransitionPhases(getBorderColor) {
return {
enter: function enter(node) {
return {
x: node.x,
y: node.y,
radius: 0,
color: node.color,
borderColor: getBorderColor(node),
opacity: 0
};
},
update: function update(node) {
return {
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderColor: getBorderColor(node),
opacity: 1
};
},
leave: function leave(node) {
return {
x: node.x,
y: node.y,
radius: 0,
color: node.color,
borderColor: getBorderColor(node),
opacity: 0
};
}
};
};
var Circles = function Circles(_ref) {
var nodes = _ref.nodes,
borderWidth = _ref.borderWidth,
borderColor = _ref.borderColor,
component = _ref.component,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
tooltip$1 = _ref.tooltip;
var _useTooltip = tooltip.useTooltip(),
showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
hideTooltip = _useTooltip.hideTooltip;
var handleMouseEnter = React.useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
showTooltipFromEvent(React.createElement(tooltip$1, node), event);
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(node, event);
};
}, [isInteractive, showTooltipFromEvent, tooltip$1, onMouseEnter]);
var handleMouseMove = React.useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
showTooltipFromEvent(React.createElement(tooltip$1, node), event);
onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(node, event);
};
}, [isInteractive, showTooltipFromEvent, tooltip$1, onMouseMove]);
var handleMouseLeave = React.useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
hideTooltip();
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(node, event);
};
}, [isInteractive, hideTooltip, onMouseLeave]);
var handleClick = React.useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
onClick === null || onClick === void 0 ? void 0 : onClick(node, event);
};
}, [isInteractive, onClick]);
var _useMotionConfig = core.useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var theme = core.useTheme();
var getBorderColor = colors.useInheritedColor(borderColor, theme);
var transitionPhases = React.useMemo(function () {
return getTransitionPhases(getBorderColor);
}, [getBorderColor]);
var transition = web.useTransition(nodes, {
keys: function keys(node) {
return node.id;
},
initial: transitionPhases.update,
from: transitionPhases.enter,
enter: transitionPhases.update,
update: transitionPhases.update,
leave: transitionPhases.leave,
config: springConfig,
immediate: !animate
});
return jsxRuntime.jsx(jsxRuntime.Fragment, {
children: transition(function (transitionProps, node) {
return React.createElement(component, {
key: node.id,
node: node,
style: _objectSpread2(_objectSpread2({}, transitionProps), {}, {
radius: interpolateRadius(transitionProps.radius),
borderWidth: borderWidth
}),
onMouseEnter: handleMouseEnter,
onMouseMove: handleMouseMove,
onMouseLeave: handleMouseLeave,
onClick: handleClick
});
})
});
};
var CircleSvg = function CircleSvg(_ref) {
var node = _ref.node,
style = _ref.style,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick;
var handlers = useNodeMouseHandlers(node, {
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick
});
return jsxRuntime.jsx(web.animated.circle, {
cx: style.x,
cy: style.y,
r: style.radius,
fill: node.fill || style.color,
stroke: style.borderColor,
strokeWidth: style.borderWidth,
opacity: style.opacity,
onMouseEnter: handlers.onMouseEnter,
onMouseMove: handlers.onMouseMove,
onMouseLeave: handlers.onMouseLeave,
onClick: handlers.onClick
}, node.id);
};
var getTransitionPhases$1 = function getTransitionPhases() {
return {
enter: function enter(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 0
};
},
update: function update(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 1
};
},
leave: function leave(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 0
};
}
};
};
var Labels = function Labels(_ref) {
var nodes = _ref.nodes,
label = _ref.label,
filter = _ref.filter,
skipRadius = _ref.skipRadius,
textColor = _ref.textColor,
component = _ref.component;
var _useMotionConfig = core.useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var labels = useCirclePackingLabels({
nodes: nodes,
label: label,
filter: filter,
skipRadius: skipRadius,
textColor: textColor
});
var transitionPhases = React.useMemo(function () {
return getTransitionPhases$1();
}, []);
var transition = web.useTransition(labels, {
keys: function keys(label) {
return label.node.id;
},
initial: transitionPhases.update,
from: transitionPhases.enter,
enter: transitionPhases.update,
update: transitionPhases.update,
leave: transitionPhases.leave,
config: springConfig,
immediate: !animate
});
return jsxRuntime.jsx(jsxRuntime.Fragment, {
children: transition(function (transitionProps, label) {
return React.createElement(component, {
key: label.node.id,
label: label.label,
style: _objectSpread2(_objectSpread2({}, transitionProps), {}, {
radius: interpolateRadius(transitionProps.radius)
}),
node: label.node
});
})
});
};
var LabelSvg = function LabelSvg(_ref) {
var node = _ref.node,
label = _ref.label,
style = _ref.style;
var theme = core.useTheme();
return jsxRuntime.jsx(web.animated.text, {
x: style.x,
y: style.y,
textAnchor: "middle",
dominantBaseline: "central",
style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
fill: style.textColor,
opacity: style.opacity,
pointerEvents: 'none'
}),
children: label
}, node.id);
};
var InnerCirclePacking = function InnerCirclePacking(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$circleComponent = _ref.circleComponent,
circleComponent = _ref$circleComponent === void 0 ? CircleSvg : _ref$circleComponent,
_ref$defs = _ref.defs,
defs = _ref$defs === void 0 ? defaultProps.defs : _ref$defs,
_ref$fill = _ref.fill,
fill = _ref$fill === void 0 ? defaultProps.fill : _ref$fill,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
_ref$labelComponent = _ref.labelComponent,
labelComponent = _ref$labelComponent === void 0 ? LabelSvg : _ref$labelComponent,
_ref$layers = _ref.layers,
layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role;
var _useDimensions = core.useDimensions(width, height, partialMargin),
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight,
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var boundDefs = React.useMemo(function () {
return core.bindDefs(defs, zoomedNodes, fill, {
targetKey: 'fill'
});
}, [defs, zoomedNodes, fill]);
var layerById = {
circles: null,
labels: null
};
if (layers.includes('circles')) {
layerById.circles = jsxRuntime.jsx(Circles, {
nodes: zoomedNodes,
borderWidth: borderWidth,
borderColor: borderColor,
isInteractive: isInteractive,
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick,
component: circleComponent,
tooltip: tooltip
}, "circles");
}
if (enableLabels && layers.includes('labels')) {
layerById.labels = jsxRuntime.jsx(Labels, {
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor,
component: labelComponent
}, "labels");
}
var layerContext = useCirclePackingLayerContext({
nodes: nodes
});
return jsxRuntime.jsx(core.SvgWrapper, {
width: outerWidth,
height: outerHeight,
margin: margin,
defs: boundDefs,
role: role,
children: layers.map(function (layer, i) {
if (layerById[layer] !== undefined) {
return layerById[layer];
}
if (typeof layer === 'function') {
return jsxRuntime.jsx(React.Fragment, {
children: React.createElement(layer, layerContext)
}, i);
}
return null;
})
});
};
var CirclePacking = function CirclePacking(_ref2) {
var theme = _ref2.theme,
_ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
_ref2$animate = _ref2.animate,
animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate,
_ref2$motionConfig = _ref2.motionConfig,
motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig,
otherProps = _objectWithoutProperties(_ref2, ["theme", "isInteractive", "animate", "motionConfig"]);
return jsxRuntime.jsx(core.Container, {
isInteractive: isInteractive,
animate: animate,
motionConfig: motionConfig,
theme: theme,
children: jsxRuntime.jsx(InnerCirclePacking, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePacking = function ResponsiveCirclePacking(props) {
return jsxRuntime.jsx(core.ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsxRuntime.jsx(CirclePacking, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
var interpolatePosition = function interpolatePosition(positionValue, radiusValue) {
return web.to([positionValue, radiusValue], function (position, radius) {
return position - radius;
});
};
var interpolateSize = function interpolateSize(radiusValue) {
return web.to([radiusValue], function (radius) {
return radius * 2;
});
};
var interpolateBorderWidth = function interpolateBorderWidth(borderWidth, radiusValue) {
return web.to([radiusValue], function (radius) {
return Math.min(borderWidth, radius);
});
};
var CircleHtml = function CircleHtml(_ref) {
var node = _ref.node,
style = _ref.style,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick;
var size = interpolateSize(style.radius);
var handlers = useNodeMouseHandlers(node, {
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick
});
return jsxRuntime.jsx(web.animated.div, {
style: {
position: 'absolute',
top: interpolatePosition(style.y, style.radius),
left: interpolatePosition(style.x, style.radius),
height: size,
width: size,
borderRadius: style.radius,
backgroundColor: style.color,
borderWidth: interpolateBorderWidth(style.borderWidth, style.radius),
borderStyle: 'solid',
borderColor: style.borderColor,
boxSizing: 'border-box'
},
onMouseEnter: handlers.onMouseEnter,
onMouseMove: handlers.onMouseMove,
onMouseLeave: handlers.onMouseLeave,
onClick: handlers.onClick
});
};
var LabelHtml = function LabelHtml(_ref) {
var node = _ref.node,
label = _ref.label,
style = _ref.style;
var theme = core.useTheme();
var size = interpolateSize(style.radius);
return jsxRuntime.jsx(web.animated.div, {
style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
position: 'absolute',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
top: interpolatePosition(style.y, style.radius),
left: interpolatePosition(style.x, style.radius),
width: size,
height: size,
color: style.textColor,
opacity: style.opacity,
pointerEvents: 'none'
}),
children: label
}, node.id);
};
var InnerCirclePackingHtml = function InnerCirclePackingHtml(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$circleComponent = _ref.circleComponent,
circleComponent = _ref$circleComponent === void 0 ? CircleHtml : _ref$circleComponent,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
_ref$labelComponent = _ref.labelComponent,
labelComponent = _ref$labelComponent === void 0 ? LabelHtml : _ref$labelComponent,
_ref$layers = _ref.layers,
layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role;
var _useDimensions = core.useDimensions(width, height, partialMargin),
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight,
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var layerById = {
circles: null,
labels: null
};
if (layers.includes('circles')) {
layerById.circles = jsxRuntime.jsx(Circles, {
nodes: zoomedNodes,
borderWidth: borderWidth,
borderColor: borderColor,
isInteractive: isInteractive,
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick,
component: circleComponent,
tooltip: tooltip
}, "circles");
}
if (enableLabels && layers.includes('labels')) {
layerById.labels = jsxRuntime.jsx(Labels, {
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor,
component: labelComponent
}, "labels");
}
var layerContext = useCirclePackingLayerContext({
nodes: nodes
});
return jsxRuntime.jsx("div", {
role: role,
style: {
position: 'relative',
overflow: 'hidden',
width: outerWidth,
height: outerHeight
},
children: jsxRuntime.jsx("div", {
style: {
position: 'absolute',
top: margin.top,
left: margin.left
},
children: layers.map(function (layer, i) {
if (layerById[layer] !== undefined) {
return layerById[layer];
}
if (typeof layer === 'function') {
return jsxRuntime.jsx(React.Fragment, {
children: React.createElement(layer, layerContext)
}, i);
}
return null;
})
})
});
};
var CirclePackingHtml = function CirclePackingHtml(_ref2) {
var theme = _ref2.theme,
_ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
_ref2$animate = _ref2.animate,
animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate,
_ref2$motionConfig = _ref2.motionConfig,
motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig,
otherProps = _objectWithoutProperties(_ref2, ["theme", "isInteractive", "animate", "motionConfig"]);
return jsxRuntime.jsx(core.Container, {
isInteractive: isInteractive,
animate: animate,
motionConfig: motionConfig,
theme: theme,
children: jsxRuntime.jsx(InnerCirclePackingHtml, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePackingHtml = function ResponsiveCirclePackingHtml(props) {
return jsxRuntime.jsx(core.ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsxRuntime.jsx(CirclePackingHtml, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
var InnerCirclePackingCanvas = function InnerCirclePackingCanvas(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors$1 = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
isInteractive = _ref.isInteractive,
onMouseMove = _ref.onMouseMove,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip$1 = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role,
_ref$pixelRatio = _ref.pixelRatio,
pixelRatio = _ref$pixelRatio === void 0 ? defaultProps.pixelRatio : _ref$pixelRatio;
var canvasEl = React.useRef(null);
var theme = core.useTheme();
var _useDimensions = core.useDimensions(width, height, partialMargin),
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight,
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors$1,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var labels = useCirclePackingLabels({
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor
});
var getBorderColor = colors.useInheritedColor(borderColor, theme);
React.useEffect(function () {
if (!canvasEl.current) return;
canvasEl.current.width = outerWidth * pixelRatio;
canvasEl.current.height = outerHeight * pixelRatio;
var ctx = canvasEl.current.getContext('2d');
ctx.scale(pixelRatio, pixelRatio);
ctx.fillStyle = theme.background;
ctx.fillRect(0, 0, outerWidth, outerHeight);
ctx.save();
ctx.translate(margin.left, margin.top);
zoomedNodes.forEach(function (node) {
if (borderWidth > 0) {
ctx.strokeStyle = getBorderColor(node);
ctx.lineWidth = borderWidth;
}
ctx.beginPath();
ctx.arc(node.x, node.y, node.radius, 0, 2 * Math.PI);
ctx.fillStyle = node.color;
ctx.fill();
if (borderWidth > 0) {
ctx.stroke();
}
});
if (enableLabels) {
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.node.x, label.node.y);
});
}
}, [canvasEl, innerWidth, innerHeight, outerWidth, outerHeight, margin.top, margin.left, theme, pixelRatio, zoomedNodes, enableLabels, labels, borderWidth, getBorderColor]);
var getNodeFromMouseEvent = useMouseCircleDetection({
nodes: zoomedNodes,
canvasEl: canvasEl,
margin: margin
});
var _useTooltip = tooltip.useTooltip(),
showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
hideTooltip = _useTooltip.hideTooltip;
var handleMouseHover = React.useCallback(function (event) {
var node = getNodeFromMouseEvent(event);
if (node) {
onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(node, event);
showTooltipFromEvent(React.createElement(tooltip$1, node), event);
} else {
hideTooltip();
}
}, [getNodeFromMouseEvent, showTooltipFromEvent, tooltip$1, hideTooltip]);
var handleMouseLeave = React.useCallback(function () {
hideTooltip();
}, [hideTooltip]);
var handleClick = React.useCallback(function (event) {
if (!onClick) return;
var node = getNodeFromMouseEvent(event);
if (node) {
onClick(node, event);
}
}, [getNodeFromMouseEvent, onClick]);
return jsxRuntime.jsx("canvas", {
ref: canvasEl,
width: outerWidth * pixelRatio,
height: outerHeight * pixelRatio,
style: {
width: outerWidth,
height: outerHeight,
cursor: isInteractive ? 'auto' : 'normal'
},
role: role,
onMouseEnter: isInteractive ? handleMouseHover : undefined,
onMouseMove: isInteractive ? handleMouseHover : undefined,
onMouseLeave: isInteractive ? handleMouseLeave : undefined,
onClick: isInteractive ? handleClick : undefined
});
};
var CirclePackingCanvas = function CirclePackingCanvas(_ref2) {
var _ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
theme = _ref2.theme,
otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "theme"]);
return jsxRuntime.jsx(core.Container, {
isInteractive: isInteractive,
theme: theme,
children: jsxRuntime.jsx(InnerCirclePackingCanvas, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePackingCanvas = function ResponsiveCirclePackingCanvas(props) {
return jsxRuntime.jsx(core.ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsxRuntime.jsx(CirclePackingCanvas, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
exports.CirclePacking = CirclePacking;
exports.CirclePackingCanvas = CirclePackingCanvas;
exports.CirclePackingHtml = CirclePackingHtml;
exports.InnerCirclePackingHtml = InnerCirclePackingHtml;
exports.ResponsiveCirclePacking = ResponsiveCirclePacking;
exports.ResponsiveCirclePackingCanvas = ResponsiveCirclePackingCanvas;
exports.ResponsiveCirclePackingHtml = ResponsiveCirclePackingHtml;
exports.defaultProps = defaultProps;
exports.useCirclePacking = useCirclePacking;
exports.useCirclePackingLabels = useCirclePackingLabels;
exports.useCirclePackingLayerContext = useCirclePackingLayerContext;
exports.useCirclePackingZoom = useCirclePackingZoom;
exports.useMouseCircleDetection = useMouseCircleDetection;
exports.useNodeMouseHandlers = useNodeMouseHandlers;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),o=require("@nivo/core"),r=require("d3-hierarchy"),t=require("lodash/cloneDeep"),i=require("lodash/sortBy"),n=require("@nivo/colors"),l=require("@nivo/tooltip"),a=require("react/jsx-runtime"),u=require("@react-spring/web");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var o=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),o.default=e,Object.freeze(o)}var c=s(e),v=d(t),f=d(i);function h(){return h=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},h.apply(this,arguments)}function p(e,o){if(null==e)return{};var r,t,i={},n=Object.keys(e);for(t=0;t<n.length;t++)r=n[t],o.indexOf(r)>=0||(i[r]=e[r]);return i}var m,C=function(e){var t,i=e.data,l=e.id,a=e.value,u=e.valueFormat,d=e.width,s=e.height,c=e.padding,h=e.leavesOnly,p=e.colors,m=e.colorBy,C=e.inheritColorFromParent,b=e.childColor,x=o.usePropertyAccessor(l),y=o.usePropertyAccessor(a),g=o.useValueFormatter(u),M=n.useOrdinalColorScale(p,m),k=o.useTheme(),j=n.useInheritedColor(b,k),E=v.default(i),P=r.hierarchy(E).sum(y),I=r.pack().size([d,s]).padding(c)(P),w=h?I.leaves():I.descendants(),F=f.default(w,"depth"),W=null!=(t=P.value)?t:0,R=F.reduce((function(e,o){var r,t=x(o.data),i=o.value,n=100*i/W,l=o.ancestors().map((function(e){return x(e.data)}));o.parent&&(r=e.find((function(e){return e.id===x(o.parent.data)})));var a={id:t,path:l,value:i,percentage:n,formattedValue:u?g(i):n.toFixed(2)+"%",x:o.x,y:o.y,radius:o.r,color:"",data:o.data,depth:o.depth,height:o.height};return C&&r&&a.depth>1?a.color=j(r):a.color=M(a),[].concat(e,[a])}),[]);return R},b=function(o,r,t,i){return e.useMemo((function(){if(!r)return o;var e=o.find((function(e){return e.id===r}));if(!e)return o;var n=Math.min(t,i)/(2*e.radius),l=t/2-e.x*n,a=i/2-e.y*n;return o.map((function(e){return h({},e,{x:e.x*n+l,y:e.y*n+a,radius:e.radius*n})}))}),[o,r,t,i])},x=function(r){var t=r.nodes,i=r.label,l=r.filter,a=r.skipRadius,u=r.textColor,d=o.usePropertyAccessor(i),s=o.useTheme(),c=n.useInheritedColor(u,s),v=e.useMemo((function(){return t.filter((function(e){return e.radius>=a})).map((function(e){return{label:d(e),textColor:c(e),node:e}}))}),[t,a,d,c]);return e.useMemo((function(){return l?v.filter(l):v}),[v,l])},y=function(o,r){var t=r.onMouseEnter,i=r.onMouseMove,n=r.onMouseLeave,l=r.onClick;return e.useMemo((function(){return{onMouseEnter:t?function(e){t(o,e)}:void 0,onMouseMove:i?function(e){i(o,e)}:void 0,onMouseLeave:n?function(e){n(o,e)}:void 0,onClick:l?function(e){l(o,e)}:void 0}}),[o,t,i,n,l])},g=function(r){var t=r.nodes,i=r.canvasEl,n=r.margin,l=e.useMemo((function(){return f.default(t,"height")}),[t]);return e.useCallback((function(e){if(!i.current)return null;var r=o.getRelativeCursor(i.current,e),t=r[0],a=r[1];return l.find((function(e){return o.getDistance(e.x,e.y,t-n.left,a-n.top)<=e.radius}))}),[i,n,l])},M=function(o){var r=o.nodes;return e.useMemo((function(){return{nodes:r}}),[r])},k={id:"id",value:"value",padding:0,leavesOnly:!1,layers:["circles","labels"],colors:{scheme:"nivo"},colorBy:"depth",inheritColorFromParent:!1,childColor:{from:"color",modifiers:[["darker",.3]]},borderWidth:0,borderColor:{from:"color",modifiers:[["darker",.3]]},defs:[],fill:[],enableLabels:!1,label:"id",labelTextColor:{from:"color",modifiers:[["darker",1.6]]},labelsSkipRadius:8,isInteractive:!0,tooltip:function(e){var o=e.id,r=e.formattedValue,t=e.color;return a.jsx(l.BasicTooltip,{id:o,value:r,enableChip:!0,color:t})},animate:!0,motionConfig:"gentle",role:"img",pixelRatio:"undefined"!=typeof window&&null!=(m=window.devicePixelRatio)?m:1},j=function(e){return u.to([e],(function(e){return Math.max(0,e)}))},E=function(r){var t=r.nodes,i=r.borderWidth,d=r.borderColor,s=r.component,v=r.isInteractive,f=r.onMouseEnter,p=r.onMouseMove,m=r.onMouseLeave,C=r.onClick,b=r.tooltip,x=l.useTooltip(),y=x.showTooltipFromEvent,g=x.hideTooltip,M=e.useMemo((function(){if(v)return function(o,r){y(e.createElement(b,o),r),null==f||f(o,r)}}),[v,y,b,f]),k=e.useMemo((function(){if(v)return function(o,r){y(e.createElement(b,o),r),null==p||p(o,r)}}),[v,y,b,p]),E=e.useMemo((function(){if(v)return function(e,o){g(),null==m||m(e,o)}}),[v,g,m]),P=e.useMemo((function(){if(v)return function(e,o){null==C||C(e,o)}}),[v,C]),I=o.useMotionConfig(),w=I.animate,F=I.config,W=o.useTheme(),R=n.useInheritedColor(d,W),L=e.useMemo((function(){return function(e){return{enter:function(o){return{x:o.x,y:o.y,radius:0,color:o.color,borderColor:e(o),opacity:0}},update:function(o){return{x:o.x,y:o.y,radius:o.radius,color:o.color,borderColor:e(o),opacity:1}},leave:function(o){return{x:o.x,y:o.y,radius:0,color:o.color,borderColor:e(o),opacity:0}}}}(R)}),[R]),O=u.useTransition(t,{keys:function(e){return e.id},initial:L.update,from:L.enter,enter:L.update,update:L.update,leave:L.leave,config:F,immediate:!w});return a.jsx(a.Fragment,{children:O((function(e,o){return c.createElement(s,{key:o.id,node:o,style:h({},e,{radius:j(e.radius),borderWidth:i}),onMouseEnter:M,onMouseMove:k,onMouseLeave:E,onClick:P})}))})},P=function(e){var o=e.node,r=e.style,t=e.onMouseEnter,i=e.onMouseMove,n=e.onMouseLeave,l=e.onClick,d=y(o,{onMouseEnter:t,onMouseMove:i,onMouseLeave:n,onClick:l});return a.jsx(u.animated.circle,{cx:r.x,cy:r.y,r:r.radius,fill:o.fill||r.color,stroke:r.borderColor,strokeWidth:r.borderWidth,opacity:r.opacity,onMouseEnter:d.onMouseEnter,onMouseMove:d.onMouseMove,onMouseLeave:d.onMouseLeave,onClick:d.onClick},o.id)},I=function(r){var t=r.nodes,i=r.label,n=r.filter,l=r.skipRadius,d=r.textColor,s=r.component,c=o.useMotionConfig(),v=c.animate,f=c.config,p=x({nodes:t,label:i,filter:n,skipRadius:l,textColor:d}),m=e.useMemo((function(){return{enter:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:0}},update:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:1}},leave:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:0}}}}),[]),C=u.useTransition(p,{keys:function(e){return e.node.id},initial:m.update,from:m.enter,enter:m.update,update:m.update,leave:m.leave,config:f,immediate:!v});return a.jsx(a.Fragment,{children:C((function(o,r){return e.createElement(s,{key:r.node.id,label:r.label,style:h({},o,{radius:j(o.radius)}),node:r.node})}))})},w=function(e){var r=e.node,t=e.label,i=e.style,n=o.useTheme();return a.jsx(u.animated.text,{x:i.x,y:i.y,textAnchor:"middle",dominantBaseline:"central",style:h({},n.labels.text,{fill:i.textColor,opacity:i.opacity,pointerEvents:"none"}),children:t},r.id)},F=["theme","isInteractive","animate","motionConfig","renderWrapper"],W=function(r){var t=r.data,i=r.id,n=void 0===i?k.id:i,l=r.value,u=void 0===l?k.value:l,d=r.valueFormat,s=r.width,c=r.height,v=r.margin,f=r.padding,h=void 0===f?k.padding:f,p=r.leavesOnly,m=void 0===p?k.leavesOnly:p,x=r.colors,y=void 0===x?k.colors:x,g=r.colorBy,j=void 0===g?k.colorBy:g,F=r.inheritColorFromParent,W=void 0===F?k.inheritColorFromParent:F,R=r.childColor,L=void 0===R?k.childColor:R,O=r.borderWidth,T=void 0===O?k.borderWidth:O,S=r.borderColor,B=void 0===S?k.borderColor:S,H=r.circleComponent,q=void 0===H?P:H,D=r.defs,z=void 0===D?k.defs:D,A=r.fill,_=void 0===A?k.fill:A,V=r.enableLabels,K=void 0===V?k.enableLabels:V,N=r.label,Z=void 0===N?k.label:N,G=r.labelsFilter,J=r.labelsSkipRadius,Q=void 0===J?k.labelsSkipRadius:J,U=r.labelTextColor,X=void 0===U?k.labelTextColor:U,Y=r.labelComponent,$=void 0===Y?w:Y,ee=r.layers,oe=void 0===ee?k.layers:ee,re=r.isInteractive,te=r.onMouseEnter,ie=r.onMouseMove,ne=r.onMouseLeave,le=r.onClick,ae=r.tooltip,ue=void 0===ae?k.tooltip:ae,de=r.zoomedId,se=r.role,ce=void 0===se?k.role:se,ve=o.useDimensions(s,c,v),fe=ve.outerWidth,he=ve.outerHeight,pe=ve.margin,me=ve.innerWidth,Ce=ve.innerHeight,be=C({data:t,id:n,value:u,valueFormat:d,width:me,height:Ce,padding:h,leavesOnly:m,colors:y,colorBy:j,inheritColorFromParent:W,childColor:L}),xe=b(be,de,me,Ce),ye=e.useMemo((function(){return o.bindDefs(z,xe,_,{targetKey:"fill"})}),[z,xe,_]),ge={circles:null,labels:null};oe.includes("circles")&&(ge.circles=a.jsx(E,{nodes:xe,borderWidth:T,borderColor:B,isInteractive:re,onMouseEnter:te,onMouseMove:ie,onMouseLeave:ne,onClick:le,component:q,tooltip:ue},"circles")),K&&oe.includes("labels")&&(ge.labels=a.jsx(I,{nodes:xe,label:Z,filter:G,skipRadius:Q,textColor:X,component:$},"labels"));var Me=M({nodes:be});return a.jsx(o.SvgWrapper,{width:fe,height:he,margin:pe,defs:ye,role:ce,children:oe.map((function(o,r){return void 0!==ge[o]?ge[o]:"function"==typeof o?a.jsx(e.Fragment,{children:e.createElement(o,Me)},r):null}))})},R=function(e){var r=e.theme,t=e.isInteractive,i=void 0===t?k.isInteractive:t,n=e.animate,l=void 0===n?k.animate:n,u=e.motionConfig,d=void 0===u?k.motionConfig:u,s=e.renderWrapper,c=p(e,F);return a.jsx(o.Container,{isInteractive:i,animate:l,motionConfig:d,renderWrapper:s,theme:r,children:a.jsx(W,h({isInteractive:i},c))})},L=function(e,o){return u.to([e,o],(function(e,o){return e-o}))},O=function(e){return u.to([e],(function(e){return 2*e}))},T=function(e){var o,r,t=e.node,i=e.style,n=e.onMouseEnter,l=e.onMouseMove,d=e.onMouseLeave,s=e.onClick,c=O(i.radius),v=y(t,{onMouseEnter:n,onMouseMove:l,onMouseLeave:d,onClick:s});return a.jsx(u.animated.div,{style:{position:"absolute",top:L(i.y,i.radius),left:L(i.x,i.radius),height:c,width:c,borderRadius:i.radius,backgroundColor:i.color,borderWidth:(o=i.borderWidth,r=i.radius,u.to([r],(function(e){return Math.min(o,e)}))),borderStyle:"solid",borderColor:i.borderColor,boxSizing:"border-box"},onMouseEnter:v.onMouseEnter,onMouseMove:v.onMouseMove,onMouseLeave:v.onMouseLeave,onClick:v.onClick})},S=function(e){var r=e.node,t=e.label,i=e.style,n=o.useTheme(),l=O(i.radius);return a.jsx(u.animated.div,{style:h({},n.labels.text,{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",top:L(i.y,i.radius),left:L(i.x,i.radius),width:l,height:l,color:i.textColor,opacity:i.opacity,pointerEvents:"none"}),children:t},r.id)},B=["theme","isInteractive","animate","motionConfig"],H=function(r){var t=r.data,i=r.id,n=void 0===i?k.id:i,l=r.value,u=void 0===l?k.value:l,d=r.valueFormat,s=r.width,c=r.height,v=r.margin,f=r.padding,h=void 0===f?k.padding:f,p=r.leavesOnly,m=void 0===p?k.leavesOnly:p,x=r.colors,y=void 0===x?k.colors:x,g=r.colorBy,j=void 0===g?k.colorBy:g,P=r.inheritColorFromParent,w=void 0===P?k.inheritColorFromParent:P,F=r.childColor,W=void 0===F?k.childColor:F,R=r.borderWidth,L=void 0===R?k.borderWidth:R,O=r.borderColor,B=void 0===O?k.borderColor:O,H=r.circleComponent,q=void 0===H?T:H,D=r.enableLabels,z=void 0===D?k.enableLabels:D,A=r.label,_=void 0===A?k.label:A,V=r.labelsFilter,K=r.labelsSkipRadius,N=void 0===K?k.labelsSkipRadius:K,Z=r.labelTextColor,G=void 0===Z?k.labelTextColor:Z,J=r.labelComponent,Q=void 0===J?S:J,U=r.layers,X=void 0===U?k.layers:U,Y=r.isInteractive,$=r.onMouseEnter,ee=r.onMouseMove,oe=r.onMouseLeave,re=r.onClick,te=r.tooltip,ie=void 0===te?k.tooltip:te,ne=r.zoomedId,le=r.role,ae=void 0===le?k.role:le,ue=o.useDimensions(s,c,v),de=ue.outerWidth,se=ue.outerHeight,ce=ue.margin,ve=ue.innerWidth,fe=ue.innerHeight,he=C({data:t,id:n,value:u,valueFormat:d,width:ve,height:fe,padding:h,leavesOnly:m,colors:y,colorBy:j,inheritColorFromParent:w,childColor:W}),pe=b(he,ne,ve,fe),me={circles:null,labels:null};X.includes("circles")&&(me.circles=a.jsx(E,{nodes:pe,borderWidth:L,borderColor:B,isInteractive:Y,onMouseEnter:$,onMouseMove:ee,onMouseLeave:oe,onClick:re,component:q,tooltip:ie},"circles")),z&&X.includes("labels")&&(me.labels=a.jsx(I,{nodes:pe,label:_,filter:V,skipRadius:N,textColor:G,component:Q},"labels"));var Ce=M({nodes:he});return a.jsx("div",{role:ae,style:{position:"relative",overflow:"hidden",width:de,height:se},children:a.jsx("div",{style:{position:"absolute",top:ce.top,left:ce.left},children:X.map((function(o,r){return void 0!==me[o]?me[o]:"function"==typeof o?a.jsx(e.Fragment,{children:e.createElement(o,Ce)},r):null}))})})},q=function(e){var r=e.theme,t=e.isInteractive,i=void 0===t?k.isInteractive:t,n=e.animate,l=void 0===n?k.animate:n,u=e.motionConfig,d=void 0===u?k.motionConfig:u,s=p(e,B);return a.jsx(o.Container,{isInteractive:i,animate:l,motionConfig:d,theme:r,children:a.jsx(H,h({isInteractive:i},s))})},D=["isInteractive","theme"],z=function(r){var t=r.data,i=r.id,u=void 0===i?k.id:i,d=r.value,s=void 0===d?k.value:d,c=r.valueFormat,v=r.width,f=r.height,h=r.margin,p=r.padding,m=void 0===p?k.padding:p,y=r.leavesOnly,M=void 0===y?k.leavesOnly:y,j=r.colors,E=void 0===j?k.colors:j,P=r.colorBy,I=void 0===P?k.colorBy:P,w=r.inheritColorFromParent,F=void 0===w?k.inheritColorFromParent:w,W=r.childColor,R=void 0===W?k.childColor:W,L=r.borderWidth,O=void 0===L?k.borderWidth:L,T=r.borderColor,S=void 0===T?k.borderColor:T,B=r.enableLabels,H=void 0===B?k.enableLabels:B,q=r.label,D=void 0===q?k.label:q,z=r.labelsFilter,A=r.labelsSkipRadius,_=void 0===A?k.labelsSkipRadius:A,V=r.labelTextColor,K=void 0===V?k.labelTextColor:V,N=r.isInteractive,Z=r.onMouseMove,G=r.onClick,J=r.tooltip,Q=void 0===J?k.tooltip:J,U=r.zoomedId,X=r.role,Y=void 0===X?k.role:X,$=r.pixelRatio,ee=void 0===$?k.pixelRatio:$,oe=e.useRef(null),re=o.useTheme(),te=o.useDimensions(v,f,h),ie=te.margin,ne=te.innerWidth,le=te.innerHeight,ae=te.outerWidth,ue=te.outerHeight,de=C({data:t,id:u,value:s,valueFormat:c,width:ne,height:le,padding:m,leavesOnly:M,colors:E,colorBy:I,inheritColorFromParent:F,childColor:R}),se=b(de,U,ne,le),ce=x({nodes:se,label:D,filter:z,skipRadius:_,textColor:K}),ve=n.useInheritedColor(S,re);e.useEffect((function(){if(oe.current){oe.current.width=ae*ee,oe.current.height=ue*ee;var e=oe.current.getContext("2d");e.scale(ee,ee),e.fillStyle=re.background,e.fillRect(0,0,ae,ue),e.save(),e.translate(ie.left,ie.top),se.forEach((function(o){O>0&&(e.strokeStyle=ve(o),e.lineWidth=O),e.beginPath(),e.arc(o.x,o.y,o.radius,0,2*Math.PI),e.fillStyle=o.color,e.fill(),O>0&&e.stroke()})),H&&(e.textAlign="center",e.textBaseline="middle",e.font=re.labels.text.fontSize+"px "+re.labels.text.fontFamily,ce.forEach((function(o){e.fillStyle=o.textColor,e.fillText(""+o.label,o.node.x,o.node.y)})))}}),[oe,ne,le,ae,ue,ie.top,ie.left,re,ee,se,H,ce,O,ve]);var fe=g({nodes:se,canvasEl:oe,margin:ie}),he=l.useTooltip(),pe=he.showTooltipFromEvent,me=he.hideTooltip,Ce=e.useCallback((function(o){var r=fe(o);r?(null==Z||Z(r,o),pe(e.createElement(Q,r),o)):me()}),[fe,pe,Q,me]),be=e.useCallback((function(){me()}),[me]),xe=e.useCallback((function(e){if(G){var o=fe(e);o&&G(o,e)}}),[fe,G]);return a.jsx("canvas",{ref:oe,width:ae*ee,height:ue*ee,style:{width:ae,height:ue,cursor:N?"auto":"normal"},role:Y,onMouseEnter:N?Ce:void 0,onMouseMove:N?Ce:void 0,onMouseLeave:N?be:void 0,onClick:N?xe:void 0})},A=function(e){var r=e.isInteractive,t=void 0===r?k.isInteractive:r,i=e.theme,n=p(e,D);return a.jsx(o.Container,{isInteractive:t,theme:i,children:a.jsx(z,h({isInteractive:t},n))})};exports.CirclePacking=R,exports.CirclePackingCanvas=A,exports.CirclePackingHtml=q,exports.InnerCirclePackingHtml=H,exports.ResponsiveCirclePacking=function(e){return a.jsx(o.ResponsiveWrapper,{children:function(o){var r=o.width,t=o.height;return a.jsx(R,h({width:r,height:t},e))}})},exports.ResponsiveCirclePackingCanvas=function(e){return a.jsx(o.ResponsiveWrapper,{children:function(o){var r=o.width,t=o.height;return a.jsx(A,h({width:r,height:t},e))}})},exports.ResponsiveCirclePackingHtml=function(e){return a.jsx(o.ResponsiveWrapper,{children:function(o){var r=o.width,t=o.height;return a.jsx(q,h({width:r,height:t},e))}})},exports.defaultProps=k,exports.useCirclePacking=C,exports.useCirclePackingLabels=x,exports.useCirclePackingLayerContext=M,exports.useCirclePackingZoom=b,exports.useMouseCircleDetection=g,exports.useNodeMouseHandlers=y;
//# sourceMappingURL=nivo-circle-packing.cjs.js.map

1228

dist/nivo-circle-packing.es.js

@@ -1,1228 +0,2 @@

import { useMemo, useCallback, createElement, Fragment as Fragment$1, useRef, useEffect } from 'react';
import { usePropertyAccessor, useValueFormatter, useTheme, getRelativeCursor, getDistance, useMotionConfig, Container, useDimensions, bindDefs, SvgWrapper, ResponsiveWrapper } from '@nivo/core';
import { hierarchy, pack } from 'd3-hierarchy';
import cloneDeep from 'lodash/cloneDeep';
import sortBy from 'lodash/sortBy';
import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors';
import { BasicTooltip, useTooltip } from '@nivo/tooltip';
import { jsx, Fragment } from 'react/jsx-runtime';
import { useTransition, to, animated } from '@react-spring/web';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
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 _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
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();
}
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 _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();
}
var useCirclePacking = function useCirclePacking(_ref) {
var _hierarchy$value;
var data = _ref.data,
id = _ref.id,
value = _ref.value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
padding = _ref.padding,
leavesOnly = _ref.leavesOnly,
colors = _ref.colors,
colorBy = _ref.colorBy,
inheritColorFromParent = _ref.inheritColorFromParent,
childColor = _ref.childColor;
var getId = usePropertyAccessor(id);
var getValue = usePropertyAccessor(value);
var formatValue = useValueFormatter(valueFormat);
var getColor = useOrdinalColorScale(colors, colorBy);
var theme = useTheme();
var getChildColor = useInheritedColor(childColor, theme);
var clonedData = cloneDeep(data);
var hierarchy$1 = hierarchy(clonedData).sum(getValue);
var pack$1 = pack().size([width, height]).padding(padding);
var packedData = pack$1(hierarchy$1);
var nodes = leavesOnly ? packedData.leaves() : packedData.descendants();
var sortedNodes = sortBy(nodes, 'depth');
var total = (_hierarchy$value = hierarchy$1.value) !== null && _hierarchy$value !== void 0 ? _hierarchy$value : 0;
var computedNodes = sortedNodes.reduce(function (acc, descendant) {
var id = getId(descendant.data);
var value = descendant.value;
var percentage = 100 * value / total;
var path = descendant.ancestors().map(function (ancestor) {
return getId(ancestor.data);
});
var parent;
if (descendant.parent) {
parent = acc.find(function (node) {
return node.id === getId(descendant.parent.data);
});
}
var normalizedNode = {
id: id,
path: path,
value: value,
percentage: percentage,
formattedValue: valueFormat ? formatValue(value) : "".concat(percentage.toFixed(2), "%"),
x: descendant.x,
y: descendant.y,
radius: descendant.r,
color: '',
data: descendant.data,
depth: descendant.depth,
height: descendant.height
};
if (inheritColorFromParent && parent && normalizedNode.depth > 1) {
normalizedNode.color = getChildColor(parent);
} else {
normalizedNode.color = getColor(normalizedNode);
}
return [].concat(_toConsumableArray(acc), [normalizedNode]);
}, []);
return computedNodes;
};
var useCirclePackingZoom = function useCirclePackingZoom(nodes, zoomedId, width, height) {
return useMemo(function () {
if (!zoomedId) return nodes;
var zoomedNode = nodes.find(function (_ref2) {
var id = _ref2.id;
return id === zoomedId;
});
if (!zoomedNode) return nodes;
var ratio = Math.min(width, height) / (zoomedNode.radius * 2);
var offsetX = width / 2 - zoomedNode.x * ratio;
var offsetY = height / 2 - zoomedNode.y * ratio;
return nodes.map(function (node) {
return _objectSpread2(_objectSpread2({}, node), {}, {
x: node.x * ratio + offsetX,
y: node.y * ratio + offsetY,
radius: node.radius * ratio
});
});
}, [nodes, zoomedId, width, height]);
};
var useCirclePackingLabels = function useCirclePackingLabels(_ref3) {
var nodes = _ref3.nodes,
label = _ref3.label,
filter = _ref3.filter,
skipRadius = _ref3.skipRadius,
textColor = _ref3.textColor;
var getLabel = usePropertyAccessor(label);
var theme = useTheme();
var getTextColor = useInheritedColor(textColor, theme);
var labels = useMemo(function () {
return nodes.filter(function (node) {
return node.radius >= skipRadius;
}).map(function (node) {
return {
label: getLabel(node),
textColor: getTextColor(node),
node: node
};
});
}, [nodes, skipRadius, getLabel, getTextColor]);
return useMemo(function () {
if (!filter) return labels;
return labels.filter(filter);
}, [labels, filter]);
};
var useNodeMouseHandlers = function useNodeMouseHandlers(node, _ref4) {
var onMouseEnter = _ref4.onMouseEnter,
onMouseMove = _ref4.onMouseMove,
onMouseLeave = _ref4.onMouseLeave,
onClick = _ref4.onClick;
return useMemo(function () {
return {
onMouseEnter: onMouseEnter ? function (event) {
onMouseEnter(node, event);
} : undefined,
onMouseMove: onMouseMove ? function (event) {
onMouseMove(node, event);
} : undefined,
onMouseLeave: onMouseLeave ? function (event) {
onMouseLeave(node, event);
} : undefined,
onClick: onClick ? function (event) {
onClick(node, event);
} : undefined
};
}, [node, onMouseEnter, onMouseMove, onMouseLeave, onClick]);
};
var useMouseCircleDetection = function useMouseCircleDetection(_ref5) {
var nodes = _ref5.nodes,
canvasEl = _ref5.canvasEl,
margin = _ref5.margin;
var sortedNodes = useMemo(function () {
return sortBy(nodes, 'height');
}, [nodes]);
return useCallback(function (event) {
if (!canvasEl.current) return null;
var _getRelativeCursor = getRelativeCursor(canvasEl.current, event),
_getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2),
x = _getRelativeCursor2[0],
y = _getRelativeCursor2[1];
return sortedNodes.find(function (node) {
var distanceFromNode = getDistance(node.x, node.y, x - margin.left, y - margin.top);
return distanceFromNode <= node.radius;
});
}, [canvasEl, margin, sortedNodes]);
};
var useCirclePackingLayerContext = function useCirclePackingLayerContext(_ref6) {
var nodes = _ref6.nodes;
return useMemo(function () {
return {
nodes: nodes
};
}, [nodes]);
};
var CirclePackingTooltip = function CirclePackingTooltip(_ref) {
var id = _ref.id,
formattedValue = _ref.formattedValue,
color = _ref.color;
return jsx(BasicTooltip, {
id: id,
value: formattedValue,
enableChip: true,
color: color
});
};
var _window$devicePixelRa;
var defaultProps = {
id: 'id',
value: 'value',
padding: 0,
leavesOnly: false,
layers: ['circles', 'labels'],
colors: {
scheme: 'nivo'
},
colorBy: 'depth',
inheritColorFromParent: false,
childColor: {
from: 'color',
modifiers: [['darker', 0.3]]
},
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [['darker', 0.3]]
},
defs: [],
fill: [],
enableLabels: false,
label: 'id',
labelTextColor: {
from: 'color',
modifiers: [['darker', 1.6]]
},
labelsSkipRadius: 8,
isInteractive: true,
tooltip: CirclePackingTooltip,
animate: true,
motionConfig: 'gentle',
role: 'img',
pixelRatio: typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) !== null && _window$devicePixelRa !== void 0 ? _window$devicePixelRa : 1 : 1
};
var interpolateRadius = function interpolateRadius(radiusValue) {
return to([radiusValue], function (radius) {
return Math.max(0, radius);
});
};
var getTransitionPhases = function getTransitionPhases(getBorderColor) {
return {
enter: function enter(node) {
return {
x: node.x,
y: node.y,
radius: 0,
color: node.color,
borderColor: getBorderColor(node),
opacity: 0
};
},
update: function update(node) {
return {
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderColor: getBorderColor(node),
opacity: 1
};
},
leave: function leave(node) {
return {
x: node.x,
y: node.y,
radius: 0,
color: node.color,
borderColor: getBorderColor(node),
opacity: 0
};
}
};
};
var Circles = function Circles(_ref) {
var nodes = _ref.nodes,
borderWidth = _ref.borderWidth,
borderColor = _ref.borderColor,
component = _ref.component,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
tooltip = _ref.tooltip;
var _useTooltip = useTooltip(),
showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
hideTooltip = _useTooltip.hideTooltip;
var handleMouseEnter = useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
showTooltipFromEvent(createElement(tooltip, node), event);
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(node, event);
};
}, [isInteractive, showTooltipFromEvent, tooltip, onMouseEnter]);
var handleMouseMove = useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
showTooltipFromEvent(createElement(tooltip, node), event);
onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(node, event);
};
}, [isInteractive, showTooltipFromEvent, tooltip, onMouseMove]);
var handleMouseLeave = useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
hideTooltip();
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(node, event);
};
}, [isInteractive, hideTooltip, onMouseLeave]);
var handleClick = useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
onClick === null || onClick === void 0 ? void 0 : onClick(node, event);
};
}, [isInteractive, onClick]);
var _useMotionConfig = useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var theme = useTheme();
var getBorderColor = useInheritedColor(borderColor, theme);
var transitionPhases = useMemo(function () {
return getTransitionPhases(getBorderColor);
}, [getBorderColor]);
var transition = useTransition(nodes, {
keys: function keys(node) {
return node.id;
},
initial: transitionPhases.update,
from: transitionPhases.enter,
enter: transitionPhases.update,
update: transitionPhases.update,
leave: transitionPhases.leave,
config: springConfig,
immediate: !animate
});
return jsx(Fragment, {
children: transition(function (transitionProps, node) {
return createElement(component, {
key: node.id,
node: node,
style: _objectSpread2(_objectSpread2({}, transitionProps), {}, {
radius: interpolateRadius(transitionProps.radius),
borderWidth: borderWidth
}),
onMouseEnter: handleMouseEnter,
onMouseMove: handleMouseMove,
onMouseLeave: handleMouseLeave,
onClick: handleClick
});
})
});
};
var CircleSvg = function CircleSvg(_ref) {
var node = _ref.node,
style = _ref.style,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick;
var handlers = useNodeMouseHandlers(node, {
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick
});
return jsx(animated.circle, {
cx: style.x,
cy: style.y,
r: style.radius,
fill: node.fill || style.color,
stroke: style.borderColor,
strokeWidth: style.borderWidth,
opacity: style.opacity,
onMouseEnter: handlers.onMouseEnter,
onMouseMove: handlers.onMouseMove,
onMouseLeave: handlers.onMouseLeave,
onClick: handlers.onClick
}, node.id);
};
var getTransitionPhases$1 = function getTransitionPhases() {
return {
enter: function enter(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 0
};
},
update: function update(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 1
};
},
leave: function leave(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 0
};
}
};
};
var Labels = function Labels(_ref) {
var nodes = _ref.nodes,
label = _ref.label,
filter = _ref.filter,
skipRadius = _ref.skipRadius,
textColor = _ref.textColor,
component = _ref.component;
var _useMotionConfig = useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var labels = useCirclePackingLabels({
nodes: nodes,
label: label,
filter: filter,
skipRadius: skipRadius,
textColor: textColor
});
var transitionPhases = useMemo(function () {
return getTransitionPhases$1();
}, []);
var transition = useTransition(labels, {
keys: function keys(label) {
return label.node.id;
},
initial: transitionPhases.update,
from: transitionPhases.enter,
enter: transitionPhases.update,
update: transitionPhases.update,
leave: transitionPhases.leave,
config: springConfig,
immediate: !animate
});
return jsx(Fragment, {
children: transition(function (transitionProps, label) {
return createElement(component, {
key: label.node.id,
label: label.label,
style: _objectSpread2(_objectSpread2({}, transitionProps), {}, {
radius: interpolateRadius(transitionProps.radius)
}),
node: label.node
});
})
});
};
var LabelSvg = function LabelSvg(_ref) {
var node = _ref.node,
label = _ref.label,
style = _ref.style;
var theme = useTheme();
return jsx(animated.text, {
x: style.x,
y: style.y,
textAnchor: "middle",
dominantBaseline: "central",
style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
fill: style.textColor,
opacity: style.opacity,
pointerEvents: 'none'
}),
children: label
}, node.id);
};
var InnerCirclePacking = function InnerCirclePacking(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$circleComponent = _ref.circleComponent,
circleComponent = _ref$circleComponent === void 0 ? CircleSvg : _ref$circleComponent,
_ref$defs = _ref.defs,
defs = _ref$defs === void 0 ? defaultProps.defs : _ref$defs,
_ref$fill = _ref.fill,
fill = _ref$fill === void 0 ? defaultProps.fill : _ref$fill,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
_ref$labelComponent = _ref.labelComponent,
labelComponent = _ref$labelComponent === void 0 ? LabelSvg : _ref$labelComponent,
_ref$layers = _ref.layers,
layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role;
var _useDimensions = useDimensions(width, height, partialMargin),
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight,
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var boundDefs = useMemo(function () {
return bindDefs(defs, zoomedNodes, fill, {
targetKey: 'fill'
});
}, [defs, zoomedNodes, fill]);
var layerById = {
circles: null,
labels: null
};
if (layers.includes('circles')) {
layerById.circles = jsx(Circles, {
nodes: zoomedNodes,
borderWidth: borderWidth,
borderColor: borderColor,
isInteractive: isInteractive,
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick,
component: circleComponent,
tooltip: tooltip
}, "circles");
}
if (enableLabels && layers.includes('labels')) {
layerById.labels = jsx(Labels, {
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor,
component: labelComponent
}, "labels");
}
var layerContext = useCirclePackingLayerContext({
nodes: nodes
});
return jsx(SvgWrapper, {
width: outerWidth,
height: outerHeight,
margin: margin,
defs: boundDefs,
role: role,
children: layers.map(function (layer, i) {
if (layerById[layer] !== undefined) {
return layerById[layer];
}
if (typeof layer === 'function') {
return jsx(Fragment$1, {
children: createElement(layer, layerContext)
}, i);
}
return null;
})
});
};
var CirclePacking = function CirclePacking(_ref2) {
var theme = _ref2.theme,
_ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
_ref2$animate = _ref2.animate,
animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate,
_ref2$motionConfig = _ref2.motionConfig,
motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig,
otherProps = _objectWithoutProperties(_ref2, ["theme", "isInteractive", "animate", "motionConfig"]);
return jsx(Container, {
isInteractive: isInteractive,
animate: animate,
motionConfig: motionConfig,
theme: theme,
children: jsx(InnerCirclePacking, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePacking = function ResponsiveCirclePacking(props) {
return jsx(ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsx(CirclePacking, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
var interpolatePosition = function interpolatePosition(positionValue, radiusValue) {
return to([positionValue, radiusValue], function (position, radius) {
return position - radius;
});
};
var interpolateSize = function interpolateSize(radiusValue) {
return to([radiusValue], function (radius) {
return radius * 2;
});
};
var interpolateBorderWidth = function interpolateBorderWidth(borderWidth, radiusValue) {
return to([radiusValue], function (radius) {
return Math.min(borderWidth, radius);
});
};
var CircleHtml = function CircleHtml(_ref) {
var node = _ref.node,
style = _ref.style,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick;
var size = interpolateSize(style.radius);
var handlers = useNodeMouseHandlers(node, {
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick
});
return jsx(animated.div, {
style: {
position: 'absolute',
top: interpolatePosition(style.y, style.radius),
left: interpolatePosition(style.x, style.radius),
height: size,
width: size,
borderRadius: style.radius,
backgroundColor: style.color,
borderWidth: interpolateBorderWidth(style.borderWidth, style.radius),
borderStyle: 'solid',
borderColor: style.borderColor,
boxSizing: 'border-box'
},
onMouseEnter: handlers.onMouseEnter,
onMouseMove: handlers.onMouseMove,
onMouseLeave: handlers.onMouseLeave,
onClick: handlers.onClick
});
};
var LabelHtml = function LabelHtml(_ref) {
var node = _ref.node,
label = _ref.label,
style = _ref.style;
var theme = useTheme();
var size = interpolateSize(style.radius);
return jsx(animated.div, {
style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
position: 'absolute',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
top: interpolatePosition(style.y, style.radius),
left: interpolatePosition(style.x, style.radius),
width: size,
height: size,
color: style.textColor,
opacity: style.opacity,
pointerEvents: 'none'
}),
children: label
}, node.id);
};
var InnerCirclePackingHtml = function InnerCirclePackingHtml(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$circleComponent = _ref.circleComponent,
circleComponent = _ref$circleComponent === void 0 ? CircleHtml : _ref$circleComponent,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
_ref$labelComponent = _ref.labelComponent,
labelComponent = _ref$labelComponent === void 0 ? LabelHtml : _ref$labelComponent,
_ref$layers = _ref.layers,
layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role;
var _useDimensions = useDimensions(width, height, partialMargin),
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight,
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var layerById = {
circles: null,
labels: null
};
if (layers.includes('circles')) {
layerById.circles = jsx(Circles, {
nodes: zoomedNodes,
borderWidth: borderWidth,
borderColor: borderColor,
isInteractive: isInteractive,
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick,
component: circleComponent,
tooltip: tooltip
}, "circles");
}
if (enableLabels && layers.includes('labels')) {
layerById.labels = jsx(Labels, {
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor,
component: labelComponent
}, "labels");
}
var layerContext = useCirclePackingLayerContext({
nodes: nodes
});
return jsx("div", {
role: role,
style: {
position: 'relative',
overflow: 'hidden',
width: outerWidth,
height: outerHeight
},
children: jsx("div", {
style: {
position: 'absolute',
top: margin.top,
left: margin.left
},
children: layers.map(function (layer, i) {
if (layerById[layer] !== undefined) {
return layerById[layer];
}
if (typeof layer === 'function') {
return jsx(Fragment$1, {
children: createElement(layer, layerContext)
}, i);
}
return null;
})
})
});
};
var CirclePackingHtml = function CirclePackingHtml(_ref2) {
var theme = _ref2.theme,
_ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
_ref2$animate = _ref2.animate,
animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate,
_ref2$motionConfig = _ref2.motionConfig,
motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig,
otherProps = _objectWithoutProperties(_ref2, ["theme", "isInteractive", "animate", "motionConfig"]);
return jsx(Container, {
isInteractive: isInteractive,
animate: animate,
motionConfig: motionConfig,
theme: theme,
children: jsx(InnerCirclePackingHtml, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePackingHtml = function ResponsiveCirclePackingHtml(props) {
return jsx(ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsx(CirclePackingHtml, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
var InnerCirclePackingCanvas = function InnerCirclePackingCanvas(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
isInteractive = _ref.isInteractive,
onMouseMove = _ref.onMouseMove,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role,
_ref$pixelRatio = _ref.pixelRatio,
pixelRatio = _ref$pixelRatio === void 0 ? defaultProps.pixelRatio : _ref$pixelRatio;
var canvasEl = useRef(null);
var theme = useTheme();
var _useDimensions = useDimensions(width, height, partialMargin),
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight,
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var labels = useCirclePackingLabels({
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor
});
var getBorderColor = useInheritedColor(borderColor, theme);
useEffect(function () {
if (!canvasEl.current) return;
canvasEl.current.width = outerWidth * pixelRatio;
canvasEl.current.height = outerHeight * pixelRatio;
var ctx = canvasEl.current.getContext('2d');
ctx.scale(pixelRatio, pixelRatio);
ctx.fillStyle = theme.background;
ctx.fillRect(0, 0, outerWidth, outerHeight);
ctx.save();
ctx.translate(margin.left, margin.top);
zoomedNodes.forEach(function (node) {
if (borderWidth > 0) {
ctx.strokeStyle = getBorderColor(node);
ctx.lineWidth = borderWidth;
}
ctx.beginPath();
ctx.arc(node.x, node.y, node.radius, 0, 2 * Math.PI);
ctx.fillStyle = node.color;
ctx.fill();
if (borderWidth > 0) {
ctx.stroke();
}
});
if (enableLabels) {
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.node.x, label.node.y);
});
}
}, [canvasEl, innerWidth, innerHeight, outerWidth, outerHeight, margin.top, margin.left, theme, pixelRatio, zoomedNodes, enableLabels, labels, borderWidth, getBorderColor]);
var getNodeFromMouseEvent = useMouseCircleDetection({
nodes: zoomedNodes,
canvasEl: canvasEl,
margin: margin
});
var _useTooltip = useTooltip(),
showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
hideTooltip = _useTooltip.hideTooltip;
var handleMouseHover = useCallback(function (event) {
var node = getNodeFromMouseEvent(event);
if (node) {
onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(node, event);
showTooltipFromEvent(createElement(tooltip, node), event);
} else {
hideTooltip();
}
}, [getNodeFromMouseEvent, showTooltipFromEvent, tooltip, hideTooltip]);
var handleMouseLeave = useCallback(function () {
hideTooltip();
}, [hideTooltip]);
var handleClick = useCallback(function (event) {
if (!onClick) return;
var node = getNodeFromMouseEvent(event);
if (node) {
onClick(node, event);
}
}, [getNodeFromMouseEvent, onClick]);
return jsx("canvas", {
ref: canvasEl,
width: outerWidth * pixelRatio,
height: outerHeight * pixelRatio,
style: {
width: outerWidth,
height: outerHeight,
cursor: isInteractive ? 'auto' : 'normal'
},
role: role,
onMouseEnter: isInteractive ? handleMouseHover : undefined,
onMouseMove: isInteractive ? handleMouseHover : undefined,
onMouseLeave: isInteractive ? handleMouseLeave : undefined,
onClick: isInteractive ? handleClick : undefined
});
};
var CirclePackingCanvas = function CirclePackingCanvas(_ref2) {
var _ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
theme = _ref2.theme,
otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "theme"]);
return jsx(Container, {
isInteractive: isInteractive,
theme: theme,
children: jsx(InnerCirclePackingCanvas, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePackingCanvas = function ResponsiveCirclePackingCanvas(props) {
return jsx(ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsx(CirclePackingCanvas, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
export { CirclePacking, CirclePackingCanvas, CirclePackingHtml, InnerCirclePackingHtml, ResponsiveCirclePacking, ResponsiveCirclePackingCanvas, ResponsiveCirclePackingHtml, defaultProps, useCirclePacking, useCirclePackingLabels, useCirclePackingLayerContext, useCirclePackingZoom, useMouseCircleDetection, useNodeMouseHandlers };
import*as e from"react";import{useMemo as o,useCallback as r,createElement as i,Fragment as n,useRef as t,useEffect as l}from"react";import{usePropertyAccessor as a,useValueFormatter as d,useTheme as u,getRelativeCursor as c,getDistance as s,useMotionConfig as v,Container as f,useDimensions as h,bindDefs as p,SvgWrapper as m,ResponsiveWrapper as b}from"@nivo/core";import{hierarchy as y,pack as C}from"d3-hierarchy";import g from"lodash/cloneDeep";import M from"lodash/sortBy";import{useOrdinalColorScale as x,useInheritedColor as k}from"@nivo/colors";import{BasicTooltip as w,useTooltip as I}from"@nivo/tooltip";import{jsx as E,Fragment as F}from"react/jsx-runtime";import{useTransition as W,to as L,animated as R}from"@react-spring/web";function O(){return O=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},O.apply(this,arguments)}function P(e,o){if(null==e)return{};var r,i,n={},t=Object.keys(e);for(i=0;i<t.length;i++)r=t[i],o.indexOf(r)>=0||(n[r]=e[r]);return n}var B,S=function(e){var o,r=e.data,i=e.id,n=e.value,t=e.valueFormat,l=e.width,c=e.height,s=e.padding,v=e.leavesOnly,f=e.colors,h=e.colorBy,p=e.inheritColorFromParent,m=e.childColor,b=a(i),w=a(n),I=d(t),E=x(f,h),F=u(),W=k(m,F),L=g(r),R=y(L).sum(w),O=C().size([l,c]).padding(s)(R),P=v?O.leaves():O.descendants(),B=M(P,"depth"),S=null!=(o=R.value)?o:0,T=B.reduce((function(e,o){var r,i=b(o.data),n=o.value,l=100*n/S,a=o.ancestors().map((function(e){return b(e.data)}));o.parent&&(r=e.find((function(e){return e.id===b(o.parent.data)})));var d={id:i,path:a,value:n,percentage:l,formattedValue:t?I(n):l.toFixed(2)+"%",x:o.x,y:o.y,radius:o.r,color:"",data:o.data,depth:o.depth,height:o.height};return p&&r&&d.depth>1?d.color=W(r):d.color=E(d),[].concat(e,[d])}),[]);return T},T=function(e,r,i,n){return o((function(){if(!r)return e;var o=e.find((function(e){return e.id===r}));if(!o)return e;var t=Math.min(i,n)/(2*o.radius),l=i/2-o.x*t,a=n/2-o.y*t;return e.map((function(e){return O({},e,{x:e.x*t+l,y:e.y*t+a,radius:e.radius*t})}))}),[e,r,i,n])},z=function(e){var r=e.nodes,i=e.label,n=e.filter,t=e.skipRadius,l=e.textColor,d=a(i),c=u(),s=k(l,c),v=o((function(){return r.filter((function(e){return e.radius>=t})).map((function(e){return{label:d(e),textColor:s(e),node:e}}))}),[r,t,d,s]);return o((function(){return n?v.filter(n):v}),[v,n])},H=function(e,r){var i=r.onMouseEnter,n=r.onMouseMove,t=r.onMouseLeave,l=r.onClick;return o((function(){return{onMouseEnter:i?function(o){i(e,o)}:void 0,onMouseMove:n?function(o){n(e,o)}:void 0,onMouseLeave:t?function(o){t(e,o)}:void 0,onClick:l?function(o){l(e,o)}:void 0}}),[e,i,n,t,l])},j=function(e){var i=e.nodes,n=e.canvasEl,t=e.margin,l=o((function(){return M(i,"height")}),[i]);return r((function(e){if(!n.current)return null;var o=c(n.current,e),r=o[0],i=o[1];return l.find((function(e){return s(e.x,e.y,r-t.left,i-t.top)<=e.radius}))}),[n,t,l])},A=function(e){var r=e.nodes;return o((function(){return{nodes:r}}),[r])},V={id:"id",value:"value",padding:0,leavesOnly:!1,layers:["circles","labels"],colors:{scheme:"nivo"},colorBy:"depth",inheritColorFromParent:!1,childColor:{from:"color",modifiers:[["darker",.3]]},borderWidth:0,borderColor:{from:"color",modifiers:[["darker",.3]]},defs:[],fill:[],enableLabels:!1,label:"id",labelTextColor:{from:"color",modifiers:[["darker",1.6]]},labelsSkipRadius:8,isInteractive:!0,tooltip:function(e){var o=e.id,r=e.formattedValue,i=e.color;return E(w,{id:o,value:r,enableChip:!0,color:i})},animate:!0,motionConfig:"gentle",role:"img",pixelRatio:"undefined"!=typeof window&&null!=(B=window.devicePixelRatio)?B:1},D=function(e){return L([e],(function(e){return Math.max(0,e)}))},K=function(r){var n=r.nodes,t=r.borderWidth,l=r.borderColor,a=r.component,d=r.isInteractive,c=r.onMouseEnter,s=r.onMouseMove,f=r.onMouseLeave,h=r.onClick,p=r.tooltip,m=I(),b=m.showTooltipFromEvent,y=m.hideTooltip,C=o((function(){if(d)return function(e,o){b(i(p,e),o),null==c||c(e,o)}}),[d,b,p,c]),g=o((function(){if(d)return function(e,o){b(i(p,e),o),null==s||s(e,o)}}),[d,b,p,s]),M=o((function(){if(d)return function(e,o){y(),null==f||f(e,o)}}),[d,y,f]),x=o((function(){if(d)return function(e,o){null==h||h(e,o)}}),[d,h]),w=v(),L=w.animate,R=w.config,P=u(),B=k(l,P),S=o((function(){return function(e){return{enter:function(o){return{x:o.x,y:o.y,radius:0,color:o.color,borderColor:e(o),opacity:0}},update:function(o){return{x:o.x,y:o.y,radius:o.radius,color:o.color,borderColor:e(o),opacity:1}},leave:function(o){return{x:o.x,y:o.y,radius:0,color:o.color,borderColor:e(o),opacity:0}}}}(B)}),[B]),T=W(n,{keys:function(e){return e.id},initial:S.update,from:S.enter,enter:S.update,update:S.update,leave:S.leave,config:R,immediate:!L});return E(F,{children:T((function(o,r){return e.createElement(a,{key:r.id,node:r,style:O({},o,{radius:D(o.radius),borderWidth:t}),onMouseEnter:C,onMouseMove:g,onMouseLeave:M,onClick:x})}))})},q=function(e){var o=e.node,r=e.style,i=e.onMouseEnter,n=e.onMouseMove,t=e.onMouseLeave,l=e.onClick,a=H(o,{onMouseEnter:i,onMouseMove:n,onMouseLeave:t,onClick:l});return E(R.circle,{cx:r.x,cy:r.y,r:r.radius,fill:o.fill||r.color,stroke:r.borderColor,strokeWidth:r.borderWidth,opacity:r.opacity,onMouseEnter:a.onMouseEnter,onMouseMove:a.onMouseMove,onMouseLeave:a.onMouseLeave,onClick:a.onClick},o.id)},G=function(e){var r=e.nodes,n=e.label,t=e.filter,l=e.skipRadius,a=e.textColor,d=e.component,u=v(),c=u.animate,s=u.config,f=z({nodes:r,label:n,filter:t,skipRadius:l,textColor:a}),h=o((function(){return{enter:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:0}},update:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:1}},leave:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:0}}}}),[]),p=W(f,{keys:function(e){return e.node.id},initial:h.update,from:h.enter,enter:h.update,update:h.update,leave:h.leave,config:s,immediate:!c});return E(F,{children:p((function(e,o){return i(d,{key:o.node.id,label:o.label,style:O({},e,{radius:D(e.radius)}),node:o.node})}))})},J=function(e){var o=e.node,r=e.label,i=e.style,n=u();return E(R.text,{x:i.x,y:i.y,textAnchor:"middle",dominantBaseline:"central",style:O({},n.labels.text,{fill:i.textColor,opacity:i.opacity,pointerEvents:"none"}),children:r},o.id)},N=["theme","isInteractive","animate","motionConfig","renderWrapper"],Q=function(e){var r=e.data,t=e.id,l=void 0===t?V.id:t,a=e.value,d=void 0===a?V.value:a,u=e.valueFormat,c=e.width,s=e.height,v=e.margin,f=e.padding,b=void 0===f?V.padding:f,y=e.leavesOnly,C=void 0===y?V.leavesOnly:y,g=e.colors,M=void 0===g?V.colors:g,x=e.colorBy,k=void 0===x?V.colorBy:x,w=e.inheritColorFromParent,I=void 0===w?V.inheritColorFromParent:w,F=e.childColor,W=void 0===F?V.childColor:F,L=e.borderWidth,R=void 0===L?V.borderWidth:L,O=e.borderColor,P=void 0===O?V.borderColor:O,B=e.circleComponent,z=void 0===B?q:B,H=e.defs,j=void 0===H?V.defs:H,D=e.fill,N=void 0===D?V.fill:D,Q=e.enableLabels,U=void 0===Q?V.enableLabels:Q,X=e.label,Y=void 0===X?V.label:X,Z=e.labelsFilter,$=e.labelsSkipRadius,_=void 0===$?V.labelsSkipRadius:$,ee=e.labelTextColor,oe=void 0===ee?V.labelTextColor:ee,re=e.labelComponent,ie=void 0===re?J:re,ne=e.layers,te=void 0===ne?V.layers:ne,le=e.isInteractive,ae=e.onMouseEnter,de=e.onMouseMove,ue=e.onMouseLeave,ce=e.onClick,se=e.tooltip,ve=void 0===se?V.tooltip:se,fe=e.zoomedId,he=e.role,pe=void 0===he?V.role:he,me=h(c,s,v),be=me.outerWidth,ye=me.outerHeight,Ce=me.margin,ge=me.innerWidth,Me=me.innerHeight,xe=S({data:r,id:l,value:d,valueFormat:u,width:ge,height:Me,padding:b,leavesOnly:C,colors:M,colorBy:k,inheritColorFromParent:I,childColor:W}),ke=T(xe,fe,ge,Me),we=o((function(){return p(j,ke,N,{targetKey:"fill"})}),[j,ke,N]),Ie={circles:null,labels:null};te.includes("circles")&&(Ie.circles=E(K,{nodes:ke,borderWidth:R,borderColor:P,isInteractive:le,onMouseEnter:ae,onMouseMove:de,onMouseLeave:ue,onClick:ce,component:z,tooltip:ve},"circles")),U&&te.includes("labels")&&(Ie.labels=E(G,{nodes:ke,label:Y,filter:Z,skipRadius:_,textColor:oe,component:ie},"labels"));var Ee=A({nodes:xe});return E(m,{width:be,height:ye,margin:Ce,defs:we,role:pe,children:te.map((function(e,o){return void 0!==Ie[e]?Ie[e]:"function"==typeof e?E(n,{children:i(e,Ee)},o):null}))})},U=function(e){var o=e.theme,r=e.isInteractive,i=void 0===r?V.isInteractive:r,n=e.animate,t=void 0===n?V.animate:n,l=e.motionConfig,a=void 0===l?V.motionConfig:l,d=e.renderWrapper,u=P(e,N);return E(f,{isInteractive:i,animate:t,motionConfig:a,renderWrapper:d,theme:o,children:E(Q,O({isInteractive:i},u))})},X=function(e){return E(b,{children:function(o){var r=o.width,i=o.height;return E(U,O({width:r,height:i},e))}})},Y=function(e,o){return L([e,o],(function(e,o){return e-o}))},Z=function(e){return L([e],(function(e){return 2*e}))},$=function(e){var o,r,i=e.node,n=e.style,t=e.onMouseEnter,l=e.onMouseMove,a=e.onMouseLeave,d=e.onClick,u=Z(n.radius),c=H(i,{onMouseEnter:t,onMouseMove:l,onMouseLeave:a,onClick:d});return E(R.div,{style:{position:"absolute",top:Y(n.y,n.radius),left:Y(n.x,n.radius),height:u,width:u,borderRadius:n.radius,backgroundColor:n.color,borderWidth:(o=n.borderWidth,r=n.radius,L([r],(function(e){return Math.min(o,e)}))),borderStyle:"solid",borderColor:n.borderColor,boxSizing:"border-box"},onMouseEnter:c.onMouseEnter,onMouseMove:c.onMouseMove,onMouseLeave:c.onMouseLeave,onClick:c.onClick})},_=function(e){var o=e.node,r=e.label,i=e.style,n=u(),t=Z(i.radius);return E(R.div,{style:O({},n.labels.text,{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",top:Y(i.y,i.radius),left:Y(i.x,i.radius),width:t,height:t,color:i.textColor,opacity:i.opacity,pointerEvents:"none"}),children:r},o.id)},ee=["theme","isInteractive","animate","motionConfig"],oe=function(e){var o=e.data,r=e.id,t=void 0===r?V.id:r,l=e.value,a=void 0===l?V.value:l,d=e.valueFormat,u=e.width,c=e.height,s=e.margin,v=e.padding,f=void 0===v?V.padding:v,p=e.leavesOnly,m=void 0===p?V.leavesOnly:p,b=e.colors,y=void 0===b?V.colors:b,C=e.colorBy,g=void 0===C?V.colorBy:C,M=e.inheritColorFromParent,x=void 0===M?V.inheritColorFromParent:M,k=e.childColor,w=void 0===k?V.childColor:k,I=e.borderWidth,F=void 0===I?V.borderWidth:I,W=e.borderColor,L=void 0===W?V.borderColor:W,R=e.circleComponent,O=void 0===R?$:R,P=e.enableLabels,B=void 0===P?V.enableLabels:P,z=e.label,H=void 0===z?V.label:z,j=e.labelsFilter,D=e.labelsSkipRadius,q=void 0===D?V.labelsSkipRadius:D,J=e.labelTextColor,N=void 0===J?V.labelTextColor:J,Q=e.labelComponent,U=void 0===Q?_:Q,X=e.layers,Y=void 0===X?V.layers:X,Z=e.isInteractive,ee=e.onMouseEnter,oe=e.onMouseMove,re=e.onMouseLeave,ie=e.onClick,ne=e.tooltip,te=void 0===ne?V.tooltip:ne,le=e.zoomedId,ae=e.role,de=void 0===ae?V.role:ae,ue=h(u,c,s),ce=ue.outerWidth,se=ue.outerHeight,ve=ue.margin,fe=ue.innerWidth,he=ue.innerHeight,pe=S({data:o,id:t,value:a,valueFormat:d,width:fe,height:he,padding:f,leavesOnly:m,colors:y,colorBy:g,inheritColorFromParent:x,childColor:w}),me=T(pe,le,fe,he),be={circles:null,labels:null};Y.includes("circles")&&(be.circles=E(K,{nodes:me,borderWidth:F,borderColor:L,isInteractive:Z,onMouseEnter:ee,onMouseMove:oe,onMouseLeave:re,onClick:ie,component:O,tooltip:te},"circles")),B&&Y.includes("labels")&&(be.labels=E(G,{nodes:me,label:H,filter:j,skipRadius:q,textColor:N,component:U},"labels"));var ye=A({nodes:pe});return E("div",{role:de,style:{position:"relative",overflow:"hidden",width:ce,height:se},children:E("div",{style:{position:"absolute",top:ve.top,left:ve.left},children:Y.map((function(e,o){return void 0!==be[e]?be[e]:"function"==typeof e?E(n,{children:i(e,ye)},o):null}))})})},re=function(e){var o=e.theme,r=e.isInteractive,i=void 0===r?V.isInteractive:r,n=e.animate,t=void 0===n?V.animate:n,l=e.motionConfig,a=void 0===l?V.motionConfig:l,d=P(e,ee);return E(f,{isInteractive:i,animate:t,motionConfig:a,theme:o,children:E(oe,O({isInteractive:i},d))})},ie=function(e){return E(b,{children:function(o){var r=o.width,i=o.height;return E(re,O({width:r,height:i},e))}})},ne=["isInteractive","theme"],te=function(e){var o=e.data,n=e.id,a=void 0===n?V.id:n,d=e.value,c=void 0===d?V.value:d,s=e.valueFormat,v=e.width,f=e.height,p=e.margin,m=e.padding,b=void 0===m?V.padding:m,y=e.leavesOnly,C=void 0===y?V.leavesOnly:y,g=e.colors,M=void 0===g?V.colors:g,x=e.colorBy,w=void 0===x?V.colorBy:x,F=e.inheritColorFromParent,W=void 0===F?V.inheritColorFromParent:F,L=e.childColor,R=void 0===L?V.childColor:L,O=e.borderWidth,P=void 0===O?V.borderWidth:O,B=e.borderColor,H=void 0===B?V.borderColor:B,A=e.enableLabels,D=void 0===A?V.enableLabels:A,K=e.label,q=void 0===K?V.label:K,G=e.labelsFilter,J=e.labelsSkipRadius,N=void 0===J?V.labelsSkipRadius:J,Q=e.labelTextColor,U=void 0===Q?V.labelTextColor:Q,X=e.isInteractive,Y=e.onMouseMove,Z=e.onClick,$=e.tooltip,_=void 0===$?V.tooltip:$,ee=e.zoomedId,oe=e.role,re=void 0===oe?V.role:oe,ie=e.pixelRatio,ne=void 0===ie?V.pixelRatio:ie,te=t(null),le=u(),ae=h(v,f,p),de=ae.margin,ue=ae.innerWidth,ce=ae.innerHeight,se=ae.outerWidth,ve=ae.outerHeight,fe=S({data:o,id:a,value:c,valueFormat:s,width:ue,height:ce,padding:b,leavesOnly:C,colors:M,colorBy:w,inheritColorFromParent:W,childColor:R}),he=T(fe,ee,ue,ce),pe=z({nodes:he,label:q,filter:G,skipRadius:N,textColor:U}),me=k(H,le);l((function(){if(te.current){te.current.width=se*ne,te.current.height=ve*ne;var e=te.current.getContext("2d");e.scale(ne,ne),e.fillStyle=le.background,e.fillRect(0,0,se,ve),e.save(),e.translate(de.left,de.top),he.forEach((function(o){P>0&&(e.strokeStyle=me(o),e.lineWidth=P),e.beginPath(),e.arc(o.x,o.y,o.radius,0,2*Math.PI),e.fillStyle=o.color,e.fill(),P>0&&e.stroke()})),D&&(e.textAlign="center",e.textBaseline="middle",e.font=le.labels.text.fontSize+"px "+le.labels.text.fontFamily,pe.forEach((function(o){e.fillStyle=o.textColor,e.fillText(""+o.label,o.node.x,o.node.y)})))}}),[te,ue,ce,se,ve,de.top,de.left,le,ne,he,D,pe,P,me]);var be=j({nodes:he,canvasEl:te,margin:de}),ye=I(),Ce=ye.showTooltipFromEvent,ge=ye.hideTooltip,Me=r((function(e){var o=be(e);o?(null==Y||Y(o,e),Ce(i(_,o),e)):ge()}),[be,Ce,_,ge]),xe=r((function(){ge()}),[ge]),ke=r((function(e){if(Z){var o=be(e);o&&Z(o,e)}}),[be,Z]);return E("canvas",{ref:te,width:se*ne,height:ve*ne,style:{width:se,height:ve,cursor:X?"auto":"normal"},role:re,onMouseEnter:X?Me:void 0,onMouseMove:X?Me:void 0,onMouseLeave:X?xe:void 0,onClick:X?ke:void 0})},le=function(e){var o=e.isInteractive,r=void 0===o?V.isInteractive:o,i=e.theme,n=P(e,ne);return E(f,{isInteractive:r,theme:i,children:E(te,O({isInteractive:r},n))})},ae=function(e){return E(b,{children:function(o){var r=o.width,i=o.height;return E(le,O({width:r,height:i},e))}})};export{U as CirclePacking,le as CirclePackingCanvas,re as CirclePackingHtml,oe as InnerCirclePackingHtml,X as ResponsiveCirclePacking,ae as ResponsiveCirclePackingCanvas,ie as ResponsiveCirclePackingHtml,V as defaultProps,S as useCirclePacking,z as useCirclePackingLabels,A as useCirclePackingLayerContext,T as useCirclePackingZoom,j as useMouseCircleDetection,H as useNodeMouseHandlers};
//# sourceMappingURL=nivo-circle-packing.es.js.map

1244

dist/nivo-circle-packing.umd.js

@@ -1,1244 +0,2 @@

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('d3-hierarchy'), require('lodash/cloneDeep'), require('lodash/sortBy'), require('@nivo/colors'), require('@nivo/tooltip'), require('react/jsx-runtime'), require('@react-spring/web')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', 'd3-hierarchy', 'lodash/cloneDeep', 'lodash/sortBy', '@nivo/colors', '@nivo/tooltip', 'react/jsx-runtime', '@react-spring/web'], factory) :
(global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.d3, global['lodash/cloneDeep'], global['lodash/sortBy'], global.nivo, global.nivo, global['react/jsx-runtime'], global['@react-spring/web']));
}(this, (function (exports, React, core, d3Hierarchy, cloneDeep, sortBy, colors, tooltip, jsxRuntime, web) { 'use strict';
cloneDeep = cloneDeep && Object.prototype.hasOwnProperty.call(cloneDeep, 'default') ? cloneDeep['default'] : cloneDeep;
sortBy = sortBy && Object.prototype.hasOwnProperty.call(sortBy, 'default') ? sortBy['default'] : sortBy;
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
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 _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
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();
}
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 _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();
}
var useCirclePacking = function useCirclePacking(_ref) {
var _hierarchy$value;
var data = _ref.data,
id = _ref.id,
value = _ref.value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
padding = _ref.padding,
leavesOnly = _ref.leavesOnly,
colors$1 = _ref.colors,
colorBy = _ref.colorBy,
inheritColorFromParent = _ref.inheritColorFromParent,
childColor = _ref.childColor;
var getId = core.usePropertyAccessor(id);
var getValue = core.usePropertyAccessor(value);
var formatValue = core.useValueFormatter(valueFormat);
var getColor = colors.useOrdinalColorScale(colors$1, colorBy);
var theme = core.useTheme();
var getChildColor = colors.useInheritedColor(childColor, theme);
var clonedData = cloneDeep(data);
var hierarchy = d3Hierarchy.hierarchy(clonedData).sum(getValue);
var pack = d3Hierarchy.pack().size([width, height]).padding(padding);
var packedData = pack(hierarchy);
var nodes = leavesOnly ? packedData.leaves() : packedData.descendants();
var sortedNodes = sortBy(nodes, 'depth');
var total = (_hierarchy$value = hierarchy.value) !== null && _hierarchy$value !== void 0 ? _hierarchy$value : 0;
var computedNodes = sortedNodes.reduce(function (acc, descendant) {
var id = getId(descendant.data);
var value = descendant.value;
var percentage = 100 * value / total;
var path = descendant.ancestors().map(function (ancestor) {
return getId(ancestor.data);
});
var parent;
if (descendant.parent) {
parent = acc.find(function (node) {
return node.id === getId(descendant.parent.data);
});
}
var normalizedNode = {
id: id,
path: path,
value: value,
percentage: percentage,
formattedValue: valueFormat ? formatValue(value) : "".concat(percentage.toFixed(2), "%"),
x: descendant.x,
y: descendant.y,
radius: descendant.r,
color: '',
data: descendant.data,
depth: descendant.depth,
height: descendant.height
};
if (inheritColorFromParent && parent && normalizedNode.depth > 1) {
normalizedNode.color = getChildColor(parent);
} else {
normalizedNode.color = getColor(normalizedNode);
}
return [].concat(_toConsumableArray(acc), [normalizedNode]);
}, []);
return computedNodes;
};
var useCirclePackingZoom = function useCirclePackingZoom(nodes, zoomedId, width, height) {
return React.useMemo(function () {
if (!zoomedId) return nodes;
var zoomedNode = nodes.find(function (_ref2) {
var id = _ref2.id;
return id === zoomedId;
});
if (!zoomedNode) return nodes;
var ratio = Math.min(width, height) / (zoomedNode.radius * 2);
var offsetX = width / 2 - zoomedNode.x * ratio;
var offsetY = height / 2 - zoomedNode.y * ratio;
return nodes.map(function (node) {
return _objectSpread2(_objectSpread2({}, node), {}, {
x: node.x * ratio + offsetX,
y: node.y * ratio + offsetY,
radius: node.radius * ratio
});
});
}, [nodes, zoomedId, width, height]);
};
var useCirclePackingLabels = function useCirclePackingLabels(_ref3) {
var nodes = _ref3.nodes,
label = _ref3.label,
filter = _ref3.filter,
skipRadius = _ref3.skipRadius,
textColor = _ref3.textColor;
var getLabel = core.usePropertyAccessor(label);
var theme = core.useTheme();
var getTextColor = colors.useInheritedColor(textColor, theme);
var labels = React.useMemo(function () {
return nodes.filter(function (node) {
return node.radius >= skipRadius;
}).map(function (node) {
return {
label: getLabel(node),
textColor: getTextColor(node),
node: node
};
});
}, [nodes, skipRadius, getLabel, getTextColor]);
return React.useMemo(function () {
if (!filter) return labels;
return labels.filter(filter);
}, [labels, filter]);
};
var useNodeMouseHandlers = function useNodeMouseHandlers(node, _ref4) {
var onMouseEnter = _ref4.onMouseEnter,
onMouseMove = _ref4.onMouseMove,
onMouseLeave = _ref4.onMouseLeave,
onClick = _ref4.onClick;
return React.useMemo(function () {
return {
onMouseEnter: onMouseEnter ? function (event) {
onMouseEnter(node, event);
} : undefined,
onMouseMove: onMouseMove ? function (event) {
onMouseMove(node, event);
} : undefined,
onMouseLeave: onMouseLeave ? function (event) {
onMouseLeave(node, event);
} : undefined,
onClick: onClick ? function (event) {
onClick(node, event);
} : undefined
};
}, [node, onMouseEnter, onMouseMove, onMouseLeave, onClick]);
};
var useMouseCircleDetection = function useMouseCircleDetection(_ref5) {
var nodes = _ref5.nodes,
canvasEl = _ref5.canvasEl,
margin = _ref5.margin;
var sortedNodes = React.useMemo(function () {
return sortBy(nodes, 'height');
}, [nodes]);
return React.useCallback(function (event) {
if (!canvasEl.current) return null;
var _getRelativeCursor = core.getRelativeCursor(canvasEl.current, event),
_getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2),
x = _getRelativeCursor2[0],
y = _getRelativeCursor2[1];
return sortedNodes.find(function (node) {
var distanceFromNode = core.getDistance(node.x, node.y, x - margin.left, y - margin.top);
return distanceFromNode <= node.radius;
});
}, [canvasEl, margin, sortedNodes]);
};
var useCirclePackingLayerContext = function useCirclePackingLayerContext(_ref6) {
var nodes = _ref6.nodes;
return React.useMemo(function () {
return {
nodes: nodes
};
}, [nodes]);
};
var CirclePackingTooltip = function CirclePackingTooltip(_ref) {
var id = _ref.id,
formattedValue = _ref.formattedValue,
color = _ref.color;
return jsxRuntime.jsx(tooltip.BasicTooltip, {
id: id,
value: formattedValue,
enableChip: true,
color: color
});
};
var _window$devicePixelRa;
var defaultProps = {
id: 'id',
value: 'value',
padding: 0,
leavesOnly: false,
layers: ['circles', 'labels'],
colors: {
scheme: 'nivo'
},
colorBy: 'depth',
inheritColorFromParent: false,
childColor: {
from: 'color',
modifiers: [['darker', 0.3]]
},
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [['darker', 0.3]]
},
defs: [],
fill: [],
enableLabels: false,
label: 'id',
labelTextColor: {
from: 'color',
modifiers: [['darker', 1.6]]
},
labelsSkipRadius: 8,
isInteractive: true,
tooltip: CirclePackingTooltip,
animate: true,
motionConfig: 'gentle',
role: 'img',
pixelRatio: typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) !== null && _window$devicePixelRa !== void 0 ? _window$devicePixelRa : 1 : 1
};
var interpolateRadius = function interpolateRadius(radiusValue) {
return web.to([radiusValue], function (radius) {
return Math.max(0, radius);
});
};
var getTransitionPhases = function getTransitionPhases(getBorderColor) {
return {
enter: function enter(node) {
return {
x: node.x,
y: node.y,
radius: 0,
color: node.color,
borderColor: getBorderColor(node),
opacity: 0
};
},
update: function update(node) {
return {
x: node.x,
y: node.y,
radius: node.radius,
color: node.color,
borderColor: getBorderColor(node),
opacity: 1
};
},
leave: function leave(node) {
return {
x: node.x,
y: node.y,
radius: 0,
color: node.color,
borderColor: getBorderColor(node),
opacity: 0
};
}
};
};
var Circles = function Circles(_ref) {
var nodes = _ref.nodes,
borderWidth = _ref.borderWidth,
borderColor = _ref.borderColor,
component = _ref.component,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
tooltip$1 = _ref.tooltip;
var _useTooltip = tooltip.useTooltip(),
showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
hideTooltip = _useTooltip.hideTooltip;
var handleMouseEnter = React.useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
showTooltipFromEvent(React.createElement(tooltip$1, node), event);
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(node, event);
};
}, [isInteractive, showTooltipFromEvent, tooltip$1, onMouseEnter]);
var handleMouseMove = React.useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
showTooltipFromEvent(React.createElement(tooltip$1, node), event);
onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(node, event);
};
}, [isInteractive, showTooltipFromEvent, tooltip$1, onMouseMove]);
var handleMouseLeave = React.useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
hideTooltip();
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(node, event);
};
}, [isInteractive, hideTooltip, onMouseLeave]);
var handleClick = React.useMemo(function () {
if (!isInteractive) return undefined;
return function (node, event) {
onClick === null || onClick === void 0 ? void 0 : onClick(node, event);
};
}, [isInteractive, onClick]);
var _useMotionConfig = core.useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var theme = core.useTheme();
var getBorderColor = colors.useInheritedColor(borderColor, theme);
var transitionPhases = React.useMemo(function () {
return getTransitionPhases(getBorderColor);
}, [getBorderColor]);
var transition = web.useTransition(nodes, {
keys: function keys(node) {
return node.id;
},
initial: transitionPhases.update,
from: transitionPhases.enter,
enter: transitionPhases.update,
update: transitionPhases.update,
leave: transitionPhases.leave,
config: springConfig,
immediate: !animate
});
return jsxRuntime.jsx(jsxRuntime.Fragment, {
children: transition(function (transitionProps, node) {
return React.createElement(component, {
key: node.id,
node: node,
style: _objectSpread2(_objectSpread2({}, transitionProps), {}, {
radius: interpolateRadius(transitionProps.radius),
borderWidth: borderWidth
}),
onMouseEnter: handleMouseEnter,
onMouseMove: handleMouseMove,
onMouseLeave: handleMouseLeave,
onClick: handleClick
});
})
});
};
var CircleSvg = function CircleSvg(_ref) {
var node = _ref.node,
style = _ref.style,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick;
var handlers = useNodeMouseHandlers(node, {
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick
});
return jsxRuntime.jsx(web.animated.circle, {
cx: style.x,
cy: style.y,
r: style.radius,
fill: node.fill || style.color,
stroke: style.borderColor,
strokeWidth: style.borderWidth,
opacity: style.opacity,
onMouseEnter: handlers.onMouseEnter,
onMouseMove: handlers.onMouseMove,
onMouseLeave: handlers.onMouseLeave,
onClick: handlers.onClick
}, node.id);
};
var getTransitionPhases$1 = function getTransitionPhases() {
return {
enter: function enter(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 0
};
},
update: function update(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 1
};
},
leave: function leave(label) {
return {
x: label.node.x,
y: label.node.y,
radius: label.node.radius,
textColor: label.textColor,
opacity: 0
};
}
};
};
var Labels = function Labels(_ref) {
var nodes = _ref.nodes,
label = _ref.label,
filter = _ref.filter,
skipRadius = _ref.skipRadius,
textColor = _ref.textColor,
component = _ref.component;
var _useMotionConfig = core.useMotionConfig(),
animate = _useMotionConfig.animate,
springConfig = _useMotionConfig.config;
var labels = useCirclePackingLabels({
nodes: nodes,
label: label,
filter: filter,
skipRadius: skipRadius,
textColor: textColor
});
var transitionPhases = React.useMemo(function () {
return getTransitionPhases$1();
}, []);
var transition = web.useTransition(labels, {
keys: function keys(label) {
return label.node.id;
},
initial: transitionPhases.update,
from: transitionPhases.enter,
enter: transitionPhases.update,
update: transitionPhases.update,
leave: transitionPhases.leave,
config: springConfig,
immediate: !animate
});
return jsxRuntime.jsx(jsxRuntime.Fragment, {
children: transition(function (transitionProps, label) {
return React.createElement(component, {
key: label.node.id,
label: label.label,
style: _objectSpread2(_objectSpread2({}, transitionProps), {}, {
radius: interpolateRadius(transitionProps.radius)
}),
node: label.node
});
})
});
};
var LabelSvg = function LabelSvg(_ref) {
var node = _ref.node,
label = _ref.label,
style = _ref.style;
var theme = core.useTheme();
return jsxRuntime.jsx(web.animated.text, {
x: style.x,
y: style.y,
textAnchor: "middle",
dominantBaseline: "central",
style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
fill: style.textColor,
opacity: style.opacity,
pointerEvents: 'none'
}),
children: label
}, node.id);
};
var InnerCirclePacking = function InnerCirclePacking(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$circleComponent = _ref.circleComponent,
circleComponent = _ref$circleComponent === void 0 ? CircleSvg : _ref$circleComponent,
_ref$defs = _ref.defs,
defs = _ref$defs === void 0 ? defaultProps.defs : _ref$defs,
_ref$fill = _ref.fill,
fill = _ref$fill === void 0 ? defaultProps.fill : _ref$fill,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
_ref$labelComponent = _ref.labelComponent,
labelComponent = _ref$labelComponent === void 0 ? LabelSvg : _ref$labelComponent,
_ref$layers = _ref.layers,
layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role;
var _useDimensions = core.useDimensions(width, height, partialMargin),
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight,
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var boundDefs = React.useMemo(function () {
return core.bindDefs(defs, zoomedNodes, fill, {
targetKey: 'fill'
});
}, [defs, zoomedNodes, fill]);
var layerById = {
circles: null,
labels: null
};
if (layers.includes('circles')) {
layerById.circles = jsxRuntime.jsx(Circles, {
nodes: zoomedNodes,
borderWidth: borderWidth,
borderColor: borderColor,
isInteractive: isInteractive,
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick,
component: circleComponent,
tooltip: tooltip
}, "circles");
}
if (enableLabels && layers.includes('labels')) {
layerById.labels = jsxRuntime.jsx(Labels, {
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor,
component: labelComponent
}, "labels");
}
var layerContext = useCirclePackingLayerContext({
nodes: nodes
});
return jsxRuntime.jsx(core.SvgWrapper, {
width: outerWidth,
height: outerHeight,
margin: margin,
defs: boundDefs,
role: role,
children: layers.map(function (layer, i) {
if (layerById[layer] !== undefined) {
return layerById[layer];
}
if (typeof layer === 'function') {
return jsxRuntime.jsx(React.Fragment, {
children: React.createElement(layer, layerContext)
}, i);
}
return null;
})
});
};
var CirclePacking = function CirclePacking(_ref2) {
var theme = _ref2.theme,
_ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
_ref2$animate = _ref2.animate,
animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate,
_ref2$motionConfig = _ref2.motionConfig,
motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig,
otherProps = _objectWithoutProperties(_ref2, ["theme", "isInteractive", "animate", "motionConfig"]);
return jsxRuntime.jsx(core.Container, {
isInteractive: isInteractive,
animate: animate,
motionConfig: motionConfig,
theme: theme,
children: jsxRuntime.jsx(InnerCirclePacking, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePacking = function ResponsiveCirclePacking(props) {
return jsxRuntime.jsx(core.ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsxRuntime.jsx(CirclePacking, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
var interpolatePosition = function interpolatePosition(positionValue, radiusValue) {
return web.to([positionValue, radiusValue], function (position, radius) {
return position - radius;
});
};
var interpolateSize = function interpolateSize(radiusValue) {
return web.to([radiusValue], function (radius) {
return radius * 2;
});
};
var interpolateBorderWidth = function interpolateBorderWidth(borderWidth, radiusValue) {
return web.to([radiusValue], function (radius) {
return Math.min(borderWidth, radius);
});
};
var CircleHtml = function CircleHtml(_ref) {
var node = _ref.node,
style = _ref.style,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick;
var size = interpolateSize(style.radius);
var handlers = useNodeMouseHandlers(node, {
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick
});
return jsxRuntime.jsx(web.animated.div, {
style: {
position: 'absolute',
top: interpolatePosition(style.y, style.radius),
left: interpolatePosition(style.x, style.radius),
height: size,
width: size,
borderRadius: style.radius,
backgroundColor: style.color,
borderWidth: interpolateBorderWidth(style.borderWidth, style.radius),
borderStyle: 'solid',
borderColor: style.borderColor,
boxSizing: 'border-box'
},
onMouseEnter: handlers.onMouseEnter,
onMouseMove: handlers.onMouseMove,
onMouseLeave: handlers.onMouseLeave,
onClick: handlers.onClick
});
};
var LabelHtml = function LabelHtml(_ref) {
var node = _ref.node,
label = _ref.label,
style = _ref.style;
var theme = core.useTheme();
var size = interpolateSize(style.radius);
return jsxRuntime.jsx(web.animated.div, {
style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
position: 'absolute',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
top: interpolatePosition(style.y, style.radius),
left: interpolatePosition(style.x, style.radius),
width: size,
height: size,
color: style.textColor,
opacity: style.opacity,
pointerEvents: 'none'
}),
children: label
}, node.id);
};
var InnerCirclePackingHtml = function InnerCirclePackingHtml(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$circleComponent = _ref.circleComponent,
circleComponent = _ref$circleComponent === void 0 ? CircleHtml : _ref$circleComponent,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
_ref$labelComponent = _ref.labelComponent,
labelComponent = _ref$labelComponent === void 0 ? LabelHtml : _ref$labelComponent,
_ref$layers = _ref.layers,
layers = _ref$layers === void 0 ? defaultProps.layers : _ref$layers,
isInteractive = _ref.isInteractive,
onMouseEnter = _ref.onMouseEnter,
onMouseMove = _ref.onMouseMove,
onMouseLeave = _ref.onMouseLeave,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role;
var _useDimensions = core.useDimensions(width, height, partialMargin),
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight,
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var layerById = {
circles: null,
labels: null
};
if (layers.includes('circles')) {
layerById.circles = jsxRuntime.jsx(Circles, {
nodes: zoomedNodes,
borderWidth: borderWidth,
borderColor: borderColor,
isInteractive: isInteractive,
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave,
onClick: onClick,
component: circleComponent,
tooltip: tooltip
}, "circles");
}
if (enableLabels && layers.includes('labels')) {
layerById.labels = jsxRuntime.jsx(Labels, {
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor,
component: labelComponent
}, "labels");
}
var layerContext = useCirclePackingLayerContext({
nodes: nodes
});
return jsxRuntime.jsx("div", {
role: role,
style: {
position: 'relative',
overflow: 'hidden',
width: outerWidth,
height: outerHeight
},
children: jsxRuntime.jsx("div", {
style: {
position: 'absolute',
top: margin.top,
left: margin.left
},
children: layers.map(function (layer, i) {
if (layerById[layer] !== undefined) {
return layerById[layer];
}
if (typeof layer === 'function') {
return jsxRuntime.jsx(React.Fragment, {
children: React.createElement(layer, layerContext)
}, i);
}
return null;
})
})
});
};
var CirclePackingHtml = function CirclePackingHtml(_ref2) {
var theme = _ref2.theme,
_ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
_ref2$animate = _ref2.animate,
animate = _ref2$animate === void 0 ? defaultProps.animate : _ref2$animate,
_ref2$motionConfig = _ref2.motionConfig,
motionConfig = _ref2$motionConfig === void 0 ? defaultProps.motionConfig : _ref2$motionConfig,
otherProps = _objectWithoutProperties(_ref2, ["theme", "isInteractive", "animate", "motionConfig"]);
return jsxRuntime.jsx(core.Container, {
isInteractive: isInteractive,
animate: animate,
motionConfig: motionConfig,
theme: theme,
children: jsxRuntime.jsx(InnerCirclePackingHtml, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePackingHtml = function ResponsiveCirclePackingHtml(props) {
return jsxRuntime.jsx(core.ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsxRuntime.jsx(CirclePackingHtml, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
var InnerCirclePackingCanvas = function InnerCirclePackingCanvas(_ref) {
var data = _ref.data,
_ref$id = _ref.id,
id = _ref$id === void 0 ? defaultProps.id : _ref$id,
_ref$value = _ref.value,
value = _ref$value === void 0 ? defaultProps.value : _ref$value,
valueFormat = _ref.valueFormat,
width = _ref.width,
height = _ref.height,
partialMargin = _ref.margin,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
_ref$leavesOnly = _ref.leavesOnly,
leavesOnly = _ref$leavesOnly === void 0 ? defaultProps.leavesOnly : _ref$leavesOnly,
_ref$colors = _ref.colors,
colors$1 = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
_ref$colorBy = _ref.colorBy,
colorBy = _ref$colorBy === void 0 ? defaultProps.colorBy : _ref$colorBy,
_ref$inheritColorFrom = _ref.inheritColorFromParent,
inheritColorFromParent = _ref$inheritColorFrom === void 0 ? defaultProps.inheritColorFromParent : _ref$inheritColorFrom,
_ref$childColor = _ref.childColor,
childColor = _ref$childColor === void 0 ? defaultProps.childColor : _ref$childColor,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? defaultProps.borderWidth : _ref$borderWidth,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
_ref$enableLabels = _ref.enableLabels,
enableLabels = _ref$enableLabels === void 0 ? defaultProps.enableLabels : _ref$enableLabels,
_ref$label = _ref.label,
label = _ref$label === void 0 ? defaultProps.label : _ref$label,
labelsFilter = _ref.labelsFilter,
_ref$labelsSkipRadius = _ref.labelsSkipRadius,
labelsSkipRadius = _ref$labelsSkipRadius === void 0 ? defaultProps.labelsSkipRadius : _ref$labelsSkipRadius,
_ref$labelTextColor = _ref.labelTextColor,
labelTextColor = _ref$labelTextColor === void 0 ? defaultProps.labelTextColor : _ref$labelTextColor,
isInteractive = _ref.isInteractive,
onMouseMove = _ref.onMouseMove,
onClick = _ref.onClick,
_ref$tooltip = _ref.tooltip,
tooltip$1 = _ref$tooltip === void 0 ? defaultProps.tooltip : _ref$tooltip,
zoomedId = _ref.zoomedId,
_ref$role = _ref.role,
role = _ref$role === void 0 ? defaultProps.role : _ref$role,
_ref$pixelRatio = _ref.pixelRatio,
pixelRatio = _ref$pixelRatio === void 0 ? defaultProps.pixelRatio : _ref$pixelRatio;
var canvasEl = React.useRef(null);
var theme = core.useTheme();
var _useDimensions = core.useDimensions(width, height, partialMargin),
margin = _useDimensions.margin,
innerWidth = _useDimensions.innerWidth,
innerHeight = _useDimensions.innerHeight,
outerWidth = _useDimensions.outerWidth,
outerHeight = _useDimensions.outerHeight;
var nodes = useCirclePacking({
data: data,
id: id,
value: value,
valueFormat: valueFormat,
width: innerWidth,
height: innerHeight,
padding: padding,
leavesOnly: leavesOnly,
colors: colors$1,
colorBy: colorBy,
inheritColorFromParent: inheritColorFromParent,
childColor: childColor
});
var zoomedNodes = useCirclePackingZoom(nodes, zoomedId, innerWidth, innerHeight);
var labels = useCirclePackingLabels({
nodes: zoomedNodes,
label: label,
filter: labelsFilter,
skipRadius: labelsSkipRadius,
textColor: labelTextColor
});
var getBorderColor = colors.useInheritedColor(borderColor, theme);
React.useEffect(function () {
if (!canvasEl.current) return;
canvasEl.current.width = outerWidth * pixelRatio;
canvasEl.current.height = outerHeight * pixelRatio;
var ctx = canvasEl.current.getContext('2d');
ctx.scale(pixelRatio, pixelRatio);
ctx.fillStyle = theme.background;
ctx.fillRect(0, 0, outerWidth, outerHeight);
ctx.save();
ctx.translate(margin.left, margin.top);
zoomedNodes.forEach(function (node) {
if (borderWidth > 0) {
ctx.strokeStyle = getBorderColor(node);
ctx.lineWidth = borderWidth;
}
ctx.beginPath();
ctx.arc(node.x, node.y, node.radius, 0, 2 * Math.PI);
ctx.fillStyle = node.color;
ctx.fill();
if (borderWidth > 0) {
ctx.stroke();
}
});
if (enableLabels) {
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.node.x, label.node.y);
});
}
}, [canvasEl, innerWidth, innerHeight, outerWidth, outerHeight, margin.top, margin.left, theme, pixelRatio, zoomedNodes, enableLabels, labels, borderWidth, getBorderColor]);
var getNodeFromMouseEvent = useMouseCircleDetection({
nodes: zoomedNodes,
canvasEl: canvasEl,
margin: margin
});
var _useTooltip = tooltip.useTooltip(),
showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
hideTooltip = _useTooltip.hideTooltip;
var handleMouseHover = React.useCallback(function (event) {
var node = getNodeFromMouseEvent(event);
if (node) {
onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(node, event);
showTooltipFromEvent(React.createElement(tooltip$1, node), event);
} else {
hideTooltip();
}
}, [getNodeFromMouseEvent, showTooltipFromEvent, tooltip$1, hideTooltip]);
var handleMouseLeave = React.useCallback(function () {
hideTooltip();
}, [hideTooltip]);
var handleClick = React.useCallback(function (event) {
if (!onClick) return;
var node = getNodeFromMouseEvent(event);
if (node) {
onClick(node, event);
}
}, [getNodeFromMouseEvent, onClick]);
return jsxRuntime.jsx("canvas", {
ref: canvasEl,
width: outerWidth * pixelRatio,
height: outerHeight * pixelRatio,
style: {
width: outerWidth,
height: outerHeight,
cursor: isInteractive ? 'auto' : 'normal'
},
role: role,
onMouseEnter: isInteractive ? handleMouseHover : undefined,
onMouseMove: isInteractive ? handleMouseHover : undefined,
onMouseLeave: isInteractive ? handleMouseLeave : undefined,
onClick: isInteractive ? handleClick : undefined
});
};
var CirclePackingCanvas = function CirclePackingCanvas(_ref2) {
var _ref2$isInteractive = _ref2.isInteractive,
isInteractive = _ref2$isInteractive === void 0 ? defaultProps.isInteractive : _ref2$isInteractive,
theme = _ref2.theme,
otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "theme"]);
return jsxRuntime.jsx(core.Container, {
isInteractive: isInteractive,
theme: theme,
children: jsxRuntime.jsx(InnerCirclePackingCanvas, _objectSpread2({
isInteractive: isInteractive
}, otherProps))
});
};
var ResponsiveCirclePackingCanvas = function ResponsiveCirclePackingCanvas(props) {
return jsxRuntime.jsx(core.ResponsiveWrapper, {
children: function children(_ref) {
var width = _ref.width,
height = _ref.height;
return jsxRuntime.jsx(CirclePackingCanvas, _objectSpread2({
width: width,
height: height
}, props));
}
});
};
exports.CirclePacking = CirclePacking;
exports.CirclePackingCanvas = CirclePackingCanvas;
exports.CirclePackingHtml = CirclePackingHtml;
exports.InnerCirclePackingHtml = InnerCirclePackingHtml;
exports.ResponsiveCirclePacking = ResponsiveCirclePacking;
exports.ResponsiveCirclePackingCanvas = ResponsiveCirclePackingCanvas;
exports.ResponsiveCirclePackingHtml = ResponsiveCirclePackingHtml;
exports.defaultProps = defaultProps;
exports.useCirclePacking = useCirclePacking;
exports.useCirclePackingLabels = useCirclePackingLabels;
exports.useCirclePackingLayerContext = useCirclePackingLayerContext;
exports.useCirclePackingZoom = useCirclePackingZoom;
exports.useMouseCircleDetection = useMouseCircleDetection;
exports.useNodeMouseHandlers = useNodeMouseHandlers;
Object.defineProperty(exports, '__esModule', { value: true });
})));
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("react"),require("@nivo/core"),require("d3-hierarchy"),require("lodash/cloneDeep"),require("lodash/sortBy"),require("@nivo/colors"),require("@nivo/tooltip"),require("react/jsx-runtime"),require("@react-spring/web")):"function"==typeof define&&define.amd?define(["exports","react","@nivo/core","d3-hierarchy","lodash/cloneDeep","lodash/sortBy","@nivo/colors","@nivo/tooltip","react/jsx-runtime","@react-spring/web"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).nivo=e.nivo||{},e.React,e.nivo,e.d3,e["lodash/cloneDeep"],e["lodash/sortBy"],e.nivo,e.nivo,e["react/jsx-runtime"],e["@react-spring/web"])}(this,(function(e,o,r,n,i,t,l,a,d,u){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var o=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),o.default=e,Object.freeze(o)}var v=c(o),f=s(i),h=s(t);function p(){return p=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(this,arguments)}function m(e,o){if(null==e)return{};var r,n,i={},t=Object.keys(e);for(n=0;n<t.length;n++)r=t[n],o.indexOf(r)>=0||(i[r]=e[r]);return i}var b,C=function(e){var o,i=e.data,t=e.id,a=e.value,d=e.valueFormat,u=e.width,s=e.height,c=e.padding,v=e.leavesOnly,p=e.colors,m=e.colorBy,b=e.inheritColorFromParent,C=e.childColor,y=r.usePropertyAccessor(t),x=r.usePropertyAccessor(a),g=r.useValueFormatter(d),M=l.useOrdinalColorScale(p,m),k=r.useTheme(),j=l.useInheritedColor(C,k),E=f.default(i),P=n.hierarchy(E).sum(x),w=n.pack().size([u,s]).padding(c)(P),I=v?w.leaves():w.descendants(),F=h.default(I,"depth"),W=null!=(o=P.value)?o:0,R=F.reduce((function(e,o){var r,n=y(o.data),i=o.value,t=100*i/W,l=o.ancestors().map((function(e){return y(e.data)}));o.parent&&(r=e.find((function(e){return e.id===y(o.parent.data)})));var a={id:n,path:l,value:i,percentage:t,formattedValue:d?g(i):t.toFixed(2)+"%",x:o.x,y:o.y,radius:o.r,color:"",data:o.data,depth:o.depth,height:o.height};return b&&r&&a.depth>1?a.color=j(r):a.color=M(a),[].concat(e,[a])}),[]);return R},y=function(e,r,n,i){return o.useMemo((function(){if(!r)return e;var o=e.find((function(e){return e.id===r}));if(!o)return e;var t=Math.min(n,i)/(2*o.radius),l=n/2-o.x*t,a=i/2-o.y*t;return e.map((function(e){return p({},e,{x:e.x*t+l,y:e.y*t+a,radius:e.radius*t})}))}),[e,r,n,i])},x=function(e){var n=e.nodes,i=e.label,t=e.filter,a=e.skipRadius,d=e.textColor,u=r.usePropertyAccessor(i),s=r.useTheme(),c=l.useInheritedColor(d,s),v=o.useMemo((function(){return n.filter((function(e){return e.radius>=a})).map((function(e){return{label:u(e),textColor:c(e),node:e}}))}),[n,a,u,c]);return o.useMemo((function(){return t?v.filter(t):v}),[v,t])},g=function(e,r){var n=r.onMouseEnter,i=r.onMouseMove,t=r.onMouseLeave,l=r.onClick;return o.useMemo((function(){return{onMouseEnter:n?function(o){n(e,o)}:void 0,onMouseMove:i?function(o){i(e,o)}:void 0,onMouseLeave:t?function(o){t(e,o)}:void 0,onClick:l?function(o){l(e,o)}:void 0}}),[e,n,i,t,l])},M=function(e){var n=e.nodes,i=e.canvasEl,t=e.margin,l=o.useMemo((function(){return h.default(n,"height")}),[n]);return o.useCallback((function(e){if(!i.current)return null;var o=r.getRelativeCursor(i.current,e),n=o[0],a=o[1];return l.find((function(e){return r.getDistance(e.x,e.y,n-t.left,a-t.top)<=e.radius}))}),[i,t,l])},k=function(e){var r=e.nodes;return o.useMemo((function(){return{nodes:r}}),[r])},j={id:"id",value:"value",padding:0,leavesOnly:!1,layers:["circles","labels"],colors:{scheme:"nivo"},colorBy:"depth",inheritColorFromParent:!1,childColor:{from:"color",modifiers:[["darker",.3]]},borderWidth:0,borderColor:{from:"color",modifiers:[["darker",.3]]},defs:[],fill:[],enableLabels:!1,label:"id",labelTextColor:{from:"color",modifiers:[["darker",1.6]]},labelsSkipRadius:8,isInteractive:!0,tooltip:function(e){var o=e.id,r=e.formattedValue,n=e.color;return d.jsx(a.BasicTooltip,{id:o,value:r,enableChip:!0,color:n})},animate:!0,motionConfig:"gentle",role:"img",pixelRatio:"undefined"!=typeof window&&null!=(b=window.devicePixelRatio)?b:1},E=function(e){return u.to([e],(function(e){return Math.max(0,e)}))},P=function(e){var n=e.nodes,i=e.borderWidth,t=e.borderColor,s=e.component,c=e.isInteractive,f=e.onMouseEnter,h=e.onMouseMove,m=e.onMouseLeave,b=e.onClick,C=e.tooltip,y=a.useTooltip(),x=y.showTooltipFromEvent,g=y.hideTooltip,M=o.useMemo((function(){if(c)return function(e,r){x(o.createElement(C,e),r),null==f||f(e,r)}}),[c,x,C,f]),k=o.useMemo((function(){if(c)return function(e,r){x(o.createElement(C,e),r),null==h||h(e,r)}}),[c,x,C,h]),j=o.useMemo((function(){if(c)return function(e,o){g(),null==m||m(e,o)}}),[c,g,m]),P=o.useMemo((function(){if(c)return function(e,o){null==b||b(e,o)}}),[c,b]),w=r.useMotionConfig(),I=w.animate,F=w.config,W=r.useTheme(),R=l.useInheritedColor(t,W),L=o.useMemo((function(){return function(e){return{enter:function(o){return{x:o.x,y:o.y,radius:0,color:o.color,borderColor:e(o),opacity:0}},update:function(o){return{x:o.x,y:o.y,radius:o.radius,color:o.color,borderColor:e(o),opacity:1}},leave:function(o){return{x:o.x,y:o.y,radius:0,color:o.color,borderColor:e(o),opacity:0}}}}(R)}),[R]),T=u.useTransition(n,{keys:function(e){return e.id},initial:L.update,from:L.enter,enter:L.update,update:L.update,leave:L.leave,config:F,immediate:!I});return d.jsx(d.Fragment,{children:T((function(e,o){return v.createElement(s,{key:o.id,node:o,style:p({},e,{radius:E(e.radius),borderWidth:i}),onMouseEnter:M,onMouseMove:k,onMouseLeave:j,onClick:P})}))})},w=function(e){var o=e.node,r=e.style,n=e.onMouseEnter,i=e.onMouseMove,t=e.onMouseLeave,l=e.onClick,a=g(o,{onMouseEnter:n,onMouseMove:i,onMouseLeave:t,onClick:l});return d.jsx(u.animated.circle,{cx:r.x,cy:r.y,r:r.radius,fill:o.fill||r.color,stroke:r.borderColor,strokeWidth:r.borderWidth,opacity:r.opacity,onMouseEnter:a.onMouseEnter,onMouseMove:a.onMouseMove,onMouseLeave:a.onMouseLeave,onClick:a.onClick},o.id)},I=function(e){var n=e.nodes,i=e.label,t=e.filter,l=e.skipRadius,a=e.textColor,s=e.component,c=r.useMotionConfig(),v=c.animate,f=c.config,h=x({nodes:n,label:i,filter:t,skipRadius:l,textColor:a}),m=o.useMemo((function(){return{enter:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:0}},update:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:1}},leave:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:0}}}}),[]),b=u.useTransition(h,{keys:function(e){return e.node.id},initial:m.update,from:m.enter,enter:m.update,update:m.update,leave:m.leave,config:f,immediate:!v});return d.jsx(d.Fragment,{children:b((function(e,r){return o.createElement(s,{key:r.node.id,label:r.label,style:p({},e,{radius:E(e.radius)}),node:r.node})}))})},F=function(e){var o=e.node,n=e.label,i=e.style,t=r.useTheme();return d.jsx(u.animated.text,{x:i.x,y:i.y,textAnchor:"middle",dominantBaseline:"central",style:p({},t.labels.text,{fill:i.textColor,opacity:i.opacity,pointerEvents:"none"}),children:n},o.id)},W=["theme","isInteractive","animate","motionConfig","renderWrapper"],R=function(e){var n=e.data,i=e.id,t=void 0===i?j.id:i,l=e.value,a=void 0===l?j.value:l,u=e.valueFormat,s=e.width,c=e.height,v=e.margin,f=e.padding,h=void 0===f?j.padding:f,p=e.leavesOnly,m=void 0===p?j.leavesOnly:p,b=e.colors,x=void 0===b?j.colors:b,g=e.colorBy,M=void 0===g?j.colorBy:g,E=e.inheritColorFromParent,W=void 0===E?j.inheritColorFromParent:E,R=e.childColor,L=void 0===R?j.childColor:R,T=e.borderWidth,O=void 0===T?j.borderWidth:T,B=e.borderColor,S=void 0===B?j.borderColor:B,D=e.circleComponent,H=void 0===D?w:D,q=e.defs,z=void 0===q?j.defs:q,A=e.fill,_=void 0===A?j.fill:A,V=e.enableLabels,K=void 0===V?j.enableLabels:V,N=e.label,Z=void 0===N?j.label:N,G=e.labelsFilter,J=e.labelsSkipRadius,Q=void 0===J?j.labelsSkipRadius:J,U=e.labelTextColor,X=void 0===U?j.labelTextColor:U,Y=e.labelComponent,$=void 0===Y?F:Y,ee=e.layers,oe=void 0===ee?j.layers:ee,re=e.isInteractive,ne=e.onMouseEnter,ie=e.onMouseMove,te=e.onMouseLeave,le=e.onClick,ae=e.tooltip,de=void 0===ae?j.tooltip:ae,ue=e.zoomedId,se=e.role,ce=void 0===se?j.role:se,ve=r.useDimensions(s,c,v),fe=ve.outerWidth,he=ve.outerHeight,pe=ve.margin,me=ve.innerWidth,be=ve.innerHeight,Ce=C({data:n,id:t,value:a,valueFormat:u,width:me,height:be,padding:h,leavesOnly:m,colors:x,colorBy:M,inheritColorFromParent:W,childColor:L}),ye=y(Ce,ue,me,be),xe=o.useMemo((function(){return r.bindDefs(z,ye,_,{targetKey:"fill"})}),[z,ye,_]),ge={circles:null,labels:null};oe.includes("circles")&&(ge.circles=d.jsx(P,{nodes:ye,borderWidth:O,borderColor:S,isInteractive:re,onMouseEnter:ne,onMouseMove:ie,onMouseLeave:te,onClick:le,component:H,tooltip:de},"circles")),K&&oe.includes("labels")&&(ge.labels=d.jsx(I,{nodes:ye,label:Z,filter:G,skipRadius:Q,textColor:X,component:$},"labels"));var Me=k({nodes:Ce});return d.jsx(r.SvgWrapper,{width:fe,height:he,margin:pe,defs:xe,role:ce,children:oe.map((function(e,r){return void 0!==ge[e]?ge[e]:"function"==typeof e?d.jsx(o.Fragment,{children:o.createElement(e,Me)},r):null}))})},L=function(e){var o=e.theme,n=e.isInteractive,i=void 0===n?j.isInteractive:n,t=e.animate,l=void 0===t?j.animate:t,a=e.motionConfig,u=void 0===a?j.motionConfig:a,s=e.renderWrapper,c=m(e,W);return d.jsx(r.Container,{isInteractive:i,animate:l,motionConfig:u,renderWrapper:s,theme:o,children:d.jsx(R,p({isInteractive:i},c))})},T=function(e,o){return u.to([e,o],(function(e,o){return e-o}))},O=function(e){return u.to([e],(function(e){return 2*e}))},B=function(e){var o,r,n=e.node,i=e.style,t=e.onMouseEnter,l=e.onMouseMove,a=e.onMouseLeave,s=e.onClick,c=O(i.radius),v=g(n,{onMouseEnter:t,onMouseMove:l,onMouseLeave:a,onClick:s});return d.jsx(u.animated.div,{style:{position:"absolute",top:T(i.y,i.radius),left:T(i.x,i.radius),height:c,width:c,borderRadius:i.radius,backgroundColor:i.color,borderWidth:(o=i.borderWidth,r=i.radius,u.to([r],(function(e){return Math.min(o,e)}))),borderStyle:"solid",borderColor:i.borderColor,boxSizing:"border-box"},onMouseEnter:v.onMouseEnter,onMouseMove:v.onMouseMove,onMouseLeave:v.onMouseLeave,onClick:v.onClick})},S=function(e){var o=e.node,n=e.label,i=e.style,t=r.useTheme(),l=O(i.radius);return d.jsx(u.animated.div,{style:p({},t.labels.text,{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",top:T(i.y,i.radius),left:T(i.x,i.radius),width:l,height:l,color:i.textColor,opacity:i.opacity,pointerEvents:"none"}),children:n},o.id)},D=["theme","isInteractive","animate","motionConfig"],H=function(e){var n=e.data,i=e.id,t=void 0===i?j.id:i,l=e.value,a=void 0===l?j.value:l,u=e.valueFormat,s=e.width,c=e.height,v=e.margin,f=e.padding,h=void 0===f?j.padding:f,p=e.leavesOnly,m=void 0===p?j.leavesOnly:p,b=e.colors,x=void 0===b?j.colors:b,g=e.colorBy,M=void 0===g?j.colorBy:g,E=e.inheritColorFromParent,w=void 0===E?j.inheritColorFromParent:E,F=e.childColor,W=void 0===F?j.childColor:F,R=e.borderWidth,L=void 0===R?j.borderWidth:R,T=e.borderColor,O=void 0===T?j.borderColor:T,D=e.circleComponent,H=void 0===D?B:D,q=e.enableLabels,z=void 0===q?j.enableLabels:q,A=e.label,_=void 0===A?j.label:A,V=e.labelsFilter,K=e.labelsSkipRadius,N=void 0===K?j.labelsSkipRadius:K,Z=e.labelTextColor,G=void 0===Z?j.labelTextColor:Z,J=e.labelComponent,Q=void 0===J?S:J,U=e.layers,X=void 0===U?j.layers:U,Y=e.isInteractive,$=e.onMouseEnter,ee=e.onMouseMove,oe=e.onMouseLeave,re=e.onClick,ne=e.tooltip,ie=void 0===ne?j.tooltip:ne,te=e.zoomedId,le=e.role,ae=void 0===le?j.role:le,de=r.useDimensions(s,c,v),ue=de.outerWidth,se=de.outerHeight,ce=de.margin,ve=de.innerWidth,fe=de.innerHeight,he=C({data:n,id:t,value:a,valueFormat:u,width:ve,height:fe,padding:h,leavesOnly:m,colors:x,colorBy:M,inheritColorFromParent:w,childColor:W}),pe=y(he,te,ve,fe),me={circles:null,labels:null};X.includes("circles")&&(me.circles=d.jsx(P,{nodes:pe,borderWidth:L,borderColor:O,isInteractive:Y,onMouseEnter:$,onMouseMove:ee,onMouseLeave:oe,onClick:re,component:H,tooltip:ie},"circles")),z&&X.includes("labels")&&(me.labels=d.jsx(I,{nodes:pe,label:_,filter:V,skipRadius:N,textColor:G,component:Q},"labels"));var be=k({nodes:he});return d.jsx("div",{role:ae,style:{position:"relative",overflow:"hidden",width:ue,height:se},children:d.jsx("div",{style:{position:"absolute",top:ce.top,left:ce.left},children:X.map((function(e,r){return void 0!==me[e]?me[e]:"function"==typeof e?d.jsx(o.Fragment,{children:o.createElement(e,be)},r):null}))})})},q=function(e){var o=e.theme,n=e.isInteractive,i=void 0===n?j.isInteractive:n,t=e.animate,l=void 0===t?j.animate:t,a=e.motionConfig,u=void 0===a?j.motionConfig:a,s=m(e,D);return d.jsx(r.Container,{isInteractive:i,animate:l,motionConfig:u,theme:o,children:d.jsx(H,p({isInteractive:i},s))})},z=["isInteractive","theme"],A=function(e){var n=e.data,i=e.id,t=void 0===i?j.id:i,u=e.value,s=void 0===u?j.value:u,c=e.valueFormat,v=e.width,f=e.height,h=e.margin,p=e.padding,m=void 0===p?j.padding:p,b=e.leavesOnly,g=void 0===b?j.leavesOnly:b,k=e.colors,E=void 0===k?j.colors:k,P=e.colorBy,w=void 0===P?j.colorBy:P,I=e.inheritColorFromParent,F=void 0===I?j.inheritColorFromParent:I,W=e.childColor,R=void 0===W?j.childColor:W,L=e.borderWidth,T=void 0===L?j.borderWidth:L,O=e.borderColor,B=void 0===O?j.borderColor:O,S=e.enableLabels,D=void 0===S?j.enableLabels:S,H=e.label,q=void 0===H?j.label:H,z=e.labelsFilter,A=e.labelsSkipRadius,_=void 0===A?j.labelsSkipRadius:A,V=e.labelTextColor,K=void 0===V?j.labelTextColor:V,N=e.isInteractive,Z=e.onMouseMove,G=e.onClick,J=e.tooltip,Q=void 0===J?j.tooltip:J,U=e.zoomedId,X=e.role,Y=void 0===X?j.role:X,$=e.pixelRatio,ee=void 0===$?j.pixelRatio:$,oe=o.useRef(null),re=r.useTheme(),ne=r.useDimensions(v,f,h),ie=ne.margin,te=ne.innerWidth,le=ne.innerHeight,ae=ne.outerWidth,de=ne.outerHeight,ue=C({data:n,id:t,value:s,valueFormat:c,width:te,height:le,padding:m,leavesOnly:g,colors:E,colorBy:w,inheritColorFromParent:F,childColor:R}),se=y(ue,U,te,le),ce=x({nodes:se,label:q,filter:z,skipRadius:_,textColor:K}),ve=l.useInheritedColor(B,re);o.useEffect((function(){if(oe.current){oe.current.width=ae*ee,oe.current.height=de*ee;var e=oe.current.getContext("2d");e.scale(ee,ee),e.fillStyle=re.background,e.fillRect(0,0,ae,de),e.save(),e.translate(ie.left,ie.top),se.forEach((function(o){T>0&&(e.strokeStyle=ve(o),e.lineWidth=T),e.beginPath(),e.arc(o.x,o.y,o.radius,0,2*Math.PI),e.fillStyle=o.color,e.fill(),T>0&&e.stroke()})),D&&(e.textAlign="center",e.textBaseline="middle",e.font=re.labels.text.fontSize+"px "+re.labels.text.fontFamily,ce.forEach((function(o){e.fillStyle=o.textColor,e.fillText(""+o.label,o.node.x,o.node.y)})))}}),[oe,te,le,ae,de,ie.top,ie.left,re,ee,se,D,ce,T,ve]);var fe=M({nodes:se,canvasEl:oe,margin:ie}),he=a.useTooltip(),pe=he.showTooltipFromEvent,me=he.hideTooltip,be=o.useCallback((function(e){var r=fe(e);r?(null==Z||Z(r,e),pe(o.createElement(Q,r),e)):me()}),[fe,pe,Q,me]),Ce=o.useCallback((function(){me()}),[me]),ye=o.useCallback((function(e){if(G){var o=fe(e);o&&G(o,e)}}),[fe,G]);return d.jsx("canvas",{ref:oe,width:ae*ee,height:de*ee,style:{width:ae,height:de,cursor:N?"auto":"normal"},role:Y,onMouseEnter:N?be:void 0,onMouseMove:N?be:void 0,onMouseLeave:N?Ce:void 0,onClick:N?ye:void 0})},_=function(e){var o=e.isInteractive,n=void 0===o?j.isInteractive:o,i=e.theme,t=m(e,z);return d.jsx(r.Container,{isInteractive:n,theme:i,children:d.jsx(A,p({isInteractive:n},t))})};e.CirclePacking=L,e.CirclePackingCanvas=_,e.CirclePackingHtml=q,e.InnerCirclePackingHtml=H,e.ResponsiveCirclePacking=function(e){return d.jsx(r.ResponsiveWrapper,{children:function(o){var r=o.width,n=o.height;return d.jsx(L,p({width:r,height:n},e))}})},e.ResponsiveCirclePackingCanvas=function(e){return d.jsx(r.ResponsiveWrapper,{children:function(o){var r=o.width,n=o.height;return d.jsx(_,p({width:r,height:n},e))}})},e.ResponsiveCirclePackingHtml=function(e){return d.jsx(r.ResponsiveWrapper,{children:function(o){var r=o.width,n=o.height;return d.jsx(q,p({width:r,height:n},e))}})},e.defaultProps=j,e.useCirclePacking=C,e.useCirclePackingLabels=x,e.useCirclePackingLayerContext=k,e.useCirclePackingZoom=y,e.useMouseCircleDetection=M,e.useNodeMouseHandlers=g,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=nivo-circle-packing.umd.js.map

2

dist/types/CirclePacking.d.ts
/// <reference types="react" />
import { CirclePackingSvgProps } from './types';
export declare const CirclePacking: <RawDatum>({ theme, isInteractive, animate, motionConfig, ...otherProps }: Partial<Omit<CirclePackingSvgProps<RawDatum>, "height" | "width" | "data">> & Pick<CirclePackingSvgProps<RawDatum>, "height" | "width" | "data">) => JSX.Element;
export declare const CirclePacking: <RawDatum>({ theme, isInteractive, animate, motionConfig, renderWrapper, ...otherProps }: Partial<Omit<CirclePackingSvgProps<RawDatum>, "height" | "width" | "data">> & Pick<CirclePackingSvgProps<RawDatum>, "height" | "width" | "data">) => JSX.Element;
//# sourceMappingURL=CirclePacking.d.ts.map

1

dist/types/types.d.ts

@@ -65,2 +65,3 @@ import * as React from 'react';

role: string;
renderWrapper?: boolean;
}

@@ -67,0 +68,0 @@ export declare type CirclePackingSvgProps<RawDatum> = CirclePackingCommonProps<RawDatum> & MouseHandlers<RawDatum> & SvgDefsAndFill<ComputedDatum<RawDatum>>;

12

package.json
{
"name": "@nivo/circle-packing",
"version": "0.74.1",
"version": "0.75.0",
"license": "MIT",

@@ -32,4 +32,4 @@ "author": {

"dependencies": {
"@nivo/colors": "0.74.1",
"@nivo/tooltip": "0.74.1",
"@nivo/colors": "0.75.0",
"@nivo/tooltip": "0.75.0",
"@react-spring/web": "9.3.1",

@@ -40,7 +40,7 @@ "d3-hierarchy": "^1.1.8",

"devDependencies": {
"@nivo/core": "0.74.1",
"@nivo/core": "0.75.0",
"@types/d3-hierarchy": "^1.1.7"
},
"peerDependencies": {
"@nivo/core": "0.74.1",
"@nivo/core": "0.75.0",
"prop-types": ">= 15.5.10 < 16.0.0",

@@ -52,3 +52,3 @@ "react": ">= 16.14.0 < 18.0.0"

},
"gitHead": "4ae8bc60779cb9bb8cb14b16726819217da16133"
"gitHead": "bfe8126876bf0e46ad82251935ab78178e901bcf"
}
dist/nivo-circle-packing.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/nivo-circle-packing.es.js.map

Sorry, the diff of this file is not supported yet

dist/nivo-circle-packing.umd.js.map

Sorry, the diff of this file is not supported yet

dist/types/CirclePacking.d.ts.map

Sorry, the diff of this file is not supported yet

dist/types/Circles.d.ts.map

Sorry, the diff of this file is not supported yet

dist/types/types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc