@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/cube/matrix/matrix.base.ts

@@ -0,0 +1,156 @@
+import { Directive, ViewChild } from '@angular/core';
+import { filter, first, Observable } from 'rxjs';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { ACCOUNT_DELIMITER, CubeService, Pattern } from '../cube.service';
+import { AxesMap, Cube, CubeAxis } from '../../core/models';
+import { isArray } from '../../core/functions';
+import { CubeMatrixTableComponent } from './table.component';
+
+@Directive()
+export abstract class CubeMatrixBase {
+  @ViewChild(CubeMatrixTableComponent, { static: true }) table: CubeMatrixTableComponent;
+  loading: boolean;
+  private _axes: AxesMap;
+  private _originalAxes: AxesMap;
+  public set originalAxes(value: AxesMap) {
+    this._originalAxes = { ...value };
+  }
+  public get originalAxes(): AxesMap {
+    return this._originalAxes;
+  }
+  public get axes(): AxesMap {
+    return this._axes;
+  }
+  public set axes(value: AxesMap) {
+    this._axes = value;
+    this.filters && this.filters.forEach(f =>
+      this.values[f.name] = value[f.name]
+    );
+  }
+  title: string;
+
+  readonly sources: { [axis: string]: Observable<{ key: string; value: any; }[]>; } = {};
+  /** filters */
+  readonly values: { [axis: string]: string | number | Array<string | number>; } = {};
+  filters: CubeAxis[];
+  patterns: Pattern[];
+  pattern: Pattern;
+  indices?: string | string[];
+  xAxis: string;
+  serie: string;
+  private _cube: string;
+  public get cube(): string {
+    return this._cube;
+  }
+  public set cube(value: string) {
+    this.configuration = this._session.profile.cubes.find(c => c.name === value);
+    if (!this.configuration) {
+      this.configuration = this._session.profile.cubes[0];
+      value = this.configuration.name;
+    }
+    this._service.patterns(value).
+      subscribe(p =>
+        this.patterns = p);
+    this._cube = value;
+  }
+  sum?: {
+    xAxis?: string | number;
+    serie?: string | number;
+    title: string;
+  };
+  /** one or more axis */
+  protected aggregation?: string[] | string;
+  private _selection: string | string[];
+  protected get selection(): string | string[] {
+    return this._selection;
+  }
+  protected set selection(value: string | string[]) {
+    /** one or more axis */
+    this.filters = this.configuration.axes.filter(a => isArray(value) ?
+      value.indexOf(a.name) > -1 :
+      a.name === value);
+
+    this.filters.forEach(f => this.sources[f.name] = this._ds.all(f.dataType)
+    );
+    this._selection = value;
+  }
+  configuration: Cube;
+  constructor(
+    protected _service: CubeService,
+    private _ds: DatasourceService,
+    protected _session: SessionService) { }
+  private _populate() {
+    const axes = { ...this._originalAxes };
+    if (this.aggregation)
+      (isArray(this.aggregation) ? this.aggregation : [this.aggregation as string]).
+        forEach(g => {
+          if (axes[g])
+            delete axes[g];
+        });
+    this.axes = axes;
+    this._listen().then(() => {
+      const combination = this._combine(axes);
+      this.title = combination.join(ACCOUNT_DELIMITER);
+    });
+  }
+  /**
+   *
+   * @param axes
+   */
+  private _combine(axes: AxesMap): (string | number)[] {
+    return this.configuration.axes.
+      filter(a => a.combination).
+      map(a => axes[a.name] as string | number);
+  }
+  /**
+ *
+ * @param value
+ */
+  filter(name: string, value: string | number, title: string) {
+    const axes = { ...this.axes };
+    axes[name] = value;
+    this.onFilter(axes);
+    this._listen().then(() =>
+      this.values[name] = value
+    );
+  }
+  private _listen() {
+    return this.table.loadingChange.pipe(filter(ok => !ok), first()).toPromise()
+  }
+
+  onFilter(axes: AxesMap) {
+    this.axes = axes;
+  }
+  /**
+    *
+    * @param pattern
+    */
+  aggregate(pattern: Pattern) {
+    const axes = { ...pattern.axes };
+    this._service.base(this.cube, axes, this.originalAxes);
+    this.axes = { ...axes, ...this.values };
+    this._listen().then(() => {
+      this.title = pattern.title;
+      this.pattern = pattern;
+    });
+  }
+
+  private _copyAxesToFilterValues() {
+    this.filters && this.filters.forEach(f =>
+      this.values[f.name] = this.axes[f.name]
+    );
+  }
+
+  reset() {
+    this._populate();
+    this._listen().then(() => {
+      this.pattern = null;
+      this.title = null;
+    });
+  }
+
+  refresh() {
+    this.axes = { ...this.axes };
+  }
+}

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

@@ -0,0 +1,27 @@
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<div class="container">
+  <div class="row" *ngIf="!preloading">
+    <span class="divider"></span>
+    <!-- title -->
+    <button mat-icon-button [matMenuTriggerFor]="options" *ngIf="patterns && patterns.length"><mat-icon [class.filled]="pattern">filter_alt</mat-icon></button>
+    <mat-menu #options xPosition="before">
+      <!-- patterns -->
+      <button mat-menu-item *ngFor="let p of patterns" (click)="aggregate(p)">{{p.title}}</button>
+    </mat-menu>
+    <button mat-icon-button (click)="reset()" [disabled]="!pattern" [matTooltip]="'Clear' | translate">
+      <mat-icon>clear_all</mat-icon>
+    </button>
+    <!-- filters -->
+    <ng-container *ngFor="let f of filters">
+      <button mat-button [matMenuTriggerFor]="fmenu">{{values[f.name]| typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>
+      <mat-menu #fmenu xPosition="before">
+        <button mat-menu-item *ngFor="let kv of sources[f.name] | async"
+                (click)="filter(f.name, kv.key, kv.value)">
+          {{kv.value}}
+        </button>
+      </mat-menu>
+    </ng-container>
+  </div>
+  <bizdoc-cube-matrix-table [cube]="cube" [xAxis]="xAxis" [serie]="serie" [indices]="indices" [sum]=sum [interactive]="false"
+                            [axes]="axes" [(loading)]="loading"></bizdoc-cube-matrix-table>
+</div>

package/src/lib/cube/matrix/matrix.component.scss

@@ -0,0 +1,3 @@
+.container {
+  padding: 8px
+}

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

@@ -0,0 +1,52 @@
+import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { CubeService } from '../../cube/cube.service';
+import { CubeData } from '../cube-info.service';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { PromptService } from '../../core/prompt.service';
+import { CubeMatrixTableComponent } from './table.component';
+import { POPUP_DATA } from '../../core/popup/popup.component';
+import { PopupRef } from "../../core/popup/popup-ref";
+import { filter, first } from 'rxjs';
+import { CubeMatrixBase } from './matrix.base';
+
+/** cube matrix component*/
+@Component({
+  templateUrl: './matrix.component.html',
+  styleUrls: ['./matrix.component.scss']
+})
+export class CubeMatrixComponent extends CubeMatrixBase implements OnInit {
+  @ViewChild(CubeMatrixTableComponent, { static: true }) table: CubeMatrixTableComponent;
+  preloading: boolean = true;
+  /** filters */
+
+  /** cube-info ctor */
+  constructor(@Inject(PopupRef) private _ref: PopupRef,
+    @Inject(POPUP_DATA) data: CubeData,
+    service: CubeService,
+    ds: DatasourceService,
+    session: SessionService,
+    private _sb: PromptService) {
+    super(service, ds, session);
+    if (!data.options)
+      throw 'no data options';
+    const { axes: base, options: { indices, xAxis, serie, filters, cube, sum } } = data;
+    this.cube = cube;
+    this.serie = serie;
+    this.xAxis = xAxis;
+    this.sum = sum;
+    this.indices = indices;
+    this.selection = filters;
+    this.axes = base;
+    this.originalAxes = base;
+  }
+  ngOnInit(): void {
+    this.table.loadingChange.pipe(filter(ok => !ok), first()).subscribe(() =>
+      this.preloading = false, (e: HttpErrorResponse) => {
+        if (e.status === 401)
+          this._ref.close();
+        this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+      });
+  }
+}

package/src/lib/cube/matrix/matrix.mobile.component.html

@@ -0,0 +1,26 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button (click)="table.refresh()" [matTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button [matMenuTriggerFor]="options" *ngIf="patterns && patterns.length"><mat-icon [class.filled]="pattern">filter_alt</mat-icon></button>
+  <mat-menu #options xPosition="before">
+    <!-- patterns -->
+    <button mat-menu-item *ngFor="let p of patterns" (click)="aggregate(p)">{{p.title}}</button>
+  </mat-menu>
+  <button mat-icon-button (click)="reset()" [disabled]="!pattern" [matTooltip]="'Clear' | translate">
+    <mat-icon>clear_all</mat-icon>
+  </button>
+  <!-- filters -->
+  <ng-container *ngFor="let f of filters">
+    <button mat-button [matMenuTriggerFor]="fmenu">{{values[f.name]| typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>
+    <mat-menu #fmenu xPosition="before">
+      <button mat-menu-item *ngFor="let kv of sources[f.name] | async"
+              (click)="filter(f.name, kv.key, kv.value)">
+        {{kv.value}}
+      </button>
+    </mat-menu>
+  </ng-container>
+</mat-toolbar>
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<bizdoc-cube-matrix-table [cube]="cube" [xAxis]="xAxis" [serie]="serie" [indices]="indices" [sum]=sum
+                        [axes]="axes"
+                        [(loading)]="loading" (explore)='explore($event)'></bizdoc-cube-matrix-table>

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

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { CubeService } from '../cube.service';
+import { AxesMap } from '../../core/models';
+import { WindowTitleService } from '../../core/window-title.service';
+import { CubeMatrixBase } from './matrix.base';
+
+@Component({
+  templateUrl: './matrix.mobile.component.html',
+  styleUrls: ['./matrix.pane.component.scss']
+})
+export class CubeMatrixMobileComponent extends CubeMatrixBase implements OnInit {
+
+  /** cube-info ctor */
+  constructor(
+    private _title: WindowTitleService,
+    private _route: ActivatedRoute,
+    private _router: Router,
+    service: CubeService,
+    ds: DatasourceService,
+    session: SessionService) {
+
+    super(service, ds, session);
+  }
+
+  ngOnInit(): void {
+    this._route.params.subscribe(p => {
+      this.cube = p['id'];
+      this.xAxis = p['xAxis'];
+      this.serie = p['serie'];
+      this._title.set(this.configuration.title);
+    }
+    );
+    this._route.data.subscribe(d => {
+      this.indices = d['indices'];
+      /** */
+      this.aggregation = d['aggregate'];
+      this.sum = d['sum'];
+      this.selection = d['filters'];
+    });
+    this._route.queryParams.subscribe(p => 
+    this.originalAxes = 
+      this.axes = p);
+  }
+
+  onFilter(axes: AxesMap) {
+    this._router.navigate([], { queryParams: axes });
+  }
+
+  explore(axes: AxesMap) {
+    this._router.navigate(['cube', this.cube, 'explore'], {
+      queryParams: axes
+    });
+    }
+}

package/src/lib/cube/matrix/matrix.pane.component.html

@@ -0,0 +1,26 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button (click)="table.refresh()" [matTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button [matMenuTriggerFor]="options" *ngIf="patterns && patterns.length"><mat-icon [class.filled]="pattern">filter_alt</mat-icon></button>
+  <mat-menu #options xPosition="before">
+    <!-- patterns -->
+    <button mat-menu-item *ngFor="let p of patterns" (click)="aggregate(p)">{{p.title}}</button>
+  </mat-menu>
+  <button mat-icon-button (click)="reset()" [disabled]="!pattern" [matTooltip]="'Clear' | translate">
+    <mat-icon>clear_all</mat-icon>
+  </button>
+  <!-- filters -->
+  <ng-container *ngFor="let f of filters">
+    <button mat-button [matMenuTriggerFor]="fmenu">{{values[f.name]| typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>
+    <mat-menu #fmenu xPosition="before">
+      <button mat-menu-item *ngFor="let kv of sources[f.name] | async"
+              (click)="filter(f.name, kv.key, kv.value)">
+        {{kv.value}}
+      </button>
+    </mat-menu>
+  </ng-container>
+</mat-toolbar>
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<bizdoc-cube-matrix-table [cube]="cube" [xAxis]="xAxis" [serie]="serie" [indices]="indices" [sum]=sum
+                        [axes]="axes"
+                        [(loading)]="loading" (explore)='explore($event)'></bizdoc-cube-matrix-table>

package/src/lib/cube/matrix/matrix.pane.component.scss

@@ -0,0 +1,7 @@
+:host {
+  min-width: 450px;
+}
+:host ::ng-deep .cube-table thead {
+    position: sticky;
+    top: 0;
+}

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

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { CubeService } from '../cube.service';
+import { PanesRouter } from '../../core/slots/router.service';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { AxesMap } from '../../core/models';
+import { CubeMatrixBase } from './matrix.base';
+import { OpenPolicy } from '../../core/configuration';
+
+@Component({
+  templateUrl: './matrix.pane.component.html',
+  styleUrls: ['./matrix.pane.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+export class CubeMatrixPaneComponent extends CubeMatrixBase implements OnInit {
+  /** cube-info ctor */
+  constructor(
+    private _pane: PaneRef<CubeMatrixPaneComponent>,
+    private _router: PanesRouter,
+    service: CubeService,
+    ds: DatasourceService,
+    session: SessionService) {
+    super(service, ds, session);
+  }
+
+  ngOnInit(): void {
+    this._pane.paramsChange.subscribe(p => {
+      this.cube = p['cube'];
+      this._pane.title = this._pane.group = this.configuration.title;
+      if (this.configuration.icon)
+        this._pane.icon = this.configuration.icon;
+      this.xAxis = p['xAxis'];
+      this.serie = p['serie'];
+    });
+    this._pane.dataChange.subscribe(d => {
+      this.indices = d['indices'];
+      /** */
+      this.aggregation = d['aggregate'];
+      this.sum = d['sum'];
+      this.selection = d['filters'];
+    });
+    this._pane.queryParamsChange.subscribe(p =>
+    this.originalAxes = 
+      this.axes = p
+    );
+  }
+  onFilter(queryParams: AxesMap) {
+    this._router.navigate([], {
+      queryParams, policy:
+        this._pane.mode ?
+          OpenPolicy.Tab : OpenPolicy.Replace
+    });
+  }
+  explore(queryParams: AxesMap) {
+    this._router.navigate(['cube', this.cube, 'explore'], {
+      queryParams
+    });
+
+  }
+}

package/src/lib/cube/matrix/table.component.html

@@ -0,0 +1,64 @@
+<table #table class="mat-table cube-table" (mouseleave)="move(-1, -1)" *ngIf="data">
+  <thead>
+    <!-- headers -->
+    <tr class="mat-row">
+      <th></th>
+      <th *ngFor="let column of columns; let x = index" (mouseenter)="move(x + 1, -2)" class="mat-header-cell">
+        {{ column.value }}
+      </th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- indices -->
+    <tr class="mat-row cube-index" *ngFor="let index of indexes; let y = index">
+      <th class="mat-header-cell" (mouseenter)="move(0, y)">{{index.title}}</th>
+      <td *ngFor="let column of columns; let x = index" class="mat-cell figure" (mouseenter)="move(x + 1, y)">
+        <span *ngIf="data[index.name] && data[index.name][column.key]; else zero">{{ data[index.name][column.key] | number : PRECISION }}</span>
+      </td>
+      <th class="mat-cell figure" (mouseenter)="move(0, y)" [ngSwitch]="!currency">
+        <ng-container *ngSwitchCase="true">
+          {{ data[index.name]['_total'] | number : PRECISION }}
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          {{ data[index.name]['_total'] | currency : CURRENCY: 'symbol' : PRECISION }}
+        </ng-container>
+      </th>
+    </tr>
+  </tbody>
+  <tbody>
+    <!-- rows -->
+    <tr *ngFor="let row of rows; let y = index" class="mat-row">
+      <th class="mat-header-cell" (mouseenter)="move(-2, y + indices.length)">{{ row.value }}</th>
+      <td *ngFor="let column of columns; let x = index" class="mat-cell figure" (mouseenter)="move(x + 1, y + indices.length)">
+        <ng-container *ngIf="data[row.key] && data[row.key][column.key] !== undefined; else zero">
+          <span [class.clickable]="interactive" (click)="explore(column.key, row.key)">
+            {{data[row.key][column.key] | number : PRECISION }}
+          </span>
+        </ng-container>
+      </td>
+      <th class="mat-cell figure" (mouseenter)="move(-1, y + indices.length)" [ngSwitch]="!currency">
+        <ng-container *ngSwitchCase="true">
+          {{ data[row.key]['_total'] | number : PRECISION }}
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          {{ data[row.key]['_total'] | currency : CURRENCY: 'symbol' : PRECISION }}
+        </ng-container>
+      </th>
+    </tr>
+  </tbody>
+  <tfoot>
+    <!-- available -->
+    <tr>
+      <th></th>
+      <td *ngFor="let column of columns; let x = index" class="mat-cell figure" (mouseenter)="move(x + 1, -2)"
+          [class.negative-figure]="totals[column.key] < 0">
+        {{totals[column.key] | currency : CURRENCY: 'symbol' : PRECISION }}
+      </td>
+      <th class="mat-cell figure">{{totals['_total'] | currency : CURRENCY: 'symbol' : PRECISION }}</th>
+    </tr>
+  </tfoot>
+</table>
+<ng-template #zero>
+  0
+</ng-template>

package/src/lib/cube/matrix/table.component.scss

@@ -0,0 +1,22 @@
+.clickable {
+    cursor: pointer
+}
+
+.cube-table {
+  width: 100%;
+  display: inline-table;
+  border-collapse: collapse;
+
+  th {
+    /*padding: 4px;*/
+    cursor: default;
+
+    &.figure {
+      font-weight: 500;
+    }
+  }
+
+  td {
+    padding-right: 4px;
+  }
+}