nuxeo-development-framework 3.1.1 → 3.1.2

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

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

@@ -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();
+  });
+});

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

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