tvcharts 0.9.10 → 0.9.12

package/dist/echarts.js

@@ -31313,6 +31313,13 @@ function makeLabelsByCustomizedCategoryInterval(axis, categoryInterval, onlyTick
 
 // src/coord/Axis.ts
 var NORMALIZED_EXTENT = [0, 1];
+function isMobileByWidth(breakPoint = 768) {
+  if (typeof window === "undefined")
+    return false;
+  const viewportWidth = window.innerWidth;
+  return viewportWidth < breakPoint && window.devicePixelRatio !== 1;
+}
+var isMobile = isMobileByWidth();
 var Axis = class {
   constructor(dim, scale4, extent3) {
     this.onBand = false;
@@ -31348,7 +31355,7 @@ var Axis = class {
       const dataIndex = data;
       const dataCount = this.scale.getAxisDataLen();
       const deltaFromRight = dataCount + scale4.lastBarRightSideDiffBarCount - dataIndex;
-      return Math.round(this._extent[1] - deltaFromRight * scale4.barSpace);
+      return isMobile ? this._extent[1] - deltaFromRight * scale4.barSpace : Math.round(this._extent[1] - deltaFromRight * scale4.barSpace);
     }
     if (this.onBand && scale4.type === "ordinal") {
       extent3 = extent3.slice();
@@ -56890,7 +56897,7 @@ var LinesPlotView2 = class extends Chart_default {
       const z2 = seriesModel.get("z2");
       const visualColor = getVisualGradient2(data, seriesModel.coordinateSystem, api2);
       const connectNulls = seriesModel.get("connectNulls");
-      const isMobile = seriesModel.get("isMobile");
+      const isMobile2 = seriesModel.get("isMobile");
       const step = seriesModel.get("step");
       const barSpace = Math.floor((seriesModel.coordinateSystem.getAxesByScale("ordinal")[0].scale.barSpace || calculatebandWidth(seriesModel, data)) * 0.8) || 1;
       each(linePointsByKey, function(item, key) {
@@ -56905,7 +56912,7 @@ var LinesPlotView2 = class extends Chart_default {
             connectSelf: !connectNulls && !step,
             barWidth: barSpace,
             stroke: color2,
-            isWebviewRender: isMobile
+            isWebviewRender: isMobile2
           },
           style: {
             lineDash: lineStyleMap[lineDash],
@@ -56984,7 +56991,7 @@ var LinesPlotView2 = class extends Chart_default {
       const histogramGroup = this._histogramGroup;
       const histbase = seriesModel.get("histbase") || 0;
       const z2 = seriesModel.get("z2");
-      const isMobile = seriesModel.get("isMobile");
+      const isMobile2 = seriesModel.get("isMobile");
       const baseY = seriesModel.coordinateSystem.dataToPoint([0, histbase], true)[1];
       each(linePointsByKey, function(item, key) {
         const [stroke, lineDash, lineWidth] = key.split(":");
@@ -56994,7 +57001,7 @@ var LinesPlotView2 = class extends Chart_default {
             points: item,
             baseY,
             stroke: color2,
-            isWebviewRender: isMobile
+            isWebviewRender: isMobile2
           },
           style: {
             stroke: color2,
@@ -57025,7 +57032,7 @@ var LinesPlotView2 = class extends Chart_default {
       }
       const symbolGroup = this._symbolGroup;
       const z2 = seriesModel.get("z2");
-      const isMobile = seriesModel.get("isMobile");
+      const isMobile2 = seriesModel.get("isMobile");
       each(symbolPointsByColor, function(item, key) {
         if (shadowShape) {
           const shadowEl = new SymbolPath_default({
@@ -57045,7 +57052,7 @@ var LinesPlotView2 = class extends Chart_default {
         const el = new SymbolPath_default({
           shape: {
             points: item,
-            isWebviewRender: isMobile
+            isWebviewRender: isMobile2
           },
           style: {
             fill: "#000000"
@@ -57133,7 +57140,7 @@ var LinesPlotView2 = class extends Chart_default {
         });
         return;
       }
-      const isMobile = seriesModel.get("isMobile");
+      const isMobile2 = seriesModel.get("isMobile");
       each(linePointsByKey, function(item, key) {
         const [stroke] = key.split(":");
         const {color: color2, isDefaultColor} = getFormatColor(stroke);
@@ -57142,7 +57149,7 @@ var LinesPlotView2 = class extends Chart_default {
             points: item,
             baseY,
             width,
-            isWebviewRender: isMobile,
+            isWebviewRender: isMobile2,
             fill: color2
           },
           style: {
@@ -58548,7 +58555,7 @@ var MineLinesView2 = class extends Chart_default {
     const emphasisState = seriesModel.get("emphasis").emphasisState;
     const linesGroup = this._linesGroup;
     const z2 = seriesModel.get("z2");
-    const isMobile = seriesModel.get("isMobile");
+    const isMobile2 = seriesModel.get("isMobile");
     const linesPointById = data.getLayout("linesPointById");
     const rectWidth = api2.getWidth();
     const rectHeight = api2.getHeight();
@@ -58562,7 +58569,7 @@ var MineLinesView2 = class extends Chart_default {
           rectWidth,
           rectHeight,
           stroke: color2,
-          isWebviewRender: isMobile
+          isWebviewRender: isMobile2
         },
         style: {
           fill: "none",
@@ -59299,7 +59306,7 @@ var BoxesPath = class extends Path_default {
       path.lineTo(right, bottom);
       path.lineTo(left, bottom);
       path.closePath();
-      if (isWebviewRender && i % 5 === 0) {
+      if (i < points4.length - 2) {
         hasFill && path.fillStyle(fill);
         hasStroke && path.strokeStyle(stroke);
         path.beginPathFill();
@@ -59351,7 +59358,7 @@ var BoxesView2 = class extends Chart_default {
     }
     const emphasisState = seriesModel.get("emphasis").emphasisState;
     const groupId = seriesModel.get("groupId");
-    const isMobile = seriesModel.get("isMobile");
+    const isMobile2 = seriesModel.get("isMobile");
     const linesGroup = this._linesGroup;
     const z2 = seriesModel.get("z2");
     const linesPointById = data.getLayout("linesPointById");
@@ -59362,7 +59369,7 @@ var BoxesView2 = class extends Chart_default {
           points: item,
           fill: fill || "none",
           stroke: color2,
-          isWebviewRender: isMobile
+          isWebviewRender: isMobile2
         },
         style: {
           fill: fill || "none",
@@ -59492,16 +59499,26 @@ var BoxesSeries_default = BoxesSeriesModel;
 // src/chart/boxes/util.ts
 var canvas = document.createElement("canvas");
 var ctx = canvas.getContext("2d");
-function findFontSize(text, maxWidth, font = DefaultFamily, tolerance = 8, minSize = 2, maxSize = 50) {
-  let low = minSize;
-  let high = maxSize;
+function findFontSize(text, maxWidth, font = DefaultFamily, tolerance = 8, maxHeight) {
+  let low = 2;
+  let high = 50;
+  const lines = text.split("\n");
+  const linesLength = lines.length;
+  let maxLengthText = lines[0];
+  for (let index = 1; index < lines.length; index++) {
+    const element = lines[index];
+    if (element.length > maxLengthText.length) {
+      maxLengthText = element;
+    }
+  }
   while (low <= high) {
     const size = Math.floor((low + high) / 2);
     ctx.font = `${size}px ${font}`;
-    const width = ctx.measureText(text).width;
-    if (maxWidth > width && maxWidth - width <= tolerance) {
+    const isInHeight = size * linesLength <= maxHeight;
+    const width = ctx.measureText(maxLengthText).width;
+    if (maxWidth > width && maxWidth - width <= tolerance && isInHeight) {
       return size;
-    } else if (width < maxWidth) {
+    } else if (width < maxWidth && isInHeight) {
       low = size + 1;
     } else {
       high = size - 1;
@@ -59516,11 +59533,11 @@ var boxFontSizeMapping = {
   small: 10,
   tiny: 8
 };
-function getFontSize(size, text, maxWidth, font) {
+function getFontSize(size, text, maxWidth, font, maxHeight) {
   if (typeof size === "number") {
     return size;
   }
-  return boxFontSizeMapping[size] || findFontSize(text, maxWidth, font, 2);
+  return boxFontSizeMapping[size] || findFontSize(text, maxWidth, font, 2, maxHeight);
 }
 
 // src/chart/boxes/BoxesLayout.ts
@@ -59644,12 +59661,11 @@ var BoxesLayout = {
               continue;
             }
             const {x, y, align, v_align} = getBoxPoint(startPoint, endPoint, text_halign, text_valign);
-            const padding = Math.min(minBoxSize / 2, 8);
             textList.push({
               text,
               text_color,
               text_wrap,
-              text_size: getFontSize(text_size, text, minBoxSize - padding, font),
+              text_size: getFontSize(text_size, text, width2 - Math.floor(width2 / 5), font, height - Math.min(minBoxSize / 2, 10)),
               align,
               v_align,
               width: width2,
@@ -59940,21 +59956,21 @@ var NormalBoxPath2 = class extends Path_default {
     return new NormalBoxPathShape2();
   }
   buildPath(ctx2, shape) {
-    const {points: points4, isSimpleBox, fill, isMobile, stroke} = shape;
+    const {points: points4, isSimpleBox, fill, isMobile: isMobile2, stroke} = shape;
     for (let index = 0; index < points4.length; ) {
       const point1 = points4[index++];
       const point2 = points4[index++];
-      const point3 = points4[index++];
-      const point4 = points4[index++];
       if (isSimpleBox) {
         const x = point1[0];
-        const isSame = point1[1] === point3[1];
+        const isSame = point1[1] === point2[1];
         ctx2.moveTo(x, point1[1]);
-        ctx2.lineTo(x, isSame ? point1[1] + 1 : point3[1]);
+        ctx2.lineTo(x, isSame ? point1[1] + 1 : point2[1]);
       } else {
+        const point3 = points4[index++];
+        const point4 = points4[index++];
         ctx2.rect(point1[0], point1[1], point2[0] - point1[0], point3[1] - point1[1]);
       }
-      if (isMobile && index % 16 === 0 && index !== points4.length) {
+      if (isMobile2 && index % 16 === 0 && index !== points4.length) {
         !isSimpleBox && fill && ctx2.fillStyle(fill);
         stroke && ctx2.strokeStyle(stroke);
         ctx2.beginPathFill();
@@ -59976,7 +59992,7 @@ var WickPath = class extends Path_default {
     return new WickPathShape();
   }
   buildPath(ctx2, shape) {
-    const {points: points4, isMobile, stroke} = shape;
+    const {points: points4, isMobile: isMobile2, stroke} = shape;
     for (let index = 0; index < points4.length; ) {
       const point1 = points4[index++];
       const point2 = points4[index++];
@@ -59986,7 +60002,7 @@ var WickPath = class extends Path_default {
       ctx2.lineTo(point2[0], point2[1]);
       ctx2.moveTo(point3[0], point3[1]);
       ctx2.lineTo(point4[0], point4[1]);
-      if (isMobile && stroke && index % 16 === 0 && index !== points4.length) {
+      if (isMobile2 && stroke && index % 16 === 0 && index !== points4.length) {
         ctx2.strokeStyle(stroke);
         ctx2.beginPathFill();
       }
@@ -60014,13 +60030,13 @@ var CandlePlotView2 = class extends Chart_default {
     const isSimpleBox = data.getLayout("isSimpleBox");
     const bodyPointsByColor = data.getLayout("bodyPointsByColor");
     const wickPointsByColor = data.getLayout("wickPointsByColor");
-    const isMobile = seriesModel.get("isMobile");
+    const isMobile2 = seriesModel.get("isMobile");
     each(wickPointsByColor, function(points4, key) {
       const [stroke] = key.split(":");
       const el = new WickPath_default({
         shape: {
           points: points4,
-          isMobile,
+          isMobile: isMobile2,
           stroke: stroke !== "none" ? stroke : ""
         },
         style: {
@@ -60036,8 +60052,8 @@ var CandlePlotView2 = class extends Chart_default {
         shape: {
           points: points4,
           isSimpleBox,
-          fill: !isSimpleBox || fill !== "none" ? fill : "",
-          isMobile,
+          fill: fill !== "none" ? fill : "",
+          isMobile: isMobile2,
           stroke: stroke === "none" ? "" : stroke
         },
         style: {
@@ -60163,6 +60179,12 @@ var candlePlotLayout = {
     }
     const showLast = seriesModel.get("showLast");
     const ignoreParentColor = seriesModel.get("ignoreParentColor");
+    const isMobile2 = seriesModel.get("isMobile");
+    const formatY = isMobile2 ? function(y) {
+      return y;
+    } : function(y) {
+      return Math.floor(y);
+    };
     return {
       progress: normalProgress
     };
@@ -60183,17 +60205,17 @@ var candlePlotLayout = {
         const ocLow = Math.min(openVal, closeVal);
         const ocHigh = Math.max(openVal, closeVal);
         const [ocLowX, ocLowY] = coordSys.dataToPoint([axisDimVal, ocLow]);
-        const x = ocLowX + 0.5;
-        const ocLowPoint = [x, Math.floor(ocLowY)];
+        const x = isMobile2 ? ocLowX : ocLowX + 0.5;
+        const ocLowPoint = [x, formatY(ocLowY)];
         const ocHighPoint = coordSys.dataToPoint([axisDimVal, ocHigh]);
         ocHighPoint[0] = x;
-        ocHighPoint[1] = Math.floor(ocHighPoint[1]);
+        ocHighPoint[1] = formatY(ocHighPoint[1]);
         const lowestPoint = coordSys.dataToPoint([axisDimVal, lowestVal]);
         lowestPoint[0] = x;
-        lowestPoint[1] = Math.floor(lowestPoint[1]);
+        lowestPoint[1] = formatY(lowestPoint[1]);
         const highestPoint = coordSys.dataToPoint([axisDimVal, highestVal]);
         highestPoint[0] = x;
-        highestPoint[1] = Math.floor(highestPoint[1]);
+        highestPoint[1] = formatY(highestPoint[1]);
         const itemModel = candleData.getItemModel(dataIndex);
         const hasDojiColor = !!itemModel.get(["itemStyle", "borderColorDoji"]);
         const sign = getSign2(store, dataIndex, openVal, closeVal, closeDimI, hasDojiColor);
@@ -60204,13 +60226,17 @@ var candlePlotLayout = {
         }
         const key = `${color2 || "none"}:${border || "none"}`;
         const bodyPoints = bodyPointsByColor[key] || [];
-        addBodyEnd(bodyPoints, ocHighPoint, 0);
-        addBodyEnd(bodyPoints, ocLowPoint, 1);
+        if (isSimpleBox) {
+          bodyPoints.push(ocHighPoint, lowestPoint);
+        } else {
+          addBodyEnd(bodyPoints, ocHighPoint, 0);
+          addBodyEnd(bodyPoints, ocLowPoint, 1);
+        }
         bodyPointsByColor[key] = bodyPoints;
         const wickKey = getWickColor(sign, itemModel, ignoreParentColor);
         if (wickKey) {
           const wickPoint = wickPointsByColor[wickKey] || [];
-          wickPoint.push(subPixelOptimizePoint(highestPoint), subPixelOptimizePoint(ocHighPoint), subPixelOptimizePoint(lowestPoint), subPixelOptimizePoint(ocLowPoint));
+          wickPoint.push(highestPoint, ocHighPoint, lowestPoint, ocLowPoint);
           wickPointsByColor[wickKey] = wickPoint;
         }
       }
@@ -60224,8 +60250,8 @@ var candlePlotLayout = {
         const point2 = point.slice();
         point1[0] = point1[0] - Math.floor(candleWidth * 0.5);
         point2[0] = point1[0] + candleWidth;
-        point1[1] -= 0.5;
-        point2[1] -= 0.5;
+        point1[1] += 0.5;
+        point2[1] += 0.5;
         start2 ? ends.push(point1, point2) : ends.push(point2, point1);
       }
       function subPixelOptimizePoint(point) {
@@ -60246,28 +60272,26 @@ function getSign2(store, dataIndex, openVal, closeVal, closeDimI, hasDojiColor)
   }
   return sign;
 }
+function calculateCandleWidth2(seriesModel, data) {
+  const baseAxis = seriesModel.getBaseAxis();
+  let extent3;
+  const bandWidth = baseAxis.type === "category" ? baseAxis.getBandWidth() : (extent3 = baseAxis.getExtent(), Math.abs(extent3[1] - extent3[0]) / data.count());
+  return optimalCandlestickWidth(bandWidth, 1);
+}
 function optimalCandlestickWidth(barSpacing, pixelRatio) {
   const barSpacingSpecialCaseFrom = 2.5;
   const barSpacingSpecialCaseTo = 4;
   const barSpacingSpecialCaseCoeff = 3;
   if (barSpacing >= barSpacingSpecialCaseFrom && barSpacing <= barSpacingSpecialCaseTo) {
-    return Math.floor(barSpacingSpecialCaseCoeff * pixelRatio);
-  } else if (barSpacing > barSpacingSpecialCaseTo && barSpacing <= 7.5) {
-    return Math.floor(Math.max(barSpacing * 0.72, 1));
+    return Math.floor(barSpacingSpecialCaseCoeff * pixelRatio) - 2;
   }
   const barSpacingReducingCoeff = 0.2;
   const coeff = 1 - barSpacingReducingCoeff * Math.atan(Math.max(barSpacingSpecialCaseTo, barSpacing) - barSpacingSpecialCaseTo) / (Math.PI * 0.5);
   const res = Math.floor(barSpacing * coeff * pixelRatio);
   const scaledBarSpacing = Math.floor(barSpacing * pixelRatio);
-  const optimal = Math.min(res, scaledBarSpacing);
+  const optimal = Math.min(res, scaledBarSpacing) - 2;
   return Math.max(Math.floor(pixelRatio), optimal);
 }
-function calculateCandleWidth2(seriesModel, data) {
-  const baseAxis = seriesModel.getBaseAxis();
-  let extent3;
-  const bandWidth = baseAxis.type === "category" ? baseAxis.getBandWidth() : (extent3 = baseAxis.getExtent(), Math.abs(extent3[1] - extent3[0]) / data.count());
-  return optimalCandlestickWidth(bandWidth, 1);
-}
 var candlePlotLayout_default = candlePlotLayout;
 
 // src/chart/candlePlot/install.ts
@@ -60338,7 +60362,7 @@ var BarPlotView2 = class extends Chart_default {
     const isSimpleBox = data.getLayout("isSimpleBox");
     const emphasisState = seriesModel.get("emphasis").emphasisState;
     const groupId = seriesModel.get("groupId");
-    const isMobile = seriesModel.get("isMobile");
+    const isMobile2 = seriesModel.get("isMobile");
     const bodyPointsByColor = data.getLayout("bodyPointsByColor");
     each(bodyPointsByColor, function(points4, stroke) {
       const el = new BarPath_default2({
@@ -60347,7 +60371,7 @@ var BarPlotView2 = class extends Chart_default {
           isSimpleBox,
           candleWidth,
           stroke,
-          isWebviewRender: isMobile
+          isWebviewRender: isMobile2
         },
         style: {
           stroke,
@@ -60623,7 +60647,7 @@ var ArrowsPlotView2 = class extends Chart_default {
     const minheight = seriesModel.get("minheight");
     const emphasisState = seriesModel.get("emphasis").emphasisState;
     const groupId = seriesModel.get("groupId");
-    const isMobile = seriesModel.get("isMobile");
+    const isMobile2 = seriesModel.get("isMobile");
     const upArrowsByColor = data.getLayout("upArrowsByColor");
     const maxValue = data.getLayout("maxValue");
     each(upArrowsByColor, function(item, color2) {
@@ -60634,7 +60658,7 @@ var ArrowsPlotView2 = class extends Chart_default {
           minHeight: minheight,
           valueLength: maxheight / maxValue,
           fill: color2,
-          isWebviewRender: isMobile
+          isWebviewRender: isMobile2
         },
         style: {
           fill: color2
@@ -60976,7 +61000,7 @@ var LabelsView2 = class extends Chart_default {
     const emphasisState = seriesModel.get("emphasis").emphasisState;
     const symbolGroup = this._symbolGroup;
     const symbolStyleMap = data.getLayout("symbolStyleMap");
-    const isMobile = seriesModel.get("isMobile");
+    const isMobile2 = seriesModel.get("isMobile");
     each(symbolStyleMap, function(item, key) {
       const isLine = lineSymbols.includes(key);
       const el = new SymbolPath_default3({
@@ -60984,7 +61008,7 @@ var LabelsView2 = class extends Chart_default {
           points: item,
           needCenter: !variableMap[key],
           isLine,
-          isWebviewRender: isMobile
+          isWebviewRender: isMobile2
         },
         style: {
           fill: "#000000",
@@ -61861,7 +61885,7 @@ var FillsView2 = class extends Chart_default {
   render(seriesModel, ecModel, api2) {
     const data = seriesModel.getData();
     const pointsByColor = data.getLayout("pointsByColor");
-    const isMobile = seriesModel.get("isMobile");
+    const isMobile2 = seriesModel.get("isMobile");
     if (!this._polygonGroup) {
       this._polygonGroup = new Group_default();
       this.group.add(this._polygonGroup);
@@ -61897,7 +61921,7 @@ var FillsView2 = class extends Chart_default {
       const el = new FillPolyPath_default({
         shape: {
           points: points4,
-          isWebviewRender: isMobile,
+          isWebviewRender: isMobile2,
           fill
         },
         style: {
@@ -62180,7 +62204,7 @@ var BgColorView2 = class extends Chart_default {
     } else {
       this._bgColorGroup.removeAll();
     }
-    const isMobile = seriesModel.get("isMobile");
+    const isMobile2 = seriesModel.get("isMobile");
     const bgColorGroup = this._bgColorGroup;
     const barWidth = Math.ceil(seriesModel.coordinateSystem.getBaseAxis().scale.barSpace) || 5;
     const isLine = barWidth <= 4;
@@ -62192,7 +62216,7 @@ var BgColorView2 = class extends Chart_default {
           height,
           fill: isLine ? null : color2,
           stroke: isLine ? color2 : "none",
-          isWebviewRender: isMobile
+          isWebviewRender: isMobile2
         },
         style: {
           fill: isLine ? null : color2,
@@ -69833,8 +69857,8 @@ function collectReferCoordSysModelInfo(dataZoomModel) {
   return coordSysInfoWrap;
 }
 function barSpaceLimit(barSpace, maxWidth = 200) {
-  if (barSpace < 1) {
-    return 1;
+  if (barSpace < 0.5) {
+    return 0.5;
   } else if (barSpace > maxWidth) {
     return maxWidth;
   }