@grafana/data#AppEvent TypeScript Examples

on<T>(event: AppEvent<T> | string, handler: (payload?: T | any) => void, scope?: any) {
    if (typeof event === 'string') {
      console.log(`Using strings as events is deprecated and will be removed in a future version. (${event})`);
      this.emitter.on(event, handler);

      if (scope) {
        const unbind = scope.$on('$destroy', () => {
          this.emitter.off(event, handler);
          unbind();
        });
      }
      return;
    }

    this.emitter.on(event.name, handler);

    if (scope) {
      const unbind = scope.$on('$destroy', () => {
        this.emitter.off(event.name, handler);
        unbind();
      });
    }
  }

off<T>(event: AppEvent<T> | string, handler: (payload?: T | any) => void) {
    if (typeof event === 'string') {
      console.log(`Using strings as events is deprecated and will be removed in a future version. (${event})`);
      this.emitter.off(event, handler);
      return;
    }

    this.emitter.off(event.name, handler);
  }

/**
   * Emits an `event` with `payload`.
   */
  emit<T extends undefined>(event: AppEvent<T>): void;

emit<T extends Partial<T> extends T ? Partial<T> : never>(event: AppEvent<T>): void;

emit<T>(event: AppEvent<T>, payload: T): void;

emit<T>(event: AppEvent<T> | string, payload?: T | any): void {
    if (typeof event === 'string') {
      console.log(`Using strings as events is deprecated and will be removed in a future version. (${event})`);
      this.emitter.emit(event, payload);
    } else {
      this.emitter.emit(event.name, payload);
    }
  }

/**
   * Handles `event` with `handler()` when emitted.
   */
  on<T extends undefined>(event: AppEvent<T>, handler: () => void, scope?: any): void;

on<T extends Partial<T> extends T ? Partial<T> : never>(event: AppEvent<T>, handler: () => void, scope?: any): void;

on<T>(event: AppEvent<T>, handler: (payload: T) => void, scope?: any): void;

off<T extends undefined>(event: AppEvent<T>, handler: () => void): void;

off<T extends Partial<T> extends T ? Partial<T> : never>(event: AppEvent<T>, handler: () => void, scope?: any): void;

off<T>(event: AppEvent<T>, handler: (payload: T) => void): void;

on<T>(event: AppEvent<T>, callback: (payload?: T) => void) {
    this.events.on(event, callback);
  }

off<T>(event: AppEvent<T>, callback?: (payload?: T) => void) {
    this.events.off(event, callback);
  }

publishAppEvent<T>(event: AppEvent<T>, payload?: T) {
    this.$scope.$root.appEvent(event, payload);
  }

/** @ngInject */
  constructor(
    $scope: any,
    utilSrv: UtilSrv,
    $rootScope: GrafanaRootScope,
    contextSrv: ContextSrv,
    bridgeSrv: BridgeSrv,
    timeSrv: TimeSrv,
    linkSrv: LinkSrv,
    datasourceSrv: DatasourceSrv,
    keybindingSrv: KeybindingSrv,
    dashboardSrv: DashboardSrv,
    angularLoader: AngularLoader
  ) {
    // make angular loader service available to react components
    setAngularLoader(angularLoader);
    setBackendSrv(backendSrv);
    setDataSourceSrv(datasourceSrv);
    setTimeSrv(timeSrv);
    setLinkSrv(linkSrv);
    setKeybindingSrv(keybindingSrv);
    setDashboardSrv(dashboardSrv);

    const store = configureStore();
    setLocationSrv({
      update: (opt: LocationUpdate) => {
        store.dispatch(updateLocation(opt));
      },
    });

    $scope.init = () => {
      $scope.contextSrv = contextSrv;
      $scope.appSubUrl = config.appSubUrl;
      $scope._ = _;

      profiler.init(config, $rootScope);
      utilSrv.init();
      bridgeSrv.init();
    };

    $rootScope.colors = colors;

    $rootScope.onAppEvent = function<T>(
      event: AppEvent<T> | string,
      callback: (event: IAngularEvent, ...args: any[]) => void,
      localScope?: any
    ) {
      let unbind;
      if (typeof event === 'string') {
        unbind = $rootScope.$on(event, callback);
      } else {
        unbind = $rootScope.$on(event.name, callback);
      }

      let callerScope = this;
      if (callerScope.$id === 1 && !localScope) {
        console.log('warning rootScope onAppEvent called without localscope');
      }
      if (localScope) {
        callerScope = localScope;
      }
      callerScope.$on('$destroy', unbind);
    };

    $rootScope.appEvent = <T>(event: AppEvent<T> | string, payload?: T | any) => {
      if (typeof event === 'string') {
        $rootScope.$emit(event, payload);
        appEvents.emit(event, payload);
      } else {
        $rootScope.$emit(event.name, payload);
        appEvents.emit(event, payload);
      }
    };

    $scope.init();
  }