@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/dashboard/score/compare-groups.widget.ts

@@ -0,0 +1,212 @@
+import { Component, OnDestroy, ViewChild, ElementRef } from "@angular/core";
+import { Chart, AxisModel, CrosshairSettingsModel, TooltipSettingsModel, SeriesModel, LegendSeriesModel, RowModel, LineSeriesService, CrosshairService, ColumnSeriesService, MarginModel, ZoomSettingsModel, ITooltipRenderEventArgs, ChartAreaModel, ChartComponent, ISharedTooltipRenderEventArgs } from "@syncfusion/ej2-angular-charts";
+import { WidgetComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { TranslateService } from "../../core/translate.service";
+import { SessionService } from "../../core/session.service";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import dayjs from 'dayjs';
+import { WidgetRef } from "../widget-ref";
+import { FONT_FAMILY } from "../../core/colors";
+/** */
+@Component({
+  //templateUrl: './compare-groups.widget.html',
+  template: '',
+  providers: [LineSeriesService, CrosshairService, ColumnSeriesService],
+  host: {
+    '[id]': 'id',
+    dir: 'ltr'
+  }
+})
+@BizDoc({
+  selector: 'bizdoc-compare-groups'
+})
+export class CompareGroupsWidget implements WidgetComponent<Department[]>, OnDestroy {
+  static nextId = 0;
+  readonly id = `groups-compare-${CompareGroupsWidget.nextId++}`;
+  palettes = this._session.accentPalette;
+  @ViewChild(ChartComponent) chart: Chart;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material'
+  readonly enableRtl = this._session.inverse;
+  readonly rows: RowModel[] = [
+    {
+      height: '15%'
+    }, {
+      height: '85%'
+    }
+  ];
+  readonly axes: AxisModel[] = [{
+    name: 'primary',
+    labelStyle: { size: '0px' },
+    rowIndex: 1
+  }, {
+    name: 'volume',
+    rowIndex: 0,
+    majorGridLines: { width: 0 }, lineStyle: { width: 0 },
+    labelStyle: { size: '0px' },
+    majorTickLines: { width: 0 }
+  }];
+  readonly chartArea: ChartAreaModel = {
+    border: {
+      width: 0
+    }
+  };
+  readonly zoomSettings: ZoomSettingsModel = {
+    mode: 'X',
+    enableMouseWheelZooming: true,
+    enablePinchZooming: true,
+    toolbarItems: [],
+    enableSelectionZooming: false,
+    enableScrollbar: true
+  };
+  readonly primaryXAxis: AxisModel = {
+    valueType: 'DateTime',
+    labelFormat: 'MMM dd',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    labelIntersectAction: 'Hide',
+    majorGridLines: { width: 0 }
+  };
+  readonly crosshair: CrosshairSettingsModel = {
+    enable: true,
+    lineType: 'Vertical'
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true, shared: true, textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+  };
+  readonly legend: LegendSeriesModel = {
+    visible: true,
+    isInversed: this._session.inverse,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+  };
+  readonly primaryYAxis: AxisModel = {
+    skeleton: 'duration',
+    labelStyle: {
+      size: '0px'
+    },
+    title: this._translate.get('Duration'),
+    lineStyle: { width: 0 },
+    minorTickLines: { width: 0 }
+  };
+  readonly margin: MarginModel = {
+    bottom: 0
+  };
+  series: SeriesModel[];
+  height: string;
+  private readonly _destroy = new Subject<void>();
+  data: Department[];
+  constructor(private _translate: TranslateService,
+    widgetRef: WidgetRef,
+    private _elementRef: ElementRef,
+    private _session: SessionService) {
+    _session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      this.theme = t.dark ? 'MaterialDark' : 'Material';
+      this.palettes = _session.accentPalette;
+      this._draw();
+    });
+    widgetRef.resize.subscribe(d => {
+      this.height = `${d.height}px`;
+      if (this.chart) this.chart.height = this.height;
+    });
+  }
+  onBind(data: Department[]) {
+    this._prepare(data);
+    this.data = data;
+    this._draw();
+  }
+  private _draw() {
+    this.chart && this.chart.destroy();
+    this.chart = new Chart({
+      axes: this.axes,
+      series: this.series,
+      height: this.height,
+      rows: this.rows,
+      legendSettings: this.legend,
+      crosshair: this.crosshair,
+      tooltip: this.tooltip,
+      background: 'transparent',
+      chartArea: this.chartArea,
+      primaryXAxis: this.primaryXAxis,
+      primaryYAxis: this.primaryYAxis,
+      theme: this.theme,
+      margin: this.margin,
+      useGroupingSeparator: true,
+      palettes: this.palettes,
+      zoomSettings: this.zoomSettings,
+      sharedTooltipRender: this.sharedTooltipRender.bind(this),
+    }, this._elementRef.nativeElement);
+
+  }
+  sharedTooltipRender(evt: ISharedTooltipRenderEventArgs) {
+    evt.data.forEach((d, i) => {
+      if (evt.series[d.seriesIndex].yName !== 'count')
+        evt.text[i] = `${d.seriesName} : <b>${dayjs.duration(d.pointY as any, 's').humanize()}</b>`;
+    });
+  }
+  private _prepare(data: Department[]) {
+    const indicatorData: Volume[] = [], series = data.map(s => {
+      s.points.forEach(p => {
+        const date = p.date = new Date(p.date),
+          indicator = indicatorData.find(i => i.date.valueOf() === date.valueOf());
+        if (indicator)
+          indicator.count += p.count;
+        else
+          indicatorData.push({ count: p.count, date });
+      });
+      const serie: SeriesModel = {
+        type: 'Line',
+        xName: 'date',
+        yName: 'duration',
+        yAxisName: 'primary',
+        name: s.title,
+        dataSource: s.points,
+        marker: {
+          width: 6,
+          height: 6,
+          visible: false
+        }
+      };
+      return serie;
+    });
+    series.push({
+      type: 'Column',
+      xName: 'date',
+      yName: 'count',
+      name: this._translate.get('Volume'),
+      dataSource: indicatorData,
+      yAxisName: 'volume',
+      marker: {
+        width: 0,
+        height: 0,
+        visible: false
+      }
+    });
+    this.series = series;
+  }
+
+  ngOnDestroy(): void {
+    this.chart && this.chart.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+interface Department {
+  points: Point[];
+  title: string;
+}
+interface Point {
+  date: Date;
+  duration: number;
+  count: number;
+}
+interface Volume {
+  date: Date;
+  count: number;
+}

package/src/lib/dashboard/score/peers-performance.widget.html

@@ -0,0 +1,23 @@
+<!--<ejs-circulargauge [tooltip]='tooltip'
+                   style="display: block"
+                   [id]='id'
+                   dir='ltr'
+                   (tooltipRender)='tooltipRender($event)'
+                   [margin]='margin'
+                   centerY='50%'
+                   width='100%'
+                   description=''
+                   [height]='height'
+                   centerX='50%'
+                   [width]='width'
+                   [enableRtl]=false
+                   [legendSettings]=legendSettings
+                   background='transparent'
+                   [theme]='theme'>
+  <e-axes>
+    <e-axis radius='90%' [maximum]='max' startAngle=200 endAngle=160 [majorTicks]='majorTicks' [direction]='direction'
+            [labelStyle]='labelStyle' [lineStyle]='lineStyle' [minorTicks]='minorTicks' [annotations]='annotations'
+            [ranges]='ranges' [pointers]='pointers'>
+    </e-axis>
+  </e-axes>
+</ejs-circulargauge>-->

package/src/lib/dashboard/score/peers-performance.widget.ts

@@ -0,0 +1,254 @@
+import { Component, OnDestroy, ViewChild, ElementRef, HostBinding } from "@angular/core";
+import { Directionality } from "@angular/cdk/bidi";
+import { DurationFormatPipe } from "../../core/pipes/duration-format.pipe";
+import { CircularGauge, RangeModel, AnnotationModel, PointerModel, TickModel, LabelModel, LineModel, GaugeDirection, Annotations, ITooltipRenderEventArgs, TooltipSettingsModel, MarginModel, GaugeTooltip, CircularGaugeComponent } from "@syncfusion/ej2-angular-circulargauge";
+import { LegendSettingsModel } from "@syncfusion/ej2-circulargauge/src/circular-gauge/legend/legend-model";
+import dayjs from 'dayjs';
+import { Subject, Observable, forkJoin } from "rxjs";
+import { takeUntil, map } from "rxjs/operators";
+import { BizDoc } from "../../core/decorators";
+import { WidgetComponent } from "../../core/base";
+import { AccountService } from "../../core/account.service";
+import { SessionService } from "../../core/session.service";
+import { TranslateService } from "../../core/translate.service";
+import { WidgetRef } from "../widget-ref";
+import { FONT_FAMILY } from "../../core/colors";
+
+CircularGauge.Inject(Annotations, GaugeTooltip);
+
+const MAX_PEERS = 10;
+@Component({
+  template: '',
+  //templateUrl: 'peers-performance.widget.html',
+  host: {
+    style: 'display: block',
+    dir: 'ltr'
+  }
+})
+@BizDoc({
+  selector: 'bizdoc-peers-performance'
+})
+export class PeersPerformanceWidget implements WidgetComponent<PeerModel[]>, OnDestroy {
+  static nextId = 0;
+  @HostBinding()
+  readonly id = `peers-performance-${PeersPerformanceWidget.nextId++}`;
+  @ViewChild(CircularGaugeComponent) gauge: CircularGauge;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  annotations: AnnotationModel[];
+  ranges: RangeModel[];
+  pointers: PointerModel[];
+  max = 0;
+  readonly direction: GaugeDirection = this._dir.value === 'ltr' ? 'ClockWise' : 'AntiClockWise';
+  readonly lineStyle: LineModel = { width: 0 };
+  readonly labelStyle: LabelModel = { font: { size: '0px' } };
+  readonly majorTicks: TickModel = { width: 0 };
+  readonly minorTicks: TickModel = { width: 0 };
+  readonly legendSettings: LegendSettingsModel = {
+    visible: true, position: 'Top', shape: 'Diamond', alignment: 'Center',
+    padding: 0,
+    margin: { top: 0, bottom: 20 },
+    location: { y: 0 },
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true, type: ['Range', 'Pointer'], textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    annotationSettings: {},
+    showAtMousePosition: false
+  };
+  readonly margin: MarginModel = { left: 0, top: 0, right: 0, bottom: 0 };
+  height: string;
+  width: string;
+  private _score: number;
+  private _standardHigh = 0;
+  private _standardLow = 0;
+  private _data: PeerModel[];
+  private readonly _destroy = new Subject<void>();
+  constructor(private _session: SessionService,
+    ref: WidgetRef,
+    private _elementRef: ElementRef,
+    private _service: AccountService,
+    private _dir: Directionality,
+    private _duration: DurationFormatPipe,
+    private _translate: TranslateService) {
+    _session.themeChange.pipe(takeUntil(this._destroy)).
+      subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this.gauge.theme = this.theme;
+        this._prepare();
+        this._refresh();
+        this._animate();
+      });
+    ref.resize.subscribe(d => {
+      this.height = `${d.height}px`;
+      this.width = `${d.width}px`;
+      if (this.gauge) {
+        this.gauge.height = this.height;
+        this.gauge.width = this.width;
+        this._animate();
+      }
+    });
+  }
+  onBind(data: PeerModel[]) {
+    this._decorare(data).subscribe(() => {
+      this._prepare();
+      if (!this.gauge) this._draw();
+      else this._refresh();
+      this._animate();
+    });
+  }
+  /**
+   * 
+   * @param data
+   */
+  private _decorare(data: PeerModel[]): Observable<any> {
+    const observers: Observable<any>[] = [];
+    data.forEach(i => {
+      if (i.duration > this.max) this.max = i.duration;
+      if (i.userId === this._session.profile.userId) i.name = this._translate.get('You');
+      else {
+        const promise = this._service.get(i.userId).pipe(map(u =>
+          i.name = u.nick || u.name));
+        observers.push(promise);
+      }
+      if (i.standard) {
+        if (i.standard > this._standardHigh) this._standardHigh = i.standard;
+        if (this._standardLow === 0 || i.standard < this._standardLow) this._standardLow = i.standard;
+        if (i.standard > this.max) this.max = i.standard;
+      }
+      if (i.userId === this._session.profile.userId)
+        this._score = i.duration;
+    });
+    this._data = data.sort((i1, i2) => i1.duration < i2.duration ? 1 : -1).slice(0, MAX_PEERS);
+    return forkJoin(observers);
+  }
+  private _prepare() {
+    const step = Math.floor(70 / this._data.length), width = Math.min(15, Math.floor(80 / this._data.length / 2)), zero = 4 / 9;
+    let radius = 95;
+    const annotations: AnnotationModel[] = [];
+    const pointers: PointerModel[] = [];
+    let c = 0;
+    const palettes = this._session.accentPalette;
+    this._data.forEach((d, i) => {
+      pointers.push({
+        value: 0,
+        type: 'RangeBar',
+        color: palettes[c],
+        radius: `${radius + 5}%`,
+        animation: {
+          duration: 1500 * d.duration / this.max,
+          enable: true
+        },
+        pointerWidth: width
+      });
+      if (c === 9)
+        c = 0;
+      else
+        c++;
+      const duration = dayjs.duration(d.duration, 's');
+      const ratio = d.duration / this.max;
+      const days = duration.hours() > 0 ? `${Math.floor(duration.asDays())}:${duration.hours()}` : `${Math.floor(duration.asDays())}`;
+      annotations.push({
+        description: `${days}`,
+        content: `<span class="label">${days}</span>`,
+        radius: `${radius + 1}%`,
+        angle: !this._session.inverse ? (ratio < zero ?
+          205 + Math.round(140 * ratio / zero) :
+          165 - Math.round(140 * (1 - ratio) / zero)) : (ratio < zero ?
+            205 + Math.round(140 * ratio / zero) :
+            165 - Math.round(140 * (1 - ratio) / zero)),
+        textStyle: {
+          opacity: 0.8,
+          fontFamily: FONT_FAMILY,
+          size: '10px'
+        },
+        zIndex: '1'
+      });
+      annotations.push({
+        description: `${d.name}`,
+        content: `<span class="label">${d.name}</span>`,
+        radius: `${radius}%`,
+        angle: !this._session.inverse ? 195 + (radius - 95) / 3.14 : 195 + (radius - 95) / 3.14,
+        textStyle: {
+          opacity: 0.8,
+          fontFamily: FONT_FAMILY,
+          size: '10px'
+        },
+        zIndex: '1'
+      });
+      radius -= step;
+    });
+    const ranges: RangeModel[] = [];
+    if (this._standardHigh) {
+      ranges.push({
+        start: this._standardLow < this._standardHigh ? this._standardLow : 0,
+        legendText: this._translate.get('Standard'),
+        end: this._standardHigh,
+        startWidth: 6,
+        endWidth: 6,
+        color: this._session.getPrimery(400),
+        radius: `103%`
+      });
+    }
+    this.ranges = ranges,
+      this.annotations = annotations,
+      this.pointers = pointers;
+  }
+
+  private _draw() {
+    this.gauge && this.gauge.destroy();
+    this.gauge = new CircularGauge({
+      centerY: '45%',
+      centerX: '50%',
+      description: '',
+      width: this.width,
+      height: this.height,
+      background: 'transparent',
+      theme: this.theme,
+      tooltip: this.tooltip,
+      margin: this.margin,
+      enableRtl: false,
+      legendSettings: this.legendSettings,
+      tooltipRender: this.tooltipRender.bind(this),
+      axes: [{
+        radius: '90%', maximum: this.max, startAngle: 200, endAngle: 160, majorTicks: this.majorTicks,
+        labelStyle: this.labelStyle, lineStyle: this.lineStyle, minorTicks: this.minorTicks,
+        annotations: this.annotations, ranges: this.ranges, pointers: this.pointers, direction: this.direction
+      }]
+    }, this._elementRef.nativeElement);
+  }
+  private _refresh() {
+    const axis = this.gauge.axes[0];
+    axis.annotations = this.annotations;
+    axis.pointers = this.pointers;
+    axis.ranges = this.ranges;
+    this.gauge.refresh();
+  }
+  private _animate() {
+    setTimeout(() => this._data.forEach((p, i) =>
+      this.gauge.setPointerValue(0, i, p.duration)), 500);
+  }
+
+  tooltipRender(e: ITooltipRenderEventArgs) {
+    if (e.range)
+      e.content = e.range.start ? `${e.range.legendText} ${this._duration.transform(e.range.start)} - ${this._duration.transform(e.range.end)}`
+        : `${e.range.legendText} ${this._duration.transform(e.range.end)}`;
+    else
+      e.content = `${this._duration.transform(e.pointer.value)}`;
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface PeerModel {
+  name: string;
+  userId: string;
+  /** seconds */
+  duration: number;
+  standard?: number;
+}
+

package/src/lib/dashboard/score/pending-results.widget.html

@@ -0,0 +1,31 @@
+<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z0" @list>
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>
+    <td mat-cell *matCellDef="let element"> <bizdoc-identity-name [identity]='element.userId' chating="room"></bizdoc-identity-name></td>
+  </ng-container>
+
+  <ng-container matColumnDef="duration">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>
+    <td mat-cell *matCellDef="let element"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>
+  </ng-container>
+
+  <ng-container matColumnDef="standard">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>
+    <td mat-cell *matCellDef="let element"> <span *ngIf="element.standard" [bizdocTooltip]="element.standard|amDurationFormat">{{ element.standard | amDuration: 's' }}</span> </td>
+  </ng-container>
+
+  <ng-container matColumnDef="count">
+    <th mat-header-cell *matHeaderCellDef> </th>
+    <td mat-cell *matCellDef="let element" dir="ltr">
+      <span class="range">{{ element.processed }} / {{element.pending + element.processed}}</span>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+  <tr mat-row *matRowDef="let row; columns: columns;" @item></tr>
+</table>
+<style scoped>
+  .range {
+    white-space: nowrap;
+  }
+</style>

package/src/lib/dashboard/score/pending-results.widget.ts

@@ -0,0 +1,52 @@
+import { Component, ViewChild, OnDestroy, HostBinding } from "@angular/core";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import { Subject } from "rxjs";
+import { BizDoc } from "../../core/decorators";
+import { WidgetComponent } from "../../core/base";
+import { listAnimation, itemAnimation } from "../../core/animations";
+import { WidgetRef } from "../widget-ref";
+
+@Component({
+  selector: 'bizdoc-pending-results',
+  templateUrl: './pending-results.widget.html',
+  styleUrls: ['../_table.widget.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation
+  ]
+})
+@BizDoc({
+  selector: 'bizdoc-pending-results'
+})
+export class PendingResultsWidget implements WidgetComponent<DataModel[]>, OnDestroy {
+  @ViewChild(MatSort) sort: MatSort;
+  @HostBinding('style.height')
+  height: string;
+  readonly columns = ['name', 'duration', 'standard', 'count'];
+  dataSource: MatTableDataSource<DataModel>;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    ref: WidgetRef) {
+    ref.resize.subscribe(d => this.height = `${d.height}px`);
+  }
+  onBind(data: DataModel[]) {
+    this.dataSource = new MatTableDataSource(data);
+    this.sort.active = 'duration';
+    this.sort.direction = 'desc';
+    this.dataSource.sort = this.sort;
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+interface DataModel {
+  name: string;
+  userId: string;
+  pending: number;
+  processed: number;
+  duration?: number;
+  standard?: number;
+}

package/src/lib/dashboard/score/personal-score.widget.html

@@ -0,0 +1,18 @@
+<!--<ejs-circulargauge [tooltip]='tooltip' (tooltipRender)='tooltipRender($event)' style="display: block;"
+                   centerY='50%' [width]='width' [height]='height' centerX='50%' background='transparent' [theme]='theme'
+                   [legendSettings]='legendSettings'>
+  <e-axes>
+    <e-axis radius='90%' [maximum]='max' startAngle=270 endAngle=90 [majorTicks]='majorTicks' [direction]='direction'
+            [labelStyle]='labelStyle' [lineStyle]='lineStyle' [minorTicks]='minorTicks'
+            [ranges]='ranges' [pointers]='pointers'>
+      <e-pointers>
+        <e-pointer value=0 radius='' [cap]='cap' [animation]='animation' color=''>
+        </e-pointer>
+      </e-pointers>
+      <e-ranges>
+        <e-range start=0 end=50 radius='0%' color=''>
+        </e-range>
+      </e-ranges>
+    </e-axis>
+  </e-axes>
+</ejs-circulargauge>-->