@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,344 @@
+import { Component, Output, EventEmitter, ElementRef, HostBinding, Input, OnInit, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
+import { Chart, SeriesModel, CrosshairSettingsModel } from '@syncfusion/ej2-charts';
+import { AxisModel, ChartAreaModel, TooltipSettingsModel, LegendSettingsModel, IPointEventArgs, ITooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Internationalization } from '@syncfusion/ej2-base';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Workbook } from '@syncfusion/ej2-excel-export';
+import { Worksheet } from '@syncfusion/ej2-excel-export/src/worksheet';
+import { Row } from '@syncfusion/ej2-excel-export/src/row';
+import { Column } from '@syncfusion/ej2-excel-export/src/column';
+import { FONT_FAMILY } from '../../core/colors';
+import { AXES_CODE_DIVIDER, AXES_LABEL_DIVIDER, CubeService, errResource, Series } from '../cube.service';
+import { AxisClickEvent, CubeViewerComponent } from "../declarations";
+import { AxesMap, ChartType, Cube, YAxis } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { SessionService } from '../../core/session.service';
+import { TranslateService } from '../../core/translate.service';
+import { isArray } from '../../core/functions';
+import { ScopeType } from '../../core/configuration';
+
+@Component({
+  selector: 'bizdoc-cube-chart',
+  template: '',
+  host: {
+    class: 'cube-view'
+  }
+})
+/** chart component*/
+export class CubeChartComponent implements OnInit, OnChanges, OnDestroy, CubeViewerComponent {
+  @Input()
+  width: string | number;
+  @Input()
+  height: string | number;
+  @Input()
+  cube!: string;
+  private _xAxis: string[];
+  private _cube: Cube;
+  public get xAxis(): string[] | string {
+    return this._xAxis;
+  }
+  @Input()
+  public set xAxis(value: string[] | string) {
+    this._xAxis = isArray(value) ? value : [value];
+  }
+  private _series?: string[];
+  public get series(): string[] | string {
+    return this._series;
+  }
+  @Input()
+  public set series(value: string[] | string) {
+    if (value) this._series = isArray(value) ? value : [value];
+    else this._series = null;
+  }
+  private _indices?: string[];
+  public get indices(): string[] | string {
+    return this._indices;
+  }
+  @Input()
+  public set indices(value: string[] | string) {
+    if (value) this._indices = isArray(value) ? value : [value];
+    else this._indices = null;
+  }
+  @Input()
+  filters?: AxesMap;
+  @Input()
+  yAxis?: YAxis;
+  @Input()
+  chartType?: ChartType;
+  @Input()
+  indicesChartType?: ChartType;
+  @Input() scope: ScopeType;
+  currencyCode: string;
+  @Output() readonly explore: EventEmitter<AxisClickEvent> = new EventEmitter();
+  @Input() loading: boolean;
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  static nextId = 0;
+  @HostBinding()
+  readonly id = `cube-chart-${CubeChartComponent.nextId++}`;
+  chart: Chart;
+  private _palettes = this._session.accentPalette;
+  public get palettes() {
+    return this._palettes;
+  }
+  @Input()
+  public set palettes(value) {
+    this._palettes = value;
+  }
+  readonly enableRtl = this._session.inverse;
+  readonly legendSettings: LegendSettingsModel = {
+    isInversed: this.enableRtl,
+    margin: {
+      top: 5
+    },
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly primaryXAxis: AxisModel = {
+    valueType: 'Category',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly primaryYAxis: AxisModel = {
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly chartArea: ChartAreaModel = {
+    border: {
+      width: 0
+    },
+    opacity: 0
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true,
+    enableAnimation: false,
+    border: { width: 0 },
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly crosshair: CrosshairSettingsModel = {
+    enable: false,
+    lineType: 'Vertical'
+  };
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  private _data: Series[];
+  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 _session: SessionService, private _elementRef: ElementRef) {
+    _session.themeChange.pipe(takeUntil(this._destroy)).
+      subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this.palettes = _session.accentPalette;
+        this._draw();
+      });
+  }
+  ngOnInit() {
+    this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
+    this.currencyCode = this._cube.currencyCode;
+    if (this.chartType === 'Line' || this.chartType === 'Spline')
+      this.crosshair.enable = true;
+    if (this._cube.yAxis) {
+      switch (this._cube.yAxis.type) {
+        case 'Number':
+          this.primaryYAxis.labelFormat = 'n0';
+          break;
+        case 'None':
+          this.primaryYAxis.maximumLabels = 0;
+          break;
+        default:
+          this.primaryYAxis.labelFormat = 'c0';
+          break;
+      }
+      this.primaryYAxis.title = this._cube.yAxis.title;
+    }
+    else
+      this.primaryYAxis.labelFormat = this.currencyCode ? 'c0' : 'n0';
+    this.execute();
+  }
+  /**
+   * 
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'] && !changes['filters'].firstChange)
+      this.execute();
+    else
+      if (changes['height'])
+        this.resize();
+  }
+  resize() {
+    this.chart && this.chart.chartResize();
+  }
+
+  execute() {
+    this.loadingChange.emit(true);
+    this._service.series(this.cube, this.xAxis, {
+      indices: this.indices, series: this.series,
+      filters: this.filters,
+      scope: this.scope
+    }).subscribe(r => {
+      this._data = r;
+      this._draw();
+      this.loadingChange.emit(false);
+    }, (e: HttpErrorResponse) => {
+      this._sb.error(errResource(e));
+      this.loadingChange.emit(false);
+    }
+    );
+  }
+  /** */
+  private _draw() {
+    const series = this._data.map(s => {
+      if (s.index)
+        return {
+          xName: 'name',
+          yName: 'y',
+          name: s.title,
+          dataSource: s.points,
+          type: this.indicesChartType || 'Spline',
+          width: 2,
+          fill: this._session.getPrimery(),
+          stackingGroup: 'index',
+          emptyPointSettings: { mode: 'Zero' },
+          marker: {
+            visible: !this.indicesChartType || this.indicesChartType === 'Line' || this.indicesChartType === 'Spline',
+            shape: 'Diamond',
+            height: 10,
+            width: 10
+          }
+        } as SeriesModel;
+      else return {
+        xName: 'name',
+        yName: 'y',
+        name: s.title,
+        dataSource: s.points,
+        type: this.chartType || 'Column',
+        marker: {
+          visible: !this.chartType || this.chartType === 'Line' || this.chartType === 'Spline',
+          height: 10,
+          width: 10
+        }
+      } as SeriesModel;
+    });
+    this.legendSettings.visible = series.length > 1;
+    this.chart && this.chart.destroy();
+    this.chart = new Chart({
+      legendSettings: this.legendSettings,
+      primaryXAxis: this.primaryXAxis,
+      primaryYAxis: this.primaryYAxis,
+      enableExport: true,
+      background: 'transparent',
+      theme: this.theme,
+      useGroupingSeparator: true,
+      palettes: this.palettes,
+      currencyCode: this.currencyCode,
+      tooltipRender: this.tooltipRender.bind(this),
+      selectionMode: 'Point',
+      pointClick: this.pointClick.bind(this),
+      tooltip: this.tooltip,
+      chartArea: this.chartArea,
+      width: '100%',
+      height: this.height as string,
+      crosshair: this.crosshair,
+      enableRtl: this.enableRtl,
+      series,
+    }, this._elementRef.nativeElement);
+  }
+  tooltipRender(e: ITooltipRenderEventArgs): void {
+    e.text = this._intl.formatNumber(e.point.y as number, {
+      currency: this.currencyCode,
+      format: this.currencyCode ? 'c' : 'n',
+      maximumFractionDigits: this._service.fractionDigits
+    });
+  };
+  pointClick(evt: IPointEventArgs) {
+    const axes: { [axis: string]: any } = {},
+      serie = this._data[evt.seriesIndex],
+      { index, name, points } = serie;
+    if (this.series && this.series.length && !index)
+      for (let i = 0; i < this.series.length; i++)
+        axes[this.series[i]] = name.split(AXES_CODE_DIVIDER)[i];
+    for (let i = 0; i < this.xAxis.length; i++) {
+      const x = points[evt.pointIndex].x;
+      axes[this.xAxis[i]] = x.split(AXES_CODE_DIVIDER)[i];
+    }
+    this.explore.emit({ axes, index });
+  }
+  exportToExcel(title: string) {
+    const
+      numberFormat = this._service.numberFormat,
+      worksheets = [];
+    this._data.forEach(s => {
+      const cells = this._xAxis.map((x, i) => ({
+        index: i + 1,
+        value: this._cube.axes.find(a => a.name === x).title,
+        style: {
+          bold: true
+        }
+      } as Cell));
+      cells.push({
+        index: this._xAxis.length + 1,
+        value: this._translate.get('Value'),
+        style: {
+          bold: true
+        }
+      } as Cell);
+      const rows = [{
+        index: 1,
+        cells
+      } as Row];
+      s.points.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)
+      })
+      worksheets.push(
+        {
+          enableRtl: this.enableRtl,
+          name: s.title,
+          columns: [...this._xAxis.map((_, i) => ({ index: i + 1, width: 250 } as Column))
+            , { index: this._xAxis.length + 1 },
+          ],
+          rows
+        } as Worksheet
+      );
+    });
+    const book = new Workbook(
+      {
+        worksheets,
+      },
+      'xlsx'
+    );
+    book.save(`${title}.xlsx`);
+  }
+  ngOnDestroy(): void {
+    this.chart && this.chart.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Cell { }

package/src/lib/cube/cube-info.service.ts

@@ -0,0 +1,135 @@
+import { Injectable, ElementRef } from "@angular/core";
+import { ComponentType } from "@angular/cdk/portal";
+import { isArray } from "../core/functions";
+import { Cube, AxesMap } from "../core/models";
+import { SessionService } from "../core/session.service";
+import { CubeMatrixPopupComponent } from "./matrix/popup.component";
+import { BizDocComponentFactoryResolver } from "../core/component-factory-resolver";
+import { CubeService } from "./cube.service";
+import { Popup } from "../core/popup/popup.service";
+import { RouterImpl } from "../core/router";
+import { SumSettings } from "./matrix/table.component";
+import { ScopeType } from "../core/configuration";
+
+export interface CubeData {
+  axes: AxesMap;
+  options?: CubeDataOptions;
+}
+
+export interface CubeDataOptions {
+  cube?: string;
+  /** columns axes */
+  xAxis: string;
+  /** rows axes */
+  series: string;
+  /** one or more index name */
+  indices?: string[] | string;
+  view?: string;
+  /** one or more axis */
+  filters?: string[] | string;
+  /** axes to exclude */
+  aggregate?: string[] | string;
+  /** summary rows / columns */
+  sum?: SumSettings | SumSettings[];
+  seriesTotalLabel?: string;
+  xAxisTotalLabel?: string;
+  indexAt?: 'series' | 'xAxis';
+  placeAt?: 'leading' | 'trailing';
+}
+export interface ExploreOptions {
+  cube?: string;
+  index?: string;
+  scope?: ScopeType;
+  base?: {
+    [axis: string]: (string | number);
+  } | Array<string | number>;
+}
+
+/** opens cube preview and explore */
+@Injectable()
+export class CubeInfo {
+  constructor(private _session: SessionService,
+    private _service: CubeService,
+    private _router: RouterImpl,
+    private _popup: Popup,
+    private _cf: BizDocComponentFactoryResolver) { }
+  navigate(axes: Array<string | number> | { [axis: string]: (string | number) }, options?: CubeDataOptions) {
+    const { cube, view, series, xAxis, filters, aggregate, indices, sum, seriesTotalLabel, xAxisTotalLabel, placeAt, indexAt } = options || {};
+    const ccube = cube ? this._session.profile.cubes.find(c => c.name === cube) : this._session.profile.cubes[0];
+    if (isArray(axes)) axes = this._mapAxes(ccube, axes);
+    if (view)
+      this._router.navigate(['cube', ccube.name, 'v', view], {
+        queryParams: axes
+      });
+    else { 
+      this._router.navigate(['cube', ccube.name, 'i', xAxis, series], {
+        queryParams: axes,
+        state: { indices, aggregate, filters, sum, seriesTotalLabel, xAxisTotalLabel, placeAt, indexAt }
+      });
+    }
+  }
+  /**
+   * 
+   * @param axes
+   * @param options
+   */
+  popup(axes: Array<string | number> | { [axis: string]: (string | number) },
+    element: HTMLElement | ElementRef,
+    options?: CubeDataOptions) {
+    const cube = options && options.cube ? this._session.profile.cubes.find(c => c.name === options.cube) : this._session.profile.cubes[0];
+    const { template } = cube;
+    if (isArray(axes)) axes = this._mapAxes(cube, axes);
+    if (template) {
+      const comp = this._cf.component(template);
+      this._open(comp, element, {
+        axes,
+        options
+      } as any);
+    }
+    else {
+      if (!options)
+        throw 'no options';
+      this._open(CubeMatrixPopupComponent, element, {
+        axes,
+        options
+      } as any);
+    }
+  }
+  /**
+   * 
+   * @param axes
+   * @param options
+   */
+  explore(axes: AxesMap | Array<string | number>,
+    options?: ExploreOptions) {
+    const { index, base, cube: name, scope } = options || {};
+    const cube = name ? this._session.profile.cubes.find(c => c.name === name) : this._session.profile.cubes[0];
+
+    if (isArray(axes)) axes = this._mapAxes(cube, axes as Array<string | number>);
+
+    base && this._service.base(cube.name, axes, base);
+
+    this._router.navigate(['cube', cube.name, 'explore'], {
+      queryParams: axes,
+      state: {
+        index, scope
+      }
+    })
+  }
+  /**
+   * axes as map
+   * @param cube
+   * @param axes
+   */
+  private _mapAxes(cube: Cube, axes: (string | number)[]): { [axis: string]: string | number } {
+    const filters = {};
+    axes.forEach((a, i) => a && cube.axes.length > i && (filters[cube.axes[i].name] = a));
+    return filters;
+  }
+
+  private _open(comp: ComponentType<any>, element: HTMLElement | ElementRef, data: CubeData) {
+    this._popup.open(comp, element, {
+      data
+    })
+  }
+}

package/src/lib/cube/cube-menu.component.html

@@ -0,0 +1,13 @@
+<!--<span class="mat-subheader">BizDoc</span>
+<h1 class="mat-display-1">{{'Cube'| translate}}</h1>-->
+<!--<lottie name="lf30_editor_qr7zgmcs"></lottie>-->
+<mat-nav-list>
+  <ng-container *ngFor="let c of cubes; let first = first">
+    <mat-divider *ngIf="!first"></mat-divider>
+    <h3 matSubheader *ngIf="!collapsed">{{c.title}}</h3>
+    <mat-list-item *ngFor="let v of c.views" (click)="change.emit()" [slotRouterLink]='["cube", c.name, "v", v.name]' slotRouterLinkActive="active">
+      <mat-icon matListIcon [bizdocTooltip]="v.title" bizdocTooltipPosition="end" [bizdocTooltipDisabled]="!collapsed">{{v.icon || 'insights'}}</mat-icon>
+      <span matLine>{{v.title}}</span>
+    </mat-list-item>
+  </ng-container>
+</mat-nav-list>

package/src/lib/cube/cube-menu.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Cube } from '../core/models';
+import { SessionService } from '../core/session.service';
+
+@Component({
+  selector: 'bizdoc-cube-menu',
+  templateUrl: './cube-menu.component.html',
+  animations: []
+})
+export
+  class CubeMenuComponent {
+  @Input() collapsed: boolean;
+  @Output() readonly change = new EventEmitter();
+  cubes: Cube[];
+  constructor(session: SessionService) {
+    this.cubes = session.profile.cubes.filter(c=> c.views.length);
+  }
+}

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

@@ -0,0 +1,66 @@
+<ng-container [ngSwitch]="view.type">
+  <bizdoc-cube-pivot *ngSwitchCase="'Pivot'" #instance
+                     [series]="view.series" [indices]="view.indices"
+                     [cube]="cube.name"
+                     [xAxis]="view.xAxis"
+                     [currencyCode]="cube.currencyCode"
+                     [filters]="filters"
+                     [chartType]="view.chartType"
+                     [indicesChartType]="view.indicesChartType"
+                     [yAxis]="cube.yAxis"
+                     (loading)="loading($event)"
+                     (explore)="explore($event)"
+                     [width]="(dim.width - 4)+'px'">
+  </bizdoc-cube-pivot>
+  <bizdoc-cube-grid *ngSwitchCase="'Grid'" #instance
+                    [cube]="cube.name"
+                    [xAxis]="view.xAxis"
+                    [currencyCode]="cube.currencyCode"
+                    [series]="view.series"
+                    [filters]="filters"
+                    [indices]="view.indices"
+                    (loading)="loading($event)"
+                    (explore)="explore($event)"
+                    [width]="(dim.width - 4)+'px'">
+  </bizdoc-cube-grid>
+  <bizdoc-cube-spreadsheet *ngSwitchCase="'Spreadsheet'" #instance
+                           [cube]="cube.name"
+                           [xAxis]="view.xAxis"
+                           [filters]="filters"
+                           (loading)="loading($event)"
+                           (explore)="explore($event)"
+                           [currencyCode]="cube.currencyCode"
+                           [yAxis]="cube.yAxis"
+                           [series]="view.series"
+                           [indices]="view.indices"
+                           [width]="dim.width+'px'"
+                           [height]="dim.height+'px'">
+  </bizdoc-cube-spreadsheet>
+  <ng-container *ngSwitchDefault>
+    <ng-container [ngSwitch]="isAccum">
+      <bizdoc-cube-accum *ngSwitchCase="true" #instance
+                         [cube]="cube.name"
+                         [xAxis]="view.xAxis"
+                         [filters]="filters"
+                         [chartType]="view.chartType"
+                         (loading)="loading($event)"
+                         (explore)="explore($event)"
+                         [currencyCode]="cube.currencyCode"
+                         [height]="dim.height+'px'">
+      </bizdoc-cube-accum>
+      <bizdoc-cube-accum *ngSwitchDefault #instance
+                         [cube]="cube.name"
+                         [xAxis]="view.xAxis"
+                         [series]="view.series"
+                         [indices]="view.indices"
+                         [filters]="filters"
+                         [chartType]="view.chartType"
+                         [indicesChartType]="view.indicesChartType"
+                         (loading)="loading($event)"
+                         (explore)="explore($event)"
+                         [currencyCode]="cube.currencyCode"
+                         [height]="dim.height+'px'">
+      </bizdoc-cube-accum>
+    </ng-container>
+  </ng-container>
+</ng-container>