@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/views/cube/matrix.component.ts

@@ -0,0 +1,106 @@
+import { Component, ViewChild } from "@angular/core";
+import { map, Observable } from "rxjs";
+import { isArray, mapToArray } from "../../core/functions";
+import { BizDoc } from "../../core/decorators";
+import { CubeAxis } from "../../core/models";
+import { SessionService } from "../../core/session.service";
+import { RouterImpl } from "../../core/router";
+import { CubeService, Pattern } from "../../cube/cube.service";
+import { DocumentViewRef } from "../document-view-ref";
+import { CubeBase } from "./cube-base";
+import { CubeMatrixComponent, SumSettings } from "../../cube/matrix/table.component";
+import { ScopeType } from "../../core/configuration";
+import { AxisClickEvent } from "../../cube/declarations";
+
+@Component({
+  templateUrl: 'matrix.component.html',
+  styleUrls: ['matrix.component.scss'],
+  host: { class: 'view' }
+})
+@BizDoc({
+  selector: 'bizdoc-cube-matrix'
+})
+export class CubeDocumentMatrixComponent extends CubeBase<Options> {
+  @ViewChild(CubeMatrixComponent, { static: true }) table: CubeMatrixComponent;
+  readonly sources: { [axis: string]: Observable<{ key: string; value: any; }[]>; } = {};
+  filters: CubeAxis[];
+  indices?: string | string[];
+  xAxis: string;
+  series: string;
+  sum?: SumSettings | SumSettings[];
+  constructor(
+    viewRef: DocumentViewRef<Options>,
+    private _router: RouterImpl,
+    service: CubeService,
+    session: SessionService) {
+    super(viewRef, service, session, true);
+  }
+
+  onViewBind() {
+    const { xAxis, series, indices, sum, scope, filters } = this._viewRef.options;
+    if (!xAxis || !series) throw 'xAxis and serie required';
+    this.xAxis = isArray(xAxis) ? xAxis[0] : xAxis;
+    this.series = isArray(series) ? series[0] : series;
+    this.indices = indices;
+    this.sum = sum;
+    this.scope = scope;
+
+    this._service.patterns(this.cube.name).subscribe(p => this.patterns = p);
+    /** one or more axis */
+    this.filters = this.cube.axes.filter(a => isArray(filters) ?
+      filters.indexOf(a.name) > -1 :
+      a.name === filters);
+    this.filters.forEach(f =>
+      this.sources[f.name] = this._service.values(this.cube.name, f.name).pipe(map(mapToArray))
+    );
+  }
+
+  explore(evt: AxisClickEvent) {
+    const { axes: queryParams, index } = evt;
+    this._router.navigate(['cube', this.cube.name, 'explore'], {
+      queryParams,
+      group: this.group,
+      state: { index }
+    });
+
+  }
+  /**
+ *
+ * @param value
+ */
+  filter(name: string, value: string | number, title: string) {
+    const axes = { ...this.axes };
+    axes[name] = value;
+    this.anyFilters = true;
+    this.axes = axes;
+  }
+  /**
+    *
+    * @param pattern
+    */
+  patternChange(pattern: Pattern) {
+    const axes = { ...pattern.axes };
+    this._service.base(this.cube.name, axes, this.originalAxes);
+    this.axes = axes;
+    this.anyFilters = true;
+    this.title = pattern.title;
+    this.pattern = pattern;
+  }
+
+  reset() {
+    this.axes = super.aggregate(this.originalAxes);
+    this.anyFilters = false;
+    this.pattern = null;
+    this.title = null;
+  }
+}
+
+export interface Options {
+  filters: string[] | string;
+  sum: SumSettings | SumSettings[];
+  indices: string[] | string;
+  aggregate: string[];
+  xAxis: string;
+  series: string;
+  scope?: ScopeType;
+}

package/src/lib/views/cube/parallel.component.html

@@ -0,0 +1,10 @@
+<bizdoc-cube-parallel *ngIf=hasdata
+                      [cube]="cube.name"
+                      [xAxis]="xAxis"
+                      [series]="series"
+                      [indices]="indices"
+                      [filters]="axes"
+                      [chartType]="chartType"
+                      [scope]="scope"
+                      [size]="size"
+                      (explore)="explore($event)"></bizdoc-cube-parallel>

package/src/lib/views/cube/parallel.component.scss

@@ -0,0 +1,13 @@
+:host {
+  padding: 8px;
+}
+
+.element {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  align-items: center;
+  flex: 1 1 auto;
+}

package/src/lib/views/cube/parallel.component.ts

@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+import { BizDoc } from '../../core/decorators';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { CubeService } from '../../cube/cube.service';
+import { DocumentViewRef } from '../document-view-ref';
+import { CubeBase } from './cube-base';
+import { ExploreEvent } from '../../cube/parallel/parallel.component';
+import { SparklineType } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  templateUrl: './parallel.component.html',
+  host: { class: 'view' },
+  styleUrls: ['parallel.component.scss']
+})
+@BizDoc({
+  selector: 'bizdoc-parallel-view'
+})
+export
+  class CubeParallelViewComponent extends CubeBase<Options> {
+  xAxis: string | string[];
+  series?: string | string[];
+  indices?: string | string[];
+  chartType?: SparklineType;
+  size :number;
+  constructor(viewRef: DocumentViewRef<Options>,
+    private _router: RouterImpl,
+    service: CubeService,
+    session: SessionService) {
+    super(viewRef, service, session);
+    this.size = viewRef.dimentions.width;
+    viewRef.resize.subscribe(d => this.size = d.width);
+  }
+  onViewBind() {
+    const { chartType, xAxis, series, indices } = this._viewRef.options;
+    if (!xAxis || !series) throw 'parallel view requires series or xAxis';
+    this._drop(xAxis);
+    series && this._drop(series);
+    this.xAxis = xAxis;
+    this.series = series;
+    this.indices = indices;
+    this.chartType = chartType;
+  }
+  /**
+     *
+     * @param evt
+     */
+  explore(evt: ExploreEvent) {
+    this._router.navigate(['cube', this.cube.name, 'explore'],
+      {
+        group: this.group,
+        queryParams: evt.axes,
+        state: { index: evt.index }
+      });
+  }
+}
+export interface Options {
+  aggregate?: string[];
+  xAxis: string | string[];
+  series?: string | string[];
+  indices?: string | string[];
+  chartType?: SparklineType;
+}

package/src/lib/views/cube/pivot.component.html

@@ -0,0 +1,8 @@
+<bizdoc-cube-pivot *ngIf="hasdata"
+                   [xAxis]="xAxis"
+                   [series]="series"
+                   [cube]="cube.name"
+                   [filters]="axes"
+                   [chartType]="chartType"
+                   [width]="width"
+                   (explore)="explore($event)"></bizdoc-cube-pivot>

package/src/lib/views/cube/pivot.component.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+import { ScopeType } from '../../core/configuration';
+import { BizDoc } from '../../core/decorators';
+import { ChartType } from '../../core/models';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { CubeService } from '../../cube/cube.service';
+import { AxisClickEvent } from '../../cube/declarations';
+import { DocumentViewRef } from '../document-view-ref';
+import { CubeBase } from './cube-base';
+
+@Component({
+  templateUrl: './pivot.component.html',
+})
+@BizDoc({
+  selector: 'bizdoc-pivot-view'
+})
+export
+  class CubePivotViewComponent extends CubeBase<Options> {
+  xAxis: string | string[];
+  series: string | string[];
+  height: number;
+  width: number | string;
+  chartType?: ChartType;
+  constructor(session: SessionService,
+    viewRef: DocumentViewRef<Options>,
+    service: CubeService,
+    private _router: RouterImpl) {
+    super(viewRef, service, session);
+    viewRef.resize.subscribe(d =>
+      this.width = d.width);
+  }
+  onViewBind() {
+    const { xAxis, series, chartType } = this._viewRef.options;
+    if (!xAxis || !series) throw 'pivot view requires xAxis, series';
+    this.xAxis = xAxis,
+      this.chartType = chartType,
+      this.series = series
+  }
+  /**
+   *
+   * @param evt
+   */
+  explore(evt: AxisClickEvent) {
+    const { axes, index } = evt;
+    this._router.navigate(['cube', this.cube.name, 'explore'],
+      {
+        queryParams: { ...this.axes, ...axes },
+        group: this.group,
+        state: { index }
+      });
+  }
+}
+
+export interface Options {
+  xAxis: string | string[];
+  series: string | string[];
+  aggregate?: string[];
+  chartType?: ChartType;
+  indicesChartType?: ChartType;
+  scope?: ScopeType;
+}

package/src/lib/views/cube/sum.component.html

@@ -0,0 +1,30 @@
+<ng-container *ngIf="hasdata">
+  <div class="nav-toolbar" *ngIf="alternate || selectedAxis">
+    <span class="divider"></span>
+    <ng-container *ngIf="alternate">
+      <button mat-button [matMenuTriggerFor]="cmenu">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>
+      <mat-menu #cmenu>
+        <button mat-menu-item *ngFor="let a of alternate"
+                (click)="switchTo(a)">
+          {{a.title}}
+        </button>
+      </mat-menu>
+    </ng-container>
+    <ng-container *ngIf="selectedAxis">
+      <button mat-button [matMenuTriggerFor]="amenu">{{selectedAxis| typeValue: primaryAxis.dataType | async }} <mat-icon>arrow_drop_down</mat-icon></button>
+      <mat-menu #amenu>
+        <button mat-menu-item *ngFor="let a of originalAxes[primaryAxis.name]"
+                (click)="switchAxis(a)">
+          {{a | typeValue: primaryAxis.dataType | async}}
+        </button>
+      </mat-menu>
+    </ng-container>
+  </div>
+  <div class="loading-view" *ngIf="loading">
+    <mat-spinner color="accent"></mat-spinner>
+  </div>
+  <bizdoc-cube-sum [xAxis]="primaryAxis.name" [filters]="axes" [parentAxis]="parentAxis"
+                   [scope]="scope" [periodPolicy]="periodPolicy"
+                   [indices]="indices" [cube]="cube.name"
+                   (explore)="explore($event)"></bizdoc-cube-sum>
+</ng-container>

package/src/lib/views/cube/sum.component.scss

@@ -0,0 +1,3 @@
+:host {
+  padding: 0 8px;
+}

package/src/lib/views/cube/sum.component.ts

@@ -0,0 +1,71 @@
+import { Component } from "@angular/core";
+import { DocumentViewComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { SessionService } from "../../core/session.service";
+import { RouterImpl } from "../../core/router";
+import { CubeService } from "../../cube/cube.service";
+import { DocumentViewRef } from "../document-view-ref";
+import { CubeBase } from "./cube-base";
+import { CubeAxis } from "../../core/models";
+import { isArray } from "../../core/functions";
+import { ExploreEvent } from "../../cube/sum/sum.component";
+import { ScopeType } from "../../core/configuration";
+
+@Component({
+  templateUrl: 'sum.component.html',
+  styleUrls: ['sum.component.scss'],
+  host: { class: 'view' }
+})
+@BizDoc({
+  selector: 'bizdoc-cube-sum'
+})
+export class CubeDocumentSumComponent extends CubeBase<Options> implements DocumentViewComponent {
+  primaryAxis!: CubeAxis;
+  parentAxis?: string;
+  periodPolicy: string;
+  indices: string[] | string;
+  selectedAxis: string | number;
+  scope: ScopeType;
+  constructor(
+    viewRef: DocumentViewRef<Options>,
+    private _router: RouterImpl,
+    service: CubeService,
+    session: SessionService) {
+    super(viewRef, service, session);
+  }
+  async onViewBind() {
+    const { xAxis, indices, series, periodPolicy, scope } = this._viewRef.options;
+    if (!xAxis) throw 'sum view requires xAxis';
+    this.primaryAxis = this.cube.axes.find(a => a.name === xAxis);
+    const originalValue = this.originalAxes[xAxis];
+    if (isArray(originalValue))
+      this.selectedAxis = originalValue[0];
+    this.periodPolicy = periodPolicy;
+    this.parentAxis = series;
+    this.indices = indices;
+    this.scope = scope;
+  }
+  async switchAxis(value: string | number) {
+    const axes = { ...this.axes };
+    axes[this.primaryAxis.name] = value;
+    this.selectedAxis = value;
+    super.switchAxes(axes);
+  }
+  explore(evt: ExploreEvent) {
+    this._router.navigate(['cube', this.cube.name, 'explore'], {
+      group: this.group,
+      queryParams: evt.axes,
+      state: evt.index ? {
+        index: evt.index
+      } : null
+    })
+  }
+}
+export interface Options {
+  indices: string[] | string;
+  aggregate: string[];
+  xAxis: string;
+  series?: string;
+  periodPolicy?: 'Strict' | 'Fish';
+  scope?: ScopeType;
+}

package/src/lib/views/cube/view.component.html

@@ -0,0 +1,34 @@
+<ng-container *ngIf="hasdata; else none">
+  <div class="nav-toolbar">
+    <button mat-icon-button (click)="guide()" [bizdocTooltip]="'Help' | translate" *ngIf="view.guide"><mat-icon>help_outline</mat-icon></button>
+    <ng-container *ngIf="alternate">
+      <button mat-button [matMenuTriggerFor]="cmenu">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>
+      <mat-menu #cmenu>
+        <button mat-menu-item *ngFor="let a of alternate"
+                (click)="switchTo(a)">
+          {{a.title}}
+        </button>
+      </mat-menu>
+    </ng-container>
+    <span class="divider"></span>
+    <button mat-icon-button [matMenuTriggerFor]="pmenu" [bizdocTooltip]="'Patterns' | translate" [disabled]="!patterns?.length" data-help="pattern"><mat-icon [class.filled]="pattern">filter_alt</mat-icon></button>
+    <mat-menu #pmenu>
+      <button mat-menu-item *ngFor="let p of patterns" (click)="patternChange(p)">
+        {{p.title}}
+      </button>
+    </mat-menu>
+    <button mat-icon-button (click)="clearFilter()" [bizdocTooltip]="'Clear' | translate" [disabled]="!anyFilters"><mat-icon>clear_all</mat-icon></button>
+    <button mat-icon-button (click)="filterToggle($event)" [bizdocTooltip]="'Filter' | translate" [disabled]="!anyAxes" data-help="filter"><mat-icon>filter_list</mat-icon></button>
+  </div>
+  <div class="loading-view" *ngIf="loading">
+    <mat-spinner color="accent"></mat-spinner>
+  </div>
+  <bizdoc-cube-view [filters]="axes" #vp
+                    (explore)="explore($event)"
+                    [cube]="cube"
+                    [view]="view"
+                    (loading)="loading = $event"></bizdoc-cube-view>
+</ng-container>
+<ng-template #none>
+  <bizdoc-none icon="equalizer" subtitle="NothingHere"></bizdoc-none>
+</ng-template>

package/src/lib/views/cube/view.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+  min-height: 220px;
+}
+
+:host ::ng-deep .cube-view {
+  flex: 1 auto;
+}

package/src/lib/views/cube/view.component.ts

@@ -0,0 +1,103 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import { BizDoc } from '../../core/decorators';
+import { GuideService } from '../../core/guide/guide.service';
+import { CubeView } from '../../core/models';
+import { Popup } from '../../core/popup/popup.service';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { CubeViewComponent } from '../../cube/cube-view.component';
+import { CubeService, Pattern } from '../../cube/cube.service';
+import { AxisClickEvent } from '../../cube/declarations';
+import { CubeFilterComponent } from '../../cube/filter/filter.component';
+import { DocumentViewRef } from '../document-view-ref';
+import { CubeBase } from './cube-base';
+
+@Component({
+  templateUrl: './view.component.html',
+  styleUrls: ['./view.component.scss'],
+  host: { class: 'view' }
+})
+@BizDoc({
+  selector: 'bizdoc-cube-view'
+})
+export
+  class CubeDocumentViewComponent extends CubeBase<Options> implements OnInit {
+  @ViewChild(CubeViewComponent) viewPane: CubeViewComponent;
+  view: CubeView;
+  anyAxes: boolean;
+  constructor(session: SessionService,
+    viewRef: DocumentViewRef<Options>,
+    service: CubeService,
+    private _popup: Popup,
+    private _router: RouterImpl,
+    private _guide: GuideService) {
+    super(viewRef, service, session, true);
+  }
+  onViewBind() {
+    const { view } = this._viewRef.options;
+
+    this.view = this.cube.views.find(v => v.name === view) || this.cube.views[0];
+
+    this._service.patterns(this.cube.name).subscribe(p => this.patterns = p);
+
+    const keys = Object.keys(this.axes);
+
+    this.anyAxes = this.cube.axes.some(a => keys.indexOf(a.name) < 0 && !a.hidden && a.selectionMode !== 'None');
+  }
+  ngOnInit(): void {
+    this._viewRef.resize.subscribe(() => this.viewPane && this.viewPane.resize());
+  }
+  filterToggle(evt: Event) {
+    const popupRef = this._popup.open(CubeFilterComponent, evt.currentTarget as HTMLElement);
+    popupRef.opened.
+      subscribe(e => {
+        e.cube = this.cube.name;
+        e.axes = this.axes;
+        e.exclude = [...this.view.xAxis, ...this.view.series];
+        e.include = this._viewRef.options.filters;
+        e.axesChange.pipe(takeUntil(popupRef.closed)).subscribe(axes => {
+          this.axes = axes
+          this.anyFilters = true;
+        });
+      });
+  }
+  /**
+   *
+   * @param evt
+   */
+  explore(evt: AxisClickEvent) {
+    const { axes, index } = evt;
+    this._router.navigate(['cube', this.cube.name, 'explore'],
+      {
+        queryParams: axes,
+        state: { index }
+      });
+  }
+  patternChange(pattern: Pattern) {
+    this.pattern = pattern;
+    const axes = {
+      ...pattern.axes
+    };
+    this._service.base(this.cube.name, axes, this.originalAxes);
+    this.anyFilters = true;
+    this.axes = axes;
+  }
+  clearFilter() {
+    this.axes = this.aggregate(this.originalAxes);
+    this.anyFilters = false;
+    this.pattern = null;
+  }
+  guide(evt?: Event) {
+    if (this.view.guide) {
+      this._guide.start(this.view.guide);
+      evt && evt.preventDefault();
+    }
+  }
+}
+
+interface Options {
+  view: string;
+  aggregate?: string[];
+  filters?: string[];
+}

package/src/lib/views/document-view-ref.ts

@@ -0,0 +1,34 @@
+import { HttpClient } from "@angular/common/http";
+import { BehaviorSubject, Observable } from "rxjs";
+import { Dimentions, DocumentModel, View } from "../core/models";
+
+export class DocumentViewRef<O = any, A = any, R = any> {
+  hidden: boolean;
+  public get model(): DocumentModel {
+    return this._model;
+  }
+
+  _resize: BehaviorSubject<Dimentions>;
+  constructor(
+    private _http: HttpClient,
+    private _model: DocumentModel,
+    private _view: View,
+    dim: Dimentions) {
+    this._resize = new BehaviorSubject(dim);
+  }
+  populate(params: A) {
+    return this._http.get<R>('/api/view/' + this._view.name, { params: params as any });
+  }
+  get options(): O {
+    return this._view.options || {};
+  }
+  get name(): string {
+    return this._view.name;
+  }
+  get resize(): Observable<Dimentions> { return this._resize.asObservable(); }
+  get dimentions(): Dimentions { return this._resize.value; }
+  _destroy() {
+    this._resize.complete();
+  }
+
+}