@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/core/window-title.service.ts

@@ -0,0 +1,54 @@
+import { Injectable, Inject } from '@angular/core';
+import { HubService } from './hub.service';
+import { BIZDOC_CONFIG, BizDocConfig } from '../core/configuration';
+import { AccountService } from './account.service';
+import { TranslateService } from './translate.service';
+
+const TIME = 1000;
+
+@Injectable({ providedIn: 'root' })
+export class WindowTitleService {
+  private _inFocus = true;
+  private _isActive = false;
+  private _mode = false;
+  private _task: NodeJS.Timeout;
+  private _message: string;
+  private _title: string;
+    private readonly _appTitle = this.config.appTitle || 'BizDoc';
+
+  constructor(@Inject(BIZDOC_CONFIG) private config: BizDocConfig,
+    users: AccountService,
+    translate: TranslateService,
+    hub: HubService) {
+    document.addEventListener('blur', () => this._inFocus = false);
+    document.addEventListener('focus', () => {
+      this._isActive &&
+        this._clear();
+      this._inFocus = true;
+    });
+    hub.new$.subscribe(i =>
+      users.get(i.model.senderId).subscribe(u =>
+        !this._inFocus && this._show(translate.get('NewFrom', i.model.number, u.name))));
+    hub.notify$.subscribe(n =>
+      !this._inFocus && this._show(n.model.title));
+    this._title = document.title;
+  }
+  set(value: string) {
+    document.title = this._title = value ? `${this._appTitle} - ${value}` : this._appTitle;
+  }
+  private _show(message: string) {
+    this._message = message;
+    this._isActive = true;
+    this._task && clearInterval(this._task);
+    this._task = setInterval(() => {
+      this._mode = !this._mode;
+      document.title = this._mode ? this._title : this._message;
+    }, TIME);
+  }
+  private _clear() {
+    clearInterval(this._task);
+    this._task = null;
+    document.title = this._title;
+    this._isActive = false;
+  }
+}

package/src/lib/cube/accum/accum.component.html

@@ -0,0 +1,16 @@
+<!--<ejs-accumulationchart [id]="id" [legendSettings]="legendSettings"
+                       [tooltip]="tooltip" (pointClick)='pointClick($event)'
+                       [theme]='theme' (textRender)="textRender($event)" (tooltipRender)="tooltipRender($event)"
+                       [enableAnimation]="true" background="transparent"
+                       [height]="height"
+                       [currencyCode]=currencyCode>
+  <e-accumulation-series-collection>
+    <e-accumulation-series [dataSource]='dataSource' xName='name' yName='y'
+                           [startAngle]="startAngle" [endAngle]="endAngle"
+                           radius="70%" [dataLabel]="dataLabel"
+                           [explode]='true' explodeOffset='10%'
+                           [explodeIndex]='0' [innerRadius]="innerRadius"
+                           [palettes]="palettes">
+    </e-accumulation-series>
+  </e-accumulation-series-collection>
+</ejs-accumulationchart>-->

package/src/lib/cube/accum/accum.component.ts

@@ -0,0 +1,264 @@
+import { Component, Output, EventEmitter, OnDestroy, OnInit, ElementRef, HostBinding, Input, SimpleChanges, OnChanges } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { AccumulationDataLabelSettingsModel, TooltipSettingsModel, LegendSettingsModel, AccumulationChart, IPointEventArgs, IAccTextRenderEventArgs, IAccTooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts';
+import { Internationalization } from '@syncfusion/ej2-base';
+import { Workbook, Worksheet, Row, Column } from '@syncfusion/ej2-excel-export';
+import { AxisClickEvent, CubeViewerComponent } from "../declarations";
+import { AxesMap, ChartType, Cube } from '../../core/models';
+import { FONT_FAMILY } from '../../core/colors';
+import { AXES_CODE_DIVIDER, AXES_LABEL_DIVIDER, CubeService, errResource, Point } from '../cube.service';
+import { SessionService } from '../../core/session.service';
+import { TranslateService } from '../../core/translate.service';
+import { PromptService } from '../../core/prompt.service';
+import { isArray } from '../../core/functions';
+import { ScopeType } from '../../core/configuration';
+
+@Component({
+  selector: 'bizdoc-cube-accum',
+  template: '',
+  host: {
+    class: 'cube-view'
+  }
+})
+/** chart component*/
+export class CubeAccumulationChartComponent implements OnInit, OnChanges, OnDestroy, CubeViewerComponent {
+  static nextId = 0;
+  @HostBinding()
+  readonly id = `cube-accum-chart-${CubeAccumulationChartComponent.nextId++}`;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  accumchart: AccumulationChart;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: string;
+  dataSource: Point[];
+  readonly dataLabel: AccumulationDataLabelSettingsModel = {
+    visible: true,
+    name: 'text',
+    position: 'Outside',
+    font: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly legendSettings: LegendSettingsModel = {
+    visible: true,
+    //position: this._session.inverse ? 'Left' : 'Right',
+    isInversed: this._session.inverse,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true,
+    enableAnimation: true,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  private _palettes = this._session.accentPalette;
+  public get palettes() {
+    return this._palettes;
+  }
+  @Input()
+  public set palettes(value) {
+    this._palettes = value;
+  }
+  @Input()
+  height: string | number;
+  @Input()
+  width: string | number;
+  @Input()
+  cube!: string;
+  private _xAxis!: string[];
+  @Input()
+  set xAxis(val: string | string[]) {
+    this._xAxis = isArray(val) ? val : [val];
+  }
+  @Input()
+  filters?: AxesMap;
+  @Input()
+  chartType?: ChartType;
+  @Input()
+  @Input() scope: ScopeType;
+  currencyCode: string;
+  @Input() loading: boolean;
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  @Output() readonly explore: EventEmitter<AxisClickEvent> = new EventEmitter();
+  private _cube: Cube;
+  private readonly _intl: Internationalization = new Internationalization();
+  private readonly _destroy = new Subject<void>();
+  /** chart ctor */
+  constructor(private _service: CubeService,
+    private _sb: PromptService,
+    private _translate: TranslateService,
+    private _elementRef: ElementRef,
+    private _session: SessionService) {
+    _session.themeChange.pipe(takeUntil(this._destroy)).
+      subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this.palettes = _session.accentPalette;
+      });
+  }
+  ngOnInit() {
+    this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
+    this.currencyCode = this._cube.currencyCode;
+    switch (this.chartType) {
+      case 'Doughnut':
+        this.innerRadius = '10%';
+        break;
+      case 'HalfDoughnut':
+        this.startAngle = 270;
+        this.endAngle = 90;
+        this.innerRadius = '10%';
+        break;
+      case 'Funnel':
+        break;
+      default:
+        this.startAngle = 0;
+        this.endAngle = 360;
+        this.innerRadius = '0';
+    }
+    this.execute();
+  }
+  textRender(e: IAccTextRenderEventArgs) {
+    e.text = e.point.x as string;
+  }
+  tooltipRender(e: IAccTooltipRenderEventArgs): void {
+    (e as any).text = this._intl.formatNumber(e.point.y, {
+      currency: this.currencyCode,
+      format: this.currencyCode ? 'c' : 'n',
+      maximumFractionDigits: this._service.fractionDigits
+    });
+  }
+  pointClick(evt: IPointEventArgs) {
+    const axes: AxesMap = {};
+    const x = (evt.series.dataSource[evt.pointIndex].x as string).split(AXES_CODE_DIVIDER);
+    for (let i = 0; i < this._xAxis.length; i++)
+      axes[this._xAxis[i]] = x[i];
+    this.explore.emit({ axes });
+  }
+  /**
+   * 
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'] && !changes['filters'].firstChange)
+      this.execute();
+    else
+      if (changes['height'])
+        this.resize();
+  }
+  resize() {
+    this.accumchart && this.accumchart.accumulationResize();
+  }
+
+  execute() {
+    this.loadingChange.emit(true);
+    this._service.series(this.cube, this._xAxis, {
+      filters: this.filters,
+      scope: this.scope
+    }).subscribe(r => {
+      this.dataSource = r[0].points;
+      this._draw();
+      this.loadingChange.emit(false);
+    }, (e: HttpErrorResponse) => {
+      this._sb.error(errResource(e));
+      this.loadingChange.emit(false);
+    });
+  }
+
+  private _draw() {
+    this.accumchart && this.accumchart.destroy();
+    this.accumchart = new AccumulationChart({
+      legendSettings: this.legendSettings,
+      tooltip: this.tooltip,
+      pointClick: this.pointClick.bind(this),
+      theme: this.theme,
+      textRender: this.textRender.bind(this),
+      tooltipRender: this.tooltipRender.bind(this),
+      enableAnimation: true,
+      background: 'transparent',
+      height: this.height as string,
+      currencyCode: this.currencyCode,
+      series: [{
+        dataSource: this.dataSource,
+        xName: 'name',
+        yName: 'y',
+        startAngle: this.startAngle,
+        endAngle: this.endAngle,
+        radius: "70%",
+        dataLabel: this.dataLabel,
+        explode: true,
+        explodeOffset: '10%',
+        explodeIndex: 0,
+        innerRadius: this.innerRadius,
+        palettes: this.palettes
+      }]
+    }, this._elementRef.nativeElement);
+  }
+  exportToExcel(title: string) {
+    const numberFormat = this._service.numberFormat,
+      rows = [{
+        index: 1,
+        cells: this._xAxis.map((x, i) => ({
+          index: i + 1,
+          value: this._cube.axes.find(a => a.name === x).title,
+          style: {
+            bold: true
+          }
+        } as Cell))
+      }] as Row[];
+    rows[0].cells.push({
+      index: this._xAxis.length + 1,
+      value: this._translate.get('Value'),
+      style: {
+        bold: true
+      }
+    });
+    this.dataSource.forEach((p, i) => {
+      const cells = this._xAxis.map((_, j) => {
+        return {
+          index: j + 1,
+          value: p.name.split(AXES_LABEL_DIVIDER)[j]
+        } as Cell;
+      }
+      );
+      cells.push({
+        type: 'number',
+        index: this._xAxis.length + 1,
+        style: {
+          numberFormat,
+          hAlign: 'right'
+        },
+        value: p.y
+      } as Cell);
+      rows.push(
+        {
+          index: i + 2,
+          cells
+        } as Row)
+    });
+    const book = new Workbook(
+      {
+        worksheets: [
+          {
+            enableRtl: this._session.inverse,
+            name: this._translate.get('SheetN', 1),
+            columns: [...this._xAxis.map((_, i) => ({ index: i + 1, width: 250 } as Column))
+              , { index: this._xAxis.length + 1 },
+            ],
+            rows
+          } as Worksheet
+        ],
+      },
+      'xlsx'
+    );
+    book.save(`${title}.xlsx`);
+  }
+  ngOnDestroy(): void {
+    this.accumchart && this.accumchart.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Cell { }

package/src/lib/cube/chart/chart.component.html

@@ -0,0 +1,32 @@
+<!--<ejs-chart [legendSettings]='legendSettings'
+           [primaryXAxis]='primaryXAxis'
+           [primaryYAxis]='primaryYAxis'
+           [enableExport]=true
+           [currencyCode]=currencyCode
+           background="transparent"
+           [theme]='theme'
+           [useGroupingSeparator]=true
+           [id]='id'
+           [palettes]='palettes'
+           [height]='height'
+           (tooltipRender)='tooltipRender($event)'
+           selectionMode="Point"
+           (pointClick)='pointClick($event)'
+           [tooltip]='tooltip'
+           [enableAnimation]=true
+           [crosshair]='crosshair'
+           [chartArea]='chartArea'
+           [enableRtl]='enableRtl'
+           width="100%">
+  <e-series-collection>
+    <e-series *ngFor="let s of series" xName='name'
+              yName='y'
+              [animation]="s.animation"
+              [fill]="s.fill"
+              [name]="s.name"
+              [width]="s.width"
+              [dataSource]="s.dataSource"
+              [type]="s.type"
+              [marker]="s.marker"></e-series>
+  </e-series-collection>
+</ejs-chart>-->