Скрыть спиннер после загрузки одного графика на странице, когда у меня много графиков - PullRequest
Новая
       38

Скрыть спиннер после загрузки одного графика на странице, когда у меня много графиков

0 голосов
/ 06 февраля 2019

У меня есть одна страница с множеством диаграмм, картой и таблицей.В каждом графике есть загрузочный счетчик.Все счетчики останавливаются одновременно с загрузкой последнего графика.Мне нужно, чтобы счетчики останавливались индивидуально после загрузки каждого графика.

loader.component.html 

<div id="loader" [ngClass]="{'visible': loading }">
    <div id="inner-loader"></div>
</div>

loader.component.ts 

import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'page-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
  _loading: any;
  @Input() heightDocumentSelector: number;
  @Input()
  set loading(value) {
    if (value != undefined) {
      this._loading = value;
      this.changeLoader(value);
    }
  }
  get loading() { return this._loading;}
  constructor() { }

  ngOnInit() {

  }

  changeLoader(switcher): void {
    let loaderSelector = (document.querySelector('#loader') as HTMLElement);
    if (loaderSelector && this.heightDocumentSelector) {
      loaderSelector.style.height = "" + this.heightDocumentSelector + "px";
    }
  }
}

charts.component.html 

<div class="row">
  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 pr-1 pl-1 d-flex align-items-stretch hidePie">
    <page-loader [loading]="loading" [heightDocumentSelector]="heightDocumentSelector"></page-loader>
    <app-piechart-grouped-by-opened-email (isLoadedChange)="onIsLoadedChange()" (stageFilter)="filterByOpenedEmail($event)" class="card box-shadow-none" [pieChartData]="chartPieIsOpened"></app-piechart-grouped-by-opened-email>
  </div>
  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 pr-1 pl-1 d-flex align-items-stretch hidePie">
    <page-loader [loading]="loading" [heightDocumentSelector]="heightDocumentSelector"></page-loader>
    <app-piechart-grouped-by-device-type (isLoadedChange)="onIsLoadedChange()" (isFilterApply)="isFilterApply($event)" (stageFilter)='filterByDeviceType($event)' [pieChartData]='chartByDeviceType' class="card box-shadow-none"></app-piechart-grouped-by-device-type>
  </div>
  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 pr-1 pl-1 d-flex align-items-stretch hidePie" [ngClass]="{'visible': pieDiv }">
    <page-loader [loading]="loading" [heightDocumentSelector]="heightDocumentSelector"></page-loader>
    <app-piechart-grouped-by-device (isFilterApply)="isFilterApply($event)" (stageFilter)='filterByDevice($event)' [pieChartData]='chartByDevice' (isLoadedChange)=onIsLoadedChange($event) class="card box-shadow-none"></app-piechart-grouped-by-device>
  </div>
</div>
...