@nivo/heatmap - npm Package Compare versions

Comparing version 0.74.1 to 0.75.0

950

dist/nivo-heatmap.cjs.js

		@@ -1,950 +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 axes = require('@nivo/axes');
		var tooltip = require('@nivo/tooltip');
		var PropTypes = _interopDefault(require('prop-types'));
		var colors = require('@nivo/colors');
		var d3Scale = require('d3-scale');
		var web = require('@react-spring/web');
		var jsxRuntime = require('react/jsx-runtime');

		function _defineProperty(obj, key, value) {
		if (key in obj) {
		Object.defineProperty(obj, key, {
		value: value,
		enumerable: true,
		configurable: true,
		writable: true
		});
		} else {
		obj[key] = value;
		}
		return obj;
		}

		function ownKeys(object, enumerableOnly) {
		var keys = Object.keys(object);
		if (Object.getOwnPropertySymbols) {
		var symbols = Object.getOwnPropertySymbols(object);
		if (enumerableOnly) symbols = symbols.filter(function (sym) {
		return Object.getOwnPropertyDescriptor(object, sym).enumerable;
		});
		keys.push.apply(keys, symbols);
		}
		return keys;
		}
		function _objectSpread2(target) {
		for (var i = 1; i < arguments.length; i++) {
		var source = arguments[i] != null ? arguments[i] : {};
		if (i % 2) {
		ownKeys(Object(source), true).forEach(function (key) {
		_defineProperty(target, key, source[key]);
		});
		} else if (Object.getOwnPropertyDescriptors) {
		Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
		} else {
		ownKeys(Object(source)).forEach(function (key) {
		Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
		});
		}
		}
		return target;
		}

		var HeatMapPropTypes = {
		data: PropTypes.arrayOf(PropTypes.object).isRequired,
		indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
		keys: PropTypes.arrayOf(PropTypes.string).isRequired,
		minValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
		maxValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
		forceSquare: PropTypes.bool.isRequired,
		sizeVariation: PropTypes.number.isRequired,
		padding: PropTypes.number.isRequired,
		cellShape: PropTypes.oneOfType([PropTypes.oneOf(['rect', 'circle']), PropTypes.func]).isRequired,
		cellOpacity: PropTypes.number.isRequired,
		cellBorderWidth: PropTypes.number.isRequired,
		cellBorderColor: colors.inheritedColorPropType.isRequired,
		axisTop: axes.axisPropType,
		axisRight: axes.axisPropType,
		axisBottom: axes.axisPropType,
		axisLeft: axes.axisPropType,
		enableGridX: PropTypes.bool.isRequired,
		enableGridY: PropTypes.bool.isRequired,
		enableLabels: PropTypes.bool.isRequired,
		label: PropTypes.func.isRequired,
		labelTextColor: colors.inheritedColorPropType.isRequired,
		colors: core.quantizeColorScalePropType.isRequired,
		nanColor: PropTypes.string,
		isInteractive: PropTypes.bool,
		onClick: PropTypes.func.isRequired,
		hoverTarget: PropTypes.oneOf(['cell', 'row', 'column', 'rowColumn']).isRequired,
		cellHoverOpacity: PropTypes.number.isRequired,
		cellHoverOthersOpacity: PropTypes.number.isRequired,
		tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
		tooltip: PropTypes.func,
		pixelRatio: PropTypes.number.isRequired
		};
		var HeatMapSvgPropTypes = _objectSpread2(_objectSpread2({}, HeatMapPropTypes), {}, {
		role: PropTypes.string.isRequired
		});
		var HeatMapDefaultProps = {
		indexBy: 'id',
		minValue: 'auto',
		maxValue: 'auto',
		forceSquare: false,
		sizeVariation: 0,
		padding: 0,
		cellShape: 'rect',
		cellOpacity: 0.85,
		cellBorderWidth: 0,
		cellBorderColor: {
		from: 'color'
		},
		axisTop: {},
		axisLeft: {},
		enableGridX: false,
		enableGridY: false,
		enableLabels: true,
		label: function label(datum, key) {
		return datum[key];
		},
		labelTextColor: {
		from: 'color',
		modifiers: [['darker', 1.4]]
		},
		colors: 'nivo',
		nanColor: '#000000',
		isInteractive: true,
		onClick: core.noop,
		hoverTarget: 'rowColumn',
		cellHoverOpacity: 1,
		cellHoverOthersOpacity: 0.35,
		pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio \|\| 1 : 1
		};
		var HeatMapSvgDefaultProps = _objectSpread2(_objectSpread2({}, HeatMapDefaultProps), {}, {
		role: 'img'
		});

		function _arrayLikeToArray(arr, len) {
		if (len == null \|\| len > arr.length) len = arr.length;
		for (var i = 0, arr2 = new Array(len); i < len; i++) {
		arr2[i] = arr[i];
		}
		return arr2;
		}

		function _arrayWithoutHoles(arr) {
		if (Array.isArray(arr)) return _arrayLikeToArray(arr);
		}

		function _iterableToArray(iter) {
		if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
		}

		function _unsupportedIterableToArray(o, minLen) {
		if (!o) return;
		if (typeof o === "string") return _arrayLikeToArray(o, minLen);
		var n = Object.prototype.toString.call(o).slice(8, -1);
		if (n === "Object" && o.constructor) n = o.constructor.name;
		if (n === "Map" \|\| n === "Set") return Array.from(o);
		if (n === "Arguments" \|\| /^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
		}

		function _nonIterableSpread() {
		throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
		}

		function _toConsumableArray(arr) {
		return _arrayWithoutHoles(arr) \|\| _iterableToArray(arr) \|\| _unsupportedIterableToArray(arr) \|\| _nonIterableSpread();
		}

		function _arrayWithHoles(arr) {
		if (Array.isArray(arr)) return arr;
		}

		function _iterableToArrayLimit(arr, i) {
		if (typeof Symbol === "undefined" \|\| !(Symbol.iterator in Object(arr))) return;
		var _arr = [];
		var _n = true;
		var _d = false;
		var _e = undefined;
		try {
		for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
		_arr.push(_s.value);
		if (i && _arr.length === i) break;
		}
		} catch (err) {
		_d = true;
		_e = err;
		} finally {
		try {
		if (!_n && _i["return"] != null) _i["return"]();
		} finally {
		if (_d) throw _e;
		}
		}
		return _arr;
		}

		function _nonIterableRest() {
		throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
		}

		function _slicedToArray(arr, i) {
		return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _unsupportedIterableToArray(arr, i) \|\| _nonIterableRest();
		}

		var computeX = function computeX(column, cellWidth, padding) {
		return column * cellWidth + cellWidth * 0.5 + padding * column + padding;
		};
		var computeY = function computeY(row, cellHeight, padding) {
		return row * cellHeight + cellHeight * 0.5 + padding * row + padding;
		};
		var isHoverTargetByType = {
		cell: function cell(_cell, current) {
		return _cell.xKey === current.xKey && _cell.yKey === current.yKey;
		},
		row: function row(cell, current) {
		return cell.yKey === current.yKey;
		},
		column: function column(cell, current) {
		return cell.xKey === current.xKey;
		},
		rowColumn: function rowColumn(cell, current) {
		return cell.xKey === current.xKey \|\| cell.yKey === current.yKey;
		}
		};
		var computeCells = function computeCells(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		getIndex = _ref.getIndex,
		xScale = _ref.xScale,
		yScale = _ref.yScale,
		sizeScale = _ref.sizeScale,
		cellOpacity = _ref.cellOpacity,
		cellWidth = _ref.cellWidth,
		cellHeight = _ref.cellHeight,
		colorScale = _ref.colorScale,
		nanColor = _ref.nanColor,
		getLabel = _ref.getLabel,
		getLabelTextColor = _ref.getLabelTextColor;
		var cells = [];
		data.forEach(function (datum) {
		keys.forEach(function (key) {
		var value = datum[key];
		var label = getLabel(datum, key);
		var index = getIndex(datum);
		var sizeMultiplier = sizeScale ? sizeScale(value) : 1;
		var width = sizeMultiplier * cellWidth;
		var height = sizeMultiplier * cellHeight;
		var cell = {
		id: "".concat(key, ".").concat(index),
		xKey: key,
		yKey: index,
		x: xScale(key),
		y: yScale(index),
		width: width,
		height: height,
		value: value,
		label: label,
		color: isNaN(value) ? nanColor : colorScale(value),
		opacity: cellOpacity
		};
		cell.labelTextColor = getLabelTextColor(cell);
		cells.push(cell);
		});
		});
		return cells;
		};
		var useHeatMap = function useHeatMap(_ref2) {
		var data = _ref2.data,
		keys = _ref2.keys,
		indexBy = _ref2.indexBy,
		_ref2$minValue = _ref2.minValue,
		_minValue = _ref2$minValue === void 0 ? 'auto' : _ref2$minValue,
		_ref2$maxValue = _ref2.maxValue,
		_maxValue = _ref2$maxValue === void 0 ? 'auto' : _ref2$maxValue,
		width = _ref2.width,
		height = _ref2.height,
		padding = _ref2.padding,
		forceSquare = _ref2.forceSquare,
		sizeVariation = _ref2.sizeVariation,
		colors$1 = _ref2.colors,
		nanColor = _ref2.nanColor,
		cellOpacity = _ref2.cellOpacity,
		cellBorderColor = _ref2.cellBorderColor,
		label = _ref2.label,
		labelTextColor = _ref2.labelTextColor,
		hoverTarget = _ref2.hoverTarget,
		cellHoverOpacity = _ref2.cellHoverOpacity,
		cellHoverOthersOpacity = _ref2.cellHoverOthersOpacity;
		var _useState = react.useState(null),
		_useState2 = _slicedToArray(_useState, 2),
		currentCellId = _useState2[0],
		setCurrentCellId = _useState2[1];
		var getIndex = core.usePropertyAccessor(indexBy);
		var indices = react.useMemo(function () {
		return data.map(getIndex);
		}, [data, getIndex]);
		var getLabel = react.useMemo(function () {
		return core.getLabelGenerator(label);
		}, [label]);
		var layoutConfig = react.useMemo(function () {
		var columns = keys.length;
		var rows = data.length;
		var cellWidth = Math.max((width - padding * (columns + 1)) / columns, 0);
		var cellHeight = Math.max((height - padding * (rows + 1)) / rows, 0);
		var offsetX = 0;
		var offsetY = 0;
		if (forceSquare === true) {
		var cellSize = Math.min(cellWidth, cellHeight);
		cellWidth = cellSize;
		cellHeight = cellSize;
		offsetX = (width - ((cellWidth + padding) * columns + padding)) / 2;
		offsetY = (height - ((cellHeight + padding) * rows + padding)) / 2;
		}
		return {
		cellWidth: cellWidth,
		cellHeight: cellHeight,
		offsetX: offsetX,
		offsetY: offsetY
		};
		}, [data, keys, width, height, padding, forceSquare]);
		var scales = react.useMemo(function () {
		return {
		x: d3Scale.scaleOrdinal(keys.map(function (key, i) {
		return computeX(i, layoutConfig.cellWidth, padding);
		})).domain(keys),
		y: d3Scale.scaleOrdinal(indices.map(function (d, i) {
		return computeY(i, layoutConfig.cellHeight, padding);
		})).domain(indices)
		};
		}, [indices, keys, layoutConfig, padding]);
		var values = react.useMemo(function () {
		var minValue = _minValue;
		var maxValue = _maxValue;
		if (minValue === 'auto' \|\| maxValue === 'auto') {
		var allValues = data.reduce(function (acc, row) {
		return acc.concat(keys.map(function (key) {
		return row[key];
		}));
		}, []);
		if (minValue === 'auto') minValue = Math.min.apply(Math, _toConsumableArray(allValues));
		if (maxValue === 'auto') maxValue = Math.max.apply(Math, _toConsumableArray(allValues));
		}
		return {
		min: Math.min(minValue, maxValue),
		max: Math.max(maxValue, minValue)
		};
		}, [data, keys, _minValue, _maxValue]);
		var sizeScale = react.useMemo(function () {
		if (sizeVariation > 0) {
		return d3Scale.scaleLinear().range([1 - sizeVariation, 1]).domain([values.min, values.max]);
		}
		}, [sizeVariation, values]);
		var colorScale = react.useMemo(function () {
		return core.guessQuantizeColorScale(colors$1).domain([values.min, values.max]);
		}, [colors$1, values]);
		var theme = core.useTheme();
		var getCellBorderColor = colors.useInheritedColor(cellBorderColor, theme);
		var getLabelTextColor = colors.useInheritedColor(labelTextColor, theme);
		var cells = react.useMemo(function () {
		return computeCells({
		data: data,
		keys: keys,
		getIndex: getIndex,
		xScale: scales.x,
		yScale: scales.y,
		sizeScale: sizeScale,
		cellOpacity: cellOpacity,
		cellWidth: layoutConfig.cellWidth,
		cellHeight: layoutConfig.cellHeight,
		colorScale: colorScale,
		nanColor: nanColor,
		getLabel: getLabel,
		getLabelTextColor: getLabelTextColor
		});
		}, [data, keys, getIndex, scales, sizeScale, cellOpacity, layoutConfig, colorScale, nanColor, getLabel, getLabelTextColor]);
		var cellsWithCurrent = react.useMemo(function () {
		if (currentCellId === null) return cells;
		var isHoverTarget = isHoverTargetByType[hoverTarget];
		var currentCell = cells.find(function (cell) {
		return cell.id === currentCellId;
		});
		return cells.map(function (cell) {
		var opacity = isHoverTarget(cell, currentCell) ? cellHoverOpacity : cellHoverOthersOpacity;
		if (opacity === cell.opacity) return cell;
		return _objectSpread2(_objectSpread2({}, cell), {}, {
		opacity: opacity
		});
		});
		}, [cells, currentCellId, hoverTarget, cellHoverOpacity, cellHoverOthersOpacity]);
		return _objectSpread2(_objectSpread2({
		cells: cellsWithCurrent,
		getIndex: getIndex,
		xScale: scales.x,
		yScale: scales.y
		}, layoutConfig), {}, {
		sizeScale: sizeScale,
		currentCellId: currentCellId,
		setCurrentCellId: setCurrentCellId,
		colorScale: colorScale,
		getCellBorderColor: getCellBorderColor,
		getLabelTextColor: getLabelTextColor
		});
		};

		var HeatMapCells = function HeatMapCells(_ref) {
		var cells = _ref.cells,
		cellComponent = _ref.cellComponent,
		cellBorderWidth = _ref.cellBorderWidth,
		getCellBorderColor = _ref.getCellBorderColor,
		enableLabels = _ref.enableLabels,
		getLabelTextColor = _ref.getLabelTextColor,
		handleCellHover = _ref.handleCellHover,
		handleCellLeave = _ref.handleCellLeave,
		onClick = _ref.onClick;
		return cells.map(function (cell) {
		return react.createElement(cellComponent, {
		key: cell.id,
		data: cell,
		label: cell.label,
		x: cell.x,
		y: cell.y,
		width: cell.width,
		height: cell.height,
		color: cell.color,
		opacity: cell.opacity,
		borderWidth: cellBorderWidth,
		borderColor: getCellBorderColor(cell),
		enableLabel: enableLabels,
		textColor: getLabelTextColor(cell),
		onHover: handleCellHover ? function (event) {
		return handleCellHover(cell, event);
		} : undefined,
		onLeave: handleCellLeave,
		onClick: onClick
		});
		});
		};
		HeatMapCells.propTypes = {};

		var HeatMapCellRect = function HeatMapCellRect(_ref) {
		var data = _ref.data,
		label = _ref.label,
		x = _ref.x,
		y = _ref.y,
		width = _ref.width,
		height = _ref.height,
		color = _ref.color,
		opacity = _ref.opacity,
		borderWidth = _ref.borderWidth,
		borderColor = _ref.borderColor,
		enableLabel = _ref.enableLabel,
		textColor = _ref.textColor,
		onHover = _ref.onHover,
		onLeave = _ref.onLeave,
		onClick = _ref.onClick;
		var theme = core.useTheme();
		var _useMotionConfig = core.useMotionConfig(),
		animate = _useMotionConfig.animate,
		springConfig = _useMotionConfig.config;
		var animatedProps = web.useSpring({
		transform: "translate(".concat(x, ", ").concat(y, ")"),
		width: width,
		height: height,
		xOffset: width * -0.5,
		yOffset: height * -0.5,
		color: color,
		opacity: opacity,
		textColor: textColor,
		borderWidth: borderWidth,
		borderColor: borderColor,
		config: springConfig,
		immediate: !animate
		});
		return jsxRuntime.jsxs(web.animated.g, {
		transform: animatedProps.transform,
		style: {
		cursor: 'pointer'
		},
		onMouseEnter: onHover,
		onMouseMove: onHover,
		onMouseLeave: onLeave,
		onClick: onClick ? function (event) {
		return onClick(data, event);
		} : undefined,
		children: [jsxRuntime.jsx(web.animated.rect, {
		x: animatedProps.xOffset,
		y: animatedProps.yOffset,
		width: animatedProps.width,
		height: animatedProps.height,
		fill: animatedProps.color,
		fillOpacity: animatedProps.opacity,
		strokeWidth: animatedProps.borderWidth,
		stroke: animatedProps.borderColor,
		strokeOpacity: animatedProps.opacity
		}), enableLabel && jsxRuntime.jsx(web.animated.text, {
		dominantBaseline: "central",
		textAnchor: "middle",
		style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
		fill: animatedProps.textColor
		}),
		fillOpacity: animatedProps.opacity,
		children: label
		})]
		});
		};
		var HeatMapCellRect$1 = react.memo(HeatMapCellRect);

		var HeatMapCellCircle = function HeatMapCellCircle(_ref) {
		var data = _ref.data,
		label = _ref.label,
		x = _ref.x,
		y = _ref.y,
		width = _ref.width,
		height = _ref.height,
		color = _ref.color,
		opacity = _ref.opacity,
		borderWidth = _ref.borderWidth,
		borderColor = _ref.borderColor,
		enableLabel = _ref.enableLabel,
		textColor = _ref.textColor,
		onHover = _ref.onHover,
		onLeave = _ref.onLeave,
		onClick = _ref.onClick;
		var theme = core.useTheme();
		var _useMotionConfig = core.useMotionConfig(),
		animate = _useMotionConfig.animate,
		springConfig = _useMotionConfig.config;
		var animatedProps = web.useSpring({
		transform: "translate(".concat(x, ", ").concat(y, ")"),
		radius: Math.min(width, height) / 2,
		color: color,
		opacity: opacity,
		textColor: textColor,
		borderWidth: borderWidth,
		borderColor: borderColor,
		config: springConfig,
		immediate: !animate
		});
		return jsxRuntime.jsxs(web.animated.g, {
		transform: animatedProps.transform,
		style: {
		cursor: 'pointer'
		},
		onMouseEnter: onHover,
		onMouseMove: onHover,
		onMouseLeave: onLeave,
		onClick: onClick ? function (event) {
		return onClick(data, event);
		} : undefined,
		children: [jsxRuntime.jsx(web.animated.circle, {
		r: animatedProps.radius,
		fill: animatedProps.color,
		fillOpacity: animatedProps.opacity,
		strokeWidth: animatedProps.borderWidth,
		stroke: animatedProps.borderColor,
		strokeOpacity: animatedProps.opacity
		}), enableLabel && jsxRuntime.jsx(web.animated.text, {
		dominantBaseline: "central",
		textAnchor: "middle",
		style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
		fill: animatedProps.textColor
		}),
		fillOpacity: animatedProps.opacity,
		children: label
		})]
		});
		};
		var HeatMapCellCircle$1 = react.memo(HeatMapCellCircle);

		var HeatMapCellTooltip = function HeatMapCellTooltip(_ref) {
		var cell = _ref.cell,
		format = _ref.format,
		tooltip$1 = _ref.tooltip;
		return jsxRuntime.jsx(tooltip.BasicTooltip, {
		id: "".concat(cell.yKey, " - ").concat(cell.xKey),
		value: cell.value,
		enableChip: true,
		color: cell.color,
		format: format,
		renderContent: typeof tooltip$1 === 'function' ? tooltip$1.bind(null, _objectSpread2({}, cell)) : null
		});
		};
		var HeatMapCellTooltip$1 = react.memo(HeatMapCellTooltip);

		var HeatMap = function HeatMap(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		indexBy = _ref.indexBy,
		minValue = _ref.minValue,
		maxValue = _ref.maxValue,
		width = _ref.width,
		height = _ref.height,
		partialMargin = _ref.margin,
		forceSquare = _ref.forceSquare,
		padding = _ref.padding,
		sizeVariation = _ref.sizeVariation,
		cellShape = _ref.cellShape,
		cellOpacity = _ref.cellOpacity,
		cellBorderWidth = _ref.cellBorderWidth,
		cellBorderColor = _ref.cellBorderColor,
		axisTop = _ref.axisTop,
		axisRight = _ref.axisRight,
		axisBottom = _ref.axisBottom,
		axisLeft = _ref.axisLeft,
		enableGridX = _ref.enableGridX,
		enableGridY = _ref.enableGridY,
		enableLabels = _ref.enableLabels,
		label = _ref.label,
		labelTextColor = _ref.labelTextColor,
		colors = _ref.colors,
		nanColor = _ref.nanColor,
		isInteractive = _ref.isInteractive,
		onClick = _ref.onClick,
		hoverTarget = _ref.hoverTarget,
		cellHoverOpacity = _ref.cellHoverOpacity,
		cellHoverOthersOpacity = _ref.cellHoverOthersOpacity,
		tooltipFormat = _ref.tooltipFormat,
		tooltip$1 = _ref.tooltip,
		role = _ref.role;
		var _useDimensions = core.useDimensions(width, height, partialMargin),
		margin = _useDimensions.margin,
		innerWidth = _useDimensions.innerWidth,
		innerHeight = _useDimensions.innerHeight,
		outerWidth = _useDimensions.outerWidth,
		outerHeight = _useDimensions.outerHeight;
		var _useHeatMap = useHeatMap({
		data: data,
		keys: keys,
		indexBy: indexBy,
		minValue: minValue,
		maxValue: maxValue,
		width: innerWidth,
		height: innerHeight,
		padding: padding,
		forceSquare: forceSquare,
		sizeVariation: sizeVariation,
		colors: colors,
		nanColor: nanColor,
		cellOpacity: cellOpacity,
		cellBorderColor: cellBorderColor,
		label: label,
		labelTextColor: labelTextColor,
		hoverTarget: hoverTarget,
		cellHoverOpacity: cellHoverOpacity,
		cellHoverOthersOpacity: cellHoverOthersOpacity
		}),
		cells = _useHeatMap.cells,
		xScale = _useHeatMap.xScale,
		yScale = _useHeatMap.yScale,
		offsetX = _useHeatMap.offsetX,
		offsetY = _useHeatMap.offsetY,
		setCurrentCellId = _useHeatMap.setCurrentCellId,
		getCellBorderColor = _useHeatMap.getCellBorderColor,
		getLabelTextColor = _useHeatMap.getLabelTextColor;
		var _useTooltip = tooltip.useTooltip(),
		showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
		hideTooltip = _useTooltip.hideTooltip;
		var handleCellHover = react.useCallback(function (cell, event) {
		setCurrentCellId(cell.id);
		showTooltipFromEvent(jsxRuntime.jsx(HeatMapCellTooltip$1, {
		cell: cell,
		format: tooltipFormat,
		tooltip: tooltip$1
		}), event);
		}, [setCurrentCellId, showTooltipFromEvent, tooltipFormat, tooltip$1]);
		var handleCellLeave = react.useCallback(function () {
		setCurrentCellId(null);
		hideTooltip();
		}, [setCurrentCellId, hideTooltip]);
		var cellComponent;
		if (cellShape === 'rect') {
		cellComponent = HeatMapCellRect$1;
		} else if (cellShape === 'circle') {
		cellComponent = HeatMapCellCircle$1;
		} else {
		cellComponent = cellShape;
		}
		return jsxRuntime.jsxs(core.SvgWrapper, {
		width: outerWidth,
		height: outerHeight,
		margin: Object.assign({}, margin, {
		top: margin.top + offsetY,
		left: margin.left + offsetX
		}),
		role: role,
		children: [jsxRuntime.jsx(axes.Grid, {
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		xScale: enableGridX ? xScale : null,
		yScale: enableGridY ? yScale : null
		}), jsxRuntime.jsx(axes.Axes, {
		xScale: xScale,
		yScale: yScale,
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		top: axisTop,
		right: axisRight,
		bottom: axisBottom,
		left: axisLeft
		}), jsxRuntime.jsx(HeatMapCells, {
		cells: cells,
		cellComponent: cellComponent,
		cellBorderWidth: cellBorderWidth,
		getCellBorderColor: getCellBorderColor,
		enableLabels: enableLabels,
		getLabelTextColor: getLabelTextColor,
		handleCellHover: isInteractive ? handleCellHover : undefined,
		handleCellLeave: isInteractive ? handleCellLeave : undefined,
		onClick: isInteractive ? onClick : undefined
		})]
		});
		};
		var WrappedHeatMap = core.withContainer(HeatMap);
		WrappedHeatMap.defaultProps = HeatMapSvgDefaultProps;

		var renderRect = function renderRect(ctx, _ref, _ref2) {
		var enableLabels = _ref.enableLabels,
		theme = _ref.theme;
		var x = _ref2.x,
		y = _ref2.y,
		width = _ref2.width,
		height = _ref2.height,
		color = _ref2.color,
		opacity = _ref2.opacity,
		labelTextColor = _ref2.labelTextColor,
		label = _ref2.label;
		ctx.save();
		ctx.globalAlpha = opacity;
		ctx.fillStyle = color;
		ctx.fillRect(x - width / 2, y - height / 2, width, height);
		if (enableLabels === true) {
		ctx.fillStyle = labelTextColor;
		ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily);
		ctx.fillText(label, x, y);
		}
		ctx.restore();
		};
		var renderCircle = function renderCircle(ctx, _ref3, _ref4) {
		var enableLabels = _ref3.enableLabels,
		theme = _ref3.theme;
		var x = _ref4.x,
		y = _ref4.y,
		width = _ref4.width,
		height = _ref4.height,
		color = _ref4.color,
		opacity = _ref4.opacity,
		labelTextColor = _ref4.labelTextColor,
		label = _ref4.label;
		ctx.save();
		ctx.globalAlpha = opacity;
		var radius = Math.min(width, height) / 2;
		ctx.fillStyle = color;
		ctx.beginPath();
		ctx.arc(x, y, radius, 0, 2 * Math.PI);
		ctx.fill();
		if (enableLabels === true) {
		ctx.fillStyle = labelTextColor;
		ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily);
		ctx.fillText(label, x, y);
		}
		ctx.restore();
		};

		var HeatMapCanvas = function HeatMapCanvas(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		indexBy = _ref.indexBy,
		minValue = _ref.minValue,
		maxValue = _ref.maxValue,
		width = _ref.width,
		height = _ref.height,
		partialMargin = _ref.margin,
		forceSquare = _ref.forceSquare,
		padding = _ref.padding,
		sizeVariation = _ref.sizeVariation,
		cellShape = _ref.cellShape,
		cellOpacity = _ref.cellOpacity,
		cellBorderColor = _ref.cellBorderColor,
		axisTop = _ref.axisTop,
		axisRight = _ref.axisRight,
		axisBottom = _ref.axisBottom,
		axisLeft = _ref.axisLeft,
		enableLabels = _ref.enableLabels,
		label = _ref.label,
		labelTextColor = _ref.labelTextColor,
		colors = _ref.colors,
		nanColor = _ref.nanColor,
		isInteractive = _ref.isInteractive,
		onClick = _ref.onClick,
		hoverTarget = _ref.hoverTarget,
		cellHoverOpacity = _ref.cellHoverOpacity,
		cellHoverOthersOpacity = _ref.cellHoverOthersOpacity,
		tooltipFormat = _ref.tooltipFormat,
		tooltip$1 = _ref.tooltip,
		pixelRatio = _ref.pixelRatio;
		var canvasEl = react.useRef(null);
		var _useDimensions = core.useDimensions(width, height, partialMargin),
		margin = _useDimensions.margin,
		innerWidth = _useDimensions.innerWidth,
		innerHeight = _useDimensions.innerHeight,
		outerWidth = _useDimensions.outerWidth,
		outerHeight = _useDimensions.outerHeight;
		var _useHeatMap = useHeatMap({
		data: data,
		keys: keys,
		indexBy: indexBy,
		minValue: minValue,
		maxValue: maxValue,
		width: innerWidth,
		height: innerHeight,
		padding: padding,
		forceSquare: forceSquare,
		sizeVariation: sizeVariation,
		colors: colors,
		nanColor: nanColor,
		cellOpacity: cellOpacity,
		cellBorderColor: cellBorderColor,
		label: label,
		labelTextColor: labelTextColor,
		hoverTarget: hoverTarget,
		cellHoverOpacity: cellHoverOpacity,
		cellHoverOthersOpacity: cellHoverOthersOpacity
		}),
		cells = _useHeatMap.cells,
		xScale = _useHeatMap.xScale,
		yScale = _useHeatMap.yScale,
		offsetX = _useHeatMap.offsetX,
		offsetY = _useHeatMap.offsetY,
		currentCellId = _useHeatMap.currentCellId,
		setCurrentCellId = _useHeatMap.setCurrentCellId;
		var theme = core.useTheme();
		react.useEffect(function () {
		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.translate(margin.left + offsetX, margin.top + offsetY);
		axes.renderAxesToCanvas(ctx, {
		xScale: xScale,
		yScale: yScale,
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		top: axisTop,
		right: axisRight,
		bottom: axisBottom,
		left: axisLeft,
		theme: theme
		});
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		var renderCell;
		if (cellShape === 'rect') {
		renderCell = renderRect;
		} else {
		renderCell = renderCircle;
		}
		cells.forEach(function (cell) {
		renderCell(ctx, {
		enableLabels: enableLabels,
		theme: theme
		}, cell);
		});
		}, [canvasEl, cells, outerWidth, outerHeight, innerWidth, innerHeight, margin, offsetX, offsetY, cellShape, axisTop, axisRight, axisBottom, axisLeft, xScale, yScale, theme, enableLabels, pixelRatio]);
		var _useTooltip = tooltip.useTooltip(),
		showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
		hideTooltip = _useTooltip.hideTooltip;
		var handleMouseHover = react.useCallback(function (event) {
		var _getRelativeCursor = core.getRelativeCursor(canvasEl.current, event),
		_getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2),
		x = _getRelativeCursor2[0],
		y = _getRelativeCursor2[1];
		var cell = cells.find(function (c) {
		return core.isCursorInRect(c.x + margin.left + offsetX - c.width / 2, c.y + margin.top + offsetY - c.height / 2, c.width, c.height, x, y);
		});
		if (cell !== undefined) {
		setCurrentCellId(cell.id);
		showTooltipFromEvent(jsxRuntime.jsx(HeatMapCellTooltip$1, {
		cell: cell,
		tooltip: tooltip$1,
		format: tooltipFormat
		}), event);
		} else {
		setCurrentCellId(null);
		hideTooltip();
		}
		}, [canvasEl, cells, margin, offsetX, offsetY, setCurrentCellId, showTooltipFromEvent, hideTooltip, tooltip$1, tooltipFormat]);
		var handleMouseLeave = react.useCallback(function () {
		setCurrentCellId(null);
		hideTooltip();
		}, [setCurrentCellId, hideTooltip]);
		var handleClick = react.useCallback(function (event) {
		if (currentCellId === null) return;
		var currentCell = cells.find(function (cell) {
		return cell.id === currentCellId;
		});
		currentCell && onClick(currentCell, event);
		}, [cells, currentCellId, onClick]);
		return jsxRuntime.jsx("canvas", {
		ref: canvasEl,
		width: outerWidth * pixelRatio,
		height: outerHeight * pixelRatio,
		style: {
		width: outerWidth,
		height: outerHeight
		},
		onMouseEnter: isInteractive ? handleMouseHover : undefined,
		onMouseMove: isInteractive ? handleMouseHover : undefined,
		onMouseLeave: isInteractive ? handleMouseLeave : undefined,
		onClick: isInteractive ? handleClick : undefined
		});
		};
		var WrappedHeatMapCanvas = core.withContainer(HeatMapCanvas);
		WrappedHeatMapCanvas.defaultProps = HeatMapDefaultProps;

		var ResponsiveHeatMap = function ResponsiveHeatMap(props) {
		return jsxRuntime.jsx(core.ResponsiveWrapper, {
		children: function children(_ref) {
		var width = _ref.width,
		height = _ref.height;
		return jsxRuntime.jsx(WrappedHeatMap, _objectSpread2({
		width: width,
		height: height
		}, props));
		}
		});
		};

		var ResponsiveHeatMapCanvas = function ResponsiveHeatMapCanvas(props) {
		return jsxRuntime.jsx(core.ResponsiveWrapper, {
		children: function children(_ref) {
		var width = _ref.width,
		height = _ref.height;
		return jsxRuntime.jsx(WrappedHeatMapCanvas, _objectSpread2({
		width: width,
		height: height
		}, props));
		}
		});
		};

		exports.HeatMap = WrappedHeatMap;
		exports.HeatMapCanvas = WrappedHeatMapCanvas;
		exports.HeatMapDefaultProps = HeatMapDefaultProps;
		exports.HeatMapPropTypes = HeatMapPropTypes;
		exports.HeatMapSvgDefaultProps = HeatMapSvgDefaultProps;
		exports.HeatMapSvgPropTypes = HeatMapSvgPropTypes;
		exports.ResponsiveHeatMap = ResponsiveHeatMap;
		exports.ResponsiveHeatMapCanvas = ResponsiveHeatMapCanvas;
		exports.useHeatMap = useHeatMap;
		"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@nivo/core"),r=require("@nivo/axes"),l=require("@nivo/tooltip"),o=require("prop-types"),i=require("@nivo/colors"),a=require("d3-scale"),n=require("@react-spring/web"),u=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(o);function s(){return s=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},s.apply(this,arguments)}var f={data:c.default.arrayOf(c.default.object).isRequired,indexBy:c.default.oneOfType([c.default.string,c.default.func]).isRequired,keys:c.default.arrayOf(c.default.string).isRequired,minValue:c.default.oneOfType([c.default.oneOf(["auto"]),c.default.number]).isRequired,maxValue:c.default.oneOfType([c.default.oneOf(["auto"]),c.default.number]).isRequired,forceSquare:c.default.bool.isRequired,sizeVariation:c.default.number.isRequired,padding:c.default.number.isRequired,cellShape:c.default.oneOfType([c.default.oneOf(["rect","circle"]),c.default.func]).isRequired,cellOpacity:c.default.number.isRequired,cellBorderWidth:c.default.number.isRequired,cellBorderColor:i.inheritedColorPropType.isRequired,axisTop:r.axisPropType,axisRight:r.axisPropType,axisBottom:r.axisPropType,axisLeft:r.axisPropType,enableGridX:c.default.bool.isRequired,enableGridY:c.default.bool.isRequired,enableLabels:c.default.bool.isRequired,label:c.default.func.isRequired,labelTextColor:i.inheritedColorPropType.isRequired,colors:t.quantizeColorScalePropType.isRequired,nanColor:c.default.string,isInteractive:c.default.bool,onClick:c.default.func.isRequired,hoverTarget:c.default.oneOf(["cell","row","column","rowColumn"]).isRequired,cellHoverOpacity:c.default.number.isRequired,cellHoverOthersOpacity:c.default.number.isRequired,tooltipFormat:c.default.oneOfType([c.default.func,c.default.string]),tooltip:c.default.func,pixelRatio:c.default.number.isRequired},h=s({},f,{role:c.default.string.isRequired}),p={indexBy:"id",minValue:"auto",maxValue:"auto",forceSquare:!1,sizeVariation:0,padding:0,cellShape:"rect",cellOpacity:.85,cellBorderWidth:0,cellBorderColor:{from:"color"},axisTop:{},axisLeft:{},enableGridX:!1,enableGridY:!1,enableLabels:!0,label:function(e,t){return e[t]},labelTextColor:{from:"color",modifiers:[["darker",1.4]]},colors:"nivo",nanColor:"#000000",isInteractive:!0,onClick:t.noop,hoverTarget:"rowColumn",cellHoverOpacity:1,cellHoverOthersOpacity:.35,pixelRatio:"undefined"!=typeof window&&window.devicePixelRatio\|\|1},y=s({},p,{role:"img"}),x={cell:function(e,t){return e.xKey===t.xKey&&e.yKey===t.yKey},row:function(e,t){return e.yKey===t.yKey},column:function(e,t){return e.xKey===t.xKey},rowColumn:function(e,t){return e.xKey===t.xKey\|\|e.yKey===t.yKey}},b=function(r){var l=r.data,o=r.keys,n=r.indexBy,u=r.minValue,d=void 0===u?"auto":u,c=r.maxValue,f=void 0===c?"auto":c,h=r.width,p=r.height,y=r.padding,b=r.forceSquare,m=r.sizeVariation,g=r.colors,v=r.nanColor,C=r.cellOpacity,q=r.cellBorderColor,R=r.label,T=r.labelTextColor,O=r.hoverTarget,S=r.cellHoverOpacity,w=r.cellHoverOthersOpacity,M=e.useState(null),H=M[0],L=M[1],k=t.usePropertyAccessor(n),B=e.useMemo((function(){return l.map(k)}),[l,k]),W=e.useMemo((function(){return t.getLabelGenerator(R)}),[R]),j=e.useMemo((function(){var e=o.length,t=l.length,r=Math.max((h-y(e+1))/e,0),i=Math.max((p-y(t+1))/t,0),a=0,n=0;if(!0===b){var u=Math.min(r,i);a=(h-(((r=u)+y)e+y))/2,n=(p-(((i=u)+y)t+y))/2}return{cellWidth:r,cellHeight:i,offsetX:a,offsetY:n}}),[l,o,h,p,y,b]),V=e.useMemo((function(){return{x:a.scaleOrdinal(o.map((function(e,t){return function(e,t,r){return et+.5t+re+r}(t,j.cellWidth,y)}))).domain(o),y:a.scaleOrdinal(B.map((function(e,t){return function(e,t,r){return et+.5t+re+r}(t,j.cellHeight,y)}))).domain(B)}}),[B,o,j,y]),P=e.useMemo((function(){var e=d,t=f;if("auto"===e\|\|"auto"===t){var r=l.reduce((function(e,t){return e.concat(o.map((function(e){return t[e]})))}),[]);"auto"===e&&(e=Math.min.apply(Math,r)),"auto"===t&&(t=Math.max.apply(Math,r))}return{min:Math.min(e,t),max:Math.max(t,e)}}),[l,o,d,f]),K=e.useMemo((function(){if(m>0)return a.scaleLinear().range([1-m,1]).domain([P.min,P.max])}),[m,P]),I=e.useMemo((function(){return t.guessQuantizeColorScale(g).domain([P.min,P.max])}),[g,P]),z=t.useTheme(),E=i.useInheritedColor(q,z),A=i.useInheritedColor(T,z),G=e.useMemo((function(){return function(e){var t=e.data,r=e.keys,l=e.getIndex,o=e.xScale,i=e.yScale,a=e.sizeScale,n=e.cellOpacity,u=e.cellWidth,d=e.cellHeight,c=e.colorScale,s=e.nanColor,f=e.getLabel,h=e.getLabelTextColor,p=[];return t.forEach((function(e){r.forEach((function(t){var r=e[t],y=f(e,t),x=l(e),b=a?a(r):1,m=bu,g=bd,v={id:t+"."+x,xKey:t,yKey:x,x:o(t),y:i(x),width:m,height:g,value:r,label:y,color:isNaN(r)?s:c(r),opacity:n};v.labelTextColor=h(v),p.push(v)}))})),p}({data:l,keys:o,getIndex:k,xScale:V.x,yScale:V.y,sizeScale:K,cellOpacity:C,cellWidth:j.cellWidth,cellHeight:j.cellHeight,colorScale:I,nanColor:v,getLabel:W,getLabelTextColor:A})}),[l,o,k,V,K,C,j,I,v,W,A]),F=e.useMemo((function(){if(null===H)return G;var e=x[O],t=G.find((function(e){return e.id===H}));return G.map((function(r){var l=e(r,t)?S:w;return l===r.opacity?r:s({},r,{opacity:l})}))}),[G,H,O,S,w]);return s({cells:F,getIndex:k,xScale:V.x,yScale:V.y},j,{sizeScale:K,currentCellId:H,setCurrentCellId:L,colorScale:I,getCellBorderColor:E,getLabelTextColor:A})},m=function(t){var r=t.cells,l=t.cellComponent,o=t.cellBorderWidth,i=t.getCellBorderColor,a=t.enableLabels,n=t.getLabelTextColor,u=t.handleCellHover,d=t.handleCellLeave,c=t.onClick;return r.map((function(t){return e.createElement(l,{key:t.id,data:t,label:t.label,x:t.x,y:t.y,width:t.width,height:t.height,color:t.color,opacity:t.opacity,borderWidth:o,borderColor:i(t),enableLabel:a,textColor:n(t),onHover:u?function(e){return u(t,e)}:void 0,onLeave:d,onClick:c})}))};m.propTypes={};var g=function(e){var r=e.data,l=e.label,o=e.x,i=e.y,a=e.width,d=e.height,c=e.color,f=e.opacity,h=e.borderWidth,p=e.borderColor,y=e.enableLabel,x=e.textColor,b=e.onHover,m=e.onLeave,g=e.onClick,v=t.useTheme(),C=t.useMotionConfig(),q=C.animate,R=C.config,T=n.useSpring({transform:"translate("+o+", "+i+")",width:a,height:d,xOffset:-.5a,yOffset:-.5d,color:c,opacity:f,textColor:x,borderWidth:h,borderColor:p,config:R,immediate:!q});return u.jsxs(n.animated.g,{transform:T.transform,style:{cursor:"pointer"},onMouseEnter:b,onMouseMove:b,onMouseLeave:m,onClick:g?function(e){return g(r,e)}:void 0,children:[u.jsx(n.animated.rect,{x:T.xOffset,y:T.yOffset,width:T.width,height:T.height,fill:T.color,fillOpacity:T.opacity,strokeWidth:T.borderWidth,stroke:T.borderColor,strokeOpacity:T.opacity}),y&&u.jsx(n.animated.text,{dominantBaseline:"central",textAnchor:"middle",style:s({},v.labels.text,{fill:T.textColor}),fillOpacity:T.opacity,children:l})]})};g.propTypes={data:c.default.object.isRequired,label:c.default.oneOfType([c.default.number,c.default.string]).isRequired,x:c.default.number.isRequired,y:c.default.number.isRequired,width:c.default.number.isRequired,height:c.default.number.isRequired,color:c.default.string.isRequired,opacity:c.default.number.isRequired,borderWidth:c.default.number.isRequired,borderColor:c.default.string.isRequired,enableLabel:c.default.bool.isRequired,textColor:c.default.string.isRequired,onHover:c.default.func,onLeave:c.default.func,onClick:c.default.func};var v=e.memo(g),C=function(e){var r=e.data,l=e.label,o=e.x,i=e.y,a=e.width,d=e.height,c=e.color,f=e.opacity,h=e.borderWidth,p=e.borderColor,y=e.enableLabel,x=e.textColor,b=e.onHover,m=e.onLeave,g=e.onClick,v=t.useTheme(),C=t.useMotionConfig(),q=C.animate,R=C.config,T=n.useSpring({transform:"translate("+o+", "+i+")",radius:Math.min(a,d)/2,color:c,opacity:f,textColor:x,borderWidth:h,borderColor:p,config:R,immediate:!q});return u.jsxs(n.animated.g,{transform:T.transform,style:{cursor:"pointer"},onMouseEnter:b,onMouseMove:b,onMouseLeave:m,onClick:g?function(e){return g(r,e)}:void 0,children:[u.jsx(n.animated.circle,{r:T.radius,fill:T.color,fillOpacity:T.opacity,strokeWidth:T.borderWidth,stroke:T.borderColor,strokeOpacity:T.opacity}),y&&u.jsx(n.animated.text,{dominantBaseline:"central",textAnchor:"middle",style:s({},v.labels.text,{fill:T.textColor}),fillOpacity:T.opacity,children:l})]})};C.propTypes={data:c.default.object.isRequired,label:c.default.oneOfType([c.default.number,c.default.string]).isRequired,x:c.default.number.isRequired,y:c.default.number.isRequired,width:c.default.number.isRequired,height:c.default.number.isRequired,color:c.default.string.isRequired,opacity:c.default.number.isRequired,borderWidth:c.default.number.isRequired,borderColor:c.default.string.isRequired,enableLabel:c.default.bool.isRequired,textColor:c.default.string.isRequired,onHover:c.default.func,onLeave:c.default.func,onClick:c.default.func};var q=e.memo(C),R=function(e){var t=e.cell,r=e.format,o=e.tooltip;return u.jsx(l.BasicTooltip,{id:t.yKey+" - "+t.xKey,value:t.value,enableChip:!0,color:t.color,format:r,renderContent:"function"==typeof o?o.bind(null,s({},t)):null})};R.propTypes={cell:c.default.shape({xKey:c.default.string.isRequired,yKey:c.default.string.isRequired,value:c.default.number.isRequired,color:c.default.string.isRequired}).isRequired,format:c.default.func,tooltip:c.default.func};var T=e.memo(R),O=function(o){var i,a=o.data,n=o.keys,d=o.indexBy,c=o.minValue,s=o.maxValue,f=o.width,h=o.height,p=o.margin,y=o.forceSquare,x=o.padding,g=o.sizeVariation,C=o.cellShape,R=o.cellOpacity,O=o.cellBorderWidth,S=o.cellBorderColor,w=o.axisTop,M=o.axisRight,H=o.axisBottom,L=o.axisLeft,k=o.enableGridX,B=o.enableGridY,W=o.enableLabels,j=o.label,V=o.labelTextColor,P=o.colors,K=o.nanColor,I=o.isInteractive,z=o.onClick,E=o.hoverTarget,A=o.cellHoverOpacity,G=o.cellHoverOthersOpacity,F=o.tooltipFormat,X=o.tooltip,Y=o.role,D=t.useDimensions(f,h,p),N=D.margin,_=D.innerWidth,Q=D.innerHeight,J=D.outerWidth,U=D.outerHeight,Z=b({data:a,keys:n,indexBy:d,minValue:c,maxValue:s,width:_,height:Q,padding:x,forceSquare:y,sizeVariation:g,colors:P,nanColor:K,cellOpacity:R,cellBorderColor:S,label:j,labelTextColor:V,hoverTarget:E,cellHoverOpacity:A,cellHoverOthersOpacity:G}),$=Z.cells,ee=Z.xScale,te=Z.yScale,re=Z.offsetX,le=Z.offsetY,oe=Z.setCurrentCellId,ie=Z.getCellBorderColor,ae=Z.getLabelTextColor,ne=l.useTooltip(),ue=ne.showTooltipFromEvent,de=ne.hideTooltip,ce=e.useCallback((function(e,t){oe(e.id),ue(u.jsx(T,{cell:e,format:F,tooltip:X}),t)}),[oe,ue,F,X]),se=e.useCallback((function(){oe(null),de()}),[oe,de]);return i="rect"===C?v:"circle"===C?q:C,u.jsxs(t.SvgWrapper,{width:J,height:U,margin:Object.assign({},N,{top:N.top+le,left:N.left+re}),role:Y,children:[u.jsx(r.Grid,{width:_-2re,height:Q-2le,xScale:k?ee:null,yScale:B?te:null}),u.jsx(r.Axes,{xScale:ee,yScale:te,width:_-2re,height:Q-2le,top:w,right:M,bottom:H,left:L}),u.jsx(m,{cells:$,cellComponent:i,cellBorderWidth:O,getCellBorderColor:ie,enableLabels:W,getLabelTextColor:ae,handleCellHover:I?ce:void 0,handleCellLeave:I?se:void 0,onClick:I?z:void 0})]})};O.propTypes=h;var S=t.withContainer(O);S.defaultProps=y;var w=function(e,t,r){var l=t.enableLabels,o=t.theme,i=r.x,a=r.y,n=r.width,u=r.height,d=r.color,c=r.opacity,s=r.labelTextColor,f=r.label;e.save(),e.globalAlpha=c,e.fillStyle=d,e.fillRect(i-n/2,a-u/2,n,u),!0===l&&(e.fillStyle=s,e.font=o.labels.text.fontSize+"px "+o.labels.text.fontFamily,e.fillText(f,i,a)),e.restore()},M=function(e,t,r){var l=t.enableLabels,o=t.theme,i=r.x,a=r.y,n=r.width,u=r.height,d=r.color,c=r.opacity,s=r.labelTextColor,f=r.label;e.save(),e.globalAlpha=c;var h=Math.min(n,u)/2;e.fillStyle=d,e.beginPath(),e.arc(i,a,h,0,2Math.PI),e.fill(),!0===l&&(e.fillStyle=s,e.font=o.labels.text.fontSize+"px "+o.labels.text.fontFamily,e.fillText(f,i,a)),e.restore()},H=function(o){var i=o.data,a=o.keys,n=o.indexBy,d=o.minValue,c=o.maxValue,s=o.width,f=o.height,h=o.margin,p=o.forceSquare,y=o.padding,x=o.sizeVariation,m=o.cellShape,g=o.cellOpacity,v=o.cellBorderColor,C=o.axisTop,q=o.axisRight,R=o.axisBottom,O=o.axisLeft,S=o.enableLabels,H=o.label,L=o.labelTextColor,k=o.colors,B=o.nanColor,W=o.isInteractive,j=o.onClick,V=o.hoverTarget,P=o.cellHoverOpacity,K=o.cellHoverOthersOpacity,I=o.tooltipFormat,z=o.tooltip,E=o.pixelRatio,A=e.useRef(null),G=t.useDimensions(s,f,h),F=G.margin,X=G.innerWidth,Y=G.innerHeight,D=G.outerWidth,N=G.outerHeight,_=b({data:i,keys:a,indexBy:n,minValue:d,maxValue:c,width:X,height:Y,padding:y,forceSquare:p,sizeVariation:x,colors:k,nanColor:B,cellOpacity:g,cellBorderColor:v,label:H,labelTextColor:L,hoverTarget:V,cellHoverOpacity:P,cellHoverOthersOpacity:K}),Q=_.cells,J=_.xScale,U=_.yScale,Z=_.offsetX,$=_.offsetY,ee=_.currentCellId,te=_.setCurrentCellId,re=t.useTheme();e.useEffect((function(){A.current.width=DE,A.current.height=NE;var e,t=A.current.getContext("2d");t.scale(E,E),t.fillStyle=re.background,t.fillRect(0,0,D,N),t.translate(F.left+Z,F.top+$),r.renderAxesToCanvas(t,{xScale:J,yScale:U,width:X-2Z,height:Y-2$,top:C,right:q,bottom:R,left:O,theme:re}),t.textAlign="center",t.textBaseline="middle",e="rect"===m?w:M,Q.forEach((function(r){e(t,{enableLabels:S,theme:re},r)}))}),[A,Q,D,N,X,Y,F,Z,$,m,C,q,R,O,J,U,re,S,E]);var le=l.useTooltip(),oe=le.showTooltipFromEvent,ie=le.hideTooltip,ae=e.useCallback((function(e){var r=t.getRelativeCursor(A.current,e),l=r[0],o=r[1],i=Q.find((function(e){return t.isCursorInRect(e.x+F.left+Z-e.width/2,e.y+F.top+$-e.height/2,e.width,e.height,l,o)}));void 0!==i?(te(i.id),oe(u.jsx(T,{cell:i,tooltip:z,format:I}),e)):(te(null),ie())}),[A,Q,F,Z,$,te,oe,ie,z,I]),ne=e.useCallback((function(){te(null),ie()}),[te,ie]),ue=e.useCallback((function(e){if(null!==ee){var t=Q.find((function(e){return e.id===ee}));t&&j(t,e)}}),[Q,ee,j]);return u.jsx("canvas",{ref:A,width:DE,height:N*E,style:{width:D,height:N},onMouseEnter:W?ae:void 0,onMouseMove:W?ae:void 0,onMouseLeave:W?ne:void 0,onClick:W?ue:void 0})};H.propTypes=f;var L=t.withContainer(H);L.defaultProps=p;exports.HeatMap=S,exports.HeatMapCanvas=L,exports.HeatMapDefaultProps=p,exports.HeatMapPropTypes=f,exports.HeatMapSvgDefaultProps=y,exports.HeatMapSvgPropTypes=h,exports.ResponsiveHeatMap=function(e){return u.jsx(t.ResponsiveWrapper,{children:function(t){var r=t.width,l=t.height;return u.jsx(S,s({width:r,height:l},e))}})},exports.ResponsiveHeatMapCanvas=function(e){return u.jsx(t.ResponsiveWrapper,{children:function(t){var r=t.width,l=t.height;return u.jsx(L,s({width:r,height:l},e))}})},exports.useHeatMap=b;
		//# sourceMappingURL=nivo-heatmap.cjs.js.map

936

dist/nivo-heatmap.es.js

		@@ -1,936 +0,2 @@
		import { useState, useMemo, createElement, memo, useCallback, useRef, useEffect } from 'react';
		import { quantizeColorScalePropType, noop, usePropertyAccessor, getLabelGenerator, guessQuantizeColorScale, useTheme, useMotionConfig, withContainer, useDimensions, SvgWrapper, getRelativeCursor, isCursorInRect, ResponsiveWrapper } from '@nivo/core';
		import { axisPropType, Grid, Axes, renderAxesToCanvas } from '@nivo/axes';
		import { BasicTooltip, useTooltip } from '@nivo/tooltip';
		import PropTypes from 'prop-types';
		import { inheritedColorPropType, useInheritedColor } from '@nivo/colors';
		import { scaleOrdinal, scaleLinear } from 'd3-scale';
		import { useSpring, animated } from '@react-spring/web';
		import { jsxs, jsx } from 'react/jsx-runtime';

		function _defineProperty(obj, key, value) {
		if (key in obj) {
		Object.defineProperty(obj, key, {
		value: value,
		enumerable: true,
		configurable: true,
		writable: true
		});
		} else {
		obj[key] = value;
		}
		return obj;
		}

		function ownKeys(object, enumerableOnly) {
		var keys = Object.keys(object);
		if (Object.getOwnPropertySymbols) {
		var symbols = Object.getOwnPropertySymbols(object);
		if (enumerableOnly) symbols = symbols.filter(function (sym) {
		return Object.getOwnPropertyDescriptor(object, sym).enumerable;
		});
		keys.push.apply(keys, symbols);
		}
		return keys;
		}
		function _objectSpread2(target) {
		for (var i = 1; i < arguments.length; i++) {
		var source = arguments[i] != null ? arguments[i] : {};
		if (i % 2) {
		ownKeys(Object(source), true).forEach(function (key) {
		_defineProperty(target, key, source[key]);
		});
		} else if (Object.getOwnPropertyDescriptors) {
		Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
		} else {
		ownKeys(Object(source)).forEach(function (key) {
		Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
		});
		}
		}
		return target;
		}

		var HeatMapPropTypes = {
		data: PropTypes.arrayOf(PropTypes.object).isRequired,
		indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
		keys: PropTypes.arrayOf(PropTypes.string).isRequired,
		minValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
		maxValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
		forceSquare: PropTypes.bool.isRequired,
		sizeVariation: PropTypes.number.isRequired,
		padding: PropTypes.number.isRequired,
		cellShape: PropTypes.oneOfType([PropTypes.oneOf(['rect', 'circle']), PropTypes.func]).isRequired,
		cellOpacity: PropTypes.number.isRequired,
		cellBorderWidth: PropTypes.number.isRequired,
		cellBorderColor: inheritedColorPropType.isRequired,
		axisTop: axisPropType,
		axisRight: axisPropType,
		axisBottom: axisPropType,
		axisLeft: axisPropType,
		enableGridX: PropTypes.bool.isRequired,
		enableGridY: PropTypes.bool.isRequired,
		enableLabels: PropTypes.bool.isRequired,
		label: PropTypes.func.isRequired,
		labelTextColor: inheritedColorPropType.isRequired,
		colors: quantizeColorScalePropType.isRequired,
		nanColor: PropTypes.string,
		isInteractive: PropTypes.bool,
		onClick: PropTypes.func.isRequired,
		hoverTarget: PropTypes.oneOf(['cell', 'row', 'column', 'rowColumn']).isRequired,
		cellHoverOpacity: PropTypes.number.isRequired,
		cellHoverOthersOpacity: PropTypes.number.isRequired,
		tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
		tooltip: PropTypes.func,
		pixelRatio: PropTypes.number.isRequired
		};
		var HeatMapSvgPropTypes = _objectSpread2(_objectSpread2({}, HeatMapPropTypes), {}, {
		role: PropTypes.string.isRequired
		});
		var HeatMapDefaultProps = {
		indexBy: 'id',
		minValue: 'auto',
		maxValue: 'auto',
		forceSquare: false,
		sizeVariation: 0,
		padding: 0,
		cellShape: 'rect',
		cellOpacity: 0.85,
		cellBorderWidth: 0,
		cellBorderColor: {
		from: 'color'
		},
		axisTop: {},
		axisLeft: {},
		enableGridX: false,
		enableGridY: false,
		enableLabels: true,
		label: function label(datum, key) {
		return datum[key];
		},
		labelTextColor: {
		from: 'color',
		modifiers: [['darker', 1.4]]
		},
		colors: 'nivo',
		nanColor: '#000000',
		isInteractive: true,
		onClick: noop,
		hoverTarget: 'rowColumn',
		cellHoverOpacity: 1,
		cellHoverOthersOpacity: 0.35,
		pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio \|\| 1 : 1
		};
		var HeatMapSvgDefaultProps = _objectSpread2(_objectSpread2({}, HeatMapDefaultProps), {}, {
		role: 'img'
		});

		function _arrayLikeToArray(arr, len) {
		if (len == null \|\| len > arr.length) len = arr.length;
		for (var i = 0, arr2 = new Array(len); i < len; i++) {
		arr2[i] = arr[i];
		}
		return arr2;
		}

		function _arrayWithoutHoles(arr) {
		if (Array.isArray(arr)) return _arrayLikeToArray(arr);
		}

		function _iterableToArray(iter) {
		if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
		}

		function _unsupportedIterableToArray(o, minLen) {
		if (!o) return;
		if (typeof o === "string") return _arrayLikeToArray(o, minLen);
		var n = Object.prototype.toString.call(o).slice(8, -1);
		if (n === "Object" && o.constructor) n = o.constructor.name;
		if (n === "Map" \|\| n === "Set") return Array.from(o);
		if (n === "Arguments" \|\| /^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
		}

		function _nonIterableSpread() {
		throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
		}

		function _toConsumableArray(arr) {
		return _arrayWithoutHoles(arr) \|\| _iterableToArray(arr) \|\| _unsupportedIterableToArray(arr) \|\| _nonIterableSpread();
		}

		function _arrayWithHoles(arr) {
		if (Array.isArray(arr)) return arr;
		}

		function _iterableToArrayLimit(arr, i) {
		if (typeof Symbol === "undefined" \|\| !(Symbol.iterator in Object(arr))) return;
		var _arr = [];
		var _n = true;
		var _d = false;
		var _e = undefined;
		try {
		for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
		_arr.push(_s.value);
		if (i && _arr.length === i) break;
		}
		} catch (err) {
		_d = true;
		_e = err;
		} finally {
		try {
		if (!_n && _i["return"] != null) _i["return"]();
		} finally {
		if (_d) throw _e;
		}
		}
		return _arr;
		}

		function _nonIterableRest() {
		throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
		}

		function _slicedToArray(arr, i) {
		return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _unsupportedIterableToArray(arr, i) \|\| _nonIterableRest();
		}

		var computeX = function computeX(column, cellWidth, padding) {
		return column * cellWidth + cellWidth * 0.5 + padding * column + padding;
		};
		var computeY = function computeY(row, cellHeight, padding) {
		return row * cellHeight + cellHeight * 0.5 + padding * row + padding;
		};
		var isHoverTargetByType = {
		cell: function cell(_cell, current) {
		return _cell.xKey === current.xKey && _cell.yKey === current.yKey;
		},
		row: function row(cell, current) {
		return cell.yKey === current.yKey;
		},
		column: function column(cell, current) {
		return cell.xKey === current.xKey;
		},
		rowColumn: function rowColumn(cell, current) {
		return cell.xKey === current.xKey \|\| cell.yKey === current.yKey;
		}
		};
		var computeCells = function computeCells(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		getIndex = _ref.getIndex,
		xScale = _ref.xScale,
		yScale = _ref.yScale,
		sizeScale = _ref.sizeScale,
		cellOpacity = _ref.cellOpacity,
		cellWidth = _ref.cellWidth,
		cellHeight = _ref.cellHeight,
		colorScale = _ref.colorScale,
		nanColor = _ref.nanColor,
		getLabel = _ref.getLabel,
		getLabelTextColor = _ref.getLabelTextColor;
		var cells = [];
		data.forEach(function (datum) {
		keys.forEach(function (key) {
		var value = datum[key];
		var label = getLabel(datum, key);
		var index = getIndex(datum);
		var sizeMultiplier = sizeScale ? sizeScale(value) : 1;
		var width = sizeMultiplier * cellWidth;
		var height = sizeMultiplier * cellHeight;
		var cell = {
		id: "".concat(key, ".").concat(index),
		xKey: key,
		yKey: index,
		x: xScale(key),
		y: yScale(index),
		width: width,
		height: height,
		value: value,
		label: label,
		color: isNaN(value) ? nanColor : colorScale(value),
		opacity: cellOpacity
		};
		cell.labelTextColor = getLabelTextColor(cell);
		cells.push(cell);
		});
		});
		return cells;
		};
		var useHeatMap = function useHeatMap(_ref2) {
		var data = _ref2.data,
		keys = _ref2.keys,
		indexBy = _ref2.indexBy,
		_ref2$minValue = _ref2.minValue,
		_minValue = _ref2$minValue === void 0 ? 'auto' : _ref2$minValue,
		_ref2$maxValue = _ref2.maxValue,
		_maxValue = _ref2$maxValue === void 0 ? 'auto' : _ref2$maxValue,
		width = _ref2.width,
		height = _ref2.height,
		padding = _ref2.padding,
		forceSquare = _ref2.forceSquare,
		sizeVariation = _ref2.sizeVariation,
		colors = _ref2.colors,
		nanColor = _ref2.nanColor,
		cellOpacity = _ref2.cellOpacity,
		cellBorderColor = _ref2.cellBorderColor,
		label = _ref2.label,
		labelTextColor = _ref2.labelTextColor,
		hoverTarget = _ref2.hoverTarget,
		cellHoverOpacity = _ref2.cellHoverOpacity,
		cellHoverOthersOpacity = _ref2.cellHoverOthersOpacity;
		var _useState = useState(null),
		_useState2 = _slicedToArray(_useState, 2),
		currentCellId = _useState2[0],
		setCurrentCellId = _useState2[1];
		var getIndex = usePropertyAccessor(indexBy);
		var indices = useMemo(function () {
		return data.map(getIndex);
		}, [data, getIndex]);
		var getLabel = useMemo(function () {
		return getLabelGenerator(label);
		}, [label]);
		var layoutConfig = useMemo(function () {
		var columns = keys.length;
		var rows = data.length;
		var cellWidth = Math.max((width - padding * (columns + 1)) / columns, 0);
		var cellHeight = Math.max((height - padding * (rows + 1)) / rows, 0);
		var offsetX = 0;
		var offsetY = 0;
		if (forceSquare === true) {
		var cellSize = Math.min(cellWidth, cellHeight);
		cellWidth = cellSize;
		cellHeight = cellSize;
		offsetX = (width - ((cellWidth + padding) * columns + padding)) / 2;
		offsetY = (height - ((cellHeight + padding) * rows + padding)) / 2;
		}
		return {
		cellWidth: cellWidth,
		cellHeight: cellHeight,
		offsetX: offsetX,
		offsetY: offsetY
		};
		}, [data, keys, width, height, padding, forceSquare]);
		var scales = useMemo(function () {
		return {
		x: scaleOrdinal(keys.map(function (key, i) {
		return computeX(i, layoutConfig.cellWidth, padding);
		})).domain(keys),
		y: scaleOrdinal(indices.map(function (d, i) {
		return computeY(i, layoutConfig.cellHeight, padding);
		})).domain(indices)
		};
		}, [indices, keys, layoutConfig, padding]);
		var values = useMemo(function () {
		var minValue = _minValue;
		var maxValue = _maxValue;
		if (minValue === 'auto' \|\| maxValue === 'auto') {
		var allValues = data.reduce(function (acc, row) {
		return acc.concat(keys.map(function (key) {
		return row[key];
		}));
		}, []);
		if (minValue === 'auto') minValue = Math.min.apply(Math, _toConsumableArray(allValues));
		if (maxValue === 'auto') maxValue = Math.max.apply(Math, _toConsumableArray(allValues));
		}
		return {
		min: Math.min(minValue, maxValue),
		max: Math.max(maxValue, minValue)
		};
		}, [data, keys, _minValue, _maxValue]);
		var sizeScale = useMemo(function () {
		if (sizeVariation > 0) {
		return scaleLinear().range([1 - sizeVariation, 1]).domain([values.min, values.max]);
		}
		}, [sizeVariation, values]);
		var colorScale = useMemo(function () {
		return guessQuantizeColorScale(colors).domain([values.min, values.max]);
		}, [colors, values]);
		var theme = useTheme();
		var getCellBorderColor = useInheritedColor(cellBorderColor, theme);
		var getLabelTextColor = useInheritedColor(labelTextColor, theme);
		var cells = useMemo(function () {
		return computeCells({
		data: data,
		keys: keys,
		getIndex: getIndex,
		xScale: scales.x,
		yScale: scales.y,
		sizeScale: sizeScale,
		cellOpacity: cellOpacity,
		cellWidth: layoutConfig.cellWidth,
		cellHeight: layoutConfig.cellHeight,
		colorScale: colorScale,
		nanColor: nanColor,
		getLabel: getLabel,
		getLabelTextColor: getLabelTextColor
		});
		}, [data, keys, getIndex, scales, sizeScale, cellOpacity, layoutConfig, colorScale, nanColor, getLabel, getLabelTextColor]);
		var cellsWithCurrent = useMemo(function () {
		if (currentCellId === null) return cells;
		var isHoverTarget = isHoverTargetByType[hoverTarget];
		var currentCell = cells.find(function (cell) {
		return cell.id === currentCellId;
		});
		return cells.map(function (cell) {
		var opacity = isHoverTarget(cell, currentCell) ? cellHoverOpacity : cellHoverOthersOpacity;
		if (opacity === cell.opacity) return cell;
		return _objectSpread2(_objectSpread2({}, cell), {}, {
		opacity: opacity
		});
		});
		}, [cells, currentCellId, hoverTarget, cellHoverOpacity, cellHoverOthersOpacity]);
		return _objectSpread2(_objectSpread2({
		cells: cellsWithCurrent,
		getIndex: getIndex,
		xScale: scales.x,
		yScale: scales.y
		}, layoutConfig), {}, {
		sizeScale: sizeScale,
		currentCellId: currentCellId,
		setCurrentCellId: setCurrentCellId,
		colorScale: colorScale,
		getCellBorderColor: getCellBorderColor,
		getLabelTextColor: getLabelTextColor
		});
		};

		var HeatMapCells = function HeatMapCells(_ref) {
		var cells = _ref.cells,
		cellComponent = _ref.cellComponent,
		cellBorderWidth = _ref.cellBorderWidth,
		getCellBorderColor = _ref.getCellBorderColor,
		enableLabels = _ref.enableLabels,
		getLabelTextColor = _ref.getLabelTextColor,
		handleCellHover = _ref.handleCellHover,
		handleCellLeave = _ref.handleCellLeave,
		onClick = _ref.onClick;
		return cells.map(function (cell) {
		return createElement(cellComponent, {
		key: cell.id,
		data: cell,
		label: cell.label,
		x: cell.x,
		y: cell.y,
		width: cell.width,
		height: cell.height,
		color: cell.color,
		opacity: cell.opacity,
		borderWidth: cellBorderWidth,
		borderColor: getCellBorderColor(cell),
		enableLabel: enableLabels,
		textColor: getLabelTextColor(cell),
		onHover: handleCellHover ? function (event) {
		return handleCellHover(cell, event);
		} : undefined,
		onLeave: handleCellLeave,
		onClick: onClick
		});
		});
		};
		HeatMapCells.propTypes = {};

		var HeatMapCellRect = function HeatMapCellRect(_ref) {
		var data = _ref.data,
		label = _ref.label,
		x = _ref.x,
		y = _ref.y,
		width = _ref.width,
		height = _ref.height,
		color = _ref.color,
		opacity = _ref.opacity,
		borderWidth = _ref.borderWidth,
		borderColor = _ref.borderColor,
		enableLabel = _ref.enableLabel,
		textColor = _ref.textColor,
		onHover = _ref.onHover,
		onLeave = _ref.onLeave,
		onClick = _ref.onClick;
		var theme = useTheme();
		var _useMotionConfig = useMotionConfig(),
		animate = _useMotionConfig.animate,
		springConfig = _useMotionConfig.config;
		var animatedProps = useSpring({
		transform: "translate(".concat(x, ", ").concat(y, ")"),
		width: width,
		height: height,
		xOffset: width * -0.5,
		yOffset: height * -0.5,
		color: color,
		opacity: opacity,
		textColor: textColor,
		borderWidth: borderWidth,
		borderColor: borderColor,
		config: springConfig,
		immediate: !animate
		});
		return jsxs(animated.g, {
		transform: animatedProps.transform,
		style: {
		cursor: 'pointer'
		},
		onMouseEnter: onHover,
		onMouseMove: onHover,
		onMouseLeave: onLeave,
		onClick: onClick ? function (event) {
		return onClick(data, event);
		} : undefined,
		children: [jsx(animated.rect, {
		x: animatedProps.xOffset,
		y: animatedProps.yOffset,
		width: animatedProps.width,
		height: animatedProps.height,
		fill: animatedProps.color,
		fillOpacity: animatedProps.opacity,
		strokeWidth: animatedProps.borderWidth,
		stroke: animatedProps.borderColor,
		strokeOpacity: animatedProps.opacity
		}), enableLabel && jsx(animated.text, {
		dominantBaseline: "central",
		textAnchor: "middle",
		style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
		fill: animatedProps.textColor
		}),
		fillOpacity: animatedProps.opacity,
		children: label
		})]
		});
		};
		var HeatMapCellRect$1 = memo(HeatMapCellRect);

		var HeatMapCellCircle = function HeatMapCellCircle(_ref) {
		var data = _ref.data,
		label = _ref.label,
		x = _ref.x,
		y = _ref.y,
		width = _ref.width,
		height = _ref.height,
		color = _ref.color,
		opacity = _ref.opacity,
		borderWidth = _ref.borderWidth,
		borderColor = _ref.borderColor,
		enableLabel = _ref.enableLabel,
		textColor = _ref.textColor,
		onHover = _ref.onHover,
		onLeave = _ref.onLeave,
		onClick = _ref.onClick;
		var theme = useTheme();
		var _useMotionConfig = useMotionConfig(),
		animate = _useMotionConfig.animate,
		springConfig = _useMotionConfig.config;
		var animatedProps = useSpring({
		transform: "translate(".concat(x, ", ").concat(y, ")"),
		radius: Math.min(width, height) / 2,
		color: color,
		opacity: opacity,
		textColor: textColor,
		borderWidth: borderWidth,
		borderColor: borderColor,
		config: springConfig,
		immediate: !animate
		});
		return jsxs(animated.g, {
		transform: animatedProps.transform,
		style: {
		cursor: 'pointer'
		},
		onMouseEnter: onHover,
		onMouseMove: onHover,
		onMouseLeave: onLeave,
		onClick: onClick ? function (event) {
		return onClick(data, event);
		} : undefined,
		children: [jsx(animated.circle, {
		r: animatedProps.radius,
		fill: animatedProps.color,
		fillOpacity: animatedProps.opacity,
		strokeWidth: animatedProps.borderWidth,
		stroke: animatedProps.borderColor,
		strokeOpacity: animatedProps.opacity
		}), enableLabel && jsx(animated.text, {
		dominantBaseline: "central",
		textAnchor: "middle",
		style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
		fill: animatedProps.textColor
		}),
		fillOpacity: animatedProps.opacity,
		children: label
		})]
		});
		};
		var HeatMapCellCircle$1 = memo(HeatMapCellCircle);

		var HeatMapCellTooltip = function HeatMapCellTooltip(_ref) {
		var cell = _ref.cell,
		format = _ref.format,
		tooltip = _ref.tooltip;
		return jsx(BasicTooltip, {
		id: "".concat(cell.yKey, " - ").concat(cell.xKey),
		value: cell.value,
		enableChip: true,
		color: cell.color,
		format: format,
		renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _objectSpread2({}, cell)) : null
		});
		};
		var HeatMapCellTooltip$1 = memo(HeatMapCellTooltip);

		var HeatMap = function HeatMap(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		indexBy = _ref.indexBy,
		minValue = _ref.minValue,
		maxValue = _ref.maxValue,
		width = _ref.width,
		height = _ref.height,
		partialMargin = _ref.margin,
		forceSquare = _ref.forceSquare,
		padding = _ref.padding,
		sizeVariation = _ref.sizeVariation,
		cellShape = _ref.cellShape,
		cellOpacity = _ref.cellOpacity,
		cellBorderWidth = _ref.cellBorderWidth,
		cellBorderColor = _ref.cellBorderColor,
		axisTop = _ref.axisTop,
		axisRight = _ref.axisRight,
		axisBottom = _ref.axisBottom,
		axisLeft = _ref.axisLeft,
		enableGridX = _ref.enableGridX,
		enableGridY = _ref.enableGridY,
		enableLabels = _ref.enableLabels,
		label = _ref.label,
		labelTextColor = _ref.labelTextColor,
		colors = _ref.colors,
		nanColor = _ref.nanColor,
		isInteractive = _ref.isInteractive,
		onClick = _ref.onClick,
		hoverTarget = _ref.hoverTarget,
		cellHoverOpacity = _ref.cellHoverOpacity,
		cellHoverOthersOpacity = _ref.cellHoverOthersOpacity,
		tooltipFormat = _ref.tooltipFormat,
		tooltip = _ref.tooltip,
		role = _ref.role;
		var _useDimensions = useDimensions(width, height, partialMargin),
		margin = _useDimensions.margin,
		innerWidth = _useDimensions.innerWidth,
		innerHeight = _useDimensions.innerHeight,
		outerWidth = _useDimensions.outerWidth,
		outerHeight = _useDimensions.outerHeight;
		var _useHeatMap = useHeatMap({
		data: data,
		keys: keys,
		indexBy: indexBy,
		minValue: minValue,
		maxValue: maxValue,
		width: innerWidth,
		height: innerHeight,
		padding: padding,
		forceSquare: forceSquare,
		sizeVariation: sizeVariation,
		colors: colors,
		nanColor: nanColor,
		cellOpacity: cellOpacity,
		cellBorderColor: cellBorderColor,
		label: label,
		labelTextColor: labelTextColor,
		hoverTarget: hoverTarget,
		cellHoverOpacity: cellHoverOpacity,
		cellHoverOthersOpacity: cellHoverOthersOpacity
		}),
		cells = _useHeatMap.cells,
		xScale = _useHeatMap.xScale,
		yScale = _useHeatMap.yScale,
		offsetX = _useHeatMap.offsetX,
		offsetY = _useHeatMap.offsetY,
		setCurrentCellId = _useHeatMap.setCurrentCellId,
		getCellBorderColor = _useHeatMap.getCellBorderColor,
		getLabelTextColor = _useHeatMap.getLabelTextColor;
		var _useTooltip = useTooltip(),
		showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
		hideTooltip = _useTooltip.hideTooltip;
		var handleCellHover = useCallback(function (cell, event) {
		setCurrentCellId(cell.id);
		showTooltipFromEvent(jsx(HeatMapCellTooltip$1, {
		cell: cell,
		format: tooltipFormat,
		tooltip: tooltip
		}), event);
		}, [setCurrentCellId, showTooltipFromEvent, tooltipFormat, tooltip]);
		var handleCellLeave = useCallback(function () {
		setCurrentCellId(null);
		hideTooltip();
		}, [setCurrentCellId, hideTooltip]);
		var cellComponent;
		if (cellShape === 'rect') {
		cellComponent = HeatMapCellRect$1;
		} else if (cellShape === 'circle') {
		cellComponent = HeatMapCellCircle$1;
		} else {
		cellComponent = cellShape;
		}
		return jsxs(SvgWrapper, {
		width: outerWidth,
		height: outerHeight,
		margin: Object.assign({}, margin, {
		top: margin.top + offsetY,
		left: margin.left + offsetX
		}),
		role: role,
		children: [jsx(Grid, {
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		xScale: enableGridX ? xScale : null,
		yScale: enableGridY ? yScale : null
		}), jsx(Axes, {
		xScale: xScale,
		yScale: yScale,
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		top: axisTop,
		right: axisRight,
		bottom: axisBottom,
		left: axisLeft
		}), jsx(HeatMapCells, {
		cells: cells,
		cellComponent: cellComponent,
		cellBorderWidth: cellBorderWidth,
		getCellBorderColor: getCellBorderColor,
		enableLabels: enableLabels,
		getLabelTextColor: getLabelTextColor,
		handleCellHover: isInteractive ? handleCellHover : undefined,
		handleCellLeave: isInteractive ? handleCellLeave : undefined,
		onClick: isInteractive ? onClick : undefined
		})]
		});
		};
		var WrappedHeatMap = withContainer(HeatMap);
		WrappedHeatMap.defaultProps = HeatMapSvgDefaultProps;

		var renderRect = function renderRect(ctx, _ref, _ref2) {
		var enableLabels = _ref.enableLabels,
		theme = _ref.theme;
		var x = _ref2.x,
		y = _ref2.y,
		width = _ref2.width,
		height = _ref2.height,
		color = _ref2.color,
		opacity = _ref2.opacity,
		labelTextColor = _ref2.labelTextColor,
		label = _ref2.label;
		ctx.save();
		ctx.globalAlpha = opacity;
		ctx.fillStyle = color;
		ctx.fillRect(x - width / 2, y - height / 2, width, height);
		if (enableLabels === true) {
		ctx.fillStyle = labelTextColor;
		ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily);
		ctx.fillText(label, x, y);
		}
		ctx.restore();
		};
		var renderCircle = function renderCircle(ctx, _ref3, _ref4) {
		var enableLabels = _ref3.enableLabels,
		theme = _ref3.theme;
		var x = _ref4.x,
		y = _ref4.y,
		width = _ref4.width,
		height = _ref4.height,
		color = _ref4.color,
		opacity = _ref4.opacity,
		labelTextColor = _ref4.labelTextColor,
		label = _ref4.label;
		ctx.save();
		ctx.globalAlpha = opacity;
		var radius = Math.min(width, height) / 2;
		ctx.fillStyle = color;
		ctx.beginPath();
		ctx.arc(x, y, radius, 0, 2 * Math.PI);
		ctx.fill();
		if (enableLabels === true) {
		ctx.fillStyle = labelTextColor;
		ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily);
		ctx.fillText(label, x, y);
		}
		ctx.restore();
		};

		var HeatMapCanvas = function HeatMapCanvas(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		indexBy = _ref.indexBy,
		minValue = _ref.minValue,
		maxValue = _ref.maxValue,
		width = _ref.width,
		height = _ref.height,
		partialMargin = _ref.margin,
		forceSquare = _ref.forceSquare,
		padding = _ref.padding,
		sizeVariation = _ref.sizeVariation,
		cellShape = _ref.cellShape,
		cellOpacity = _ref.cellOpacity,
		cellBorderColor = _ref.cellBorderColor,
		axisTop = _ref.axisTop,
		axisRight = _ref.axisRight,
		axisBottom = _ref.axisBottom,
		axisLeft = _ref.axisLeft,
		enableLabels = _ref.enableLabels,
		label = _ref.label,
		labelTextColor = _ref.labelTextColor,
		colors = _ref.colors,
		nanColor = _ref.nanColor,
		isInteractive = _ref.isInteractive,
		onClick = _ref.onClick,
		hoverTarget = _ref.hoverTarget,
		cellHoverOpacity = _ref.cellHoverOpacity,
		cellHoverOthersOpacity = _ref.cellHoverOthersOpacity,
		tooltipFormat = _ref.tooltipFormat,
		tooltip = _ref.tooltip,
		pixelRatio = _ref.pixelRatio;
		var canvasEl = useRef(null);
		var _useDimensions = useDimensions(width, height, partialMargin),
		margin = _useDimensions.margin,
		innerWidth = _useDimensions.innerWidth,
		innerHeight = _useDimensions.innerHeight,
		outerWidth = _useDimensions.outerWidth,
		outerHeight = _useDimensions.outerHeight;
		var _useHeatMap = useHeatMap({
		data: data,
		keys: keys,
		indexBy: indexBy,
		minValue: minValue,
		maxValue: maxValue,
		width: innerWidth,
		height: innerHeight,
		padding: padding,
		forceSquare: forceSquare,
		sizeVariation: sizeVariation,
		colors: colors,
		nanColor: nanColor,
		cellOpacity: cellOpacity,
		cellBorderColor: cellBorderColor,
		label: label,
		labelTextColor: labelTextColor,
		hoverTarget: hoverTarget,
		cellHoverOpacity: cellHoverOpacity,
		cellHoverOthersOpacity: cellHoverOthersOpacity
		}),
		cells = _useHeatMap.cells,
		xScale = _useHeatMap.xScale,
		yScale = _useHeatMap.yScale,
		offsetX = _useHeatMap.offsetX,
		offsetY = _useHeatMap.offsetY,
		currentCellId = _useHeatMap.currentCellId,
		setCurrentCellId = _useHeatMap.setCurrentCellId;
		var theme = useTheme();
		useEffect(function () {
		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.translate(margin.left + offsetX, margin.top + offsetY);
		renderAxesToCanvas(ctx, {
		xScale: xScale,
		yScale: yScale,
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		top: axisTop,
		right: axisRight,
		bottom: axisBottom,
		left: axisLeft,
		theme: theme
		});
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		var renderCell;
		if (cellShape === 'rect') {
		renderCell = renderRect;
		} else {
		renderCell = renderCircle;
		}
		cells.forEach(function (cell) {
		renderCell(ctx, {
		enableLabels: enableLabels,
		theme: theme
		}, cell);
		});
		}, [canvasEl, cells, outerWidth, outerHeight, innerWidth, innerHeight, margin, offsetX, offsetY, cellShape, axisTop, axisRight, axisBottom, axisLeft, xScale, yScale, theme, enableLabels, pixelRatio]);
		var _useTooltip = useTooltip(),
		showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
		hideTooltip = _useTooltip.hideTooltip;
		var handleMouseHover = useCallback(function (event) {
		var _getRelativeCursor = getRelativeCursor(canvasEl.current, event),
		_getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2),
		x = _getRelativeCursor2[0],
		y = _getRelativeCursor2[1];
		var cell = cells.find(function (c) {
		return isCursorInRect(c.x + margin.left + offsetX - c.width / 2, c.y + margin.top + offsetY - c.height / 2, c.width, c.height, x, y);
		});
		if (cell !== undefined) {
		setCurrentCellId(cell.id);
		showTooltipFromEvent(jsx(HeatMapCellTooltip$1, {
		cell: cell,
		tooltip: tooltip,
		format: tooltipFormat
		}), event);
		} else {
		setCurrentCellId(null);
		hideTooltip();
		}
		}, [canvasEl, cells, margin, offsetX, offsetY, setCurrentCellId, showTooltipFromEvent, hideTooltip, tooltip, tooltipFormat]);
		var handleMouseLeave = useCallback(function () {
		setCurrentCellId(null);
		hideTooltip();
		}, [setCurrentCellId, hideTooltip]);
		var handleClick = useCallback(function (event) {
		if (currentCellId === null) return;
		var currentCell = cells.find(function (cell) {
		return cell.id === currentCellId;
		});
		currentCell && onClick(currentCell, event);
		}, [cells, currentCellId, onClick]);
		return jsx("canvas", {
		ref: canvasEl,
		width: outerWidth * pixelRatio,
		height: outerHeight * pixelRatio,
		style: {
		width: outerWidth,
		height: outerHeight
		},
		onMouseEnter: isInteractive ? handleMouseHover : undefined,
		onMouseMove: isInteractive ? handleMouseHover : undefined,
		onMouseLeave: isInteractive ? handleMouseLeave : undefined,
		onClick: isInteractive ? handleClick : undefined
		});
		};
		var WrappedHeatMapCanvas = withContainer(HeatMapCanvas);
		WrappedHeatMapCanvas.defaultProps = HeatMapDefaultProps;

		var ResponsiveHeatMap = function ResponsiveHeatMap(props) {
		return jsx(ResponsiveWrapper, {
		children: function children(_ref) {
		var width = _ref.width,
		height = _ref.height;
		return jsx(WrappedHeatMap, _objectSpread2({
		width: width,
		height: height
		}, props));
		}
		});
		};

		var ResponsiveHeatMapCanvas = function ResponsiveHeatMapCanvas(props) {
		return jsx(ResponsiveWrapper, {
		children: function children(_ref) {
		var width = _ref.width,
		height = _ref.height;
		return jsx(WrappedHeatMapCanvas, _objectSpread2({
		width: width,
		height: height
		}, props));
		}
		});
		};

		export { WrappedHeatMap as HeatMap, WrappedHeatMapCanvas as HeatMapCanvas, HeatMapDefaultProps, HeatMapPropTypes, HeatMapSvgDefaultProps, HeatMapSvgPropTypes, ResponsiveHeatMap, ResponsiveHeatMapCanvas, useHeatMap };
		import{useState as e,useMemo as r,createElement as o,memo as t,useCallback as i,useRef as l,useEffect as n}from"react";import{quantizeColorScalePropType as a,noop as c,usePropertyAccessor as u,getLabelGenerator as d,guessQuantizeColorScale as s,useTheme as h,useMotionConfig as f,withContainer as p,useDimensions as y,SvgWrapper as b,getRelativeCursor as m,isCursorInRect as x,ResponsiveWrapper as g}from"@nivo/core";import{axisPropType as v,Grid as C,Axes as R,renderAxesToCanvas as q}from"@nivo/axes";import{BasicTooltip as O,useTooltip as T}from"@nivo/tooltip";import w from"prop-types";import{inheritedColorPropType as S,useInheritedColor as L}from"@nivo/colors";import{scaleOrdinal as H,scaleLinear as k}from"d3-scale";import{useSpring as B,animated as M}from"@react-spring/web";import{jsxs as W,jsx as V}from"react/jsx-runtime";function K(){return K=Object.assign\|\|function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e},K.apply(this,arguments)}var I={data:w.arrayOf(w.object).isRequired,indexBy:w.oneOfType([w.string,w.func]).isRequired,keys:w.arrayOf(w.string).isRequired,minValue:w.oneOfType([w.oneOf(["auto"]),w.number]).isRequired,maxValue:w.oneOfType([w.oneOf(["auto"]),w.number]).isRequired,forceSquare:w.bool.isRequired,sizeVariation:w.number.isRequired,padding:w.number.isRequired,cellShape:w.oneOfType([w.oneOf(["rect","circle"]),w.func]).isRequired,cellOpacity:w.number.isRequired,cellBorderWidth:w.number.isRequired,cellBorderColor:S.isRequired,axisTop:v,axisRight:v,axisBottom:v,axisLeft:v,enableGridX:w.bool.isRequired,enableGridY:w.bool.isRequired,enableLabels:w.bool.isRequired,label:w.func.isRequired,labelTextColor:S.isRequired,colors:a.isRequired,nanColor:w.string,isInteractive:w.bool,onClick:w.func.isRequired,hoverTarget:w.oneOf(["cell","row","column","rowColumn"]).isRequired,cellHoverOpacity:w.number.isRequired,cellHoverOthersOpacity:w.number.isRequired,tooltipFormat:w.oneOfType([w.func,w.string]),tooltip:w.func,pixelRatio:w.number.isRequired},z=K({},I,{role:w.string.isRequired}),E={indexBy:"id",minValue:"auto",maxValue:"auto",forceSquare:!1,sizeVariation:0,padding:0,cellShape:"rect",cellOpacity:.85,cellBorderWidth:0,cellBorderColor:{from:"color"},axisTop:{},axisLeft:{},enableGridX:!1,enableGridY:!1,enableLabels:!0,label:function(e,r){return e[r]},labelTextColor:{from:"color",modifiers:[["darker",1.4]]},colors:"nivo",nanColor:"#000000",isInteractive:!0,onClick:c,hoverTarget:"rowColumn",cellHoverOpacity:1,cellHoverOthersOpacity:.35,pixelRatio:"undefined"!=typeof window&&window.devicePixelRatio\|\|1},j=K({},E,{role:"img"}),F={cell:function(e,r){return e.xKey===r.xKey&&e.yKey===r.yKey},row:function(e,r){return e.yKey===r.yKey},column:function(e,r){return e.xKey===r.xKey},rowColumn:function(e,r){return e.xKey===r.xKey\|\|e.yKey===r.yKey}},G=function(o){var t=o.data,i=o.keys,l=o.indexBy,n=o.minValue,a=void 0===n?"auto":n,c=o.maxValue,f=void 0===c?"auto":c,p=o.width,y=o.height,b=o.padding,m=o.forceSquare,x=o.sizeVariation,g=o.colors,v=o.nanColor,C=o.cellOpacity,R=o.cellBorderColor,q=o.label,O=o.labelTextColor,T=o.hoverTarget,w=o.cellHoverOpacity,S=o.cellHoverOthersOpacity,B=e(null),M=B[0],W=B[1],V=u(l),I=r((function(){return t.map(V)}),[t,V]),z=r((function(){return d(q)}),[q]),E=r((function(){var e=i.length,r=t.length,o=Math.max((p-b(e+1))/e,0),l=Math.max((y-b(r+1))/r,0),n=0,a=0;if(!0===m){var c=Math.min(o,l);n=(p-(((o=c)+b)e+b))/2,a=(y-(((l=c)+b)r+b))/2}return{cellWidth:o,cellHeight:l,offsetX:n,offsetY:a}}),[t,i,p,y,b,m]),j=r((function(){return{x:H(i.map((function(e,r){return function(e,r,o){return er+.5r+oe+o}(r,E.cellWidth,b)}))).domain(i),y:H(I.map((function(e,r){return function(e,r,o){return er+.5r+oe+o}(r,E.cellHeight,b)}))).domain(I)}}),[I,i,E,b]),G=r((function(){var e=a,r=f;if("auto"===e\|\|"auto"===r){var o=t.reduce((function(e,r){return e.concat(i.map((function(e){return r[e]})))}),[]);"auto"===e&&(e=Math.min.apply(Math,o)),"auto"===r&&(r=Math.max.apply(Math,o))}return{min:Math.min(e,r),max:Math.max(r,e)}}),[t,i,a,f]),P=r((function(){if(x>0)return k().range([1-x,1]).domain([G.min,G.max])}),[x,G]),X=r((function(){return s(g).domain([G.min,G.max])}),[g,G]),Y=h(),A=L(R,Y),N=L(O,Y),D=r((function(){return function(e){var r=e.data,o=e.keys,t=e.getIndex,i=e.xScale,l=e.yScale,n=e.sizeScale,a=e.cellOpacity,c=e.cellWidth,u=e.cellHeight,d=e.colorScale,s=e.nanColor,h=e.getLabel,f=e.getLabelTextColor,p=[];return r.forEach((function(e){o.forEach((function(r){var o=e[r],y=h(e,r),b=t(e),m=n?n(o):1,x=mc,g=mu,v={id:r+"."+b,xKey:r,yKey:b,x:i(r),y:l(b),width:x,height:g,value:o,label:y,color:isNaN(o)?s:d(o),opacity:a};v.labelTextColor=f(v),p.push(v)}))})),p}({data:t,keys:i,getIndex:V,xScale:j.x,yScale:j.y,sizeScale:P,cellOpacity:C,cellWidth:E.cellWidth,cellHeight:E.cellHeight,colorScale:X,nanColor:v,getLabel:z,getLabelTextColor:N})}),[t,i,V,j,P,C,E,X,v,z,N]),J=r((function(){if(null===M)return D;var e=F[T],r=D.find((function(e){return e.id===M}));return D.map((function(o){var t=e(o,r)?w:S;return t===o.opacity?o:K({},o,{opacity:t})}))}),[D,M,T,w,S]);return K({cells:J,getIndex:V,xScale:j.x,yScale:j.y},E,{sizeScale:P,currentCellId:M,setCurrentCellId:W,colorScale:X,getCellBorderColor:A,getLabelTextColor:N})},P=function(e){var r=e.cells,t=e.cellComponent,i=e.cellBorderWidth,l=e.getCellBorderColor,n=e.enableLabels,a=e.getLabelTextColor,c=e.handleCellHover,u=e.handleCellLeave,d=e.onClick;return r.map((function(e){return o(t,{key:e.id,data:e,label:e.label,x:e.x,y:e.y,width:e.width,height:e.height,color:e.color,opacity:e.opacity,borderWidth:i,borderColor:l(e),enableLabel:n,textColor:a(e),onHover:c?function(r){return c(e,r)}:void 0,onLeave:u,onClick:d})}))};P.propTypes={};var X=function(e){var r=e.data,o=e.label,t=e.x,i=e.y,l=e.width,n=e.height,a=e.color,c=e.opacity,u=e.borderWidth,d=e.borderColor,s=e.enableLabel,p=e.textColor,y=e.onHover,b=e.onLeave,m=e.onClick,x=h(),g=f(),v=g.animate,C=g.config,R=B({transform:"translate("+t+", "+i+")",width:l,height:n,xOffset:-.5l,yOffset:-.5n,color:a,opacity:c,textColor:p,borderWidth:u,borderColor:d,config:C,immediate:!v});return W(M.g,{transform:R.transform,style:{cursor:"pointer"},onMouseEnter:y,onMouseMove:y,onMouseLeave:b,onClick:m?function(e){return m(r,e)}:void 0,children:[V(M.rect,{x:R.xOffset,y:R.yOffset,width:R.width,height:R.height,fill:R.color,fillOpacity:R.opacity,strokeWidth:R.borderWidth,stroke:R.borderColor,strokeOpacity:R.opacity}),s&&V(M.text,{dominantBaseline:"central",textAnchor:"middle",style:K({},x.labels.text,{fill:R.textColor}),fillOpacity:R.opacity,children:o})]})};X.propTypes={data:w.object.isRequired,label:w.oneOfType([w.number,w.string]).isRequired,x:w.number.isRequired,y:w.number.isRequired,width:w.number.isRequired,height:w.number.isRequired,color:w.string.isRequired,opacity:w.number.isRequired,borderWidth:w.number.isRequired,borderColor:w.string.isRequired,enableLabel:w.bool.isRequired,textColor:w.string.isRequired,onHover:w.func,onLeave:w.func,onClick:w.func};var Y=t(X),A=function(e){var r=e.data,o=e.label,t=e.x,i=e.y,l=e.width,n=e.height,a=e.color,c=e.opacity,u=e.borderWidth,d=e.borderColor,s=e.enableLabel,p=e.textColor,y=e.onHover,b=e.onLeave,m=e.onClick,x=h(),g=f(),v=g.animate,C=g.config,R=B({transform:"translate("+t+", "+i+")",radius:Math.min(l,n)/2,color:a,opacity:c,textColor:p,borderWidth:u,borderColor:d,config:C,immediate:!v});return W(M.g,{transform:R.transform,style:{cursor:"pointer"},onMouseEnter:y,onMouseMove:y,onMouseLeave:b,onClick:m?function(e){return m(r,e)}:void 0,children:[V(M.circle,{r:R.radius,fill:R.color,fillOpacity:R.opacity,strokeWidth:R.borderWidth,stroke:R.borderColor,strokeOpacity:R.opacity}),s&&V(M.text,{dominantBaseline:"central",textAnchor:"middle",style:K({},x.labels.text,{fill:R.textColor}),fillOpacity:R.opacity,children:o})]})};A.propTypes={data:w.object.isRequired,label:w.oneOfType([w.number,w.string]).isRequired,x:w.number.isRequired,y:w.number.isRequired,width:w.number.isRequired,height:w.number.isRequired,color:w.string.isRequired,opacity:w.number.isRequired,borderWidth:w.number.isRequired,borderColor:w.string.isRequired,enableLabel:w.bool.isRequired,textColor:w.string.isRequired,onHover:w.func,onLeave:w.func,onClick:w.func};var N=t(A),D=function(e){var r=e.cell,o=e.format,t=e.tooltip;return V(O,{id:r.yKey+" - "+r.xKey,value:r.value,enableChip:!0,color:r.color,format:o,renderContent:"function"==typeof t?t.bind(null,K({},r)):null})};D.propTypes={cell:w.shape({xKey:w.string.isRequired,yKey:w.string.isRequired,value:w.number.isRequired,color:w.string.isRequired}).isRequired,format:w.func,tooltip:w.func};var J=t(D),Q=function(e){var r,o=e.data,t=e.keys,l=e.indexBy,n=e.minValue,a=e.maxValue,c=e.width,u=e.height,d=e.margin,s=e.forceSquare,h=e.padding,f=e.sizeVariation,p=e.cellShape,m=e.cellOpacity,x=e.cellBorderWidth,g=e.cellBorderColor,v=e.axisTop,q=e.axisRight,O=e.axisBottom,w=e.axisLeft,S=e.enableGridX,L=e.enableGridY,H=e.enableLabels,k=e.label,B=e.labelTextColor,M=e.colors,K=e.nanColor,I=e.isInteractive,z=e.onClick,E=e.hoverTarget,j=e.cellHoverOpacity,F=e.cellHoverOthersOpacity,X=e.tooltipFormat,A=e.tooltip,D=e.role,Q=y(c,u,d),U=Q.margin,Z=Q.innerWidth,$=Q.innerHeight,_=Q.outerWidth,ee=Q.outerHeight,re=G({data:o,keys:t,indexBy:l,minValue:n,maxValue:a,width:Z,height:$,padding:h,forceSquare:s,sizeVariation:f,colors:M,nanColor:K,cellOpacity:m,cellBorderColor:g,label:k,labelTextColor:B,hoverTarget:E,cellHoverOpacity:j,cellHoverOthersOpacity:F}),oe=re.cells,te=re.xScale,ie=re.yScale,le=re.offsetX,ne=re.offsetY,ae=re.setCurrentCellId,ce=re.getCellBorderColor,ue=re.getLabelTextColor,de=T(),se=de.showTooltipFromEvent,he=de.hideTooltip,fe=i((function(e,r){ae(e.id),se(V(J,{cell:e,format:X,tooltip:A}),r)}),[ae,se,X,A]),pe=i((function(){ae(null),he()}),[ae,he]);return r="rect"===p?Y:"circle"===p?N:p,W(b,{width:_,height:ee,margin:Object.assign({},U,{top:U.top+ne,left:U.left+le}),role:D,children:[V(C,{width:Z-2le,height:$-2ne,xScale:S?te:null,yScale:L?ie:null}),V(R,{xScale:te,yScale:ie,width:Z-2le,height:$-2ne,top:v,right:q,bottom:O,left:w}),V(P,{cells:oe,cellComponent:r,cellBorderWidth:x,getCellBorderColor:ce,enableLabels:H,getLabelTextColor:ue,handleCellHover:I?fe:void 0,handleCellLeave:I?pe:void 0,onClick:I?z:void 0})]})};Q.propTypes=z;var U=p(Q);U.defaultProps=j;var Z=function(e,r,o){var t=r.enableLabels,i=r.theme,l=o.x,n=o.y,a=o.width,c=o.height,u=o.color,d=o.opacity,s=o.labelTextColor,h=o.label;e.save(),e.globalAlpha=d,e.fillStyle=u,e.fillRect(l-a/2,n-c/2,a,c),!0===t&&(e.fillStyle=s,e.font=i.labels.text.fontSize+"px "+i.labels.text.fontFamily,e.fillText(h,l,n)),e.restore()},$=function(e,r,o){var t=r.enableLabels,i=r.theme,l=o.x,n=o.y,a=o.width,c=o.height,u=o.color,d=o.opacity,s=o.labelTextColor,h=o.label;e.save(),e.globalAlpha=d;var f=Math.min(a,c)/2;e.fillStyle=u,e.beginPath(),e.arc(l,n,f,0,2Math.PI),e.fill(),!0===t&&(e.fillStyle=s,e.font=i.labels.text.fontSize+"px "+i.labels.text.fontFamily,e.fillText(h,l,n)),e.restore()},_=function(e){var r=e.data,o=e.keys,t=e.indexBy,a=e.minValue,c=e.maxValue,u=e.width,d=e.height,s=e.margin,f=e.forceSquare,p=e.padding,b=e.sizeVariation,g=e.cellShape,v=e.cellOpacity,C=e.cellBorderColor,R=e.axisTop,O=e.axisRight,w=e.axisBottom,S=e.axisLeft,L=e.enableLabels,H=e.label,k=e.labelTextColor,B=e.colors,M=e.nanColor,W=e.isInteractive,K=e.onClick,I=e.hoverTarget,z=e.cellHoverOpacity,E=e.cellHoverOthersOpacity,j=e.tooltipFormat,F=e.tooltip,P=e.pixelRatio,X=l(null),Y=y(u,d,s),A=Y.margin,N=Y.innerWidth,D=Y.innerHeight,Q=Y.outerWidth,U=Y.outerHeight,_=G({data:r,keys:o,indexBy:t,minValue:a,maxValue:c,width:N,height:D,padding:p,forceSquare:f,sizeVariation:b,colors:B,nanColor:M,cellOpacity:v,cellBorderColor:C,label:H,labelTextColor:k,hoverTarget:I,cellHoverOpacity:z,cellHoverOthersOpacity:E}),ee=_.cells,re=_.xScale,oe=_.yScale,te=_.offsetX,ie=_.offsetY,le=_.currentCellId,ne=_.setCurrentCellId,ae=h();n((function(){X.current.width=QP,X.current.height=UP;var e,r=X.current.getContext("2d");r.scale(P,P),r.fillStyle=ae.background,r.fillRect(0,0,Q,U),r.translate(A.left+te,A.top+ie),q(r,{xScale:re,yScale:oe,width:N-2te,height:D-2ie,top:R,right:O,bottom:w,left:S,theme:ae}),r.textAlign="center",r.textBaseline="middle",e="rect"===g?Z:$,ee.forEach((function(o){e(r,{enableLabels:L,theme:ae},o)}))}),[X,ee,Q,U,N,D,A,te,ie,g,R,O,w,S,re,oe,ae,L,P]);var ce=T(),ue=ce.showTooltipFromEvent,de=ce.hideTooltip,se=i((function(e){var r=m(X.current,e),o=r[0],t=r[1],i=ee.find((function(e){return x(e.x+A.left+te-e.width/2,e.y+A.top+ie-e.height/2,e.width,e.height,o,t)}));void 0!==i?(ne(i.id),ue(V(J,{cell:i,tooltip:F,format:j}),e)):(ne(null),de())}),[X,ee,A,te,ie,ne,ue,de,F,j]),he=i((function(){ne(null),de()}),[ne,de]),fe=i((function(e){if(null!==le){var r=ee.find((function(e){return e.id===le}));r&&K(r,e)}}),[ee,le,K]);return V("canvas",{ref:X,width:QP,height:U*P,style:{width:Q,height:U},onMouseEnter:W?se:void 0,onMouseMove:W?se:void 0,onMouseLeave:W?he:void 0,onClick:W?fe:void 0})};_.propTypes=I;var ee=p(_);ee.defaultProps=E;var re=function(e){return V(g,{children:function(r){var o=r.width,t=r.height;return V(U,K({width:o,height:t},e))}})},oe=function(e){return V(g,{children:function(r){var o=r.width,t=r.height;return V(ee,K({width:o,height:t},e))}})};export{U as HeatMap,ee as HeatMapCanvas,E as HeatMapDefaultProps,I as HeatMapPropTypes,j as HeatMapSvgDefaultProps,z as HeatMapSvgPropTypes,re as ResponsiveHeatMap,oe as ResponsiveHeatMapCanvas,G as useHeatMap};
		//# sourceMappingURL=nivo-heatmap.es.js.map

946

dist/nivo-heatmap.umd.js

		@@ -1,946 +0,2 @@
		(function (global, factory) {
		typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/axes'), require('@nivo/tooltip'), require('prop-types'), require('@nivo/colors'), require('d3-scale'), require('@react-spring/web'), require('react/jsx-runtime')) :
		typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/axes', '@nivo/tooltip', 'prop-types', '@nivo/colors', 'd3-scale', '@react-spring/web', 'react/jsx-runtime'], factory) :
		(global = global \|\| self, factory(global.nivo = global.nivo \|\| {}, global.React, global.nivo, global.nivo, global.nivo, global.PropTypes, global.nivo, global.d3, global['@react-spring/web'], global['react/jsx-runtime']));
		}(this, (function (exports, react, core, axes, tooltip, PropTypes, colors, d3Scale, web, jsxRuntime) { 'use strict';

		PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;

		function _defineProperty(obj, key, value) {
		if (key in obj) {
		Object.defineProperty(obj, key, {
		value: value,
		enumerable: true,
		configurable: true,
		writable: true
		});
		} else {
		obj[key] = value;
		}
		return obj;
		}

		function ownKeys(object, enumerableOnly) {
		var keys = Object.keys(object);
		if (Object.getOwnPropertySymbols) {
		var symbols = Object.getOwnPropertySymbols(object);
		if (enumerableOnly) symbols = symbols.filter(function (sym) {
		return Object.getOwnPropertyDescriptor(object, sym).enumerable;
		});
		keys.push.apply(keys, symbols);
		}
		return keys;
		}
		function _objectSpread2(target) {
		for (var i = 1; i < arguments.length; i++) {
		var source = arguments[i] != null ? arguments[i] : {};
		if (i % 2) {
		ownKeys(Object(source), true).forEach(function (key) {
		_defineProperty(target, key, source[key]);
		});
		} else if (Object.getOwnPropertyDescriptors) {
		Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
		} else {
		ownKeys(Object(source)).forEach(function (key) {
		Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
		});
		}
		}
		return target;
		}

		var HeatMapPropTypes = {
		data: PropTypes.arrayOf(PropTypes.object).isRequired,
		indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
		keys: PropTypes.arrayOf(PropTypes.string).isRequired,
		minValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
		maxValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
		forceSquare: PropTypes.bool.isRequired,
		sizeVariation: PropTypes.number.isRequired,
		padding: PropTypes.number.isRequired,
		cellShape: PropTypes.oneOfType([PropTypes.oneOf(['rect', 'circle']), PropTypes.func]).isRequired,
		cellOpacity: PropTypes.number.isRequired,
		cellBorderWidth: PropTypes.number.isRequired,
		cellBorderColor: colors.inheritedColorPropType.isRequired,
		axisTop: axes.axisPropType,
		axisRight: axes.axisPropType,
		axisBottom: axes.axisPropType,
		axisLeft: axes.axisPropType,
		enableGridX: PropTypes.bool.isRequired,
		enableGridY: PropTypes.bool.isRequired,
		enableLabels: PropTypes.bool.isRequired,
		label: PropTypes.func.isRequired,
		labelTextColor: colors.inheritedColorPropType.isRequired,
		colors: core.quantizeColorScalePropType.isRequired,
		nanColor: PropTypes.string,
		isInteractive: PropTypes.bool,
		onClick: PropTypes.func.isRequired,
		hoverTarget: PropTypes.oneOf(['cell', 'row', 'column', 'rowColumn']).isRequired,
		cellHoverOpacity: PropTypes.number.isRequired,
		cellHoverOthersOpacity: PropTypes.number.isRequired,
		tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
		tooltip: PropTypes.func,
		pixelRatio: PropTypes.number.isRequired
		};
		var HeatMapSvgPropTypes = _objectSpread2(_objectSpread2({}, HeatMapPropTypes), {}, {
		role: PropTypes.string.isRequired
		});
		var HeatMapDefaultProps = {
		indexBy: 'id',
		minValue: 'auto',
		maxValue: 'auto',
		forceSquare: false,
		sizeVariation: 0,
		padding: 0,
		cellShape: 'rect',
		cellOpacity: 0.85,
		cellBorderWidth: 0,
		cellBorderColor: {
		from: 'color'
		},
		axisTop: {},
		axisLeft: {},
		enableGridX: false,
		enableGridY: false,
		enableLabels: true,
		label: function label(datum, key) {
		return datum[key];
		},
		labelTextColor: {
		from: 'color',
		modifiers: [['darker', 1.4]]
		},
		colors: 'nivo',
		nanColor: '#000000',
		isInteractive: true,
		onClick: core.noop,
		hoverTarget: 'rowColumn',
		cellHoverOpacity: 1,
		cellHoverOthersOpacity: 0.35,
		pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio \|\| 1 : 1
		};
		var HeatMapSvgDefaultProps = _objectSpread2(_objectSpread2({}, HeatMapDefaultProps), {}, {
		role: 'img'
		});

		function _arrayLikeToArray(arr, len) {
		if (len == null \|\| len > arr.length) len = arr.length;
		for (var i = 0, arr2 = new Array(len); i < len; i++) {
		arr2[i] = arr[i];
		}
		return arr2;
		}

		function _arrayWithoutHoles(arr) {
		if (Array.isArray(arr)) return _arrayLikeToArray(arr);
		}

		function _iterableToArray(iter) {
		if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
		}

		function _unsupportedIterableToArray(o, minLen) {
		if (!o) return;
		if (typeof o === "string") return _arrayLikeToArray(o, minLen);
		var n = Object.prototype.toString.call(o).slice(8, -1);
		if (n === "Object" && o.constructor) n = o.constructor.name;
		if (n === "Map" \|\| n === "Set") return Array.from(o);
		if (n === "Arguments" \|\| /^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
		}

		function _nonIterableSpread() {
		throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
		}

		function _toConsumableArray(arr) {
		return _arrayWithoutHoles(arr) \|\| _iterableToArray(arr) \|\| _unsupportedIterableToArray(arr) \|\| _nonIterableSpread();
		}

		function _arrayWithHoles(arr) {
		if (Array.isArray(arr)) return arr;
		}

		function _iterableToArrayLimit(arr, i) {
		if (typeof Symbol === "undefined" \|\| !(Symbol.iterator in Object(arr))) return;
		var _arr = [];
		var _n = true;
		var _d = false;
		var _e = undefined;
		try {
		for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
		_arr.push(_s.value);
		if (i && _arr.length === i) break;
		}
		} catch (err) {
		_d = true;
		_e = err;
		} finally {
		try {
		if (!_n && _i["return"] != null) _i["return"]();
		} finally {
		if (_d) throw _e;
		}
		}
		return _arr;
		}

		function _nonIterableRest() {
		throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
		}

		function _slicedToArray(arr, i) {
		return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _unsupportedIterableToArray(arr, i) \|\| _nonIterableRest();
		}

		var computeX = function computeX(column, cellWidth, padding) {
		return column * cellWidth + cellWidth * 0.5 + padding * column + padding;
		};
		var computeY = function computeY(row, cellHeight, padding) {
		return row * cellHeight + cellHeight * 0.5 + padding * row + padding;
		};
		var isHoverTargetByType = {
		cell: function cell(_cell, current) {
		return _cell.xKey === current.xKey && _cell.yKey === current.yKey;
		},
		row: function row(cell, current) {
		return cell.yKey === current.yKey;
		},
		column: function column(cell, current) {
		return cell.xKey === current.xKey;
		},
		rowColumn: function rowColumn(cell, current) {
		return cell.xKey === current.xKey \|\| cell.yKey === current.yKey;
		}
		};
		var computeCells = function computeCells(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		getIndex = _ref.getIndex,
		xScale = _ref.xScale,
		yScale = _ref.yScale,
		sizeScale = _ref.sizeScale,
		cellOpacity = _ref.cellOpacity,
		cellWidth = _ref.cellWidth,
		cellHeight = _ref.cellHeight,
		colorScale = _ref.colorScale,
		nanColor = _ref.nanColor,
		getLabel = _ref.getLabel,
		getLabelTextColor = _ref.getLabelTextColor;
		var cells = [];
		data.forEach(function (datum) {
		keys.forEach(function (key) {
		var value = datum[key];
		var label = getLabel(datum, key);
		var index = getIndex(datum);
		var sizeMultiplier = sizeScale ? sizeScale(value) : 1;
		var width = sizeMultiplier * cellWidth;
		var height = sizeMultiplier * cellHeight;
		var cell = {
		id: "".concat(key, ".").concat(index),
		xKey: key,
		yKey: index,
		x: xScale(key),
		y: yScale(index),
		width: width,
		height: height,
		value: value,
		label: label,
		color: isNaN(value) ? nanColor : colorScale(value),
		opacity: cellOpacity
		};
		cell.labelTextColor = getLabelTextColor(cell);
		cells.push(cell);
		});
		});
		return cells;
		};
		var useHeatMap = function useHeatMap(_ref2) {
		var data = _ref2.data,
		keys = _ref2.keys,
		indexBy = _ref2.indexBy,
		_ref2$minValue = _ref2.minValue,
		_minValue = _ref2$minValue === void 0 ? 'auto' : _ref2$minValue,
		_ref2$maxValue = _ref2.maxValue,
		_maxValue = _ref2$maxValue === void 0 ? 'auto' : _ref2$maxValue,
		width = _ref2.width,
		height = _ref2.height,
		padding = _ref2.padding,
		forceSquare = _ref2.forceSquare,
		sizeVariation = _ref2.sizeVariation,
		colors$1 = _ref2.colors,
		nanColor = _ref2.nanColor,
		cellOpacity = _ref2.cellOpacity,
		cellBorderColor = _ref2.cellBorderColor,
		label = _ref2.label,
		labelTextColor = _ref2.labelTextColor,
		hoverTarget = _ref2.hoverTarget,
		cellHoverOpacity = _ref2.cellHoverOpacity,
		cellHoverOthersOpacity = _ref2.cellHoverOthersOpacity;
		var _useState = react.useState(null),
		_useState2 = _slicedToArray(_useState, 2),
		currentCellId = _useState2[0],
		setCurrentCellId = _useState2[1];
		var getIndex = core.usePropertyAccessor(indexBy);
		var indices = react.useMemo(function () {
		return data.map(getIndex);
		}, [data, getIndex]);
		var getLabel = react.useMemo(function () {
		return core.getLabelGenerator(label);
		}, [label]);
		var layoutConfig = react.useMemo(function () {
		var columns = keys.length;
		var rows = data.length;
		var cellWidth = Math.max((width - padding * (columns + 1)) / columns, 0);
		var cellHeight = Math.max((height - padding * (rows + 1)) / rows, 0);
		var offsetX = 0;
		var offsetY = 0;
		if (forceSquare === true) {
		var cellSize = Math.min(cellWidth, cellHeight);
		cellWidth = cellSize;
		cellHeight = cellSize;
		offsetX = (width - ((cellWidth + padding) * columns + padding)) / 2;
		offsetY = (height - ((cellHeight + padding) * rows + padding)) / 2;
		}
		return {
		cellWidth: cellWidth,
		cellHeight: cellHeight,
		offsetX: offsetX,
		offsetY: offsetY
		};
		}, [data, keys, width, height, padding, forceSquare]);
		var scales = react.useMemo(function () {
		return {
		x: d3Scale.scaleOrdinal(keys.map(function (key, i) {
		return computeX(i, layoutConfig.cellWidth, padding);
		})).domain(keys),
		y: d3Scale.scaleOrdinal(indices.map(function (d, i) {
		return computeY(i, layoutConfig.cellHeight, padding);
		})).domain(indices)
		};
		}, [indices, keys, layoutConfig, padding]);
		var values = react.useMemo(function () {
		var minValue = _minValue;
		var maxValue = _maxValue;
		if (minValue === 'auto' \|\| maxValue === 'auto') {
		var allValues = data.reduce(function (acc, row) {
		return acc.concat(keys.map(function (key) {
		return row[key];
		}));
		}, []);
		if (minValue === 'auto') minValue = Math.min.apply(Math, _toConsumableArray(allValues));
		if (maxValue === 'auto') maxValue = Math.max.apply(Math, _toConsumableArray(allValues));
		}
		return {
		min: Math.min(minValue, maxValue),
		max: Math.max(maxValue, minValue)
		};
		}, [data, keys, _minValue, _maxValue]);
		var sizeScale = react.useMemo(function () {
		if (sizeVariation > 0) {
		return d3Scale.scaleLinear().range([1 - sizeVariation, 1]).domain([values.min, values.max]);
		}
		}, [sizeVariation, values]);
		var colorScale = react.useMemo(function () {
		return core.guessQuantizeColorScale(colors$1).domain([values.min, values.max]);
		}, [colors$1, values]);
		var theme = core.useTheme();
		var getCellBorderColor = colors.useInheritedColor(cellBorderColor, theme);
		var getLabelTextColor = colors.useInheritedColor(labelTextColor, theme);
		var cells = react.useMemo(function () {
		return computeCells({
		data: data,
		keys: keys,
		getIndex: getIndex,
		xScale: scales.x,
		yScale: scales.y,
		sizeScale: sizeScale,
		cellOpacity: cellOpacity,
		cellWidth: layoutConfig.cellWidth,
		cellHeight: layoutConfig.cellHeight,
		colorScale: colorScale,
		nanColor: nanColor,
		getLabel: getLabel,
		getLabelTextColor: getLabelTextColor
		});
		}, [data, keys, getIndex, scales, sizeScale, cellOpacity, layoutConfig, colorScale, nanColor, getLabel, getLabelTextColor]);
		var cellsWithCurrent = react.useMemo(function () {
		if (currentCellId === null) return cells;
		var isHoverTarget = isHoverTargetByType[hoverTarget];
		var currentCell = cells.find(function (cell) {
		return cell.id === currentCellId;
		});
		return cells.map(function (cell) {
		var opacity = isHoverTarget(cell, currentCell) ? cellHoverOpacity : cellHoverOthersOpacity;
		if (opacity === cell.opacity) return cell;
		return _objectSpread2(_objectSpread2({}, cell), {}, {
		opacity: opacity
		});
		});
		}, [cells, currentCellId, hoverTarget, cellHoverOpacity, cellHoverOthersOpacity]);
		return _objectSpread2(_objectSpread2({
		cells: cellsWithCurrent,
		getIndex: getIndex,
		xScale: scales.x,
		yScale: scales.y
		}, layoutConfig), {}, {
		sizeScale: sizeScale,
		currentCellId: currentCellId,
		setCurrentCellId: setCurrentCellId,
		colorScale: colorScale,
		getCellBorderColor: getCellBorderColor,
		getLabelTextColor: getLabelTextColor
		});
		};

		var HeatMapCells = function HeatMapCells(_ref) {
		var cells = _ref.cells,
		cellComponent = _ref.cellComponent,
		cellBorderWidth = _ref.cellBorderWidth,
		getCellBorderColor = _ref.getCellBorderColor,
		enableLabels = _ref.enableLabels,
		getLabelTextColor = _ref.getLabelTextColor,
		handleCellHover = _ref.handleCellHover,
		handleCellLeave = _ref.handleCellLeave,
		onClick = _ref.onClick;
		return cells.map(function (cell) {
		return react.createElement(cellComponent, {
		key: cell.id,
		data: cell,
		label: cell.label,
		x: cell.x,
		y: cell.y,
		width: cell.width,
		height: cell.height,
		color: cell.color,
		opacity: cell.opacity,
		borderWidth: cellBorderWidth,
		borderColor: getCellBorderColor(cell),
		enableLabel: enableLabels,
		textColor: getLabelTextColor(cell),
		onHover: handleCellHover ? function (event) {
		return handleCellHover(cell, event);
		} : undefined,
		onLeave: handleCellLeave,
		onClick: onClick
		});
		});
		};
		HeatMapCells.propTypes = {};

		var HeatMapCellRect = function HeatMapCellRect(_ref) {
		var data = _ref.data,
		label = _ref.label,
		x = _ref.x,
		y = _ref.y,
		width = _ref.width,
		height = _ref.height,
		color = _ref.color,
		opacity = _ref.opacity,
		borderWidth = _ref.borderWidth,
		borderColor = _ref.borderColor,
		enableLabel = _ref.enableLabel,
		textColor = _ref.textColor,
		onHover = _ref.onHover,
		onLeave = _ref.onLeave,
		onClick = _ref.onClick;
		var theme = core.useTheme();
		var _useMotionConfig = core.useMotionConfig(),
		animate = _useMotionConfig.animate,
		springConfig = _useMotionConfig.config;
		var animatedProps = web.useSpring({
		transform: "translate(".concat(x, ", ").concat(y, ")"),
		width: width,
		height: height,
		xOffset: width * -0.5,
		yOffset: height * -0.5,
		color: color,
		opacity: opacity,
		textColor: textColor,
		borderWidth: borderWidth,
		borderColor: borderColor,
		config: springConfig,
		immediate: !animate
		});
		return jsxRuntime.jsxs(web.animated.g, {
		transform: animatedProps.transform,
		style: {
		cursor: 'pointer'
		},
		onMouseEnter: onHover,
		onMouseMove: onHover,
		onMouseLeave: onLeave,
		onClick: onClick ? function (event) {
		return onClick(data, event);
		} : undefined,
		children: [jsxRuntime.jsx(web.animated.rect, {
		x: animatedProps.xOffset,
		y: animatedProps.yOffset,
		width: animatedProps.width,
		height: animatedProps.height,
		fill: animatedProps.color,
		fillOpacity: animatedProps.opacity,
		strokeWidth: animatedProps.borderWidth,
		stroke: animatedProps.borderColor,
		strokeOpacity: animatedProps.opacity
		}), enableLabel && jsxRuntime.jsx(web.animated.text, {
		dominantBaseline: "central",
		textAnchor: "middle",
		style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
		fill: animatedProps.textColor
		}),
		fillOpacity: animatedProps.opacity,
		children: label
		})]
		});
		};
		var HeatMapCellRect$1 = react.memo(HeatMapCellRect);

		var HeatMapCellCircle = function HeatMapCellCircle(_ref) {
		var data = _ref.data,
		label = _ref.label,
		x = _ref.x,
		y = _ref.y,
		width = _ref.width,
		height = _ref.height,
		color = _ref.color,
		opacity = _ref.opacity,
		borderWidth = _ref.borderWidth,
		borderColor = _ref.borderColor,
		enableLabel = _ref.enableLabel,
		textColor = _ref.textColor,
		onHover = _ref.onHover,
		onLeave = _ref.onLeave,
		onClick = _ref.onClick;
		var theme = core.useTheme();
		var _useMotionConfig = core.useMotionConfig(),
		animate = _useMotionConfig.animate,
		springConfig = _useMotionConfig.config;
		var animatedProps = web.useSpring({
		transform: "translate(".concat(x, ", ").concat(y, ")"),
		radius: Math.min(width, height) / 2,
		color: color,
		opacity: opacity,
		textColor: textColor,
		borderWidth: borderWidth,
		borderColor: borderColor,
		config: springConfig,
		immediate: !animate
		});
		return jsxRuntime.jsxs(web.animated.g, {
		transform: animatedProps.transform,
		style: {
		cursor: 'pointer'
		},
		onMouseEnter: onHover,
		onMouseMove: onHover,
		onMouseLeave: onLeave,
		onClick: onClick ? function (event) {
		return onClick(data, event);
		} : undefined,
		children: [jsxRuntime.jsx(web.animated.circle, {
		r: animatedProps.radius,
		fill: animatedProps.color,
		fillOpacity: animatedProps.opacity,
		strokeWidth: animatedProps.borderWidth,
		stroke: animatedProps.borderColor,
		strokeOpacity: animatedProps.opacity
		}), enableLabel && jsxRuntime.jsx(web.animated.text, {
		dominantBaseline: "central",
		textAnchor: "middle",
		style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
		fill: animatedProps.textColor
		}),
		fillOpacity: animatedProps.opacity,
		children: label
		})]
		});
		};
		var HeatMapCellCircle$1 = react.memo(HeatMapCellCircle);

		var HeatMapCellTooltip = function HeatMapCellTooltip(_ref) {
		var cell = _ref.cell,
		format = _ref.format,
		tooltip$1 = _ref.tooltip;
		return jsxRuntime.jsx(tooltip.BasicTooltip, {
		id: "".concat(cell.yKey, " - ").concat(cell.xKey),
		value: cell.value,
		enableChip: true,
		color: cell.color,
		format: format,
		renderContent: typeof tooltip$1 === 'function' ? tooltip$1.bind(null, _objectSpread2({}, cell)) : null
		});
		};
		var HeatMapCellTooltip$1 = react.memo(HeatMapCellTooltip);

		var HeatMap = function HeatMap(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		indexBy = _ref.indexBy,
		minValue = _ref.minValue,
		maxValue = _ref.maxValue,
		width = _ref.width,
		height = _ref.height,
		partialMargin = _ref.margin,
		forceSquare = _ref.forceSquare,
		padding = _ref.padding,
		sizeVariation = _ref.sizeVariation,
		cellShape = _ref.cellShape,
		cellOpacity = _ref.cellOpacity,
		cellBorderWidth = _ref.cellBorderWidth,
		cellBorderColor = _ref.cellBorderColor,
		axisTop = _ref.axisTop,
		axisRight = _ref.axisRight,
		axisBottom = _ref.axisBottom,
		axisLeft = _ref.axisLeft,
		enableGridX = _ref.enableGridX,
		enableGridY = _ref.enableGridY,
		enableLabels = _ref.enableLabels,
		label = _ref.label,
		labelTextColor = _ref.labelTextColor,
		colors = _ref.colors,
		nanColor = _ref.nanColor,
		isInteractive = _ref.isInteractive,
		onClick = _ref.onClick,
		hoverTarget = _ref.hoverTarget,
		cellHoverOpacity = _ref.cellHoverOpacity,
		cellHoverOthersOpacity = _ref.cellHoverOthersOpacity,
		tooltipFormat = _ref.tooltipFormat,
		tooltip$1 = _ref.tooltip,
		role = _ref.role;
		var _useDimensions = core.useDimensions(width, height, partialMargin),
		margin = _useDimensions.margin,
		innerWidth = _useDimensions.innerWidth,
		innerHeight = _useDimensions.innerHeight,
		outerWidth = _useDimensions.outerWidth,
		outerHeight = _useDimensions.outerHeight;
		var _useHeatMap = useHeatMap({
		data: data,
		keys: keys,
		indexBy: indexBy,
		minValue: minValue,
		maxValue: maxValue,
		width: innerWidth,
		height: innerHeight,
		padding: padding,
		forceSquare: forceSquare,
		sizeVariation: sizeVariation,
		colors: colors,
		nanColor: nanColor,
		cellOpacity: cellOpacity,
		cellBorderColor: cellBorderColor,
		label: label,
		labelTextColor: labelTextColor,
		hoverTarget: hoverTarget,
		cellHoverOpacity: cellHoverOpacity,
		cellHoverOthersOpacity: cellHoverOthersOpacity
		}),
		cells = _useHeatMap.cells,
		xScale = _useHeatMap.xScale,
		yScale = _useHeatMap.yScale,
		offsetX = _useHeatMap.offsetX,
		offsetY = _useHeatMap.offsetY,
		setCurrentCellId = _useHeatMap.setCurrentCellId,
		getCellBorderColor = _useHeatMap.getCellBorderColor,
		getLabelTextColor = _useHeatMap.getLabelTextColor;
		var _useTooltip = tooltip.useTooltip(),
		showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
		hideTooltip = _useTooltip.hideTooltip;
		var handleCellHover = react.useCallback(function (cell, event) {
		setCurrentCellId(cell.id);
		showTooltipFromEvent(jsxRuntime.jsx(HeatMapCellTooltip$1, {
		cell: cell,
		format: tooltipFormat,
		tooltip: tooltip$1
		}), event);
		}, [setCurrentCellId, showTooltipFromEvent, tooltipFormat, tooltip$1]);
		var handleCellLeave = react.useCallback(function () {
		setCurrentCellId(null);
		hideTooltip();
		}, [setCurrentCellId, hideTooltip]);
		var cellComponent;
		if (cellShape === 'rect') {
		cellComponent = HeatMapCellRect$1;
		} else if (cellShape === 'circle') {
		cellComponent = HeatMapCellCircle$1;
		} else {
		cellComponent = cellShape;
		}
		return jsxRuntime.jsxs(core.SvgWrapper, {
		width: outerWidth,
		height: outerHeight,
		margin: Object.assign({}, margin, {
		top: margin.top + offsetY,
		left: margin.left + offsetX
		}),
		role: role,
		children: [jsxRuntime.jsx(axes.Grid, {
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		xScale: enableGridX ? xScale : null,
		yScale: enableGridY ? yScale : null
		}), jsxRuntime.jsx(axes.Axes, {
		xScale: xScale,
		yScale: yScale,
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		top: axisTop,
		right: axisRight,
		bottom: axisBottom,
		left: axisLeft
		}), jsxRuntime.jsx(HeatMapCells, {
		cells: cells,
		cellComponent: cellComponent,
		cellBorderWidth: cellBorderWidth,
		getCellBorderColor: getCellBorderColor,
		enableLabels: enableLabels,
		getLabelTextColor: getLabelTextColor,
		handleCellHover: isInteractive ? handleCellHover : undefined,
		handleCellLeave: isInteractive ? handleCellLeave : undefined,
		onClick: isInteractive ? onClick : undefined
		})]
		});
		};
		var WrappedHeatMap = core.withContainer(HeatMap);
		WrappedHeatMap.defaultProps = HeatMapSvgDefaultProps;

		var renderRect = function renderRect(ctx, _ref, _ref2) {
		var enableLabels = _ref.enableLabels,
		theme = _ref.theme;
		var x = _ref2.x,
		y = _ref2.y,
		width = _ref2.width,
		height = _ref2.height,
		color = _ref2.color,
		opacity = _ref2.opacity,
		labelTextColor = _ref2.labelTextColor,
		label = _ref2.label;
		ctx.save();
		ctx.globalAlpha = opacity;
		ctx.fillStyle = color;
		ctx.fillRect(x - width / 2, y - height / 2, width, height);
		if (enableLabels === true) {
		ctx.fillStyle = labelTextColor;
		ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily);
		ctx.fillText(label, x, y);
		}
		ctx.restore();
		};
		var renderCircle = function renderCircle(ctx, _ref3, _ref4) {
		var enableLabels = _ref3.enableLabels,
		theme = _ref3.theme;
		var x = _ref4.x,
		y = _ref4.y,
		width = _ref4.width,
		height = _ref4.height,
		color = _ref4.color,
		opacity = _ref4.opacity,
		labelTextColor = _ref4.labelTextColor,
		label = _ref4.label;
		ctx.save();
		ctx.globalAlpha = opacity;
		var radius = Math.min(width, height) / 2;
		ctx.fillStyle = color;
		ctx.beginPath();
		ctx.arc(x, y, radius, 0, 2 * Math.PI);
		ctx.fill();
		if (enableLabels === true) {
		ctx.fillStyle = labelTextColor;
		ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily);
		ctx.fillText(label, x, y);
		}
		ctx.restore();
		};

		var HeatMapCanvas = function HeatMapCanvas(_ref) {
		var data = _ref.data,
		keys = _ref.keys,
		indexBy = _ref.indexBy,
		minValue = _ref.minValue,
		maxValue = _ref.maxValue,
		width = _ref.width,
		height = _ref.height,
		partialMargin = _ref.margin,
		forceSquare = _ref.forceSquare,
		padding = _ref.padding,
		sizeVariation = _ref.sizeVariation,
		cellShape = _ref.cellShape,
		cellOpacity = _ref.cellOpacity,
		cellBorderColor = _ref.cellBorderColor,
		axisTop = _ref.axisTop,
		axisRight = _ref.axisRight,
		axisBottom = _ref.axisBottom,
		axisLeft = _ref.axisLeft,
		enableLabels = _ref.enableLabels,
		label = _ref.label,
		labelTextColor = _ref.labelTextColor,
		colors = _ref.colors,
		nanColor = _ref.nanColor,
		isInteractive = _ref.isInteractive,
		onClick = _ref.onClick,
		hoverTarget = _ref.hoverTarget,
		cellHoverOpacity = _ref.cellHoverOpacity,
		cellHoverOthersOpacity = _ref.cellHoverOthersOpacity,
		tooltipFormat = _ref.tooltipFormat,
		tooltip$1 = _ref.tooltip,
		pixelRatio = _ref.pixelRatio;
		var canvasEl = react.useRef(null);
		var _useDimensions = core.useDimensions(width, height, partialMargin),
		margin = _useDimensions.margin,
		innerWidth = _useDimensions.innerWidth,
		innerHeight = _useDimensions.innerHeight,
		outerWidth = _useDimensions.outerWidth,
		outerHeight = _useDimensions.outerHeight;
		var _useHeatMap = useHeatMap({
		data: data,
		keys: keys,
		indexBy: indexBy,
		minValue: minValue,
		maxValue: maxValue,
		width: innerWidth,
		height: innerHeight,
		padding: padding,
		forceSquare: forceSquare,
		sizeVariation: sizeVariation,
		colors: colors,
		nanColor: nanColor,
		cellOpacity: cellOpacity,
		cellBorderColor: cellBorderColor,
		label: label,
		labelTextColor: labelTextColor,
		hoverTarget: hoverTarget,
		cellHoverOpacity: cellHoverOpacity,
		cellHoverOthersOpacity: cellHoverOthersOpacity
		}),
		cells = _useHeatMap.cells,
		xScale = _useHeatMap.xScale,
		yScale = _useHeatMap.yScale,
		offsetX = _useHeatMap.offsetX,
		offsetY = _useHeatMap.offsetY,
		currentCellId = _useHeatMap.currentCellId,
		setCurrentCellId = _useHeatMap.setCurrentCellId;
		var theme = core.useTheme();
		react.useEffect(function () {
		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.translate(margin.left + offsetX, margin.top + offsetY);
		axes.renderAxesToCanvas(ctx, {
		xScale: xScale,
		yScale: yScale,
		width: innerWidth - offsetX * 2,
		height: innerHeight - offsetY * 2,
		top: axisTop,
		right: axisRight,
		bottom: axisBottom,
		left: axisLeft,
		theme: theme
		});
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		var renderCell;
		if (cellShape === 'rect') {
		renderCell = renderRect;
		} else {
		renderCell = renderCircle;
		}
		cells.forEach(function (cell) {
		renderCell(ctx, {
		enableLabels: enableLabels,
		theme: theme
		}, cell);
		});
		}, [canvasEl, cells, outerWidth, outerHeight, innerWidth, innerHeight, margin, offsetX, offsetY, cellShape, axisTop, axisRight, axisBottom, axisLeft, xScale, yScale, theme, enableLabels, pixelRatio]);
		var _useTooltip = tooltip.useTooltip(),
		showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
		hideTooltip = _useTooltip.hideTooltip;
		var handleMouseHover = react.useCallback(function (event) {
		var _getRelativeCursor = core.getRelativeCursor(canvasEl.current, event),
		_getRelativeCursor2 = _slicedToArray(_getRelativeCursor, 2),
		x = _getRelativeCursor2[0],
		y = _getRelativeCursor2[1];
		var cell = cells.find(function (c) {
		return core.isCursorInRect(c.x + margin.left + offsetX - c.width / 2, c.y + margin.top + offsetY - c.height / 2, c.width, c.height, x, y);
		});
		if (cell !== undefined) {
		setCurrentCellId(cell.id);
		showTooltipFromEvent(jsxRuntime.jsx(HeatMapCellTooltip$1, {
		cell: cell,
		tooltip: tooltip$1,
		format: tooltipFormat
		}), event);
		} else {
		setCurrentCellId(null);
		hideTooltip();
		}
		}, [canvasEl, cells, margin, offsetX, offsetY, setCurrentCellId, showTooltipFromEvent, hideTooltip, tooltip$1, tooltipFormat]);
		var handleMouseLeave = react.useCallback(function () {
		setCurrentCellId(null);
		hideTooltip();
		}, [setCurrentCellId, hideTooltip]);
		var handleClick = react.useCallback(function (event) {
		if (currentCellId === null) return;
		var currentCell = cells.find(function (cell) {
		return cell.id === currentCellId;
		});
		currentCell && onClick(currentCell, event);
		}, [cells, currentCellId, onClick]);
		return jsxRuntime.jsx("canvas", {
		ref: canvasEl,
		width: outerWidth * pixelRatio,
		height: outerHeight * pixelRatio,
		style: {
		width: outerWidth,
		height: outerHeight
		},
		onMouseEnter: isInteractive ? handleMouseHover : undefined,
		onMouseMove: isInteractive ? handleMouseHover : undefined,
		onMouseLeave: isInteractive ? handleMouseLeave : undefined,
		onClick: isInteractive ? handleClick : undefined
		});
		};
		var WrappedHeatMapCanvas = core.withContainer(HeatMapCanvas);
		WrappedHeatMapCanvas.defaultProps = HeatMapDefaultProps;

		var ResponsiveHeatMap = function ResponsiveHeatMap(props) {
		return jsxRuntime.jsx(core.ResponsiveWrapper, {
		children: function children(_ref) {
		var width = _ref.width,
		height = _ref.height;
		return jsxRuntime.jsx(WrappedHeatMap, _objectSpread2({
		width: width,
		height: height
		}, props));
		}
		});
		};

		var ResponsiveHeatMapCanvas = function ResponsiveHeatMapCanvas(props) {
		return jsxRuntime.jsx(core.ResponsiveWrapper, {
		children: function children(_ref) {
		var width = _ref.width,
		height = _ref.height;
		return jsxRuntime.jsx(WrappedHeatMapCanvas, _objectSpread2({
		width: width,
		height: height
		}, props));
		}
		});
		};

		exports.HeatMap = WrappedHeatMap;
		exports.HeatMapCanvas = WrappedHeatMapCanvas;
		exports.HeatMapDefaultProps = HeatMapDefaultProps;
		exports.HeatMapPropTypes = HeatMapPropTypes;
		exports.HeatMapSvgDefaultProps = HeatMapSvgDefaultProps;
		exports.HeatMapSvgPropTypes = HeatMapSvgPropTypes;
		exports.ResponsiveHeatMap = ResponsiveHeatMap;
		exports.ResponsiveHeatMapCanvas = ResponsiveHeatMapCanvas;
		exports.useHeatMap = useHeatMap;

		Object.defineProperty(exports, '__esModule', { value: true });

		})));
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@nivo/core"),require("@nivo/axes"),require("@nivo/tooltip"),require("prop-types"),require("@nivo/colors"),require("d3-scale"),require("@react-spring/web"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","@nivo/core","@nivo/axes","@nivo/tooltip","prop-types","@nivo/colors","d3-scale","@react-spring/web","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e\|\|self).nivo=e.nivo\|\|{},e.React,e.nivo,e.nivo,e.nivo,e.PropTypes,e.nivo,e.d3,e["@react-spring/web"],e["react/jsx-runtime"])}(this,(function(e,t,o,r,l,i,a,n,u,d){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(i);function f(){return f=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},f.apply(this,arguments)}var p={data:s.default.arrayOf(s.default.object).isRequired,indexBy:s.default.oneOfType([s.default.string,s.default.func]).isRequired,keys:s.default.arrayOf(s.default.string).isRequired,minValue:s.default.oneOfType([s.default.oneOf(["auto"]),s.default.number]).isRequired,maxValue:s.default.oneOfType([s.default.oneOf(["auto"]),s.default.number]).isRequired,forceSquare:s.default.bool.isRequired,sizeVariation:s.default.number.isRequired,padding:s.default.number.isRequired,cellShape:s.default.oneOfType([s.default.oneOf(["rect","circle"]),s.default.func]).isRequired,cellOpacity:s.default.number.isRequired,cellBorderWidth:s.default.number.isRequired,cellBorderColor:a.inheritedColorPropType.isRequired,axisTop:r.axisPropType,axisRight:r.axisPropType,axisBottom:r.axisPropType,axisLeft:r.axisPropType,enableGridX:s.default.bool.isRequired,enableGridY:s.default.bool.isRequired,enableLabels:s.default.bool.isRequired,label:s.default.func.isRequired,labelTextColor:a.inheritedColorPropType.isRequired,colors:o.quantizeColorScalePropType.isRequired,nanColor:s.default.string,isInteractive:s.default.bool,onClick:s.default.func.isRequired,hoverTarget:s.default.oneOf(["cell","row","column","rowColumn"]).isRequired,cellHoverOpacity:s.default.number.isRequired,cellHoverOthersOpacity:s.default.number.isRequired,tooltipFormat:s.default.oneOfType([s.default.func,s.default.string]),tooltip:s.default.func,pixelRatio:s.default.number.isRequired},h=f({},p,{role:s.default.string.isRequired}),y={indexBy:"id",minValue:"auto",maxValue:"auto",forceSquare:!1,sizeVariation:0,padding:0,cellShape:"rect",cellOpacity:.85,cellBorderWidth:0,cellBorderColor:{from:"color"},axisTop:{},axisLeft:{},enableGridX:!1,enableGridY:!1,enableLabels:!0,label:function(e,t){return e[t]},labelTextColor:{from:"color",modifiers:[["darker",1.4]]},colors:"nivo",nanColor:"#000000",isInteractive:!0,onClick:o.noop,hoverTarget:"rowColumn",cellHoverOpacity:1,cellHoverOthersOpacity:.35,pixelRatio:"undefined"!=typeof window&&window.devicePixelRatio\|\|1},b=f({},y,{role:"img"}),m={cell:function(e,t){return e.xKey===t.xKey&&e.yKey===t.yKey},row:function(e,t){return e.yKey===t.yKey},column:function(e,t){return e.xKey===t.xKey},rowColumn:function(e,t){return e.xKey===t.xKey\|\|e.yKey===t.yKey}},x=function(e){var r=e.data,l=e.keys,i=e.indexBy,u=e.minValue,d=void 0===u?"auto":u,c=e.maxValue,s=void 0===c?"auto":c,p=e.width,h=e.height,y=e.padding,b=e.forceSquare,x=e.sizeVariation,v=e.colors,g=e.nanColor,C=e.cellOpacity,q=e.cellBorderColor,R=e.label,T=e.labelTextColor,O=e.hoverTarget,S=e.cellHoverOpacity,w=e.cellHoverOthersOpacity,M=t.useState(null),H=M[0],L=M[1],k=o.usePropertyAccessor(i),j=t.useMemo((function(){return r.map(k)}),[r,k]),B=t.useMemo((function(){return o.getLabelGenerator(R)}),[R]),W=t.useMemo((function(){var e=l.length,t=r.length,o=Math.max((p-y(e+1))/e,0),i=Math.max((h-y(t+1))/t,0),a=0,n=0;if(!0===b){var u=Math.min(o,i);a=(p-(((o=u)+y)e+y))/2,n=(h-(((i=u)+y)t+y))/2}return{cellWidth:o,cellHeight:i,offsetX:a,offsetY:n}}),[r,l,p,h,y,b]),V=t.useMemo((function(){return{x:n.scaleOrdinal(l.map((function(e,t){return function(e,t,o){return et+.5t+oe+o}(t,W.cellWidth,y)}))).domain(l),y:n.scaleOrdinal(j.map((function(e,t){return function(e,t,o){return et+.5t+oe+o}(t,W.cellHeight,y)}))).domain(j)}}),[j,l,W,y]),P=t.useMemo((function(){var e=d,t=s;if("auto"===e\|\|"auto"===t){var o=r.reduce((function(e,t){return e.concat(l.map((function(e){return t[e]})))}),[]);"auto"===e&&(e=Math.min.apply(Math,o)),"auto"===t&&(t=Math.max.apply(Math,o))}return{min:Math.min(e,t),max:Math.max(t,e)}}),[r,l,d,s]),K=t.useMemo((function(){if(x>0)return n.scaleLinear().range([1-x,1]).domain([P.min,P.max])}),[x,P]),I=t.useMemo((function(){return o.guessQuantizeColorScale(v).domain([P.min,P.max])}),[v,P]),z=o.useTheme(),E=a.useInheritedColor(q,z),A=a.useInheritedColor(T,z),G=t.useMemo((function(){return function(e){var t=e.data,o=e.keys,r=e.getIndex,l=e.xScale,i=e.yScale,a=e.sizeScale,n=e.cellOpacity,u=e.cellWidth,d=e.cellHeight,c=e.colorScale,s=e.nanColor,f=e.getLabel,p=e.getLabelTextColor,h=[];return t.forEach((function(e){o.forEach((function(t){var o=e[t],y=f(e,t),b=r(e),m=a?a(o):1,x=mu,v=md,g={id:t+"."+b,xKey:t,yKey:b,x:l(t),y:i(b),width:x,height:v,value:o,label:y,color:isNaN(o)?s:c(o),opacity:n};g.labelTextColor=p(g),h.push(g)}))})),h}({data:r,keys:l,getIndex:k,xScale:V.x,yScale:V.y,sizeScale:K,cellOpacity:C,cellWidth:W.cellWidth,cellHeight:W.cellHeight,colorScale:I,nanColor:g,getLabel:B,getLabelTextColor:A})}),[r,l,k,V,K,C,W,I,g,B,A]),F=t.useMemo((function(){if(null===H)return G;var e=m[O],t=G.find((function(e){return e.id===H}));return G.map((function(o){var r=e(o,t)?S:w;return r===o.opacity?o:f({},o,{opacity:r})}))}),[G,H,O,S,w]);return f({cells:F,getIndex:k,xScale:V.x,yScale:V.y},W,{sizeScale:K,currentCellId:H,setCurrentCellId:L,colorScale:I,getCellBorderColor:E,getLabelTextColor:A})},v=function(e){var o=e.cells,r=e.cellComponent,l=e.cellBorderWidth,i=e.getCellBorderColor,a=e.enableLabels,n=e.getLabelTextColor,u=e.handleCellHover,d=e.handleCellLeave,c=e.onClick;return o.map((function(e){return t.createElement(r,{key:e.id,data:e,label:e.label,x:e.x,y:e.y,width:e.width,height:e.height,color:e.color,opacity:e.opacity,borderWidth:l,borderColor:i(e),enableLabel:a,textColor:n(e),onHover:u?function(t){return u(e,t)}:void 0,onLeave:d,onClick:c})}))};v.propTypes={};var g=function(e){var t=e.data,r=e.label,l=e.x,i=e.y,a=e.width,n=e.height,c=e.color,s=e.opacity,p=e.borderWidth,h=e.borderColor,y=e.enableLabel,b=e.textColor,m=e.onHover,x=e.onLeave,v=e.onClick,g=o.useTheme(),C=o.useMotionConfig(),q=C.animate,R=C.config,T=u.useSpring({transform:"translate("+l+", "+i+")",width:a,height:n,xOffset:-.5a,yOffset:-.5n,color:c,opacity:s,textColor:b,borderWidth:p,borderColor:h,config:R,immediate:!q});return d.jsxs(u.animated.g,{transform:T.transform,style:{cursor:"pointer"},onMouseEnter:m,onMouseMove:m,onMouseLeave:x,onClick:v?function(e){return v(t,e)}:void 0,children:[d.jsx(u.animated.rect,{x:T.xOffset,y:T.yOffset,width:T.width,height:T.height,fill:T.color,fillOpacity:T.opacity,strokeWidth:T.borderWidth,stroke:T.borderColor,strokeOpacity:T.opacity}),y&&d.jsx(u.animated.text,{dominantBaseline:"central",textAnchor:"middle",style:f({},g.labels.text,{fill:T.textColor}),fillOpacity:T.opacity,children:r})]})};g.propTypes={data:s.default.object.isRequired,label:s.default.oneOfType([s.default.number,s.default.string]).isRequired,x:s.default.number.isRequired,y:s.default.number.isRequired,width:s.default.number.isRequired,height:s.default.number.isRequired,color:s.default.string.isRequired,opacity:s.default.number.isRequired,borderWidth:s.default.number.isRequired,borderColor:s.default.string.isRequired,enableLabel:s.default.bool.isRequired,textColor:s.default.string.isRequired,onHover:s.default.func,onLeave:s.default.func,onClick:s.default.func};var C=t.memo(g),q=function(e){var t=e.data,r=e.label,l=e.x,i=e.y,a=e.width,n=e.height,c=e.color,s=e.opacity,p=e.borderWidth,h=e.borderColor,y=e.enableLabel,b=e.textColor,m=e.onHover,x=e.onLeave,v=e.onClick,g=o.useTheme(),C=o.useMotionConfig(),q=C.animate,R=C.config,T=u.useSpring({transform:"translate("+l+", "+i+")",radius:Math.min(a,n)/2,color:c,opacity:s,textColor:b,borderWidth:p,borderColor:h,config:R,immediate:!q});return d.jsxs(u.animated.g,{transform:T.transform,style:{cursor:"pointer"},onMouseEnter:m,onMouseMove:m,onMouseLeave:x,onClick:v?function(e){return v(t,e)}:void 0,children:[d.jsx(u.animated.circle,{r:T.radius,fill:T.color,fillOpacity:T.opacity,strokeWidth:T.borderWidth,stroke:T.borderColor,strokeOpacity:T.opacity}),y&&d.jsx(u.animated.text,{dominantBaseline:"central",textAnchor:"middle",style:f({},g.labels.text,{fill:T.textColor}),fillOpacity:T.opacity,children:r})]})};q.propTypes={data:s.default.object.isRequired,label:s.default.oneOfType([s.default.number,s.default.string]).isRequired,x:s.default.number.isRequired,y:s.default.number.isRequired,width:s.default.number.isRequired,height:s.default.number.isRequired,color:s.default.string.isRequired,opacity:s.default.number.isRequired,borderWidth:s.default.number.isRequired,borderColor:s.default.string.isRequired,enableLabel:s.default.bool.isRequired,textColor:s.default.string.isRequired,onHover:s.default.func,onLeave:s.default.func,onClick:s.default.func};var R=t.memo(q),T=function(e){var t=e.cell,o=e.format,r=e.tooltip;return d.jsx(l.BasicTooltip,{id:t.yKey+" - "+t.xKey,value:t.value,enableChip:!0,color:t.color,format:o,renderContent:"function"==typeof r?r.bind(null,f({},t)):null})};T.propTypes={cell:s.default.shape({xKey:s.default.string.isRequired,yKey:s.default.string.isRequired,value:s.default.number.isRequired,color:s.default.string.isRequired}).isRequired,format:s.default.func,tooltip:s.default.func};var O=t.memo(T),S=function(e){var i,a=e.data,n=e.keys,u=e.indexBy,c=e.minValue,s=e.maxValue,f=e.width,p=e.height,h=e.margin,y=e.forceSquare,b=e.padding,m=e.sizeVariation,g=e.cellShape,q=e.cellOpacity,T=e.cellBorderWidth,S=e.cellBorderColor,w=e.axisTop,M=e.axisRight,H=e.axisBottom,L=e.axisLeft,k=e.enableGridX,j=e.enableGridY,B=e.enableLabels,W=e.label,V=e.labelTextColor,P=e.colors,K=e.nanColor,I=e.isInteractive,z=e.onClick,E=e.hoverTarget,A=e.cellHoverOpacity,G=e.cellHoverOthersOpacity,F=e.tooltipFormat,X=e.tooltip,Y=e.role,D=o.useDimensions(f,p,h),N=D.margin,_=D.innerWidth,Q=D.innerHeight,J=D.outerWidth,U=D.outerHeight,Z=x({data:a,keys:n,indexBy:u,minValue:c,maxValue:s,width:_,height:Q,padding:b,forceSquare:y,sizeVariation:m,colors:P,nanColor:K,cellOpacity:q,cellBorderColor:S,label:W,labelTextColor:V,hoverTarget:E,cellHoverOpacity:A,cellHoverOthersOpacity:G}),$=Z.cells,ee=Z.xScale,te=Z.yScale,oe=Z.offsetX,re=Z.offsetY,le=Z.setCurrentCellId,ie=Z.getCellBorderColor,ae=Z.getLabelTextColor,ne=l.useTooltip(),ue=ne.showTooltipFromEvent,de=ne.hideTooltip,ce=t.useCallback((function(e,t){le(e.id),ue(d.jsx(O,{cell:e,format:F,tooltip:X}),t)}),[le,ue,F,X]),se=t.useCallback((function(){le(null),de()}),[le,de]);return i="rect"===g?C:"circle"===g?R:g,d.jsxs(o.SvgWrapper,{width:J,height:U,margin:Object.assign({},N,{top:N.top+re,left:N.left+oe}),role:Y,children:[d.jsx(r.Grid,{width:_-2oe,height:Q-2re,xScale:k?ee:null,yScale:j?te:null}),d.jsx(r.Axes,{xScale:ee,yScale:te,width:_-2oe,height:Q-2re,top:w,right:M,bottom:H,left:L}),d.jsx(v,{cells:$,cellComponent:i,cellBorderWidth:T,getCellBorderColor:ie,enableLabels:B,getLabelTextColor:ae,handleCellHover:I?ce:void 0,handleCellLeave:I?se:void 0,onClick:I?z:void 0})]})};S.propTypes=h;var w=o.withContainer(S);w.defaultProps=b;var M=function(e,t,o){var r=t.enableLabels,l=t.theme,i=o.x,a=o.y,n=o.width,u=o.height,d=o.color,c=o.opacity,s=o.labelTextColor,f=o.label;e.save(),e.globalAlpha=c,e.fillStyle=d,e.fillRect(i-n/2,a-u/2,n,u),!0===r&&(e.fillStyle=s,e.font=l.labels.text.fontSize+"px "+l.labels.text.fontFamily,e.fillText(f,i,a)),e.restore()},H=function(e,t,o){var r=t.enableLabels,l=t.theme,i=o.x,a=o.y,n=o.width,u=o.height,d=o.color,c=o.opacity,s=o.labelTextColor,f=o.label;e.save(),e.globalAlpha=c;var p=Math.min(n,u)/2;e.fillStyle=d,e.beginPath(),e.arc(i,a,p,0,2Math.PI),e.fill(),!0===r&&(e.fillStyle=s,e.font=l.labels.text.fontSize+"px "+l.labels.text.fontFamily,e.fillText(f,i,a)),e.restore()},L=function(e){var i=e.data,a=e.keys,n=e.indexBy,u=e.minValue,c=e.maxValue,s=e.width,f=e.height,p=e.margin,h=e.forceSquare,y=e.padding,b=e.sizeVariation,m=e.cellShape,v=e.cellOpacity,g=e.cellBorderColor,C=e.axisTop,q=e.axisRight,R=e.axisBottom,T=e.axisLeft,S=e.enableLabels,w=e.label,L=e.labelTextColor,k=e.colors,j=e.nanColor,B=e.isInteractive,W=e.onClick,V=e.hoverTarget,P=e.cellHoverOpacity,K=e.cellHoverOthersOpacity,I=e.tooltipFormat,z=e.tooltip,E=e.pixelRatio,A=t.useRef(null),G=o.useDimensions(s,f,p),F=G.margin,X=G.innerWidth,Y=G.innerHeight,D=G.outerWidth,N=G.outerHeight,_=x({data:i,keys:a,indexBy:n,minValue:u,maxValue:c,width:X,height:Y,padding:y,forceSquare:h,sizeVariation:b,colors:k,nanColor:j,cellOpacity:v,cellBorderColor:g,label:w,labelTextColor:L,hoverTarget:V,cellHoverOpacity:P,cellHoverOthersOpacity:K}),Q=_.cells,J=_.xScale,U=_.yScale,Z=_.offsetX,$=_.offsetY,ee=_.currentCellId,te=_.setCurrentCellId,oe=o.useTheme();t.useEffect((function(){A.current.width=DE,A.current.height=NE;var e,t=A.current.getContext("2d");t.scale(E,E),t.fillStyle=oe.background,t.fillRect(0,0,D,N),t.translate(F.left+Z,F.top+$),r.renderAxesToCanvas(t,{xScale:J,yScale:U,width:X-2Z,height:Y-2$,top:C,right:q,bottom:R,left:T,theme:oe}),t.textAlign="center",t.textBaseline="middle",e="rect"===m?M:H,Q.forEach((function(o){e(t,{enableLabels:S,theme:oe},o)}))}),[A,Q,D,N,X,Y,F,Z,$,m,C,q,R,T,J,U,oe,S,E]);var re=l.useTooltip(),le=re.showTooltipFromEvent,ie=re.hideTooltip,ae=t.useCallback((function(e){var t=o.getRelativeCursor(A.current,e),r=t[0],l=t[1],i=Q.find((function(e){return o.isCursorInRect(e.x+F.left+Z-e.width/2,e.y+F.top+$-e.height/2,e.width,e.height,r,l)}));void 0!==i?(te(i.id),le(d.jsx(O,{cell:i,tooltip:z,format:I}),e)):(te(null),ie())}),[A,Q,F,Z,$,te,le,ie,z,I]),ne=t.useCallback((function(){te(null),ie()}),[te,ie]),ue=t.useCallback((function(e){if(null!==ee){var t=Q.find((function(e){return e.id===ee}));t&&W(t,e)}}),[Q,ee,W]);return d.jsx("canvas",{ref:A,width:DE,height:N*E,style:{width:D,height:N},onMouseEnter:B?ae:void 0,onMouseMove:B?ae:void 0,onMouseLeave:B?ne:void 0,onClick:B?ue:void 0})};L.propTypes=p;var k=o.withContainer(L);k.defaultProps=y;e.HeatMap=w,e.HeatMapCanvas=k,e.HeatMapDefaultProps=y,e.HeatMapPropTypes=p,e.HeatMapSvgDefaultProps=b,e.HeatMapSvgPropTypes=h,e.ResponsiveHeatMap=function(e){return d.jsx(o.ResponsiveWrapper,{children:function(t){var o=t.width,r=t.height;return d.jsx(w,f({width:o,height:r},e))}})},e.ResponsiveHeatMapCanvas=function(e){return d.jsx(o.ResponsiveWrapper,{children:function(t){var o=t.width,r=t.height;return d.jsx(k,f({width:o,height:r},e))}})},e.useHeatMap=x,Object.defineProperty(e,"__esModule",{value:!0})}));
		//# sourceMappingURL=nivo-heatmap.umd.js.map

package.json

		{
		"name": "@nivo/heatmap",
		"version": "0.74.1",
		"version": "0.75.0",
		"license": "MIT",
		@@ -31,5 +31,5 @@ "author": {
		"dependencies": {
		"@nivo/axes": "0.74.1",
		"@nivo/colors": "0.74.1",
		"@nivo/tooltip": "0.74.1",
		"@nivo/axes": "0.75.0",
		"@nivo/colors": "0.75.0",
		"@nivo/tooltip": "0.75.0",
		"@react-spring/web": "9.3.1",
		@@ -39,6 +39,6 @@ "d3-scale": "^3.2.3"
		"devDependencies": {
		"@nivo/core": "0.74.1"
		"@nivo/core": "0.75.0"
		},
		"peerDependencies": {
		"@nivo/core": "0.74.1",
		"@nivo/core": "0.75.0",
		"prop-types": ">= 15.5.10 < 16.0.0",
		@@ -50,3 +50,3 @@ "react": ">= 16.14.0 < 18.0.0"
		},
		"gitHead": "4ae8bc60779cb9bb8cb14b16726819217da16133"
		"gitHead": "bfe8126876bf0e46ad82251935ab78178e901bcf"
		}

dist/nivo-heatmap.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/nivo-heatmap.es.js.map

Sorry, the diff of this file is not supported yet

dist/nivo-heatmap.umd.js.map

Sorry, the diff of this file is not supported yet

@nivo/heatmap - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics

Dependency changes