@bizdoc/core 1.8.5 → 1.8.9

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

@@ -0,0 +1,209 @@
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
+import { AxisSettingsModel, SparklineBorderModel, IPointRegionEventArgs, LineSettingsModel, SparklineMarkerSettingsModel, SparklineTooltipSettingsModel, SparklineType } from '@syncfusion/ej2-angular-charts';
+import { debounceTime, skip, Subject, takeUntil } from 'rxjs';
+import { BizDoc } from '../../core/decorators';
+import { PromptService } from '../../core/prompt.service';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { AXES_CODE_DIVIDER, CubeService, ScopeType, Series } from '../../cube/cube.service';
+import { DocumentViewRef } from '../document-view-ref';
+import { CubeBase } from './cube-base';
+import { FONT_FAMILY } from '../../core/colors';
+import { isArray } from '../../core/functions';
+
+class Item {
+  markerSettings: SparklineMarkerSettingsModel;
+  readonly tooltipSettings: SparklineTooltipSettingsModel = {
+    visible: true,
+    format: '${name} : ${y}',
+    trackLineSettings: {
+    },
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  border: SparklineBorderModel;
+  constructor(
+    public chartType: SparklineType,
+    public data: Series,
+    public palette: string[],
+    public fill: string
+  ) {
+    switch (chartType) {
+      case 'Area':
+        this.border = {
+          color: fill,
+          width: 2
+        };
+        fill = palette[1];
+        palette = null;
+        break;
+      case 'Line':
+        this.markerSettings = {
+          visible: ['All'],
+          fill
+        };
+        break;
+      case 'Column':
+        break;
+      case 'Pie':
+        break;
+
+      default:
+    }
+  }
+}
+
+@Component({
+  templateUrl: './parallel.component.html',
+  styleUrls: ['parallel.component.scss']
+})
+@BizDoc({
+  selector: 'bizdoc-parallel-view'
+})
+export
+  class CubeParallelViewComponent extends CubeBase<Options> implements OnInit, AfterViewInit, OnDestroy {
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  items: Item[] = [];
+  format: string;
+  readonly axisSettings = {
+    lineSettings: {
+    } as LineSettingsModel,
+  } as AxisSettingsModel;
+  width: string = '150px';
+  readonly enableRtl = this._session.inverse;
+  private _accent = this._session.accentPalette;
+  private _primary = this._session.primeryPalette;
+  private readonly _loading = new Subject<boolean>();
+  private readonly _destroy = new Subject<void>();
+  private _data: Series[];
+  constructor(viewRef: DocumentViewRef<Options>,
+    private _sb: PromptService,
+    private _router: RouterImpl,
+    service: CubeService,
+    session: SessionService) {
+    super(viewRef, service, session);
+  }
+  onViewBind() {
+    const { xAxis, series } = this._viewRef.options;
+    if (!xAxis || !series) throw 'parallel view requires series or xAxis';
+    this.drop(xAxis);
+    this.format = (this.cube.currencyCode ? 'c' : 'n') + + this._service.fractionDigits;
+  }
+  ngOnInit(): void {
+    this._viewRef.resize.subscribe(d => {
+     if(this.items.length) this.width = Math.round(d.width / this.items.length) + 'px'
+    }    );
+    this._loading.pipe(takeUntil(this._destroy), debounceTime(200)).subscribe(ok => this.loading = ok);
+    this._session.themeChange.pipe(takeUntil(this._destroy)).
+      subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this._primary = this._session.primeryPalette;
+        this._accent = this._session.accentPalette;
+        this._draw();
+      });
+  }
+  ngAfterViewInit(): void {
+    this.hasdata && this._initialize();
+  }
+  private _initialize() {
+    this._loading.next(true);
+    const { scope, xAxis, series, indices } = this._viewRef.options;
+
+    const filters = { ...this.axes };
+
+    this._service.series(this.cube.name, xAxis, {
+      series,
+      filters,
+      indices,
+      groupIndices: true,
+      scope
+    }).subscribe(r => {
+      this._data = r;
+      this._draw();
+      if (this.items.length) this.width = Math.max(Math.round(this._viewRef.dimentions.width / this.items.length), 150) + 'px';
+      this._loading.next(false);
+    }, (e: HttpResponse<any>) => {
+      this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+      console.error(e);
+      this._loading.next(false);
+    }
+    );
+  }
+  private _draw() {
+    this.items = [];
+    const colorMap = {};
+    let colorIndex = 0;
+    const { chartType, xAxis, series, indices } = this._viewRef.options;
+
+    let originalXAxis = this.originalAxes[isArray(xAxis) ? xAxis[0] : xAxis] as any, originalSeries = this.originalAxes[isArray(series) ? series[0] : series] as any;
+
+    if (!isArray(originalXAxis))
+      originalXAxis = [originalXAxis];
+    if (!isArray(originalSeries))
+      originalSeries = [originalSeries];
+    let max = 0;
+    this._data.forEach(s => {
+      if (s.points.length < 2)
+        return;
+      const palettes = [];
+      for (var i = 0; i < s.points.length; i++) {
+        let point = s.points[i], color = colorMap[point.x];
+        if (!color) {
+          color = colorMap[point.x] =
+            s.index
+              || (!indices && originalXAxis.indexOf(point.x) > -1
+                && originalSeries.indexOf(s.name) > -1)
+              ? this._primary[colorIndex] : this._accent[colorIndex];
+          colorIndex++;
+        }
+        palettes.push(color);
+        if (point.y > max)
+          max = point.y;
+      }
+      this.items.push(new Item(chartType || 'Pie',
+        s, palettes, s.index ? this._primary[6] :
+        this._accent[6]));
+    });
+    this.axisSettings.maxY = max;
+  }
+
+  /**
+     *
+     * @param evt
+     */
+  private _explore(name: string, x: string, index?: string) {
+    const axes: { [axis: string]: any } = {};
+    let { xAxis, series } = this._viewRef.options;
+    if (!isArray(xAxis)) xAxis = [xAxis];
+    if (!isArray(series)) xAxis = [series];
+    for (let i = 0; i < series.length; i++)
+      axes[series[i]] = name.split(AXES_CODE_DIVIDER)[i];
+    for (let i = 0; i < xAxis.length; i++) {
+      axes[xAxis[i]] = x.split(AXES_CODE_DIVIDER)[i];
+    }
+    this._router.navigate(['cube', this.cube.name, 'explore'],
+      {
+        group: this.group,
+        queryParams: { ...this.axes, ...axes },
+        state: { index }
+      });
+  }
+  sprklineClick(item: Item, evt: IPointRegionEventArgs) {
+    this._explore(item.data.name,
+      item.data.points[evt.pointIndex].x, item.data.index);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+export interface Options {
+  aggregate?: string[];
+  xAxis: string | string[];
+  series?: string | string[];
+  indices?: string | string[];
+  chartType?: SparklineType;
+  scope?: ScopeType;
+}

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

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

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

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { BizDoc } from '../../core/decorators';
+import { ChartType, DocumentModel } from '../../core/models';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { CubeService, ScopeType } 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;
+  scope?: ScopeType;
+}

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

@@ -0,0 +1,86 @@
+<ng-container *ngIf="hasdata">
+  <div class="row toolbar">
+    <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}} <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}}
+        </button>
+      </mat-menu>
+    </ng-container>
+    <span class="divider"></span>
+  </div>
+  <div class="loading-view" *ngIf="loading">
+    <mat-spinner color="accent"></mat-spinner>
+  </div>
+  <!-- levels -->
+  <div class="row">
+    <div *ngIf="prev" class="level prev-level">
+      <div class="level-header row">
+        <mat-icon class="cliclable mat-icon-rtl-mirror" [inline]=true (click)="goprev()" *ngIf="back">keyboard_arrow_left</mat-icon>
+        <div div class="mat-h1 title">
+          {{'PrevLevel'| translate}}
+        </div>
+        <span class="divider"></span>
+        <mat-icon *ngIf="forward" class="cliclable mat-icon-rtl-mirror" [inline]=true (click)="gonext()">keyboard_arrow_right</mat-icon>
+      </div>
+      <ng-container *ngTemplateOutlet="level; context: {use: prev}"></ng-container>
+    </div>
+    <div *ngIf="current" class="level current-level">
+      <div class="level-header row">
+        <div div class="mat-h1 title">
+          {{'CurrentLevel'| translate : primaryAxis.title}}
+        </div>
+        <span class="divider"></span>
+        <mat-icon [matTooltip]="help" *ngIf="help" [inline]="true">help_outline</mat-icon>
+      </div>
+      <ng-container *ngTemplateOutlet="level; context: {use: current}"></ng-container>
+    </div>
+    <div *ngIf="next" class="level next-level">
+      <div class="level-header">
+        <div div class="mat-h1 title">
+          {{'NextLevel'| translate}}
+        </div>
+      </div>
+      <ng-container *ngTemplateOutlet="level; context: {use: next}"></ng-container>
+    </div>
+  </div>
+</ng-container>
+<!-- level -->
+<ng-template #level let-use="use" let-help="help">
+  <div>
+    <h2 class="mat-h1" [class.cliclable]="use.value !== 0" (click)="explore(use)">{{use.title}}</h2>
+    <div class="row">
+      <h3 class="mat-h1" [class.cliclable]="use.value !== 0" (click)="explore(use)">{{use.value | currency : currencyCode : 'symbol' : digitsInfo}}</h3>
+      <span class="divider"></span>
+      <div *ngIf="use.chain && use.value !== use.chain.value">
+        <span *ngIf="use.value !== 0 && use.chain.value !== 0">{{Math.round(use.value / use.chain.value * 100) }}%</span>
+        <mat-icon>{{use.value > use.chain.value ? 'trending_up':'trending_down' }}</mat-icon>
+      </div>
+    </div>
+  </div>
+  <!-- -->
+  <div class="row">
+    <div *ngFor="let i of use.indices" class="index">
+      <h4 class="mat-h3 title">{{i.title}}</h4>
+      <h5 class="mat-h3" [class.cliclable]="i.value !== 0" (click)="explore(use, i.name)">{{i.value | currency : currencyCode : 'symbol' : digitsInfo}}</h5>
+    </div>
+  </div>
+  <div class="bar" *ngIf="use.indices.length" [class.available]="use.percent < 100">
+    <div class="value" [style.flexBasis]="Math.round(use.percent < 100 ?
+            100 - use.percent :
+            100 / use.percent * 100) + '%'"
+         [@bar]="use.animation"></div>
+    <div class="overflow" *ngIf="use.percent > 0"></div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,94 @@
+:host {
+  padding: 0 8px;
+}
+
+.level {
+  border-width: thin;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  padding: 8px;
+  margin: 3px;
+  -ms-flex: 1 1 0;
+  -webkit-flex: 1 1 0;
+  flex: 1 1 0;
+  border-style: solid;
+
+  .cliclable {
+    cursor: pointer;
+  }
+
+  &.current-level {
+  }
+
+  &.next-level {
+    border-style: dashed;
+  }
+
+  .level-header {
+    align-items: center;
+
+    .title {
+      margin: 0;
+      line-height: 22px;
+      font-size: inherit;
+      font-variant-caps: all-petite-caps
+    }
+  }
+
+
+  h3 {
+    margin: 0;
+    font-size: x-large;
+  }
+
+  h2 {
+    font-weight: 400;
+    font-size: larger;
+    margin: 0;
+  }
+
+  .percent {
+    display: flex;
+    align-items: center;
+  }
+
+  .index {
+    padding: 0 4px;
+
+    h5 {
+      margin: 0
+    }
+
+    h4 {
+      margin: 0
+    }
+  }
+
+  .bar {
+    display: flex;
+
+    .value, .overflow {
+      height: 12px;
+    }
+
+    .value {
+      flex: 0 0 0%;
+    }
+
+    .overflow {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+
+    &.available {
+      .value {
+      }
+
+      .overflow {
+        border-width: 1px;
+        border-style: dashed;
+      }
+    }
+  }
+}