nuxeo-development-framework 3.1.6 → 3.1.8

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

@@ -1,423 +0,0 @@
-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() 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() 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 = [];
-        }
-      });
-    });
-  }
-
-  updateStats() {
-    this.createChart();
-  }
-
-  async ngOnInit() {
-    setTimeout(() => {
-      this.createChart();
-      this.creatChart.next();
-    });
-  }
-  ngOnChanges(changes: SimpleChanges) {
-    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();
-      });
-    }
-  }
-  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 {
-      return this.callApi
-        .query(
-          {
-            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
-            ),
-          },
-          {
-            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
-  ) {
-    const getOutgoing$ = this.callApi
-      .query(
-        {
-          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
-          ),
-        },
-        {
-          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,
-          };
-        })
-      );
-    const getIncoming$ = this.callApi
-      .query(
-        {
-          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
-          ),
-        },
-        {
-          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,
-          };
-        })
-      );
-      const getInternal$ = this.callApi
-      .query(
-        {
-          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
-          ),
-        },
-        {
-          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,
-      };
-    }
-    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

@@ -1,22 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-.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

@@ -1,25 +0,0 @@
-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();
-  });
-});

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

@@ -1,178 +0,0 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { Chart } from 'chart.js';
-/**
- * A UI doughnut chart component
- *
- * ![Screenshot-1](../screenshots/singleChart.png)
- * @title
- * doughnut chart
- *
- * @example
- * <cts-dynamic-single-chart
- *   [totalItems]="totalItems"
- *   [label]="label"
- *   [count]="count"
- *   [colorCode]="arrayOfColors"
- * ></cts-dynamic-single-chart>
- */
-@Component({
-  selector: 'cts-dynamic-single-chart',
-  templateUrl: './dynamic-single-chart.component.html',
-  styleUrls: ['./dynamic-single-chart.component.scss'],
-})
-export class DynamicSingleChartComponent implements OnInit {
-  /** Total Items */
-  @Input()
-  totalItems;
-  /** Chart count */
-  @Input()
-  count;
-  /** Chart label */
-  @Input()
-  label: string;
-  /** array of color codes for chart */
-  @Input()
-  colorCode = [];
-  @ViewChild('myChart') chart: ElementRef;
-
-  constructor() { }
-
-  ngOnInit(): void { }
-  
-  ngAfterViewInit(): void {
-    setTimeout(() => {
-
-      const ctx = this.chart.nativeElement.getContext('2d');
-      let myChart = new Chart(ctx, {
-        type: 'doughnut',
-        data: {
-          datasets: [
-            {
-              label: '# of Votes',
-              data: [this.count, this.totalItems],
-              backgroundColor: this.colorCode,
-            },
-          ],
-        },
-        plugins: [
-          {
-            beforeDraw: function (chart) {
-              if (chart.config.options.elements.center) {
-                // Get ctx from string
-                var ctx = chart.chart.ctx;
-
-                // Get options from the center object in options
-                var centerConfig = chart.config.options.elements.center;
-                var fontStyle = centerConfig.fontStyle || 'Arial';
-                var txt = centerConfig.text;
-                var color = centerConfig.color || '#000';
-                var maxFontSize = centerConfig.maxFontSize || 75;
-                var sidePadding = centerConfig.sidePadding || 20;
-                var sidePaddingCalculated =
-                  (sidePadding / 100) * (chart.innerRadius * 2);
-                // Start with a base font of 30px
-                ctx.font = '30px ' + fontStyle;
-
-                // Get the width of the string and also the width of the element minus 10 to give it 5px side padding
-                var stringWidth = ctx.measureText(txt).width;
-                var elementWidth = chart.innerRadius * 2 - sidePaddingCalculated;
-
-                // Find out how much the font can grow in width.
-                var widthRatio = elementWidth / stringWidth;
-                var newFontSize = Math.floor(30 * widthRatio);
-                var elementHeight = chart.innerRadius * 2;
-
-                // Pick a new font size so it will not be larger than the height of label.
-                var fontSizeToUse = Math.min(
-                  newFontSize,
-                  elementHeight,
-                  maxFontSize
-                );
-                var minFontSize = centerConfig.minFontSize;
-                var lineHeight = centerConfig.lineHeight || 25;
-                var wrapText = false;
-
-                if (minFontSize === undefined) {
-                  minFontSize = 20;
-                }
-
-                if (minFontSize && fontSizeToUse < minFontSize) {
-                  fontSizeToUse = minFontSize;
-                  wrapText = true;
-                }
-
-                // Set font settings to draw it correctly.
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'middle';
-                var centerX =
-                  (chart.chartArea.left + chart.chartArea.right) / 1.97;
-                var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
-                ctx.font = '14' + 'px ' + fontStyle;
-                ctx.fillStyle = color;
-
-                if (!wrapText) {
-                  ctx.fillText(txt, centerX, centerY);
-                  return;
-                }
-
-                var words = txt.split(' ');
-                var line = '';
-                var lines = [];
-
-                // Break words up into multiple lines if necessary
-                for (var n = 0; n < words.length; n++) {
-                  var testLine = line + words[n] + ' ';
-                  var metrics = ctx.measureText(testLine);
-                  var testWidth = metrics.width;
-                  if (testWidth > elementWidth && n > 0) {
-                    lines.push(line);
-                    line = words[n] + ' ';
-                  } else {
-                    line = testLine;
-                  }
-                }
-
-                // Move the center up depending on line height and number of lines
-                centerY -= (lines.length / 2) * lineHeight;
-
-                for (var n = 0; n < lines.length; n++) {
-                  ctx.fillText(lines[n], centerX, centerY);
-                  centerY += lineHeight;
-                }
-                //Draw text in center
-                ctx.fillText(line, centerX, centerY);
-              }
-            },
-          },
-        ],
-        options: {
-          responsive: true,
-          outlabels: {
-            display: false,
-          },
-          plugins: {
-            outlabels: {
-              display: false,
-            },
-            labels: false
-          },
-          tooltips: { enabled: false },
-          elements: {
-            center: {
-              text: `${
-                this.count >= 1000
-                  ? parseFloat((this.count / 1000).toFixed(2)) + 'K'
-                  : this.count
-              }`,
-              color: '#596973', // Default is #000000
-              fontStyle: 'Arial', // Default is Arial
-              sidePadding: 20, // Default is 20 (as a percentage)
-              minFontSize: 20, // Default is 20 (in px), set to false and text will not wrap.
-              lineHeight: 25, // Default is 25 (in px), used for when text wraps
-            },
-          },
-        },
-      });
-    }, 200);
-  }
-}