kd-lane-chart-v3 0.1.0 → 0.1.2

package/dist/esm/index.js

@@ -7489,12 +7489,6 @@ const _sfc_main$2 = {
     this.scheduleConnectAllCharts = debounce(() => {
       this.connectAllCharts();
     }, 50);
-    this.getCssVar = (key) => {
-      if (!this.cssVarCache[key]) {
-        this.cssVarCache[key] = getCssVariable(key);
-      }
-      return this.cssVarCache[key];
-    };
   },
   mounted() {
     this.showDateTime = Object.prototype.hasOwnProperty.call(
@@ -8349,7 +8343,7 @@ const _sfc_main$2 = {
     // 获取默认的泳道图表选项
     getDefaultLaneChartOption() {
       const option = {
-        backgroundColor: this.getCssVar("--kd-lane-container-item-bg"),
+        backgroundColor: getCssVariable("--kd-lane-container-item-bg"),
         grid: {
           top: 0,
           left: 2,
@@ -8375,7 +8369,7 @@ const _sfc_main$2 = {
               showMinLine: false,
               showMaxLine: false,
               lineStyle: {
-                color: this.getCssVar("--kd-lane-container-item-line-color"),
+                color: getCssVariable("--kd-lane-container-item-line-color"),
                 type: "dashed"
               }
             },
@@ -8402,7 +8396,7 @@ const _sfc_main$2 = {
               showMinLine: false,
               showMaxLine: false,
               lineStyle: {
-                color: this.getCssVar("--kd-lane-container-item-line-color"),
+                color: getCssVariable("--kd-lane-container-item-line-color"),
                 type: "dashed"
               }
             },
@@ -8413,7 +8407,7 @@ const _sfc_main$2 = {
             axisLabel: {
               show: false,
               fontSize: 12,
-              color: this.getCssVar("--default-text-color")
+              color: getCssVariable("--default-text-color")
             },
             axisTick: {
               show: false
@@ -8440,8 +8434,8 @@ const _sfc_main$2 = {
             axis: "y",
             snap: true,
             label: {
-              backgroundColor: `${this.getCssVar("--kd-lane-container-border-color")}99`,
-              color: `${this.getCssVar("--default-text-color")}`,
+              backgroundColor: `${getCssVariable("--kd-lane-container-border-color")}99`,
+              color: `${getCssVariable("--default-text-color")}`,
               show: true,
               formatter: (params) => {
                 var _a;
@@ -8459,10 +8453,10 @@ const _sfc_main$2 = {
           },
           confine: true,
           // appendTo: document.querySelector('.kd-curve-2d-container'),
-          backgroundColor: this.getCssVar("--tooltip-bg-color"),
+          backgroundColor: getCssVariable("--tooltip-bg-color"),
           borderWidth: 0,
           textStyle: {
-            color: this.getCssVar("--default-text-color")
+            color: getCssVariable("--default-text-color")
           },
           formatter: (series) => {
             var _a;
@@ -8727,7 +8721,7 @@ const _sfc_main$2 = {
                   showMinLine: false,
                   showMaxLine: false,
                   lineStyle: {
-                    color: this.getCssVar(
+                    color: getCssVariable(
                       "--kd-lane-container-item-line-color"
                     ),
                     type: "dashed"
@@ -8738,7 +8732,7 @@ const _sfc_main$2 = {
                 axisLabel: {
                   show: false,
                   fontSize: 12,
-                  color: this.getCssVar("--default-text-color")
+                  color: getCssVariable("--default-text-color")
                 },
                 axisPointer: { show: hasValidLineData },
                 interval: unifiedInterval
@@ -8773,7 +8767,7 @@ const _sfc_main$2 = {
                     hideOverlap: true,
                     height: 14,
                     verticalAlign: "middle",
-                    color: this.getCssVar("--default-text-color"),
+                    color: getCssVariable("--default-text-color"),
                     overflow: "truncate",
                     rich: {
                       center: {
@@ -8846,13 +8840,13 @@ const _sfc_main$2 = {
                       )
                     };
                   }
-                  const groupSeriesData = this.generateSeriesDataCached(
+                  let groupSeriesData = this.generateSeriesDataCached(
                     group,
                     lineInfo,
                     axisKey,
                     paramCodeMap
                   );
-                  const groupAllSeriesData = this.generateAllSeriesDataCached(
+                  let groupAllSeriesData = this.generateAllSeriesDataCached(
                     group,
                     lineInfo,
                     axisKey,
@@ -8877,7 +8871,7 @@ const _sfc_main$2 = {
                       showMaxLine: false,
                       showMinLine: false,
                       lineStyle: {
-                        color: this.getCssVar(
+                        color: getCssVariable(
                           "--kd-lane-container-item-line-color"
                         ),
                         type: "dashed"
@@ -8929,7 +8923,7 @@ const _sfc_main$2 = {
                   this.addAreaStyleToSeries(
                     baseSeries,
                     lineInfo,
-                    groupSeriesData,
+                    groupAllSeriesData,
                     min
                   );
                   const rangeAreaSeries = this.addRangeAreaToSeries(
@@ -9102,6 +9096,49 @@ const _sfc_main$2 = {
         }
       }
     },
+    /**
+    * LTTB 降采样算法
+    * @param {Array<[number, number]>} data 原始数据 [[x,y], [x,y]]
+    * @param {number} threshold 采样后最大点数（建议 600 ~ 1200）
+    * @returns {Array<[number, number]>} 抽稀后数据
+    */
+    lttb(data, threshold) {
+      if (threshold >= data.length || threshold === 0) {
+        return [...data];
+      }
+      if (threshold === 1) {
+        return [data[0]];
+      }
+      const output = [];
+      const dataLength = data.length;
+      const bucketSize = (dataLength - 2) / (threshold - 2);
+      output.push(data[0]);
+      let prevIndex = 0;
+      for (let i = 0; i < threshold - 2; i++) {
+        const bucketStart = 1 + Math.floor((i + 0) * bucketSize);
+        const bucketEnd = 1 + Math.floor((i + 1) * bucketSize);
+        const nextBucketMidIdx = Math.floor((i + 1.5) * bucketSize);
+        let maxArea = -1;
+        let maxAreaIndex = bucketStart;
+        const pointA = data[prevIndex];
+        const pointC = data[Math.min(nextBucketMidIdx, dataLength - 1)];
+        for (let j = bucketStart; j < bucketEnd; j++) {
+          const pointB = data[j];
+          const area = Math.abs(
+            (pointA[0] - pointC[0]) * (pointB[1] - pointA[1]) - (pointA[0] - pointB[0]) * (pointC[1] - pointA[1])
+          );
+          if (area > maxArea) {
+            maxArea = area;
+            maxAreaIndex = j;
+          }
+        }
+        output.push(data[maxAreaIndex]);
+        prevIndex = maxAreaIndex;
+      }
+      output.push(data[dataLength - 1]);
+      console.log(output, "output");
+      return output;
+    },
     // 生成泳道图表数据
     generateSeriesData(data, lineInfo, axisKey) {
       return data.map((item) => {
@@ -9122,7 +9159,7 @@ const _sfc_main$2 = {
             }
           }
         }
-        return [value, +item[axisKey]];
+        return [value, +item[axisKey], item.timestamp];
       });
     },
     generateSeriesDataCached(data, lineInfo, axisKey, paramCodeMap) {
@@ -9140,7 +9177,7 @@ const _sfc_main$2 = {
             }
           }
         }
-        return [value, +item[axisKey]];
+        return [value, +item[axisKey], item.timestamp];
       });
     },
     generateAllSeriesDataCached(data, lineInfo, axisKey, paramCodeMap) {
@@ -9833,72 +9870,51 @@ const _sfc_main$2 = {
       }
     },
     findBoundaryPointPair(currentPoint) {
-      const chartRef = this.getChartRefByLaneId(currentPoint.laneId);
-      if (!chartRef || !chartRef.chart) {
-        return { topPoint: null, bottomPoint: null };
-      }
-      const option = chartRef.chart.getOption();
       let topPoint = null;
       let bottomPoint = null;
-      for (let i = 0; i < option.series.length; i++) {
-        const series = option.series[i];
-        if (series.type !== "scatter") continue;
-        const data = series.data || [];
-        for (let j = 0; j < data.length; j++) {
-          const point = data[j];
-          if (!point || !point.value) continue;
-          if (point.lineId === currentPoint.lineId && point.paramId === currentPoint.paramId) {
-            if (point.type === "top") {
-              topPoint = point;
-            } else if (point.type === "bottom") {
-              bottomPoint = point;
-            }
-          }
-        }
-      }
-      if (currentPoint.type === "top" && topPoint) {
-        const nextPoint = option.series.filter((s) => s.type === "scatter").flatMap((s) => s.data || []).find(
-          (p) => p && p.value && p.lineId === currentPoint.lineId && p.paramId === currentPoint.paramId && p.type === "bottom" && p.originalIndex > currentPoint.originalIndex
-        );
-        if (nextPoint) {
-          bottomPoint = nextPoint;
-        } else {
-          bottomPoint = this.findBoundaryPointFromRealTimeData(
-            currentPoint,
-            "bottom"
-          );
-        }
-      } else if (currentPoint.type === "bottom" && bottomPoint) {
-        const prevPoint = option.series.filter((s) => s.type === "scatter").flatMap((s) => s.data || []).find(
-          (p) => p && p.value && p.lineId === currentPoint.lineId && p.paramId === currentPoint.paramId && p.type === "top" && p.originalIndex < currentPoint.originalIndex
+      if (currentPoint.type === "top") {
+        topPoint = currentPoint;
+        bottomPoint = this.findBoundaryPointFromRealTimeData(
+          currentPoint,
+          "bottom"
         );
-        if (prevPoint) {
-          topPoint = prevPoint;
-        } else {
-          topPoint = this.findBoundaryPointFromRealTimeData(currentPoint, "top");
-        }
+      } else if (currentPoint.type === "bottom") {
+        bottomPoint = currentPoint;
+        topPoint = this.findBoundaryPointFromRealTimeData(currentPoint, "top");
       }
       return { topPoint, bottomPoint };
     },
     findBoundaryPointFromRealTimeData(currentPoint, targetType) {
-      const axisKey = this.currentToolBarConfig.axisTypeList && this.currentToolBarConfig.axisTypeList[this.formCache.axisType] || (this.formCache.axisType === "time" ? "time" : "depth");
+      const axisType = this.formCache.axisType;
+      const axisKey = this.currentToolBarConfig.axisTypeList && this.currentToolBarConfig.axisTypeList[axisType] || (axisType === "time" ? "time" : "depth");
       const currentYValue = currentPoint.value[1];
       const paramId = currentPoint.paramId;
+      const hasTimestamp = axisType === "depth" && this.realTimeData.length > 0 && this.realTimeData[0] && Object.prototype.hasOwnProperty.call(this.realTimeData[0], "timestamp");
       let searchStartIndex = -1;
-      const tolerance = this.formCache.axisType === "depth" ? 0.01 : 1e3;
+      const tolerance = axisType === "depth" ? 0.01 : 1e3;
       for (let i = 0; i < this.realTimeData.length; i++) {
         const item = this.realTimeData[i];
         let itemYValue = item[axisKey];
-        if (this.formCache.axisType !== "depth") {
+        if (axisType !== "depth") {
           itemYValue = this.toMillisecondTimestamp(itemYValue);
         } else {
           itemYValue = Number(itemYValue);
         }
-        if (Math.abs(itemYValue - currentYValue) < tolerance) {
-          searchStartIndex = i;
-          break;
+        if (hasTimestamp) {
+          const itemTimestamp = this.toMillisecondTimestamp(item.timestamp);
+          const pointTimestamp = currentPoint.timestamp ? this.toMillisecondTimestamp(currentPoint.timestamp) : null;
+          if (Math.abs(itemYValue - currentYValue) < tolerance && (!pointTimestamp || itemTimestamp === pointTimestamp)) {
+            searchStartIndex = i;
+            break;
+          }
+        } else {
+          if (Math.abs(itemYValue - currentYValue) < tolerance) {
+            searchStartIndex = i;
+            break;
+          }
         }
       }
+      console.log("searchStartIndex", searchStartIndex);
       if (searchStartIndex === -1) return null;
       let boundaryPoint = null;
       if (targetType === "bottom") {
@@ -9907,17 +9923,18 @@ const _sfc_main$2 = {
           const value = item[paramId];
           if (value !== null && value !== void 0 && value !== "" && Number.isFinite(+value)) {
             let itemYValue = item[axisKey];
-            if (this.formCache.axisType !== "depth") {
+            if (axisType !== "depth") {
               itemYValue = this.toMillisecondTimestamp(itemYValue);
             } else {
               itemYValue = Number(itemYValue);
             }
             boundaryPoint = {
-              value: [value, itemYValue],
+              value: [value, itemYValue, item.timestamp],
               lineId: currentPoint.lineId,
               paramId,
               type: "bottom",
-              originalIndex: i
+              originalIndex: i,
+              timestamp: hasTimestamp ? item.timestamp : void 0
             };
             break;
           }
@@ -9925,17 +9942,18 @@ const _sfc_main$2 = {
         if (!boundaryPoint) {
           const lastItem = this.realTimeData[this.realTimeData.length - 1];
           let lastYValue = lastItem[axisKey];
-          if (this.formCache.axisType !== "depth") {
+          if (axisType !== "depth") {
             lastYValue = this.toMillisecondTimestamp(lastYValue);
           } else {
             lastYValue = Number(lastYValue);
           }
           boundaryPoint = {
-            value: [lastItem[paramId], lastYValue],
+            value: [lastItem[paramId], lastYValue, lastItem.timestamp],
             lineId: currentPoint.lineId,
             paramId,
             type: "bottom",
-            originalIndex: this.realTimeData.length - 1
+            originalIndex: this.realTimeData.length - 1,
+            timestamp: hasTimestamp ? lastItem.timestamp : void 0
           };
         }
       } else {
@@ -9944,17 +9962,18 @@ const _sfc_main$2 = {
           const value = item[paramId];
           if (value !== null && value !== void 0 && value !== "" && Number.isFinite(+value)) {
             let itemYValue = item[axisKey];
-            if (this.formCache.axisType !== "depth") {
+            if (axisType !== "depth") {
               itemYValue = this.toMillisecondTimestamp(itemYValue);
             } else {
               itemYValue = Number(itemYValue);
             }
             boundaryPoint = {
-              value: [value, itemYValue],
+              value: [value, itemYValue, item.timestamp],
               lineId: currentPoint.lineId,
               paramId,
               type: "top",
-              originalIndex: i
+              originalIndex: i,
+              timestamp: hasTimestamp ? item.timestamp : void 0
             };
             break;
           }
@@ -9962,17 +9981,18 @@ const _sfc_main$2 = {
         if (!boundaryPoint) {
           const firstItem = this.realTimeData[0];
           let firstYValue = firstItem[axisKey];
-          if (this.formCache.axisType !== "depth") {
+          if (axisType !== "depth") {
             firstYValue = this.toMillisecondTimestamp(firstYValue);
           } else {
             firstYValue = Number(firstYValue);
           }
           boundaryPoint = {
-            value: [firstItem[paramId], firstYValue],
+            value: [firstItem[paramId], firstYValue, firstItem.timestamp],
             lineId: currentPoint.lineId,
             paramId,
             type: "top",
-            originalIndex: 0
+            originalIndex: 0,
+            timestamp: hasTimestamp ? firstItem.timestamp : void 0
           };
         }
       }
@@ -10376,13 +10396,15 @@ const _sfc_main$2 = {
       }
       if (seriesData.length > 0) {
         const firstValidPoint = seriesData.find(
-          (point) => Number.isFinite(+point[0])
+          (point) => {
+            return Number.isFinite(+point.value[0]);
+          }
         );
         if (firstValidPoint) {
-          seriesData.unshift([min, firstValidPoint[1]]);
+          seriesData.unshift([min, firstValidPoint.value[1]]);
           const lastValidPoint = seriesData[seriesData.length - 1];
-          if (lastValidPoint && Number.isFinite(+lastValidPoint[0])) {
-            seriesData.push([min, lastValidPoint[1]]);
+          if (lastValidPoint && Number.isFinite(+lastValidPoint.value[0])) {
+            seriesData.push([min, lastValidPoint.value[1]]);
           }
         }
       }
@@ -10603,6 +10625,7 @@ const _sfc_main$2 = {
                     const formattedBoundaryPoints = boundaryPoints.map(
                       (bp) => ({
                         value: bp.data,
+                        timestamp: bp.data[2],
                         type: bp.type,
                         originalIndex: bp.originalIndex,
                         lineId: lineInfo.lineId,
@@ -10948,7 +10971,8 @@ const _sfc_main$2 = {
         this.$nextTick(() => {
           this.updateLanesChartOption();
         });
-      }
+      },
+      immediate: true
     },
     windowSize: {
       handler(newVal) {
@@ -11317,7 +11341,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 512);
 }
-const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-d90c5e39"]]);
+const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-4fbcd1bb"]]);
 const _sfc_main$1 = {
   name: "ParameterPanel",
   props: {