tvcharts 0.7.60 → 0.7.62

package/dist/echarts.js

@@ -222,7 +222,7 @@ __export(util_exports, {
 
 // node_modules/tvrender/src/core/platform.ts
 var DEFAULT_FONT_SIZE = 12;
-var DEFAULT_FONT_FAMILY = "sans-serif";
+var DEFAULT_FONT_FAMILY = `-apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif`;
 var DEFAULT_FONT = `${DEFAULT_FONT_SIZE}px ${DEFAULT_FONT_FAMILY}`;
 var OFFSET = 20;
 var SCALE = 100;
@@ -7238,7 +7238,7 @@ function getElementSSRData(el) {
 function registerSSRDataGetter(getter) {
   ssrDataGetter = getter;
 }
-var version = "5.6.76";
+var version = "5.6.79";
 
 // src/util/number.ts
 var RADIAN_EPSILON = 1e-4;
@@ -11393,7 +11393,7 @@ var ZRText = class extends Displayable_default {
         style.fontStyle,
         style.fontWeight,
         parseFontSize(style.fontSize),
-        style.fontFamily || "sans-serif"
+        style.fontFamily || DEFAULT_FONT_FAMILY
       ].join(" ");
     }
     return font && trim(font) || style.textFont || style.font;
@@ -25788,7 +25788,7 @@ ECharts.internalField = function() {
     if (isGroup) {
       const children = el.childrenRef();
       for (let i = 0; i < children.length; i++) {
-        maxZ2 = Math.max(doUpdateZ(children[i], z, el.zLevel ?? zlevel, maxZ2), maxZ2, z2);
+        maxZ2 = Math.max(doUpdateZ(children[i], z, el.zLevel ?? zlevel, maxZ2, z2), maxZ2);
       }
     } else {
       el.z = z;
@@ -33691,7 +33691,8 @@ var Layer = class extends Eventful_default {
       if (clearColor && clearColor !== "transparent") {
         let clearColorGradientOrPattern;
         if (isGradientObject(clearColor)) {
-          const shouldCache = clearColor.global || clearColor.__width === width2 && clearColor.__height === height2;
+          const colorStopStr = clearColor.colorStops.map((item) => item.color + item.offset).toString();
+          const shouldCache = clearColor.global || clearColor.__width === width2 && clearColor.__height === height2 && clearColor._colorStopStr === colorStopStr;
           clearColorGradientOrPattern = shouldCache && clearColor.__canvasGradient || getCanvasGradient(ctx2, clearColor, {
             x: 0,
             y: 0,
@@ -33701,6 +33702,7 @@ var Layer = class extends Eventful_default {
           clearColor.__canvasGradient = clearColorGradientOrPattern;
           clearColor.__width = width2;
           clearColor.__height = height2;
+          clearColor._colorStopStr = colorStopStr;
         } else if (isImagePatternObject(clearColor)) {
           clearColor.scaleX = clearColor.scaleX || horizontalPixelRatio;
           clearColor.scaleY = clearColor.scaleY || verticalPixelRatio;
@@ -64322,7 +64324,6 @@ var BaseAxisPointer = class {
       const hoverBackgroundColor = extraGroupModel.get("hoverBackgroundColor");
       const extraIcon = createIcon(extraGroupModel.get("icon"), {
         x: size[0] / 2,
-        y: size[1] / 2,
         scaleX: size[0] / 2,
         scaleY: size[1] / 2,
         z2: 11,
@@ -64333,7 +64334,6 @@ var BaseAxisPointer = class {
       extraIcon.style.fill = color2;
       const extraRect = new Rect_default({
         shape: {
-          y: -padding / 2,
           x: -padding / 2,
           width: size[0] + padding,
           height: size[1] + padding
@@ -64370,18 +64370,17 @@ var BaseAxisPointer = class {
     const isLeft = position2 === "left";
     const distance2 = extraGroupModel.get("distance");
     extraGroup.x = isLeft ? pointer.shape.x1 + distance2 : pointer.shape.x2 - (size[0] + distance2);
-    extraGroup.y = pointer.shape.y1 - size[1] / 2;
+    extraGroup.y = elOption.label.y;
     extraGroup.eachChild((el) => {
       if (elInner(el).type === "rect") {
         el.attr("shape", {
-          y: -padding / 2,
           x: -padding / 2,
           width: size[0] + padding,
           height: size[1] + padding
         });
       } else {
         el.x = size[0] / 2;
-        el.y = size[1] / 2;
+        el.y = size[1] / 2 + padding / 2;
         el.scaleX = size[0] / 2;
         el.scaleY = size[1] / 2;
       }
@@ -68783,10 +68782,11 @@ var AxisProxy = class {
     let precision = getPixelPrecision(valueWindow, [0, 500]);
     precision = Math.min(precision, 20);
     const rawExtentInfo = axisModel.axis.scale.rawExtentInfo;
-    if (percentWindow[0] !== 0) {
+    const isUseValueRange = this._dataZoomModel.get("useValueRange");
+    if (percentWindow[0] !== 0 || isUseValueRange) {
       rawExtentInfo.setDeterminedMinMax("min", +valueWindow[0].toFixed(precision));
     }
-    if (percentWindow[1] !== 100) {
+    if (percentWindow[1] !== 100 || isUseValueRange) {
       rawExtentInfo.setDeterminedMinMax("max", +valueWindow[1].toFixed(precision));
     }
     rawExtentInfo.freeze();
@@ -72753,6 +72753,31 @@ function getLeftTextX(x, text, textStyle, ecModel) {
   const paddings = normalizeCssArray2(textStyle.padding || 0);
   return x - textRect.width - paddings[1] - paddings[3] - (textStyle.borderWidth || 0) - 1;
 }
+var SECONDS_PER_HOUR = 3600;
+var SECONDS_PER_DAY = 86400;
+var SECONDS_PER_MONTH = 30 * SECONDS_PER_DAY;
+function formatSeconds(seconds2) {
+  if (seconds2 >= SECONDS_PER_DAY) {
+    const months = Math.floor(seconds2 / SECONDS_PER_MONTH);
+    let remaining = seconds2 % SECONDS_PER_MONTH;
+    const days = Math.floor(remaining / SECONDS_PER_DAY);
+    remaining %= SECONDS_PER_DAY;
+    const hours2 = Math.floor(remaining / SECONDS_PER_HOUR);
+    return [
+      months > 0 ? `${months}m` : null,
+      days > 0 ? `${days}d` : null,
+      hours2 > 0 && months === 0 ? `${hours2}h` : null
+    ].filter(Boolean).join(" ");
+  } else {
+    const hours2 = Math.floor(seconds2 / SECONDS_PER_HOUR);
+    const minutes2 = Math.floor(seconds2 % SECONDS_PER_HOUR / 60);
+    const secs = seconds2 % 60;
+    return hours2 > 0 ? `${pad2(hours2)}:${pad2(minutes2)}:${pad2(secs)}` : `${pad2(minutes2)}:${pad2(secs)}`;
+  }
+}
+function pad2(num) {
+  return num.toString().padStart(2, "0");
+}
 
 // src/util/color.ts
 function parseColor(color2) {
@@ -75326,8 +75351,10 @@ var MarkLabelModal2 = class extends Component_default {
       each(markerOpt.data, (item, key) => {
         if (!this.option.data[key]) {
           dataMap[key] = this.option.data[key] = merge(item, defaultDataOption);
+          item.countDown = dataMap[key].countDown;
         } else {
           dataMap[key] = merge(this.option.data[key], item, true);
+          item.countDown = dataMap[key].countDown;
         }
         if (item.$action === "remove") {
           this.option.data[key] = void 0;
@@ -75358,31 +75385,31 @@ var MarkLabelModal_default = MarkLabelModal;
 // src/component/marker/MarkLabelView.ts
 var DefaultColor = "rgb(41,98,255)";
 var markerTypeCalculator2 = {
-  dataMin: (item, seriesModel) => {
+  dataMin: (item, seriesModel, backgroundColor2) => {
     const seriesData = seriesModel.getData();
     return {
       value: seriesData.getDataExtent(item.valueDim)[0]
     };
   },
-  dataMax: (item, seriesModel) => {
+  dataMax: (item, seriesModel, backgroundColor2) => {
     const seriesData = seriesModel.getData();
     return {
       value: seriesData.getDataExtent(item.valueDim)[1]
     };
   },
-  min: (item, seriesModel) => {
+  min: (item, seriesModel, backgroundColor2) => {
     const seriesData = seriesModel.getData();
     return {
       value: seriesData.getDataExtent(item.valueDim, true)[0]
     };
   },
-  max: (item, seriesModel) => {
+  max: (item, seriesModel, backgroundColor2) => {
     const seriesData = seriesModel.getData();
     return {
       value: seriesData.getDataExtent(item.valueDim, true)[1]
     };
   },
-  rawLast: (item, seriesModel) => {
+  rawLast: (item, seriesModel, backgroundColor2) => {
     const seriesData = seriesModel.getData();
     const lastIndex = seriesData.count(true) - 1;
     let fill = seriesData.getItemVisual(lastIndex, "style")?.fill;
@@ -75400,13 +75427,13 @@ var markerTypeCalculator2 = {
     return {
       value: seriesData.getByRawIndex(item.valueDim, lastIndex),
       labelTextStyle: {
-        fill: fill ? contrastColor2(fill) : "#fff",
+        fill: fill ? contrastColor2(fill) : "#ffffff",
         backgroundColor: fill ? removeTransparency(fill) : DefaultColor,
         borderWidth: 0
       }
     };
   },
-  last: (item, seriesModel) => {
+  last: (item, seriesModel, backgroundColor2) => {
     const seriesData = seriesModel.getData();
     const count2 = seriesData.count(true);
     const axisModel = seriesModel.getBaseAxis();
@@ -75416,7 +75443,6 @@ var markerTypeCalculator2 = {
     if (lastIndex >= count2 || lastIndex < 0) {
       return null;
     }
-    const backgroundColor2 = seriesModel.ecModel.get("backgroundColor");
     const lastItem = seriesData.count() - 1;
     let fill = isCandle(seriesModel.subType) ? seriesData.getItemVisual(lastItem, "style")?.stroke : seriesData.getItemVisual(lastItem, "style")?.fill;
     if (isPlot(seriesModel.subType)) {
@@ -75434,7 +75460,7 @@ var markerTypeCalculator2 = {
       }
     };
   },
-  allLast: (item, seriesModel) => {
+  allLast: (item, seriesModel, backgroundColor2) => {
     const seriesData = seriesModel.getData();
     const count2 = seriesData.count(true);
     const axisModel = seriesModel.getBaseAxis();
@@ -75442,9 +75468,9 @@ var markerTypeCalculator2 = {
     const offset = seriesModel.get("offset") || 0;
     const lastIndex = extent3[1] + offset;
     if (lastIndex >= count2 || lastIndex < 0) {
-      return markerTypeCalculator2.rawLast(item, seriesModel);
+      return markerTypeCalculator2.rawLast(item, seriesModel, backgroundColor2);
     }
-    return markerTypeCalculator2.last(item, seriesModel);
+    return markerTypeCalculator2.last(item, seriesModel, backgroundColor2);
   }
 };
 var inner21 = makeInner();
@@ -75455,6 +75481,7 @@ var MarkLabelView2 = class extends Component_default2 {
   }
   init() {
     this.markerGroupMapBySeries = createHashMap();
+    this._timerMap = createHashMap();
     this._graphicLabelElMap = createHashMap();
     this._graphLabelGroup = new Group_default();
     this.group.add(this._graphLabelGroup);
@@ -75463,21 +75490,29 @@ var MarkLabelView2 = class extends Component_default2 {
     const isAvoidOverlap = markerModel.get("isAvoidOverlap");
     const type = payload?.type;
     if (type !== "updateComOption") {
-      this.updateMarkLabels(markerModel, ecModel);
+      this.updateMarkLabels(markerModel, ecModel, api2);
     }
     this.updateGraphicLabels(ecModel);
     const isUpdateGraphic = payload?.type ? ["dataZoom", "resize"].includes(payload.type) : Object.keys(ecModel.getNewBaseOption()).some((key) => ["grid", "yAxis", "xAxis"].includes(key));
     if (isUpdateGraphic) {
       this.graphicLabelsResize(ecModel);
     }
-    if (isAvoidOverlap) {
-      this.avoidOverlap();
-    }
+    this.avoidOverlap(isAvoidOverlap);
   }
-  updateMarkLabels(markerModel, ecModel) {
+  updateMarkLabels(markerModel, ecModel, api2) {
     const markerGroupMapBySeries = this.markerGroupMapBySeries;
+    const timerMap = this._timerMap;
     const labelMap = markerModel.labelMap;
     const updatedSeriesByName = {};
+    const height = api2.getHeight();
+    let backgroundColor2 = ecModel.get("backgroundColor");
+    if (isGradientObject(backgroundColor2) && !backgroundColor2.global && backgroundColor2.type === "linear") {
+      backgroundColor2 = {
+        ...backgroundColor2,
+        global: true,
+        y2: height
+      };
+    }
     ecModel.eachSeries((seriesModel) => {
       const priceScaleInvisible = seriesModel.get("priceScaleInvisible");
       const invisible = seriesModel.get("invisible");
@@ -75512,7 +75547,7 @@ var MarkLabelView2 = class extends Component_default2 {
           return;
         }
         const yCalcFn = markerTypeCalculator2[item.type];
-        const {value, labelTextStyle} = yCalcFn ? yCalcFn(item, seriesModel) || {} : {value: item.value};
+        const {value, labelTextStyle} = yCalcFn ? yCalcFn(item, seriesModel, backgroundColor2) || {} : {value: item.value};
         if (!value) {
           if (el) {
             el.ignore = true;
@@ -75549,6 +75584,13 @@ var MarkLabelView2 = class extends Component_default2 {
           markerGroupMap.set(item.name, el);
           this.group.add(el);
         }
+        if (item.countDown && item.countDown.show && item.countDown.value) {
+          const key = seriesName + item.name;
+          if (!timerMap.get(key)) {
+            const countDownTextEl = el.childAt(3);
+            this._labelCountDown(item, countDownTextEl, key);
+          }
+        }
         inner21(el).yAxisIndex = yAxisModel.index;
         inner21(el).isSort = item.showName;
       });
@@ -75572,6 +75614,11 @@ var MarkLabelView2 = class extends Component_default2 {
           return;
         }
         markerGroupMap.removeKey(item.name);
+        const downKey = seriesName + item.name;
+        if (timerMap.get(downKey)) {
+          clearTimeout(timerMap.get(downKey));
+          timerMap.removeKey(downKey);
+        }
         this.group.remove(el);
       });
       markerGroupMapBySeries.removeKey(seriesName);
@@ -75684,7 +75731,22 @@ var MarkLabelView2 = class extends Component_default2 {
       graphicLabelElMap.removeKey(option.id);
     });
   }
-  avoidOverlap() {
+  _labelCountDown(item, el, key) {
+    const timerMap = this._timerMap;
+    const timer = setTimeout(() => {
+      item.countDown.value = item.countDown.value - 1;
+      const text = formatSeconds(item.countDown.value);
+      el.attr("style", {text});
+      if (item.countDown.value && item.countDown.show) {
+        this._labelCountDown(item, el, key);
+      } else {
+        el.ignore = true;
+        timerMap.removeKey(key);
+      }
+    }, 1e3);
+    timerMap.set(key, timer);
+  }
+  avoidOverlap(isAvoidOverlap) {
     const labelsByYAxisId = {};
     const markerGroupMapBySeries = this.markerGroupMapBySeries;
     markerGroupMapBySeries.each((markerGroupMap) => {
@@ -75710,24 +75772,28 @@ var MarkLabelView2 = class extends Component_default2 {
       labelsByYAxisId[yAxisId] = labels;
     });
     each(labelsByYAxisId, (labels) => {
-      labelAvoidOverlap(labels);
+      labelAvoidOverlap(labels, isAvoidOverlap);
     });
   }
 };
 var MarkLabelView = MarkLabelView2;
 MarkLabelView.type = "markLabel";
-function textYChange(label, y) {
+function textYChange(label, y, height) {
   if (label.type === "text") {
     label.y = y;
   } else {
     each(label.children(), (item) => {
       if (item.type === "text") {
-        item.y = y;
+        if (inner21(item).labelType === "countDown") {
+          item.attr("style", {y: y + inner21(item).parentHeight});
+          return;
+        }
+        item.attr("style", {y});
       }
     });
   }
 }
-function labelAvoidOverlap(labels, marginTop = 0) {
+function labelAvoidOverlap(labels, isAvoidOverlap, marginTop = 0) {
   if (labels.length === 0) {
     return;
   }
@@ -75738,18 +75804,18 @@ function labelAvoidOverlap(labels, marginTop = 0) {
   for (let i = 0; i < labels.length; i++) {
     const currentLabel = labels[i];
     let currentLabelY = inner21(currentLabel).y;
-    if (i === 0) {
-      textYChange(currentLabel, currentLabelY - offestY);
+    if (i === 0 || !isAvoidOverlap) {
+      textYChange(currentLabel, currentLabelY - offestY, height);
       continue;
     }
     const prevLabel = labels[i - 1];
     const prevLabelY = sortYbyId[prevLabel.id] ?? inner21(prevLabel).y;
-    const prevHeight = height + marginTop;
+    const prevHeight = inner21(prevLabel).showCountDown ? height * 2 + marginTop - 1 : height + marginTop;
     if (prevLabelY > currentLabelY || Math.abs(currentLabelY - prevLabelY) < prevHeight) {
       currentLabelY = prevLabelY + prevHeight;
     }
     sortYbyId[currentLabel.id] = currentLabelY;
-    textYChange(currentLabel, currentLabelY - offestY);
+    textYChange(currentLabel, currentLabelY - offestY, height);
   }
 }
 function getPaddingByStyle(fontsize, borderWidth = 0) {
@@ -75786,7 +75852,7 @@ function updateText({option, gridRect, position: position2, ecModel, el, y, offs
 }
 function createLabel({x, y, labelData, markerModel, gridRect, position: position2, labelTextStyle = {}, fontSize}) {
   const {zlevel} = markerModel.option;
-  const {lineStyle, showLine, showName, showTitle, title} = labelData;
+  const {lineStyle, showLine, showName, showTitle, title, countDown} = labelData;
   const textStyle = Object.assign(labelData.textStyle ?? {}, {fontSize, padding: getPaddingByStyle(fontSize, labelTextStyle.borderWidth)}, labelTextStyle);
   const text = labelData.text;
   const labelTitle = title || labelData.name;
@@ -75794,18 +75860,30 @@ function createLabel({x, y, labelData, markerModel, gridRect, position: position
   const group = new Group_default();
   const labelY = y;
   const borderWidth = textStyle.borderWidth ?? 0;
+  const font = getFont(textStyle, markerModel.ecModel);
+  const countDownText = countDown && countDown.show && formatSeconds(countDown.value) || "";
+  const renderText = countDownText.length > text.length ? countDownText : text;
+  const textRect = getBoundingRect(renderText, font);
+  const paddings = normalizeCssArray2(textStyle.padding || 0);
+  const textElWidth = textRect.width + paddings[1] + paddings[3];
+  const textElx = isLeft ? x - textElWidth - borderWidth - 1 : x + borderWidth;
   const textEl = new Text_default({
-    x: isLeft ? getLeftTextX(x, text, textStyle, markerModel.ecModel) : x,
-    y: labelY,
-    style: Object.assign({text}, textStyle),
+    style: Object.assign({
+      text,
+      width: textRect.width,
+      x: textElx,
+      y: labelY
+    }, textStyle),
     z: 101,
     zlevel,
     ignore: !showName
   });
   const textNameEl = new Text_default({
-    x: isLeft ? gridRect.x - borderWidth : getLeftTextX(gridRect.x + gridRect.width, labelTitle, textStyle, markerModel.ecModel) + borderWidth,
-    y: labelY,
-    style: Object.assign({text: labelTitle}, textStyle),
+    style: Object.assign({
+      text: labelTitle,
+      x: isLeft ? gridRect.x - borderWidth : getLeftTextX(gridRect.x + gridRect.width, labelTitle, textStyle, markerModel.ecModel) + borderWidth,
+      y: labelY
+    }, textStyle),
     z: 101,
     zlevel,
     ignore: !showTitle
@@ -75829,16 +75907,44 @@ function createLabel({x, y, labelData, markerModel, gridRect, position: position
   group.add(lineEl);
   group.add(textEl);
   group.add(textNameEl);
+  if (countDown) {
+    const show = countDown.show && !!countDown.value;
+    const offsetY = showName && show ? textRect.height + paddings[0] + paddings[2] - 1 : 0;
+    const fill = textStyle.fill === "#ffffff" ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.8)";
+    const countDownEl = new Text_default({
+      style: Object.assign({
+        text: countDownText,
+        width: textRect.width,
+        x: textElx,
+        y: labelY + offsetY
+      }, textStyle, {fill}),
+      z: 101,
+      zlevel,
+      ignore: !show
+    });
+    inner21(group).showCountDown = show;
+    inner21(countDownEl).labelType = "countDown";
+    inner21(countDownEl).parentHeight = offsetY;
+    group.add(countDownEl);
+  }
   return group;
 }
 function updateLabel({x, y, labelData, markerModel, gridRect, position: position2, el, labelTextStyle = {}, fontSize}) {
-  const {lineStyle, showLine, showName, showTitle, title} = labelData;
+  const {lineStyle, showLine, showName, showTitle, title, countDown} = labelData;
   const textStyle = Object.assign(labelData.textStyle ?? {}, {fontSize, padding: getPaddingByStyle(fontSize, labelTextStyle.borderWidth)}, labelTextStyle);
   const borderWidth = textStyle.borderWidth ?? 0;
   const isLeft = position2 === "left";
   if (el.ignore) {
     el.ignore = false;
   }
+  const text = labelData.text;
+  const countDownText = countDown && countDown.show && formatSeconds(countDown.value) || "";
+  const renderText = countDownText.length > text.length ? countDownText : text;
+  const font = getFont(textStyle, markerModel.ecModel);
+  const textRect = getBoundingRect(renderText, font);
+  const paddings = normalizeCssArray2(textStyle.padding || 0);
+  const textElWidth = textRect.width + paddings[1] + paddings[3];
+  const textElx = isLeft ? x - textElWidth - borderWidth - 1 : x + borderWidth;
   const labelY = y;
   inner21(el).y = labelY;
   each(el.children(), (element) => {
@@ -75867,10 +75973,12 @@ function updateLabel({x, y, labelData, markerModel, gridRect, position: position
           return;
         }
         const textLabel = labelData.text;
-        const labelX = isLeft ? getLeftTextX(x, textLabel, textStyle, markerModel.ecModel) - borderWidth : x + borderWidth;
-        element.x = labelX;
-        element.y = labelY;
-        element.attr("style", Object.assign({text: textLabel}, textStyle));
+        element.attr("style", Object.assign({
+          text: textLabel,
+          width: textRect.width,
+          x: textElx,
+          y: labelY
+        }, textStyle));
         element.ignore = false;
         break;
       case "nameLabel":
@@ -75880,9 +75988,26 @@ function updateLabel({x, y, labelData, markerModel, gridRect, position: position
         }
         const labelTitle = title || labelData.name;
         const nameX = isLeft ? gridRect.x : getLeftTextX(gridRect.x + gridRect.width, labelTitle, textStyle, markerModel.ecModel);
-        element.x = nameX;
-        element.y = labelY;
-        element.attr("style", Object.assign({text: labelTitle}, textStyle));
+        element.attr("style", Object.assign({text: labelTitle, x: nameX, y: labelY}, textStyle));
+        element.ignore = false;
+        break;
+      case "countDown":
+        if (!countDown.show || !countDown.value) {
+          element.ignore = true;
+          inner21(el).showCountDown = false;
+          inner21(element).parentHeight = 0;
+          return;
+        }
+        const offsetY = showName ? textRect.height + paddings[0] + paddings[2] - 1 : 0;
+        inner21(el).showCountDown = true;
+        inner21(element).parentHeight = offsetY;
+        const fill = textStyle.fill === "#ffffff" ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.8)";
+        element.attr("style", Object.assign({
+          text: countDownText,
+          width: textRect.width,
+          x: textElx,
+          y: labelY + offsetY
+        }, textStyle, {fill}));
         element.ignore = false;
         break;
     }