How to use @antv/component - 10 common examples

it('render', () => {
    controller.render(coord);
    expect(controller.annotations).to.have.lengthOf(7);
    expect(controller.get(0)).to.be.an.instanceOf(Annotation.Line);
    expect(controller.get(1)).to.be.an.instanceOf(Annotation.Image);
    expect(controller.get(2)).to.be.an.instanceOf(Annotation.Region);
    expect(controller.get(3)).to.be.an.instanceOf(Annotation.Text);
    expect(controller.get(4)).to.be.an.instanceOf(Annotation.Html);
    expect(controller.get(5)).to.be.an.instanceOf(Annotation.DataRegion);
    expect(controller.get(6)).to.be.an.instanceOf(Annotation.DataMarker);
    canvas.draw();
    expect(controller.frontgroundGroup.get('children')).to.have.lengthOf(3);
    expect(controller.backgroundGroup.get('children')).to.have.lengthOf(3);
    // html
    const dom = document.querySelector('.guide-annotation');
    expect(dom).to.be.an.instanceOf(HTMLElement);
  });

it('render', () => {
    controller.render(coord);
    expect(controller.annotations).to.have.lengthOf(7);
    expect(controller.get(0)).to.be.an.instanceOf(Annotation.Line);
    expect(controller.get(1)).to.be.an.instanceOf(Annotation.Image);
    expect(controller.get(2)).to.be.an.instanceOf(Annotation.Region);
    expect(controller.get(3)).to.be.an.instanceOf(Annotation.Text);
    expect(controller.get(4)).to.be.an.instanceOf(Annotation.Html);
    expect(controller.get(5)).to.be.an.instanceOf(Annotation.DataRegion);
    expect(controller.get(6)).to.be.an.instanceOf(Annotation.DataMarker);
    canvas.draw();
    expect(controller.frontgroundGroup.get('children')).to.have.lengthOf(3);
    expect(controller.backgroundGroup.get('children')).to.have.lengthOf(3);
    // html
    const dom = document.querySelector('.guide-annotation');
    expect(dom).to.be.an.instanceOf(HTMLElement);
  });

it('render', () => {
    controller.render(coord);
    expect(controller.annotations).to.have.lengthOf(7);
    expect(controller.get(0)).to.be.an.instanceOf(Annotation.Line);
    expect(controller.get(1)).to.be.an.instanceOf(Annotation.Image);
    expect(controller.get(2)).to.be.an.instanceOf(Annotation.Region);
    expect(controller.get(3)).to.be.an.instanceOf(Annotation.Text);
    expect(controller.get(4)).to.be.an.instanceOf(Annotation.Html);
    expect(controller.get(5)).to.be.an.instanceOf(Annotation.DataRegion);
    expect(controller.get(6)).to.be.an.instanceOf(Annotation.DataMarker);
    canvas.draw();
    expect(controller.frontgroundGroup.get('children')).to.have.lengthOf(3);
    expect(controller.backgroundGroup.get('children')).to.have.lengthOf(3);
    // html
    const dom = document.querySelector('.guide-annotation');
    expect(dom).to.be.an.instanceOf(HTMLElement);
  });

it('render', () => {
    controller.render(coord);
    expect(controller.annotations).to.have.lengthOf(7);
    expect(controller.get(0)).to.be.an.instanceOf(Annotation.Line);
    expect(controller.get(1)).to.be.an.instanceOf(Annotation.Image);
    expect(controller.get(2)).to.be.an.instanceOf(Annotation.Region);
    expect(controller.get(3)).to.be.an.instanceOf(Annotation.Text);
    expect(controller.get(4)).to.be.an.instanceOf(Annotation.Html);
    expect(controller.get(5)).to.be.an.instanceOf(Annotation.DataRegion);
    expect(controller.get(6)).to.be.an.instanceOf(Annotation.DataMarker);
    canvas.draw();
    expect(controller.frontgroundGroup.get('children')).to.have.lengthOf(3);
    expect(controller.backgroundGroup.get('children')).to.have.lengthOf(3);
    // html
    const dom = document.querySelector('.guide-annotation');
    expect(dom).to.be.an.instanceOf(HTMLElement);
  });

it('render', () => {
    controller.render(coord);
    expect(controller.annotations).to.have.lengthOf(7);
    expect(controller.get(0)).to.be.an.instanceOf(Annotation.Line);
    expect(controller.get(1)).to.be.an.instanceOf(Annotation.Image);
    expect(controller.get(2)).to.be.an.instanceOf(Annotation.Region);
    expect(controller.get(3)).to.be.an.instanceOf(Annotation.Text);
    expect(controller.get(4)).to.be.an.instanceOf(Annotation.Html);
    expect(controller.get(5)).to.be.an.instanceOf(Annotation.DataRegion);
    expect(controller.get(6)).to.be.an.instanceOf(Annotation.DataMarker);
    canvas.draw();
    expect(controller.frontgroundGroup.get('children')).to.have.lengthOf(3);
    expect(controller.backgroundGroup.get('children')).to.have.lengthOf(3);
    // html
    const dom = document.querySelector('.guide-annotation');
    expect(dom).to.be.an.instanceOf(HTMLElement);
  });

it('render', () => {
    controller.render(coord);
    expect(controller.annotations).to.have.lengthOf(7);
    expect(controller.get(0)).to.be.an.instanceOf(Annotation.Line);
    expect(controller.get(1)).to.be.an.instanceOf(Annotation.Image);
    expect(controller.get(2)).to.be.an.instanceOf(Annotation.Region);
    expect(controller.get(3)).to.be.an.instanceOf(Annotation.Text);
    expect(controller.get(4)).to.be.an.instanceOf(Annotation.Html);
    expect(controller.get(5)).to.be.an.instanceOf(Annotation.DataRegion);
    expect(controller.get(6)).to.be.an.instanceOf(Annotation.DataMarker);
    canvas.draw();
    expect(controller.frontgroundGroup.get('children')).to.have.lengthOf(3);
    expect(controller.backgroundGroup.get('children')).to.have.lengthOf(3);
    // html
    const dom = document.querySelector('.guide-annotation');
    expect(dom).to.be.an.instanceOf(HTMLElement);
  });

it('render', () => {
    controller.render(coord);
    expect(controller.annotations).to.have.lengthOf(7);
    expect(controller.get(0)).to.be.an.instanceOf(Annotation.Line);
    expect(controller.get(1)).to.be.an.instanceOf(Annotation.Image);
    expect(controller.get(2)).to.be.an.instanceOf(Annotation.Region);
    expect(controller.get(3)).to.be.an.instanceOf(Annotation.Text);
    expect(controller.get(4)).to.be.an.instanceOf(Annotation.Html);
    expect(controller.get(5)).to.be.an.instanceOf(Annotation.DataRegion);
    expect(controller.get(6)).to.be.an.instanceOf(Annotation.DataMarker);
    canvas.draw();
    expect(controller.frontgroundGroup.get('children')).to.have.lengthOf(3);
    expect(controller.backgroundGroup.get('children')).to.have.lengthOf(3);
    // html
    const dom = document.querySelector('.guide-annotation');
    expect(dom).to.be.an.instanceOf(HTMLElement);
  });

canvas,
        frontgroundGroup: view.get('frontgroundGroup'),
        theme: theme.tooltip,
        backgroundGroup: view.get('backgroundGroup'),
      },
      defaultCfg,
      options
    );
    if (options.crosshairs && options.crosshairs.type === 'rect') {
      options.zIndex = 0; // toolip 背景框不可遮盖住 geom，防止用户配置了 crosshairs
    }
    options.visible = false;

    let tooltip: any;
    if (options.useHtml) {
      tooltip = new Tooltip.Html(options);
      const triggerEvent = this._getTriggerEvent();
      if (!tooltip.get('enterable') && triggerEvent === 'panel:mousemove') {
        const tooltipContainer = tooltip.get('container');
        if (tooltipContainer) {
          tooltipContainer.onmousemove = (e) => {
            // 避免 tooltip 频繁闪烁
            const eventObj = this._normalizeEvent(e);
            view.emit(triggerEvent, eventObj);
          };
        }
      }
    } else {
      tooltip = new Tooltip.Canvas(options);
    }
    this.tooltip = tooltip;
    // 需要保存当前 tooltip 的配置项，否则当用户关闭 tooltip 再手动调用 view.showTooltip() 时会报错

}

      item.checked = _.isNil(item.checked) ? true : item.checked;
    });
    const posArray = position.split('-');
    const maxLength = posArray[0] === 'right' || posArray[0] === 'left' ? panelRange.height : this.viewRange.width;
    const legendCfg = _.deepMix({}, viewTheme.legend[posArray[0]], legendOptions, fieldOption, {
      maxLength,
      viewTheme,
      items,
      container,
      canvas,
    });
    const useHtml = !!legendCfg.useHtml;

    const legend = useHtml ? new HtmlCategory(legendCfg) : new CanvasCategory(legendCfg);

    legend.on('itemclick', (ev: EventType) => {
      if (legendOptions.onClick) {
        // 用户自定义图例点击事件
        legendOptions.onClick(ev);
      }
    });
    this.bindHoverEvent(legend); // 用户自定义 hover 图例项的事件交互
    return legend;
  }

let tooltip: any;
    if (options.useHtml) {
      tooltip = new Tooltip.Html(options);
      const triggerEvent = this._getTriggerEvent();
      if (!tooltip.get('enterable') && triggerEvent === 'panel:mousemove') {
        const tooltipContainer = tooltip.get('container');
        if (tooltipContainer) {
          tooltipContainer.onmousemove = (e) => {
            // 避免 tooltip 频繁闪烁
            const eventObj = this._normalizeEvent(e);
            view.emit(triggerEvent, eventObj);
          };
        }
      }
    } else {
      tooltip = new Tooltip.Canvas(options);
    }
    this.tooltip = tooltip;
    // 需要保存当前 tooltip 的配置项，否则当用户关闭 tooltip 再手动调用 view.showTooltip() 时会报错
    this.options = options;

    this._bindEvent();
  }