@hsu-react/ui 0.0.13 → 0.0.15

package/src/components/ChainGraph/index.tsx

@@ -23,7 +23,7 @@ import { ExpandButtons } from "./_components/ExpandButtons";
 import { SearchSelect } from "./_components/SearchSelect";
 
 export interface TreeGraphData extends G6TreeGraphData {
-  origin?: Record<string, unknown>; // 原始数据
+  origin?: Record<string, unknown>; // Original data
 }
 
 export interface ChainGraphProps {
@@ -89,7 +89,7 @@ const ChainGraph: React.FC<ChainGraphProps> = observer((props) => {
   const miniMapContainerId = useMemo(() => generateRandomStr(10), []);
   const [searchVal, setSearchVal] = useState("");
 
-  // ==================== 初始化 ====================
+  // ==================== Initialization ====================
   const graph = useChainGraphInit({
     containerId,
     miniMapContainerId,
@@ -107,7 +107,7 @@ const ChainGraph: React.FC<ChainGraphProps> = observer((props) => {
     addShape,
   });
 
-  // ==================== 设置数据 ====================
+  // ==================== Set data ====================
   const { isLayouting } = useChainGraphData({
     graph,
     data,
@@ -117,20 +117,20 @@ const ChainGraph: React.FC<ChainGraphProps> = observer((props) => {
     labelRender,
   });
 
-  // ==================== 搜索 ====================
+  // ==================== Search ====================
   useChainGraphSearch({
     graph,
     searchVal,
   });
 
-  // ==================== 展开所有节点 ====================
+  // ==================== Expand all nodes ====================
   const { setAllExpand } = useChainGraphExpand({
     graph,
     level,
     rootLevel,
   });
 
-  // ==================== 修改布局 ====================
+  // ==================== Change layout ====================
   useChainGraphLayout({
     graph,
     octopus,
@@ -138,13 +138,13 @@ const ChainGraph: React.FC<ChainGraphProps> = observer((props) => {
     getImage,
   });
 
-  // ==================== 设置MiniMap ====================
+  // ==================== Set MiniMap ====================
   useChainGraphMiniMap({
     graph,
     showMiniMap,
   });
 
-  // ==================== 调整大小 ====================
+  // ==================== Resize ====================
   useChainGraphResize({
     graph,
     containerId,

package/src/components/Chart/Bar/Bar3DOpt.tsx

@@ -4,14 +4,14 @@ import { ChartOptionType, Series } from "..";
 
 const colors: string[] = ["rgba(29, 230, 235,1)", "rgba(7, 235, 251,1)"];
 
-// buildPath 内 ctx 的可链式调用类型（等价于 zrender 的 PathProxy）
+// Chainable type of ctx inside buildPath (equivalent to zrender's PathProxy)
 type PathCtx = {
   moveTo(x: number, y: number): PathCtx;
   lineTo(x: number, y: number): PathCtx;
   closePath(): PathCtx;
 };
 
-// 绘制正面
+// Draw the front face
 const CubeFront = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -20,13 +20,13 @@ const CubeFront = echarts.graphic.extendShape({
   buildPath(ctx, shape) {
     const { xAxisPoint, xAxisTranslation = 0, barWidth = 20 } = shape;
 
-    // 右上点
+    // Top-right point
     const c0 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 左上点
+    // Top-left point
     const c1 = [shape.x - barWidth + xAxisTranslation, shape.y];
-    // 左下点
+    // Bottom-left point
     const c2 = [xAxisPoint[0] - barWidth + xAxisTranslation, xAxisPoint[1]];
-    // 右下点
+    // Bottom-right point
     const c3 = [xAxisPoint[0] + 0 + xAxisTranslation, xAxisPoint[1]];
 
     (ctx as unknown as PathCtx)
@@ -37,7 +37,7 @@ const CubeFront = echarts.graphic.extendShape({
       .closePath();
   },
 });
-// 绘制右侧面
+// Draw the right face
 const CubeRight = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -45,19 +45,19 @@ const CubeRight = echarts.graphic.extendShape({
   },
   buildPath(ctx, shape) {
     const { xAxisPoint, xAxisTranslation = 0, barWidth = 20 } = shape;
-    // 根据 barWidth 计算深度偏移，保持原有比例
+    // Compute the depth offset from barWidth, keeping the original ratio
     const depthOffset = (barWidth * 8) / 20;
 
-    // 左上点
+    // Top-left point
     const c1 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 左下点
+    // Bottom-left point
     const c2 = [xAxisPoint[0] + 0 + xAxisTranslation, xAxisPoint[1]];
-    // 右下点
+    // Bottom-right point
     const c3 = [
       xAxisPoint[0] + depthOffset + xAxisTranslation,
       xAxisPoint[1] - 5,
     ];
-    // 右上点
+    // Top-right point
     const c4 = [shape.x + depthOffset + xAxisTranslation, shape.y - 5];
 
     (ctx as unknown as PathCtx)
@@ -68,7 +68,7 @@ const CubeRight = echarts.graphic.extendShape({
       .closePath();
   },
 });
-// 绘制顶面
+// Draw the top face
 const CubeTop = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -76,17 +76,17 @@ const CubeTop = echarts.graphic.extendShape({
   },
   buildPath(ctx, shape) {
     const { xAxisTranslation = 0, barWidth = 20 } = shape;
-    // 根据 barWidth 计算偏移量，保持原有比例
-    const rightOffset = (barWidth * 8) / 20; // 右侧偏移
-    const leftOffset = (barWidth * 12) / 20; // 左侧偏移
+    // Compute offsets from barWidth, keeping the original ratio
+    const rightOffset = (barWidth * 8) / 20; // Right offset
+    const leftOffset = (barWidth * 12) / 20; // Left offset
 
-    // 右上点
+    // Top-right point
     const c1 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 右上点
+    // Top-right point
     const c2 = [shape.x + rightOffset + xAxisTranslation, shape.y - 5];
-    // 左上点
+    // Top-left point
     const c3 = [shape.x - leftOffset + xAxisTranslation, shape.y - 5];
-    // 左下点
+    // Bottom-left point
     const c4 = [shape.x - barWidth + xAxisTranslation, shape.y];
 
     (ctx as unknown as PathCtx)
@@ -97,28 +97,28 @@ const CubeTop = echarts.graphic.extendShape({
       .closePath();
   },
 });
-// 注册三个面图形
+// Register the three face shapes
 echarts.graphic.registerShape("CubeFront", CubeFront);
 echarts.graphic.registerShape("CubeRight", CubeRight);
 echarts.graphic.registerShape("CubeTop", CubeTop);
 
 export interface Bar3DSeriesOptions {
-  /** 同组 3D 柱系列总数（图例隐藏的不计入），用于整组相对类目刻度居中，默认 1 */
+  /** Total number of 3D bar series in the group (legend-hidden ones excluded), used to center the whole group relative to the category tick, default 1 */
   seriesCount?: number;
-  /** 当前系列在同组内的序号（图例隐藏的不占位），默认取 params.seriesIndex */
+  /** Order of the current series within the group (legend-hidden ones take no slot), defaults to params.seriesIndex */
   seriesOrder?: number;
-  /** 堆叠模式：同一类目上各系列纵向叠放（共用同一根柱） */
+  /** Stack mode: series on the same category are stacked vertically (sharing a single bar) */
   stack?: boolean;
-  /** 堆叠基底：每个数据点下方已累计的值，由调用方按可见系列累加 */
+  /** Stack base: accumulated value below each data point, summed by the caller over visible series */
   stackBase?: number[];
 }
 
 /**
- * 3D柱状图series生成
- * @param _colors 颜色
- * @param barGap 柱间距，必须大于等于柱宽
- * @param barWidth 柱宽
- * @param options 分组居中 / 堆叠配置
+ * Generates the series for a 3D bar chart
+ * @param _colors Colors
+ * @param barGap Gap between bars, must be greater than or equal to the bar width
+ * @param barWidth Bar width
+ * @param options Group centering / stacking config
  * @returns
  */
 const bar3DSeries = (
@@ -128,9 +128,9 @@ const bar3DSeries = (
   options: Bar3DSeriesOptions = {},
 ): echarts.SeriesOption & ChartOptionType => {
   const { seriesCount = 1, seriesOrder, stack = false, stackBase } = options;
-  // 单根柱的视觉足迹为 [x - barWidth, x + depthOffset]（depthOffset 为 3D 深度）
+  // The visual footprint of a single bar is [x - barWidth, x + depthOffset] (depthOffset is the 3D depth)
   const depthOffset = (barWidth * 8) / 20;
-  // 整组（堆叠时只有一根柱）相对类目刻度的居中补偿
+  // Centering compensation of the whole group (a single bar when stacked) relative to the category tick
   const groupSpan = stack ? 0 : Math.max(0, seriesCount - 1) * barGap;
   const centerOffset = (barWidth - depthOffset - groupSpan) / 2;
 
@@ -185,7 +185,7 @@ const bar3DSeries = (
         return { type: "group", children: [] };
       }
 
-      // 堆叠时从基底（下方各系列累计值）画到基底+自身值；非堆叠从 0 画起
+      // When stacked, draw from the base (accumulated value of the series below) to base + own value; otherwise draw from 0
       const stackBottom = stack ? (stackBase?.[dataIndex] ?? 0) : 0;
       const location = api.coord!([value0, stackBottom + Number(value1)]);
       const bottomPoint = api.coord!([value0, stackBottom]);

package/src/components/Chart/Bar/index.tsx

@@ -29,15 +29,15 @@ export interface ChartBarProps extends ChartCommonProps {
   legendData?: string[];
   scrollConfig?: ChartScrollConfig;
   onClick?: (event: echarts.ECElementEvent) => void;
-  /** 图例点选变化回调，参数为当前各系列选中状态（配合 legend.selected 可实现坐标轴重算） */
+  /** Legend selection change callback; the argument is the current selected state of each series (combined with legend.selected, enables axis recalculation) */
   onLegendSelectChanged?: (selected: Record<string, boolean>) => void;
-  /** dataZoom 可见窗口变化回调（滑块/滚轮/自动滚动/初始同步均触发），参数为当前可见的 x 轴索引区间（配合 useDataZoomWindow 可按展示部分重算坐标轴） */
+  /** dataZoom visible-window change callback (fired by slider/wheel/auto-scroll/initial sync); the argument is the currently visible x-axis index range (combined with useDataZoomWindow, enables recalculating axes based on the displayed portion) */
   onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => 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;
 }
 
@@ -80,12 +80,12 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     [scrollConfig],
   );
 
-  // 使用 useMemo 缓存 chart 配置
+  // Cache the chart option with useMemo
   const chartOption = useMemo(() => {
     const def_xAxis = createDefaultCategoryXAxis(xAxisData);
     const def_yAxis = createDefaultValueYAxis("bar");
 
-    // 处理 xAxis 配置
+    // Process xAxis config
     const processedXAxis = Array.isArray(xAxis)
       ? xAxis?.map((item) => ({
           ...def_xAxis,
@@ -98,7 +98,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
           ...xAxis,
         };
 
-    // 处理 yAxis 配置
+    // Process yAxis config
     const processedYAxis = Array.isArray(yAxis)
       ? yAxis?.map((item) => ({
           ...def_yAxis,
@@ -111,7 +111,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
           ...yAxis,
         };
 
-    // 计算 grid 配置
+    // Compute grid config
     let gridTop: string | undefined = "5%";
     if ((yAxis as ChartOptionType)?.name) {
       gridTop = "15%";
@@ -130,7 +130,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       delete gridConfig.top;
     }
 
-    // 处理 dataZoom 配置
+    // Process dataZoom config
     const totalLen = xAxisData?.length ?? 1;
     const {
       zoomEnabled,
@@ -261,24 +261,24 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     coreOption,
   ]);
 
-  // 处理图表 resize 的回调
+  // Callback for handling chart resize
   const handleResize = useCallback(() => {
     chartInstanceRef.current?.resize();
   }, []);
 
-  // 初始化图表
+  // Initialize the chart
   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;
     }
 
-    // 设置配置：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
     const xAxisKey = xAxisData?.join("\u0001") ?? "";
     const prevZoomRanges =
       prevXAxisKeyRef.current === xAxisKey
@@ -299,7 +299,7 @@ const ChartBar: React.FC<ChartBarProps> = (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) {
       const zooms = (chart.getOption() as ChartsOption | undefined)
         ?.dataZoom as Array<{ start?: number; end?: number }> | undefined;
@@ -310,7 +310,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
           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),
@@ -318,21 +318,21 @@ const ChartBar: React.FC<ChartBarProps> = (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) {
       chartInstanceRef.current?.on("click", onClick);
     }
 
-    // 图例点选事件
+    // Legend selection event
     const handleLegendSelectChanged = (params: unknown) => {
       onLegendSelectChanged?.(
         (params as { selected: Record<string, boolean> }).selected,
@@ -345,7 +345,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       );
     }
 
-    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    // Native dataZoom interaction (slider drag / inside zoom) → sync the visible window
     const handleDataZoom = (params: unknown) => {
       const raw = params as {
         start?: number;
@@ -385,7 +385,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
-    // 图例自动滚动（参考 Pie 组件）
+    // Legend auto-scroll (modeled on the Pie component)
     const opt = chartOption as ChartsOption;
     const legendDataLen = Array.isArray(opt.legend)
       ? opt.legend[0]?.data?.length
@@ -409,7 +409,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       });
     }
 
-    // 清理函数
+    // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
 
@@ -445,7 +445,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     legendScrollInterval,
   ]);
 
-  // 处理自动播放
+  // Handle auto play
   useEffect(() => {
     if (
       !normalizedScroll.zoomEnabled ||
@@ -493,15 +493,15 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     onDataZoomWindowChanged,
   ]);
 
-  // 组件卸载时清理资源
+  // Clean up resources when the component unmounts
   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;