nuxeo-development-framework 4.1.4 → 4.1.6

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

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

@@ -0,0 +1,108 @@
+<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 === 'number'">
+          <div class="label-style">
+            {{ field.label | translate }}
+            <span class="text-red-500" *ngIf="field.required">*</span>
+          </div>
+          <input
+            min="1"
+            type="number"
+            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
+                : {}
+            "
+            [params]="field.params || {}"
+            [getByDirectorySuggestion]="field.getByDirectorySuggestion"
+          >
+          </app-translated-vocabulary-select>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</div>