kd-lane-chart-v3 0.1.21 → 0.1.22

package/dist/esm/index.js

@@ -3776,6 +3776,15 @@ const _sfc_main$8 = /* @__PURE__ */ Object.assign({
   emits: ["updateLine"],
   setup(__props, { emit: __emit }) {
     const { formatParamLabel: formatParamLabel2, currentLocale } = useKdI18n();
+    function headerScale(setValue, fallback) {
+      if (setValue !== void 0 && setValue !== null && setValue !== "" && Number.isFinite(Number(setValue))) {
+        return Number(setValue);
+      }
+      if (fallback !== void 0 && fallback !== null && fallback !== "" && Number.isFinite(Number(fallback))) {
+        return Number(fallback);
+      }
+      return 0;
+    }
     const props = __props;
     const emit = __emit;
     function getFontSize(type) {
@@ -3921,7 +3930,7 @@ const _sfc_main$8 = /* @__PURE__ */ Object.assign({
         onClick: toggleIsUsed
       }, [
         createElementVNode("div", _hoisted_1$8, [
-          createElementVNode("span", _hoisted_2$7, toDisplayString(__props.line.min || __props.lineRange[__props.line.lineId] && __props.lineRange[__props.line.lineId].min || 0), 1),
+          createElementVNode("span", _hoisted_2$7, toDisplayString(headerScale(__props.line.min, __props.lineRange[__props.line.lineId] && __props.lineRange[__props.line.lineId].min)), 1),
           createElementVNode("div", _hoisted_3$6, [
             createElementVNode("div", {
               class: "paramsTitle",
@@ -3933,7 +3942,7 @@ const _sfc_main$8 = /* @__PURE__ */ Object.assign({
               style: normalizeStyle(getFontSize("data"))
             }, toDisplayString(getCurrentData()), 5)) : createCommentVNode("", true)
           ]),
-          createElementVNode("span", _hoisted_4$6, toDisplayString(__props.line.max || __props.lineRange[__props.line.lineId] && __props.lineRange[__props.line.lineId].max || 0), 1),
+          createElementVNode("span", _hoisted_4$6, toDisplayString(headerScale(__props.line.max, __props.lineRange[__props.line.lineId] && __props.lineRange[__props.line.lineId].max)), 1),
           createElementVNode("div", {
             class: "gradient-display",
             style: normalizeStyle(gradientDisplay.value)
@@ -3943,7 +3952,7 @@ const _sfc_main$8 = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const HeaderItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-bea65042"]]);
+const HeaderItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-9b99d168"]]);
 const _hoisted_1$7 = { class: "legend-label" };
 const _hoisted_2$6 = { class: "legend-content" };
 const _hoisted_3$5 = { class: "scale-left" };
@@ -4014,6 +4023,15 @@ const _sfc_main$7 = /* @__PURE__ */ Object.assign({
   emits: ["updateLine"],
   setup(__props, { emit: __emit }) {
     const { formatParamLabel: formatParamLabel2, $kdInnerTrans, currentLocale } = useKdI18n();
+    function headerScale(setValue, fallback) {
+      if (setValue !== void 0 && setValue !== null && setValue !== "" && Number.isFinite(Number(setValue))) {
+        return Number(setValue);
+      }
+      if (fallback !== void 0 && fallback !== null && fallback !== "" && Number.isFinite(Number(fallback))) {
+        return Number(fallback);
+      }
+      return 0;
+    }
     const props = __props;
     const emit = __emit;
     function getParamName() {
@@ -4092,7 +4110,7 @@ const _sfc_main$7 = /* @__PURE__ */ Object.assign({
       }, [
         createElementVNode("div", _hoisted_1$7, toDisplayString(getParamName()), 1),
         createElementVNode("div", _hoisted_2$6, [
-          createElementVNode("div", _hoisted_3$5, toDisplayString(__props.line.min || 0), 1),
+          createElementVNode("div", _hoisted_3$5, toDisplayString(headerScale(__props.line.min, __props.lineRange[__props.line.lineId] && __props.lineRange[__props.line.lineId].min)), 1),
           createElementVNode("div", {
             class: "legend-lines",
             style: normalizeStyle({ flexDirection: __props.formCache.displayType == "header" ? "column" : "row" })
@@ -4115,13 +4133,13 @@ const _sfc_main$7 = /* @__PURE__ */ Object.assign({
               ], 12, _hoisted_4$5);
             }), 128))
           ], 4),
-          createElementVNode("div", _hoisted_8$2, toDisplayString(__props.line.max || 20), 1)
+          createElementVNode("div", _hoisted_8$2, toDisplayString(headerScale(__props.line.max, __props.lineRange[__props.line.lineId] && __props.lineRange[__props.line.lineId].max)), 1)
         ])
       ], 4);
     };
   }
 });
-const LegendItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-bd30757b"]]);
+const LegendItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-a7582d60"]]);
 const TREND_LINE_STYLE = {
   stroke: "#FF9800",
   lineWidth: 2,
@@ -12456,7 +12474,7 @@ const _hoisted_2$2 = {
   key: 1,
   class: "kd-depth-axis-labels"
 };
-const _hoisted_3$1 = ["onMouseenter", "onClick"];
+const _hoisted_3$1 = ["onMouseenter", "onMouseleave", "onClick"];
 const _hoisted_4$1 = ["onClick"];
 const _hoisted_5 = ["onClick"];
 const _sfc_main$2 = /* @__PURE__ */ Object.assign({
@@ -12687,6 +12705,8 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
     const currentContextMenuType = ref(null);
     const activeSubMenu = ref(null);
     const subMenuDirection = ref("right");
+    const subMenuOffsetTop = ref(0);
+    const subMenuOffsetLeft = ref(0);
     const params = ref([]);
     const contextItem = ref(void 0);
     const realTimeData = ref([]);
@@ -12776,6 +12796,8 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
       currentContextMenuType,
       activeSubMenu,
       subMenuDirection,
+      subMenuOffsetTop,
+      subMenuOffsetLeft,
       params,
       contextItem,
       realTimeData,
@@ -12903,6 +12925,8 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         if (proxy._isUnmounted || !proxy._chartRedrawQueued) return;
         proxy._chartRedrawQueued = false;
         if (proxy.isUpdatingChart) {
+          proxy._pendingOnlyLaneIds = void 0;
+          proxy._pendingFullChart = true;
           proxy.pendingChartUpdate = true;
           return;
         }
@@ -13865,7 +13889,8 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
       const tipH = content[1] || 80;
       const viewW = view[0] || 200;
       const viewH = view[1] || 400;
-      const cy = Array.isArray(point) && Number.isFinite(point[1]) ? point[1] : 0;
+      const anchored = Number(proxy._tooltipAnchorY);
+      const cy = Number.isFinite(anchored) ? anchored : Array.isArray(point) && Number.isFinite(point[1]) ? point[1] : 0;
       let x = 4;
       let y = cy + 12;
       if (y + tipH > viewH - 4) y = Math.max(4, cy - tipH - 12);
@@ -13875,7 +13900,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
     function getLaneTooltipExtraCss() {
       return "pointer-events: none !important; max-width: 92%; box-sizing: border-box; white-space: normal; word-break: break-all;";
     }
-    function buildHelperTipRailData(helperX, groupMin, groupMax, steps = 48) {
+    function buildHelperTipRailData(helperX, groupMin, groupMax, steps = 400) {
       const lo = Number(groupMin);
       const hi = Number(groupMax);
       const x = Number(helperX);
@@ -13982,6 +14007,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
           proxy._lastAxisPx.set(chart, axisKey);
           const canShowTip = needTip && proxy.shouldShowTooltipContent(laneId) && lane && lane.lines && lane.lines.length > 0 && proxy.laneHasAnyValidPlotPoint(chart, laneId);
           if (canShowTip) {
+            if (Number.isFinite(y)) proxy._tooltipAnchorY = y;
             const tipKey = `${axisKey}:${Number(yValue).toFixed(2)}`;
             proxy._lastTipKey.set(chart, tipKey);
             const helperHit = proxy.findHelperTooltipAnchor(
@@ -14099,6 +14125,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
     }
     function applyWindowChartPan(native) {
       if (!proxy._isPanning || proxy._windowPanStartY == null || !native) return;
+      proxy._pendingDepthWindow = null;
       const clientY = native.clientY;
       if (!Number.isFinite(clientY)) return;
       const h = proxy.getChartPlotHeightPx();
@@ -14148,15 +14175,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         });
         if (!proxy._isPanning) proxy.trendLineManager.endFollowView();
       }
-      if (!proxy._isPanning && !proxy.isUpdatingChart) {
-        if (proxy._needFullChartAfterInteract) {
-          proxy._needFullChartAfterInteract = false;
-          proxy.updateLanesChartOption();
-        } else {
-          proxy.patchVisibleSeries();
-          proxy.scheduleAllDepthAxisLabelSync();
-        }
-      }
+      if (!proxy._isPanning) flushInteractionPaint();
       proxy.flushVisibleDataChange();
       proxy.restorePointerAfterInteract();
     }
@@ -14170,24 +14189,44 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         });
         proxy.trendLineManager.endFollowView();
       }
-      if (!proxy.isUpdatingChart) {
-        if (proxy._needFullChartAfterInteract) {
-          proxy._needFullChartAfterInteract = false;
-          proxy.updateLanesChartOption();
-        } else {
-          proxy.patchVisibleSeries();
-          proxy.scheduleAllDepthAxisLabelSync();
-        }
-      }
+      flushInteractionPaint();
       proxy.flushVisibleDataChange();
       proxy.restorePointerAfterInteract();
     }
+    function flushInteractionPaint() {
+      if (proxy._isUnmounted) return;
+      if (proxy.isUpdatingChart) {
+        proxy._pendingInteractionPatch = true;
+        return;
+      }
+      proxy._pendingInteractionPatch = false;
+      if (proxy._needFullChartAfterInteract) {
+        proxy._needFullChartAfterInteract = false;
+        proxy.updateLanesChartOption();
+        return;
+      }
+      proxy.patchVisibleSeries();
+      proxy.scheduleAllDepthAxisLabelSync();
+    }
+    function scheduleDeferredFullPaint() {
+      proxy._needFullChartAfterInteract = true;
+      if (proxy._interactFullTimer) return;
+      proxy._interactFullTimer = setTimeout(() => {
+        proxy._interactFullTimer = 0;
+        if (proxy._isUnmounted) return;
+        flushInteractionPaint();
+      }, 80);
+    }
     function scheduleInteractionPatch() {
       if (proxy._interactPatchRaf) return;
       proxy._interactPatchRaf = requestAnimationFrame(() => {
         proxy._interactPatchRaf = 0;
         if (proxy._isUnmounted) return;
-        if (!proxy.isUpdatingChart) proxy.patchVisibleSeries();
+        if (proxy.isUpdatingChart) {
+          proxy._pendingInteractionPatch = true;
+          return;
+        }
+        proxy.patchVisibleSeries();
       });
     }
     function dispatchVisibleDataChange(val) {
@@ -14361,11 +14400,31 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         });
       });
     }
+    function templateLayoutKey(template) {
+      const lanes = template && template.lanes || [];
+      let key = "";
+      for (let i = 0; i < lanes.length; i++) {
+        const lane = lanes[i];
+        if (i) key += "|";
+        key += lane && lane.laneId != null ? lane.laneId : "";
+        key += ":";
+        const lines = lane && lane.lines || [];
+        for (let j = 0; j < lines.length; j++) {
+          if (j) key += ",";
+          const line = lines[j];
+          key += line && line.lineId != null ? line.lineId : "";
+        }
+      }
+      return key;
+    }
     async function templateChange(template) {
-      if (template && template === proxy.currentTemplate) {
+      const sameRef = !!(template && template === proxy.currentTemplate);
+      const layoutKey = templateLayoutKey(template || proxy.currentTemplate);
+      if (sameRef && layoutKey === proxy._templateLayoutKey) {
         return;
       }
-      proxy.currentTemplate = template;
+      if (!sameRef) proxy.currentTemplate = template;
+      proxy._templateLayoutKey = layoutKey;
       proxy.getLatestLineDataByParamCode();
       let migratedLanes = null;
       if (proxy.trendLineManager) {
@@ -14808,7 +14867,66 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
       const next = proxy.resolveAllowedScale(metersPerCm, metersPerCm);
       proxy.syncScaleSelection(next);
     }
+    function axisBoundIsSet(v) {
+      return v !== void 0 && v !== null && v !== "" && Number.isFinite(Number(v));
+    }
+    function collectRelatedAxisValues(lineInfo, rows, axisKey) {
+      const values = [];
+      if (!lineInfo || !rows || !rows.length) return values;
+      const ids = [];
+      if (lineInfo.paramId) ids.push(lineInfo.paramId);
+      if (lineInfo.recommendParamId && (lineInfo.recommendIsUsed === "1" || lineInfo.recommendIsUsed == 1)) {
+        ids.push(lineInfo.recommendParamId);
+      }
+      if (lineInfo.upperParamId) ids.push(lineInfo.upperParamId);
+      if (lineInfo.lowerParamId) ids.push(lineInfo.lowerParamId);
+      const seen = /* @__PURE__ */ new Set();
+      for (let i = 0; i < ids.length; i++) {
+        const id = ids[i];
+        const key = String(id);
+        if (seen.has(key)) continue;
+        seen.add(key);
+        const series = proxy.generateSeriesData(rows, { paramId: id }, axisKey);
+        for (let j = 0; j < series.length; j++) {
+          const raw = series[j] && series[j][0];
+          if (isMissingCurveValue(raw)) continue;
+          const n = Number(raw);
+          if (Number.isFinite(n)) values.push(n);
+        }
+      }
+      return values;
+    }
+    function axisSamplesForLine(lineInfo, rows, axisKey, mainSeries) {
+      if (!lineInfo) return mainSeries || [];
+      if (axisBoundIsSet(lineInfo.min) && axisBoundIsSet(lineInfo.max)) {
+        return mainSeries || [];
+      }
+      const full = proxy.realTimeData;
+      const sampleRows = Array.isArray(full) && full.length ? full : rows;
+      const related = collectRelatedAxisValues(lineInfo, sampleRows, axisKey);
+      return related.length ? related : mainSeries || [];
+    }
+    function laneOptionHasCurve(option) {
+      const series = option && option.series;
+      if (!series || !series.length) return false;
+      for (let i = 0; i < series.length; i++) {
+        const item = series[i];
+        if (!item || !item.data || !item.data.length) continue;
+        const name = item.name;
+        if (name === "helper" || name === "log-grid" || name === "trend") continue;
+        return true;
+      }
+      return false;
+    }
     function getXAxisRangeByHeader(lineInfo, validData = []) {
+      const lineIdEarly = lineInfo && lineInfo.lineId;
+      if (proxy._freezeAxisRange && lineIdEarly != null) {
+        const store = proxy._lineRangeDraft || proxy.lineRange || {};
+        const prev = store[lineIdEarly];
+        if (prev && Number.isFinite(Number(prev.min)) && Number.isFinite(Number(prev.max))) {
+          return { min: Number(prev.min), max: Number(prev.max) };
+        }
+      }
       let headerMin = 0;
       let headerMax = 1;
       const numericValues = (validData || []).reduce((acc, item) => {
@@ -15747,7 +15865,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         const gridCount = proxy.readGridCount(chart);
         if (!gridCount || gridCount !== groups.length) {
           if (proxy._isZooming || proxy._isPanning || proxy._isWheelAnimating) {
-            proxy._needFullChartAfterInteract = true;
+            scheduleDeferredFullPaint();
             return;
           }
           if (!proxy.isUpdatingChart) proxy.updateLanesChartOption();
@@ -15895,7 +16013,8 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
           }))
         };
         try {
-          chart.setOption(patch, { lazyUpdate: true, silent: true });
+          const liveInteract = !!(proxy._isPanning || proxy._isZooming || proxy._isWheelAnimating);
+          chart.setOption(patch, { lazyUpdate: liveInteract, silent: true });
         } catch (e) {
         }
       });
@@ -16236,6 +16355,8 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         await nextTick();
         if (proxy._isUnmounted) return;
         if (proxy.isUpdatingChart) {
+          proxy._pendingOnlyLaneIds = void 0;
+          proxy._pendingFullChart = true;
           proxy.pendingChartUpdate = true;
           return;
         }
@@ -16443,6 +16564,26 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
       }
       return null;
     }
+    function buildSyncedAxisPointer(show) {
+      return {
+        show: !!show,
+        snap: false,
+        type: "line",
+        triggerTooltip: false,
+        z: 999,
+        animation: false,
+        label: {
+          show: !!show,
+          backgroundColor: `${getCssVariable("--kd-lane-container-border-color")}99`,
+          color: `${getCssVariable("--default-text-color")}`,
+          formatter: () => proxy._lastTooltipAxisLabel || ""
+        },
+        lineStyle: {
+          type: "dashed",
+          width: 1
+        }
+      };
+    }
     function getDefaultLaneChartOption() {
       const option = {
         backgroundColor: getCssVariable("--kd-lane-container-item-bg"),
@@ -16506,9 +16647,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
             axisTick: {
               show: false
             },
-            axisPointer: {
-              show: true
-            }
+            axisPointer: buildSyncedAxisPointer(true)
           }
         ],
         dataZoom: [proxy.buildInsideDataZoom()],
@@ -16516,7 +16655,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         tooltip: {
           show: true,
           showContent: proxy.showTooltip,
-          trigger: "axis",
+          trigger: "item",
           triggerOn: "none",
           triggerEmphasis: false,
           enterable: false,
@@ -16544,7 +16683,9 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
           backgroundColor: getCssVariable("--tooltip-bg-color"),
           borderWidth: 0,
           textStyle: {
-            color: getCssVariable("--default-text-color")
+            color: getCssVariable("--default-text-color"),
+            fontSize: 12,
+            fontFamily: "Arial, sans-serif"
           },
           formatter: () => proxy.renderLaneTooltipHtml(proxy._tooltipLaneId)
         }
@@ -16605,6 +16746,12 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
     async function updateLanesChartOption(transferData, onlyLaneIds) {
       if (proxy._isUnmounted) return;
       if (proxy.isUpdatingChart) {
+        if (onlyLaneIds == null || onlyLaneIds === "" || onlyLaneIds === "series") {
+          proxy._pendingOnlyLaneIds = void 0;
+          proxy._pendingFullChart = true;
+        } else if (!proxy._pendingFullChart) {
+          proxy._pendingOnlyLaneIds = onlyLaneIds;
+        }
         proxy.pendingChartUpdate = true;
         return;
       }
@@ -16625,6 +16772,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         proxy.isUpdatingChart = false;
         return;
       }
+      proxy._freezeAxisRange = !!(laneFilter && laneFilter.size);
       const axisKey = proxy.currentToolBarConfig.axisTypeList && proxy.currentToolBarConfig.axisTypeList[proxy.formCache.axisType] || (proxy.formCache.axisType === "time" ? "time" : "depth");
       const paramNameMap = {};
       const paramCodeMap = /* @__PURE__ */ new Map();
@@ -16748,7 +16896,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
                   fontSize: 12,
                   color: getCssVariable("--default-text-color")
                 },
-                axisPointer: { show: hasValidLineData }
+                axisPointer: buildSyncedAxisPointer(hasValidLineData)
               });
               if (proxy.formCache.axisType === "depth") {
                 applyDepthYAxisInterval(
@@ -16849,7 +16997,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
                   const allValidData = seriesDataCache2[lineInfo.lineId].full;
                   const { min, max } = proxy.getXAxisRangeByHeader(
                     lineInfo,
-                    allValidData
+                    axisSamplesForLine(lineInfo, realTimeData2, axisKey, allValidData)
                   );
                   const xAxisIndex = option.xAxis.length;
                   if (tipAnchorXAxisIndex < 0) {
@@ -17068,8 +17216,12 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
                       groupMax
                     ),
                     lineStyle: { opacity: 0, width: 0 },
-                    symbol: "none",
-                    // silent/large 都会让 showTip(seriesIndex) 失效
+                    // 要有图形元素，trigger=item 的 showTip 才能出框；点本身不画出来
+                    showSymbol: true,
+                    symbol: "circle",
+                    symbolSize: 1,
+                    itemStyle: { opacity: 0 },
+                    emphasis: { disabled: true, scale: false },
                     silent: false,
                     large: false,
                     tooltip: { show: true },
@@ -17100,11 +17252,15 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
             option.tooltip.formatter = () => proxy.renderLaneTooltipHtml(laneId);
           }
           if (proxy.trendLineManager) proxy.trendLineManager.appendSeriesToOption(option, lane);
+          if (proxy._freezeAxisRange && lane.lines && lane.lines.length && !laneOptionHasCurve(option) && laneOptionHasCurve(proxy.getOptionsByLineId(lane.laneId))) {
+            continue;
+          }
           proxy.updateOptionsByLineId(lane.laneId, option);
         }
       } catch (error) {
         console.error("updateLanesChartOption error:", error);
       } finally {
+        proxy._freezeAxisRange = false;
         proxy.commitLineRangeBatch();
         proxy.isUpdatingChart = false;
         if (proxy._isUnmounted) {
@@ -17145,10 +17301,23 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
           });
         }
         if (proxy.pendingChartUpdate) {
+          const pendingOnly = proxy._pendingFullChart ? void 0 : proxy._pendingOnlyLaneIds;
           proxy.pendingChartUpdate = false;
+          proxy._pendingFullChart = false;
+          proxy._pendingOnlyLaneIds = void 0;
+          proxy._pendingInteractionPatch = false;
+          proxy._needFullChartAfterInteract = false;
           nextTick(() => {
             if (proxy._isUnmounted) return;
-            proxy.updateLanesChartOption(transferData);
+            proxy.updateLanesChartOption(
+              pendingOnly == null ? transferData : void 0,
+              pendingOnly
+            );
+          });
+        } else if (proxy._pendingInteractionPatch) {
+          nextTick(() => {
+            if (proxy._isUnmounted) return;
+            flushInteractionPaint();
           });
         }
       }
@@ -17287,18 +17456,25 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
       const lane = proxy.findLaneById(laneId);
       const row = yValue != null ? proxy.findRowByAxisValue(yValue) || {} : {};
       const displaySeries = proxy.buildLaneTooltipSeries(lane, row, yValue);
+      const mouse = proxy.buildTooltipMousePositionData(row);
+      const textColor = getCssVariable("--default-text-color") || "";
       if (proxy.tooltipFormatter && typeof proxy.tooltipFormatter === "function") {
         return proxy.tooltipFormatter({
           series: displaySeries,
-          mousePositionData: proxy.buildTooltipMousePositionData(row)
+          mousePositionData: mouse
         });
       }
-      let html = "<div>";
+      let html = `<div style="padding:4px;font-family:Arial,sans-serif;color:${textColor}">`;
       for (let i = 0; i < displaySeries.length; i++) {
         const params2 = displaySeries[i];
         const { seriesName, value, color } = params2;
         const xValue = Array.isArray(value) ? value[0] : value;
-        html += `<div style="display:flex;align-items:center"><div style="height:10px;width:10px;font-size:10px;border-radius:8px;background-color:${color}"></div><span style="margin-left:8px;font-size:12px">${seriesName}:${xValue}</span></div>`;
+        const marker = color || "transparent";
+        html += `<div style="display:flex;align-items:center;margin-bottom:4px"><div style="width:12px;height:12px;min-width:12px;min-height:12px;flex:0 0 12px;border-radius:50%;background-color:${marker};margin-right:8px"></div><span style="flex:1;min-width:0;font-size:12px;color:${textColor}">${seriesName}: ${xValue}</span></div>`;
+      }
+      const time = mouse && mouse.time ? mouse.time : "";
+      if (time) {
+        html += `<div style="margin-top:8px;font-size:11px;color:${textColor}">${$kdInnerTrans("kdLaneChart.tooltip.timestamp")}: ${time}</div>`;
       }
       html += "</div>";
       return html;
@@ -18081,11 +18257,30 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
       proxy.currentContextMenuItems = [];
       proxy.activeSubMenu = null;
       proxy.subMenuDirection = "right";
+      proxy.subMenuOffsetTop = 0;
+      proxy.subMenuOffsetLeft = 0;
       proxy.menuWidth = null;
       proxy.menuHeight = null;
     }
+    function hideSubMenu(item) {
+      if (item && proxy.activeSubMenu !== item) return;
+      proxy.activeSubMenu = null;
+    }
+    function subMenuLayoutStyle(left, top) {
+      return {
+        left: `${left || 0}px`,
+        right: "auto",
+        top: `${top || 0}px`,
+        marginLeft: "0",
+        marginRight: "0"
+      };
+    }
     function showSubMenu(item, event) {
       event.stopPropagation();
+      if (!item || !item.children || !item.children.length) {
+        proxy.activeSubMenu = null;
+        return;
+      }
       proxy.activeSubMenu = item;
       const parentMenuItem = event.currentTarget;
       nextTick(() => {
@@ -18093,22 +18288,44 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         const subMenu = parentMenuItem == null ? void 0 : parentMenuItem.querySelector(".sub-menu");
         if (!container || !parentMenuItem || !subMenu) return;
         subMenu.style.visibility = "hidden";
-        const containerRect = container.getBoundingClientRect();
+        subMenu.style.maxHeight = "";
+        subMenu.style.overflowY = "";
+        const bounds = container.getBoundingClientRect();
+        const view = {
+          left: Math.max(bounds.left, 0),
+          top: Math.max(bounds.top, 0),
+          right: Math.min(bounds.right, window.innerWidth),
+          bottom: Math.min(bounds.bottom, window.innerHeight)
+        };
+        const gap = 8;
         const parentRect = parentMenuItem.getBoundingClientRect();
-        const subMenuWidth = subMenu.offsetWidth;
-        const rightAvailable = containerRect.right - parentRect.right;
-        proxy.subMenuDirection = rightAvailable >= subMenuWidth ? "right" : "left";
-        subMenu.style.visibility = "";
+        const maxH = Math.max(40, view.bottom - view.top - 8);
+        if (subMenu.offsetHeight > maxH) {
+          subMenu.style.maxHeight = `${maxH}px`;
+          subMenu.style.overflowY = "auto";
+        }
+        const subW = subMenu.offsetWidth;
+        const subH = subMenu.offsetHeight;
+        const spaceRight = view.right - parentRect.right - gap;
+        const spaceLeft = parentRect.left - view.left - gap;
+        const openRight = spaceRight >= subW || spaceRight >= spaceLeft;
+        let leftEdge = openRight ? parentRect.right + gap : parentRect.left - gap - subW;
+        if (leftEdge + subW > view.right) leftEdge = view.right - subW;
+        if (leftEdge < view.left) leftEdge = view.left;
+        let top = 0;
+        const bottomOverflow = parentRect.top + subH - view.bottom;
+        if (bottomOverflow > 0) top -= bottomOverflow;
+        const topEdge = parentRect.top + top;
+        if (topEdge < view.top) top += view.top - topEdge;
+        const direction = leftEdge + subW / 2 >= parentRect.left + parentRect.width / 2 ? "right" : "left";
+        proxy.subMenuDirection = direction;
+        proxy.subMenuOffsetTop = top;
+        proxy.subMenuOffsetLeft = leftEdge - parentRect.left;
+        Object.assign(subMenu.style, subMenuLayoutStyle(proxy.subMenuOffsetLeft, top), { visibility: "visible" });
       });
     }
     function getSubMenuStyle() {
-      return {
-        left: proxy.subMenuDirection === "right" ? "100%" : "auto",
-        right: proxy.subMenuDirection === "right" ? "auto" : "100%",
-        top: 0,
-        marginLeft: proxy.subMenuDirection === "right" ? "4px" : "auto",
-        marginRight: proxy.subMenuDirection === "right" ? "auto" : "4px"
-      };
+      return subMenuLayoutStyle(proxy.subMenuOffsetLeft, proxy.subMenuOffsetTop);
     }
     function handleContextMenuItemClick(item) {
       if (item.action === "deleteTrendKnot") {
@@ -18844,7 +19061,8 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
               ...proxy.getPaperGridAxisStyle(
                 !isDepthLane,
                 ySplitCount
-              )
+              ),
+              axisPointer: isDepthLane ? { show: false } : buildSyncedAxisPointer(true)
             };
             if (proxy.formCache.axisType === "depth") {
               applyDepthYAxisInterval(yAxisItem, groupMin, groupMax);
@@ -18902,7 +19120,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
                   );
                   const { min, max } = proxy.getXAxisRangeByHeader(
                     lineInfo,
-                    allSeriesData
+                    axisSamplesForLine(lineInfo, realTimeData2, axisKey, allSeriesData)
                   );
                   const isLogScale = isLaneLogScale(lane);
                   const plotRange = isLogScale ? resolveLaneLogPlotRange(lane, proxy.getLineRangeStore()) : null;
@@ -20258,7 +20476,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         class: "kd-lane-chart-lane-container-echart",
         ref_key: "chartAreaWrap",
         ref: chartAreaWrap,
-        onMouseenter: _cache[0] || (_cache[0] = ($event) => pointerInChartArea.value = true),
+        onMouseenter: _cache[1] || (_cache[1] = ($event) => pointerInChartArea.value = true),
         onMouseleave: hideAllLaneTooltips
       }, [
         createElementVNode("div", {
@@ -20432,13 +20650,14 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
                   key: 0,
                   class: "context-menu-item has-children",
                   onMouseenter: ($event) => showSubMenu(item, $event),
+                  onMouseleave: ($event) => hideSubMenu(item),
                   onClick: ($event) => handleContextMenuItemClick(item)
                 }, [
                   createElementVNode("span", null, toDisplayString(item.label), 1),
-                  _cache[1] || (_cache[1] = createElementVNode("span", { class: "arrow" }, "›", -1)),
+                  _cache[2] || (_cache[2] = createElementVNode("span", { class: "arrow" }, "›", -1)),
                   activeSubMenu.value === item ? (openBlock(), createElementBlock("div", {
                     key: 0,
-                    class: "context-menu sub-menu",
+                    class: normalizeClass(["context-menu sub-menu", subMenuDirection.value === "left" ? "is-left" : "is-right"]),
                     style: normalizeStyle(getSubMenuStyle())
                   }, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (child, childIndex) => {
@@ -20450,14 +20669,15 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
                         createElementVNode("span", null, toDisplayString(child.label), 1)
                       ], 8, _hoisted_4$1);
                     }), 128))
-                  ], 4)) : createCommentVNode("", true)
+                  ], 6)) : createCommentVNode("", true)
                 ], 40, _hoisted_3$1)) : (openBlock(), createElementBlock("div", {
                   key: 1,
                   class: "context-menu-item",
+                  onMouseenter: _cache[0] || (_cache[0] = ($event) => hideSubMenu()),
                   onClick: withModifiers(($event) => handleContextMenuItemClick(item), ["stop"])
                 }, [
                   createElementVNode("span", null, toDisplayString(item.label), 1)
-                ], 8, _hoisted_5))
+                ], 40, _hoisted_5))
               ], 64);
             }), 128))
           ], 4)
@@ -20468,7 +20688,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const LineChartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-fcf148a1"]]);
+const LineChartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a716c99b"]]);
 const _hoisted_1$1 = ["title"];
 const _hoisted_2$1 = ["title"];
 const _sfc_main$1 = /* @__PURE__ */ Object.assign({
@@ -21286,7 +21506,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ name: "frameLayout", component
           children: [
             { label: "方式一", canTransfer: true },
             { label: "方式二", canTransfer: true },
-            { label: "方式三", canTransfer: true }
+            { label: "方式三", canTransfer: true },
+            { label: "方式四", canTransfer: true },
+            { label: "方式五", canTransfer: true }
           ]
         }
       ]
@@ -22203,7 +22425,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ name: "frameLayout", component
     };
   }
 });
-const FrameLayoutComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a17d7f29"]]);
+const FrameLayoutComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1326393c"]]);
 function installComponents(app) {
   installKdI18n(app);
   app.component(KdLaneContainerComponent.name, KdLaneContainerComponent);