@bizdoc/core 1.14.5 → 1.14.9

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

@@ -0,0 +1,34 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button (click)="table.refresh()" [bizdocTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <button mat-icon-button [bizdocTooltip]="'Download' | translate"
+          data-help="download" (click)="matrix.export()">
+    <mat-icon>save_alt</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" [bizdocTooltip]="'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 [cube]="cube" [xAxis]="xAxis" [series]="series" [indices]="indices" [sum]=sum
+                    [filters]="axes" #matrix
+                    [xAxisTotalLabel]="xAxisTotalLabel"
+                    [seriesTotalLabel]="seriesTotalLabel"
+                    [placeAt]="placeAt"
+                    [indexAt]="indexAt"
+                    (loadingChange)="loading = $event" (explore)='explore($event)'></bizdoc-cube-matrix>

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

@@ -0,0 +1,10 @@
+:host {
+  min-width: 450px;
+}
+:host ::ng-deep .cube-table {
+  /*padding-right: 14px;*/
+}
+:host ::ng-deep .cube-table thead {
+    position: sticky;
+    top: 0;
+}

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

@@ -0,0 +1,83 @@
+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';
+import { TranslateService } from '../../core/translate.service';
+import { AxisClickEvent } from '../declarations';
+import { SumSettings } from './table.component';
+
+@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, Data>,
+    private _router: PanesRouter,
+    private _translate: TranslateService,
+    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._translate.get('Matrix');
+      this._pane.group = this.configuration.title;
+      if (this.configuration.icon)
+        this._pane.icon = this.configuration.icon;
+      this.xAxis = p['xAxis'];
+      this.series = p['series'];
+    });
+    this._pane.dataChange.subscribe(d => {
+      this.indices = d['indices'];
+      /** */
+      this.aggregation = d['aggregate'];
+      this.sum = d['sum'];
+      this.placeAt = d['placeAt'];
+      this.indexAt = d['indexAt'];
+      this.selection = d['filters'];
+      this.xAxisTotalLabel = d['xAxisTotalLabel'];
+      this.seriesTotalLabel = d['seriesTotalLabel'];
+    });
+    this._pane.queryParamsChange.subscribe(p =>
+      this.originalAxes = this.axes = p
+    );
+  }
+  onFilter(queryParams: AxesMap) {
+    this._router.navigate([], {
+      queryParams,
+      policy: OpenPolicy.Tab | OpenPolicy.Expandable
+    });
+  }
+  explore(evt: AxisClickEvent) {
+    const { axes: queryParams, index } = evt;
+    this._router.navigate(['cube', this.cube, 'explore'], {
+      queryParams,
+      policy: OpenPolicy.Tab | OpenPolicy.Expandable | OpenPolicy.Dismissable,
+      state: { index }
+    });
+  }
+}
+interface Data {
+  indices: string | string[];
+  /** */
+  aggregation: string[];
+  sum: SumSettings | SumSettings[];
+  indexAt?: 'series' | 'xAxis';
+  placeAt?: 'leading' | 'trailing';
+  selection?: string | string[];
+  xAxisTotalLabel?: string;
+  seriesTotalLabel?: string;
+}

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

@@ -0,0 +1,32 @@
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<div class="container">
+  <div class="row" *ngIf="!preloading && (patterns?.length || filters?.length)">
+    <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" [bizdocTooltip]="'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 [cube]="cube" [xAxis]="xAxis" [series]="series" [indices]="indices"
+                      [sum]=sum [interactive]="false"
+                      [xAxisTotalLabel]="xAxisTotalLabel"
+                      [seriesTotalLabel]="seriesTotalLabel"
+                      [placeAt]="placeAt"
+                      [indexAt]="indexAt"
+                      [filters]="axes" (loadingChange)="loading=$event"></bizdoc-cube-matrix>
+</div>

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

@@ -0,0 +1,7 @@
+.container {
+  padding: 8px
+}
+
+::ng-deep .cube-table {
+  display: inline;
+}

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

@@ -0,0 +1,55 @@
+import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { filter, first } from 'rxjs';
+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 { CubeMatrixComponent } from './table.component';
+import { POPUP_DATA } from '../../core/popup/popup.component';
+import { PopupRef } from "../../core/popup/popup-ref";
+import { CubeMatrixBase } from './matrix.base';
+
+/** cube matrix component*/
+@Component({
+  templateUrl: './popup.component.html',
+  styleUrls: ['./popup.component.scss']
+})
+export class CubeMatrixPopupComponent extends CubeMatrixBase implements OnInit {
+  @ViewChild(CubeMatrixComponent, { static: true }) table: CubeMatrixComponent;
+  preloading = true;
+  /** filters */
+
+  /** cube-info ctor */
+  constructor(
+    @Inject(PopupRef) private _ref: PopupRef,
+    @Inject(POPUP_DATA) data: CubeData,
+    service: CubeService,
+    ds: DatasourceService,
+    session: SessionService) {
+    super(service, ds, session);
+    if (!data.options)
+      throw 'no data options';
+    const { axes: base, options: { seriesTotalLabel, indices, xAxis, series, filters, cube, sum, indexAt, xAxisTotalLabel, placeAt } } = data;
+    this.cube = cube;
+    this.series = series;
+    this.xAxis = xAxis;
+    this.sum = sum;
+    this.indices = indices;
+    this.selection = filters;
+    this.axes = base;
+    this.xAxisTotalLabel = xAxisTotalLabel;
+    this.seriesTotalLabel = seriesTotalLabel;
+    this.indexAt = indexAt;
+    this.placeAt = placeAt;
+    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();
+      });
+  }
+}

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

@@ -0,0 +1,46 @@
+<table #table class="mat-table cube-table" (mouseleave)="_move(-1, -1)" *ngIf="data">
+  <thead>
+    <!-- headers -->
+    <tr class="mat-header-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 class="mat-header-cell">{{xAxisTotalLabel}}</th>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- rows -->
+    <tr *ngFor="let row of rows; let y = index" class="mat-row"
+        [class.cube-index]="row.index">
+      <th class="mat-header-cell" (mouseenter)="_move(-2, y )">{{ row.value }}</th>
+      <td *ngFor="let column of columns; let x = index" class="mat-cell figure"
+          (mouseenter)="_move(x + 1, y )">
+        <span *ngIf="data[row.key][column.key] !== '0'; else zero" 
+          [class.explorable]="interactive && column.explorable !== false && row.explorable !== false"
+          (click)="explore(column, row)">
+          {{ data[row.key][column.key] }}
+        </span>
+      </td>
+      <th class="mat-cell figure" (mouseenter)="_move(-1, y )">
+        {{ data[row.key]['_total'] }}
+      </th>
+    </tr>
+  </tbody>
+  <tfoot>
+    <!-- footer -->
+    <tr class="mat-footer-row">
+      <td class="mat-footer-cell">{{seriesTotalLabel}}</td>
+      <td *ngFor="let column of columns; let x = index" class="mat-footer-cell figure"
+          (mouseenter)="_move(x + 1, -2)"
+          [class.negative-figure]="totals[column.key].startsWith('-')">
+        <ng-container *ngIf="totals[column.key] !== undefined">
+          {{ totals[column.key] }}
+        </ng-container>
+      </td>
+      <th class="mat-footer-cell figure">{{ totals['_grand'] }}</th>
+    </tr>
+  </tfoot>
+</table>
+<ng-template #zero>0</ng-template>

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

@@ -0,0 +1,25 @@
+.explorable {
+  cursor: pointer
+}
+
+.cube-table {
+  width: 100%;
+  /*border-collapse: collapse;*/
+  table-layout: fixed;
+
+  th {
+    cursor: default;
+
+    &.figure {
+      font-weight: 500;
+    }
+  }
+
+  td, th {
+    padding-right: 8px;
+  }
+
+  tfoot tr td {
+    border-bottom: none
+  }
+}