@hsu-react/ui 0.0.13 → 0.0.15

package/es/components/Chart/Line/index.js

@@ -51,13 +51,13 @@ var ChartLine = function ChartLine(props) {
     return resolveScrollConfig(scrollConfig);
   }, [scrollConfig]);
 
-  // 使用 useMemo 缓存 chart 配置
+  // Cache the chart option with useMemo
   var chartOption = useMemo(function () {
     var _xAxisData$length, _ref, _ref2;
     var def_xAxis = createDefaultCategoryXAxis(xAxisData);
     var def_yAxis = createDefaultValueYAxis("line");
 
-    // 处理 xAxis 配置
+    // Process xAxis config
     var processedXAxis = Array.isArray(xAxis) ? xAxis === null || xAxis === void 0 ? void 0 : xAxis.map(function (item) {
       return _objectSpread(_objectSpread({}, def_xAxis), {}, {
         data: (item === null || item === void 0 ? void 0 : item.type) === "value" ? undefined : xAxisData
@@ -66,7 +66,7 @@ var ChartLine = function ChartLine(props) {
       data: (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === "value" ? undefined : xAxisData
     }, xAxis);
 
-    // 处理 yAxis 配置
+    // Process yAxis config
     var processedYAxis = Array.isArray(yAxis) ? yAxis === null || yAxis === void 0 ? void 0 : yAxis.map(function (item) {
       return _objectSpread(_objectSpread({}, def_yAxis), {}, {
         data: (item === null || item === void 0 ? void 0 : item.type) === "category" ? xAxisData : undefined
@@ -75,7 +75,7 @@ var ChartLine = function ChartLine(props) {
       data: (yAxis === null || yAxis === void 0 ? void 0 : yAxis.type) === "category" ? xAxisData : undefined
     }, yAxis);
 
-    // 计算 grid 配置
+    // Compute grid config
     var gridTop = "5%";
     if (yAxis !== null && yAxis !== void 0 && yAxis.name) {
       gridTop = "15%";
@@ -91,7 +91,7 @@ var ChartLine = function ChartLine(props) {
       delete gridConfig.top;
     }
 
-    // 处理 dataZoom 配置
+    // Process dataZoom config
     var totalLen = (_xAxisData$length = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length !== void 0 ? _xAxisData$length : 1;
     var zoomEnabled = normalizedScroll.zoomEnabled,
       autoScroll = normalizedScroll.autoScroll,
@@ -173,26 +173,26 @@ var ChartLine = function ChartLine(props) {
     return option;
   }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, legendData, legend, tooltip, seriesData, series, enableLegendAutoScroll, coreOption]);
 
-  // 处理图表 resize 的回调
+  // Callback for handling chart resize
   var handleResize = useCallback(function () {
     var _chartInstanceRef$cur;
     (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
   }, []);
 
-  // 初始化图表
+  // Initialize the chart
   useEffect(function () {
     var _xAxisData$join, _chart$getOption, _opt$legend$, _opt$legend, _ref3;
     if (!chartRef.current) return;
 
-    // 初始化或获取已存在的实例
+    // Initialize or reuse the existing instance
     var chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
-    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    // Set the option: notMerge resets the dataZoom window to its initial position,
+    // so when x-axis data is unchanged (e.g. re-render triggered by axis recalculation / legend selection), record the current window first and restore it afterwards
     var xAxisKey = (_xAxisData$join = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.join("\x01")) !== null && _xAxisData$join !== void 0 ? _xAxisData$join : "";
     var prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? (_chart$getOption = chart.getOption()) === null || _chart$getOption === void 0 ? void 0 : _chart$getOption.dataZoom : undefined;
     prevXAxisKeyRef.current = xAxisKey;
@@ -209,7 +209,7 @@ var ChartLine = function ChartLine(props) {
       });
     }
 
-    // 向调用方同步当前可见窗口（初始渲染与恢复后），用于按展示部分重算坐标轴
+    // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
     if (onDataZoomWindowChanged) {
       var _chart$getOption2, _xAxisData$length2;
       var zooms = (_chart$getOption2 = chart.getOption()) === null || _chart$getOption2 === void 0 ? void 0 : _chart$getOption2.dataZoom;
@@ -218,7 +218,7 @@ var ChartLine = function ChartLine(props) {
       if (typeof (zoom === null || zoom === void 0 ? void 0 : zoom.start) === "number" && typeof (zoom === null || zoom === void 0 ? void 0 : zoom.end) === "number") {
         onDataZoomWindowChanged(percentWindowToIndexWindow(zoom.start, zoom.end, totalLen));
       } else {
-        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        // Without dataZoom (e.g. scrolling not enabled due to insufficient data) the window is the full range; sync once to avoid a stale old window
         onDataZoomWindowChanged({
           startIndex: 0,
           endIndex: Math.max(0, totalLen - 1)
@@ -226,22 +226,22 @@ var ChartLine = function ChartLine(props) {
       }
     }
 
-    // 添加 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) {
       var _chartInstanceRef$cur2;
       (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
     }
 
-    // 图例点选事件
+    // Legend selection event
     var handleLegendSelectChanged = function handleLegendSelectChanged(params) {
       onLegendSelectChanged === null || onLegendSelectChanged === void 0 || onLegendSelectChanged(params.selected);
     };
@@ -250,7 +250,7 @@ var ChartLine = function ChartLine(props) {
       (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.on("legendselectchanged", handleLegendSelectChanged);
     }
 
-    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    // Native dataZoom interaction (slider drag / inside zoom) → sync the visible window
     var handleDataZoom = function handleDataZoom(params) {
       var _raw$batch$, _raw$batch;
       var raw = params;
@@ -270,7 +270,7 @@ var ChartLine = function ChartLine(props) {
       (_chartInstanceRef$cur4 = chartInstanceRef.current) === null || _chartInstanceRef$cur4 === void 0 || _chartInstanceRef$cur4.on("datazoom", handleDataZoom);
     }
 
-    // 图例自动滚动（与 Pie/Bar 一致）
+    // Legend auto-scroll (consistent with Pie/Bar)
     var opt = chartOption;
     var legendDataLen = Array.isArray(opt.legend) ? (_opt$legend$ = opt.legend[0]) === null || _opt$legend$ === void 0 || (_opt$legend$ = _opt$legend$.data) === null || _opt$legend$ === void 0 ? void 0 : _opt$legend$.length : (_opt$legend = opt.legend) === null || _opt$legend === void 0 || (_opt$legend = _opt$legend.data) === null || _opt$legend === void 0 ? void 0 : _opt$legend.length;
     var seriesLen = Array.isArray(opt.series) ? opt.series.length : opt.series ? 1 : 0;
@@ -288,7 +288,7 @@ var ChartLine = function ChartLine(props) {
       });
     }
 
-    // 清理函数
+    // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
       if (onClick) {
@@ -310,7 +310,7 @@ var ChartLine = function ChartLine(props) {
     };
   }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
 
-  // 处理自动播放
+  // Handle auto play
   useEffect(function () {
     var _ref4, _ref5, _normalizedScroll$sli;
     if (!normalizedScroll.zoomEnabled || !chartInstanceRef.current || !(xAxisData !== null && xAxisData !== void 0 && xAxisData.length)) return;
@@ -334,15 +334,15 @@ var ChartLine = function ChartLine(props) {
     return dispose;
   }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
 
-  // 组件卸载时清理资源
+  // Clean up resources when the component unmounts
   useEffect(function () {
     return function () {
-      // 清理 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/es/components/Chart/Pie/Pie3D/_hooks/index.js

@@ -6,7 +6,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 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 { useCallback } from "react";
 import { getParametricEquation } from "../_utils/parametricEquation";
-// 获取饼图扇区的数量（不包括标签系列）
+// Get the number of pie sectors (excluding the label series)
 var getPieSeriesCount = function getPieSeriesCount(series) {
   return series.filter(function (s) {
     return s.type === "surface";
@@ -22,47 +22,47 @@ var getMaxPieValue = function getMaxPieValue(series) {
   return Math.max.apply(Math, [1].concat(_toConsumableArray(values)));
 };
 
-// 高亮标签
+// Highlight a label
 var highlightLabel = function highlightLabel(option, pieIndex) {
   var pieSeriesCount = getPieSeriesCount(option.series);
   var lineIndex = pieSeriesCount + pieIndex;
   var scatterIndex = pieSeriesCount * 2 + pieIndex;
 
-  // 高亮线条
+  // Highlight the leader line
   if (lineIndex < option.series.length) {
     var lineSeries = option.series[lineIndex];
     if (lineSeries && lineSeries.lineStyle) {
-      // 保存原始宽度（如果还没有保存）
+      // Save the original width (if not saved yet)
       if (lineSeries._originalWidth === undefined) {
         lineSeries._originalWidth = lineSeries.lineStyle.width || 1;
       }
-      // 高亮：只增加宽度，不改变颜色
+      // Highlight: only increase the width, keep the color
       lineSeries.lineStyle.width = (lineSeries._originalWidth || 1) * 2;
     }
   }
 
-  // 高亮文本
+  // Highlight the text
   if (scatterIndex < option.series.length) {
     var scatterSeries = option.series[scatterIndex];
     if (scatterSeries && scatterSeries.label && scatterSeries.label.textStyle) {
       var textStyle = scatterSeries.label.textStyle;
-      // 保存原始字体大小（如果还没有保存）
+      // Save the original font size (if not saved yet)
       if (scatterSeries._originalFontSize === undefined) {
         scatterSeries._originalFontSize = textStyle.fontSize || 14;
       }
-      // 高亮：只增加字体大小，不改变颜色
+      // Highlight: only increase the font size, keep the color
       textStyle.fontSize = (scatterSeries._originalFontSize || 14) * 1.2;
     }
   }
 };
 
-// 取消标签高亮
+// Remove label highlight
 var unhighlightLabel = function unhighlightLabel(option, pieIndex) {
   var pieSeriesCount = getPieSeriesCount(option.series);
   var lineIndex = pieSeriesCount + pieIndex;
   var scatterIndex = pieSeriesCount * 2 + pieIndex;
 
-  // 恢复线条样式
+  // Restore the leader line style
   if (lineIndex < option.series.length) {
     var lineSeries = option.series[lineIndex];
     if (lineSeries && lineSeries.lineStyle && lineSeries._originalWidth !== undefined) {
@@ -70,7 +70,7 @@ var unhighlightLabel = function unhighlightLabel(option, pieIndex) {
     }
   }
 
-  // 恢复文本样式
+  // Restore the text style
   if (scatterIndex < option.series.length) {
     var scatterSeries = option.series[scatterIndex];
     if (scatterSeries && scatterSeries.label && scatterSeries.label.textStyle && scatterSeries._originalFontSize !== undefined) {
@@ -110,7 +110,7 @@ export var useMouseOverHandler = function useMouseOverHandler(optionRef, chartIn
       option.series[idx].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, false, k, h, effectiveYOffset);
       option.series[idx].pieStatus.hovered = false;
 
-      // 取消之前高亮的标签
+      // Clear the previously highlighted label
       unhighlightLabel(option, idx);
       hoveredIndexRef.current = "";
     }
@@ -126,7 +126,7 @@ export var useMouseOverHandler = function useMouseOverHandler(optionRef, chartIn
       option.series[seriesIndex].parametricEquation = getParametricEquation(_startRatio, _endRatio, _isSelected, true, _k, baseHeight + hoverHeightIncrement, effectiveYOffset);
       option.series[seriesIndex].pieStatus.hovered = true;
 
-      // 高亮对应的标签
+      // Highlight the matching label
       highlightLabel(option, seriesIndex);
       hoveredIndexRef.current = seriesIndex;
     }
@@ -167,7 +167,7 @@ export var useGlobalOutHandler = function useGlobalOutHandler(optionRef, chartIn
       option.series[idx].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, false, k, h, effectiveYOffset);
       option.series[idx].pieStatus.hovered = false;
 
-      // 取消标签高亮
+      // Remove label highlight
       unhighlightLabel(option, idx);
       hoveredIndexRef.current = "";
     }

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

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