UNPKG

@lobehub/charts

Version:

React modern charts components built on recharts

507 lines (505 loc) 30.7 kB
'use client'; function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } var _templateObject, _templateObject2, _templateObject3; var _excluded = ["data", "evolutionGradient", "gradient", "valueFormatter", "calculateFrom", "color", "variant", "showGridLines", "showYAxis", "showXAxis", "showArrow", "xAxisLabel", "yAxisLabel", "yAxisAlign", "showTooltip", "onValueChange", "customTooltip", "noDataText", "rotateLabelX", "barGap", "loading", "width", "height", "className", "style", "yAxisWidth"]; function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); } function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } import { useSize } from 'ahooks'; import { Skeleton } from 'antd'; import { css } from 'antd-style'; import { Fragment, forwardRef, useEffect, useMemo, useRef, useState } from 'react'; import { Flexbox } from 'react-layout-kit'; import ArrowRightIcon from "./ArrowRightIcon"; import ChartTooltip from "../common/ChartTooltip"; import NoData from "../common/NoData"; import { useThemeColorRange } from "../hooks/useThemeColorRange"; import { defaultValueFormatter } from "../utils"; import { getMaxLabelLength } from "../utils/getMaxLabelLength"; import { useStyles } from "./styles"; import { jsx as _jsx } from "react/jsx-runtime"; import { jsxs as _jsxs } from "react/jsx-runtime"; import { Fragment as _Fragment } from "react/jsx-runtime"; var GLOBAL_PADDING = 10; var HALF_PADDING = GLOBAL_PADDING / 2; var Y_AXIS_LABELS = ['100%', '75%', '50%', '25%', '0%']; var validateData = function validateData(data, calculatedFrom) { if (data && data.length > 0) { if (calculatedFrom === 'previous' && data[0].value <= 0) { return "The value of the first item \"".concat(data[0].name, "\" is not greater than 0. This is not allowed when setting the \"calculateFrom\" prop to \"previous\". Please enter a value greater than 0."); } var _iterator = _createForOfIteratorHelper(data), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var item = _step.value; if (item.value < 0) { return "Item \"".concat(item.name, "\" has a negative value: ").concat(item.value, ". This is not allowed. The value must be greater than or equal to 0."); } } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } } return null; }; var FunnelChart = /*#__PURE__*/forwardRef(function (props, ref) { var _tooltip$data, _tooltip$data$name, _tooltip$data2, _tooltip$data$color, _tooltip$data3, _tooltip$data4; var _useStyles = useStyles(), cx = _useStyles.cx, theme = _useStyles.theme, styles = _useStyles.styles; var themeColorRange = useThemeColorRange(); var _props$data = props.data, data = _props$data === void 0 ? [] : _props$data, _props$evolutionGradi = props.evolutionGradient, evolutionGradient = _props$evolutionGradi === void 0 ? true : _props$evolutionGradi, _props$gradient = props.gradient, gradient = _props$gradient === void 0 ? false : _props$gradient, _props$valueFormatter = props.valueFormatter, valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter, _props$calculateFrom = props.calculateFrom, calculateFrom = _props$calculateFrom === void 0 ? 'first' : _props$calculateFrom, _props$color = props.color, color = _props$color === void 0 ? themeColorRange[0] : _props$color, _props$variant = props.variant, variant = _props$variant === void 0 ? 'base' : _props$variant, _props$showGridLines = props.showGridLines, showGridLines = _props$showGridLines === void 0 ? true : _props$showGridLines, _props$showYAxis = props.showYAxis, showYAxis = _props$showYAxis === void 0 ? calculateFrom === 'previous' ? false : true : _props$showYAxis, _props$showXAxis = props.showXAxis, showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis, _props$showArrow = props.showArrow, showArrow = _props$showArrow === void 0 ? true : _props$showArrow, _props$xAxisLabel = props.xAxisLabel, xAxisLabel = _props$xAxisLabel === void 0 ? '' : _props$xAxisLabel, _props$yAxisLabel = props.yAxisLabel, yAxisLabel = _props$yAxisLabel === void 0 ? '' : _props$yAxisLabel, _props$yAxisAlign = props.yAxisAlign, yAxisAlign = _props$yAxisAlign === void 0 ? 'left' : _props$yAxisAlign, _props$showTooltip = props.showTooltip, showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip, onValueChange = props.onValueChange, customTooltip = props.customTooltip, noDataText = props.noDataText, rotateLabelX = props.rotateLabelX, _props$barGap = props.barGap, barGap = _props$barGap === void 0 ? '20%' : _props$barGap, loading = props.loading, _props$width = props.width, width = _props$width === void 0 ? '100%' : _props$width, _props$height = props.height, height = _props$height === void 0 ? 280 : _props$height, className = props.className, style = props.style, yAxisWidth = props.yAxisWidth, rest = _objectWithoutProperties(props, _excluded); var svgRef = useRef(ref); var size = useSize(svgRef); var tooltipRef = useRef(null); var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), svgWidth = _useState2[0], setSvgWidth = _useState2[1]; var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), svgHeight = _useState4[0], setSvgHeight = _useState4[1]; var _useState5 = useState({ x: 0, y: 0 }), _useState6 = _slicedToArray(_useState5, 2), tooltip = _useState6[0], setTooltip = _useState6[1]; var _useState7 = useState(), _useState8 = _slicedToArray(_useState7, 2), activeBar = _useState8[0], setActiveBar = _useState8[1]; var DEFAULT_X_AXIS_HEIGHT = showXAxis && xAxisLabel ? 25 : 15; var CustomTooltip = customTooltip; var calculatedYAxisWidth = useMemo(function () { if (yAxisWidth) return yAxisWidth; return getMaxLabelLength({ data: data, index: 'value', valueFormatter: valueFormatter }) / 4 + (yAxisLabel ? 24 : 0); }, [yAxisWidth, data, valueFormatter, yAxisLabel]); useEffect(function () { var handleResize = function handleResize() { setSvgWidth((size === null || size === void 0 ? void 0 : size.width) || 0); setSvgHeight((size === null || size === void 0 ? void 0 : size.height) || 0); }; handleResize(); }, [size]); useEffect(function () { var handleTooltipOverflows = function handleTooltipOverflows() { if (tooltipRef.current) { var boundingBox = tooltipRef.current.getBoundingClientRect(); if (boundingBox.right > window.innerWidth) { tooltipRef.current.style.left = "".concat(svgWidth - boundingBox.width, "px"); } } }; handleTooltipOverflows(); window.addEventListener('resize', handleTooltipOverflows); return function () { return window.removeEventListener('resize', handleTooltipOverflows); }; }, [tooltip, svgWidth]); var maxValue = useMemo(function () { return Math.max.apply(Math, _toConsumableArray(data.map(function (item) { return item.value; }))); }, [data]); var widthWithoutPadding = svgWidth - GLOBAL_PADDING - calculatedYAxisWidth; var gap = useMemo(function () { if (typeof barGap === 'number') { return barGap; } else if (typeof barGap === 'string' && barGap.endsWith('%')) { var percentage = Number.parseFloat(barGap.slice(0, -1)); var totalWidthForGaps = widthWithoutPadding * percentage / 100; var numberOfGaps = data.length - 1; return totalWidthForGaps / numberOfGaps; } else { console.error('Invalid barGap value. It must be a number or a percentage string (e.g., "10%").'); return 30; } }, [widthWithoutPadding, data.length, barGap]); var barWidth = useMemo(function () { return (widthWithoutPadding - (data.length - 1) * gap - gap) / data.length; }, [widthWithoutPadding, gap, data.length]); var realHeight = svgHeight - GLOBAL_PADDING - (showXAxis ? ((rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.xAxisHeight) || DEFAULT_X_AXIS_HEIGHT) + (showXAxis && xAxisLabel ? 30 : 10) : 0); var isPreviousCalculation = calculateFrom === 'previous'; var isVariantCenter = variant === 'center'; var formattedData = useMemo(function () { if (realHeight <= 0) return []; return data.reduce(function (acc, item, index) { var _prev$value, _prev$barHeight, _prev$barHeight2, _data; var prev = acc[index - 1]; var value = item.value; var valueToCompareWith = isPreviousCalculation ? (_prev$value = prev === null || prev === void 0 ? void 0 : prev.value) !== null && _prev$value !== void 0 ? _prev$value : maxValue : maxValue; var calculationHeight = isPreviousCalculation ? (_prev$barHeight = prev === null || prev === void 0 ? void 0 : prev.barHeight) !== null && _prev$barHeight !== void 0 ? _prev$barHeight : realHeight : realHeight; var normalizedValue = value / valueToCompareWith; var barHeight = normalizedValue * calculationHeight; var startX = index * (barWidth + gap) + 0.5 * gap; var startY = calculationHeight - barHeight + (isPreviousCalculation ? realHeight - ((_prev$barHeight2 = prev === null || prev === void 0 ? void 0 : prev.barHeight) !== null && _prev$barHeight2 !== void 0 ? _prev$barHeight2 : realHeight) : 0); var nextValue = (_data = data[index + 1]) === null || _data === void 0 ? void 0 : _data.value; var nextNormalizedValue = nextValue / valueToCompareWith; var nextBarHeight = nextNormalizedValue * calculationHeight; var nextStartX = (index + 1) * (barWidth + gap) + 0.5 * gap; acc.push({ barHeight: barHeight, name: item.name, nextBarHeight: nextBarHeight, nextNormalizedValue: nextNormalizedValue, nextStartX: nextStartX, nextValue: nextValue, normalizedValue: normalizedValue, startX: startX, startY: startY, value: value }); return acc; }, []); }, [data, realHeight, isPreviousCalculation, barWidth, gap, maxValue]); var handleTooltip = function handleTooltip(touch) { var _svgRef$current; var chartBoundingRect = (_svgRef$current = svgRef.current) === null || _svgRef$current === void 0 ? void 0 : _svgRef$current.getBoundingClientRect(); if (!chartBoundingRect) return; var chartX = chartBoundingRect.x; if (formattedData.length === 0) { return setTooltip({ x: 0, y: 0 }); } var pageX = touch.pageX - chartX - barWidth / 2 - calculatedYAxisWidth - HALF_PADDING; var closestBar = formattedData.reduce(function (acc, current) { var currentDistance = Math.abs(current.startX - pageX); var accDistance = Math.abs(acc.startX - pageX); return currentDistance < accDistance ? current : acc; }, formattedData[0]); // 提供初始值 var closestBarIndex = formattedData.indexOf(closestBar); setTooltip({ data: { className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: ", ";\n color: ", ";\n "])), onValueChange ? 'pointer' : undefined, color !== null && color !== void 0 ? color : theme.colorPrimary)), color: color !== null && color !== void 0 ? color : theme.colorPrimary, dataKey: closestBar.name, fill: '', name: closestBar.name, payload: closestBar, value: closestBar.value }, index: closestBarIndex, x: closestBar.startX, y: closestBar.startY }); }; if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, { active: true, block: true, style: { height: height, width: width } }); var errorMessage = data ? validateData(data, calculateFrom) : null; if (errorMessage) { return /*#__PURE__*/_jsx(NoData, { noDataText: errorMessage }); } var onBarClick = function onBarClick(data, idx, event) { event.stopPropagation(); if (!onValueChange) return; if (idx === (activeBar === null || activeBar === void 0 ? void 0 : activeBar.index)) { setActiveBar(undefined); onValueChange === null || onValueChange === void 0 || onValueChange(null); } else { setActiveBar({ data: data, index: idx }); onValueChange === null || onValueChange === void 0 || onValueChange(_objectSpread({ categoryClicked: data.name, eventType: 'bar' }, data)); } }; return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({ className: className, height: height, ref: svgRef, style: _objectSpread({ position: 'relative' }, style), width: width }, rest), {}, { children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(_Fragment, { children: [/*#__PURE__*/_jsxs("svg", { onMouseLeave: function onMouseLeave() { return setTooltip({ x: 0, y: 0 }); }, onMouseMove: function onMouseMove(e) { var fakeTouch = { clientX: e.clientX, clientY: e.clientY, pageX: e.pageX, pageY: e.pageY }; handleTooltip(fakeTouch); }, onTouchEnd: function onTouchEnd() { return setTooltip({ x: 0, y: 0 }); }, onTouchMove: function onTouchMove(e) { var touch = e.touches[0]; handleTooltip(touch); }, style: { height: '100%', width: '100%' }, xmlns: "http://www.w3.org/2000/svg", children: [Y_AXIS_LABELS.map(function (label, index) { return /*#__PURE__*/_jsxs(Fragment, { children: [showGridLines && /*#__PURE__*/_jsx("line", { className: styles.gridLines, x1: calculatedYAxisWidth + HALF_PADDING, x2: svgWidth - HALF_PADDING, y1: index * realHeight / 4 + HALF_PADDING, y2: index * realHeight / 4 + HALF_PADDING }), /*#__PURE__*/_jsx("text", { className: styles.label, textAnchor: yAxisAlign === 'left' ? 'start' : 'end', x: yAxisAlign === 'left' ? yAxisLabel ? 24 : 0 : calculatedYAxisWidth - 10 + HALF_PADDING, y: index * realHeight / 4 + 5 + HALF_PADDING, children: label })] }, "y-axis-".concat(index)); }), formattedData.map(function (item, index) { var _formattedData, _formattedData2; return /*#__PURE__*/_jsxs("g", { children: [/*#__PURE__*/_jsx("rect", { height: realHeight, style: { fill: tooltip.index === index ? theme.colorFillTertiary : 'transparent', zIndex: 0 }, width: barWidth + gap, x: item.startX - gap * 0.5 + HALF_PADDING + calculatedYAxisWidth, y: HALF_PADDING }), gradient && /*#__PURE__*/_jsx("rect", { fill: "url(#base-gradient)", height: (realHeight - item.barHeight - (isPreviousCalculation ? realHeight - ((_formattedData = formattedData[index - 1]) === null || _formattedData === void 0 ? void 0 : _formattedData.barHeight) || 0 : 0)) / (isVariantCenter ? 2 : 1), style: { opacity: activeBar && activeBar.index !== index ? 0.3 : 1 }, width: barWidth, x: item.startX + HALF_PADDING + calculatedYAxisWidth, y: realHeight - (isPreviousCalculation ? ((_formattedData2 = formattedData[index - 1]) === null || _formattedData2 === void 0 ? void 0 : _formattedData2.barHeight) || realHeight : realHeight) + HALF_PADDING }), /*#__PURE__*/_jsx("rect", { height: item.barHeight, onClick: function onClick(e) { return onBarClick(item, index, e); }, style: { cursor: onValueChange ? 'pointer' : undefined, fill: color !== null && color !== void 0 ? color : theme.colorPrimary, opacity: activeBar && activeBar.index !== index ? 0.3 : 1 }, width: barWidth, x: item.startX + HALF_PADDING + calculatedYAxisWidth, y: (isVariantCenter ? realHeight / 2 - item.barHeight / 2 : item.startY) + HALF_PADDING }), gradient && isVariantCenter && /*#__PURE__*/_jsx("rect", { fill: "url(#base-gradient-revert)", height: (realHeight - item.barHeight) / 2, style: { opacity: activeBar && activeBar.index !== index ? 0.3 : 1 }, width: barWidth, x: item.startX + HALF_PADDING + calculatedYAxisWidth, y: realHeight / 2 + item.barHeight / 2 + HALF_PADDING }), showXAxis && /*#__PURE__*/_jsx("foreignObject", { height: (rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.xAxisHeight) || DEFAULT_X_AXIS_HEIGHT, transform: rotateLabelX ? "rotate(".concat(rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.angle, ", ").concat(item.startX + barWidth / 2 + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight + ((rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.xAxisHeight) || DEFAULT_X_AXIS_HEIGHT) / 2 + HALF_PADDING + ((rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.verticalShift) || 0), ")") : undefined, width: barWidth, x: item.startX + HALF_PADDING + calculatedYAxisWidth, y: realHeight + HALF_PADDING + 10, children: /*#__PURE__*/_jsx("div", { className: cx(styles.strongLabel, styles.emphasis), title: item.name, children: item.name }) })] }, "bar-".concat(index)); }), formattedData.map(function (item, index) { return /*#__PURE__*/_jsxs(Fragment, { children: [index < data.length - 1 && evolutionGradient && (isVariantCenter ? /*#__PURE__*/_jsxs(_Fragment, { children: [/*#__PURE__*/_jsx("polygon", { fill: "url(#base-gradient)", points: "\n ".concat(item.startX + barWidth + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight / 2 + item.nextBarHeight / 4 + HALF_PADDING, "\n ").concat(item.nextStartX + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight / 2 + item.nextBarHeight / 4 + HALF_PADDING, "\n ").concat(item.nextStartX + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight / 2 - item.nextBarHeight / 2 + HALF_PADDING, "\n ").concat(item.startX + barWidth + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight / 2 - item.barHeight / 2 + HALF_PADDING, "\n "), style: { opacity: activeBar && activeBar.index !== index ? 0.3 : 1, zIndex: 10 } }), /*#__PURE__*/_jsx("polygon", { fill: "url(#base-gradient-revert)", points: "\n ".concat(item.startX + barWidth + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight / 2 + item.barHeight / 2 + HALF_PADDING, "\n ").concat(item.nextStartX + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight / 2 + item.nextBarHeight / 2 + HALF_PADDING, "\n ").concat(item.nextStartX + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight / 2 - item.nextBarHeight / 4 + HALF_PADDING, "\n ").concat(item.startX + barWidth + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight / 2 - item.nextBarHeight / 4 + HALF_PADDING, "\n "), style: { opacity: activeBar && activeBar.index !== index ? 0.3 : 1, zIndex: 10 } })] }) : /*#__PURE__*/_jsx("polygon", { fill: "url(#base-gradient)", points: "\n ".concat(item.startX + barWidth + HALF_PADDING + calculatedYAxisWidth, ", ").concat(item.startY + HALF_PADDING, "\n ").concat(item.nextStartX + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight - item.nextBarHeight + HALF_PADDING, "\n ").concat(item.nextStartX + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight + HALF_PADDING, "\n ").concat(item.startX + barWidth + HALF_PADDING + calculatedYAxisWidth, ", ").concat(realHeight + HALF_PADDING, "\n "), style: { opacity: activeBar && activeBar.index !== index ? 0.3 : 1, zIndex: 10 } })), index < data.length - 1 && showXAxis && showArrow && gap >= 14 && /*#__PURE__*/_jsx("foreignObject", { height: (rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.xAxisHeight) || DEFAULT_X_AXIS_HEIGHT, width: 12, x: item.startX + barWidth + HALF_PADDING + calculatedYAxisWidth - 6 + gap / 2, y: realHeight + HALF_PADDING + 11, children: /*#__PURE__*/_jsx(ArrowRightIcon, {}) })] }, "gradient-".concat(index)); }), /*#__PURE__*/_jsxs("linearGradient", { className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n stop {\n stop-color: ", ";\n }\n "])), color !== null && color !== void 0 ? color : theme.colorPrimary)), id: 'base-gradient', x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [/*#__PURE__*/_jsx("stop", { offset: "5%", stopOpacity: 0.4 }), /*#__PURE__*/_jsx("stop", { offset: "95%", stopOpacity: 0 })] }), /*#__PURE__*/_jsxs("linearGradient", { className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n stop {\n stop-color: ", ";\n }\n "])), color !== null && color !== void 0 ? color : theme.colorPrimary)), id: 'base-gradient-revert', x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [/*#__PURE__*/_jsx("stop", { offset: "5%", stopOpacity: 0 }), /*#__PURE__*/_jsx("stop", { offset: "95%", stopOpacity: 0.4 })] }), showXAxis && xAxisLabel && /*#__PURE__*/_jsx("text", { className: cx(styles.strongLabel, styles.emphasis), x: svgWidth / 2 + calculatedYAxisWidth / 2, y: realHeight + HALF_PADDING + 50, children: xAxisLabel }), showYAxis && yAxisLabel && /*#__PURE__*/_jsx("text", { className: cx(styles.strongLabel, styles.emphasis), transform: "rotate(-90, 0, ".concat(realHeight / 2, ")"), x: -5, y: realHeight / 2 + 10, children: yAxisLabel })] }), showTooltip && /*#__PURE__*/_jsx("div", { ref: tooltipRef, style: { display: tooltip.data ? 'block' : 'none', left: tooltip.x + barWidth * 0.66, pointerEvents: 'none', position: 'absolute', top: 0 }, tabIndex: -1, children: CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, { active: !!tooltip.data, label: (_tooltip$data = tooltip.data) === null || _tooltip$data === void 0 ? void 0 : _tooltip$data.name, payload: tooltip.data ? [tooltip.data] : [], valueFormatter: valueFormatter }) : /*#__PURE__*/_jsx(ChartTooltip, { active: !!tooltip.data, categoryColors: new Map([[(_tooltip$data$name = (_tooltip$data2 = tooltip.data) === null || _tooltip$data2 === void 0 ? void 0 : _tooltip$data2.name) !== null && _tooltip$data$name !== void 0 ? _tooltip$data$name : '', (_tooltip$data$color = (_tooltip$data3 = tooltip.data) === null || _tooltip$data3 === void 0 ? void 0 : _tooltip$data3.color) !== null && _tooltip$data$color !== void 0 ? _tooltip$data$color : '']]), label: ((_tooltip$data4 = tooltip.data) === null || _tooltip$data4 === void 0 ? void 0 : _tooltip$data4.name) || '', payload: tooltip.data ? [tooltip.data] : [], valueFormatter: valueFormatter }) })] }) : /*#__PURE__*/_jsx(NoData, { noDataText: noDataText }) })); }); FunnelChart.displayName = 'FunnelChart'; export default FunnelChart;