kd-lane-chart-v3 0.1.1 → 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) => {
@@ -10359,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]]);
           }
         }
       }
@@ -10932,7 +10971,8 @@ const _sfc_main$2 = {
         this.$nextTick(() => {
           this.updateLanesChartOption();
         });
-      }
+      },
+      immediate: true
     },
     windowSize: {
       handler(newVal) {
@@ -11301,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-2b46ef31"]]);
+const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-4fbcd1bb"]]);
 const _sfc_main$1 = {
   name: "ParameterPanel",
   props: {