@bizdoc/core 1.14.9 → 1.14.10

package/src/lib/cube/view-base.ts

@@ -1,82 +0,0 @@
-import { ViewChild, Directive } from '@angular/core';
-import { AxesMap, Cube, CubeView } from '../core/models';
-import { CubeService, Pattern } from './cube.service';
-import { SessionService } from '../core/session.service';
-import { GuideService } from '../core/guide/guide.service';
-import { CubeViewComponent } from './cube-view.component';
-import { RouterImpl } from '../core/router';
-
-@Directive()
-export abstract class ViewBase {
-  @ViewChild(CubeViewComponent, { static: true }) viewPane: CubeViewComponent;
-  patterns: Pattern[];
-  pattern: Pattern;
-  private _cube: Cube;
-  public get cube(): Cube {
-    return this._cube;
-  }
-  public set cube(value: Cube) {
-    this._cube = value;
-    this._service.patterns(value.name).subscribe(p => this.patterns = p);
-  }
-  private _view: CubeView;
-  public get view(): CubeView {
-    return this._view;
-  }
-  public set view(value: CubeView) {
-    this._view = value;
-    this.exclude = value.series ? [...value.xAxis, ...value.series] : [...value.xAxis];
-    this.anyAxes = this.cube.axes.some(a => this.exclude.indexOf(a.name) < 0 &&
-      !a.hidden &&
-      a.selectionMode !== 'None');
-  }
-  exclude: string[];
-  private _axes: AxesMap = {};
-  public get axes(): AxesMap {
-    return this._axes;
-  }
-  public set axes(value: AxesMap) {
-    this._axes = value;
-    this.anyFilters = Object.keys(value).length > 0;
-  }
-  anyAxes: boolean;
-  anyFilters: boolean;
-  loading: boolean;
-  private _originalAxes: AxesMap;
-  public get originalAxes(): AxesMap {
-    return this._originalAxes;
-  }
-  public set originalAxes(value: AxesMap) {
-    this._originalAxes = value;
-    this.axes = { ...value };
-  }
-
-  constructor(protected _session: SessionService,
-    protected _router: RouterImpl,
-    protected _service: CubeService,
-    private _guide: GuideService) {
-  }
-  patternChange(pattern: Pattern) {
-    this.pattern = pattern;
-    const axes = {
-      ...pattern.axes
-    };
-    this._service.base(this.cube.name, axes, this.originalAxes);
-    this.navigate(axes);
-  }
-  clearFilter() {
-    this.navigate({});
-    this.pattern = null;
-  }
-  navigate(queryParams) {
-    this._router.navigate([], {
-      queryParams
-    });
-  }
-  guide(evt?: Event) {
-    if (this.view.guide) {
-      this._guide.start(this.view.guide);
-      evt && evt.preventDefault();
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-<mat-toolbar class="nav-toolbar">
-  <button mat-icon-button (click)="guide()" [bizdocTooltip]="'Help' | translate" *ngIf="view.guide"><mat-icon>help_outline</mat-icon></button>
-  <button mat-icon-button (click)="viewPane.refresh()" [bizdocTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
-  <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)">
-      <span>{{p.title}}</span>
-    </button>
-  </mat-menu>
-  <button mat-icon-button [matMenuTriggerFor]="menu" [bizdocTooltip]="'Download' | translate" data-help="download"><mat-icon>save_alt</mat-icon></button>
-  <mat-menu #menu>
-    <button mat-menu-item (click)="viewPane.exportToExcel()">{{'DownloadExcel' | translate}}</button>
-    <ng-container *ngIf="mode === 'explore'">
-      <mat-divider></mat-divider>
-      <button mat-menu-item (click)="explorePane.exportExcel()">{{'DownloadExplore' | translate}}</button>
-    </ng-container>
-  </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)="toggleFilter()" [bizdocTooltip]="'Filter' | translate" [disabled]="!anyAxes" data-help="filter"><mat-icon>filter_list</mat-icon></button>
-</mat-toolbar>
-<mat-sidenav-container class="page-container" autosize>
-  <mat-sidenav mode="over" position="end" [opened]="false">
-    <ng-container [ngSwitch]="mode">
-      <bizdoc-cube-explore *ngSwitchCase="'explore'" [cube]="cube.name" [index]="index" [scope]="scope"
-                           (explore)="exploreItem($event)" #explorePane [pageSize]=pageSize [(loading)]="loading"></bizdoc-cube-explore>
-      <bizdoc-cube-item *ngSwitchCase="'item'" [template]="template" [model]="item"></bizdoc-cube-item>
-      <bizdoc-cube-filter *ngSwitchDefault [cube]="cube.name" [axes]="axes" [exclude]="exclude" (axesChange)="filterChange($event)"></bizdoc-cube-filter>
-    </ng-container>
-  </mat-sidenav>
-  <mat-sidenav-content>
-    <bizdoc-cube-view [filters]="axes" #viewPane
-                      (explore)="explore($event)"
-                      [cube]="cube"
-                      [view]="view"
-                      [(loading)]="loading"></bizdoc-cube-view>
-  </mat-sidenav-content>
-</mat-sidenav-container>

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

@@ -1,9 +0,0 @@
-:host ::ng-deep .mat-sidenav-container {
-  .mat-sidenav-content {
-      overflow:hidden
-  }
-}
-
-:host ::ng-deep .e-pivot-context-menu {
-    display:none
-}

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

@@ -1,116 +0,0 @@
-import { Component, OnInit, ViewChild, OnDestroy, HostListener } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatSidenav } from '@angular/material/sidenav';
-import { Subject } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
-import { AxesMap } from '../core/models';
-import { CubeService } from './cube.service';
-import { SessionService } from '../core/session.service';
-import { GuideService } from '../core/guide/guide.service';
-import { WindowTitleService } from '../core/window-title.service';
-import { CubeViewComponent } from './cube-view.component';
-import { ExploreItemEvent, ExploreItemsComponent } from './explore/explore-items.component';
-import { AxisClickEvent } from './declarations';
-import { ViewBase } from './view-base';
-import { RouterImpl } from '../core/router';
-import { PromptService } from '../core/prompt.service';
-import { HttpErrorResponse } from '@angular/common/http';
-
-@Component({
-  templateUrl: './view.mobile.component.html',
-  styleUrls: ['./view.mobile.component.scss']
-})
-/** cube component*/
-export class CubeMobileViewComponent extends ViewBase implements OnInit, OnDestroy {
-  mode: 'filter' | 'explore' | 'item' = 'filter';
-  @ViewChild(CubeViewComponent, { static: true }) viewPane: CubeViewComponent;
-  @ViewChild(MatSidenav, { static: true }) drawer: MatSidenav;
-  @ViewChild(ExploreItemsComponent, { static: true }) explorePane: ExploreItemsComponent;
-  index: string;
-  loading: boolean;
-  template: string;
-  item: any;
-  private _navigating = false;
-  private readonly _destroy = new Subject<void>();
-    pageSize: number;
-  /** cube ctor */
-  constructor(
-    session: SessionService,
-    router: RouterImpl,
-    service: CubeService,
-    guide: GuideService,
-    private _sb: PromptService,
-    private _title: WindowTitleService,
-    private _route: ActivatedRoute) {
-    super(session, router, service, guide);
-    this.resize();
-  }
-  ngOnInit(): void {
-    this._route.params.subscribe(p => {
-      const id = p['id'], viewId = p['view'];
-      if (!this.cube || this.cube.name != id) {
-        this.cube = this._session.profile.cubes.find(c => c.name === id);
-      }
-      this.view = this.cube.views.find(v => v.name === viewId);
-      this._title.set(this.view.title);
-      this.originalAxes = this._route.snapshot.queryParams;
-      this._navigating = true;
-      if (!this.anyAxes && this.drawer.opened)
-        this.drawer.close();
-    });
-    this._route.queryParams.pipe(takeUntil(this._destroy)).subscribe(p => 
-      this.originalAxes = p
-    );
-    this.drawer.openedChange.
-      pipe(filter(() => !this._navigating)).pipe(takeUntil(this._destroy)).subscribe(() =>
-        this.viewPane.resize());
-    this._session.loaded.pipe(takeUntil(this._destroy)).
-      subscribe(() => this.viewPane.refresh());
-    const queryKeys = Object.keys(this._route.snapshot.queryParams);
-    if (queryKeys.length && this.cube.axes.find(a => queryKeys.indexOf(a.name) > -1)) this.drawer.open();
-  }
-  exploreItem(evt: ExploreItemEvent) {
-    const { template, keys } = evt;
-    this.template = template;
-    this.loading = true;
-    this._service.item(this.cube.name, this.axes, keys).subscribe(item => {
-      this.item = item;
-      this.mode = 'item';
-      this.loading = false;
-    }, (e: HttpErrorResponse) => {
-      this.loading = false;
-      this._sb.error(e.status === 401 ? 'Unauthorized' : null);
-    });
-  }
-  toggleFilter() {
-    this.mode = 'filter';
-    this.drawer.toggle();
-  }
-  /**
-   * 
-   * @param evt
-   */
-  explore(evt: AxisClickEvent) {
-    const { axes, index } = evt;
-    this.axes = axes;
-    this.index = index;
-    this.mode = 'explore';
-    if (!this.drawer.opened) {
-      this._navigating = false;
-      this.drawer.open();
-    }
-    else
-      this.viewPane.resize();
-  }
-  @HostListener('window:resize')
-  resize() {
-    this.pageSize = Math.floor((window.innerHeight - 150) / 50);
-  }
-  filterChange(axes: AxesMap) {
-    this.navigate(axes);
-  }
-  ngOnDestroy(): void {
-    this._destroy.next();
-    this._destroy.complete();
-  }
-}

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

@@ -1,24 +0,0 @@
-<mat-toolbar class="nav-toolbar">
-  <button mat-icon-button (click)="guide()" [bizdocTooltip]="'Help' | translate" *ngIf="view.guide"><mat-icon>help_outline</mat-icon></button>
-  <button mat-icon-button (click)="vp.refresh()" [bizdocTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
-  <span class="divider"></span>
-  <button mat-icon-button [bizdocTooltip]="'Download' | translate"
-          data-help="download" (click)="vp.exportToExcel()">
-    <mat-icon>save_alt</mat-icon>
-  </button>
-  <button mat-icon-button [matMenuTriggerFor]="pmenu" [bizdocTooltip]="'Patterns' | translate" [disabled]="!patterns?.length" data-help="pattern"><mat-icon [class.filled]="pattern">tune</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 [class.filled]="anyFilters">filter_list</mat-icon></button>
-</mat-toolbar>
-<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
-<bizdoc-cube-view [filters]="axes" #vp
-                  (explore)="explore($event)"
-                  [cube]="cube"
-                  [view]="view"
-                  [(loading)]="loading"></bizdoc-cube-view>
-<!--<ng-lottie options="{path: 'assets/8318-loader.json'}" *ngIf="loading"></ng-lottie>-->

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

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

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

@@ -1,80 +0,0 @@
-import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
-import { CubeService } from './cube.service';
-import { SessionService } from '../core/session.service';
-import { GuideService } from '../core/guide/guide.service';
-import { CubeViewComponent } from './cube-view.component';
-import { PaneRef } from '../core/slots/pane-ref';
-import { Popup } from '../core/popup/popup.service';
-import { RouterImpl } from '../core/router';
-import { ViewBase } from './view-base';
-import { CubeFilterComponent } from './filter/filter.component';
-import { takeUntil } from 'rxjs';
-import { AxisClickEvent } from './declarations';
-
-@Component({
-  templateUrl: './view.pane.component.html',
-  styleUrls: ['./view.pane.component.scss'],
-  host: {
-    class: 'pane'
-  }
-})
-export
-  class CubeViewPaneComponent extends ViewBase implements OnInit {
-  @ViewChild(CubeViewComponent, { static: true }) viewPane: CubeViewComponent;
-  constructor(session: SessionService,
-    private _pane: PaneRef<CubeViewPaneComponent>,
-    private _popup: Popup,
-    router: RouterImpl,
-    service: CubeService,
-    guide: GuideService) {
-    super(session, router, service, guide);
-  }
-  ngOnInit(): void {
-    this._pane.paramsChange.subscribe(p => {
-      const cubeId = p['cube'], viewId = p['view'];
-      if (!this.cube || this.cube.name != cubeId) {
-        this.cube = this._session.profile.cubes.find(c => c.name === cubeId);
-      }
-      this.view = this.cube.views.find(v => v.name === viewId);
-      this._pane.group = this.cube.title;
-      this._pane.title = this.view.title;
-      this._pane.icon = this.view.icon || this.cube.icon;
-      if (this.view.type === 'Spreadsheet' ||
-        this.view.type === 'Grid' ||
-        (this.view.type === 'Pivot' && !this.view.chartType))
-        this._pane.stretchable = true;
-    });
-    this._pane.queryParamsChange.subscribe(p => this.originalAxes = p);
-    this._pane.resized.subscribe(() => this.viewPane.resize());
-  }
-  /**
-   *
-   * @param evt
-   */
-  explore(evt: AxisClickEvent) {
-    const { axes: queryParams, index } = evt;
-    this._router.navigate(['cube', this.cube.name, 'explore'],
-      {
-        queryParams,
-        state: {
-          index,
-        }
-      });
-  }
-  filterToggle(evt: Event) {
-    const popupRef = this._popup.open(CubeFilterComponent, evt.currentTarget as HTMLElement);
-    popupRef.opened.
-      subscribe(e => {
-        e.cube = this.cube.name;
-        e.exclude = this.exclude;
-        e.axes = this.axes;
-        e.axesChange.pipe(takeUntil(popupRef.closed)).subscribe(
-          this.navigate.bind(this)
-        );
-      });
-  }
-  @HostListener('window:keydown.f1', ['$event'])
-  guide(evt?: Event) {
-    super.guide(evt);
-  }
-}

package/src/lib/dashboard/_table.widget.scss

@@ -1,19 +0,0 @@
-table {
-  width: 100%;
-}
-
-td.text {
-  text-overflow: ellipsis;
-  max-width: 100px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-:host {
-  overflow: hidden;
-  display: block;
-
-  &:hover {
-    overflow-y: auto !important;
-  }
-}

package/src/lib/dashboard/actions/actions.widget.html

@@ -1,6 +0,0 @@
-<ejs-accumulationchart background="transparent" [legendSettings]="legendSettings" [enableAnimation]="true" [tooltip]="tooltip" (tooltipRender)="tooltipRender($event)" [theme]='theme' [id]="id">
-  <e-accumulation-series-collection>
-    <e-accumulation-series [dataSource]='data' xName='actionId' yName='duration' [startAngle]="270" [endAngle]="90" innerRadius="40%" radius="90%" [explode]="true" explodeOffset='10%' [explodeIndex]='0' [dataLabel]="dataLabel" [animation]="animation" [palettes]="palettes">
-    </e-accumulation-series>
-  </e-accumulation-series-collection>
-</ejs-accumulationchart>

package/src/lib/dashboard/actions/actions.widget.ts

@@ -1,118 +0,0 @@
-import { Component, OnDestroy, Inject, ViewChild, ElementRef } from '@angular/core';
-import { WidgetComponent } from '../../core/base';
-import { IAccTooltipRenderEventArgs, AccumulationChart, LegendSettingsModel, AccumulationDataLabelSettingsModel, AnimationModel, TooltipSettingsModel, AccumulationChartComponent } from '@syncfusion/ej2-angular-charts';
-import { BizDoc } from '../../core/decorators';
-import { SessionService } from '../../core/session.service';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { WidgetRef } from "../widget-ref";
-import { FONT_FAMILY } from '../../core/colors';
-@Component({
-  template: '',
-  //templateUrl: './actions.widget.html',
-  host: {
-    style: 'display:block',
-    dir: 'ltr',
-    '[id]': 'id'
-  }
-})
-@BizDoc({
-  selector: 'bizdoc-actions-slice'
-})
-/** component*/
-export class ActionsWidget implements WidgetComponent<PerformanceData[]>, OnDestroy {
-  static nextId = 0;
-  readonly id = `actions-${ActionsWidget.nextId++}`;
-  @ViewChild(AccumulationChartComponent) chart: AccumulationChart;
-  data: PerformanceData[];
-  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
-  palettes = this._session.accentPalette;
-  readonly tooltip: TooltipSettingsModel = {
-    enable: true,
-    textStyle: {
-      fontFamily: FONT_FAMILY
-    }
-  };
-  readonly legendSettings: LegendSettingsModel = {
-    visible: false
-  };
-  readonly animation: AnimationModel = { enable: true };
-  readonly dataLabel: AccumulationDataLabelSettingsModel = {
-    visible: true, position: 'Outside',
-    connectorStyle: { length: '10%' },
-    name: 'text',
-    font: {
-      size: '14px',
-      color: getComputedStyle(document.querySelector(".mat-card-title")).color,
-      fontFamily: FONT_FAMILY
-    }
-  };
-  height: string;
-  width: string;
-  private readonly _map: { [name: string]: string } = {};
-  private readonly _destroy = new Subject<void>();
-  constructor(@Inject(WidgetRef) widgetRef: WidgetRef, private _session: SessionService, private _elementRef: ElementRef) {
-    _session.profile.actions.forEach(a => this._map[a.name] = a.adjectivePlural || a.adjective || a.title);
-    _session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
-      this.theme = t.dark ? 'MaterialDark' : 'Material';
-      this.palettes = _session.accentPalette;
-      this.chart.theme = this.theme;
-      this.chart.series[0].palettes = this.palettes;
-      this.chart.series[0].dataLabel.font.color = getComputedStyle(document.querySelector(".mat-card-title")).color;
-      this.chart.refresh();
-    });
-    widgetRef.resize.subscribe(d => {
-      this.height = `${d.height}px`;
-      this.width = `${d.width}px`;
-      if (this.chart) {
-        this.chart.width = this.width;
-        this.chart.height = this.height;
-        this.chart.refresh();
-      }
-    });
-  }
-  onBind(data: PerformanceData[]) {
-    data.forEach(a =>
-      a.text = this._map[a.actionId] || a.actionId);
-    this.data = data;
-    if (!this.chart)
-      this._draw()
-    else {
-      this.chart.series[0].dataSource = this.data;
-      this.chart.refresh();
-    }
-  }
-  private _draw() {
-    this.chart && this.chart.destroy();
-    this.chart = new AccumulationChart({
-      background: 'transparent',
-      legendSettings: this.legendSettings, enableAnimation: true,
-      tooltip: this.tooltip,
-      margin: { top: 0 },
-      tooltipRender: this.tooltipRender.bind(this),
-      theme: this.theme,
-      height: this.height,
-      width: this.width,
-      series: [{
-        dataSource: this.data, xName: 'actionId', yName: 'duration', startAngle: 270, endAngle: 90, innerRadius: '40%', radius: '90%', explode: true,
-        dataLabel: this.dataLabel, animation: this.animation, palettes: this.palettes
-      }]
-    }, this._elementRef.nativeElement);
-  }
-  tooltipRender(e: IAccTooltipRenderEventArgs) {
-    const value = e.point.y / e.series.sumOfPoints * 100;
-    (e as any).text = `${this._map[e.point.x as string] || e.point.x as string} : ${Math.ceil(value)}%`;
-  }
-  ngOnDestroy(): void {
-    this.chart && this.chart.destroy();
-    this._destroy.next();
-    this._destroy.complete();
-  }
-}
-interface PerformanceData {
-  text: string;
-  actionId: string;
-  count: number;
-  /** seconds */
-  duration: number;
-}

package/src/lib/dashboard/cube/accum-cube.widget.html

@@ -1,15 +0,0 @@
-<ejs-accumulationchart [width]='width'
-                       [height]="height"
-                       background="transparent"
-                       [legendSettings]='legend'
-                       [enableAnimation]="true"
-                       [tooltip]='tooltip'
-                       (tooltipRender)="tooltipRender($event)"
-                       (textRender)="textRender($event)"
-                       [theme]='theme'
-                       [id]="id">
-  <e-accumulation-series-collection>
-    <e-accumulation-series [dataSource]='data' xName='x' yName='y' [startAngle]="startAngle" [endAngle]="endAngle" radius="70%" [dataLabel]="dataLabel" [explode]='true' explodeOffset='10%' [explodeIndex]='0' [innerRadius]="innerRadius" [animation]="animation" [palettes]="palettes">
-    </e-accumulation-series>
-  </e-accumulation-series-collection>
-</ejs-accumulationchart>