tvcharts 0.9.31 → 0.9.33

package/lib/chart/volPath/volPathLayout.js

@@ -274,23 +274,23 @@ var volPathLayout = {
           if (isBuyAndSell || isLadder) {
             var showSell = isBuyAndSell || item.sellVol > item.buyVol || isPoc;
             var showBuy = isBuyAndSell || item.buyVol > item.sellVol || isPoc;
+            var sellWidthPct = item.sellVol / maxSell;
             if (showSell) {
               var sellRectPoint = rectPointsByColor.get(sellColorKey) || new DynamicTypedArray(800);
-              var widthPct = item.sellVol / maxSell;
               sellRectPoint.push(sellX);
               sellRectPoint.push(topY);
-              sellRectPoint.push(isOverview ? -Math.max(Math.round(textRectWidth * widthPct), 1) : textRectWidth);
+              sellRectPoint.push(isOverview ? -Math.max(Math.round(textRectWidth * sellWidthPct), 1) : textRectWidth);
               sellRectPoint.push(bottomY - topY);
               if (!rectPointsByColor.get(sellColorKey)) {
                 rectPointsByColor.set(sellColorKey, sellRectPoint);
               }
             }
+            var buyWidthPct = item.buyVol / maxBuy;
             if (showBuy) {
               var buyRectPoint = rectPointsByColor.get(buyColorKey) || new DynamicTypedArray(800);
-              var widthPct = item.buyVol / maxBuy;
               buyRectPoint.push(buyX);
               buyRectPoint.push(topY);
-              buyRectPoint.push(isOverview ? Math.max(Math.round(textRectWidth * widthPct), 1) : textRectWidth);
+              buyRectPoint.push(isOverview ? Math.max(Math.round(textRectWidth * buyWidthPct), 1) : textRectWidth);
               buyRectPoint.push(bottomY - topY);
               if (!rectPointsByColor.get(buyColorKey)) {
                 rectPointsByColor.set(buyColorKey, buyRectPoint);
@@ -324,6 +324,9 @@ var volPathLayout = {
               sellTextPoint.push(textY);
               sellTextPoint.push(item.sellVol);
               sellTextPoint.push(isOverview ? -1 : 0);
+              if (isOverview) {
+                sellTextPoint.push(-Math.max(Math.round(textRectWidth * sellWidthPct), 1));
+              }
               if (!textPointsByColor.get(sellTextColor)) {
                 textPointsByColor.set(sellTextColor, sellTextPoint);
               }
@@ -332,6 +335,9 @@ var volPathLayout = {
               buyTextPoint.push(textY);
               buyTextPoint.push(item.buyVol);
               buyTextPoint.push(isOverview ? 1 : 0);
+              if (isOverview) {
+                buyTextPoint.push(Math.max(Math.round(textRectWidth * buyWidthPct), 1));
+              }
               if (!textPointsByColor.get(buyTextColor)) {
                 textPointsByColor.set(buyTextColor, buyTextPoint);
               }
@@ -380,6 +386,9 @@ var volPathLayout = {
               textPoint.push(textY);
               textPoint.push(text);
               textPoint.push(isOverview ? 1 : 0);
+              if (isOverview) {
+                textPoint.push(Math.ceil(rectWidth * widthPct));
+              }
               if (!textPointsByColor.get(textColor)) {
                 textPointsByColor.set(textColor, textPoint);
               }
@@ -389,14 +398,14 @@ var volPathLayout = {
         if (showTotal) {
           if (isBuyAndSell || isLadder) {
             var buyTotalPoint = totalPointsByColor.get(buyVolColor) || new DynamicTypedArray(800);
-            buyTotalPoint.push(isOverview ? buyX : buyX + textRectWidth / 2);
+            buyTotalPoint.push(buyX + textRectWidth / 2);
             buyTotalPoint.push(firstBottomY);
             buyTotalPoint.push(buySum);
             if (!totalPointsByColor.get(buyVolColor)) {
               totalPointsByColor.set(buyVolColor, buyTotalPoint);
             }
             var sellTotalPoint = totalPointsByColor.get(sellVolColor) || new DynamicTypedArray(800);
-            sellTotalPoint.push(isOverview ? sellX : sellX + textRectWidth / 2);
+            sellTotalPoint.push(isOverview ? ocLowX - gapWidth - textRectWidth / 2 : sellX + textRectWidth / 2);
             sellTotalPoint.push(firstBottomY);
             sellTotalPoint.push(sellSum);
             if (!totalPointsByColor.get(sellVolColor)) {

package/lib/chart/volPath/volPathView.js

@@ -41,7 +41,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { __extends } from "tslib";
+import { __assign, __extends } from "tslib";
 import * as zrUtil from 'tvrender/lib/core/util.js';
 import ChartView from '../../view/Chart.js';
 import { createClipPath } from '../helper/createClipPathFromCoordSys.js';
@@ -139,7 +139,7 @@ var VolPathView = /** @class */function (_super) {
     } else {
       this.group.removeClipPath();
     }
-    toggleHoverEmphasis(this.group, null, null, false);
+    toggleHoverEmphasis(this.group, null, null, false, false);
     getECData(this.group).groupId = groupId;
   };
   VolPathView.prototype._renderRect = function (seriesModel) {
@@ -152,6 +152,9 @@ var VolPathView = /** @class */function (_super) {
     var textRectWidth = data.getLayout('textRectWidth');
     var rectHeight = data.getLayout('rectHeight');
     var isBuyAndSellLadder = data.getLayout('isBuyAndSellLadder');
+    var theme = seriesModel.get('theme');
+    var isDark = theme === 'dark';
+    var textFill = isDark ? "#fff" : "#000";
     var isOverview = data.getLayout('isOverview');
     var maxSumVol = data.getLayout('maxSumVol');
     rectPointsByColor.forEach(function (rectPoints, key) {
@@ -170,6 +173,7 @@ var VolPathView = /** @class */function (_super) {
     var textWidth = !isBuyAndSellLadder ? textRectWidth * 2 : textRectWidth;
     var fontSize = findFontSize(getMaxFormatVol(maxSumVol), textWidth * 0.8, void 0, 2, rectHeight * 0.8, 50);
     var textOffset = Math.floor(textWidth * 0.1);
+    var clipPathRectY = rectHeight / 2;
     textPointsByColor.forEach(function (textPoint, key) {
       var list = textPoint.buffer();
       var size = textPoint.length();
@@ -187,23 +191,52 @@ var VolPathView = /** @class */function (_super) {
           align = 'right';
           offset = -textOffset;
         }
-        var el = new graphic.Text({
+        var clipPath = undefined;
+        var formatText = getFormatVol(text);
+        if (isOverview) {
+          var width = list[i++];
+          clipPath = new graphic.Rect({
+            shape: {
+              x: x,
+              y: y - clipPathRectY,
+              width: width,
+              height: rectHeight
+            }
+          });
+          var el1 = new graphic.Text({
+            style: {
+              text: formatText,
+              fill: textFill,
+              verticalAlign: 'middle',
+              align: align,
+              fontSize: fontSize,
+              x: x + offset,
+              y: y
+            }
+          });
+          group.add(el1);
+          el1.states.emphasis = emphasisState;
+        }
+        var el = new graphic.Text(__assign({
           style: {
-            text: getFormatVol(text),
+            text: formatText,
             fill: key,
             verticalAlign: 'middle',
             align: align,
-            fontSize: fontSize
-          },
-          x: x + offset,
-          y: y
-        });
+            fontSize: fontSize,
+            x: x + offset,
+            y: y
+          }
+        }, clipPath ? {
+          clipPath: clipPath
+        } : {}));
+        // if (clipPath) {
+        //     el.setClipPath(clipPath)
+        // }
         group.add(el);
         el.states.emphasis = emphasisState;
       }
     });
-    var theme = seriesModel.get('theme');
-    var isDark = theme === 'dark';
     var totalPointsByColor = data.getLayout('totalPointsByColor');
     var totalTextBg = isDark ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)';
     var top = Math.floor(fontSize * 0.2);
@@ -237,7 +270,6 @@ var VolPathView = /** @class */function (_super) {
     var rectFill = isDark ? "#000" : "#fff";
     var computerTotalWidth = totalWidth * 0.7 - 10;
     var sumFontSize = findFontSize("" + (isBuyAndSellLadder ? "Delta" : "总买入") + getFormatVol(maxSumVol), computerTotalWidth, void 0, 2, rectHeight * 0.8, 50);
-    var textFill = isDark ? "#fff" : "#000";
     var shadowColor = isDark ? darkShadowColor : lightShadowColor;
     if (isBuyAndSellLadder) {
       var marginTop = fontSize + top * 2;

package/lib/chart/volPathRect/volPathRectView.js

@@ -126,7 +126,7 @@ var VolPathRectView = /** @class */function (_super) {
     //     el.states.emphasis = emphasisState;
     //     linesGroup.add(el);
     // });
-    toggleHoverEmphasis(this.group, null, null, false);
+    toggleHoverEmphasis(this.group, null, null, false, false);
     getECData(this.group).groupId = groupId;
   };
   VolPathRectView.prototype.remove = function (ecModel, api) {

package/lib/util/states.js

@@ -722,16 +722,19 @@ export function getSeriesPointData(ecModel, payload) {
  * This function should be used on the element with dataIndex, seriesIndex.
  *
  */
-export function enableHoverEmphasis(el, focus, blurScope) {
+export function enableHoverEmphasis(el, focus, blurScope, updateState) {
+  if (updateState === void 0) {
+    updateState = true;
+  }
   setAsHighDownDispatcher(el, true);
-  traverseUpdateState(el, setDefaultStateProxy);
+  updateState && traverseUpdateState(el, setDefaultStateProxy);
   enableHoverFocus(el, focus, blurScope);
 }
 export function disableHoverEmphasis(el) {
   setAsHighDownDispatcher(el, false);
 }
-export function toggleHoverEmphasis(el, focus, blurScope, isDisabled) {
-  isDisabled ? disableHoverEmphasis(el) : enableHoverEmphasis(el, focus, blurScope);
+export function toggleHoverEmphasis(el, focus, blurScope, isDisabled, updateState) {
+  isDisabled ? disableHoverEmphasis(el) : enableHoverEmphasis(el, focus, blurScope, updateState);
 }
 export function enableHoverFocus(el, focus, blurScope) {
   var ecData = getECData(el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tvcharts",
-  "version": "0.9.31",
+  "version": "0.9.33",
   "main": "dist/echarts.js",
   "module": "index.js",
   "jsdelivr": "dist/echarts.min.js",

package/types/dist/echarts.d.ts

@@ -8738,7 +8738,7 @@ declare function createDimensions(source: Source | OptionSourceData, opt?: Prepa
  * This function should be used on the element with dataIndex, seriesIndex.
  *
  */
-declare function enableHoverEmphasis(el: Element, focus?: InnerFocus, blurScope?: BlurScope): void;
+declare function enableHoverEmphasis(el: Element, focus?: InnerFocus, blurScope?: BlurScope, updateState?: boolean): void;
 
 /**
  * Create a multi dimension List structure from seriesModel.

package/types/dist/shared.d.ts

@@ -8739,7 +8739,7 @@ declare function createDimensions(source: Source | OptionSourceData, opt?: Prepa
  * This function should be used on the element with dataIndex, seriesIndex.
  *
  */
-declare function enableHoverEmphasis(el: Element, focus?: InnerFocus, blurScope?: BlurScope): void;
+declare function enableHoverEmphasis(el: Element, focus?: InnerFocus, blurScope?: BlurScope, updateState?: boolean): void;
 
 /**
  * Create a multi dimension List structure from seriesModel.

package/types/src/util/states.d.ts

@@ -82,9 +82,9 @@ export declare function getSeriesPointData(ecModel: GlobalModel, payload?: {
  * This function should be used on the element with dataIndex, seriesIndex.
  *
  */
-export declare function enableHoverEmphasis(el: Element, focus?: InnerFocus, blurScope?: BlurScope): void;
+export declare function enableHoverEmphasis(el: Element, focus?: InnerFocus, blurScope?: BlurScope, updateState?: boolean): void;
 export declare function disableHoverEmphasis(el: Element): void;
-export declare function toggleHoverEmphasis(el: Element, focus: InnerFocus, blurScope: BlurScope, isDisabled: boolean): void;
+export declare function toggleHoverEmphasis(el: Element, focus: InnerFocus, blurScope: BlurScope, isDisabled: boolean, updateState?: boolean): void;
 export declare function enableHoverFocus(el: Element, focus: InnerFocus, blurScope: BlurScope): void;
 /**
  * Set emphasis/blur/selected states of element.