tvcharts 0.9.33 → 0.9.34

package/lib/chart/playbackOrder/PlaybackHtmlContent.js

@@ -122,6 +122,7 @@ var TooltipHTMLContent = /** @class */function () {
       x = _a.x,
       y = _a.y,
       precision = _a.precision;
+    this._show = true;
     var el = this.el;
     var style = el.style;
     style.position = "absolute";
@@ -141,7 +142,7 @@ var TooltipHTMLContent = /** @class */function () {
       each(orders, function (item) {
         totalPrice_1 = totalPrice_1 + item.price;
         totalSize_1 += item.size;
-        ordersHtml = ordersHtml + "<div style=\"height: 18px; margin-bottom: 2px; font-size: 12px; margin-left: 4px;\">" + formatAmount(item.size) + " @ " + item.price.toFixed(precision) + "<span style=\"margin-left: 12px; color: var(--placeholder-text-color);\">8\u670813\u65E5\u5468\u4E09 05:00</span></div>";
+        ordersHtml = ordersHtml + "<div style=\"height: 18px; margin-bottom: 2px; font-size: 12px; margin-left: 4px;\">" + formatAmount(item.size) + " @ " + item.price.toFixed(precision) + "<span style=\"margin-left: 12px; color: var(--placeholder-text-color);\">" + formatTime + "</span></div>";
       });
       title = formatAmount(totalSize_1) + " @ " + (totalPrice_1 / orders.length).toFixed(precision) + " avg price";
     }
@@ -159,6 +160,9 @@ var TooltipHTMLContent = /** @class */function () {
     return [el.offsetWidth, el.offsetHeight];
   };
   TooltipHTMLContent.prototype.hide = function () {
+    if (!this._show) {
+      return;
+    }
     var style = this.el.style;
     style.visibility = 'hidden';
     style.opacity = '0';

package/lib/chart/playbackOrder/PlaybackOrderView.js

@@ -71,7 +71,9 @@ var PlaybackOrderView = /** @class */function (_super) {
       this.htmlContent = new PlaybackHtmlContent(api);
       api.getZr().on('mousedown', this._clickGlobal, this);
     }
+    this._isSmallSize = seriesModel.get('isMobile') && api.getWidth() <= 600;
     var clipPath = seriesModel.get('clip', true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
+    this.api = api;
     if (clipPath) {
       this.group.setClipPath(clipPath);
     } else {
@@ -170,6 +172,16 @@ var PlaybackOrderView = /** @class */function (_super) {
     if (!orders) {
       return;
     }
+    var isSmallSize = this._isSmallSize;
+    if (isSmallSize) {
+      this.api.trigger('playbackorderclick', {
+        isUp: isUp,
+        orders: orders,
+        time: dataModal.get('time'),
+        precision: seriesModel.get('precision')
+      });
+      return;
+    }
     this.htmlContent.show({
       isUp: isUp,
       orders: orders,
@@ -296,6 +308,7 @@ var PlaybackOrderView = /** @class */function (_super) {
     this._symbolGroup && this._symbolGroup.removeAll();
     this._symbolGroup = null;
     this.group.removeAll();
+    this.api = null;
   };
   PlaybackOrderView.prototype.dispose = function (ecModel, api) {
     this.remove(ecModel, api);

package/lib/component/playback/PlaybackOrderView.js

@@ -594,7 +594,9 @@ var PlaybackOrderView = /** @class */function (_super) {
     var rect = this.rect;
     var playbackOrderModel = this.playbackOrderModel;
     var order = playbackOrderModel.get('order');
-    var color = order.direction === 'long' ? longColor : shortColor;
+    var isLong = order.direction === 'long';
+    var color = isLong ? longColor : shortColor;
+    var yOffset = isLong ? 26 : -26;
     if (!this.orderGroupEls) {
       this.createOrderEl();
     }
@@ -678,6 +680,7 @@ var PlaybackOrderView = /** @class */function (_super) {
     // let circleMargin = Math.min(maxCircleMargin, (leftRectWidth - circleR - descRectWidth /2) / 2);
     var baseX = rect.width - circleR - descRectWidth / 2 - 60;
     var circleMargin = 30;
+    var isOverlap = rect.width < descRectWidth + labelRectWidth * 3 + orderTpLMargin + 1 + descLMargin + circleR + circleMargin * 2;
     if (isOverlay) {
       baseX = rect.width - circleR - descRectWidth / 2;
       circleMargin = 0;
@@ -686,12 +689,14 @@ var PlaybackOrderView = /** @class */function (_super) {
       circleMargin = Math.max(Math.min(maxCircleMargin, (rect.width - baseX - descRectWidth / 2 - circleR) / 2), 0);
     }
     var startX = rect.x + baseX - descRectWidth / 2 - buttonWidth;
-    orderClosePositionEl.attr('x', startX);
+    orderClosePositionEl.attr('x', isOverlap ? startX + labelRectWidth * (buttonCount - 1) + 1 + descLMargin : startX);
     var tpX = startX + labelRectWidth + orderTpLMargin;
     var circleX = Math.floor(rect.x + baseX + descRectWidth / 2 + circleMargin) + 0.5;
     this.circleX = circleX;
     this.circleMargin = circleMargin;
-    orderTpEl.attr('x', tpX);
+    var orderDescX = startX + labelRectWidth * buttonCount + orderTpLMargin + 1 + descLMargin;
+    orderTpEl.attr('x', isOverlap ? orderDescX : tpX);
+    orderTpEl.attr('y', isOverlap ? -yOffset : 0);
     if (this.dragType === 'TP' && this.dragPrice) {
       orderTpEl.ignore = true;
       this.dragStartX = tpX;
@@ -706,7 +711,8 @@ var PlaybackOrderView = /** @class */function (_super) {
       this.removeStop('profit');
     }
     var slX = order.stopProfit ? startX + labelRectWidth + orderTpLMargin + 1 : startX + labelRectWidth * 2 + orderTpLMargin + 1;
-    orderSlEl.attr('x', slX);
+    orderSlEl.attr('x', isOverlap ? orderDescX : slX);
+    orderSlEl.attr('y', isOverlap ? yOffset : 0);
     if (this.dragType === 'SL' && this.dragPrice) {
       orderSlEl.ignore = true;
       this.dragStartX = slX;
@@ -723,7 +729,7 @@ var PlaybackOrderView = /** @class */function (_super) {
     } else {
       this.removeStop('loss');
     }
-    orderDescEl.attr('x', startX + labelRectWidth * buttonCount + orderTpLMargin + 1 + descLMargin);
+    orderDescEl.attr('x', orderDescX);
     orderDescEl.childAt(0).attr({
       shape: {
         y: -9,

package/lib/component/playback/PlaybackSelectModel.js

@@ -39,6 +39,9 @@ var PlaybackSelectModel = /** @class */function (_super) {
   PlaybackSelectModel.prototype.setPlaybackSelect = function (payload) {
     this.option.startIndex = payload.startIndex;
     this.option.yData = payload.uid === this.uid ? payload.yData : void 0;
+    if (payload.show !== undefined) {
+      this.option.show = payload.show;
+    }
   };
   PlaybackSelectModel.type = 'playbackSelect';
   PlaybackSelectModel.defaultOption = {
@@ -47,7 +50,7 @@ var PlaybackSelectModel = /** @class */function (_super) {
     show: false,
     color: 'rgb(41,98,255)',
     bgColor: 'rgb(255,255,255)',
-    startIndex: 10,
+    startIndex: null,
     icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAD/UlEQVRYhb1ZjXWbMBCWO0BNJ7A7QRiBDcoIjMAIZANvUHsDugHZAG/ACHiBXN+HOeU4nQQkfb337gUL6fTp/kUcEW3hgohaetKViM4b1zFnYv1ARPU8Zs1dcDBg8Pn9/f1BIZU7AHbBaqJxC8hgwOCGJdZ1TX3f79qAiCpe0DTNJENQbczfDXA6fdd15JyjPM/lBq0xX/Mg14PFIS/G/AV/cxup7/tpIv6+vr7yol/OuTIhoXHOnaaHpvGDbdvyYx6s0GShtjR4vV69BpQWYqbO5nfUtu1iLWTN1BnrPueDACQ32WDqC788n8+LtTA3u6WxbjfAkqVlWbbYCE4vSEa1R3+5XBZrnkbzVBn77QaYeWlVFWwWMfWkonEcg0OVZSkBrubTYCDCrWXmiKmr1IGE/w2RvT4F0B+7KIpgU2XqUacVZmgTWt3qf3sAmvksYuqJoNmVg2wql8FAgr3pLC1KUwOIfo9IFtq7Jvb5NECvxWEYAudnDVl+CkYuBM11fXOzEQyscOFVoBK39DM9trf+fgWgkwnYynEp02+pHP8CoBO9nZlKIlEbK4lJTr5MMDbyYWuBBDgV2XlCXpQ3dzOKRufcwEPDMAQTsixzLy8v/PMNjVAwaQvFkK+w93orpUTy3p4O/Es+6L0+lrQjCfy/+GDN9xOrEUDEatBGFO8CGQxEOJcXH4DTpQxgkcAtsytT93M+je21C2Am8x6bVTegqgmdSM9RIFmbq0CDAeVrA0uDdqx0Etk8MDX3gqxlBTRa+oKBmSt5FwYAq4RxEyColRFuzQfjoBLovJfZXQcDMkrha1bnEqmzHKV+fexQcq2oNGSBtHxuZJNavpYwr+yQJ1o7HEe5ApmnAPoaq6MUm1kawbiMDalB64CQoYErkF0MoHcmqD5mBquDEVTIlkzPE/eRyUIIGumX6qABQH/vYO2pboT0+zWAUuNK0x5kRI4vi7JZmD5DPB4P/5mjLEt3PB75/Q/n3B0PVVUtmgJFnReYf3zZqOuaH//MstzpdHJFUfg59/t9gQUUdDMCkOu6Tr6CfX468Z2GDyFo0bFI8OM48iMQXfiH7IRE9/NBwsTeBtKEukLA5JFmQH7+mPxCXgtUTaaV94Xlg/4Lgg4EODAuPQgY6VdKqMxhPhrkYfEMUJClqxL2FJRZAJ2su2s5THXMo5JzZi1ajcVKqmpiaYa1OLBgmQYS4CjSjPqskAKp0liv5Rye6WpBsNvb4XD4zpGFD44cGIg6RLEIphsCO3DuJ2H8t594u01yEDCIcMgSgfGYA2h5NTBOziayPnx7mgv8ljsuNBkm0yUhwMxGdk04HF8DhRngq3v+FYHNcRjIYrCQA2DxuwqR+wu+HnkxU9Zp7AAAAABJRU5ErkJggg=='
   };
   return PlaybackSelectModel;

package/lib/component/playback/PlaybackSelectView.js

@@ -35,7 +35,21 @@ var PlaybackSelectView = /** @class */function (_super) {
   function PlaybackSelectView() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
     _this.type = PlaybackSelectView.type;
+    _this.initPosition = {
+      x: 0,
+      y: 0
+    };
+    _this.initDownPosition = {
+      x: 0,
+      y: 0
+    };
+    _this.currentPosition = {
+      x: 0,
+      y: 0
+    };
+    _this.isDown = false;
     _this.isMountEvent = false;
+    _this.mouseIndex = 0;
     return _this;
   }
   PlaybackSelectView.prototype.init = function (ecModel, api) {
@@ -56,17 +70,26 @@ var PlaybackSelectView = /** @class */function (_super) {
     // const z = playbackSelectModel.get('z');
     var rect = grid.coordinateSystem.getRect();
     var startIndex = playbackSelectModel.get('startIndex');
-    if (startIndex === null) {
+    var isMobile = playbackSelectModel.get('isMobile');
+    var xAxis = ecModel.getComponent('xAxis', 0);
+    var xAxis2D = xAxis.axis;
+    if (startIndex === null || startIndex === void 0) {
       this.clear();
       return;
+      // if (!isMobile) {
+      //     this.clear();
+      //     return;
+      // }
+      // const [start, end] = xAxis2D.scale.getExtent();
+      // const lastIndex =(xAxis2D.scale as OrdinalScale).getOrdinalMeta().getCategoriesSize() - 1;
+      // startIndex = Math.min(Math.floor((end + start) / 2), lastIndex);
     }
+
     this._rect = rect;
     var bgColor = playbackSelectModel.get('bgColor');
     var color = playbackSelectModel.get('color');
     var icon = playbackSelectModel.get('icon');
     var yData = playbackSelectModel.get('yData');
-    var xAxis = ecModel.getComponent('xAxis', 0);
-    var xAxis2D = xAxis.axis;
     var x = Math.floor(xAxis2D.toGlobalCoord(xAxis2D.dataToCoord(startIndex)));
     var lineStyle = {
       lineWidth: 2,
@@ -132,25 +155,47 @@ var PlaybackSelectView = /** @class */function (_super) {
       group.remove(this.imgEl);
       this.imgEl = null;
     }
+    this.currentPosition.x = x;
+    this.currentPosition.y = yData;
+    this.isMobile = isMobile;
   };
   PlaybackSelectView.prototype._onMouseMove = function (e) {
     var offsetX = e.offsetX;
     var offsetY = e.offsetY;
+    var isMobile = this.isMobile;
+    if (isMobile) {
+      if (!this.isDown) {
+        return;
+      }
+      var initPosition = this.initPosition;
+      var initDownPosition = this.initDownPosition;
+      var diffX = offsetX - initDownPosition.x;
+      offsetX = initPosition.x + diffX;
+      if (initPosition.y) {
+        var diffY = offsetY - initDownPosition.y;
+        offsetY = initPosition.y + diffY;
+      }
+    }
     var ecModel = this.ecModel;
     var xAxis = ecModel.getComponent('xAxis', 0);
     if (offsetX > this._rect.x + this._rect.width) {
-      this.api.dispatchAction({
-        type: 'playbackSelect',
-        playbackSelect: {
-          startIndex: null
-        }
-      });
-      return;
+      if (isMobile) {
+        offsetX = this._rect.x + this._rect.width;
+      } else {
+        this.api.dispatchAction({
+          type: 'playbackSelect',
+          playbackSelect: {
+            startIndex: null
+          }
+        });
+        return;
+      }
     }
     var xAxis2D = xAxis.axis;
     var index = xAxis2D.coordToData(xAxis2D.toLocalCoord(offsetX));
     var list = xAxis2D.scale.getOrdinalMeta().getCategories();
     var selectedIndex = Math.max(Math.min(index, list.length - 1), 0);
+    isMobile && (this.mouseIndex = selectedIndex);
     this.api.dispatchAction({
       type: 'playbackSelect',
       playbackSelect: {
@@ -163,6 +208,12 @@ var PlaybackSelectView = /** @class */function (_super) {
   };
   PlaybackSelectView.prototype._onClick = function (e) {
     var offsetX = e.offsetX;
+    if (this.isMobile) {
+      this.api.trigger('playbackselected', {
+        startIndex: this.mouseIndex
+      });
+      return;
+    }
     var ecModel = this.ecModel;
     var xAxis = ecModel.getComponent('xAxis', 0);
     var xAxis2D = xAxis.axis;
@@ -181,27 +232,22 @@ var PlaybackSelectView = /** @class */function (_super) {
       }
     });
   };
-  // private _onMousewheel(): void {
-  //     const ecModel = this.ecModel;
-  //     const playbackSelectModel = this.playbackSelectModel;
-  //     const startIndex = playbackSelectModel.get('startIndex');
-  //     const yData = playbackSelectModel.get('yData');
-  //     if (startIndex === null) {
-  //         return;
-  //     }
-  //     const xAxis = ecModel.getComponent('xAxis', 0) as AxisBaseModel;
-  //     const xAxis2D = xAxis.axis as Axis2D;
-  //     const list = (xAxis2D.scale as OrdinalScale).getOrdinalMeta().getCategories();
-  //     this.api.dispatchAction({
-  //         type: 'playbackSelect',
-  //         playbackSelect: {
-  //             startIndex: startIndex,
-  //             uid: this.playbackSelectModel.uid,
-  //             yData,
-  //             time: list[startIndex as number],
-  //         }
-  //     })
-  // }
+  PlaybackSelectView.prototype._onMousedown = function (e) {
+    if (!this.isMobile) {
+      return;
+    }
+    this.initDownPosition.x = e.offsetX;
+    this.initDownPosition.y = e.offsetY;
+    this.initPosition.x = this.currentPosition.x;
+    this.initPosition.y = this.currentPosition.y;
+    this.isDown = true;
+  };
+  PlaybackSelectView.prototype._onMouseUp = function (e) {
+    if (!this.isDown) {
+      return;
+    }
+    this.isDown = false;
+  };
   PlaybackSelectView.prototype.mountEvent = function () {
     if (this.isMountEvent) {
       return;
@@ -210,6 +256,8 @@ var PlaybackSelectView = /** @class */function (_super) {
     zr.on('mousemove', this._onMouseMove, this);
     zr.on('click', this._onClick, this);
     zr.on('globalout', this._globalout, this);
+    zr.on('mousedown', this._onMousedown, this);
+    zr.on('mouseup', this._onMouseUp, this);
     // zr.on('mousewheel', this._onMousewheel, this);
     this.isMountEvent = true;
   };
@@ -221,6 +269,8 @@ var PlaybackSelectView = /** @class */function (_super) {
     zr.off('mousemove', this._onMouseMove);
     zr.off('click', this._onClick);
     zr.off('globalout', this._globalout);
+    zr.off('mousedown', this._onMousedown);
+    zr.off('mouseup', this._onMouseUp);
     // zr.off('mousewheel', this._onMousewheel);
     this.isMountEvent = false;
   };

package/lib/core/echarts.js

@@ -1070,7 +1070,7 @@ var ECharts = /** @class */function (_super) {
     });
     // Extra events
     // TODO register?
-    each(['selectchanged', 'selectitem', 'loadmore', 'zoomend', 'extraclick', 'visiblechanged', 'dataappend', 'alarmchanged', 'alarmdelete', 'selectidchanged', 'playbackselected', 'snapshotzoom', 'playbackorder', 'events'], function (eventType) {
+    each(['selectchanged', 'selectitem', 'loadmore', 'zoomend', 'extraclick', 'visiblechanged', 'dataappend', 'alarmchanged', 'alarmdelete', 'selectidchanged', 'playbackselected', 'snapshotzoom', 'playbackorder', 'events', "playbackorderclick"], function (eventType) {
       _this._messageCenter.on(eventType, function (event) {
         this.trigger(eventType, event);
       }, _this);

package/package.json

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

package/types/src/chart/playbackOrder/PlaybackOrderSeries.d.ts

@@ -28,6 +28,7 @@ export interface PlaybackOrderDataItemOption extends LinesStateOption, StatesOpt
 export interface PlaybackOrderSeriesOption extends SeriesOption, LinesStateOption<CallbackDataParams>, SeriesOnCartesianOptionMixin, SeriesOnGeoOptionMixin, SeriesOnPolarOptionMixin, SymbolOptionMixin<CallbackDataParams>, SeriesOnCalendarOptionMixin, SeriesLargeOptionMixin {
     type?: 'playbackOrder';
     coordinateSystem?: string;
+    isMobile?: boolean;
     clip?: boolean;
     data?: PlaybackOrderDataItemOption[] | ArrayLike<number>;
     format?: (value: string) => string;

package/types/src/chart/playbackOrder/PlaybackOrderView.d.ts

@@ -12,6 +12,8 @@ declare class PlaybackOrderView extends ChartView {
     private _hoverParams;
     htmlContent: PlaybackHtmlContent;
     seriesModel: PlaybackOrderSeriesModel;
+    private _isSmallSize;
+    private api;
     render(seriesModel: PlaybackOrderSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void;
     _renderHover(): void;
     _clickGlobal(): void;

package/types/src/component/playback/PlaybackSelectModel.d.ts

@@ -6,6 +6,7 @@ export interface PlaybackSelectOption extends ComponentOption, BoxLayoutOptionMi
     color: string;
     bgColor: string;
     startIndex: number | string | null;
+    isMobile?: boolean;
     yData?: number;
     icon: string;
 }
@@ -13,6 +14,7 @@ export interface PlaybackSelectPayload {
     startIndex: number | string | null;
     uid: string;
     yData?: number;
+    show?: boolean;
 }
 export declare class PlaybackSelectModel extends ComponentModel<PlaybackSelectOption> {
     static type: "playbackSelect";

package/types/src/component/playback/PlaybackSelectView.d.ts

@@ -8,7 +8,13 @@ export declare class PlaybackSelectView extends ComponentView {
     private lineEl;
     private rectEl;
     private imgEl;
+    private initPosition;
+    private initDownPosition;
+    private currentPosition;
+    private isDown;
+    private isMobile;
     private isMountEvent;
+    private mouseIndex;
     ecModel: GlobalModel;
     api: ExtensionAPI;
     playbackSelectModel: PlaybackSelectModel;
@@ -18,6 +24,8 @@ export declare class PlaybackSelectView extends ComponentView {
     private _onMouseMove;
     private _onClick;
     private _globalout;
+    private _onMousedown;
+    private _onMouseUp;
     mountEvent(): void;
     unmountEvent(): void;
     clear(): void;