@hsu-react/ui 0.0.13 → 0.0.14

package/src/components/ChainGraph/ChainGraphServices/TreeNode.ts

@@ -8,19 +8,19 @@ import G6, {
 import { getTextSize, NodeColor, NodeStyle } from ".";
 import { TreeGraphData } from "..";
 
-// ==================== 常量定义 ====================
-const DEFAULT_PADDING = 20; // 节点内边距
-const DEFAULT_LINE_HEIGHT = 18; // 行高
-const DEFAULT_LINE_GAP = 2; // 行间距
-const DEFAULT_ICON_RADIUS = 8; // 折叠图标半径
-const DEFAULT_PORT_WIDTH = 3; // 连接桩宽度
-const DEFAULT_PORT_HEIGHT = 18; // 连接桩高度
-const DEFAULT_FONT_SIZE = 16; // 树节点默认字体大小
-const DEFAULT_TEXT_COLOR = "#0c0d0e"; // 默认文本颜色
-const DEFAULT_BG_COLOR = "#fff"; // 默认背景颜色
-const DEFAULT_STROKE_COLOR = "#4096ff"; // 默认边框颜色
-const DEFAULT_HOVER_TEXT_COLOR = "#fff"; // 悬停时文本颜色
-const TEXT_WIDTH_TOLERANCE = 0.01; // 文本宽度容差
+// ==================== Constant definitions ====================
+const DEFAULT_PADDING = 20; // Node padding
+const DEFAULT_LINE_HEIGHT = 18; // Line height
+const DEFAULT_LINE_GAP = 2; // Line spacing
+const DEFAULT_ICON_RADIUS = 8; // Collapse icon radius
+const DEFAULT_PORT_WIDTH = 3; // Connection port width
+const DEFAULT_PORT_HEIGHT = 18; // Connection port height
+const DEFAULT_FONT_SIZE = 16; // Default font size for tree node
+const DEFAULT_TEXT_COLOR = "#0c0d0e"; // Default text color
+const DEFAULT_BG_COLOR = "#fff"; // Default background color
+const DEFAULT_STROKE_COLOR = "#4096ff"; // Default border color
+const DEFAULT_HOVER_TEXT_COLOR = "#fff"; // Text color on hover
+const TEXT_WIDTH_TOLERANCE = 0.01; // Text width tolerance
 
 interface TreeNodeProps {
   showPort?: boolean;
@@ -62,7 +62,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     render,
   } = styles || {};
 
-  // ==================== 文本样式 ====================
+  // ==================== Text styles ====================
   const _textStyle: ShapeStyle = {
     fill: DEFAULT_TEXT_COLOR,
     fontSize: DEFAULT_FONT_SIZE,
@@ -79,7 +79,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     ...textHoverStyle,
   };
 
-  // ==================== 背景样式 ====================
+  // ==================== Background styles ====================
   const _bgStyle: ShapeStyle = {
     fill: DEFAULT_BG_COLOR,
     stroke: DEFAULT_STROKE_COLOR,
@@ -98,7 +98,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     ...hoverBgStyle,
   };
 
-  // ==================== 展开折叠Icon样式 ====================
+  // ==================== Expand/collapse icon style ====================
   const _collapseIconStyle: ShapeStyle = {
     stroke: DEFAULT_STROKE_COLOR,
     lineWidth: 1,
@@ -106,17 +106,17 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     ...collapseIconStyle,
   };
 
-  // ==================== 连接桩样式 ====================
+  // ==================== Connection port style ====================
   const _portStyle: ShapeStyle = {
     fill: DEFAULT_STROKE_COLOR,
   };
 
-  // ==================== 配置 ====================
+  // ==================== Options ====================
   const options = {
     styles: {},
   };
 
-  // ==================== 获取颜色配置 ====================
+  // ==================== Get color config ====================
   const getColorConfig = (item: Item) => {
     const index = (item._cfg?.model?.level as number) - rootLevel;
     const colorArrayLength = colors.length + 1;
@@ -127,7 +127,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     };
   };
 
-  // ==================== 设置状态 ====================
+  // ==================== Set state ====================
   const setState = (name?: string, value?: string | boolean, item?: Item) => {
     if (!item) return;
 
@@ -138,7 +138,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
 
     const { color, hoverColor, selectedColor } = getColorConfig(item);
 
-    // 处理折叠状态
+    // Handle collapse state
     if (name === "collapse") {
       collapseShape?.attr({
         symbol: value ? G6.Marker.collapse : G6.Marker.expand,
@@ -146,7 +146,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       return;
     }
 
-    // 处理悬停状态
+    // Handle hover state
     if (name === "hover" && !item.hasState("click") && hasHover) {
       const isHover = Boolean(value);
       const renderStyle = render?.(
@@ -175,7 +175,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       return;
     }
 
-    // 处理选中状态
+    // Handle selected state
     if (name === "click" && hasSelected) {
       const isSelected = Boolean(value);
       const renderStyle = render?.(
@@ -204,7 +204,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     }
   };
 
-  // ==================== 文本换行处理 ====================
+  // ==================== Text wrapping ====================
   const wrapText = (label: string, maxWidth: number): string[] => {
     const lines: string[] = [];
     let currentLine = "";
@@ -229,7 +229,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     return lines.length > 0 ? lines : [label || ""];
   };
 
-  // ==================== 计算节点尺寸 ====================
+  // ==================== Calculate node size ====================
   const calculateNodeSize = (
     label: string,
     fontSize: number
@@ -250,7 +250,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     return { width: nodeWidth, height: nodeHeight, lines };
   };
 
-  // ==================== 计算文本位置 ====================
+  // ==================== Calculate text position ====================
   const calculateTextPosition = (
     lineWidth: number,
     nodeWidth: number,
@@ -267,7 +267,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     return -lineWidth + nodeWidth / 2 - DEFAULT_PADDING;
   };
 
-  // ==================== 绘制 ====================
+  // ==================== Draw ====================
   const draw = (cfg: ModelConfig, group: IGroup) => {
     const renderStyle = render?.(cfg, "default");
     cfg.textStyle = { ..._textStyle, ...renderStyle?.textStyle };
@@ -291,7 +291,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     cfg.height = nodeHeight;
     cfg.line = lineCount;
 
-    // 绘制背景
+    // Draw background
     const node = group.addShape("rect", {
       attrs: {
         ..._bgStyle,
@@ -306,7 +306,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       name: "rect-shape",
     });
 
-    // 绘制文本
+    // Draw text
     lines?.forEach((line, lineIndex) => {
       const { width: lineWidth } = getTextSize(line, _textStyle);
       const textX = calculateTextPosition(lineWidth, nodeWidth, direction);
@@ -329,7 +329,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       });
     });
 
-    // 绘制展开折叠图标
+    // Draw expand/collapse icon
     const hasChildren =
       cfg.children && (cfg.children as TreeGraphData[]).length > 0;
     if (hasChildren) {
@@ -350,7 +350,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       });
     }
 
-    // 绘制连接桩
+    // Draw connection port
     if (showPort) {
       const portX =
         direction === "right"
@@ -378,7 +378,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       });
     }
 
-    // 自定义形状
+    // Custom shapes
     if (addShape) {
       addShape(group, cfg);
     }

package/src/components/ChainGraph/ChainGraphServices/index.ts

@@ -22,10 +22,10 @@ import {
   edgeStyle,
 } from "../_utils";
 
-// 重新导出 getTextSize 以保持向后兼容
+// Re-export getTextSize for backward compatibility
 export { getTextSize };
 
-// ==================== 链图服务 ====================
+// ==================== Chain graph service ====================
 export interface NodeStyle {
   textStyle?: ShapeStyle;
   textSelectedStyle?: ShapeStyle;
@@ -154,7 +154,7 @@ export default class ChainGraphServices {
     const _root = { ...root };
     const _node = { maxWidth: 260, ...node };
 
-    /** 注册根节点 */
+    /** Register root node */
     G6.registerNode(
       "root-node",
       RootNode({
@@ -167,7 +167,7 @@ export default class ChainGraphServices {
       }),
       "rect"
     );
-    /** 注册树节点 */
+    /** Register tree node */
     G6.registerNode(
       "tree-node",
       TreeNode({
@@ -181,7 +181,7 @@ export default class ChainGraphServices {
       }),
       "rect"
     );
-    /** 注册箭头边 */
+    /** Register arrow edge */
     G6.registerEdge("arrow-edge", ArrowEdge({ styles: edge?.style }));
 
     const _layout = {
@@ -353,7 +353,7 @@ export default class ChainGraphServices {
     rendered?.(this);
   }
 
-  // ==================== 调整大小 ====================
+  // ==================== Resize ====================
   private _resize = (containerId: string) => {
     const graph = this._graph;
     const container = document.getElementById(containerId) as HTMLDivElement;
@@ -398,7 +398,7 @@ export default class ChainGraphServices {
     }
   };
 
-  // ==================== 设置MiniMap ====================
+  // ==================== Set MiniMap ====================
   public setMiniMap = (showMiniMap: boolean) => {
     if (!this._minimap) return;
 
@@ -411,7 +411,7 @@ export default class ChainGraphServices {
     }
   };
 
-  // ==================== 设置数据 ====================
+  // ==================== Set data ====================
   public setData = ({
     data,
     level = 1,
@@ -509,7 +509,7 @@ export default class ChainGraphServices {
     this._data = data;
   };
 
-  // ==================== 搜索 ====================
+  // ==================== Search ====================
   public onSearch = (searchVal: string) => {
     if (
       !this._graph ||
@@ -543,7 +543,7 @@ export default class ChainGraphServices {
     }
   };
 
-  // ==================== 展开所有节点 ====================
+  // ==================== Expand all nodes ====================
   public expandAll = ({
     allExpand,
     level = 1,
@@ -586,7 +586,7 @@ export default class ChainGraphServices {
     }
   };
 
-  // ==================== 修改布局 ====================
+  // ==================== Change layout ====================
   public changeLayout = (
     octopus: boolean,
     rootLevel: number = 1,

package/src/components/ChainGraph/_components/SearchSelect/index.module.scss

@@ -1,5 +1,5 @@
-// 定位容器给定 32px 固定高度，Select 通过 height:100% 填满它，
-// 避免 Select 根的 height:100% 直接相对图谱（绝对定位祖先）解析成整图高度而被拉伸。
+// The positioning container is given a fixed 32px height, and the Select fills it via height:100%,
+// preventing the Select root's height:100% from resolving against the graph (its absolutely positioned ancestor) and being stretched to the full graph height.
 .wrapper {
   position: absolute;
   top: 20px;

package/src/components/ChainGraph/_utils/findAncestorsOfNode.ts

@@ -1,11 +1,11 @@
 import { TreeGraphData } from "..";
 
 /**
- * 树结构找节点所有父节点
- * @param tree 树数据
- * @param targetNodeId 目标节点ID
- * @param childrenKey 子节点键名，默认为 "children"
- * @returns 祖先节点ID数组
+ * Find all ancestor nodes of a node in a tree structure
+ * @param tree Tree data
+ * @param targetNodeId Target node ID
+ * @param childrenKey Key name for child nodes, defaults to "children"
+ * @returns Array of ancestor node IDs
  */
 export function findAncestorsOfNode(
   tree: TreeGraphData,
@@ -16,24 +16,24 @@ export function findAncestorsOfNode(
 
   function traverse(node: TreeGraphData) {
     if (node.id === targetNodeId) {
-      // 找到目标节点
-      ancestors = [...ancestors, node.id]; // 将目标节点添加到祖先列表中（可选，取决于是否需要包含目标节点自身）
-      return true; // 停止遍历
+      // Target node found
+      ancestors = [...ancestors, node.id]; // Add the target node to the ancestor list (optional, depending on whether the target node itself should be included)
+      return true; // Stop traversal
     }
 
-    // 递归遍历子节点
+    // Recursively traverse child nodes
     if (node[childrenKey] && (node[childrenKey] as TreeGraphData[]).length) {
       (node[childrenKey] as TreeGraphData[])?.forEach(
         (child: TreeGraphData) => {
           if (traverse(child)) {
-            ancestors.push(node.id); // 如果子节点中找到了目标节点，将当前节点添加到祖先列表
-            return true; // 停止遍历
+            ancestors.push(node.id); // If the target node was found among the children, add the current node to the ancestor list
+            return true; // Stop traversal
           }
         }
       );
     }
 
-    return false; // 未找到目标节点
+    return false; // Target node not found
   }
 
   traverse(tree);

package/src/components/ChainGraph/_utils/getTextSize.ts

@@ -2,10 +2,10 @@ import { ShapeStyle } from "@antv/g6";
 import { get_string_size } from "hsu-utils";
 
 /**
- * 获取文字大小
- * @param text 文本内容
- * @param textStyle 文本样式
- * @returns 文本的宽度和高度
+ * Get text size
+ * @param text Text content
+ * @param textStyle Text style
+ * @returns Width and height of the text
  */
 export const getTextSize = (text: string, textStyle: ShapeStyle) => {
   if (!text) return { width: 0, height: 0 };

package/src/components/ChainGraph/_utils/styles.ts

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

package/src/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/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]);