@grafana/data#CreatePlotOverlay TypeScript Examples

The following examples show how to use @grafana/data#CreatePlotOverlay. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: jquery.flot.events.ts    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
createAnnotationToolip: CreatePlotOverlay = (element, event, plot) => {
  const injector = angular.element(document).injector();
  const content = document.createElement('div');
  content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>';

  injector.invoke([
    '$compile',
    '$rootScope',
    ($compile, $rootScope) => {
      const eventManager = plot.getOptions().events.manager;
      const tmpScope = $rootScope.$new(true);
      tmpScope.event = event;
      tmpScope.onEdit = () => {
        eventManager.editEvent(event);
      };

      $compile(content)(tmpScope);
      tmpScope.$digest();
      tmpScope.$destroy();

      const drop = new Drop({
        target: element[0],
        content: content,
        position: 'bottom center',
        classes: 'drop-popover drop-popover--annotation',
        openOn: 'hover',
        hoverCloseDelay: 200,
        tetherOptions: {
          constraints: [{ to: 'window', pin: true, attachment: 'both' }],
        },
      });

      drop.open();

      drop.on('close', () => {
        setTimeout(() => {
          drop.destroy();
        });
      });
    },
  ]);
}
Example #2
Source File: jquery.flot.events.ts    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
createEditPopover: CreatePlotOverlay = (element, event, plot) => {
  const eventManager = plot.getOptions().events.manager;
  if (eventManager.editorOpen) {
    // update marker element to attach to (needed in case of legend on the right
    // when there is a double render pass and the initial marker element is removed)
    markerElementToAttachTo = element;
    return;
  }

  // mark as openend
  eventManager.editorOpened();
  // set marker elment to attache to
  markerElementToAttachTo = element;

  // wait for element to be attached and positioned
  setTimeout(() => {
    const injector = angular.element(document).injector();
    const content = document.createElement('div');
    content.innerHTML = '<event-editor panel-ctrl="panelCtrl" event="event" close="close()"></event-editor>';

    injector.invoke([
      '$compile',
      '$rootScope',
      ($compile, $rootScope) => {
        const scope = $rootScope.$new(true);
        let drop: any;

        scope.event = event;
        scope.panelCtrl = eventManager.panelCtrl;
        scope.close = () => {
          drop.close();
        };

        $compile(content)(scope);
        scope.$digest();

        drop = new Drop({
          target: markerElementToAttachTo[0],
          content: content,
          position: 'bottom center',
          classes: 'drop-popover drop-popover--form',
          openOn: 'click',
          tetherOptions: {
            constraints: [{ to: 'window', pin: true, attachment: 'both' }],
          },
        });

        drop.open();
        eventManager.editorOpened();

        drop.on('close', () => {
          // need timeout here in order call drop.destroy
          setTimeout(() => {
            eventManager.editorClosed();
            scope.$destroy();
            drop.destroy();
          });
        });
      },
    ]);
  }, 100);
}