How to use vega-tooltip - 10 common examples

//   "encoding": {
    //     "x": {"field": "a", "type": "quantitative"},
    //     "y": {"field": "b", "type": "quantitative"}
    //   }
    // };
    const {logger} = this.props;
    const vlSpec = this.props.spec;
    try {
      const spec = vl.compile(vlSpec, logger).spec;
      const runtime = vega.parse(spec, vlSpec.config);
      this.view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(this.refs[CHART_REF] as any)
        .renderer(this.props.renderer || 'canvas')
        .hover();
      vegaTooltip.vega(this.view);
      this.bindData();
    } catch (err) {
      logger.error(err);
    }
  }

export function embedExample($target, spec, actions = true, tooltip = true) {
    const vgSpec = compile(spec).spec;
    const view = new vega.View(vega.parse(vgSpec), { loader: loader }).renderer('svg').initialize($target);
    if (tooltip) {
        const handler = new Handler().call;
        view.tooltip(handler);
    }
    view.run();
    if (actions) {
        select($target)
            .append('div')
            .attr('class', 'vega-actions')
            .append('a')
            .text('Open in Vega Editor')
            .attr('href', '#')
            // tslint:disable-next-line
            .on('click', function () {
            post(window, editorURL, {
                mode: 'vega-lite',
                spec: compactStringify(spec),
                config: vgSpec.config,

// This call may throw an Error if parsing fails.
  const runtime = vega.parse(vgSpec, mode === 'vega-lite' ? {} : config);

  const view = new vega.View(runtime, {
    loader,
    logLevel,
    renderer
  });

  if (opts.tooltip !== false) {
    let handler: TooltipHandler;
    if (isTooltipHandler(opts.tooltip)) {
      handler = opts.tooltip;
    } else {
      // user provided boolean true or tooltip options
      handler = new Handler(opts.tooltip === true ? {} : opts.tooltip).call;
    }

    view.tooltip(handler);
  }

  let { hover } = opts;

  if (hover === undefined) {
    hover = mode === 'vega';
  }

  if (hover) {
    const { hoverSet, updateSet } = (typeof hover === 'boolean' ? {} : hover) as Hover;

    view.hover(hoverSet, updateSet);
  }

handler(view, event, item, value) {
    this.hideTooltip();

    // hide tooltip for null, undefined, or empty string values
    if (value == null || value === '') {
      return;
    }

    const el = document.createElement('div');
    el.setAttribute('id', tooltipId);
    el.classList.add('vgaVis__tooltip', 'euiToolTipPopover', 'euiToolTip', `euiToolTip--${this.position}`);

    // Sanitized HTML is created by the tooltip library,
    // with a large number of tests, hence suppressing eslint here.
    // eslint-disable-next-line no-unsanitized/property
    el.innerHTML = createTooltipContent(value, _.escape);

    // add to DOM to calculate tooltip size
    document.body.appendChild(el);

    // if centerOnMark numeric value is smaller than the size of the mark, use mouse [x,y]
    let anchorBounds;
    if (item.bounds.width() > this.centerOnMark || item.bounds.height() > this.centerOnMark) {
      // I would expect clientX/Y, but that shows incorrectly
      anchorBounds = createRect(event.pageX, event.pageY, 0, 0);
    } else {
      const containerBox = this.container.getBoundingClientRect();
      anchorBounds = createRect(
        containerBox.left + view._origin[0] + item.bounds.x1,
        containerBox.top + view._origin[1] + item.bounds.y1,
        item.bounds.width(),
        item.bounds.height()

// hide tooltip for null, undefined, or empty string values
    if (value == null || value === '') {
      return;
    }

    const el = document.createElement('div');
    el.setAttribute('id', tooltipId);
    ['vgaVis__tooltip', 'euiToolTipPopover', 'euiToolTip', `euiToolTip--${this.position}`].forEach(className => {
      el.classList.add(className);
    });

    // Sanitized HTML is created by the tooltip library,
    // with a large number of tests, hence suppressing eslint here.
    // eslint-disable-next-line no-unsanitized/property
    el.innerHTML = createTooltipContent(value, _.escape);

    // add to DOM to calculate tooltip size
    document.body.appendChild(el);

    // if centerOnMark numeric value is smaller than the size of the mark, use mouse [x,y]
    let anchorBounds;
    if (item.bounds.width() > this.centerOnMark || item.bounds.height() > this.centerOnMark) {
      // I would expect clientX/Y, but that shows incorrectly
      anchorBounds = createRect(event.pageX, event.pageY, 0, 0);
    } else {
      const containerBox = this.container.getBoundingClientRect();
      anchorBounds = createRect(
        containerBox.left + view._origin[0] + item.bounds.x1 + window.pageXOffset,
        containerBox.top + view._origin[1] + item.bounds.y1 + window.pageYOffset,
        item.bounds.width(),
        item.bounds.height()

if (this.props.width) {
        if (typeof this.props.width === 'function') {
          vlSpec.width = this.props.width(dimension, this.state.data);
        } else {
          vlSpec.width = this.props.width;
        }
      }
      const spec = vl.compile(vlSpec).spec;
      const runtime = vega.parse(spec);
      this.view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(el)
        .renderer('svg')
        .hover();
      if (this.props.tooltipOptions && Object.keys(this.props.tooltipOptions).length) {
        vegaTooltip.vega(this.view, this.props.tooltipOptions);
      } else {
        vegaTooltip.vega(this.view);
      }
      this.bindData();
    } catch (err) {
      console.log('ERROR: Failed to compile vega spec ', err);
    }
  };

onHistogramViewAvailable(view) {
        this.view = view;
        const {binDuration} = this.state.bins;
        const options = {showAllFields: false,
                         fields: [{field: 'count'}, {field: 'relStartTime', title: `from`}],
                         colorTheme: 'dark'}

        VegaTooltip.vega(view, options);
    }

this.vega_json = spec;
        this.vega_json.autosize = {"type": "fit", "resize": true, "contains": "padding"};

        if(this.vega_json["metadata"] != null){
            if(this.vega_json["metadata"]["bubbleOpts"] != null){
                this.bubbleOpts = this.vega_json["metadata"]["bubbleOpts"];
            }
        }

        this.vegaLoading = true;
        this.vegaView = new vega.View(vega.parse(this.vega_json), {'renderer': 'svg'})
                                .initialize(this.vega_container)
                                .hover()
                                .run();
        this.vegaLoading = false;
        vegaTooltip.vega(this.vegaView, this.bubbleOpts);
        
        if(window.navigator.platform === 'MacIntel'){
            window.webkit.messageHandlers["scriptHandler"].postMessage({status: 'ready'});
        }
    }

runtime = vega.parse(props.vegaSpec);
    view = new vega.View(runtime)
      .logLevel(vega.Warn)
      .initialize(this.refs.chart)
      .renderer(props.renderer)

    if (props.mode === MODES.Vega) {
      view.hover()
    }

    view.run();

    this.refs.chart.style.width = 'auto';

    if (this.props.tooltip) {
      vegaTooltip.vega(view);
    }

    window.VEGA_DEBUG.view = view;
  }

this.vega_json = spec;
        this.vega_json.autosize = {"type": "fit", "resize": true, "contains": "padding"};

        if(this.vega_json["metadata"] != null){
            if(this.vega_json["metadata"]["bubbleOpts"] != null){
                this.bubbleOpts = this.vega_json["metadata"]["bubbleOpts"];
            }
        }

        this.vegaLoading = true;
        this.vegaView = new vega.View(vega.parse(this.vega_json), {'renderer': 'svg'})
                                .initialize(this.vega_container)
                                .hover()
                                .run();
        this.vegaLoading = false;
        vegaTooltip.vega(this.vegaView, this.bubbleOpts);

        if(window.navigator.platform === 'MacIntel' && !window.tcvizBrowserMode){
            window.webkit.messageHandlers["scriptHandler"].postMessage({status: 'ready'});
        }
    }