@lobehub/charts 1.6.2 → 1.7.0

package/es/DonutChart/index.d.ts

@@ -17,6 +17,7 @@ export interface DonutChartProps extends BaseAnimationTimingProps {
     donutLabel?: string;
     index?: string;
     label?: string;
+    loading?: boolean;
     noDataText?: NoDataProps['noDataText'];
     onValueChange?: (value: EventProps) => void;
     showAnimation?: boolean;

package/es/DonutChart/index.js

@@ -2,12 +2,13 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height", "style", "customCategories", "donutLabel"];
+var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "loading", "height", "style", "customCategories", "donutLabel"];
+import { Skeleton } from 'antd';
 import { css, useThemeMode } from 'antd-style';
 import { forwardRef, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -55,6 +56,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     className = props.className,
     _props$width = props.width,
     width = _props$width === void 0 ? '100%' : _props$width,
+    loading = props.loading,
     _props$height = props.height,
     height = _props$height === void 0 ? '10rem' : _props$height,
     style = props.style,
@@ -71,19 +73,6 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     activeIndex = _useState2[0],
     setActiveIndex = _useState2[1];
   var hasOnValueChange = !!onValueChange;
-  var onShapeClick = function onShapeClick(data, index, event) {
-    event.stopPropagation();
-    if (!hasOnValueChange) return;
-    if (activeIndex === index) {
-      setActiveIndex(undefined);
-      onValueChange === null || onValueChange === void 0 || onValueChange(null);
-    } else {
-      setActiveIndex(index);
-      onValueChange === null || onValueChange === void 0 || onValueChange(_objectSpread({
-        eventType: 'slice'
-      }, data.payload.payload));
-    }
-  };
   useEffect(function () {
     var pieSectors = document.querySelectorAll('.recharts-pie-sector');
     if (pieSectors) {
@@ -101,6 +90,27 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   }, [activeIndex]);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
+    active: true,
+    block: true,
+    style: {
+      height: height,
+      width: width
+    }
+  });
+  var onShapeClick = function onShapeClick(data, index, event) {
+    event.stopPropagation();
+    if (!hasOnValueChange) return;
+    if (activeIndex === index) {
+      setActiveIndex(undefined);
+      onValueChange === null || onValueChange === void 0 || onValueChange(null);
+    } else {
+      setActiveIndex(index);
+      onValueChange === null || onValueChange === void 0 || onValueChange(_objectSpread({
+        eventType: 'slice'
+      }, data.payload.payload));
+    }
+  };
   var parseData = function parseData(data, colors) {
     return data.map(function (dataPoint, idx) {
       var baseColor = idx < colors.length ? colors[idx] : theme.colorPrimary;

package/es/FunnelChart/ArrowRightIcon.d.ts

@@ -0,0 +1,4 @@
+declare const ArrowRightIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowRightIcon;

package/es/FunnelChart/ArrowRightIcon.js

@@ -0,0 +1,17 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ArrowRightIcon = function ArrowRightIcon(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
+    })
+  }));
+};
+export default ArrowRightIcon;

package/es/FunnelChart/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import BaseChartProps from "../common/BaseChartProps";
+type CalculateFrom = 'first' | 'previous';
+type DataT = {
+    name: string;
+    value: number;
+};
+export interface FunnelChartProps extends Omit<BaseChartProps, 'categories' | 'index'> {
+    barGap?: number | `${number}%`;
+    calculateFrom?: CalculateFrom;
+    data: DataT[];
+    evolutionGradient?: boolean;
+    gradient?: boolean;
+    showArrow?: boolean;
+    variant?: 'base' | 'center';
+    yAxisPadding?: number;
+}
+declare const FunnelChart: import("react").ForwardRefExoticComponent<FunnelChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FunnelChart;

package/es/FunnelChart/index.js

@@ -0,0 +1,492 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+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"];
+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 ? '20rem' : _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] : []
+        }) : /*#__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;

package/es/FunnelChart/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    emphasis: import("antd-style").SerializedStyles;
+    gridLines: import("antd-style").SerializedStyles;
+    label: import("antd-style").SerializedStyles;
+    strongLabel: import("antd-style").SerializedStyles;
+}>;

package/es/FunnelChart/styles.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), token.colorBorderSecondary),
+    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextDescription),
+    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+  };
+});

package/es/FunnelChart/types.d.ts

@@ -0,0 +1,28 @@
+export type Tooltip = {
+    data?: {
+        className?: string;
+        color?: string;
+        dataKey: string;
+        fill?: string;
+        name: string;
+        payload?: any;
+        value: number;
+    };
+    index?: number;
+    x: number;
+    y: number;
+};
+export type DataT = {
+    name: string;
+    value: number;
+};
+export type FormattedDataT = DataT & {
+    barHeight: number;
+    nextBarHeight: number;
+    nextNormalizedValue: number;
+    nextStartX: number;
+    nextValue: number;
+    normalizedValue: number;
+    startX: number;
+    startY: number;
+};

package/es/FunnelChart/types.js

@@ -0,0 +1 @@
+export {};

package/es/common/NoData.js

@@ -19,7 +19,6 @@ var NoData = /*#__PURE__*/memo(function (_ref) {
     children: /*#__PURE__*/_jsx(Empty, {
       className: className,
       description: isReactNodeText ? noDataText : /*#__PURE__*/_jsxs(Flexbox, {
-        gap: 4,
         padding: 8,
         children: [/*#__PURE__*/_jsx("div", {
           style: {
@@ -31,7 +30,7 @@ var NoData = /*#__PURE__*/memo(function (_ref) {
         }), /*#__PURE__*/_jsx("div", {
           style: {
             color: theme.colorTextDescription,
-            fontSize: 14
+            fontSize: 12
           },
           children: noDataText === null || noDataText === void 0 ? void 0 : noDataText.desc
         })]

package/es/index.d.ts

@@ -4,6 +4,7 @@ export { type Bar, default as BarList, type BarListProps } from './BarList';
 export { default as ChartTooltipFrame } from './common/ChartTooltip/ChartTooltipFrame';
 export * from './DataBars';
 export { default as DonutChart, type DonutChartProps } from './DonutChart';
+export { default as FunnelChart, type FunnelChartProps } from './FunnelChart';
 export { default as Heatmaps, type HeatmapsProps } from './Heatmaps';
 export { default as Legend, type LegendProps } from './Legend';
 export { default as LineChart, type LineChartProps } from './LineChart';

package/es/index.js

@@ -4,6 +4,7 @@ export { default as BarList } from "./BarList";
 export { default as ChartTooltipFrame } from "./common/ChartTooltip/ChartTooltipFrame";
 export * from "./DataBars";
 export { default as DonutChart } from "./DonutChart";
+export { default as FunnelChart } from "./FunnelChart";
 export { default as Heatmaps } from "./Heatmaps";
 export { default as Legend } from "./Legend";
 export { default as LineChart } from "./LineChart";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",