nuxeo-development-framework 3.7.8 → 3.7.9-dms-mep

package/src/lib/components/dynamic-chart/dynamic-chart/dynamic-chart.component.ts

@@ -0,0 +1,509 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
+import { Chart } from "chart.js";
+import { Observable, Subject, Subscription, forkJoin } from "rxjs";
+import { map, takeUntil, debounceTime } from "rxjs/operators";
+import { CallApiService } from "../../../Core/services/callApi/call-api.service";
+import { ChartDataService } from "../services/chart-data.service";
+import * as _ from 'lodash';
+import { Router } from '@angular/router';
+import 'chartjs-plugin-piechart-outlabels';
+import 'chartjs-plugin-labels';
+/** @ignore */
+@Component({
+  selector: "cts-dynamic-chart",
+  templateUrl: "./dynamic-chart.component.html",
+  styleUrls: ["./dynamic-chart.component.scss"],
+})
+export class DynamicChartComponent implements OnInit, OnChanges, OnDestroy {
+  @ViewChild('revenueLineChart', { static: false }) chart: ElementRef;
+  @Input()
+  prefix = 'STATS.'; // for translation
+  @Input()
+  chartType; // functions exist inside ChartDataService
+  @Input() randomColors: boolean = false;
+  private chartObj;
+  private onDestroy$ = new Subject<boolean>();
+  creatChart = new Subject<any>();
+  @Input() pageProvider; // define api to get the data from
+  @Input() headers = {}; // headers in constants
+  @Input() observable; // observable in case of call api is called from outside the component
+  @Input() aggregations;
+  @Input() quickFilters;
+  @Input() systemCurrentLifeCycleState;
+  @Input() range = '["from_now-7d_to_now"]';
+  @Input() label;
+  @Input()
+  selectedRange = "week"; // range to be filterd on
+  @Input() tenantId; // will be sent only in case of multi tenant
+  @Input() colors: any = {
+    inProgress: '#3c3cf0',
+    registered: '#5a1496',
+    draft: '#596973',
+    archived: '#fbb62c',
+    closed: '#00dca5',
+    assigned: '#fd6670',
+    undefined: '#f7f8f9',
+    other: '#f17205',
+  };
+  data: any = [];
+  isFetching: boolean = false;
+  charts: [];
+  @Input()
+  randomColor: boolean = false;
+  @Input()
+  fetchedKey;
+  @Input()
+  pageProviderTwo;
+  @Input()
+  quickFilterTwo;
+  @Input()
+  quickFilterThree;
+  @Input()
+  combinedData = false;
+  @Input()
+  statusOne;
+  @Input()
+  statusTwo;
+  @Input()
+  statusThree;
+  @Input()
+  min;
+  @Input()
+  max;
+  @Input()
+  width;
+  @Input()
+  height;
+  @Input()
+  card = false;
+  @Input()
+  cardTitle = '';
+  @Input()
+  inputChartData;
+
+  @Input() isInternalActive = false; // used to control on showing results of internal coresp results in charts
+  myDataSubscription: Subscription;
+  constructor(
+    public translate: TranslateService,
+    public changeDetector: ChangeDetectorRef,
+    private callApi: CallApiService, private router: Router,
+    public chartData: ChartDataService
+  ) {
+    Chart.defaults.global.defaultFontFamily = "FS Albert Arabic Web";
+    Chart.defaults.global.defaultFontSize = 13;
+    this.translate.onLangChange
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((data) => {
+        this.creatChart.next();
+      });
+  }
+  createChart() {
+    this.creatChart.pipe(debounceTime(500)).subscribe((res) => {
+      this.getData().subscribe((data) => {
+        this.data = data;
+        this.changeDetector.detectChanges();
+        let randomColors = {};
+        if (this.randomColors) {
+          data.data.forEach((item) => {
+            randomColors[item.label] = this.stringToHslColor(
+              `${item.label}`,
+              40,
+              70
+            );
+          });
+        }
+        this.colors = this.randomColors ? randomColors : this.colors;
+        const { options, chartData } = this.chartData[this.chartType]({
+          data: data,
+          colors: this.colors,
+          prefix: this.prefix,
+        });
+        if (data.data?.length || data.length) {
+          if (!this.chartObj) {
+            const ctx = this.chart.nativeElement.getContext('2d');
+            this.chartObj = new Chart(ctx, options);
+          } else {
+            this.chartObj.chart.data = chartData;
+            this.chartObj.update();
+          }
+        } else {
+          // const ctx = this.chart.nativeElement.getContext('2d');
+          // let noOptions = {
+          //   type: options.type,
+          //   data: {
+          //     datasets: [],
+          //   },
+          //   options: {},
+          // };
+          // this.chartObj = new Chart(ctx, noOptions);
+          // this.chartObj.chart.data = [];
+        }
+      });
+    });
+  }
+  createChartWithoutPP() {
+    this.isFetching = true;
+    this.creatChart.pipe(debounceTime(300)).subscribe((res) => {
+        this.data = this.inputChartData;
+        this.changeDetector.detectChanges();
+        let randomColors = {};
+        if (this.randomColors) {
+          this.data.data.forEach((item) => {
+            randomColors[item.label] = this.stringToHslColor(
+              `${item.label}`,
+              40,
+              70
+            );
+          });
+        }
+        this.colors = this.randomColors ? randomColors : this.colors;
+        const { options, chartData } = this.chartData[this.chartType]({
+          data: this.data,
+          colors: this.colors,
+          prefix: this.prefix,
+        });
+        if (this.data.data?.length || this.data.length) {
+          if (!this.chartObj) {
+            const ctx = this.chart.nativeElement.getContext('2d');
+            this.chartObj = new Chart(ctx, options);
+            this.isFetching = false;
+          } else {
+            this.chartObj.chart.data = chartData;
+            this.chartObj.update();
+            this.isFetching = false;
+
+          }
+        } else {
+          this.isFetching = false;
+          // const ctx = this.chart.nativeElement.getContext('2d');
+          // let noOptions = {
+          //   type: options.type,
+          //   data: {
+          //     datasets: [],
+          //   },
+          //   options: {},
+          // };
+          // this.chartObj = new Chart(ctx, noOptions);
+          // this.chartObj.chart.data = [];
+        }
+    });
+  }
+
+  updateStats() {
+    if(this.inputChartData){
+    this.createChartWithoutPP();
+    }else{
+    this.createChart();
+
+    }
+  }
+
+  async ngOnInit() {
+    setTimeout(() => {
+      if(this.inputChartData){
+        this.createChartWithoutPP();
+        this.creatChart.next();
+      }else{
+      this.createChart();
+      this.creatChart.next();
+      }
+    });
+  }
+  ngOnChanges(changes: SimpleChanges) {
+    this.isFetching = true;
+    const minChanged = changes.min && !changes.min?.firstChange;
+    const maxChanged = changes.max && !changes.max?.firstChange;
+    const rangeChanged = changes.range && !changes.range?.firstChange;
+    if (minChanged || maxChanged || rangeChanged) {
+      setTimeout(() => {
+        this.creatChart.next();
+        this.isFetching = false;
+      });
+    }
+  }
+  ngOnDestroy() {
+    this.myDataSubscription ? this.myDataSubscription.unsubscribe() : '';
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+    this.creatChart.unsubscribe();
+  }
+  getData(): Observable<any> {
+    this.isFetching = true;
+    if (this.combinedData) {
+      return this.getCombinedData(
+        this.pageProvider,
+        this.quickFilters,
+        this.range,
+        this.pageProviderTwo,
+        this.quickFilterTwo,
+        this.quickFilterThree,
+        this.statusOne,
+        this.statusTwo,
+        this.statusThree
+      );
+    } else {
+      let params = {
+        pageProvider: this.pageProvider,
+        currentPageIndex: 0,
+        offset: 0,
+        pageSize: 1,
+        dublincore_created_agg: this.range,
+        quickFilters: this.quickFilters,
+        dublincore_created_min: this.min,
+        dublincore_created_max: this.max,
+        system_currentLifeCycleState_3: JSON.stringify(
+          this.systemCurrentLifeCycleState
+        ),
+      }
+      // if there tenant id sent from outside then add it to the params
+      if (this.tenantId) {
+        params['queryParams'] = `${this.tenantId}`
+      }
+      return this.callApi
+        .query(
+          params,
+          {
+            headers: this.headers,
+          }
+        )
+        .pipe(
+          map((data) => {
+            const items = data.aggregations[this.aggregations].buckets
+              ? data.aggregations[this.aggregations].buckets.map((item) => ({
+                label: this.fetchedKey
+                  ? _.get(item, this.fetchedKey)
+                  : item.key,
+                count: item.docCount,
+              }))
+              : [];
+            this.isFetching = false;
+            return {
+              data: items,
+              totalItems: data.totalSize,
+            };
+          })
+        );
+    }
+  }
+
+  getCombinedData(
+    pageProviderOne,
+    quickFilterOne,
+    selectedRange,
+    pageProviderTwo,
+    quickFilterTwo,
+    quickFilterThree,
+    statusOne,
+    statusTwo,
+    statusThree
+  ) {
+    let outgoingParams = {
+      pageProvider: pageProviderOne,
+      currentPageIndex: 0,
+      offset: 0,
+      pageSize: 1,
+      dublincore_created_agg: selectedRange,
+      quickFilters: quickFilterOne,
+      dublincore_created_min: this.min,
+      dublincore_created_max: this.max,
+      system_currentLifeCycleState_3: JSON.stringify(
+        this.systemCurrentLifeCycleState
+      ),
+    }
+    // if there tenant id sent from outside then add it to the params
+    if (this.tenantId) {
+      outgoingParams['queryParams'] = `${this.tenantId}`
+    }
+    const getOutgoing$ = this.callApi
+      .query(
+        outgoingParams,
+        {
+          headers: this.headers,
+        }
+      )
+      .pipe(
+        map((data) => {
+          const items = data.aggregations[this.aggregations].buckets
+            ? data.aggregations[this.aggregations].buckets.map((item) => ({
+              label: this.fetchedKey
+                ? _.get(item, this.fetchedKey)
+                : item.key,
+              count: item.docCount,
+              id: item.key,
+              status: statusOne,
+              totalItems: data.totalSize,
+            }))
+            : [];
+          return {
+            data: items,
+            totalItems: data.totalSize,
+          };
+        })
+      );
+    let incomingParams = {
+      pageProvider: pageProviderTwo,
+      currentPageIndex: 0,
+      offset: 0,
+      pageSize: 1,
+      dublincore_created_agg: selectedRange,
+      quickFilters: quickFilterTwo,
+      dublincore_created_min: this.min,
+      dublincore_created_max: this.max,
+      system_currentLifeCycleState_3: JSON.stringify(
+        this.systemCurrentLifeCycleState
+      ),
+    }
+    // if there tenant id sent from outside then add it to the params
+    if (this.tenantId) {
+      incomingParams['queryParams'] = `${this.tenantId}`
+    }
+    const getIncoming$ = this.callApi
+      .query(
+        incomingParams,
+        {
+          headers: this.headers,
+        }
+      )
+      .pipe(
+        map((data) => {
+          const items = data.aggregations[this.aggregations].buckets
+            ? data.aggregations[this.aggregations].buckets.map((item) => ({
+              label: this.fetchedKey
+                ? _.get(item, this.fetchedKey)
+                : item.key,
+              count: item.docCount,
+              id: item.key,
+              status: statusTwo,
+              totalItems: data.totalSize,
+            }))
+            : [];
+          return {
+            data: items,
+            totalItems: data.totalSize,
+          };
+        })
+      );
+    let internalParams = {
+      pageProvider: pageProviderTwo,
+      currentPageIndex: 0,
+      offset: 0,
+      pageSize: 1,
+      dublincore_created_agg: selectedRange,
+      quickFilters: quickFilterThree,
+      dublincore_created_min: this.min,
+      dublincore_created_max: this.max,
+      system_currentLifeCycleState_3: JSON.stringify(
+        this.systemCurrentLifeCycleState
+      ),
+    }
+    // if there tenant id sent from outside then add it to the params
+    if (this.tenantId) {
+      internalParams['queryParams'] = `${this.tenantId}`
+    }
+    const getInternal$ = this.callApi
+      .query(
+        internalParams,
+        {
+          headers: this.headers,
+        }
+      )
+      .pipe(
+        map((data) => {
+          const items = data.aggregations[this.aggregations].buckets
+            ? data.aggregations[this.aggregations].buckets.map((item) => ({
+              label: this.fetchedKey
+                ? _.get(item, this.fetchedKey)
+                : item.key,
+              count: item.docCount,
+              id: item.key,
+              status: statusThree,
+              totalItems: data.totalSize,
+            }))
+            : [];
+          return {
+            data: items,
+            totalItems: data.totalSize,
+          };
+        })
+      );
+    if (this.isInternalActive) {
+      return forkJoin([getOutgoing$, getIncoming$, getInternal$]).pipe(
+        map((data) => {
+          let combinedData = [...data[0].data, ...data[1].data, ...data[2].data];
+          this.isFetching = false;
+          return combinedData;
+        })
+      );
+    } else {
+      return forkJoin([getOutgoing$, getIncoming$]).pipe(
+        map((data) => {
+          let combinedData = [...data[0].data, ...data[1].data];
+          this.isFetching = false;
+          return combinedData;
+        })
+      );
+    }
+  }
+
+  previewCorrespondences() {
+    console.log("params", this.systemCurrentLifeCycleState)
+    let queryParams;
+    if (this.combinedData) {
+      queryParams = {
+        combinedData: this.combinedData,
+        pageProvider: this.pageProvider,
+        headers: JSON.stringify(this.headers),
+        range: this.range,
+        aggregations: this.aggregations,
+        quickFilterOne: this.quickFilters,
+        quickFilterTwo: this.quickFilterTwo,
+        quickFilterThree: this.quickFilterThree,
+        systemCurrentLifeCycleState: this.systemCurrentLifeCycleState,
+        statusOne: this.statusOne,
+        statusTwo: this.statusTwo,
+        statusThree: this.statusThree,
+        min: this.min,
+        max: this.max,
+      };
+    } else {
+      queryParams = {
+        combinedData: this.combinedData,
+        pageProvider: this.pageProvider,
+        quickFilterOne: this.quickFilters,
+        headers: JSON.stringify(this.headers),
+        range: this.range,
+        aggregations: this.aggregations,
+        systemCurrentLifeCycleState: this.systemCurrentLifeCycleState,
+        min: this.min,
+        max: this.max,
+      };
+    }
+    // if there tenant id sent from outside then add it to the params
+    if (this.tenantId) {
+      queryParams['queryParams'] = `${this.tenantId}`
+    }
+    this.router.navigate(['report', 'chart-details'], {
+      queryParams: queryParams,
+    });
+  }
+
+  stringToHslColor(str, s, l) {
+    var hash = 0;
+    for (var i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    var h = hash % 360;
+    return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
+  }
+}

package/src/lib/components/dynamic-chart/dynamic-chart.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicChartComponent } from './dynamic-chart/dynamic-chart.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { DynamicSingleChartComponent } from './dynamic-single-chart/dynamic-single-chart.component';
+import { LibrarySharedModule } from '../../shared/libraryShared.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+/**
+ * @title
+ * Chart Module
+ */
+@NgModule({
+  declarations: [
+    DynamicChartComponent, 
+    DynamicSingleChartComponent 
+  ],
+  imports: [CommonModule, TranslateModule , LibrarySharedModule , MatTooltipModule],
+  exports: [
+    DynamicChartComponent,
+    DynamicSingleChartComponent],
+})
+export class DynamicChartModule {}

package/src/lib/components/dynamic-chart/dynamic-single-chart/dynamic-single-chart.component.html

@@ -0,0 +1,4 @@
+<div class="chart">
+  <canvas width="70" height="70" #myChart></canvas>
+  <label class="chart-lable">{{ "STATS." + label | translate }}</label>
+</div>

package/src/lib/components/dynamic-chart/dynamic-single-chart/dynamic-single-chart.component.scss

@@ -0,0 +1,14 @@
+.chart {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  .chart-lable {
+    color: #596973;
+    font-size: 12px;
+    margin-top: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/src/lib/components/dynamic-chart/dynamic-single-chart/dynamic-single-chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicSingleChartComponent } from './dynamic-single-chart.component';
+
+describe('DynamicSingleChartComponent', () => {
+  let component: DynamicSingleChartComponent;
+  let fixture: ComponentFixture<DynamicSingleChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DynamicSingleChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicSingleChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});