@nivo/axes
Advanced tools
@nivo/axes - npm Package Compare versions
Comparing version 0.74.1 to 0.75.0
@@ -1,775 +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 web = require('@react-spring/web'); | ||
| var core = require('@nivo/core'); | ||
| var d3TimeFormat = require('d3-time-format'); | ||
| var d3Format = require('d3-format'); | ||
| var scales = require('@nivo/scales'); | ||
| var jsxRuntime = require('react/jsx-runtime'); | ||
| var PropTypes = _interopDefault(require('prop-types')); | ||
| 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 isArray = function isArray(value) { | ||
| return Array.isArray(value); | ||
| }; | ||
| var computeCartesianTicks = function computeCartesianTicks(_ref) { | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| tickSize = _ref.tickSize, | ||
| tickPadding = _ref.tickPadding, | ||
| tickRotation = _ref.tickRotation, | ||
| _ref$engine = _ref.engine, | ||
| engine = _ref$engine === void 0 ? 'svg' : _ref$engine; | ||
| var values = scales.getScaleTicks(scale, tickValues); | ||
| var textProps = core.textPropsByEngine[engine]; | ||
| var position = 'bandwidth' in scale ? scales.centerScale(scale) : scale; | ||
| var line = { | ||
| lineX: 0, | ||
| lineY: 0 | ||
| }; | ||
| var text = { | ||
| textX: 0, | ||
| textY: 0 | ||
| }; | ||
| var isRTL = typeof document === 'object' ? document.dir === 'rtl' : false; | ||
| var translate; | ||
| var textAlign = textProps.align.center; | ||
| var textBaseline = textProps.baseline.center; | ||
| if (axis === 'x') { | ||
| translate = function translate(d) { | ||
| var _position; | ||
| return { | ||
| x: (_position = position(d)) !== null && _position !== void 0 ? _position : 0, | ||
| y: 0 | ||
| }; | ||
| }; | ||
| line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1); | ||
| text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1); | ||
| if (ticksPosition === 'after') { | ||
| textBaseline = textProps.baseline.top; | ||
| } else { | ||
| textBaseline = textProps.baseline.bottom; | ||
| } | ||
| if (tickRotation === 0) { | ||
| textAlign = textProps.align.center; | ||
| } else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) { | ||
| textAlign = textProps.align[isRTL ? 'left' : 'right']; | ||
| textBaseline = textProps.baseline.center; | ||
| } else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) { | ||
| textAlign = textProps.align[isRTL ? 'right' : 'left']; | ||
| textBaseline = textProps.baseline.center; | ||
| } | ||
| } else { | ||
| translate = function translate(d) { | ||
| var _position2; | ||
| return { | ||
| x: 0, | ||
| y: (_position2 = position(d)) !== null && _position2 !== void 0 ? _position2 : 0 | ||
| }; | ||
| }; | ||
| line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1); | ||
| text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1); | ||
| if (ticksPosition === 'after') { | ||
| textAlign = textProps.align.left; | ||
| } else { | ||
| textAlign = textProps.align.right; | ||
| } | ||
| } | ||
| var ticks = values.map(function (value) { | ||
| return _objectSpread2(_objectSpread2(_objectSpread2({ | ||
| key: typeof value === 'number' || typeof value === 'string' ? value : "".concat(value), | ||
| value: value | ||
| }, translate(value)), line), text); | ||
| }); | ||
| return { | ||
| ticks: ticks, | ||
| textAlign: textAlign, | ||
| textBaseline: textBaseline | ||
| }; | ||
| }; | ||
| var getFormatter = function getFormatter(format, scale) { | ||
| if (typeof format === 'undefined' || typeof format === 'function') return format; | ||
| if (scale.type === 'time') { | ||
| var formatter = d3TimeFormat.timeFormat(format); | ||
| return function (d) { | ||
| return formatter(d instanceof Date ? d : new Date(d)); | ||
| }; | ||
| } | ||
| return d3Format.format(format); | ||
| }; | ||
| var computeGridLines = function computeGridLines(_ref2) { | ||
| var width = _ref2.width, | ||
| height = _ref2.height, | ||
| scale = _ref2.scale, | ||
| axis = _ref2.axis, | ||
| _values = _ref2.values; | ||
| var lineValues = isArray(_values) ? _values : undefined; | ||
| var values = lineValues || scales.getScaleTicks(scale, _values); | ||
| var position = 'bandwidth' in scale ? scales.centerScale(scale) : scale; | ||
| var lines = axis === 'x' ? values.map(function (value) { | ||
| var _position3, _position4; | ||
| return { | ||
| key: "".concat(value), | ||
| x1: (_position3 = position(value)) !== null && _position3 !== void 0 ? _position3 : 0, | ||
| x2: (_position4 = position(value)) !== null && _position4 !== void 0 ? _position4 : 0, | ||
| y1: 0, | ||
| y2: height | ||
| }; | ||
| }) : values.map(function (value) { | ||
| var _position5, _position6; | ||
| return { | ||
| key: "".concat(value), | ||
| x1: 0, | ||
| x2: width, | ||
| y1: (_position5 = position(value)) !== null && _position5 !== void 0 ? _position5 : 0, | ||
| y2: (_position6 = position(value)) !== null && _position6 !== void 0 ? _position6 : 0 | ||
| }; | ||
| }); | ||
| return lines; | ||
| }; | ||
| var AxisTick = function AxisTick(_ref) { | ||
| var _format; | ||
| var _value = _ref.value, | ||
| format = _ref.format, | ||
| lineX = _ref.lineX, | ||
| lineY = _ref.lineY, | ||
| _onClick = _ref.onClick, | ||
| textBaseline = _ref.textBaseline, | ||
| textAnchor = _ref.textAnchor, | ||
| animatedProps = _ref.animatedProps; | ||
| var theme = core.useTheme(); | ||
| var value = (_format = format === null || format === void 0 ? void 0 : format(_value)) !== null && _format !== void 0 ? _format : _value; | ||
| var props = React.useMemo(function () { | ||
| var style = { | ||
| opacity: animatedProps.opacity | ||
| }; | ||
| if (!_onClick) { | ||
| return { | ||
| style: style | ||
| }; | ||
| } | ||
| return { | ||
| style: _objectSpread2(_objectSpread2({}, style), {}, { | ||
| cursor: 'pointer' | ||
| }), | ||
| onClick: function onClick(event) { | ||
| return _onClick(event, value); | ||
| } | ||
| }; | ||
| }, [animatedProps.opacity, _onClick, value]); | ||
| return jsxRuntime.jsxs(web.animated.g, _objectSpread2(_objectSpread2({ | ||
| transform: animatedProps.transform | ||
| }, props), {}, { | ||
| children: [jsxRuntime.jsx("line", { | ||
| x1: 0, | ||
| x2: lineX, | ||
| y1: 0, | ||
| y2: lineY, | ||
| style: theme.axis.ticks.line | ||
| }), jsxRuntime.jsx(web.animated.text, { | ||
| dominantBaseline: textBaseline, | ||
| textAnchor: textAnchor, | ||
| transform: animatedProps.textTransform, | ||
| style: theme.axis.ticks.text, | ||
| children: value | ||
| })] | ||
| })); | ||
| }; | ||
| var memoizedAxisTick = React.memo(AxisTick); | ||
| var Axis = function Axis(_ref) { | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| _ref$x = _ref.x, | ||
| x = _ref$x === void 0 ? 0 : _ref$x, | ||
| _ref$y = _ref.y, | ||
| y = _ref$y === void 0 ? 0 : _ref$y, | ||
| length = _ref.length, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| _ref$tickSize = _ref.tickSize, | ||
| tickSize = _ref$tickSize === void 0 ? 5 : _ref$tickSize, | ||
| _ref$tickPadding = _ref.tickPadding, | ||
| tickPadding = _ref$tickPadding === void 0 ? 5 : _ref$tickPadding, | ||
| _ref$tickRotation = _ref.tickRotation, | ||
| tickRotation = _ref$tickRotation === void 0 ? 0 : _ref$tickRotation, | ||
| format = _ref.format, | ||
| _ref$renderTick = _ref.renderTick, | ||
| renderTick = _ref$renderTick === void 0 ? memoizedAxisTick : _ref$renderTick, | ||
| legend = _ref.legend, | ||
| _ref$legendPosition = _ref.legendPosition, | ||
| legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition, | ||
| _ref$legendOffset = _ref.legendOffset, | ||
| legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset, | ||
| onClick = _ref.onClick, | ||
| ariaHidden = _ref.ariaHidden; | ||
| var theme = core.useTheme(); | ||
| var formatValue = React.useMemo(function () { | ||
| return getFormatter(format, scale); | ||
| }, [format, scale]); | ||
| var _computeCartesianTick = computeCartesianTicks({ | ||
| axis: axis, | ||
| scale: scale, | ||
| ticksPosition: ticksPosition, | ||
| tickValues: tickValues, | ||
| tickSize: tickSize, | ||
| tickPadding: tickPadding, | ||
| tickRotation: tickRotation | ||
| }), | ||
| ticks = _computeCartesianTick.ticks, | ||
| textAlign = _computeCartesianTick.textAlign, | ||
| textBaseline = _computeCartesianTick.textBaseline; | ||
| var legendNode = null; | ||
| if (legend !== undefined) { | ||
| var legendX = 0; | ||
| var legendY = 0; | ||
| var legendRotation = 0; | ||
| var textAnchor; | ||
| if (axis === 'y') { | ||
| legendRotation = -90; | ||
| legendX = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| textAnchor = 'start'; | ||
| legendY = length; | ||
| } else if (legendPosition === 'middle') { | ||
| textAnchor = 'middle'; | ||
| legendY = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| textAnchor = 'end'; | ||
| } | ||
| } else { | ||
| legendY = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| textAnchor = 'start'; | ||
| } else if (legendPosition === 'middle') { | ||
| textAnchor = 'middle'; | ||
| legendX = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| textAnchor = 'end'; | ||
| legendX = length; | ||
| } | ||
| } | ||
| legendNode = jsxRuntime.jsx("text", { | ||
| transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"), | ||
| textAnchor: textAnchor, | ||
| style: _objectSpread2({ | ||
| dominantBaseline: 'central' | ||
| }, theme.axis.legend.text), | ||
| children: legend | ||
| }); | ||
| } | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var animatedProps = web.useSpring({ | ||
| transform: "translate(".concat(x, ",").concat(y, ")"), | ||
| lineX2: axis === 'x' ? length : 0, | ||
| lineY2: axis === 'x' ? 0 : length, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| var transition = web.useTransition(ticks, { | ||
| keys: function keys(tick) { | ||
| return tick.key; | ||
| }, | ||
| initial: function initial(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| from: function from(tick) { | ||
| return { | ||
| opacity: 0, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| enter: function enter(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| update: function update(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| leave: { | ||
| opacity: 0 | ||
| }, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return jsxRuntime.jsxs(web.animated.g, { | ||
| transform: animatedProps.transform, | ||
| "aria-hidden": ariaHidden, | ||
| children: [transition(function (transitionProps, tick, _state, tickIndex) { | ||
| return React.createElement(renderTick, _objectSpread2(_objectSpread2({ | ||
| tickIndex: tickIndex, | ||
| format: formatValue, | ||
| rotate: tickRotation, | ||
| textBaseline: textBaseline, | ||
| textAnchor: textAlign, | ||
| animatedProps: transitionProps | ||
| }, tick), onClick ? { | ||
| onClick: onClick | ||
| } : {})); | ||
| }), jsxRuntime.jsx(web.animated.line, { | ||
| style: theme.axis.domain.line, | ||
| x1: 0, | ||
| x2: animatedProps.lineX2, | ||
| y1: 0, | ||
| y2: animatedProps.lineY2 | ||
| }), legendNode] | ||
| }); | ||
| }; | ||
| var memoizedAxis = React.memo(Axis); | ||
| var axisPropTypes = { | ||
| ticksPosition: PropTypes.oneOf(['before', 'after']), | ||
| tickValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])), PropTypes.string]), | ||
| tickSize: PropTypes.number, | ||
| tickPadding: PropTypes.number, | ||
| tickRotation: PropTypes.number, | ||
| format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
| renderTick: PropTypes.func, | ||
| legend: PropTypes.node, | ||
| legendPosition: PropTypes.oneOf(['start', 'middle', 'end']), | ||
| legendOffset: PropTypes.number, | ||
| ariaHidden: PropTypes.bool | ||
| }; | ||
| var axisPropType = PropTypes.shape(axisPropTypes); | ||
| var positions = ['top', 'right', 'bottom', 'left']; | ||
| var Axes = React.memo(function (_ref) { | ||
| var xScale = _ref.xScale, | ||
| yScale = _ref.yScale, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| top = _ref.top, | ||
| right = _ref.right, | ||
| bottom = _ref.bottom, | ||
| left = _ref.left; | ||
| var axes = { | ||
| top: top, | ||
| right: right, | ||
| bottom: bottom, | ||
| left: left | ||
| }; | ||
| return jsxRuntime.jsx(jsxRuntime.Fragment, { | ||
| children: positions.map(function (position) { | ||
| var axis = axes[position]; | ||
| if (!axis) return null; | ||
| var isXAxis = position === 'top' || position === 'bottom'; | ||
| var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'; | ||
| return jsxRuntime.jsx(memoizedAxis, _objectSpread2(_objectSpread2({}, axis), {}, { | ||
| axis: isXAxis ? 'x' : 'y', | ||
| x: position === 'right' ? width : 0, | ||
| y: position === 'bottom' ? height : 0, | ||
| scale: isXAxis ? xScale : yScale, | ||
| length: isXAxis ? width : height, | ||
| ticksPosition: ticksPosition | ||
| }), position); | ||
| }) | ||
| }); | ||
| }); | ||
| var GridLine = React.memo(function (_ref) { | ||
| var animatedProps = _ref.animatedProps; | ||
| var theme = core.useTheme(); | ||
| return jsxRuntime.jsx(web.animated.line, _objectSpread2(_objectSpread2({}, animatedProps), theme.grid.line)); | ||
| }); | ||
| var GridLines = React.memo(function (_ref) { | ||
| var lines = _ref.lines; | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var transition = web.useTransition(lines, { | ||
| keys: function keys(line) { | ||
| return line.key; | ||
| }, | ||
| initial: function initial(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| from: function from(line) { | ||
| return { | ||
| opacity: 0, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| enter: function enter(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| update: function update(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| leave: { | ||
| opacity: 0 | ||
| }, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return jsxRuntime.jsx("g", { | ||
| children: transition(function (animatedProps, line) { | ||
| return React.createElement(GridLine, _objectSpread2(_objectSpread2({}, line), {}, { | ||
| key: line.key, | ||
| animatedProps: animatedProps | ||
| })); | ||
| }) | ||
| }); | ||
| }); | ||
| var Grid = React.memo(function (_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height, | ||
| xScale = _ref.xScale, | ||
| yScale = _ref.yScale, | ||
| xValues = _ref.xValues, | ||
| yValues = _ref.yValues; | ||
| var xLines = React.useMemo(function () { | ||
| if (!xScale) return false; | ||
| return computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: xScale, | ||
| axis: 'x', | ||
| values: xValues | ||
| }); | ||
| }, [xScale, xValues, width, height]); | ||
| var yLines = React.useMemo(function () { | ||
| if (!yScale) return false; | ||
| return computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: yScale, | ||
| axis: 'y', | ||
| values: yValues | ||
| }); | ||
| }, [height, width, yScale, yValues]); | ||
| return jsxRuntime.jsxs(jsxRuntime.Fragment, { | ||
| children: [xLines && jsxRuntime.jsx(GridLines, { | ||
| lines: xLines | ||
| }), yLines && jsxRuntime.jsx(GridLines, { | ||
| lines: yLines | ||
| })] | ||
| }); | ||
| }); | ||
| var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) { | ||
| var _theme$axis$domain$li; | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| _ref$x = _ref.x, | ||
| x = _ref$x === void 0 ? 0 : _ref$x, | ||
| _ref$y = _ref.y, | ||
| y = _ref$y === void 0 ? 0 : _ref$y, | ||
| length = _ref.length, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| _ref$tickSize = _ref.tickSize, | ||
| tickSize = _ref$tickSize === void 0 ? 5 : _ref$tickSize, | ||
| _ref$tickPadding = _ref.tickPadding, | ||
| tickPadding = _ref$tickPadding === void 0 ? 5 : _ref$tickPadding, | ||
| _ref$tickRotation = _ref.tickRotation, | ||
| tickRotation = _ref$tickRotation === void 0 ? 0 : _ref$tickRotation, | ||
| _format = _ref.format, | ||
| legend = _ref.legend, | ||
| _ref$legendPosition = _ref.legendPosition, | ||
| legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition, | ||
| _ref$legendOffset = _ref.legendOffset, | ||
| legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset, | ||
| theme = _ref.theme; | ||
| var _computeCartesianTick = computeCartesianTicks({ | ||
| axis: axis, | ||
| scale: scale, | ||
| ticksPosition: ticksPosition, | ||
| tickValues: tickValues, | ||
| tickSize: tickSize, | ||
| tickPadding: tickPadding, | ||
| tickRotation: tickRotation, | ||
| engine: 'canvas' | ||
| }), | ||
| ticks = _computeCartesianTick.ticks, | ||
| textAlign = _computeCartesianTick.textAlign, | ||
| textBaseline = _computeCartesianTick.textBaseline; | ||
| ctx.save(); | ||
| ctx.translate(x, y); | ||
| ctx.textAlign = textAlign; | ||
| ctx.textBaseline = textBaseline; | ||
| ctx.font = "".concat(theme.axis.ticks.text.fontWeight ? "".concat(theme.axis.ticks.text.fontWeight, " ") : '').concat(theme.axis.ticks.text.fontSize, "px ").concat(theme.axis.ticks.text.fontFamily); | ||
| if (((_theme$axis$domain$li = theme.axis.domain.line.strokeWidth) !== null && _theme$axis$domain$li !== void 0 ? _theme$axis$domain$li : 0) > 0) { | ||
| ctx.lineWidth = Number(theme.axis.domain.line.strokeWidth); | ||
| ctx.lineCap = 'square'; | ||
| if (theme.axis.domain.line.stroke) { | ||
| ctx.strokeStyle = theme.axis.domain.line.stroke; | ||
| } | ||
| ctx.beginPath(); | ||
| ctx.moveTo(0, 0); | ||
| ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length); | ||
| ctx.stroke(); | ||
| } | ||
| var format = typeof _format === 'function' ? _format : function (value) { | ||
| return "".concat(value); | ||
| }; | ||
| ticks.forEach(function (tick) { | ||
| var _theme$axis$ticks$lin; | ||
| if (((_theme$axis$ticks$lin = theme.axis.ticks.line.strokeWidth) !== null && _theme$axis$ticks$lin !== void 0 ? _theme$axis$ticks$lin : 0) > 0) { | ||
| ctx.lineWidth = Number(theme.axis.ticks.line.strokeWidth); | ||
| ctx.lineCap = 'square'; | ||
| if (theme.axis.ticks.line.stroke) { | ||
| ctx.strokeStyle = theme.axis.ticks.line.stroke; | ||
| } | ||
| ctx.beginPath(); | ||
| ctx.moveTo(tick.x, tick.y); | ||
| ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY); | ||
| ctx.stroke(); | ||
| } | ||
| var value = format(tick.value); | ||
| ctx.save(); | ||
| ctx.translate(tick.x + tick.textX, tick.y + tick.textY); | ||
| ctx.rotate(core.degreesToRadians(tickRotation)); | ||
| if (theme.axis.ticks.text.fill) { | ||
| ctx.fillStyle = theme.axis.ticks.text.fill; | ||
| } | ||
| ctx.fillText(String(value), 0, 0); | ||
| ctx.restore(); | ||
| }); | ||
| if (legend !== undefined) { | ||
| var legendX = 0; | ||
| var legendY = 0; | ||
| var legendRotation = 0; | ||
| var _textAlign = 'center'; | ||
| if (axis === 'y') { | ||
| legendRotation = -90; | ||
| legendX = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| _textAlign = 'start'; | ||
| legendY = length; | ||
| } else if (legendPosition === 'middle') { | ||
| _textAlign = 'center'; | ||
| legendY = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| _textAlign = 'end'; | ||
| } | ||
| } else { | ||
| legendY = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| _textAlign = 'start'; | ||
| } else if (legendPosition === 'middle') { | ||
| _textAlign = 'center'; | ||
| legendX = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| _textAlign = 'end'; | ||
| legendX = length; | ||
| } | ||
| } | ||
| ctx.translate(legendX, legendY); | ||
| ctx.rotate(core.degreesToRadians(legendRotation)); | ||
| ctx.font = "".concat(theme.axis.legend.text.fontWeight ? "".concat(theme.axis.legend.text.fontWeight, " ") : '').concat(theme.axis.legend.text.fontSize, "px ").concat(theme.axis.legend.text.fontFamily); | ||
| if (theme.axis.legend.text.fill) { | ||
| ctx.fillStyle = theme.axis.legend.text.fill; | ||
| } | ||
| ctx.textAlign = _textAlign; | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.fillText(legend, 0, 0); | ||
| } | ||
| ctx.restore(); | ||
| }; | ||
| var renderAxesToCanvas = function renderAxesToCanvas(ctx, _ref2) { | ||
| var xScale = _ref2.xScale, | ||
| yScale = _ref2.yScale, | ||
| width = _ref2.width, | ||
| height = _ref2.height, | ||
| top = _ref2.top, | ||
| right = _ref2.right, | ||
| bottom = _ref2.bottom, | ||
| left = _ref2.left, | ||
| theme = _ref2.theme; | ||
| var axes = { | ||
| top: top, | ||
| right: right, | ||
| bottom: bottom, | ||
| left: left | ||
| }; | ||
| positions.forEach(function (position) { | ||
| var axis = axes[position]; | ||
| if (!axis) return null; | ||
| var isXAxis = position === 'top' || position === 'bottom'; | ||
| var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'; | ||
| var scale = isXAxis ? xScale : yScale; | ||
| var format = getFormatter(axis.format, scale); | ||
| renderAxisToCanvas(ctx, _objectSpread2(_objectSpread2({}, axis), {}, { | ||
| axis: isXAxis ? 'x' : 'y', | ||
| x: position === 'right' ? width : 0, | ||
| y: position === 'bottom' ? height : 0, | ||
| scale: scale, | ||
| format: format, | ||
| length: isXAxis ? width : height, | ||
| ticksPosition: ticksPosition, | ||
| theme: theme | ||
| })); | ||
| }); | ||
| }; | ||
| var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) { | ||
| var width = _ref3.width, | ||
| height = _ref3.height, | ||
| scale = _ref3.scale, | ||
| axis = _ref3.axis, | ||
| values = _ref3.values; | ||
| var lines = computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: scale, | ||
| axis: axis, | ||
| values: values | ||
| }); | ||
| lines.forEach(function (line) { | ||
| ctx.beginPath(); | ||
| ctx.moveTo(line.x1, line.y1); | ||
| ctx.lineTo(line.x2, line.y2); | ||
| ctx.stroke(); | ||
| }); | ||
| }; | ||
| exports.Axes = Axes; | ||
| exports.Axis = memoizedAxis; | ||
| exports.AxisTick = memoizedAxisTick; | ||
| exports.Grid = Grid; | ||
| exports.GridLine = GridLine; | ||
| exports.GridLines = GridLines; | ||
| exports.axisPropType = axisPropType; | ||
| exports.axisPropTypes = axisPropTypes; | ||
| exports.positions = positions; | ||
| exports.renderAxesToCanvas = renderAxesToCanvas; | ||
| exports.renderAxisToCanvas = renderAxisToCanvas; | ||
| exports.renderGridLinesToCanvas = renderGridLinesToCanvas; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-spring/web"),i=require("@nivo/core"),n=require("d3-time-format"),r=require("d3-format"),a=require("@nivo/scales"),o=require("react/jsx-runtime"),s=require("prop-types");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var f=c(e),u=l(s);function x(){return x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},x.apply(this,arguments)}var d=function(e){var t,n=e.axis,r=e.scale,o=e.ticksPosition,s=e.tickValues,l=e.tickSize,c=e.tickPadding,f=e.tickRotation,u=e.engine,d=void 0===u?"svg":u,m=a.getScaleTicks(r,s),y=i.textPropsByEngine[d],g="bandwidth"in r?a.centerScale(r):r,p={lineX:0,lineY:0},k={textX:0,textY:0},h="object"==typeof document&&"rtl"===document.dir,v=y.align.center,b=y.baseline.center;return"x"===n?(t=function(e){var t;return{x:null!=(t=g(e))?t:0,y:0}},p.lineY=l*("after"===o?1:-1),k.textY=(l+c)*("after"===o?1:-1),b="after"===o?y.baseline.top:y.baseline.bottom,0===f?v=y.align.center:"after"===o&&f<0||"before"===o&&f>0?(v=y.align[h?"left":"right"],b=y.baseline.center):("after"===o&&f>0||"before"===o&&f<0)&&(v=y.align[h?"right":"left"],b=y.baseline.center)):(t=function(e){var t;return{x:0,y:null!=(t=g(e))?t:0}},p.lineX=l*("after"===o?1:-1),k.textX=(l+c)*("after"===o?1:-1),v="after"===o?y.align.left:y.align.right),{ticks:m.map((function(e){return x({key:"number"==typeof e||"string"==typeof e?e:""+e,value:e},t(e),p,k)})),textAlign:v,textBaseline:b}},m=function(e,t){if(void 0===e||"function"==typeof e)return e;if("time"===t.type){var i=n.timeFormat(e);return function(e){return i(e instanceof Date?e:new Date(e))}}return r.format(e)},y=function(e){var t,i=e.width,n=e.height,r=e.scale,o=e.axis,s=e.values,l=(t=s,Array.isArray(t)?s:void 0)||a.getScaleTicks(r,s),c="bandwidth"in r?a.centerScale(r):r,f="x"===o?l.map((function(e){var t,i;return{key:""+e,x1:null!=(t=c(e))?t:0,x2:null!=(i=c(e))?i:0,y1:0,y2:n}})):l.map((function(e){var t,n;return{key:""+e,x1:0,x2:i,y1:null!=(t=c(e))?t:0,y2:null!=(n=c(e))?n:0}}));return f},g=e.memo((function(n){var r,a=n.value,s=n.format,l=n.lineX,c=n.lineY,f=n.onClick,u=n.textBaseline,d=n.textAnchor,m=n.animatedProps,y=i.useTheme(),g=null!=(r=null==s?void 0:s(a))?r:a,p=e.useMemo((function(){var e={opacity:m.opacity};return f?{style:x({},e,{cursor:"pointer"}),onClick:function(e){return f(e,g)}}:{style:e}}),[m.opacity,f,g]);return o.jsxs(t.animated.g,x({transform:m.transform},p,{children:[o.jsx("line",{x1:0,x2:l,y1:0,y2:c,style:y.axis.ticks.line}),o.jsx(t.animated.text,{dominantBaseline:u,textAnchor:d,transform:m.textTransform,style:y.axis.ticks.text,children:g})]}))})),p=e.memo((function(n){var r=n.axis,a=n.scale,s=n.x,l=void 0===s?0:s,c=n.y,u=void 0===c?0:c,y=n.length,p=n.ticksPosition,k=n.tickValues,h=n.tickSize,v=void 0===h?5:h,b=n.tickPadding,T=void 0===b?5:b,P=n.tickRotation,j=void 0===P?0:P,S=n.format,O=n.renderTick,A=void 0===O?g:O,w=n.legend,X=n.legendPosition,Y=void 0===X?"end":X,C=n.legendOffset,q=void 0===C?0:C,B=n.onClick,W=n.ariaHidden,z=i.useTheme(),M=e.useMemo((function(){return m(S,a)}),[S,a]),R=d({axis:r,scale:a,ticksPosition:p,tickValues:k,tickSize:v,tickPadding:T,tickRotation:j}),V=R.ticks,E=R.textAlign,F=R.textBaseline,D=null;if(void 0!==w){var G,_=0,L=0,H=0;"y"===r?(H=-90,_=q,"start"===Y?(G="start",L=y):"middle"===Y?(G="middle",L=y/2):"end"===Y&&(G="end")):(L=q,"start"===Y?G="start":"middle"===Y?(G="middle",_=y/2):"end"===Y&&(G="end",_=y)),D=o.jsx("text",{transform:"translate("+_+", "+L+") rotate("+H+")",textAnchor:G,style:x({dominantBaseline:"central"},z.axis.legend.text),children:w})}var N=i.useMotionConfig(),I=N.animate,J=N.config,K=t.useSpring({transform:"translate("+l+","+u+")",lineX2:"x"===r?y:0,lineY2:"x"===r?0:y,config:J,immediate:!I}),Q=t.useTransition(V,{keys:function(e){return e.key},initial:function(e){return{opacity:1,transform:"translate("+e.x+","+e.y+")",textTransform:"translate("+e.textX+","+e.textY+") rotate("+j+")"}},from:function(e){return{opacity:0,transform:"translate("+e.x+","+e.y+")",textTransform:"translate("+e.textX+","+e.textY+") rotate("+j+")"}},enter:function(e){return{opacity:1,transform:"translate("+e.x+","+e.y+")",textTransform:"translate("+e.textX+","+e.textY+") rotate("+j+")"}},update:function(e){return{opacity:1,transform:"translate("+e.x+","+e.y+")",textTransform:"translate("+e.textX+","+e.textY+") rotate("+j+")"}},leave:{opacity:0},config:J,immediate:!I});return o.jsxs(t.animated.g,{transform:K.transform,"aria-hidden":W,children:[Q((function(e,t,i,n){return f.createElement(A,x({tickIndex:n,format:M,rotate:j,textBaseline:F,textAnchor:E,animatedProps:e},t,B?{onClick:B}:{}))})),o.jsx(t.animated.line,{style:z.axis.domain.line,x1:0,x2:K.lineX2,y1:0,y2:K.lineY2}),D]})})),k={ticksPosition:u.default.oneOf(["before","after"]),tickValues:u.default.oneOfType([u.default.number,u.default.arrayOf(u.default.oneOfType([u.default.number,u.default.string,u.default.instanceOf(Date)])),u.default.string]),tickSize:u.default.number,tickPadding:u.default.number,tickRotation:u.default.number,format:u.default.oneOfType([u.default.func,u.default.string]),renderTick:u.default.func,legend:u.default.node,legendPosition:u.default.oneOf(["start","middle","end"]),legendOffset:u.default.number,ariaHidden:u.default.bool},h=u.default.shape(k),v=["top","right","bottom","left"],b=e.memo((function(e){var t=e.xScale,i=e.yScale,n=e.width,r=e.height,a={top:e.top,right:e.right,bottom:e.bottom,left:e.left};return o.jsx(o.Fragment,{children:v.map((function(e){var s=a[e];if(!s)return null;var l="top"===e||"bottom"===e,c="top"===e||"left"===e?"before":"after";return o.jsx(p,x({},s,{axis:l?"x":"y",x:"right"===e?n:0,y:"bottom"===e?r:0,scale:l?t:i,length:l?n:r,ticksPosition:c}),e)}))})})),T=e.memo((function(e){var n=e.animatedProps,r=i.useTheme();return o.jsx(t.animated.line,x({},n,r.grid.line))})),P=e.memo((function(n){var r=n.lines,a=i.useMotionConfig(),s=a.animate,l=a.config,c=t.useTransition(r,{keys:function(e){return e.key},initial:function(e){return{opacity:1,x1:e.x1,x2:e.x2,y1:e.y1,y2:e.y2}},from:function(e){return{opacity:0,x1:e.x1,x2:e.x2,y1:e.y1,y2:e.y2}},enter:function(e){return{opacity:1,x1:e.x1,x2:e.x2,y1:e.y1,y2:e.y2}},update:function(e){return{opacity:1,x1:e.x1,x2:e.x2,y1:e.y1,y2:e.y2}},leave:{opacity:0},config:l,immediate:!s});return o.jsx("g",{children:c((function(t,i){return e.createElement(T,x({},i,{key:i.key,animatedProps:t}))}))})})),j=e.memo((function(t){var i=t.width,n=t.height,r=t.xScale,a=t.yScale,s=t.xValues,l=t.yValues,c=e.useMemo((function(){return!!r&&y({width:i,height:n,scale:r,axis:"x",values:s})}),[r,s,i,n]),f=e.useMemo((function(){return!!a&&y({width:i,height:n,scale:a,axis:"y",values:l})}),[n,i,a,l]);return o.jsxs(o.Fragment,{children:[c&&o.jsx(P,{lines:c}),f&&o.jsx(P,{lines:f})]})})),S=function(e,t){var n,r=t.axis,a=t.scale,o=t.x,s=void 0===o?0:o,l=t.y,c=void 0===l?0:l,f=t.length,u=t.ticksPosition,x=t.tickValues,m=t.tickSize,y=void 0===m?5:m,g=t.tickPadding,p=void 0===g?5:g,k=t.tickRotation,h=void 0===k?0:k,v=t.format,b=t.legend,T=t.legendPosition,P=void 0===T?"end":T,j=t.legendOffset,S=void 0===j?0:j,O=t.theme,A=d({axis:r,scale:a,ticksPosition:u,tickValues:x,tickSize:y,tickPadding:p,tickRotation:h,engine:"canvas"}),w=A.ticks,X=A.textAlign,Y=A.textBaseline;e.save(),e.translate(s,c),e.textAlign=X,e.textBaseline=Y,e.font=(O.axis.ticks.text.fontWeight?O.axis.ticks.text.fontWeight+" ":"")+O.axis.ticks.text.fontSize+"px "+O.axis.ticks.text.fontFamily,(null!=(n=O.axis.domain.line.strokeWidth)?n:0)>0&&(e.lineWidth=Number(O.axis.domain.line.strokeWidth),e.lineCap="square",O.axis.domain.line.stroke&&(e.strokeStyle=O.axis.domain.line.stroke),e.beginPath(),e.moveTo(0,0),e.lineTo("x"===r?f:0,"x"===r?0:f),e.stroke());var C="function"==typeof v?v:function(e){return""+e};if(w.forEach((function(t){var n;(null!=(n=O.axis.ticks.line.strokeWidth)?n:0)>0&&(e.lineWidth=Number(O.axis.ticks.line.strokeWidth),e.lineCap="square",O.axis.ticks.line.stroke&&(e.strokeStyle=O.axis.ticks.line.stroke),e.beginPath(),e.moveTo(t.x,t.y),e.lineTo(t.x+t.lineX,t.y+t.lineY),e.stroke());var r=C(t.value);e.save(),e.translate(t.x+t.textX,t.y+t.textY),e.rotate(i.degreesToRadians(h)),O.axis.ticks.text.fill&&(e.fillStyle=O.axis.ticks.text.fill),e.fillText(String(r),0,0),e.restore()})),void 0!==b){var q=0,B=0,W=0,z="center";"y"===r?(W=-90,q=S,"start"===P?(z="start",B=f):"middle"===P?(z="center",B=f/2):"end"===P&&(z="end")):(B=S,"start"===P?z="start":"middle"===P?(z="center",q=f/2):"end"===P&&(z="end",q=f)),e.translate(q,B),e.rotate(i.degreesToRadians(W)),e.font=(O.axis.legend.text.fontWeight?O.axis.legend.text.fontWeight+" ":"")+O.axis.legend.text.fontSize+"px "+O.axis.legend.text.fontFamily,O.axis.legend.text.fill&&(e.fillStyle=O.axis.legend.text.fill),e.textAlign=z,e.textBaseline="middle",e.fillText(b,0,0)}e.restore()};exports.Axes=b,exports.Axis=p,exports.AxisTick=g,exports.Grid=j,exports.GridLine=T,exports.GridLines=P,exports.axisPropType=h,exports.axisPropTypes=k,exports.positions=v,exports.renderAxesToCanvas=function(e,t){var i=t.xScale,n=t.yScale,r=t.width,a=t.height,o=t.top,s=t.right,l=t.bottom,c=t.left,f=t.theme,u={top:o,right:s,bottom:l,left:c};v.forEach((function(t){var o=u[t];if(!o)return null;var s="top"===t||"bottom"===t,l="top"===t||"left"===t?"before":"after",c=s?i:n,d=m(o.format,c);S(e,x({},o,{axis:s?"x":"y",x:"right"===t?r:0,y:"bottom"===t?a:0,scale:c,format:d,length:s?r:a,ticksPosition:l,theme:f}))}))},exports.renderAxisToCanvas=S,exports.renderGridLinesToCanvas=function(e,t){var i=t.width,n=t.height,r=t.scale,a=t.axis,o=t.values;y({width:i,height:n,scale:r,axis:a,values:o}).forEach((function(t){e.beginPath(),e.moveTo(t.x1,t.y1),e.lineTo(t.x2,t.y2),e.stroke()}))}; | ||
| //# sourceMappingURL=nivo-axes.cjs.js.map |
@@ -1,758 +0,2 @@ | ||
| import { memo, useMemo, createElement } from 'react'; | ||
| import { animated, useSpring, useTransition } from '@react-spring/web'; | ||
| import { textPropsByEngine, useTheme, useMotionConfig, degreesToRadians } from '@nivo/core'; | ||
| import { timeFormat } from 'd3-time-format'; | ||
| import { format } from 'd3-format'; | ||
| import { getScaleTicks, centerScale } from '@nivo/scales'; | ||
| import { jsxs, jsx, Fragment } from 'react/jsx-runtime'; | ||
| import PropTypes from 'prop-types'; | ||
| 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 isArray = function isArray(value) { | ||
| return Array.isArray(value); | ||
| }; | ||
| var computeCartesianTicks = function computeCartesianTicks(_ref) { | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| tickSize = _ref.tickSize, | ||
| tickPadding = _ref.tickPadding, | ||
| tickRotation = _ref.tickRotation, | ||
| _ref$engine = _ref.engine, | ||
| engine = _ref$engine === void 0 ? 'svg' : _ref$engine; | ||
| var values = getScaleTicks(scale, tickValues); | ||
| var textProps = textPropsByEngine[engine]; | ||
| var position = 'bandwidth' in scale ? centerScale(scale) : scale; | ||
| var line = { | ||
| lineX: 0, | ||
| lineY: 0 | ||
| }; | ||
| var text = { | ||
| textX: 0, | ||
| textY: 0 | ||
| }; | ||
| var isRTL = typeof document === 'object' ? document.dir === 'rtl' : false; | ||
| var translate; | ||
| var textAlign = textProps.align.center; | ||
| var textBaseline = textProps.baseline.center; | ||
| if (axis === 'x') { | ||
| translate = function translate(d) { | ||
| var _position; | ||
| return { | ||
| x: (_position = position(d)) !== null && _position !== void 0 ? _position : 0, | ||
| y: 0 | ||
| }; | ||
| }; | ||
| line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1); | ||
| text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1); | ||
| if (ticksPosition === 'after') { | ||
| textBaseline = textProps.baseline.top; | ||
| } else { | ||
| textBaseline = textProps.baseline.bottom; | ||
| } | ||
| if (tickRotation === 0) { | ||
| textAlign = textProps.align.center; | ||
| } else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) { | ||
| textAlign = textProps.align[isRTL ? 'left' : 'right']; | ||
| textBaseline = textProps.baseline.center; | ||
| } else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) { | ||
| textAlign = textProps.align[isRTL ? 'right' : 'left']; | ||
| textBaseline = textProps.baseline.center; | ||
| } | ||
| } else { | ||
| translate = function translate(d) { | ||
| var _position2; | ||
| return { | ||
| x: 0, | ||
| y: (_position2 = position(d)) !== null && _position2 !== void 0 ? _position2 : 0 | ||
| }; | ||
| }; | ||
| line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1); | ||
| text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1); | ||
| if (ticksPosition === 'after') { | ||
| textAlign = textProps.align.left; | ||
| } else { | ||
| textAlign = textProps.align.right; | ||
| } | ||
| } | ||
| var ticks = values.map(function (value) { | ||
| return _objectSpread2(_objectSpread2(_objectSpread2({ | ||
| key: typeof value === 'number' || typeof value === 'string' ? value : "".concat(value), | ||
| value: value | ||
| }, translate(value)), line), text); | ||
| }); | ||
| return { | ||
| ticks: ticks, | ||
| textAlign: textAlign, | ||
| textBaseline: textBaseline | ||
| }; | ||
| }; | ||
| var getFormatter = function getFormatter(format$1, scale) { | ||
| if (typeof format$1 === 'undefined' || typeof format$1 === 'function') return format$1; | ||
| if (scale.type === 'time') { | ||
| var formatter = timeFormat(format$1); | ||
| return function (d) { | ||
| return formatter(d instanceof Date ? d : new Date(d)); | ||
| }; | ||
| } | ||
| return format(format$1); | ||
| }; | ||
| var computeGridLines = function computeGridLines(_ref2) { | ||
| var width = _ref2.width, | ||
| height = _ref2.height, | ||
| scale = _ref2.scale, | ||
| axis = _ref2.axis, | ||
| _values = _ref2.values; | ||
| var lineValues = isArray(_values) ? _values : undefined; | ||
| var values = lineValues || getScaleTicks(scale, _values); | ||
| var position = 'bandwidth' in scale ? centerScale(scale) : scale; | ||
| var lines = axis === 'x' ? values.map(function (value) { | ||
| var _position3, _position4; | ||
| return { | ||
| key: "".concat(value), | ||
| x1: (_position3 = position(value)) !== null && _position3 !== void 0 ? _position3 : 0, | ||
| x2: (_position4 = position(value)) !== null && _position4 !== void 0 ? _position4 : 0, | ||
| y1: 0, | ||
| y2: height | ||
| }; | ||
| }) : values.map(function (value) { | ||
| var _position5, _position6; | ||
| return { | ||
| key: "".concat(value), | ||
| x1: 0, | ||
| x2: width, | ||
| y1: (_position5 = position(value)) !== null && _position5 !== void 0 ? _position5 : 0, | ||
| y2: (_position6 = position(value)) !== null && _position6 !== void 0 ? _position6 : 0 | ||
| }; | ||
| }); | ||
| return lines; | ||
| }; | ||
| var AxisTick = function AxisTick(_ref) { | ||
| var _format; | ||
| var _value = _ref.value, | ||
| format = _ref.format, | ||
| lineX = _ref.lineX, | ||
| lineY = _ref.lineY, | ||
| _onClick = _ref.onClick, | ||
| textBaseline = _ref.textBaseline, | ||
| textAnchor = _ref.textAnchor, | ||
| animatedProps = _ref.animatedProps; | ||
| var theme = useTheme(); | ||
| var value = (_format = format === null || format === void 0 ? void 0 : format(_value)) !== null && _format !== void 0 ? _format : _value; | ||
| var props = useMemo(function () { | ||
| var style = { | ||
| opacity: animatedProps.opacity | ||
| }; | ||
| if (!_onClick) { | ||
| return { | ||
| style: style | ||
| }; | ||
| } | ||
| return { | ||
| style: _objectSpread2(_objectSpread2({}, style), {}, { | ||
| cursor: 'pointer' | ||
| }), | ||
| onClick: function onClick(event) { | ||
| return _onClick(event, value); | ||
| } | ||
| }; | ||
| }, [animatedProps.opacity, _onClick, value]); | ||
| return jsxs(animated.g, _objectSpread2(_objectSpread2({ | ||
| transform: animatedProps.transform | ||
| }, props), {}, { | ||
| children: [jsx("line", { | ||
| x1: 0, | ||
| x2: lineX, | ||
| y1: 0, | ||
| y2: lineY, | ||
| style: theme.axis.ticks.line | ||
| }), jsx(animated.text, { | ||
| dominantBaseline: textBaseline, | ||
| textAnchor: textAnchor, | ||
| transform: animatedProps.textTransform, | ||
| style: theme.axis.ticks.text, | ||
| children: value | ||
| })] | ||
| })); | ||
| }; | ||
| var memoizedAxisTick = memo(AxisTick); | ||
| var Axis = function Axis(_ref) { | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| _ref$x = _ref.x, | ||
| x = _ref$x === void 0 ? 0 : _ref$x, | ||
| _ref$y = _ref.y, | ||
| y = _ref$y === void 0 ? 0 : _ref$y, | ||
| length = _ref.length, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| _ref$tickSize = _ref.tickSize, | ||
| tickSize = _ref$tickSize === void 0 ? 5 : _ref$tickSize, | ||
| _ref$tickPadding = _ref.tickPadding, | ||
| tickPadding = _ref$tickPadding === void 0 ? 5 : _ref$tickPadding, | ||
| _ref$tickRotation = _ref.tickRotation, | ||
| tickRotation = _ref$tickRotation === void 0 ? 0 : _ref$tickRotation, | ||
| format = _ref.format, | ||
| _ref$renderTick = _ref.renderTick, | ||
| renderTick = _ref$renderTick === void 0 ? memoizedAxisTick : _ref$renderTick, | ||
| legend = _ref.legend, | ||
| _ref$legendPosition = _ref.legendPosition, | ||
| legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition, | ||
| _ref$legendOffset = _ref.legendOffset, | ||
| legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset, | ||
| onClick = _ref.onClick, | ||
| ariaHidden = _ref.ariaHidden; | ||
| var theme = useTheme(); | ||
| var formatValue = useMemo(function () { | ||
| return getFormatter(format, scale); | ||
| }, [format, scale]); | ||
| var _computeCartesianTick = computeCartesianTicks({ | ||
| axis: axis, | ||
| scale: scale, | ||
| ticksPosition: ticksPosition, | ||
| tickValues: tickValues, | ||
| tickSize: tickSize, | ||
| tickPadding: tickPadding, | ||
| tickRotation: tickRotation | ||
| }), | ||
| ticks = _computeCartesianTick.ticks, | ||
| textAlign = _computeCartesianTick.textAlign, | ||
| textBaseline = _computeCartesianTick.textBaseline; | ||
| var legendNode = null; | ||
| if (legend !== undefined) { | ||
| var legendX = 0; | ||
| var legendY = 0; | ||
| var legendRotation = 0; | ||
| var textAnchor; | ||
| if (axis === 'y') { | ||
| legendRotation = -90; | ||
| legendX = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| textAnchor = 'start'; | ||
| legendY = length; | ||
| } else if (legendPosition === 'middle') { | ||
| textAnchor = 'middle'; | ||
| legendY = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| textAnchor = 'end'; | ||
| } | ||
| } else { | ||
| legendY = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| textAnchor = 'start'; | ||
| } else if (legendPosition === 'middle') { | ||
| textAnchor = 'middle'; | ||
| legendX = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| textAnchor = 'end'; | ||
| legendX = length; | ||
| } | ||
| } | ||
| legendNode = jsx("text", { | ||
| transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"), | ||
| textAnchor: textAnchor, | ||
| style: _objectSpread2({ | ||
| dominantBaseline: 'central' | ||
| }, theme.axis.legend.text), | ||
| children: legend | ||
| }); | ||
| } | ||
| var _useMotionConfig = useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var animatedProps = useSpring({ | ||
| transform: "translate(".concat(x, ",").concat(y, ")"), | ||
| lineX2: axis === 'x' ? length : 0, | ||
| lineY2: axis === 'x' ? 0 : length, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| var transition = useTransition(ticks, { | ||
| keys: function keys(tick) { | ||
| return tick.key; | ||
| }, | ||
| initial: function initial(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| from: function from(tick) { | ||
| return { | ||
| opacity: 0, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| enter: function enter(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| update: function update(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| leave: { | ||
| opacity: 0 | ||
| }, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return jsxs(animated.g, { | ||
| transform: animatedProps.transform, | ||
| "aria-hidden": ariaHidden, | ||
| children: [transition(function (transitionProps, tick, _state, tickIndex) { | ||
| return createElement(renderTick, _objectSpread2(_objectSpread2({ | ||
| tickIndex: tickIndex, | ||
| format: formatValue, | ||
| rotate: tickRotation, | ||
| textBaseline: textBaseline, | ||
| textAnchor: textAlign, | ||
| animatedProps: transitionProps | ||
| }, tick), onClick ? { | ||
| onClick: onClick | ||
| } : {})); | ||
| }), jsx(animated.line, { | ||
| style: theme.axis.domain.line, | ||
| x1: 0, | ||
| x2: animatedProps.lineX2, | ||
| y1: 0, | ||
| y2: animatedProps.lineY2 | ||
| }), legendNode] | ||
| }); | ||
| }; | ||
| var memoizedAxis = memo(Axis); | ||
| var axisPropTypes = { | ||
| ticksPosition: PropTypes.oneOf(['before', 'after']), | ||
| tickValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])), PropTypes.string]), | ||
| tickSize: PropTypes.number, | ||
| tickPadding: PropTypes.number, | ||
| tickRotation: PropTypes.number, | ||
| format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
| renderTick: PropTypes.func, | ||
| legend: PropTypes.node, | ||
| legendPosition: PropTypes.oneOf(['start', 'middle', 'end']), | ||
| legendOffset: PropTypes.number, | ||
| ariaHidden: PropTypes.bool | ||
| }; | ||
| var axisPropType = PropTypes.shape(axisPropTypes); | ||
| var positions = ['top', 'right', 'bottom', 'left']; | ||
| var Axes = memo(function (_ref) { | ||
| var xScale = _ref.xScale, | ||
| yScale = _ref.yScale, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| top = _ref.top, | ||
| right = _ref.right, | ||
| bottom = _ref.bottom, | ||
| left = _ref.left; | ||
| var axes = { | ||
| top: top, | ||
| right: right, | ||
| bottom: bottom, | ||
| left: left | ||
| }; | ||
| return jsx(Fragment, { | ||
| children: positions.map(function (position) { | ||
| var axis = axes[position]; | ||
| if (!axis) return null; | ||
| var isXAxis = position === 'top' || position === 'bottom'; | ||
| var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'; | ||
| return jsx(memoizedAxis, _objectSpread2(_objectSpread2({}, axis), {}, { | ||
| axis: isXAxis ? 'x' : 'y', | ||
| x: position === 'right' ? width : 0, | ||
| y: position === 'bottom' ? height : 0, | ||
| scale: isXAxis ? xScale : yScale, | ||
| length: isXAxis ? width : height, | ||
| ticksPosition: ticksPosition | ||
| }), position); | ||
| }) | ||
| }); | ||
| }); | ||
| var GridLine = memo(function (_ref) { | ||
| var animatedProps = _ref.animatedProps; | ||
| var theme = useTheme(); | ||
| return jsx(animated.line, _objectSpread2(_objectSpread2({}, animatedProps), theme.grid.line)); | ||
| }); | ||
| var GridLines = memo(function (_ref) { | ||
| var lines = _ref.lines; | ||
| var _useMotionConfig = useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var transition = useTransition(lines, { | ||
| keys: function keys(line) { | ||
| return line.key; | ||
| }, | ||
| initial: function initial(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| from: function from(line) { | ||
| return { | ||
| opacity: 0, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| enter: function enter(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| update: function update(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| leave: { | ||
| opacity: 0 | ||
| }, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return jsx("g", { | ||
| children: transition(function (animatedProps, line) { | ||
| return createElement(GridLine, _objectSpread2(_objectSpread2({}, line), {}, { | ||
| key: line.key, | ||
| animatedProps: animatedProps | ||
| })); | ||
| }) | ||
| }); | ||
| }); | ||
| var Grid = memo(function (_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height, | ||
| xScale = _ref.xScale, | ||
| yScale = _ref.yScale, | ||
| xValues = _ref.xValues, | ||
| yValues = _ref.yValues; | ||
| var xLines = useMemo(function () { | ||
| if (!xScale) return false; | ||
| return computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: xScale, | ||
| axis: 'x', | ||
| values: xValues | ||
| }); | ||
| }, [xScale, xValues, width, height]); | ||
| var yLines = useMemo(function () { | ||
| if (!yScale) return false; | ||
| return computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: yScale, | ||
| axis: 'y', | ||
| values: yValues | ||
| }); | ||
| }, [height, width, yScale, yValues]); | ||
| return jsxs(Fragment, { | ||
| children: [xLines && jsx(GridLines, { | ||
| lines: xLines | ||
| }), yLines && jsx(GridLines, { | ||
| lines: yLines | ||
| })] | ||
| }); | ||
| }); | ||
| var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) { | ||
| var _theme$axis$domain$li; | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| _ref$x = _ref.x, | ||
| x = _ref$x === void 0 ? 0 : _ref$x, | ||
| _ref$y = _ref.y, | ||
| y = _ref$y === void 0 ? 0 : _ref$y, | ||
| length = _ref.length, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| _ref$tickSize = _ref.tickSize, | ||
| tickSize = _ref$tickSize === void 0 ? 5 : _ref$tickSize, | ||
| _ref$tickPadding = _ref.tickPadding, | ||
| tickPadding = _ref$tickPadding === void 0 ? 5 : _ref$tickPadding, | ||
| _ref$tickRotation = _ref.tickRotation, | ||
| tickRotation = _ref$tickRotation === void 0 ? 0 : _ref$tickRotation, | ||
| _format = _ref.format, | ||
| legend = _ref.legend, | ||
| _ref$legendPosition = _ref.legendPosition, | ||
| legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition, | ||
| _ref$legendOffset = _ref.legendOffset, | ||
| legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset, | ||
| theme = _ref.theme; | ||
| var _computeCartesianTick = computeCartesianTicks({ | ||
| axis: axis, | ||
| scale: scale, | ||
| ticksPosition: ticksPosition, | ||
| tickValues: tickValues, | ||
| tickSize: tickSize, | ||
| tickPadding: tickPadding, | ||
| tickRotation: tickRotation, | ||
| engine: 'canvas' | ||
| }), | ||
| ticks = _computeCartesianTick.ticks, | ||
| textAlign = _computeCartesianTick.textAlign, | ||
| textBaseline = _computeCartesianTick.textBaseline; | ||
| ctx.save(); | ||
| ctx.translate(x, y); | ||
| ctx.textAlign = textAlign; | ||
| ctx.textBaseline = textBaseline; | ||
| ctx.font = "".concat(theme.axis.ticks.text.fontWeight ? "".concat(theme.axis.ticks.text.fontWeight, " ") : '').concat(theme.axis.ticks.text.fontSize, "px ").concat(theme.axis.ticks.text.fontFamily); | ||
| if (((_theme$axis$domain$li = theme.axis.domain.line.strokeWidth) !== null && _theme$axis$domain$li !== void 0 ? _theme$axis$domain$li : 0) > 0) { | ||
| ctx.lineWidth = Number(theme.axis.domain.line.strokeWidth); | ||
| ctx.lineCap = 'square'; | ||
| if (theme.axis.domain.line.stroke) { | ||
| ctx.strokeStyle = theme.axis.domain.line.stroke; | ||
| } | ||
| ctx.beginPath(); | ||
| ctx.moveTo(0, 0); | ||
| ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length); | ||
| ctx.stroke(); | ||
| } | ||
| var format = typeof _format === 'function' ? _format : function (value) { | ||
| return "".concat(value); | ||
| }; | ||
| ticks.forEach(function (tick) { | ||
| var _theme$axis$ticks$lin; | ||
| if (((_theme$axis$ticks$lin = theme.axis.ticks.line.strokeWidth) !== null && _theme$axis$ticks$lin !== void 0 ? _theme$axis$ticks$lin : 0) > 0) { | ||
| ctx.lineWidth = Number(theme.axis.ticks.line.strokeWidth); | ||
| ctx.lineCap = 'square'; | ||
| if (theme.axis.ticks.line.stroke) { | ||
| ctx.strokeStyle = theme.axis.ticks.line.stroke; | ||
| } | ||
| ctx.beginPath(); | ||
| ctx.moveTo(tick.x, tick.y); | ||
| ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY); | ||
| ctx.stroke(); | ||
| } | ||
| var value = format(tick.value); | ||
| ctx.save(); | ||
| ctx.translate(tick.x + tick.textX, tick.y + tick.textY); | ||
| ctx.rotate(degreesToRadians(tickRotation)); | ||
| if (theme.axis.ticks.text.fill) { | ||
| ctx.fillStyle = theme.axis.ticks.text.fill; | ||
| } | ||
| ctx.fillText(String(value), 0, 0); | ||
| ctx.restore(); | ||
| }); | ||
| if (legend !== undefined) { | ||
| var legendX = 0; | ||
| var legendY = 0; | ||
| var legendRotation = 0; | ||
| var _textAlign = 'center'; | ||
| if (axis === 'y') { | ||
| legendRotation = -90; | ||
| legendX = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| _textAlign = 'start'; | ||
| legendY = length; | ||
| } else if (legendPosition === 'middle') { | ||
| _textAlign = 'center'; | ||
| legendY = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| _textAlign = 'end'; | ||
| } | ||
| } else { | ||
| legendY = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| _textAlign = 'start'; | ||
| } else if (legendPosition === 'middle') { | ||
| _textAlign = 'center'; | ||
| legendX = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| _textAlign = 'end'; | ||
| legendX = length; | ||
| } | ||
| } | ||
| ctx.translate(legendX, legendY); | ||
| ctx.rotate(degreesToRadians(legendRotation)); | ||
| ctx.font = "".concat(theme.axis.legend.text.fontWeight ? "".concat(theme.axis.legend.text.fontWeight, " ") : '').concat(theme.axis.legend.text.fontSize, "px ").concat(theme.axis.legend.text.fontFamily); | ||
| if (theme.axis.legend.text.fill) { | ||
| ctx.fillStyle = theme.axis.legend.text.fill; | ||
| } | ||
| ctx.textAlign = _textAlign; | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.fillText(legend, 0, 0); | ||
| } | ||
| ctx.restore(); | ||
| }; | ||
| var renderAxesToCanvas = function renderAxesToCanvas(ctx, _ref2) { | ||
| var xScale = _ref2.xScale, | ||
| yScale = _ref2.yScale, | ||
| width = _ref2.width, | ||
| height = _ref2.height, | ||
| top = _ref2.top, | ||
| right = _ref2.right, | ||
| bottom = _ref2.bottom, | ||
| left = _ref2.left, | ||
| theme = _ref2.theme; | ||
| var axes = { | ||
| top: top, | ||
| right: right, | ||
| bottom: bottom, | ||
| left: left | ||
| }; | ||
| positions.forEach(function (position) { | ||
| var axis = axes[position]; | ||
| if (!axis) return null; | ||
| var isXAxis = position === 'top' || position === 'bottom'; | ||
| var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'; | ||
| var scale = isXAxis ? xScale : yScale; | ||
| var format = getFormatter(axis.format, scale); | ||
| renderAxisToCanvas(ctx, _objectSpread2(_objectSpread2({}, axis), {}, { | ||
| axis: isXAxis ? 'x' : 'y', | ||
| x: position === 'right' ? width : 0, | ||
| y: position === 'bottom' ? height : 0, | ||
| scale: scale, | ||
| format: format, | ||
| length: isXAxis ? width : height, | ||
| ticksPosition: ticksPosition, | ||
| theme: theme | ||
| })); | ||
| }); | ||
| }; | ||
| var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) { | ||
| var width = _ref3.width, | ||
| height = _ref3.height, | ||
| scale = _ref3.scale, | ||
| axis = _ref3.axis, | ||
| values = _ref3.values; | ||
| var lines = computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: scale, | ||
| axis: axis, | ||
| values: values | ||
| }); | ||
| lines.forEach(function (line) { | ||
| ctx.beginPath(); | ||
| ctx.moveTo(line.x1, line.y1); | ||
| ctx.lineTo(line.x2, line.y2); | ||
| ctx.stroke(); | ||
| }); | ||
| }; | ||
| export { Axes, memoizedAxis as Axis, memoizedAxisTick as AxisTick, Grid, GridLine, GridLines, axisPropType, axisPropTypes, positions, renderAxesToCanvas, renderAxisToCanvas, renderGridLinesToCanvas }; | ||
| import*as t from"react";import{memo as e,useMemo as i,createElement as n}from"react";import{animated as r,useSpring as a,useTransition as o}from"@react-spring/web";import{textPropsByEngine as l,useTheme as s,useMotionConfig as c,degreesToRadians as f}from"@nivo/core";import{timeFormat as x}from"d3-time-format";import{format as d}from"d3-format";import{getScaleTicks as u,centerScale as m}from"@nivo/scales";import{jsxs as y,jsx as g,Fragment as k}from"react/jsx-runtime";import h from"prop-types";function v(){return v=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},v.apply(this,arguments)}var p=function(t){var e,i=t.axis,n=t.scale,r=t.ticksPosition,a=t.tickValues,o=t.tickSize,s=t.tickPadding,c=t.tickRotation,f=t.engine,x=void 0===f?"svg":f,d=u(n,a),y=l[x],g="bandwidth"in n?m(n):n,k={lineX:0,lineY:0},h={textX:0,textY:0},p="object"==typeof document&&"rtl"===document.dir,b=y.align.center,P=y.baseline.center;return"x"===i?(e=function(t){var e;return{x:null!=(e=g(t))?e:0,y:0}},k.lineY=o*("after"===r?1:-1),h.textY=(o+s)*("after"===r?1:-1),P="after"===r?y.baseline.top:y.baseline.bottom,0===c?b=y.align.center:"after"===r&&c<0||"before"===r&&c>0?(b=y.align[p?"left":"right"],P=y.baseline.center):("after"===r&&c>0||"before"===r&&c<0)&&(b=y.align[p?"right":"left"],P=y.baseline.center)):(e=function(t){var e;return{x:0,y:null!=(e=g(t))?e:0}},k.lineX=o*("after"===r?1:-1),h.textX=(o+s)*("after"===r?1:-1),b="after"===r?y.align.left:y.align.right),{ticks:d.map((function(t){return v({key:"number"==typeof t||"string"==typeof t?t:""+t,value:t},e(t),k,h)})),textAlign:b,textBaseline:P}},b=function(t,e){if(void 0===t||"function"==typeof t)return t;if("time"===e.type){var i=x(t);return function(t){return i(t instanceof Date?t:new Date(t))}}return d(t)},P=function(t){var e,i=t.width,n=t.height,r=t.scale,a=t.axis,o=t.values,l=(e=o,Array.isArray(e)?o:void 0)||u(r,o),s="bandwidth"in r?m(r):r,c="x"===a?l.map((function(t){var e,i;return{key:""+t,x1:null!=(e=s(t))?e:0,x2:null!=(i=s(t))?i:0,y1:0,y2:n}})):l.map((function(t){var e,n;return{key:""+t,x1:0,x2:i,y1:null!=(e=s(t))?e:0,y2:null!=(n=s(t))?n:0}}));return c},S=e((function(t){var e,n=t.value,a=t.format,o=t.lineX,l=t.lineY,c=t.onClick,f=t.textBaseline,x=t.textAnchor,d=t.animatedProps,u=s(),m=null!=(e=null==a?void 0:a(n))?e:n,k=i((function(){var t={opacity:d.opacity};return c?{style:v({},t,{cursor:"pointer"}),onClick:function(t){return c(t,m)}}:{style:t}}),[d.opacity,c,m]);return y(r.g,v({transform:d.transform},k,{children:[g("line",{x1:0,x2:o,y1:0,y2:l,style:u.axis.ticks.line}),g(r.text,{dominantBaseline:f,textAnchor:x,transform:d.textTransform,style:u.axis.ticks.text,children:m})]}))})),T=e((function(e){var n=e.axis,l=e.scale,f=e.x,x=void 0===f?0:f,d=e.y,u=void 0===d?0:d,m=e.length,k=e.ticksPosition,h=e.tickValues,P=e.tickSize,T=void 0===P?5:P,w=e.tickPadding,A=void 0===w?5:w,O=e.tickRotation,X=void 0===O?0:O,Y=e.format,W=e.renderTick,B=void 0===W?S:W,z=e.legend,V=e.legendPosition,C=void 0===V?"end":V,R=e.legendOffset,j=void 0===R?0:R,E=e.onClick,D=e.ariaHidden,q=s(),F=i((function(){return b(Y,l)}),[Y,l]),H=p({axis:n,scale:l,ticksPosition:k,tickValues:h,tickSize:T,tickPadding:A,tickRotation:X}),N=H.ticks,I=H.textAlign,G=H.textBaseline,J=null;if(void 0!==z){var K,L=0,M=0,Q=0;"y"===n?(Q=-90,L=j,"start"===C?(K="start",M=m):"middle"===C?(K="middle",M=m/2):"end"===C&&(K="end")):(M=j,"start"===C?K="start":"middle"===C?(K="middle",L=m/2):"end"===C&&(K="end",L=m)),J=g("text",{transform:"translate("+L+", "+M+") rotate("+Q+")",textAnchor:K,style:v({dominantBaseline:"central"},q.axis.legend.text),children:z})}var U=c(),Z=U.animate,$=U.config,_=a({transform:"translate("+x+","+u+")",lineX2:"x"===n?m:0,lineY2:"x"===n?0:m,config:$,immediate:!Z}),tt=o(N,{keys:function(t){return t.key},initial:function(t){return{opacity:1,transform:"translate("+t.x+","+t.y+")",textTransform:"translate("+t.textX+","+t.textY+") rotate("+X+")"}},from:function(t){return{opacity:0,transform:"translate("+t.x+","+t.y+")",textTransform:"translate("+t.textX+","+t.textY+") rotate("+X+")"}},enter:function(t){return{opacity:1,transform:"translate("+t.x+","+t.y+")",textTransform:"translate("+t.textX+","+t.textY+") rotate("+X+")"}},update:function(t){return{opacity:1,transform:"translate("+t.x+","+t.y+")",textTransform:"translate("+t.textX+","+t.textY+") rotate("+X+")"}},leave:{opacity:0},config:$,immediate:!Z});return y(r.g,{transform:_.transform,"aria-hidden":D,children:[tt((function(e,i,n,r){return t.createElement(B,v({tickIndex:r,format:F,rotate:X,textBaseline:G,textAnchor:I,animatedProps:e},i,E?{onClick:E}:{}))})),g(r.line,{style:q.axis.domain.line,x1:0,x2:_.lineX2,y1:0,y2:_.lineY2}),J]})})),w={ticksPosition:h.oneOf(["before","after"]),tickValues:h.oneOfType([h.number,h.arrayOf(h.oneOfType([h.number,h.string,h.instanceOf(Date)])),h.string]),tickSize:h.number,tickPadding:h.number,tickRotation:h.number,format:h.oneOfType([h.func,h.string]),renderTick:h.func,legend:h.node,legendPosition:h.oneOf(["start","middle","end"]),legendOffset:h.number,ariaHidden:h.bool},A=h.shape(w),O=["top","right","bottom","left"],X=e((function(t){var e=t.xScale,i=t.yScale,n=t.width,r=t.height,a={top:t.top,right:t.right,bottom:t.bottom,left:t.left};return g(k,{children:O.map((function(t){var o=a[t];if(!o)return null;var l="top"===t||"bottom"===t;return g(T,v({},o,{axis:l?"x":"y",x:"right"===t?n:0,y:"bottom"===t?r:0,scale:l?e:i,length:l?n:r,ticksPosition:"top"===t||"left"===t?"before":"after"}),t)}))})})),Y=e((function(t){var e=t.animatedProps,i=s();return g(r.line,v({},e,i.grid.line))})),W=e((function(t){var e=t.lines,i=c(),r=i.animate,a=i.config,l=o(e,{keys:function(t){return t.key},initial:function(t){return{opacity:1,x1:t.x1,x2:t.x2,y1:t.y1,y2:t.y2}},from:function(t){return{opacity:0,x1:t.x1,x2:t.x2,y1:t.y1,y2:t.y2}},enter:function(t){return{opacity:1,x1:t.x1,x2:t.x2,y1:t.y1,y2:t.y2}},update:function(t){return{opacity:1,x1:t.x1,x2:t.x2,y1:t.y1,y2:t.y2}},leave:{opacity:0},config:a,immediate:!r});return g("g",{children:l((function(t,e){return n(Y,v({},e,{key:e.key,animatedProps:t}))}))})})),B=e((function(t){var e=t.width,n=t.height,r=t.xScale,a=t.yScale,o=t.xValues,l=t.yValues,s=i((function(){return!!r&&P({width:e,height:n,scale:r,axis:"x",values:o})}),[r,o,e,n]),c=i((function(){return!!a&&P({width:e,height:n,scale:a,axis:"y",values:l})}),[n,e,a,l]);return y(k,{children:[s&&g(W,{lines:s}),c&&g(W,{lines:c})]})})),z=function(t,e){var i,n=e.axis,r=e.scale,a=e.x,o=void 0===a?0:a,l=e.y,s=void 0===l?0:l,c=e.length,x=e.ticksPosition,d=e.tickValues,u=e.tickSize,m=void 0===u?5:u,y=e.tickPadding,g=void 0===y?5:y,k=e.tickRotation,h=void 0===k?0:k,v=e.format,b=e.legend,P=e.legendPosition,S=void 0===P?"end":P,T=e.legendOffset,w=void 0===T?0:T,A=e.theme,O=p({axis:n,scale:r,ticksPosition:x,tickValues:d,tickSize:m,tickPadding:g,tickRotation:h,engine:"canvas"}),X=O.ticks,Y=O.textAlign,W=O.textBaseline;t.save(),t.translate(o,s),t.textAlign=Y,t.textBaseline=W,t.font=(A.axis.ticks.text.fontWeight?A.axis.ticks.text.fontWeight+" ":"")+A.axis.ticks.text.fontSize+"px "+A.axis.ticks.text.fontFamily,(null!=(i=A.axis.domain.line.strokeWidth)?i:0)>0&&(t.lineWidth=Number(A.axis.domain.line.strokeWidth),t.lineCap="square",A.axis.domain.line.stroke&&(t.strokeStyle=A.axis.domain.line.stroke),t.beginPath(),t.moveTo(0,0),t.lineTo("x"===n?c:0,"x"===n?0:c),t.stroke());var B="function"==typeof v?v:function(t){return""+t};if(X.forEach((function(e){var i;(null!=(i=A.axis.ticks.line.strokeWidth)?i:0)>0&&(t.lineWidth=Number(A.axis.ticks.line.strokeWidth),t.lineCap="square",A.axis.ticks.line.stroke&&(t.strokeStyle=A.axis.ticks.line.stroke),t.beginPath(),t.moveTo(e.x,e.y),t.lineTo(e.x+e.lineX,e.y+e.lineY),t.stroke());var n=B(e.value);t.save(),t.translate(e.x+e.textX,e.y+e.textY),t.rotate(f(h)),A.axis.ticks.text.fill&&(t.fillStyle=A.axis.ticks.text.fill),t.fillText(String(n),0,0),t.restore()})),void 0!==b){var z=0,V=0,C=0,R="center";"y"===n?(C=-90,z=w,"start"===S?(R="start",V=c):"middle"===S?(R="center",V=c/2):"end"===S&&(R="end")):(V=w,"start"===S?R="start":"middle"===S?(R="center",z=c/2):"end"===S&&(R="end",z=c)),t.translate(z,V),t.rotate(f(C)),t.font=(A.axis.legend.text.fontWeight?A.axis.legend.text.fontWeight+" ":"")+A.axis.legend.text.fontSize+"px "+A.axis.legend.text.fontFamily,A.axis.legend.text.fill&&(t.fillStyle=A.axis.legend.text.fill),t.textAlign=R,t.textBaseline="middle",t.fillText(b,0,0)}t.restore()},V=function(t,e){var i=e.xScale,n=e.yScale,r=e.width,a=e.height,o=e.top,l=e.right,s=e.bottom,c=e.left,f=e.theme,x={top:o,right:l,bottom:s,left:c};O.forEach((function(e){var o=x[e];if(!o)return null;var l="top"===e||"bottom"===e,s="top"===e||"left"===e?"before":"after",c=l?i:n,d=b(o.format,c);z(t,v({},o,{axis:l?"x":"y",x:"right"===e?r:0,y:"bottom"===e?a:0,scale:c,format:d,length:l?r:a,ticksPosition:s,theme:f}))}))},C=function(t,e){var i=e.width,n=e.height,r=e.scale,a=e.axis,o=e.values;P({width:i,height:n,scale:r,axis:a,values:o}).forEach((function(e){t.beginPath(),t.moveTo(e.x1,e.y1),t.lineTo(e.x2,e.y2),t.stroke()}))};export{X as Axes,T as Axis,S as AxisTick,B as Grid,Y as GridLine,W as GridLines,A as axisPropType,w as axisPropTypes,O as positions,V as renderAxesToCanvas,z as renderAxisToCanvas,C as renderGridLinesToCanvas}; | ||
| //# sourceMappingURL=nivo-axes.es.js.map |
@@ -1,772 +0,2 @@ | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@react-spring/web'), require('@nivo/core'), require('d3-time-format'), require('d3-format'), require('@nivo/scales'), require('react/jsx-runtime'), require('prop-types')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react', '@react-spring/web', '@nivo/core', 'd3-time-format', 'd3-format', '@nivo/scales', 'react/jsx-runtime', 'prop-types'], factory) : | ||
| (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global['@react-spring/web'], global.nivo, global.d3, global.d3, global.nivo, global['react/jsx-runtime'], global.PropTypes)); | ||
| }(this, (function (exports, React, web, core, d3TimeFormat, d3Format, scales, jsxRuntime, PropTypes) { '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 isArray = function isArray(value) { | ||
| return Array.isArray(value); | ||
| }; | ||
| var computeCartesianTicks = function computeCartesianTicks(_ref) { | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| tickSize = _ref.tickSize, | ||
| tickPadding = _ref.tickPadding, | ||
| tickRotation = _ref.tickRotation, | ||
| _ref$engine = _ref.engine, | ||
| engine = _ref$engine === void 0 ? 'svg' : _ref$engine; | ||
| var values = scales.getScaleTicks(scale, tickValues); | ||
| var textProps = core.textPropsByEngine[engine]; | ||
| var position = 'bandwidth' in scale ? scales.centerScale(scale) : scale; | ||
| var line = { | ||
| lineX: 0, | ||
| lineY: 0 | ||
| }; | ||
| var text = { | ||
| textX: 0, | ||
| textY: 0 | ||
| }; | ||
| var isRTL = typeof document === 'object' ? document.dir === 'rtl' : false; | ||
| var translate; | ||
| var textAlign = textProps.align.center; | ||
| var textBaseline = textProps.baseline.center; | ||
| if (axis === 'x') { | ||
| translate = function translate(d) { | ||
| var _position; | ||
| return { | ||
| x: (_position = position(d)) !== null && _position !== void 0 ? _position : 0, | ||
| y: 0 | ||
| }; | ||
| }; | ||
| line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1); | ||
| text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1); | ||
| if (ticksPosition === 'after') { | ||
| textBaseline = textProps.baseline.top; | ||
| } else { | ||
| textBaseline = textProps.baseline.bottom; | ||
| } | ||
| if (tickRotation === 0) { | ||
| textAlign = textProps.align.center; | ||
| } else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) { | ||
| textAlign = textProps.align[isRTL ? 'left' : 'right']; | ||
| textBaseline = textProps.baseline.center; | ||
| } else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) { | ||
| textAlign = textProps.align[isRTL ? 'right' : 'left']; | ||
| textBaseline = textProps.baseline.center; | ||
| } | ||
| } else { | ||
| translate = function translate(d) { | ||
| var _position2; | ||
| return { | ||
| x: 0, | ||
| y: (_position2 = position(d)) !== null && _position2 !== void 0 ? _position2 : 0 | ||
| }; | ||
| }; | ||
| line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1); | ||
| text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1); | ||
| if (ticksPosition === 'after') { | ||
| textAlign = textProps.align.left; | ||
| } else { | ||
| textAlign = textProps.align.right; | ||
| } | ||
| } | ||
| var ticks = values.map(function (value) { | ||
| return _objectSpread2(_objectSpread2(_objectSpread2({ | ||
| key: typeof value === 'number' || typeof value === 'string' ? value : "".concat(value), | ||
| value: value | ||
| }, translate(value)), line), text); | ||
| }); | ||
| return { | ||
| ticks: ticks, | ||
| textAlign: textAlign, | ||
| textBaseline: textBaseline | ||
| }; | ||
| }; | ||
| var getFormatter = function getFormatter(format, scale) { | ||
| if (typeof format === 'undefined' || typeof format === 'function') return format; | ||
| if (scale.type === 'time') { | ||
| var formatter = d3TimeFormat.timeFormat(format); | ||
| return function (d) { | ||
| return formatter(d instanceof Date ? d : new Date(d)); | ||
| }; | ||
| } | ||
| return d3Format.format(format); | ||
| }; | ||
| var computeGridLines = function computeGridLines(_ref2) { | ||
| var width = _ref2.width, | ||
| height = _ref2.height, | ||
| scale = _ref2.scale, | ||
| axis = _ref2.axis, | ||
| _values = _ref2.values; | ||
| var lineValues = isArray(_values) ? _values : undefined; | ||
| var values = lineValues || scales.getScaleTicks(scale, _values); | ||
| var position = 'bandwidth' in scale ? scales.centerScale(scale) : scale; | ||
| var lines = axis === 'x' ? values.map(function (value) { | ||
| var _position3, _position4; | ||
| return { | ||
| key: "".concat(value), | ||
| x1: (_position3 = position(value)) !== null && _position3 !== void 0 ? _position3 : 0, | ||
| x2: (_position4 = position(value)) !== null && _position4 !== void 0 ? _position4 : 0, | ||
| y1: 0, | ||
| y2: height | ||
| }; | ||
| }) : values.map(function (value) { | ||
| var _position5, _position6; | ||
| return { | ||
| key: "".concat(value), | ||
| x1: 0, | ||
| x2: width, | ||
| y1: (_position5 = position(value)) !== null && _position5 !== void 0 ? _position5 : 0, | ||
| y2: (_position6 = position(value)) !== null && _position6 !== void 0 ? _position6 : 0 | ||
| }; | ||
| }); | ||
| return lines; | ||
| }; | ||
| var AxisTick = function AxisTick(_ref) { | ||
| var _format; | ||
| var _value = _ref.value, | ||
| format = _ref.format, | ||
| lineX = _ref.lineX, | ||
| lineY = _ref.lineY, | ||
| _onClick = _ref.onClick, | ||
| textBaseline = _ref.textBaseline, | ||
| textAnchor = _ref.textAnchor, | ||
| animatedProps = _ref.animatedProps; | ||
| var theme = core.useTheme(); | ||
| var value = (_format = format === null || format === void 0 ? void 0 : format(_value)) !== null && _format !== void 0 ? _format : _value; | ||
| var props = React.useMemo(function () { | ||
| var style = { | ||
| opacity: animatedProps.opacity | ||
| }; | ||
| if (!_onClick) { | ||
| return { | ||
| style: style | ||
| }; | ||
| } | ||
| return { | ||
| style: _objectSpread2(_objectSpread2({}, style), {}, { | ||
| cursor: 'pointer' | ||
| }), | ||
| onClick: function onClick(event) { | ||
| return _onClick(event, value); | ||
| } | ||
| }; | ||
| }, [animatedProps.opacity, _onClick, value]); | ||
| return jsxRuntime.jsxs(web.animated.g, _objectSpread2(_objectSpread2({ | ||
| transform: animatedProps.transform | ||
| }, props), {}, { | ||
| children: [jsxRuntime.jsx("line", { | ||
| x1: 0, | ||
| x2: lineX, | ||
| y1: 0, | ||
| y2: lineY, | ||
| style: theme.axis.ticks.line | ||
| }), jsxRuntime.jsx(web.animated.text, { | ||
| dominantBaseline: textBaseline, | ||
| textAnchor: textAnchor, | ||
| transform: animatedProps.textTransform, | ||
| style: theme.axis.ticks.text, | ||
| children: value | ||
| })] | ||
| })); | ||
| }; | ||
| var memoizedAxisTick = React.memo(AxisTick); | ||
| var Axis = function Axis(_ref) { | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| _ref$x = _ref.x, | ||
| x = _ref$x === void 0 ? 0 : _ref$x, | ||
| _ref$y = _ref.y, | ||
| y = _ref$y === void 0 ? 0 : _ref$y, | ||
| length = _ref.length, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| _ref$tickSize = _ref.tickSize, | ||
| tickSize = _ref$tickSize === void 0 ? 5 : _ref$tickSize, | ||
| _ref$tickPadding = _ref.tickPadding, | ||
| tickPadding = _ref$tickPadding === void 0 ? 5 : _ref$tickPadding, | ||
| _ref$tickRotation = _ref.tickRotation, | ||
| tickRotation = _ref$tickRotation === void 0 ? 0 : _ref$tickRotation, | ||
| format = _ref.format, | ||
| _ref$renderTick = _ref.renderTick, | ||
| renderTick = _ref$renderTick === void 0 ? memoizedAxisTick : _ref$renderTick, | ||
| legend = _ref.legend, | ||
| _ref$legendPosition = _ref.legendPosition, | ||
| legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition, | ||
| _ref$legendOffset = _ref.legendOffset, | ||
| legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset, | ||
| onClick = _ref.onClick, | ||
| ariaHidden = _ref.ariaHidden; | ||
| var theme = core.useTheme(); | ||
| var formatValue = React.useMemo(function () { | ||
| return getFormatter(format, scale); | ||
| }, [format, scale]); | ||
| var _computeCartesianTick = computeCartesianTicks({ | ||
| axis: axis, | ||
| scale: scale, | ||
| ticksPosition: ticksPosition, | ||
| tickValues: tickValues, | ||
| tickSize: tickSize, | ||
| tickPadding: tickPadding, | ||
| tickRotation: tickRotation | ||
| }), | ||
| ticks = _computeCartesianTick.ticks, | ||
| textAlign = _computeCartesianTick.textAlign, | ||
| textBaseline = _computeCartesianTick.textBaseline; | ||
| var legendNode = null; | ||
| if (legend !== undefined) { | ||
| var legendX = 0; | ||
| var legendY = 0; | ||
| var legendRotation = 0; | ||
| var textAnchor; | ||
| if (axis === 'y') { | ||
| legendRotation = -90; | ||
| legendX = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| textAnchor = 'start'; | ||
| legendY = length; | ||
| } else if (legendPosition === 'middle') { | ||
| textAnchor = 'middle'; | ||
| legendY = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| textAnchor = 'end'; | ||
| } | ||
| } else { | ||
| legendY = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| textAnchor = 'start'; | ||
| } else if (legendPosition === 'middle') { | ||
| textAnchor = 'middle'; | ||
| legendX = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| textAnchor = 'end'; | ||
| legendX = length; | ||
| } | ||
| } | ||
| legendNode = jsxRuntime.jsx("text", { | ||
| transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"), | ||
| textAnchor: textAnchor, | ||
| style: _objectSpread2({ | ||
| dominantBaseline: 'central' | ||
| }, theme.axis.legend.text), | ||
| children: legend | ||
| }); | ||
| } | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var animatedProps = web.useSpring({ | ||
| transform: "translate(".concat(x, ",").concat(y, ")"), | ||
| lineX2: axis === 'x' ? length : 0, | ||
| lineY2: axis === 'x' ? 0 : length, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| var transition = web.useTransition(ticks, { | ||
| keys: function keys(tick) { | ||
| return tick.key; | ||
| }, | ||
| initial: function initial(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| from: function from(tick) { | ||
| return { | ||
| opacity: 0, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| enter: function enter(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| update: function update(tick) { | ||
| return { | ||
| opacity: 1, | ||
| transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"), | ||
| textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")") | ||
| }; | ||
| }, | ||
| leave: { | ||
| opacity: 0 | ||
| }, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return jsxRuntime.jsxs(web.animated.g, { | ||
| transform: animatedProps.transform, | ||
| "aria-hidden": ariaHidden, | ||
| children: [transition(function (transitionProps, tick, _state, tickIndex) { | ||
| return React.createElement(renderTick, _objectSpread2(_objectSpread2({ | ||
| tickIndex: tickIndex, | ||
| format: formatValue, | ||
| rotate: tickRotation, | ||
| textBaseline: textBaseline, | ||
| textAnchor: textAlign, | ||
| animatedProps: transitionProps | ||
| }, tick), onClick ? { | ||
| onClick: onClick | ||
| } : {})); | ||
| }), jsxRuntime.jsx(web.animated.line, { | ||
| style: theme.axis.domain.line, | ||
| x1: 0, | ||
| x2: animatedProps.lineX2, | ||
| y1: 0, | ||
| y2: animatedProps.lineY2 | ||
| }), legendNode] | ||
| }); | ||
| }; | ||
| var memoizedAxis = React.memo(Axis); | ||
| var axisPropTypes = { | ||
| ticksPosition: PropTypes.oneOf(['before', 'after']), | ||
| tickValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])), PropTypes.string]), | ||
| tickSize: PropTypes.number, | ||
| tickPadding: PropTypes.number, | ||
| tickRotation: PropTypes.number, | ||
| format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
| renderTick: PropTypes.func, | ||
| legend: PropTypes.node, | ||
| legendPosition: PropTypes.oneOf(['start', 'middle', 'end']), | ||
| legendOffset: PropTypes.number, | ||
| ariaHidden: PropTypes.bool | ||
| }; | ||
| var axisPropType = PropTypes.shape(axisPropTypes); | ||
| var positions = ['top', 'right', 'bottom', 'left']; | ||
| var Axes = React.memo(function (_ref) { | ||
| var xScale = _ref.xScale, | ||
| yScale = _ref.yScale, | ||
| width = _ref.width, | ||
| height = _ref.height, | ||
| top = _ref.top, | ||
| right = _ref.right, | ||
| bottom = _ref.bottom, | ||
| left = _ref.left; | ||
| var axes = { | ||
| top: top, | ||
| right: right, | ||
| bottom: bottom, | ||
| left: left | ||
| }; | ||
| return jsxRuntime.jsx(jsxRuntime.Fragment, { | ||
| children: positions.map(function (position) { | ||
| var axis = axes[position]; | ||
| if (!axis) return null; | ||
| var isXAxis = position === 'top' || position === 'bottom'; | ||
| var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'; | ||
| return jsxRuntime.jsx(memoizedAxis, _objectSpread2(_objectSpread2({}, axis), {}, { | ||
| axis: isXAxis ? 'x' : 'y', | ||
| x: position === 'right' ? width : 0, | ||
| y: position === 'bottom' ? height : 0, | ||
| scale: isXAxis ? xScale : yScale, | ||
| length: isXAxis ? width : height, | ||
| ticksPosition: ticksPosition | ||
| }), position); | ||
| }) | ||
| }); | ||
| }); | ||
| var GridLine = React.memo(function (_ref) { | ||
| var animatedProps = _ref.animatedProps; | ||
| var theme = core.useTheme(); | ||
| return jsxRuntime.jsx(web.animated.line, _objectSpread2(_objectSpread2({}, animatedProps), theme.grid.line)); | ||
| }); | ||
| var GridLines = React.memo(function (_ref) { | ||
| var lines = _ref.lines; | ||
| var _useMotionConfig = core.useMotionConfig(), | ||
| animate = _useMotionConfig.animate, | ||
| springConfig = _useMotionConfig.config; | ||
| var transition = web.useTransition(lines, { | ||
| keys: function keys(line) { | ||
| return line.key; | ||
| }, | ||
| initial: function initial(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| from: function from(line) { | ||
| return { | ||
| opacity: 0, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| enter: function enter(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| update: function update(line) { | ||
| return { | ||
| opacity: 1, | ||
| x1: line.x1, | ||
| x2: line.x2, | ||
| y1: line.y1, | ||
| y2: line.y2 | ||
| }; | ||
| }, | ||
| leave: { | ||
| opacity: 0 | ||
| }, | ||
| config: springConfig, | ||
| immediate: !animate | ||
| }); | ||
| return jsxRuntime.jsx("g", { | ||
| children: transition(function (animatedProps, line) { | ||
| return React.createElement(GridLine, _objectSpread2(_objectSpread2({}, line), {}, { | ||
| key: line.key, | ||
| animatedProps: animatedProps | ||
| })); | ||
| }) | ||
| }); | ||
| }); | ||
| var Grid = React.memo(function (_ref) { | ||
| var width = _ref.width, | ||
| height = _ref.height, | ||
| xScale = _ref.xScale, | ||
| yScale = _ref.yScale, | ||
| xValues = _ref.xValues, | ||
| yValues = _ref.yValues; | ||
| var xLines = React.useMemo(function () { | ||
| if (!xScale) return false; | ||
| return computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: xScale, | ||
| axis: 'x', | ||
| values: xValues | ||
| }); | ||
| }, [xScale, xValues, width, height]); | ||
| var yLines = React.useMemo(function () { | ||
| if (!yScale) return false; | ||
| return computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: yScale, | ||
| axis: 'y', | ||
| values: yValues | ||
| }); | ||
| }, [height, width, yScale, yValues]); | ||
| return jsxRuntime.jsxs(jsxRuntime.Fragment, { | ||
| children: [xLines && jsxRuntime.jsx(GridLines, { | ||
| lines: xLines | ||
| }), yLines && jsxRuntime.jsx(GridLines, { | ||
| lines: yLines | ||
| })] | ||
| }); | ||
| }); | ||
| var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) { | ||
| var _theme$axis$domain$li; | ||
| var axis = _ref.axis, | ||
| scale = _ref.scale, | ||
| _ref$x = _ref.x, | ||
| x = _ref$x === void 0 ? 0 : _ref$x, | ||
| _ref$y = _ref.y, | ||
| y = _ref$y === void 0 ? 0 : _ref$y, | ||
| length = _ref.length, | ||
| ticksPosition = _ref.ticksPosition, | ||
| tickValues = _ref.tickValues, | ||
| _ref$tickSize = _ref.tickSize, | ||
| tickSize = _ref$tickSize === void 0 ? 5 : _ref$tickSize, | ||
| _ref$tickPadding = _ref.tickPadding, | ||
| tickPadding = _ref$tickPadding === void 0 ? 5 : _ref$tickPadding, | ||
| _ref$tickRotation = _ref.tickRotation, | ||
| tickRotation = _ref$tickRotation === void 0 ? 0 : _ref$tickRotation, | ||
| _format = _ref.format, | ||
| legend = _ref.legend, | ||
| _ref$legendPosition = _ref.legendPosition, | ||
| legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition, | ||
| _ref$legendOffset = _ref.legendOffset, | ||
| legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset, | ||
| theme = _ref.theme; | ||
| var _computeCartesianTick = computeCartesianTicks({ | ||
| axis: axis, | ||
| scale: scale, | ||
| ticksPosition: ticksPosition, | ||
| tickValues: tickValues, | ||
| tickSize: tickSize, | ||
| tickPadding: tickPadding, | ||
| tickRotation: tickRotation, | ||
| engine: 'canvas' | ||
| }), | ||
| ticks = _computeCartesianTick.ticks, | ||
| textAlign = _computeCartesianTick.textAlign, | ||
| textBaseline = _computeCartesianTick.textBaseline; | ||
| ctx.save(); | ||
| ctx.translate(x, y); | ||
| ctx.textAlign = textAlign; | ||
| ctx.textBaseline = textBaseline; | ||
| ctx.font = "".concat(theme.axis.ticks.text.fontWeight ? "".concat(theme.axis.ticks.text.fontWeight, " ") : '').concat(theme.axis.ticks.text.fontSize, "px ").concat(theme.axis.ticks.text.fontFamily); | ||
| if (((_theme$axis$domain$li = theme.axis.domain.line.strokeWidth) !== null && _theme$axis$domain$li !== void 0 ? _theme$axis$domain$li : 0) > 0) { | ||
| ctx.lineWidth = Number(theme.axis.domain.line.strokeWidth); | ||
| ctx.lineCap = 'square'; | ||
| if (theme.axis.domain.line.stroke) { | ||
| ctx.strokeStyle = theme.axis.domain.line.stroke; | ||
| } | ||
| ctx.beginPath(); | ||
| ctx.moveTo(0, 0); | ||
| ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length); | ||
| ctx.stroke(); | ||
| } | ||
| var format = typeof _format === 'function' ? _format : function (value) { | ||
| return "".concat(value); | ||
| }; | ||
| ticks.forEach(function (tick) { | ||
| var _theme$axis$ticks$lin; | ||
| if (((_theme$axis$ticks$lin = theme.axis.ticks.line.strokeWidth) !== null && _theme$axis$ticks$lin !== void 0 ? _theme$axis$ticks$lin : 0) > 0) { | ||
| ctx.lineWidth = Number(theme.axis.ticks.line.strokeWidth); | ||
| ctx.lineCap = 'square'; | ||
| if (theme.axis.ticks.line.stroke) { | ||
| ctx.strokeStyle = theme.axis.ticks.line.stroke; | ||
| } | ||
| ctx.beginPath(); | ||
| ctx.moveTo(tick.x, tick.y); | ||
| ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY); | ||
| ctx.stroke(); | ||
| } | ||
| var value = format(tick.value); | ||
| ctx.save(); | ||
| ctx.translate(tick.x + tick.textX, tick.y + tick.textY); | ||
| ctx.rotate(core.degreesToRadians(tickRotation)); | ||
| if (theme.axis.ticks.text.fill) { | ||
| ctx.fillStyle = theme.axis.ticks.text.fill; | ||
| } | ||
| ctx.fillText(String(value), 0, 0); | ||
| ctx.restore(); | ||
| }); | ||
| if (legend !== undefined) { | ||
| var legendX = 0; | ||
| var legendY = 0; | ||
| var legendRotation = 0; | ||
| var _textAlign = 'center'; | ||
| if (axis === 'y') { | ||
| legendRotation = -90; | ||
| legendX = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| _textAlign = 'start'; | ||
| legendY = length; | ||
| } else if (legendPosition === 'middle') { | ||
| _textAlign = 'center'; | ||
| legendY = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| _textAlign = 'end'; | ||
| } | ||
| } else { | ||
| legendY = legendOffset; | ||
| if (legendPosition === 'start') { | ||
| _textAlign = 'start'; | ||
| } else if (legendPosition === 'middle') { | ||
| _textAlign = 'center'; | ||
| legendX = length / 2; | ||
| } else if (legendPosition === 'end') { | ||
| _textAlign = 'end'; | ||
| legendX = length; | ||
| } | ||
| } | ||
| ctx.translate(legendX, legendY); | ||
| ctx.rotate(core.degreesToRadians(legendRotation)); | ||
| ctx.font = "".concat(theme.axis.legend.text.fontWeight ? "".concat(theme.axis.legend.text.fontWeight, " ") : '').concat(theme.axis.legend.text.fontSize, "px ").concat(theme.axis.legend.text.fontFamily); | ||
| if (theme.axis.legend.text.fill) { | ||
| ctx.fillStyle = theme.axis.legend.text.fill; | ||
| } | ||
| ctx.textAlign = _textAlign; | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.fillText(legend, 0, 0); | ||
| } | ||
| ctx.restore(); | ||
| }; | ||
| var renderAxesToCanvas = function renderAxesToCanvas(ctx, _ref2) { | ||
| var xScale = _ref2.xScale, | ||
| yScale = _ref2.yScale, | ||
| width = _ref2.width, | ||
| height = _ref2.height, | ||
| top = _ref2.top, | ||
| right = _ref2.right, | ||
| bottom = _ref2.bottom, | ||
| left = _ref2.left, | ||
| theme = _ref2.theme; | ||
| var axes = { | ||
| top: top, | ||
| right: right, | ||
| bottom: bottom, | ||
| left: left | ||
| }; | ||
| positions.forEach(function (position) { | ||
| var axis = axes[position]; | ||
| if (!axis) return null; | ||
| var isXAxis = position === 'top' || position === 'bottom'; | ||
| var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'; | ||
| var scale = isXAxis ? xScale : yScale; | ||
| var format = getFormatter(axis.format, scale); | ||
| renderAxisToCanvas(ctx, _objectSpread2(_objectSpread2({}, axis), {}, { | ||
| axis: isXAxis ? 'x' : 'y', | ||
| x: position === 'right' ? width : 0, | ||
| y: position === 'bottom' ? height : 0, | ||
| scale: scale, | ||
| format: format, | ||
| length: isXAxis ? width : height, | ||
| ticksPosition: ticksPosition, | ||
| theme: theme | ||
| })); | ||
| }); | ||
| }; | ||
| var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) { | ||
| var width = _ref3.width, | ||
| height = _ref3.height, | ||
| scale = _ref3.scale, | ||
| axis = _ref3.axis, | ||
| values = _ref3.values; | ||
| var lines = computeGridLines({ | ||
| width: width, | ||
| height: height, | ||
| scale: scale, | ||
| axis: axis, | ||
| values: values | ||
| }); | ||
| lines.forEach(function (line) { | ||
| ctx.beginPath(); | ||
| ctx.moveTo(line.x1, line.y1); | ||
| ctx.lineTo(line.x2, line.y2); | ||
| ctx.stroke(); | ||
| }); | ||
| }; | ||
| exports.Axes = Axes; | ||
| exports.Axis = memoizedAxis; | ||
| exports.AxisTick = memoizedAxisTick; | ||
| exports.Grid = Grid; | ||
| exports.GridLine = GridLine; | ||
| exports.GridLines = GridLines; | ||
| exports.axisPropType = axisPropType; | ||
| exports.axisPropTypes = axisPropTypes; | ||
| exports.positions = positions; | ||
| exports.renderAxesToCanvas = renderAxesToCanvas; | ||
| exports.renderAxisToCanvas = renderAxisToCanvas; | ||
| exports.renderGridLinesToCanvas = renderGridLinesToCanvas; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| }))); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@react-spring/web"),require("@nivo/core"),require("d3-time-format"),require("d3-format"),require("@nivo/scales"),require("react/jsx-runtime"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","@react-spring/web","@nivo/core","d3-time-format","d3-format","@nivo/scales","react/jsx-runtime","prop-types"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).nivo=e.nivo||{},e.React,e["@react-spring/web"],e.nivo,e.d3,e.d3,e.nivo,e["react/jsx-runtime"],e.PropTypes)}(this,(function(e,t,i,n,r,a,o,s,l){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var u=f(t),d=c(l);function x(){return x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},x.apply(this,arguments)}var m=function(e){var t,i=e.axis,r=e.scale,a=e.ticksPosition,s=e.tickValues,l=e.tickSize,c=e.tickPadding,f=e.tickRotation,u=e.engine,d=void 0===u?"svg":u,m=o.getScaleTicks(r,s),y=n.textPropsByEngine[d],g="bandwidth"in r?o.centerScale(r):r,v={lineX:0,lineY:0},p={textX:0,textY:0},h="object"==typeof document&&"rtl"===document.dir,k=y.align.center,b=y.baseline.center;return"x"===i?(t=function(e){var t;return{x:null!=(t=g(e))?t:0,y:0}},v.lineY=l*("after"===a?1:-1),p.textY=(l+c)*("after"===a?1:-1),b="after"===a?y.baseline.top:y.baseline.bottom,0===f?k=y.align.center:"after"===a&&f<0||"before"===a&&f>0?(k=y.align[h?"left":"right"],b=y.baseline.center):("after"===a&&f>0||"before"===a&&f<0)&&(k=y.align[h?"right":"left"],b=y.baseline.center)):(t=function(e){var t;return{x:0,y:null!=(t=g(e))?t:0}},v.lineX=l*("after"===a?1:-1),p.textX=(l+c)*("after"===a?1:-1),k="after"===a?y.align.left:y.align.right),{ticks:m.map((function(e){return x({key:"number"==typeof e||"string"==typeof e?e:""+e,value:e},t(e),v,p)})),textAlign:k,textBaseline:b}},y=function(e,t){if(void 0===e||"function"==typeof e)return e;if("time"===t.type){var i=r.timeFormat(e);return function(e){return i(e instanceof Date?e:new Date(e))}}return a.format(e)},g=function(e){var t,i=e.width,n=e.height,r=e.scale,a=e.axis,s=e.values,l=(t=s,Array.isArray(t)?s:void 0)||o.getScaleTicks(r,s),c="bandwidth"in r?o.centerScale(r):r,f="x"===a?l.map((function(e){var t,i;return{key:""+e,x1:null!=(t=c(e))?t:0,x2:null!=(i=c(e))?i:0,y1:0,y2:n}})):l.map((function(e){var t,n;return{key:""+e,x1:0,x2:i,y1:null!=(t=c(e))?t:0,y2:null!=(n=c(e))?n:0}}));return f},v=t.memo((function(e){var r,a=e.value,o=e.format,l=e.lineX,c=e.lineY,f=e.onClick,u=e.textBaseline,d=e.textAnchor,m=e.animatedProps,y=n.useTheme(),g=null!=(r=null==o?void 0:o(a))?r:a,v=t.useMemo((function(){var e={opacity:m.opacity};return f?{style:x({},e,{cursor:"pointer"}),onClick:function(e){return f(e,g)}}:{style:e}}),[m.opacity,f,g]);return s.jsxs(i.animated.g,x({transform:m.transform},v,{children:[s.jsx("line",{x1:0,x2:l,y1:0,y2:c,style:y.axis.ticks.line}),s.jsx(i.animated.text,{dominantBaseline:u,textAnchor:d,transform:m.textTransform,style:y.axis.ticks.text,children:g})]}))})),p=t.memo((function(e){var r=e.axis,a=e.scale,o=e.x,l=void 0===o?0:o,c=e.y,f=void 0===c?0:c,d=e.length,g=e.ticksPosition,p=e.tickValues,h=e.tickSize,k=void 0===h?5:h,b=e.tickPadding,T=void 0===b?5:b,P=e.tickRotation,j=void 0===P?0:P,S=e.format,O=e.renderTick,w=void 0===O?v:O,A=e.legend,X=e.legendPosition,Y=void 0===X?"end":X,C=e.legendOffset,q=void 0===C?0:C,B=e.onClick,W=e.ariaHidden,z=n.useTheme(),R=t.useMemo((function(){return y(S,a)}),[S,a]),M=m({axis:r,scale:a,ticksPosition:g,tickValues:p,tickSize:k,tickPadding:T,tickRotation:j}),V=M.ticks,E=M.textAlign,F=M.textBaseline,D=null;if(void 0!==A){var G,_=0,L=0,H=0;"y"===r?(H=-90,_=q,"start"===Y?(G="start",L=d):"middle"===Y?(G="middle",L=d/2):"end"===Y&&(G="end")):(L=q,"start"===Y?G="start":"middle"===Y?(G="middle",_=d/2):"end"===Y&&(G="end",_=d)),D=s.jsx("text",{transform:"translate("+_+", "+L+") rotate("+H+")",textAnchor:G,style:x({dominantBaseline:"central"},z.axis.legend.text),children:A})}var N=n.useMotionConfig(),I=N.animate,J=N.config,K=i.useSpring({transform:"translate("+l+","+f+")",lineX2:"x"===r?d:0,lineY2:"x"===r?0:d,config:J,immediate:!I}),Q=i.useTransition(V,{keys:function(e){return e.key},initial:function(e){return{opacity:1,transform:"translate("+e.x+","+e.y+")",textTransform:"translate("+e.textX+","+e.textY+") rotate("+j+")"}},from:function(e){return{opacity:0,transform:"translate("+e.x+","+e.y+")",textTransform:"translate("+e.textX+","+e.textY+") rotate("+j+")"}},enter:function(e){return{opacity:1,transform:"translate("+e.x+","+e.y+")",textTransform:"translate("+e.textX+","+e.textY+") rotate("+j+")"}},update:function(e){return{opacity:1,transform:"translate("+e.x+","+e.y+")",textTransform:"translate("+e.textX+","+e.textY+") rotate("+j+")"}},leave:{opacity:0},config:J,immediate:!I});return s.jsxs(i.animated.g,{transform:K.transform,"aria-hidden":W,children:[Q((function(e,t,i,n){return u.createElement(w,x({tickIndex:n,format:R,rotate:j,textBaseline:F,textAnchor:E,animatedProps:e},t,B?{onClick:B}:{}))})),s.jsx(i.animated.line,{style:z.axis.domain.line,x1:0,x2:K.lineX2,y1:0,y2:K.lineY2}),D]})})),h={ticksPosition:d.default.oneOf(["before","after"]),tickValues:d.default.oneOfType([d.default.number,d.default.arrayOf(d.default.oneOfType([d.default.number,d.default.string,d.default.instanceOf(Date)])),d.default.string]),tickSize:d.default.number,tickPadding:d.default.number,tickRotation:d.default.number,format:d.default.oneOfType([d.default.func,d.default.string]),renderTick:d.default.func,legend:d.default.node,legendPosition:d.default.oneOf(["start","middle","end"]),legendOffset:d.default.number,ariaHidden:d.default.bool},k=d.default.shape(h),b=["top","right","bottom","left"],T=t.memo((function(e){var t=e.xScale,i=e.yScale,n=e.width,r=e.height,a={top:e.top,right:e.right,bottom:e.bottom,left:e.left};return s.jsx(s.Fragment,{children:b.map((function(e){var o=a[e];if(!o)return null;var l="top"===e||"bottom"===e,c="top"===e||"left"===e?"before":"after";return s.jsx(p,x({},o,{axis:l?"x":"y",x:"right"===e?n:0,y:"bottom"===e?r:0,scale:l?t:i,length:l?n:r,ticksPosition:c}),e)}))})})),P=t.memo((function(e){var t=e.animatedProps,r=n.useTheme();return s.jsx(i.animated.line,x({},t,r.grid.line))})),j=t.memo((function(e){var r=e.lines,a=n.useMotionConfig(),o=a.animate,l=a.config,c=i.useTransition(r,{keys:function(e){return e.key},initial:function(e){return{opacity:1,x1:e.x1,x2:e.x2,y1:e.y1,y2:e.y2}},from:function(e){return{opacity:0,x1:e.x1,x2:e.x2,y1:e.y1,y2:e.y2}},enter:function(e){return{opacity:1,x1:e.x1,x2:e.x2,y1:e.y1,y2:e.y2}},update:function(e){return{opacity:1,x1:e.x1,x2:e.x2,y1:e.y1,y2:e.y2}},leave:{opacity:0},config:l,immediate:!o});return s.jsx("g",{children:c((function(e,i){return t.createElement(P,x({},i,{key:i.key,animatedProps:e}))}))})})),S=t.memo((function(e){var i=e.width,n=e.height,r=e.xScale,a=e.yScale,o=e.xValues,l=e.yValues,c=t.useMemo((function(){return!!r&&g({width:i,height:n,scale:r,axis:"x",values:o})}),[r,o,i,n]),f=t.useMemo((function(){return!!a&&g({width:i,height:n,scale:a,axis:"y",values:l})}),[n,i,a,l]);return s.jsxs(s.Fragment,{children:[c&&s.jsx(j,{lines:c}),f&&s.jsx(j,{lines:f})]})})),O=function(e,t){var i,r=t.axis,a=t.scale,o=t.x,s=void 0===o?0:o,l=t.y,c=void 0===l?0:l,f=t.length,u=t.ticksPosition,d=t.tickValues,x=t.tickSize,y=void 0===x?5:x,g=t.tickPadding,v=void 0===g?5:g,p=t.tickRotation,h=void 0===p?0:p,k=t.format,b=t.legend,T=t.legendPosition,P=void 0===T?"end":T,j=t.legendOffset,S=void 0===j?0:j,O=t.theme,w=m({axis:r,scale:a,ticksPosition:u,tickValues:d,tickSize:y,tickPadding:v,tickRotation:h,engine:"canvas"}),A=w.ticks,X=w.textAlign,Y=w.textBaseline;e.save(),e.translate(s,c),e.textAlign=X,e.textBaseline=Y,e.font=(O.axis.ticks.text.fontWeight?O.axis.ticks.text.fontWeight+" ":"")+O.axis.ticks.text.fontSize+"px "+O.axis.ticks.text.fontFamily,(null!=(i=O.axis.domain.line.strokeWidth)?i:0)>0&&(e.lineWidth=Number(O.axis.domain.line.strokeWidth),e.lineCap="square",O.axis.domain.line.stroke&&(e.strokeStyle=O.axis.domain.line.stroke),e.beginPath(),e.moveTo(0,0),e.lineTo("x"===r?f:0,"x"===r?0:f),e.stroke());var C="function"==typeof k?k:function(e){return""+e};if(A.forEach((function(t){var i;(null!=(i=O.axis.ticks.line.strokeWidth)?i:0)>0&&(e.lineWidth=Number(O.axis.ticks.line.strokeWidth),e.lineCap="square",O.axis.ticks.line.stroke&&(e.strokeStyle=O.axis.ticks.line.stroke),e.beginPath(),e.moveTo(t.x,t.y),e.lineTo(t.x+t.lineX,t.y+t.lineY),e.stroke());var r=C(t.value);e.save(),e.translate(t.x+t.textX,t.y+t.textY),e.rotate(n.degreesToRadians(h)),O.axis.ticks.text.fill&&(e.fillStyle=O.axis.ticks.text.fill),e.fillText(String(r),0,0),e.restore()})),void 0!==b){var q=0,B=0,W=0,z="center";"y"===r?(W=-90,q=S,"start"===P?(z="start",B=f):"middle"===P?(z="center",B=f/2):"end"===P&&(z="end")):(B=S,"start"===P?z="start":"middle"===P?(z="center",q=f/2):"end"===P&&(z="end",q=f)),e.translate(q,B),e.rotate(n.degreesToRadians(W)),e.font=(O.axis.legend.text.fontWeight?O.axis.legend.text.fontWeight+" ":"")+O.axis.legend.text.fontSize+"px "+O.axis.legend.text.fontFamily,O.axis.legend.text.fill&&(e.fillStyle=O.axis.legend.text.fill),e.textAlign=z,e.textBaseline="middle",e.fillText(b,0,0)}e.restore()};e.Axes=T,e.Axis=p,e.AxisTick=v,e.Grid=S,e.GridLine=P,e.GridLines=j,e.axisPropType=k,e.axisPropTypes=h,e.positions=b,e.renderAxesToCanvas=function(e,t){var i=t.xScale,n=t.yScale,r=t.width,a=t.height,o=t.top,s=t.right,l=t.bottom,c=t.left,f=t.theme,u={top:o,right:s,bottom:l,left:c};b.forEach((function(t){var o=u[t];if(!o)return null;var s="top"===t||"bottom"===t,l="top"===t||"left"===t?"before":"after",c=s?i:n,d=y(o.format,c);O(e,x({},o,{axis:s?"x":"y",x:"right"===t?r:0,y:"bottom"===t?a:0,scale:c,format:d,length:s?r:a,ticksPosition:l,theme:f}))}))},e.renderAxisToCanvas=O,e.renderGridLinesToCanvas=function(e,t){var i=t.width,n=t.height,r=t.scale,a=t.axis,o=t.values;g({width:i,height:n,scale:r,axis:a,values:o}).forEach((function(t){e.beginPath(),e.moveTo(t.x1,t.y1),e.lineTo(t.x2,t.y2),e.stroke()}))},Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| //# sourceMappingURL=nivo-axes.umd.js.map |
| import PropTypes from 'prop-types'; | ||
| export declare const axisPropTypes: { | ||
| ticksPosition: PropTypes.Requireable<string>; | ||
| tickValues: PropTypes.Requireable<string | number | (string | number | Date | null)[]>; | ||
| tickValues: PropTypes.Requireable<string | number | (string | number | Date | null | undefined)[]>; | ||
| tickSize: PropTypes.Requireable<number>; | ||
@@ -17,3 +17,3 @@ tickPadding: PropTypes.Requireable<number>; | ||
| ticksPosition: PropTypes.Requireable<string>; | ||
| tickValues: PropTypes.Requireable<string | number | (string | number | Date | null)[]>; | ||
| tickValues: PropTypes.Requireable<string | number | (string | number | Date | null | undefined)[]>; | ||
| tickSize: PropTypes.Requireable<number>; | ||
@@ -20,0 +20,0 @@ tickPadding: PropTypes.Requireable<number>; |
| { | ||
| "name": "@nivo/axes", | ||
| "version": "0.74.1", | ||
| "version": "0.75.0", | ||
| "license": "MIT", | ||
@@ -30,3 +30,3 @@ "author": { | ||
| "dependencies": { | ||
| "@nivo/scales": "0.74.0", | ||
| "@nivo/scales": "0.75.0", | ||
| "@react-spring/web": "9.3.1", | ||
@@ -37,3 +37,3 @@ "d3-format": "^1.4.4", | ||
| "devDependencies": { | ||
| "@nivo/core": "0.74.1", | ||
| "@nivo/core": "0.75.0", | ||
| "@types/d3-format": "^1.4.1", | ||
@@ -43,3 +43,3 @@ "@types/d3-time-format": "^2.3.1" | ||
| "peerDependencies": { | ||
| "@nivo/core": "0.74.1", | ||
| "@nivo/core": "0.75.0", | ||
| "prop-types": ">= 15.5.10 < 16.0.0", | ||
@@ -51,3 +51,3 @@ "react": ">= 16.14.0 < 18.0.0" | ||
| }, | ||
| "gitHead": "4ae8bc60779cb9bb8cb14b16726819217da16133" | ||
| "gitHead": "bfe8126876bf0e46ad82251935ab78178e901bcf" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-36.56%
157790
- Lines of code
- decreased by-85.41%
340
- Number of low quality alerts
- increased by100%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@nivo/core@0.75.0(transitive)
+ Added@nivo/recompose@0.75.0(transitive)
+ Added@nivo/scales@0.75.0(transitive)
+ Added@nivo/tooltip@0.75.0(transitive)
- Removed@nivo/core@0.74.1(transitive)
- Removed@nivo/recompose@0.74.0(transitive)
- Removed@nivo/scales@0.74.0(transitive)
- Removed@nivo/tooltip@0.74.1(transitive)
Updated@nivo/scales@0.75.0