@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/dashboard/cube/documents.widget.html

@@ -0,0 +1,19 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z0" matSort @list>
+  <ng-container matColumnDef="number">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Number' | translate}} </th>
+    <td mat-cell *matCellDef="let element"> <a (click)="open(element)">#{{element.number}}</a></td>
+  </ng-container>
+
+  <ng-container matColumnDef="subject">
+    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>
+    <td mat-cell *matCellDef="let element" class="text"> {{element.subject}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="state">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Status' | translate}} </th>
+    <td mat-cell *matCellDef="let element"> {{element.state | state }} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+  <tr mat-row @item *matRowDef="let row; columns: columns;"></tr>
+</table>

package/src/lib/dashboard/cube/documents.widget.ts

@@ -0,0 +1,57 @@
+import { Component, ViewChild, HostBinding } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { WidgetComponent } from '../../core/base';
+import { BizDoc } from '../../core/decorators';
+import { listAnimation, itemAnimation } from '../../core/animations';
+import { WidgetRef } from '../widget-ref';
+import { RouterImpl } from '../../core/router';
+import { MailboxService } from '../../core/mailbox.service';
+import { PromptService } from '../../core/prompt.service';
+@Component({
+  templateUrl: './documents.widget.html',
+  styleUrls: ['../_table.widget.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation
+  ]
+})
+@BizDoc({
+  selector: 'bizdoc-cube-documents'
+})
+/** */
+export class CubeDocumentsWidget implements WidgetComponent<MailInfo[]> {
+  dataSource: MatTableDataSource<MailInfo>;
+  @ViewChild(MatSort) sort: MatSort;
+  @HostBinding('style.height')
+  height: string;
+  loading = false;
+  readonly columns = ['number', 'subject', 'state'];
+  constructor(
+    private _router: RouterImpl,
+    private _mailbox: MailboxService,
+    private _sb: PromptService,
+    widgetRef: WidgetRef) {
+    widgetRef.resize.subscribe(d => this.height = `${d.height}px`);
+  }
+  onBind(data: MailInfo[]) {
+    this.dataSource = new MatTableDataSource<MailInfo>(data);
+    this.dataSource.sort = this.sort;
+  }
+  open(item: MailInfo) {
+    this._mailbox.info(item.id).subscribe(item => {
+      this._router.navigate(['mailbox/d', item.documentId.encodeId()], {
+        state: {
+          item
+        }
+      })
+    }, () => this._sb.error())
+  }
+}
+interface MailInfo {
+  id: number;
+  number?: string;
+  subject?: string;
+  state: string;
+}
+

package/src/lib/dashboard/cube/filter/filter.component.html

@@ -0,0 +1,3 @@
+<bizdoc-cube-filter [cube]="cube"
+                    [axes]="axes" [exclude]="exclude"
+                    (axesChange)="valuesChange($event)"></bizdoc-cube-filter>

package/src/lib/dashboard/cube/filter/filter.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { WidgetRef } from '../../widget-ref';
+import { Options } from '../cube-analysis.base';
+import { ArgumentsComponent } from '../../../core/base';
+import { BizDoc } from '../../../core/decorators';
+import { isArray } from '../../../core/functions';
+import { SessionService } from '../../../core/session.service';
+
+@Component({
+  templateUrl: './filter.component.html'
+})
+@BizDoc({ selector: 'bizdoc-cube-widget-filter' })
+/** filter component*/
+export class CubeWidgetFilterComponent implements OnInit, ArgumentsComponent {
+  form: FormGroup;
+  readonly exclude: string[] = [];
+  cube: string;
+  axes: {};
+  /** filter ctor */
+  constructor(
+    private readonly _widgetRef: WidgetRef<Options>,
+    private _session: SessionService,
+    private readonly _fb: FormBuilder
+  ) {
+    const { xAxis, series, exclude, cube: name } = this._widgetRef.options;
+    this.cube = name;
+    if (xAxis) {
+      if (isArray(xAxis)) this.exclude = [...xAxis];
+      else this.exclude.push(xAxis);
+    }
+    if (series) {
+      if (isArray(series)) this.exclude = this.exclude.concat(series);
+      else this.exclude.push(series);
+    }
+    if (exclude) {
+      if (isArray(exclude)) this.exclude = this.exclude.concat(exclude);
+      else this.exclude.push(exclude);
+    }
+    const cube = this._session.profile.cubes.find(c => c.name == name) || this._session.profile.cubes[0], controls = {};
+
+    cube.axes.filter(a => !a.hidden && a.selectionMode !== 'None').forEach(a => {
+      controls[a.name] = this._fb.control(null);
+    });
+    this.form = this._fb.group(controls);
+  }
+  ngOnInit(): void {
+    this.axes = this.form.value;
+  }
+  valuesChange(axes) {
+    this.form.patchValue(axes);
+  }
+}

package/src/lib/dashboard/cube/gauge.component.exp.ts

@@ -0,0 +1,18 @@
+////import { Component, ElementRef } from '@angular/core';
+////import { WidgetComponent } from '../../core/base';
+////import { LinearGauge } from '@syncfusion/ej2-angular-lineargauge';
+
+
+////@Component({ template: '' })
+////export
+////  class GaugeComponent implements WidgetComponent<any> {
+////  gauge: LinearGauge;
+////  constructor(private _element: ElementRef) { }
+////  onBind(data: any, args?: any) {
+////    this.gauge && this.gauge.destroy();
+////    this.gauge = new LinearGauge({
+      
+////    },
+////      this._element.nativeElement);
+////  }
+////}

package/src/lib/dashboard/dashboard.component.html

@@ -0,0 +1,18 @@
+<mat-grid-list [cols]="cols" @deshboard>
+  <mat-grid-tile *ngFor="let w of widgets" [colspan]="w.cols && w.cols <= cols ? w.cols : 1" [rowspan]="w.rows || 1">
+    <mat-card @card>
+      <mat-card-header>
+        <mat-card-title [attr.data-guide]="'widget-'+w.name">
+          <span>{{w.title}}</span>
+          <span class="divider"></span>
+          <button mat-icon-button (click)="widget.refresh()" [bizdocTooltip]="'Refresh'|translate" [attr.aria-label]="'Refresh'|translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+          <button mat-icon-button (click)="widget.filter($event)" [bizdocTooltip]="'Filter' | translate" [attr.aria-label]="'Filter'|translate" *ngIf="w.arguments.length||w.argumentsTemplate"><mat-icon>filter_list</mat-icon></button>
+          <button mat-icon-button (click)="guide(w.guide)" [bizdocTooltip]="'Help' | translate" [attr.aria-label]="'Help'|translate" *ngIf="w.guide"><mat-icon>help_outline</mat-icon></button>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <bizdoc-widget [model]="w" #widget></bizdoc-widget>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+</mat-grid-list>

package/src/lib/dashboard/dashboard.component.scss

@@ -0,0 +1,36 @@
+:host {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+@media only screen and (min-width: 600px) {
+  :host {
+    min-width: 600px;
+  }
+}
+
+.mat-card {
+  width: calc(100% - 50px);
+  height: calc(100% - 50px);
+  overflow: hidden;
+
+  ::ng-deep .mat-card-header-text {
+    width: 100%;
+  }
+
+  .mat-card-title {
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+  }
+
+  .mat-card-content {
+    height: inherit;
+  }
+
+  &:hover {
+    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  }
+}

package/src/lib/dashboard/dashboard.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnDestroy, Optional, Query, ViewChildren } from '@angular/core';
+import { SessionService } from '../core/session.service';
+import { Widget } from '../core/models';
+import { MediaObserver } from '@angular/flex-layout';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { WindowTitleService } from '../core/window-title.service';
+import { TranslateService } from '../core/translate.service';
+import { GuideService } from '../core/guide/guide.service';
+import { cardsAnimation, deshboardAnimation } from '../core/animations';
+import { WidgetItemComponent } from './widget-item.component';
+import { PaneRef } from '../core/slots/pane-ref';
+import { QueryList } from '@angular/core';
+
+@Component({
+  selector: 'bizdoc-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+  animations: [deshboardAnimation, cardsAnimation]
+})
+/** dashboard component*/
+export class DashboardComponent implements OnDestroy {
+  @ViewChildren(WidgetItemComponent) components: QueryList<WidgetItemComponent>;
+  private readonly _destroy = new Subject<void>();
+  /** dashboard ctor */
+  readonly widgets: Widget[];
+  cols = 3;
+  constructor(
+    private _guide: GuideService,
+    observableMedia: MediaObserver,
+    session: SessionService,
+    @Optional() pane: PaneRef,
+    title: WindowTitleService,
+    translate: TranslateService) {
+    title.set(translate.get('Dashboard'));
+    this.widgets = session.profile.widgets;
+    pane?.resized.subscribe(() => 
+      this.components?.forEach(c => c.resize.bind(this))
+    );
+    observableMedia.asObservable().pipe(takeUntil(this._destroy)).subscribe(m => {
+      const { mqAlias } = m[0];
+      this.cols = (mqAlias === 'xs' || mqAlias === 'sm') ? 1 : mqAlias === 'md' ? 2 : 3;
+    });
+  }
+  guide(name: string) {
+    this._guide.start(name);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+

package/src/lib/dashboard/dashboard.pane.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { PaneRef } from '../core/slots/pane-ref';
+import { TranslateService } from '../core/translate.service';
+
+@Component({
+  template: '<bizdoc-dashboard></bizdoc-dashboard>',
+  styles: [`:host {
+
+    min-width: 1200px;}`],
+  host: { class: 'pane' }
+})
+/** dashboard component*/
+export class DashboardPaneComponent {
+  constructor(
+    pane: PaneRef,
+    translate: TranslateService) {
+    pane.title = translate.get('Dashboard');
+  }
+}

package/src/lib/dashboard/recents/recents.widget.html

@@ -0,0 +1,32 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z0" @list>
+  <ng-container matColumnDef="number">
+    <th mat-header-cell *matHeaderCellDef> {{'Number' | translate}} </th>
+    <td mat-cell *matCellDef="let item"> <a (click)="open(item)">#{{item.number}}</a> </td>
+  </ng-container>
+
+  <ng-container matColumnDef="subject">
+    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>
+    <td mat-cell *matCellDef="let item" class="text"> {{item.subject}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="state">
+    <th mat-header-cell *matHeaderCellDef> {{'Status' | translate}} </th>
+    <td mat-cell *matCellDef="let item"> {{item.stateId | state }} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="option">
+    <th mat-header-cell *matHeaderCellDef> </th>
+    <td mat-cell *matCellDef="let item">
+      <ng-container *ngIf="!item.loading; else progress">
+        <button mat-icon-button (click)="view(item, $event)" [bizdocTooltip]="'View' | translate" [attr.aria-label]="'View' | translate" class="tool" *ngIf="enableAnalysis" matAnimate="rotate"><mat-icon>data_usage</mat-icon></button>
+        <button mat-icon-button (click)="open(item)" [bizdocTooltip]="'Open' | translate" [attr.aria-label]="'Open' | translate" class="tool"><mat-icon>more_horiz</mat-icon></button>
+      </ng-container>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+  <tr mat-row @item *matRowDef="let row; columns: columns;"></tr>
+</table>
+<ng-template #progress>
+  <mat-spinner diameter="26"></mat-spinner>
+</ng-template>

package/src/lib/dashboard/recents/recents.widget.scss

@@ -0,0 +1,9 @@
+:host ::ng-deep tr
+.tool {
+  opacity: .1
+}
+
+:host ::ng-deep tr:hover
+.tool {
+  opacity: 1
+}

package/src/lib/dashboard/recents/recents.widget.ts

@@ -0,0 +1,89 @@
+import { Component, OnDestroy, OnInit, HostBinding, Inject } from '@angular/core';
+import { WidgetComponent } from '../../core/base';
+import { MatTableDataSource } from '@angular/material/table';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BizDoc } from '../../core/decorators';
+import { listAnimation, itemAnimation } from '../../core/animations';
+import { MailboxService } from '../../core/mailbox.service';
+import { WidgetRef } from '../widget-ref';
+import { FormControl } from '@angular/forms';
+import { BizDocConfig, BIZDOC_CONFIG, OpenPolicy } from '../../core/configuration';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { PromptService } from '../../core/prompt.service';
+@Component({
+  templateUrl: './recents.widget.html',
+  styleUrls: ['../_table.widget.scss', './recents.widget.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation
+  ]
+})
+@BizDoc({
+  selector: 'bizdoc-recents'
+})
+/** performance component*/
+export class RecentsWidget implements WidgetComponent<RecipientInfo[]>, OnInit, OnDestroy {
+  dataSource: MatTableDataSource<RecipientInfo>;
+  @HostBinding('style.height')
+  height: string;
+  readonly search = new FormControl();
+  readonly enableAnalysis: boolean;
+  readonly columns = ['number', 'subject', 'state', 'option'];
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _router: RouterImpl,
+    private _service: MailboxService,
+    private _ps: PromptService,
+    ref: WidgetRef,
+    session: SessionService,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+    ref.resize.subscribe(d => this.height = `${d.height}px`);
+    this.enableAnalysis = session.profile.views.length > 0;
+  }
+  ngOnInit(): void {
+    this._service.changed.pipe(takeUntil(this._destroy)).
+      subscribe(m => {
+        const item = this.dataSource.data.find(i => i.id === m.id);
+        item && 
+          this.dataSource.data.remove(item);
+        this.dataSource.data.splice(0, 0, m);
+        this.dataSource.filter = '';
+      });
+    this.search.valueChanges.pipe(takeUntil(this._destroy));
+  }
+  onBind(data: RecipientInfo[]) {
+    this.dataSource = new MatTableDataSource<RecipientInfo>(data);
+  }
+  private _navigate(item: RecipientInfo, commands: string[], extra?) {
+    item.loading = true;
+    this._service.get(item.id).
+      subscribe(i => {
+        this._router.navigate(['mailbox/i', item.id.encodeId(), ...commands], { ...extra, state: { item: i } });
+        item.loading = false;
+      }, () => {
+        this._ps.error();
+        item.loading = false;
+      });
+  }
+  open(item: RecipientInfo) {
+    this._navigate(item, [], { policy: OpenPolicy.Clear });
+  }
+  view(item: RecipientInfo, evt: Event) {
+    this._navigate(item, ['views'], { policy: OpenPolicy.Tab | OpenPolicy.Expandable });
+    evt.stopPropagation();
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface RecipientInfo {
+  id: number;
+  formId: string;
+  number?: string;
+  subject?: string;
+  stateId: string;
+  loading?: boolean;
+}

package/src/lib/dashboard/score/activity.widget.html

@@ -0,0 +1,9 @@
+<!--<ejs-chart [crosshair]='crosshair' [tooltip]='tooltip' background="transparent" [chartArea]='chartArea' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' width='100%' [theme]='theme'
+           [enableAnimation]="true" [palettes]="palettes" id="activity-chart" [height]="height" dir="ltr"
+           [useGroupingSeparator]="true" [zoomSettings]="zoomSettings" (tooltipRender)="tooltipRender($event)">
+  <e-series-collection>
+    <e-series [dataSource]='data?.everyone' type='Line' xName='time' yName='duration' [name]="'Average'|translate" width=2 [marker]='everyoneMarker' [animation]="animation"></e-series>
+    <e-series [dataSource]='data?.timeline' type='Line' xName='time' yName='standard' [name]="'Standard' | translate" width=2 [marker]='standardMarker' dashArray='5' [animation]="animation" [fill]="fill"> </e-series>
+    <e-series [dataSource]='data?.timeline' type='Line' xName='time' yName='duration' [name]="'You' | translate" width=2 [marker]='youMarker' [animation]="animation"> </e-series>
+  </e-series-collection>
+</ejs-chart>-->

package/src/lib/dashboard/score/activity.widget.ts

@@ -0,0 +1,175 @@
+import { Component, OnDestroy, ViewChild, ElementRef } from "@angular/core";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import dayjs from 'dayjs';
+import { Chart, AxisModel, MarkerSettingsModel, CrosshairSettingsModel, TooltipSettingsModel, AnimationModel, LegendSettingsModel, SeriesModel, ZoomSettingsModel, ISharedTooltipRenderEventArgs, ChartAreaModel, ChartComponent } from "@syncfusion/ej2-angular-charts";
+import { BizDoc } from "../../core/decorators";
+import { WidgetComponent } from "../../core/base";
+import { FONT_FAMILY } from "../../core/colors";
+import { TranslateService } from "../../core/translate.service";
+import { SessionService } from "../../core/session.service";
+import { WidgetRef } from "../widget-ref";
+
+@Component({
+  template: '',
+  //templateUrl: './activity.widget.html'
+})
+@BizDoc({
+  selector: 'bizdoc-personal-activity'
+})
+export class PersonalActivityWidget implements WidgetComponent<Model>, OnDestroy {
+  @ViewChild(ChartComponent) chart: Chart;
+  height: string;
+  width: string;
+  data: Model;
+  readonly dir = this._session.direction;
+  readonly primaryXAxis: AxisModel = {
+    valueType: 'DateTime',
+    labelFormat: 'MMM dd',
+    edgeLabelPlacement: 'Shift',
+    majorGridLines: { width: 0 },
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    labelIntersectAction: 'Hide',
+    maximumLabels: 2
+  };
+  readonly zoomSettings: ZoomSettingsModel = {
+    mode: 'X',
+    enableMouseWheelZooming: true,
+    enablePinchZooming: true,
+    toolbarItems: [],
+    enableSelectionZooming: false,
+    enableScrollbar: true
+  };
+  readonly crosshair: CrosshairSettingsModel = {
+    enable: true,
+    lineType: 'Vertical'
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true, shared: true,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly animation: AnimationModel = { enable: true };
+  readonly primaryYAxis: AxisModel = {
+    skeleton: 'duration',
+    labelStyle: {
+      size: '0px'
+    },
+    minorTickLines: { width: 0 }
+  };
+  readonly standardMarker: MarkerSettingsModel = {
+    visible: false,
+    height: 6,
+    width: 6,
+    shape: 'Pentagon'
+  };
+  readonly youMarker: MarkerSettingsModel = {
+    visible: false, height: 6, width: 6,
+    shape: 'Diamond'
+  };
+  readonly everyoneMarker: MarkerSettingsModel = {
+    height: 6,
+    width: 6,
+    visible: false
+  };
+  readonly chartArea: ChartAreaModel = {
+    border: {
+      width: 0
+    }
+  };
+  readonly legendSettings: LegendSettingsModel = {
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    isInversed: this._session.inverse,
+    visible: true
+  };
+  theme: 'MaterialDark' | 'Material' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  palettes = this._session.accentPalette;
+  fill = this._session.getPrimery(400);
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    ref: WidgetRef,
+    private _elementRef: ElementRef,
+    private _translate: TranslateService, private _session: SessionService) {
+    this._session.themeChange.pipe(
+      takeUntil(this._destroy)).subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this.palettes = this._session.accentPalette;
+        this.fill = this._session.getPrimery(400);
+        this._draw();
+      });
+    ref.resize.subscribe(d => {
+      this.height = `${d.height}px`;
+      if (this.chart) this.chart.height = this.height;
+      this.width = `${d.width}px`;
+    });
+  }
+  onBind(data: Model) {
+    this.data = data;
+    this._prepare();
+    this._draw();
+  }
+
+  private _prepare() {
+    this.data.timeline.forEach(p => {
+      p.time = new Date(p.time);
+    });
+    this.data.everyone.forEach(p => {
+      p.time = new Date(p.time);
+    });
+  }
+  tooltipRender(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 _draw() {
+    const series: SeriesModel[] = [{
+      dataSource: this.data.everyone, type: 'Line', xName: 'time', yName: 'duration', name: this._translate.get('Average'), width: 2, marker: this.everyoneMarker, animation: this.animation
+    },
+    {
+      dataSource: this.data.timeline, type: 'Line', xName: 'time', yName: 'standard', fill: this.fill, name: this._translate.get('Standard'), width: 2, marker: this.standardMarker, dashArray: '5', animation: this.animation
+    },
+    {
+      dataSource: this.data.timeline, type: 'Line', xName: 'time', yName: 'duration', name: this._translate.get('You'), width: 2, marker: this.youMarker, animation: this.animation
+    }];
+    this.chart && this.chart.destroy();
+    this.chart = new Chart({
+      crosshair: this.crosshair,
+      tooltip: this.tooltip,
+      background: 'transparent',
+      chartArea: this.chartArea,
+      primaryXAxis: this.primaryXAxis,
+      primaryYAxis: this.primaryYAxis,
+      width: '100%',
+      theme: this.theme,
+      legendSettings: this.legendSettings,
+      height: this.height,
+      zoomSettings: this.zoomSettings,
+      sharedTooltipRender: this.tooltipRender.bind(this),
+      enableAnimation: true,
+      palettes: this.palettes,
+      useGroupingSeparator: true,
+      enableRtl: false,
+      series
+    }, this._elementRef.nativeElement);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Model {
+  timeline: Point[];
+  everyone: Point[];
+}
+interface Point {
+  time: Date;
+  duration: number;
+  standard?: number;
+}

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

@@ -0,0 +1,8 @@
+<!--<ejs-chart [axes]='axes' [rows]='rows' [height]="height"
+  [legendSettings]='legend' [crosshair]='crosshair' [tooltip]='tooltip'
+  background="transparent" [chartArea]='chartArea'
+  [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
+  [enableRtl]='enableRtl' [theme]='theme' [margin]="margin"
+  [useGroupingSeparator]='true' [palettes]='palettes' [id]="id"
+  [enableAnimation]="true" [zoomSettings]="zoomSettings" dir="ltr" (tooltipRender)="tooltipRender($event)"> 
+</ejs-chart>-->