nuxeo-development-framework 3.1.6 → 3.1.8

package/src/lib/components/dynamic-chart/services/chart-data.service.ts

@@ -1,613 +0,0 @@
-import { EventEmitter, Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { TranslationService } from '../../../Core/services/translation/translation.service';
-import moment from 'moment-es6';
-import * as _ from 'lodash';
-
-interface ChartData {
-  chartData: {};
-  options: {};
-}
-@Injectable({
-  providedIn: 'root',
-})
-export class ChartDataService {
-  refreshData = new EventEmitter();
-  private prefix = 'STATS.';
-  private isArabic: boolean;
-  private size: number = 8;
-  
-  private totalNumber = [
-    {
-      beforeDraw: (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) / 2;
-          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);
-        }
-      },
-    },
-  ];
-  constructor(
-    private translate: TranslateService,
-    private translation: TranslationService
-  ) {
-    this.translation.isArabic.subscribe((arabic) => {
-      arabic ? (this.isArabic = arabic) : (this.isArabic = arabic);
-    });
-  }
-  /**
-   *
-   * @param data data fetched from back-end
-   * @param totalItems totalItems from the backedn
-   * @param prefix for Translations
-   * @returns
-   */
-  multiSeriesPieChart(data): ChartData {
-    const provideColors = data.colors;
-    const prefix = data.prefix;
-    const totalItems = data.totalItems;
-    let dataArr = [];
-    let labels = [];
-    //for aggregations
-    let itemCount: number = 0;
-    let otherItemsCount: number;
-
-    dataArr = data.data.slice(0, this.size).map((item, index) => {
-      const numbers = data.data.map((item1, index1) =>
-        index === index1 ? item.count : 0
-      );
-      const colors = data.data.slice(0, this.size).map((item1, index1) => {
-        return provideColors[item1.label];
-      });
-      numbers.push(data.totalItems - item.count);
-
-      colors.push('#f7f8f9');
-      return {
-        data: numbers,
-        totalItems: data.totalItems,
-        backgroundColor: colors,
-      };
-    });
-    labels = data.data
-      .slice(0, this.size)
-      .map(
-        (item) =>
-        `${this.translate.instant(prefix + item.label)} (${item.count})`
-      );
-    const chartData = {
-      datasets: dataArr,
-      labels: labels,
-    };
-
-    const options = {
-      type: 'doughnut',
-      data: chartData,
-      plugins: this.totalNumber,
-      showCount: true,
-      countSize: '18px',
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        tooltips: { enabled: false },
-        cutoutPercentage: 30,
-        legend: {
-          labels: {
-            usePointStyle: true,
-            boxWidth: 8,
-          },
-          position: 'left',
-          rtl: this.isArabic ? true : false,
-        },
-        elements: {
-          center: {
-            text: `${
-              totalItems >= 1000
-                ? parseFloat((totalItems / 1000).toFixed(2)) + 'K'
-                : totalItems
-            }`,
-            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
-          },
-        },
-      },
-    };
-    return { options: options, chartData: chartData };
-  }
-
-  doughnutChart(data): ChartData {
-    const provideColors = data.colors;
-    const prefix = data.prefix;
-    const totalItems = data.data.totalItems;
-    let backgroundColor = [];
-    let dataArr = [];
-    let labels = [];
-    //for aggregations
-    let itemCount: number = 0;
-    let otherItemsCount: number;
-    data.data.data.slice(0, this.size).forEach((item, index) => {
-      backgroundColor.push(provideColors[item.label]);
-      dataArr.push(item.count);
-      itemCount = itemCount + item.count;
-    });
-    labels = data.data.data.slice(0, this.size).map((item, index) => {
-      return `${this.translate.instant(prefix + item.label)} (${item.count})`;
-    });
-    //aggregate other data
-    otherItemsCount = totalItems - itemCount;
-    if (otherItemsCount > 0) {
-      backgroundColor.push(provideColors['other']);
-      dataArr.push(otherItemsCount);
-      labels.push(
-        `${this.translate.instant(prefix + 'other')} (${otherItemsCount})`
-      );
-    }
-    const chartData = {
-      datasets: [
-        {
-          backgroundColor: backgroundColor,
-          data: dataArr,
-        },
-      ],
-      labels: labels,
-    };
-
-    const options = {
-      type: 'doughnut',
-      data: chartData,
-      showCount: true,
-      countSize: '18px',
-      plugins: this.totalNumber,
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        tooltips: { enabled: true },
-        cutoutPercentage: 30,
-        legend: {
-          labels: {
-            usePointStyle: true,
-            boxWidth: 8,
-          },
-          display: true,
-          position: this.isArabic ? 'right' : 'left',
-          rtl: this.isArabic ? true : false,
-        },
-        elements: {
-          center: {
-            text: `${
-              totalItems >= 1000
-                ? parseFloat((totalItems / 1000).toFixed(2)) + 'K'
-                : totalItems
-            }`,
-            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
-          },
-        },
-      },
-    };
-    return { options: options, chartData: chartData };
-  }
-
-  lineChart(data): ChartData {
-    data = this.groupObjectBykeyLine(data.data);
-    console.log('chart data', data);
-    this.isArabic ? moment.locale('ar-sa') : moment.locale('en-us');
-    const chartData = data;
-    const options = {
-      type: 'line',
-      data: chartData,
-      options: {
-        maintainAspectRatio: false,
-        scales: {
-          xAxes: [
-            {
-              ticks: {
-                autoSkip: true,
-                maxTicksLimit: 12,
-                source: 'labels',
-              },
-              type: 'time',
-              time: {
-                unit: 'week',
-                displayFormats: {
-                  week: 'DD-MM-yyyy',
-                },
-              },
-            },
-          ],
-          yAxes: [
-            {
-              ticks: {
-                min: 0,
-                precision: 0,
-              },
-            },
-          ],
-        },
-        title: {
-          display: true,
-          text: '',
-        },
-        legend: {
-          labels: {
-            // usePointStyle: true,
-            boxWidth: 12,
-          },
-          // position: 'bottom',
-          rtl: this.isArabic ? true : false,
-        },
-      },
-    };
-    return { options, chartData };
-  }
-
-  GroupedBarChart(data): ChartData {
-    data = this.groupObjectBykey(data.data);
-    this.isArabic ? moment.locale('ar-sa') : moment.locale('en-us');
-    const chartData = data;
-    const options = {
-      type: 'bar',
-      data: chartData,
-      options: {
-        plugins: {
-          outlabels: {
-            display: false,
-          },
-          labels: false,
-        },
-        barValueSpacing: 20,
-        scales: {
-          yAxes: [
-            {
-              ticks: {
-                min: 0,
-                precision: 0,
-              },
-            },
-          ],
-        },
-        legend: {
-          // position: 'bottom',
-          labels: {
-            boxWidth: 12,
-          },
-          rtl: this.isArabic ? true : false,
-        },
-      },
-    };
-    return { options, chartData };
-  }
-
-  BarChart(data): ChartData {
-    const provideColors = data.colors;
-    const prefix = data.prefix;
-    const totalItems = data.totalItems;
-    let backgroundColor = [];
-    let dataArr = [];
-    let labels = [];
-    data.data.data.forEach((item, index) => {
-      backgroundColor.push('#2e62df');
-      dataArr.push(item.count);
-    });
-    labels = data.data.data.map((item, index) => {
-      return `${item.label}`;
-    });
-    const chartData = {
-      datasets: [
-        {
-          backgroundColor: backgroundColor,
-          data: dataArr,
-          barPercentage: 0.4,
-          barThickness: 24,
-          maxBarThickness: 30,
-          minBarLength: 2,
-        },
-      ],
-      labels: labels,
-    };
-
-    const options = {
-      type: 'bar',
-      data: chartData,
-      options: {
-        plugins: {
-          outlabels: {
-            display: false,
-          },
-          labels: false,
-        },
-        barValueSpacing: 20,
-        scales: {
-          yAxes: [
-            {
-              ticks: {
-                min: 0,
-                precision: 0,
-              },
-            },
-          ],
-        },
-        legend: {
-          // position: 'bottom',
-          display: false,
-          // labels: {
-          //   boxWidth: 12,
-          // },
-          // rtl: this.isArabic ? true : false,
-        },
-      },
-    };
-    return { options: options, chartData: chartData };
-  }
-
-  outlabeledPieChart(data): ChartData {
-    const provideColors = data.colors;
-    const prefix = data.prefix;
-    const totalItems = data.totalItems;
-    let backgroundColor = [];
-    let dataArr = [];
-    let labels = [];
-    data.data.data.forEach((item, index) => {
-      backgroundColor.push(provideColors[item.label]);
-      dataArr.push(item.count);
-    });
-    labels = data.data.data.map((item, index) => {
-      return `${item.label}`;
-    });
-    const chartData = {
-      datasets: [
-        {
-          backgroundColor: backgroundColor,
-          data: dataArr,
-        },
-      ],
-      labels: labels,
-    };
-
-    const options = {
-      type: 'outlabeledPie',
-      data: chartData,
-
-      options: {
-        layout: {
-          padding: {
-            top: 33,
-          },
-        },
-        zoomOutPercentage: 55,
-        plugins: {
-          legend: false,
-          outlabels: {
-            lineWidth: 0.8,
-            lineColor: '#b4bac6',
-            text: (context) => {
-              let index = context.dataIndex;
-              let label = context.labels[index];
-              let num = context.percent * 100;
-              let text = `${_.truncate(label, {
-                length: 24,
-              })} ${num.toFixed(0)}%`;
-
-              return text;
-            },
-            color: 'white',
-            stretch: 20,
-            font: {
-              resizable: true,
-              minSize: 12,
-              maxSize: 18,
-            },
-          },
-        },
-      },
-    };
-    return { options: options, chartData: chartData };
-  }
-
-  pieChart(data): ChartData {
-    const provideColors = data.colors;
-    const prefix = data.prefix;
-    const totalItems = data.totalItems;
-    let backgroundColor = [];
-    let dataArr = [];
-    let labels = [];
-    data.data.data.forEach((item, index) => {
-      backgroundColor.push(provideColors[item.label]);
-      dataArr.push(item.count);
-    });
-    labels = data.data.data.map((item, index) => {
-      return `${item.label}`;
-    });
-    const chartData = {
-      datasets: [
-        {
-          backgroundColor: backgroundColor,
-          data: dataArr,
-        },
-      ],
-      labels: labels,
-    };
-
-    const options = {
-      type: 'pie',
-      data: chartData,
-
-      options: {
-        title: {
-          display: true,
-          text: prefix.length > 0 ? `${this.translate.instant(prefix)}` : '',
-        },
-        zoomOutPercentage: 55,
-        legend: {
-          labels: {
-            usePointStyle: true,
-            boxWidth: 8,
-          },
-          // position: 'left',
-          rtl: this.isArabic ? true : false,
-        },
-        plugins: {
-          outlabels: {
-            display: false,
-          },
-        },
-      },
-    };
-    return { options: options, chartData: chartData };
-  }
-
-  private groupObjectBykey = (data) => {
-    let nameIndices = {};
-    let statusHash = {};
-    let chartData = { labels: [], datasets: [] };
-    data.forEach((item) => {
-      if (!(item.label in nameIndices)) {
-        nameIndices[item.label] = chartData.labels.push(item.label) - 1;
-        chartData.datasets.forEach((a) => {
-          a.data.push(0);
-        });
-      }
-      if (!statusHash[item.status]) {
-        statusHash[item.status] = {
-          label: `${this.translate.instant(item.status)} (${item.totalItems})`,
-          ...(item.status === 'Incoming' && {
-            backgroundColor: '#00dca5',
-          }),
-          ...(item.status === 'Outgoing' && {
-            backgroundColor: '#fbb62c',
-          }),
-          data: chartData.labels.map(() => {
-            return 0;
-          }),
-          barPercentage: 0.4,
-          barThickness: 24,
-          maxBarThickness: 30,
-          minBarLength: 2,
-        };
-        chartData.datasets.push(statusHash[item.status]);
-      }
-      statusHash[item.status].data[nameIndices[item.label]] = item.count;
-    });
-
-    return chartData;
-  };
-
-  private groupObjectBykeyLine = (data) => {
-    data.sort((left, right) => {
-      return moment.utc(left.id).diff(moment.utc(right.id));
-    });
-    let nameIndices = {};
-    let statusHash = {};
-    let chartData = { labels: [], datasets: [] };
-    data.forEach((item) => {
-      if (!(item.id in nameIndices)) {
-        nameIndices[item.id] = chartData.labels.push(item.id) - 1;
-        chartData.datasets.forEach((a) => {
-          a.data.push(0);
-        });
-      }
-      if (!statusHash[item.status]) {
-        statusHash[item.status] = {
-          label: `${this.translate.instant(item.status)} (${item.totalItems})`,
-          ...(item.status === 'Incoming' && {
-            borderColor: '#00dca5',
-          }),
-          ...(item.status === 'Outgoing' && {
-            borderColor: '#fbb62c',
-          }),
-          fill: false,
-          lineTension: 0,
-          data: chartData.labels.map(() => {
-            return 0;
-          }),
-        };
-        chartData.datasets.push(statusHash[item.status]);
-      }
-      statusHash[item.status].data[nameIndices[item.id]] = item.count;
-    });
-
-    return chartData;
-  };
-  
-}

package/src/lib/components/dynamic-fields-renderer/dynamic-fields-renderer/dynamic-fields-renderer.component.html

@@ -1,58 +0,0 @@
-<div [formGroup]="form" *ngIf="form">
-    <div class="renderer-container">
-        <div class="field-container" *ngFor="let field of fields">
-            <ng-container *permission="{name: field.permission, entity: field.formControlName}">
-                <div class="single-field mb-3" *ngIf="field.type === 'text'">
-                    <div class="label-style">
-                        {{ field.label | translate}}
-                        <span class="text-red-500" *ngIf="field.required">*</span>
-                    </div>
-                    <input class="field-style" [formControlName]="field.formControlName" 
-                        placeholder=" {{ field.placeholder | translate}}"/>
-                </div>
-            
-                <div class="single-field mb-3" *ngIf="field.type === 'date'">             
-                    <cts-dynamic-form-hijri-dateitem
-                    [formControlName]="field.formControlName"
-                    [label]="field.label"
-                  >
-                  </cts-dynamic-form-hijri-dateitem>
-                </div>
-            
-                <div class="single-field mb-3" *ngIf="field.type === 'dynamic-vocabulary'">
-                    <app-dynamic-form-vocabulary-item [label]="field.label" [bindLabel]="field.bindLabel"
-                    [bindValue]="field.bindValue" placeholder="{{ field.placeholder | translate }}" [multiple]="field.multiple"
-                    [searchable]="field.searchable" [closeOnSelect]="field.closeOnSelect" [disabled]="field.disabled" [hideSelectedItems]="field.hideSelectedItems"
-                    [vocabularyType]="field.vocabularyType" 
-                    [formControlName]="field.formControlName">
-                  </app-dynamic-form-vocabulary-item>
-                </div>
-            
-                <!-- <div class="single-field mb-3" *ngIf="field.type === 'department-selector'">
-                    <div class="label-style">
-                        {{ field.label | translate }}
-                        <span class="text-red-500" *ngIf="field.required">*</span>
-                    </div>
-                    <app-dynamic-form-department
-                    [formControlName]="field.formControlName"
-                    [placeholder]="field.placeholder"
-                    [pp_departmentNestedTree]="field.pp_departmentNestedTree"
-                    [pp_departmentTree]="field.pp_departmentTree"
-                    [customPrefix]="field.customPrefix"
-                    [customParentProperty]="field.customParentProperty"
-                    [useCustomAddEditAction]="field.useCustomAddEditAction"
-                  >
-                  </app-dynamic-form-department>
-                </div> -->
-        
-                <div class="single-field mb-3" *ngIf="field.type === 'translated-vocabulary'">
-                    <app-translated-vocabulary-select [label]="field.label" [arbBindLabel]="field.arbBindLabel" [engBindLabel]="field.engBindLabel"
-                    [bindValue]="field.bindValue" placeholder="{{ field.placeholder | translate }}" [multiple]="field.multiple"
-                    [searchable]="field.searchable" [closeOnSelect]="field.closeOnSelect" [hideSelectedItems]="field.hideSelectedItems" [formControlName]="field.formControlName"
-                    [vocbularyId]="field.vocbularyId" [useFilter]="field.useFilter" [filter]="field.filter === 'agencyName' ? agencyNameFilter : (field.filter === 'countryName' ? countryNameFilter : {})">
-                    </app-translated-vocabulary-select>
-                </div>
-            </ng-container>
-        </div>
-    </div>
-</div>

package/src/lib/components/dynamic-fields-renderer/dynamic-fields-renderer/dynamic-fields-renderer.component.spec.ts

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