fix: resolve eslint problem

src/plugins/timeBar/controllerBtn.ts

@@ -65,9 +65,13 @@ export default class ControllerBtn {
   private isPlay: boolean;
 
   public playButton: Button;
+
   public preStepButton: IShape;
+
   public nextStepButton: IShape;
+
   private checkedIcon: IShape;
+  
   private checkedText: IShape;
 
   readonly controllerCfg?: ControllerCfg;
@@ -75,10 +79,13 @@ export default class ControllerBtn {
   private group: IGroup;
 
   private speedGroup: IGroup;
+
   private toggleGroup: IGroup;
 
   private speedText: IShape;
+
   private speedPoint: IShape;
+
   private speedAxisY: number[];
 
   // 当前播放速度

src/plugins/timeBar/handler.ts

@@ -43,21 +43,26 @@ const SIMPLE_DEFAULT_STYLE = {
 }
 
 export default class Handler {
-
   // handle容器
   private group: IGroup;
+
   private name: string;
 
   private x: number;
+
   private y: number;
+
   private width: number;
+
   private height: number;
 
   private style: IStyle;
+
   private handleType: 'trend' | 'simple';
 
   // 组件
   private background: IShape;
+
   private handleGroup: IGroup;
 
   constructor(cfg: HandlerCfg) {

src/plugins/timeBar/index.ts

@@ -102,10 +102,6 @@ export default class TimeBar extends Base {
     };
   }
 
-  constructor(cfgs?: TimeBarConfig) {
-    super(cfgs)
-  }
-
   /**
    * 初始化 TimeBar 的容器
    */

src/plugins/timeBar/timeBarSlice.ts

@@ -64,44 +64,65 @@ export interface TimeBarSliceOption {
 
 export default class TimeBarSlice {
   private graph: IGraph;
+
   private canvas: ICanvas;
+
   private group: IGroup;
+
   private sliceGroup: IGroup;
+
   private width: number;
+
   private height: number;
+
   private padding: number;
+
   private data: {
     date: string;
     value: string;
   }[];
+
   private start: number;
+
   private end: number;
 
   // style
   public x: number;
+
   public y: number;
+
   private selectedTickStyle: ShapeStyle;
+
   private unselectedTickStyle: ShapeStyle;
+
   private tickLabelFormatter: (d: any) => string | boolean;
 
   private tickRects: any[];
+
   private tickWidth: number;
+
   private startTickRectId: number;
+
   private endTickRectId: number;
 
   private tooltipBackgroundColor: string;
+
   private tooltipFomatter: (d: any) => string;
 
   private dragging: boolean;
 
   // play controller
   private controllerBtnGroup: ControllerBtn;
+
   /** 是否处于播放状态 */
   private isPlay: boolean;
+
   // 调整后的播放速度
   private currentSpeed: number;
+
   /** 动画 id */
   private playHandler: number;
+  
   private frameCount: number = 0;
 
   constructor(cfgs?: TimeBarSliceConfig) {
@@ -217,7 +238,7 @@ export default class TimeBarSlice {
         y: rectBBox.minY
       });
 
-      let label = undefined;
+      let label;
       if (tickLabelFormatter) {
         label = tickLabelFormatter(d);
         if (!isString(label) && label) { // return true
@@ -290,7 +311,7 @@ export default class TimeBarSlice {
     sliceGroup.on('click', e => {
       const targetRect = e.target;
       if (targetRect.get('type') !== 'rect' || !targetRect.get('name')) return;
-      const id = parseInt(targetRect.get('name').split('-')[2]);
+      const id = parseInt(targetRect.get('name').split('-')[2], 10);
 
       if (!isNaN(id)) {
         const tickRects = this.tickRects
@@ -318,7 +339,7 @@ export default class TimeBarSlice {
         tickRect.rect.attr(unselectedTickStyle);
       })
       const targetRect = e.target;
-      const id = parseInt(targetRect.get('name').split('-')[2]);
+      const id = parseInt(targetRect.get('name').split('-')[2], 10);
       const selectedTickStyle = this.selectedTickStyle
       tickRects[id].rect.attr(selectedTickStyle);
       this.startTickRectId = id
@@ -333,7 +354,7 @@ export default class TimeBarSlice {
       if (!this.dragging) return;
       if (e.target.get('type') !== 'rect') return;
 
-      const id = parseInt(e.target.get('name').split('-')[2]);
+      const id = parseInt(e.target.get('name').split('-')[2], 10);
       const startTickRectId = this.startTickRectId
       const tickRects = this.tickRects
       const selectedTickStyle = this.selectedTickStyle
@@ -357,7 +378,7 @@ export default class TimeBarSlice {
 
       if (e.target.get('type') !== 'rect') return;
       const startTickRectId = this.startTickRectId
-      const id = parseInt(e.target.get('name').split('-')[2]);
+      const id = parseInt(e.target.get('name').split('-')[2], 10);
       if (id < startTickRectId) return;
 
       const selectedTickStyle = this.selectedTickStyle
@@ -383,7 +404,7 @@ export default class TimeBarSlice {
       pickRect.on('mouseenter', e => {
         const rect = e.target;
         if (rect.get('type') !== 'rect') return;
-        const id = parseInt(rect.get('name').split('-')[2]);
+        const id = parseInt(rect.get('name').split('-')[2], 10);
         const clientPoint = canvas.getClientByPoint(tickRects[id].x, tickRects[id].y)
         tooltip.show({
           x: tickRects[id].x,

src/plugins/timeBar/timeBarTooltip.ts

@@ -1,7 +1,5 @@
-import { IGroup, IShape } from '@antv/g-base';
 import createDOM from '@antv/dom-util/lib/create-dom'
-import { dataToPath, linePathToAreaPath } from './path';
-import { isNumber, isString } from '@antv/util';
+import { isString } from '@antv/util';
 import modifyCSS from '@antv/dom-util/lib/modify-css';
 
 export const BACKGROUND_STYLE = {
@@ -18,13 +16,6 @@ export const TEXT_STYLE = {
   fontSize: 12
 };
 
-interface ArrowStyle {
-  r?: number,
-  fill?: string,
-  stroke?: string,
-  lineWidth?: number
-};
-
 export interface TimeBarTooltipCfg {
   readonly container: HTMLElement | string;
   readonly className?: string;
@@ -48,20 +39,32 @@ export interface TimeBarTooltipCfg {
  */
 export default class TimeBarTooltip {
   private container: HTMLElement | string;
+
   private className: string;
+
   // 生成的 shape
   public backgroundDOM: HTMLElement;
+
   public arrowDOM: HTMLElement;
+
   // 位置大小配置
   private x: number;
+
   private y: number;
+
   // style
   private padding: number[];
+
   private backgroundColor: string;
+
   private textColor: string;
+
   private parentHeight: number;
+
   private parentWidth: number;
+
   private opacity: number;
+
   private fontSize: number;
 
   private text: string;
@@ -154,8 +157,8 @@ export default class TimeBarTooltip {
       modifyCSS(self.backgroundDOM, { marginLeft: `${-backgroundWidth / 2 - right + self.parentWidth + 12}px` })
     }
   }
+  
   public hide() {
-    const self = this;
-    modifyCSS(self.container as HTMLElement, { top: 0, left: 0, visibility: 'hidden', });
+    modifyCSS(this.container as HTMLElement, { top: 0, left: 0, visibility: 'hidden', });
   }
 }

src/plugins/timeBar/timeButton.ts

@@ -20,18 +20,21 @@ interface ButtonCfg {
 export default class Button {
   /** button 配置 */
   private config: ButtonCfg;
+
   /** 圆点 */
   private circle: IShape;
+
   /** 开始 marker */
   private startMarker: IShape;
+
   /** 暂停 marker */
   private pauseGroupMarker: IGroup;
+
   private pauseLeftMarker: IShape;
+
   private pauseRightMarker: IShape;
 
   constructor(cfg: ButtonCfg) {
-    // super();
-
     this.config = deepMix({}, cfg);
 
     this.init();
@@ -84,8 +87,8 @@ export default class Button {
       attrs: {
         x: this.config.x - (1 / 4 + 1 / 8) * this.config.r,
         y: this.config.y - height / 2,
-        width: width,
-        height: height,
+        width,
+        height,
         fill: '#ccc',
       },
       name: 'playPauseBtn'

src/plugins/timeBar/trend.ts

@@ -44,19 +44,28 @@ export interface TrendCfg {
  */
 export default class Trend {
   private group: IGroup;
+
   // 位置大小配置
   private x: number;
+
   private y: number;
+
   private width: number;
+
   private height: number;
 
   private data: number[];
 
   private smooth: boolean;
+
   private isArea: boolean;
+  
   private backgroundStyle: ShapeStyle;
+
   private lineStyle: ShapeStyle;
+
   private areaStyle: ShapeStyle;
+
   private intervalConfig: Interval;
 
   constructor(cfg: TrendCfg) {
@@ -148,4 +157,8 @@ export default class Trend {
     // 统一移动到对应的位置
     trendGroup.move(x, y);
   }
+
+  public destory() {
+    this.group.destroy()
+  }
 }

src/plugins/timeBar/trendTimeBar.ts

@@ -106,32 +106,49 @@ interface TrendTimeBarConfig extends SliderOption {
 
 export default class TrendTimeBar {
   private group: IGroup;
+
   private graph: IGraph;
+
   private canvas: ICanvas;
+
   // 位置大小配置
   public x: number;
+
   public y: number;
+
   public width: number;
+
   public height: number;
+
   private padding: number;
 
   private trendCfg: TrendCfg;
+
   private timeBarType: 'trend' | 'simple';
 
   private controllerCfg: ControllerCfg;
+
   // 样式配置
   private backgroundStyle: any;
+
   private foregroundStyle: any;
+
   private handlerStyle: any;
+
   private textStyle: any;
+
   /* 前景框，选中的区域 */
   private foregroundShape: IShape;
+
   /* 左侧(上侧)的按钮 */
   private minHandlerShape: Handler;
+
   /* 左侧文本 */
   private minTextShape: IShape;
+
   /* 由侧(下侧)的按钮 */
   private maxHandlerShape: Handler;
+
   /* 右侧文本 */
   private maxTextShape: IShape;
 
@@ -139,11 +156,15 @@ export default class TrendTimeBar {
 
   // 交互相关的数据信息
   private start: number;
+
   private end: number;
+
   private minText: string;
+
   private maxText: string;
 
   private currentHandler: Handler | IShape;
+  
   private prevX: number = 0;
 
   /** 刻度位置预处理 */
@@ -164,6 +185,8 @@ export default class TrendTimeBar {
 
   private controllerBtnGroup: ControllerBtn;
 
+  private trendComponent: Trend;
+
   constructor(cfg: TrendTimeBarConfig) {
 
     const {
@@ -265,7 +288,7 @@ export default class TrendTimeBar {
     const { width, height, timeBarType } = this
     // 趋势图数据
     if (timeBarType === 'trend' && size(get(this.trendCfg, 'data'))) {
-      new Trend({
+      const trendComponent = new Trend({
         x: this.x,
         y: this.y,
         width,
@@ -273,6 +296,8 @@ export default class TrendTimeBar {
         ...this.trendCfg,
         group: this.group
       });
+
+      this.trendComponent = trendComponent
     }
 
     const sliderGroup = this.group.addGroup({
@@ -639,23 +664,21 @@ export default class TrendTimeBar {
         // 拖动最小滑块时使用当前最大值设置最大值的文本，以便恢复到默认值
         this.maxText = this.maxTextShape.attr('text')
         this.start += offsetRange;
-        const minTick = this.adjustTickIndex(this.start * this.width)
-        this.minText = this.ticks[minTick]
+        this.minText = this.ticks[this.adjustTickIndex(this.start * this.width)]
         break;
       case this.maxHandlerShape:
         // 拖动最大滑块时使用当前最小值设置最小值的文本，以便恢复到默认值
         this.minText = this.minTextShape.attr('text')
         this.end += offsetRange;
-        const maxTick = this.adjustTickIndex(this.end * this.width)
-        this.maxText = this.ticks[maxTick]
+        this.maxText = this.ticks[this.adjustTickIndex(this.end * this.width)]
         break;
       case this.foregroundShape:
         this.start += offsetRange;
         this.end += offsetRange;
-        const minRangeTick = this.adjustTickIndex(this.start * this.width)
-        const maxRangeTick = this.adjustTickIndex(this.end * this.width)
-        this.minText = this.ticks[minRangeTick]
-        this.maxText = this.ticks[maxRangeTick]
+        this.minText = this.ticks[this.adjustTickIndex(this.start * this.width)]
+        this.maxText = this.ticks[this.adjustTickIndex(this.end * this.width)]
+        break;
+      default:
         break;
     }
   }
@@ -823,5 +846,9 @@ export default class TrendTimeBar {
     group.off(`${PRE_STEP_BTN}:click`)
     group.off(TIMEBAR_CONFIG_CHANGE)
     group.destroy()
+
+    if (this.trendComponent) {
+      this.trendComponent.destory()
+    }
   }
 }