@hsu-react/ui 0.0.13 → 0.0.14

package/lib/components/Chart/Pie/Pie3D/_utils/label.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createLabelSeries = void 0;
-// 估算标签的宽度和高度（基于文本长度和字体大小）
+// Estimate a label's width and height (based on text length and font size)
 const estimateLabelSize = (text, fontSize = 14, padding = 5) => {
-  // 简单估算：每个字符约占用 fontSize * 0.6 的宽度
+  // Rough estimate: each character takes about fontSize * 0.6 in width
   const estimatedWidth = text.length * fontSize * 0.6 + padding * 2;
   const estimatedHeight = fontSize + padding * 2;
   return {
@@ -15,25 +15,25 @@ const estimateLabelSize = (text, fontSize = 14, padding = 5) => {
   };
 };
 
-// 检测两个矩形是否重叠
+// Check whether two rectangles overlap
 const isOverlapping = (rect1, rect2) => {
   return rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y;
 };
 
-// 调整标签位置以避免重叠
+// Adjust label positions to avoid overlap
 const adjustLabelPositions = (labelPoints, labelTextStyle) => {
   const fontSize = labelTextStyle.fontSize || 14;
   const padding = Array.isArray(labelTextStyle.padding) ? labelTextStyle.padding[0] || 5 : labelTextStyle.padding || 5;
 
-  // 将标签尺寸转换为3D坐标系的单位
-  // 假设字体大小和padding的单位需要转换为3D坐标系的相对单位
-  // 3D坐标系的范围大约是-1到1，所以需要适当的缩放
-  const scaleFactor = 0.01; // 将像素单位转换为3D坐标单位
+  // Convert label sizes into 3D coordinate units
+  // Font size and padding are in pixels and must be converted into relative 3D coordinate units
+  // The 3D coordinate range is roughly -1 to 1, so scaling is required
+  const scaleFactor = 0.01; // Converts pixel units into 3D coordinate units
 
-  // 创建标签矩形数组（在2D投影平面上，使用x和y坐标）
+  // Build the label rectangles (on the 2D projection plane, using x and y coordinates)
   const labelRects = labelPoints?.map(point => {
     const size = estimateLabelSize(point.text, fontSize, padding);
-    // 将像素尺寸转换为3D坐标单位
+    // Convert pixel sizes into 3D coordinate units
     const width3D = size.width * scaleFactor;
     const height3D = size.height * scaleFactor;
     return {
@@ -41,25 +41,25 @@ const adjustLabelPositions = (labelPoints, labelTextStyle) => {
       y: point.y - height3D / 2,
       width: width3D,
       height: height3D,
-      index: 0 // 将在循环中设置
+      index: 0 // Assigned in the loop below
     };
   });
 
-  // 设置索引
+  // Assign indices
   labelRects?.forEach((rect, index) => {
     rect.index = index;
   });
 
-  // 保存原始坐标
+  // Save the original coordinates
   labelPoints?.forEach(point => {
     point.originalY = point.y;
   });
 
-  // 检测并调整重叠的标签
-  const minSpacing = fontSize * scaleFactor * 0.3; // 最小间距（3D坐标单位）
+  // Detect and adjust overlapping labels
+  const minSpacing = fontSize * scaleFactor * 0.3; // Minimum spacing (in 3D coordinate units)
   let hasOverlap = true;
   let iterations = 0;
-  const maxIterations = 100; // 最大迭代次数
+  const maxIterations = 100; // Maximum number of iterations
 
   while (hasOverlap && iterations < maxIterations) {
     hasOverlap = false;
@@ -69,27 +69,27 @@ const adjustLabelPositions = (labelPoints, labelTextStyle) => {
         if (isOverlapping(labelRects[i], labelRects[j])) {
           hasOverlap = true;
 
-          // 计算两个标签的中心点
+          // Compute the center points of the two labels
           const center1X = labelRects[i].x + labelRects[i].width / 2;
           const center1Y = labelRects[i].y + labelRects[i].height / 2;
           const center2X = labelRects[j].x + labelRects[j].width / 2;
           const center2Y = labelRects[j].y + labelRects[j].height / 2;
 
-          // 计算x和y方向的距离
+          // Compute the distances along x and y
           const distanceX = Math.abs(center1X - center2X);
           const distanceY = Math.abs(center1Y - center2Y);
 
-          // 计算需要的距离
+          // Compute the required distances
           const requiredDistanceX = (labelRects[i].width + labelRects[j].width) / 2 + minSpacing;
           const requiredDistanceY = (labelRects[i].height + labelRects[j].height) / 2 + minSpacing;
 
-          // 根据重叠情况调整位置
+          // Adjust positions based on the overlap
           const originalY1 = labelPoints[i].originalY || labelPoints[i].y;
           const originalY2 = labelPoints[j].originalY || labelPoints[j].y;
           const originalX1 = labelPoints[i].x;
           const originalX2 = labelPoints[j].x;
 
-          // 优先调整y方向（垂直方向），因为这是最常见的重叠情况
+          // Prefer adjusting along y (vertically), since that is the most common overlap
           if (distanceY < requiredDistanceY) {
             const adjustmentY = (requiredDistanceY - distanceY) / 2 + minSpacing * 0.5;
             if (originalY1 < originalY2) {
@@ -101,7 +101,7 @@ const adjustLabelPositions = (labelPoints, labelTextStyle) => {
             }
           }
 
-          // 如果x方向也很接近，稍微调整x方向
+          // If the labels are also close along x, nudge them along x as well
           if (distanceX < requiredDistanceX * 0.9) {
             const adjustmentX = (requiredDistanceX - distanceX) / 2 * 0.5;
             if (originalX1 < originalX2) {
@@ -113,7 +113,7 @@ const adjustLabelPositions = (labelPoints, labelTextStyle) => {
             }
           }
 
-          // 更新矩形位置
+          // Update the rectangle position
           const size1 = estimateLabelSize(labelPoints[i].text, fontSize, padding);
           const size2 = estimateLabelSize(labelPoints[j].text, fontSize, padding);
           labelRects[i].x = labelPoints[i].x - size1.width * scaleFactor / 2;
@@ -195,29 +195,29 @@ const calculateLabelPoints = (series, label, maxValue, minHeight, maxHeight, aut
     });
   }
 
-  // 调整标签位置以避免重叠
+  // Adjust label positions to avoid overlap
   const labelTextStyle = label.textStyle || {};
-  // 处理 padding 可能是数组的情况
+  // Handle padding possibly being an array
   const adjustedTextStyle = {
     fontSize: labelTextStyle.fontSize,
     padding: Array.isArray(labelTextStyle.padding) ? labelTextStyle.padding[0] || 5 : labelTextStyle.padding || 5
   };
   const adjustedPoints = adjustLabelPositions(labelPoints, adjustedTextStyle);
 
-  // 更新标签线的终点和中间点位置以匹配调整后的标签位置
+  // Update each leader line's end and mid points to match the adjusted label position
   adjustedPoints?.forEach((point, index) => {
     if (labelLines[index]) {
       const originalEndPoint = labelLines[index].coords[2];
       const originalMidPoint = labelLines[index].coords[1];
 
-      // 更新终点
+      // Update the end point
       labelLines[index].coords[2] = [point.x, point.y, point.z];
 
-      // 如果y坐标发生了变化，调整中间点的y坐标以保持线条平滑
+      // If the y coordinate changed, adjust the mid point's y to keep the line smooth
       const yDiff = point.y - originalEndPoint[1];
       if (Math.abs(yDiff) > 0.001) {
-        // 调整中间点的y坐标，使其在起点和终点之间平滑过渡
-        const midY = originalMidPoint[1] + yDiff * 0.5; // 中间点跟随终点移动，但幅度较小
+        // Adjust the mid point's y so it transitions smoothly between start and end
+        const midY = originalMidPoint[1] + yDiff * 0.5; // The mid point follows the end point, but moves less
         labelLines[index].coords[1] = [originalMidPoint[0], midY, originalMidPoint[2]];
       }
     }

package/lib/components/Chart/Pie/index.d.ts

@@ -8,21 +8,21 @@ export interface ChartPieProps extends ChartCommonProps {
     onChart?: (chart: echarts.EChartsType) => void;
     extendSeries?: Series[];
     onClick?: (event: echarts.ECElementEvent) => void;
-    /** 是否启用图例自动滚动，默认 false */
+    /** Whether to enable legend auto-scroll, default false */
     enableLegendAutoScroll?: boolean;
-    /** 图例每页可见数量，默认 8 */
+    /** Number of legend items visible per page, default 8 */
     legendVisibleCount?: number;
-    /** 图例滚动间隔时间(ms)，默认 1500 */
+    /** Legend scroll interval (ms), default 1500 */
     legendScrollInterval?: number;
-    /** 是否半圆，默认 false */
+    /** Whether it is a semicircle, default false */
     isSemiCircle?: boolean;
-    /** 半圆贴边位置，默认 'bottom' */
+    /** Edge the semicircle is attached to, default 'bottom' */
     position?: "top" | "bottom" | "left" | "right";
-    /** 显示角度，默认 180 */
+    /** Display angle, default 180 */
     spanAngle?: number;
-    /** 中心位置 */
+    /** Center position */
     center?: [string, string];
-    /** 半径配置 */
+    /** Radius config */
     radius?: [string, string];
 }
 export interface ChartPieFC extends React.FC<ChartPieProps> {

package/lib/components/Chart/Pie/index.js

@@ -41,63 +41,63 @@ const ChartPie = props => {
   const resizeObserverRef = (0, _react.useRef)(null);
   const legendScrollRef = (0, _react.useRef)(null);
 
-  // 根据 position 计算默认 radius（如果未指定）
+  // Compute the default radius based on position (when not specified)
   const calculatedRadius = (0, _react.useMemo)(() => {
     if (radius) {
       return radius;
     }
 
-    // 对于半圆，需要更大的 radius 值才能占满容器
-    // 因为半圆只占 180 度，所以外半径需要更大才能覆盖整个容器的高度或宽度
+    // A semicircle needs a larger radius to fill the container,
+    // because it spans only 180 degrees, so the outer radius must be larger to cover the container's full height or width
     if (isSemiCircle) {
       return ["0%", "200%"];
     }
-    // 全圆
+    // Full circle
     return ["45%", "70%"];
   }, [radius, isSemiCircle]);
 
-  // 计算角度和中心位置
+  // Compute angles and center position
   const {
     calculatedCenter,
     startAngle,
     endAngle,
     actualSpanAngle
   } = (0, _react.useMemo)(() => {
-    // 根据 position 计算默认 center（如果未指定）
+    // Compute the default center based on position (when not specified)
     let calculatedCenter = center || ["30%", "50%"];
     let startAngle = 90;
-    let endAngle = 450; // 360 + 90，从顶部开始
+    let endAngle = 450; // 360 + 90, starting from the top
     const actualSpanAngle = isSemiCircle ? spanAngle : 360;
     if (isSemiCircle) {
-      // 根据 position 计算角度和中心位置
+      // Compute angles and center position based on position
       switch (position) {
         case "top":
-          // 上半圆
+          // Top semicircle
           startAngle = 180;
           endAngle = 0;
           calculatedCenter = center || ["center", "0%"];
           break;
         case "bottom":
-          // 下半圆
+          // Bottom semicircle
           startAngle = 0;
           endAngle = 180;
           calculatedCenter = center || ["center", "100%"];
           break;
         case "left":
-          // 左半圆
+          // Left semicircle
           startAngle = 90;
           endAngle = 270;
           calculatedCenter = center || ["0%", "center"];
           break;
         case "right":
-          // 右半圆
+          // Right semicircle
           startAngle = 270;
           endAngle = 90;
           calculatedCenter = center || ["100%", "center"];
           break;
       }
     } else {
-      // 全圆
+      // Full circle
       calculatedCenter = center || ["30%", "50%"];
     }
     return {
@@ -108,7 +108,7 @@ const ChartPie = props => {
     };
   }, [isSemiCircle, position, center, spanAngle]);
 
-  // 处理数据：如果是半圆，需要填充空白数据
+  // Process the data: a semicircle needs blank data padding
   const processedSeriesData = (0, _react.useMemo)(() => {
     if (!seriesData || !isSemiCircle) {
       return seriesData;
@@ -117,7 +117,7 @@ const ChartPie = props => {
     const repeatedMultiple = 360 / actualSpanAngle;
     const addDataLen = parseInt(String((repeatedMultiple - 1) * originDataLen));
 
-    // 填充空白数据以形成半圆
+    // Pad with blank data to form the semicircle
     const emptyData = Array.from({
       length: addDataLen
     }, () => ({
@@ -132,9 +132,9 @@ const ChartPie = props => {
     return [...seriesData, ...emptyData];
   }, [seriesData, isSemiCircle, actualSpanAngle]);
 
-  // 使用 useMemo 缓存 chart 配置
+  // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
-    // 当启用自动滚动时，隐藏分页按钮并设置为滚动类型
+    // When auto-scroll is enabled, hide the paging buttons and use the scroll type
     const baseLegendConfig = {
       orient: "vertical",
       top: "middle",
@@ -148,9 +148,9 @@ const ChartPie = props => {
     };
     const legendConfig = enableLegendAutoScroll ? {
       ...baseLegendConfig,
-      // 设置为滚动类型
+      // Use the scroll type
       type: "scroll",
-      // 隐藏分页按钮的配置
+      // Config to hide the paging buttons
       pageIconSize: 0,
       pageIconColor: "transparent",
       pageIconInactiveColor: "transparent",
@@ -189,44 +189,44 @@ const ChartPie = props => {
     return option;
   }, [chartTitle, title, legend, tooltip, processedSeriesData, series, extendSeries, coreOption, enableLegendAutoScroll, calculatedCenter, calculatedRadius, startAngle, endAngle]);
 
-  // 处理图表 resize 的回调
+  // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
     chartInstanceRef.current?.resize();
   }, []);
 
-  // 初始化图表
+  // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current) return;
 
-    // 初始化或获取已存在的实例
+    // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      // 首次初始化时调用 onChart 回调
+      // Call the onChart callback on first initialization
       onChart?.(chart);
     }
 
-    // 设置配置
+    // Apply the option
     chart.setOption(chartOption, true);
 
-    // 添加 resize 监听
+    // Add resize listener
     window.addEventListener("resize", handleResize);
 
-    // 添加 ResizeObserver
+    // Add ResizeObserver
     if (chartRef.current && !resizeObserverRef.current) {
       resizeObserverRef.current = new ResizeObserver(handleResize);
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // 添加点击事件
+    // Add click event
     if (onClick) {
       chartInstanceRef.current?.on("click", onClick);
     }
 
-    // 图例自动滚动
+    // Legend auto-scroll
     if (enableLegendAutoScroll && seriesData && seriesData.length > 0) {
-      // 清理之前的滚动实例
+      // Dispose the previous scroll instance
       if (legendScrollRef.current) {
         legendScrollRef.current.dispose();
       }
@@ -239,14 +239,14 @@ const ChartPie = props => {
       });
     }
 
-    // 清理函数
+    // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
       if (onClick) {
         chartInstanceRef.current?.off("click", onClick);
       }
 
-      // 清理图例滚动
+      // Clean up legend scrolling
       if (legendScrollRef.current) {
         legendScrollRef.current.dispose();
         legendScrollRef.current = null;
@@ -254,15 +254,15 @@ const ChartPie = props => {
     };
   }, [chartOption, handleResize, onChart, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval]);
 
-  // 组件卸载时清理资源
+  // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {
     return () => {
-      // 清理 ResizeObserver
+      // Clean up ResizeObserver
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = null;
       }
-      // 销毁图表实例
+      // Dispose the chart instance
       if (chartInstanceRef.current) {
         chartInstanceRef.current.dispose();
         chartInstanceRef.current = null;

package/lib/components/Chart/Polar/index.js

@@ -32,7 +32,7 @@ const Polar = props => {
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
 
-  // 使用 useMemo 缓存 chart 配置
+  // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
     const option = {
       title: [{
@@ -142,49 +142,49 @@ const Polar = props => {
     return option;
   }, [textStyle, title1Style, title1, title2Style, title2, polar, radiusAxis, angleAxis, seriesData, color, series, coreOption]);
 
-  // 处理图表 resize 的回调
+  // Callback handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
     chartInstanceRef.current?.resize();
   }, []);
 
-  // 初始化图表
+  // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current) return;
 
-    // 初始化或获取已存在的实例
+    // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // Apply the option
     chart.setOption(chartOption, true);
 
-    // 添加 resize 监听
+    // Add resize listener
     window.addEventListener("resize", handleResize);
 
-    // 添加 ResizeObserver
+    // Add ResizeObserver
     if (chartRef.current && !resizeObserverRef.current) {
       resizeObserverRef.current = new ResizeObserver(handleResize);
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // 清理函数
+    // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [chartOption, handleResize]);
 
-  // 组件卸载时清理资源
+  // Clean up resources on unmount
   (0, _react.useEffect)(() => {
     return () => {
-      // 清理 ResizeObserver
+      // Clean up the ResizeObserver
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = null;
       }
-      // 销毁图表实例
+      // Dispose the chart instance
       if (chartInstanceRef.current) {
         chartInstanceRef.current.dispose();
         chartInstanceRef.current = null;

package/lib/components/Chart/Radar/index.d.ts

@@ -4,9 +4,9 @@ export interface RadarIndicator {
     name: string;
     max?: number;
 }
-/** 单指标 tooltip 触发方式
- * - `point`  仅悬停在数据点/线上触发（echarts 原生 item trigger）
- * - `region` 进入该指标的扇形区域即触发，并在命中扇形区内填充高亮色
+/** Single-indicator tooltip trigger mode
+ * - `point`  triggers only when hovering data points/lines (native echarts item trigger)
+ * - `region` triggers as soon as the pointer enters the indicator's sector, filling the hit sector with a highlight color
  */
 export type SingleIndicatorMode = "point" | "region";
 export interface ChartRadarProps extends ChartCommonProps {
@@ -15,14 +15,14 @@ export interface ChartRadarProps extends ChartCommonProps {
     color?: string;
     name?: string;
     /**
-     * 单指标 tooltip：
-     * - `true` 使用内置简单格式（`系列名 · 指标名：值`）
-     * - 传函数则接收当前最近指标下标与原始 echarts params，自行返回 HTML
+     * Single-indicator tooltip:
+     * - `true` uses the built-in simple format (`seriesName · indicatorName: value`)
+     * - a function receives the nearest indicator index and the raw echarts params, and returns HTML itself
      */
     singleIndicatorTooltip?: boolean | ((indicatorIndex: number, params: unknown, indicator: RadarIndicator) => string);
-    /** 单指标触发方式；**不设置则完全走 echarts 原生全指标 tooltip**，忽略 `singleIndicatorTooltip` */
+    /** Single-indicator trigger mode; **when unset, the native echarts all-indicator tooltip is used** and `singleIndicatorTooltip` is ignored */
     singleIndicatorMode?: SingleIndicatorMode;
-    /** `region` 模式下的高亮色；不传则使用 `color` 以 0.12 透明度渲染 */
+    /** Highlight color in `region` mode; defaults to `color` rendered at 0.12 opacity */
     singleIndicatorHoverFill?: string;
 }
 declare const Radar: React.FC<ChartRadarProps>;

package/lib/components/Chart/Radar/index.js

@@ -11,9 +11,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** 单指标 tooltip 触发方式
- * - `point`  仅悬停在数据点/线上触发（echarts 原生 item trigger）
- * - `region` 进入该指标的扇形区域即触发，并在命中扇形区内填充高亮色
+/** Single-indicator tooltip trigger mode
+ * - `point`  triggers only when hovering data points/lines (native echarts item trigger)
+ * - `region` triggers as soon as the pointer enters the indicator's sector, filling the hit sector with a highlight color
  */
 
 const Radar = props => {
@@ -45,7 +45,7 @@ const Radar = props => {
     const overrideData = seriesOverride?.data;
     const extraData = Array.isArray(overrideData) ? overrideData : [];
 
-    // 将每个 extraData item 拆为独立 series，使图例可以分别控制显隐
+    // Split each extraData item into its own series so the legend can toggle them individually
     const extraSeries = extraData.map(item => {
       const d = item;
       return {
@@ -201,7 +201,7 @@ const Radar = props => {
           return;
         }
         const axes = coord.getIndicatorAxes();
-        // echarts 雷达轴角度按数学约定（y 向上），而屏幕坐标 y 向下，需翻转 y
+        // echarts radar axis angles follow the math convention (y up) while screen coordinates have y down, so flip y
         const mouseAngle = Math.atan2(-dy, dx);
         let bestI = -1;
         let bestDA = Infinity;
@@ -215,8 +215,8 @@ const Radar = props => {
         });
         hoveredIndicatorRef.current = bestI;
         if (hoverShape && bestI >= 0) {
-          // 以与雷达多边形一致的边界构造扇形区：
-          // 中心 → 与上一轴顶边的中点 → 当前轴顶 → 与下一轴顶边的中点
+          // Build the sector with boundaries matching the radar polygon:
+          // center → midpoint of the edge to the previous axis tip → current axis tip → midpoint of the edge to the next axis tip
           const n = axes.length;
           const tipOf = idx => {
             const a = axes[idx].angle;

package/lib/components/Chart/Sankey/index.js

@@ -24,7 +24,7 @@ const Sankey = props => {
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
 
-  // 使用 useMemo 缓存 chart 配置
+  // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
     const option = {
       series: {
@@ -101,22 +101,22 @@ const Sankey = props => {
     return option;
   }, [seriesData, seriesLinks, series]);
 
-  // 处理图表 resize 的回调
+  // Callback handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
     chartInstanceRef.current?.resize();
   }, []);
 
-  // 初始化图表
+  // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current) return;
 
-    // 初始化或获取已存在的实例
+    // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
 
-      // 首次初始化时添加 finished 事件监听
+      // Attach the finished event listener on first initialization
       chart.on("finished", () => {
         getImage?.(chart.getDataURL({
           type: "png",
@@ -126,33 +126,33 @@ const Sankey = props => {
       });
     }
 
-    // 设置配置
+    // Apply the option
     chart.setOption(chartOption, true);
 
-    // 添加 resize 监听
+    // Add resize listener
     window.addEventListener("resize", handleResize);
 
-    // 添加 ResizeObserver
+    // Add ResizeObserver
     if (chartRef.current && !resizeObserverRef.current) {
       resizeObserverRef.current = new ResizeObserver(handleResize);
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // 清理函数
+    // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [chartOption, handleResize, getImage]);
 
-  // 组件卸载时清理资源
+  // Clean up resources on unmount
   (0, _react.useEffect)(() => {
     return () => {
-      // 清理 ResizeObserver
+      // Clean up the ResizeObserver
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = null;
       }
-      // 销毁图表实例
+      // Dispose the chart instance
       if (chartInstanceRef.current) {
         chartInstanceRef.current.off("finished");
         chartInstanceRef.current.dispose();