kd-lane-chart-v3 0.1.22 → 0.1.23

package/dist/esm/index.js

@@ -13939,14 +13939,67 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
         }
       }
     }
+    function restoreCoveredAxisTicks() {
+      const covered = proxy._hoverCoveredTicks || [];
+      for (let i = 0; i < covered.length; i++) {
+        if (covered[i]) covered[i].style.visibility = "";
+      }
+      proxy._hoverCoveredTicks = [];
+    }
+    function hideLaneCrosshairSegments() {
+      restoreCoveredAxisTicks();
+      const pool = proxy._laneCrosshairEls || [];
+      for (let i = 0; i < pool.length; i++) {
+        if (pool[i]) pool[i].style.display = "none";
+      }
+    }
     function updateCrosshairLine(sourceChart, offsetY) {
-      const wrap = proxy.$refs.chartAreaWrap;
-      const el = proxy.$refs.crosshairLine;
-      const chartDom = sourceChart.getDom();
-      if (!wrap || !el || !chartDom) return;
-      const top = chartDom.getBoundingClientRect().top - wrap.getBoundingClientRect().top + offsetY;
-      el.style.transform = `translate3d(0, ${top}px, 0)`;
-      if (!proxy.crosshairVisible) proxy.crosshairVisible = true;
+      const chartDom = sourceChart && sourceChart.getDom && sourceChart.getDom();
+      if (!chartDom) return;
+      proxy.crosshairVisible = false;
+      restoreCoveredAxisTicks();
+      const sourceTop = chartDom.getBoundingClientRect().top;
+      if (!proxy._laneCrosshairEls) proxy._laneCrosshairEls = [];
+      const pool = proxy._laneCrosshairEls;
+      const charts = proxy.getConnectedCharts();
+      let i = 0;
+      for (let c = 0; c < charts.length; c++) {
+        const chart = charts[c];
+        if (!chart || chart.isDisposed()) continue;
+        const dom = chart.getDom();
+        if (!dom) continue;
+        const localY = offsetY + sourceTop - dom.getBoundingClientRect().top;
+        let seg = pool[i];
+        if (!seg) {
+          seg = document.createElement("div");
+          seg.className = "kd-lane-crosshair-seg";
+          const depth = document.createElement("span");
+          depth.className = "kd-lane-crosshair-seg__depth";
+          seg.appendChild(depth);
+          pool[i] = seg;
+        }
+        if (seg.parentElement !== dom) dom.appendChild(seg);
+        let depthEl = seg.querySelector(".kd-lane-crosshair-seg__depth");
+        if (!depthEl) {
+          depthEl = document.createElement("span");
+          depthEl.className = "kd-lane-crosshair-seg__depth";
+          seg.appendChild(depthEl);
+        }
+        const depthText = proxy._lastTooltipAxisLabel || "";
+        const lane = proxy.findLaneById(proxy.findLaneIdByChart(chart));
+        const isAxisLane = proxy.isDepthOrTimeLane(lane);
+        if (depthEl) {
+          depthEl.textContent = isAxisLane ? "" : depthText;
+          depthEl.classList.remove("is-axis");
+          depthEl.style.display = !isAxisLane && depthText ? "" : "none";
+        }
+        seg.style.display = "block";
+        seg.style.transform = `translate3d(0, ${localY}px, 0)`;
+        i++;
+      }
+      for (let j = i; j < pool.length; j++) {
+        pool[j].style.display = "none";
+      }
     }
     function schedulePointerSync(chart, x, y, clientY) {
       proxy.pointerInChartArea = true;
@@ -13958,11 +14011,14 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
       const hit = proxy.getYValueFromChart(sourceChart, offsetX, offsetY);
       if (!hit) {
         proxy.crosshairVisible = false;
+        hideLaneCrosshairSegments();
         return;
       }
       proxy._lastTooltipY = hit.yValue;
       proxy._lastTooltipOffsetY = offsetY;
       proxy._lastTooltipGridIndex = hit.gridIndex;
+      const row = proxy.findRowByAxisValue(hit.yValue);
+      proxy._lastTooltipAxisLabel = proxy.formatAxisPointerYLabel(hit.yValue, row);
       proxy.updateCrosshairLine(sourceChart, offsetY);
       proxy.showSyncedLaneTooltips(hit.yValue, offsetY, hit.gridIndex);
     }
@@ -14287,6 +14343,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
       proxy._lastTipKey = /* @__PURE__ */ new WeakMap();
       proxy._lastAxisPx = /* @__PURE__ */ new WeakMap();
       proxy.crosshairVisible = false;
+      hideLaneCrosshairSegments();
       if (proxy.formCache.displayType === "header") {
         proxy.headerData = {};
       }
@@ -16566,14 +16623,16 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
     }
     function buildSyncedAxisPointer(show) {
       return {
-        show: !!show,
+        show: true,
         snap: false,
         type: "line",
         triggerTooltip: false,
-        z: 999,
+        // 趋势线 graphic 的 z 是 9999，横线再低会被盖住，有的道看起来没有位置线
+        z: 10001,
         animation: false,
         label: {
-          show: !!show,
+          // 画布边缘的轴标签会被泳道裁掉，深度改由每道十字线上的文字显示
+          show: false,
           backgroundColor: `${getCssVariable("--kd-lane-container-border-color")}99`,
           color: `${getCssVariable("--default-text-color")}`,
           formatter: () => proxy._lastTooltipAxisLabel || ""
@@ -16647,7 +16706,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
             axisTick: {
               show: false
             },
-            axisPointer: buildSyncedAxisPointer(true)
+            axisPointer: buildSyncedAxisPointer()
           }
         ],
         dataZoom: [proxy.buildInsideDataZoom()],
@@ -16896,7 +16955,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
                   fontSize: 12,
                   color: getCssVariable("--default-text-color")
                 },
-                axisPointer: buildSyncedAxisPointer(hasValidLineData)
+                axisPointer: buildSyncedAxisPointer(true)
               });
               if (proxy.formCache.axisType === "depth") {
                 applyDepthYAxisInterval(
@@ -20688,7 +20747,7 @@ const _sfc_main$2 = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const LineChartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a716c99b"]]);
+const LineChartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-af25fe67"]]);
 const _hoisted_1$1 = ["title"];
 const _hoisted_2$1 = ["title"];
 const _sfc_main$1 = /* @__PURE__ */ Object.assign({