@hsu-react/ui 0.0.12 → 0.0.14

package/es/components/ChainGraph/_utils/styles.d.ts

@@ -1,13 +1,13 @@
 import { ShapeStyle } from "@antv/g6";
 /**
- * 根节点文字样式
+ * Root node text style
  */
 export declare const rootTextStyle: ShapeStyle;
 /**
- * 节点文字样式
+ * Node text style
  */
 export declare const nodeTextStyle: ShapeStyle;
 /**
- * 边样式
+ * Edge style
  */
 export declare const edgeStyle: ShapeStyle;

package/es/components/ChainGraph/_utils/styles.js

@@ -1,5 +1,5 @@
 /**
- * 根节点文字样式
+ * Root node text style
  */
 export var rootTextStyle = {
   fontSize: 20,
@@ -7,14 +7,14 @@ export var rootTextStyle = {
 };
 
 /**
- * 节点文字样式
+ * Node text style
  */
 export var nodeTextStyle = {
   fontSize: 16
 };
 
 /**
- * 边样式
+ * Edge style
  */
 export var edgeStyle = {
   stroke: "#4096ff"

package/es/components/ChainGraph/index.js

@@ -71,7 +71,7 @@ var ChainGraph = observer(function (props) {
     searchVal = _useState2[0],
     setSearchVal = _useState2[1];
 
-  // ==================== 初始化 ====================
+  // ==================== Initialization ====================
   var graph = useChainGraphInit({
     containerId: containerId,
     miniMapContainerId: miniMapContainerId,
@@ -89,7 +89,7 @@ var ChainGraph = observer(function (props) {
     addShape: addShape
   });
 
-  // ==================== 设置数据 ====================
+  // ==================== Set data ====================
   var _useChainGraphData = useChainGraphData({
       graph: graph,
       data: data,
@@ -100,13 +100,13 @@ var ChainGraph = observer(function (props) {
     }),
     isLayouting = _useChainGraphData.isLayouting;
 
-  // ==================== 搜索 ====================
+  // ==================== Search ====================
   useChainGraphSearch({
     graph: graph,
     searchVal: searchVal
   });
 
-  // ==================== 展开所有节点 ====================
+  // ==================== Expand all nodes ====================
   var _useChainGraphExpand = useChainGraphExpand({
       graph: graph,
       level: level,
@@ -114,7 +114,7 @@ var ChainGraph = observer(function (props) {
     }),
     setAllExpand = _useChainGraphExpand.setAllExpand;
 
-  // ==================== 修改布局 ====================
+  // ==================== Change layout ====================
   useChainGraphLayout({
     graph: graph,
     octopus: octopus,
@@ -122,13 +122,13 @@ var ChainGraph = observer(function (props) {
     getImage: getImage
   });
 
-  // ==================== 设置MiniMap ====================
+  // ==================== Set MiniMap ====================
   useChainGraphMiniMap({
     graph: graph,
     showMiniMap: showMiniMap
   });
 
-  // ==================== 调整大小 ====================
+  // ==================== Resize ====================
   useChainGraphResize({
     graph: graph,
     containerId: containerId,

package/es/components/ChainGraph/index.module.scss

@@ -24,9 +24,9 @@
     bottom: 20px;
     left: 20px;
 
-    background-color: rgba(253, 253, 255, 1);
+    background-color: var(--cf-surface);
 
-    border: 1px solid #2977e7;
+    border: 1px solid var(--primary-color);
 
     transition: all 0.5s ease;
 

package/es/components/Chart/Bar/Bar3DOpt.d.ts

@@ -1,21 +1,21 @@
 import * as echarts from "echarts";
 import { ChartOptionType } from "..";
 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
  */
 declare const bar3DSeries: (_colors: echarts.Color, barGap?: number, barWidth?: number, options?: Bar3DSeriesOptions) => echarts.SeriesOption & ChartOptionType;

package/es/components/Chart/Bar/Bar3DOpt.js

@@ -1,9 +1,9 @@
 import * as echarts from "echarts";
 var colors = ["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)
 
-// 绘制正面
+// Draw the front face
 var CubeFront = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -16,18 +16,18 @@ var CubeFront = echarts.graphic.extendShape({
       _shape$barWidth = shape.barWidth,
       barWidth = _shape$barWidth === void 0 ? 20 : _shape$barWidth;
 
-    // 右上点
+    // Top-right point
     var c0 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 左上点
+    // Top-left point
     var c1 = [shape.x - barWidth + xAxisTranslation, shape.y];
-    // 左下点
+    // Bottom-left point
     var c2 = [xAxisPoint[0] - barWidth + xAxisTranslation, xAxisPoint[1]];
-    // 右下点
+    // Bottom-right point
     var c3 = [xAxisPoint[0] + 0 + xAxisTranslation, xAxisPoint[1]];
     ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
   }
 });
-// 绘制右侧面
+// Draw the right face
 var CubeRight = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -39,21 +39,21 @@ var CubeRight = echarts.graphic.extendShape({
       xAxisTranslation = _shape$xAxisTranslati2 === void 0 ? 0 : _shape$xAxisTranslati2,
       _shape$barWidth2 = shape.barWidth,
       barWidth = _shape$barWidth2 === void 0 ? 20 : _shape$barWidth2;
-    // 根据 barWidth 计算深度偏移，保持原有比例
+    // Compute the depth offset from barWidth, keeping the original ratio
     var depthOffset = barWidth * 8 / 20;
 
-    // 左上点
+    // Top-left point
     var c1 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 左下点
+    // Bottom-left point
     var c2 = [xAxisPoint[0] + 0 + xAxisTranslation, xAxisPoint[1]];
-    // 右下点
+    // Bottom-right point
     var c3 = [xAxisPoint[0] + depthOffset + xAxisTranslation, xAxisPoint[1] - 5];
-    // 右上点
+    // Top-right point
     var c4 = [shape.x + depthOffset + xAxisTranslation, shape.y - 5];
     ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
   }
 });
-// 绘制顶面
+// Draw the top face
 var CubeTop = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -64,31 +64,31 @@ var CubeTop = echarts.graphic.extendShape({
       xAxisTranslation = _shape$xAxisTranslati3 === void 0 ? 0 : _shape$xAxisTranslati3,
       _shape$barWidth3 = shape.barWidth,
       barWidth = _shape$barWidth3 === void 0 ? 20 : _shape$barWidth3;
-    // 根据 barWidth 计算偏移量，保持原有比例
-    var rightOffset = barWidth * 8 / 20; // 右侧偏移
-    var leftOffset = barWidth * 12 / 20; // 左侧偏移
+    // Compute offsets from barWidth, keeping the original ratio
+    var rightOffset = barWidth * 8 / 20; // Right offset
+    var leftOffset = barWidth * 12 / 20; // Left offset
 
-    // 右上点
+    // Top-right point
     var c1 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 右上点
+    // Top-right point
     var c2 = [shape.x + rightOffset + xAxisTranslation, shape.y - 5];
-    // 左上点
+    // Top-left point
     var c3 = [shape.x - leftOffset + xAxisTranslation, shape.y - 5];
-    // 左下点
+    // Bottom-left point
     var c4 = [shape.x - barWidth + xAxisTranslation, shape.y];
     ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
   }
 });
-// 注册三个面图形
+// Register the three face shapes
 echarts.graphic.registerShape("CubeFront", CubeFront);
 echarts.graphic.registerShape("CubeRight", CubeRight);
 echarts.graphic.registerShape("CubeTop", CubeTop);
 /**
- * 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
  */
 var bar3DSeries = function bar3DSeries(_colors) {
@@ -101,9 +101,9 @@ var bar3DSeries = function bar3DSeries(_colors) {
     _options$stack = options.stack,
     stack = _options$stack === void 0 ? false : _options$stack,
     stackBase = options.stackBase;
-  // 单根柱的视觉足迹为 [x - barWidth, x + depthOffset]（depthOffset 为 3D 深度）
+  // The visual footprint of a single bar is [x - barWidth, x + depthOffset] (depthOffset is the 3D depth)
   var depthOffset = barWidth * 8 / 20;
-  // 整组（堆叠时只有一根柱）相对类目刻度的居中补偿
+  // Centering compensation of the whole group (a single bar when stacked) relative to the category tick
   var groupSpan = stack ? 0 : Math.max(0, seriesCount - 1) * barGap;
   var centerOffset = (barWidth - depthOffset - groupSpan) / 2;
   var series = {
@@ -145,7 +145,7 @@ var bar3DSeries = function bar3DSeries(_colors) {
         };
       }
 
-      // 堆叠时从基底（下方各系列累计值）画到基底+自身值；非堆叠从 0 画起
+      // When stacked, draw from the base (accumulated value of the series below) to base + own value; otherwise draw from 0
       var stackBottom = stack ? (_stackBase$dataIndex = stackBase === null || stackBase === void 0 ? void 0 : stackBase[dataIndex]) !== null && _stackBase$dataIndex !== void 0 ? _stackBase$dataIndex : 0 : 0;
       var location = api.coord([value0, stackBottom + Number(value1)]);
       var bottomPoint = api.coord([value0, stackBottom]);

package/es/components/Chart/Bar/index.d.ts

@@ -9,15 +9,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;
 }
 declare const ChartBar: React.FC<ChartBarProps>;

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

@@ -51,13 +51,13 @@ var ChartBar = function ChartBar(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("bar");
 
-    // 处理 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 ChartBar = function ChartBar(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 ChartBar = function ChartBar(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 ChartBar = function ChartBar(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,
@@ -177,26 +177,26 @@ var ChartBar = function ChartBar(props) {
     return option;
   }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, 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;
@@ -213,7 +213,7 @@ var ChartBar = function ChartBar(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;
@@ -222,7 +222,7 @@ var ChartBar = function ChartBar(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)
@@ -230,22 +230,22 @@ var ChartBar = function ChartBar(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);
     };
@@ -254,7 +254,7 @@ var ChartBar = function ChartBar(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;
@@ -274,7 +274,7 @@ var ChartBar = function ChartBar(props) {
       (_chartInstanceRef$cur4 = chartInstanceRef.current) === null || _chartInstanceRef$cur4 === void 0 || _chartInstanceRef$cur4.on("datazoom", handleDataZoom);
     }
 
-    // 图例自动滚动（参考 Pie 组件）
+    // Legend auto-scroll (modeled on the Pie component)
     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;
@@ -292,7 +292,7 @@ var ChartBar = function ChartBar(props) {
       });
     }
 
-    // 清理函数
+    // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
       if (onClick) {
@@ -314,7 +314,7 @@ var ChartBar = function ChartBar(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;
@@ -338,15 +338,15 @@ var ChartBar = function ChartBar(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/Bubble/index.d.ts

@@ -7,17 +7,17 @@ export interface BubbleDataItem {
     [key: string]: unknown;
 }
 export interface ChartBubbleProps extends ChartCommonProps {
-    /** 气泡图数据 */
+    /** Bubble chart data */
     data: BubbleDataItem[];
-    /** 自定义颜色列表 */
+    /** Custom color list */
     colorList?: echarts.Color[];
-    /** 图表标题 */
+    /** Chart title */
     chartTitle?: string;
-    /** 气泡标签字体大小 */
+    /** Bubble label font size */
     fontSize?: number;
-    /** 图表实例回调 */
+    /** Chart instance callback */
     onChart?: (chart: echarts.EChartsType) => void;
-    /** 点击事件 */
+    /** Click event */
     onClick?: (event: echarts.ECElementEvent) => void;
 }
 declare const Bubble: React.FC<ChartBubbleProps>;