@bizdoc/core 1.8.5 → 1.8.9

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

@@ -0,0 +1,75 @@
+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;
+    });
+    this._pane.queryParamsChange.subscribe(p => this.originalAxes = p);
+    this._pane.resize.subscribe(() => this.viewPane.resize());
+  }
+  /**
+   *
+   * @param evt
+   */
+  explore(evt: AxisClickEvent) {
+    const { axes, index } = evt;
+    this._router.navigate(['cube', this.cube.name, 'explore'],
+      {
+        queryParams: axes,
+        state: { index, scope:
+          this.view.scope }
+      });
+  }
+  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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,15 @@
+<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>

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

@@ -0,0 +1,154 @@
+import { Component, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import {
+  LegendSeriesModel, TooltipSettingsModel, AccumulationChart,
+  AccumulationDataLabelSettingsModel, AnimationModel, IAccTooltipRenderEventArgs, AccumulationDataLabel, AccumulationTooltip,
+  AccumulationSeriesModel,
+  IPointEventArgs
+} from '@syncfusion/ej2-angular-charts';
+import { CubeAnalysisBase, Point, Options } from './cube-analysis.base';
+import { DatasourceService } from '../../core/datasource.service';
+import { SessionService } from '../../core/session.service';
+import { AXES_CODE_DIVIDER, CubeService, Series } from '../../cube/cube.service';
+import { WidgetRef } from "../widget-ref";
+import { AxesMap, Dimentions } from '../../core/models';
+import { FONT_FAMILY } from '../../core/colors';
+import { CubeInfo } from '../../cube/cube-info.service';
+
+AccumulationChart.Inject(AccumulationDataLabel, AccumulationTooltip);
+
+function cardColor(): string {
+  return getComputedStyle(document.querySelector(".mat-card-title")).color;
+}
+
+@Component({
+  selector: 'bizdoc-accum-cube-analysis',
+  template: '',
+  //  templateUrl: './accum-cube.widget.html',
+  host: {
+    '[id]': 'id',
+    dir: 'ltr'
+  }
+})
+/** statistics component*/
+export class CubeAccumAnalysisWidget extends CubeAnalysisBase implements OnDestroy {
+  //@ViewChild(AccumulationChartComponent)
+  chart: AccumulationChart;
+  data: Point[] = [];
+  startAngle = 0;
+  endAngle = 360;
+  innerRadius = '0';
+  readonly dataLabel: AccumulationDataLabelSettingsModel = {
+    visible: true,
+    position: 'Outside',
+    connectorStyle: { length: '10%' },
+    name: 'x',
+    font: {
+      size: '14px',
+      fontFamily: FONT_FAMILY,
+      color: cardColor()
+    }
+  };
+  readonly legend: LegendSeriesModel = {
+    isInversed: this._session.inverse,
+    visible: false
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly animation: AnimationModel = { enable: true, duration: 1000 };
+  readonly enableRtl = this._session.inverse;
+
+  constructor(ref: WidgetRef<Options>,
+    info: CubeInfo,
+    session: SessionService,
+    ds: DatasourceService,
+    cube: CubeService,
+    private _elementRef: ElementRef) {
+    super(ref, info,session, ds, cube);
+    switch (this._options.chartType) {
+      case 'Doughnut':
+        this.innerRadius = '40%';
+        break;
+      case 'HalfDoughnut':
+        this.startAngle = 270;
+        this.endAngle = 90;
+        this.innerRadius = '40%';
+        break;
+      default:
+    }
+  }
+  onLoad(data: Series[]) {
+    this.data = data.length ? data[0].points : [];
+    this._draw();
+  }
+  onResize(dim: Dimentions) {
+    if (this.chart) {
+     // this.chart.height = `${dim.height}px`;
+      //this.chart.width = `${dim.width}px`;
+      this.chart.refresh();
+    }
+  }
+  onThemeChange() {
+    this.data = this.data.slice();
+    if (this.chart) {
+      this.chart.theme = this.theme;
+      this.chart.series[0].palettes = this.palettes;
+      this.chart.series[0].dataLabel.font.color = cardColor();
+      this.chart.refresh();
+    }
+  }
+
+  tooltipRender(e: IAccTooltipRenderEventArgs) {
+    (e as any).text = this._intl.formatNumber(e.point.y, {
+      currency: this.currencyCode,
+      format: this.currencyCode ? 'c' : 'n',
+      maximumFractionDigits: this._service.fractionDigits
+    });
+  }
+  private _draw() {
+    const series: AccumulationSeriesModel[] = [{
+      dataSource: this.data,
+      xName: 'x',
+      yName: 'y',
+      startAngle: this.startAngle,
+      endAngle: this.endAngle,
+      radius: '70%',
+      dataLabel: this.dataLabel,
+      explode: true,
+      explodeOffset: '10%',
+      explodeIndex: 0,
+      innerRadius: this.innerRadius,
+      animation: this.animation,
+      palettes: this.palettes
+    }];
+    this.chart && this.chart.destroy();
+    if(this.data.length) this.chart = new AccumulationChart({
+     // width: `${this.width}px`,
+      // height: `${this.height}px`,
+      enableRtl: this.enableRtl,
+      background: 'transparent',
+      legendSettings: this.legend,
+      enableAnimation: true,
+      pointClick: this.pointClick.bind(this),
+      tooltip: this.tooltip,
+      currencyCode: this.currencyCode,
+      tooltipRender: this.tooltipRender.bind(this),
+      theme: this.theme,
+      series
+    }, this._elementRef.nativeElement);
+  }
+  pointClick(evt: IPointEventArgs) {
+    const axes: AxesMap = {};
+    const x = (evt.series.dataSource[evt.pointIndex].x as string).split(AXES_CODE_DIVIDER);
+    for (let i = 0; i < this.xAxis.length; i++)
+      axes[this.xAxis[i]] = x[i];
+    this.explore(axes);
+  }
+  ngOnDestroy() {
+    this.chart && this.chart.destroy();
+    super.ngOnDestroy();
+  }
+}

package/src/lib/dashboard/cube/cube-analysis.base.ts

@@ -0,0 +1,116 @@
+import { OnDestroy, Directive } from '@angular/core';
+import { Observable, forkJoin, Subject } from 'rxjs';
+import { takeUntil, tap } from 'rxjs/operators';
+import { Internationalization } from '@syncfusion/ej2-base';
+import { WidgetComponent } from '../../core/base';
+import { AxesMap, ChartType, Cube } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { AXES_LABEL_DIVIDER, AXES_CODE_DIVIDER, CubeService, Series, ScopeType } from '../../cube/cube.service';
+import { WidgetRef } from "../widget-ref";
+import { isArray } from '../../core/functions';
+import { CubeInfo } from '../../cube/cube-info.service';
+
+@Directive()
+export abstract class CubeAnalysisBase implements WidgetComponent<Series[]>, OnDestroy {
+  static nextId = 0;
+  readonly id = `cube-analysis-${CubeAnalysisBase.nextId++}`;
+  palettes: string[] = this._session.accentPalette;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  height: string;
+  width: string;
+  readonly currencyCode: string;
+  protected _cube: Cube;
+  protected _options: Options;
+  protected _data: Series[];
+  private _series: string[];
+  private _xAxis: string[];
+  protected get series() { return this._series}
+  protected get xAxis() { return this._xAxis}
+  private readonly _axisTypeMap: { [name: string]: string } = {};
+  protected readonly _intl: Internationalization = new Internationalization();
+  protected readonly _destroy = new Subject<void>();
+  constructor(ref: WidgetRef<Options>,
+    private _info: CubeInfo,
+    protected _session: SessionService,
+    private _ds: DatasourceService,
+    protected _service: CubeService) {
+    this._options = ref.options;
+    const { xAxis, series, cube } = this._options;
+    this._cube = cube ? this._session.profile.cubes.find(c => c.name === cube) : this._session.profile.cubes[0];
+    this._xAxis = !xAxis ? [this._cube.axes[0].name] : isArray(xAxis) ? xAxis : [xAxis];
+    this._series = !series ? [] : isArray(series) ? series : [series];
+    if (!this._cube)
+      throw `cube not found ${cube}`;
+    this.currencyCode = this._cube.currencyCode;
+    this._cube.axes.forEach((a) =>
+      this._axisTypeMap[a.name] = a.dataType);
+    _session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      this.theme = t.dark ? 'MaterialDark' : 'Material';
+      this.palettes = _session.accentPalette;
+      this.onThemeChange();
+    });
+    ref.resize.subscribe(d => {
+      this.height = `${d.height}px`;
+      this.width = `${d.width}px`;
+      this._data && this.onResize(d);
+    });
+  }
+  protected explore(axes: AxesMap, options?: { index?: string }) {
+    this._info.explore(axes, {
+      cube: this._cube.name,
+      index: options && options.index ? options.index : null,
+      scope: this._options.scope
+    });
+  }
+  abstract onResize(dim: { height: number; width: number });
+  onBind(data: Series[]) {
+    const observables: Observable<any>[] = [];
+    data.forEach(s => {
+      s.points.forEach(p => {
+        if (p.x) {
+          const pobservable = forkJoin(p.x.split(AXES_CODE_DIVIDER).map((k, j) =>
+            this._ds.get(this._axisTypeMap[this._xAxis[j]], k))).
+            pipe(tap(o => p.name = o.join(AXES_LABEL_DIVIDER)));
+          observables.push(pobservable);
+        }
+      });
+      if (s.index) {
+        const index = this._cube.indices.find(i => i.name === s.index);
+        s.title = index.title;
+      }
+      else if (s.name) {
+        const sobservable = forkJoin(s.name.split(AXES_CODE_DIVIDER).map((k, i) =>
+          this._ds.get(this._axisTypeMap[this._series[i]], k)
+        )).pipe(tap(v => s.title = v.join(AXES_LABEL_DIVIDER)));
+        observables.push(sobservable);
+      }
+    });
+    this._data = data;
+    if (observables.length) forkJoin(observables).subscribe(() =>
+      this.onLoad(data)
+    );
+    else
+      this.onLoad(data);
+  }
+  abstract onLoad(data: Series[]);
+  abstract onThemeChange();
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+export interface Options {
+  scope?: ScopeType;
+  chartType?: ChartType;
+  indexChartType?: ChartType;
+  cube?: string;
+  xAxis?: string[] | string;
+  exclude?: string[] | string;
+  series?: string[] | string;
+  indices?: string[] | string;
+}
+export interface Point {
+  x: string;
+  y: number;
+}

package/src/lib/dashboard/cube/cube-analysis.widget.ts

@@ -0,0 +1,42 @@
+import { Component, ViewContainerRef, OnInit, ComponentFactoryResolver, Injector } from '@angular/core';
+import { BizDoc } from '../../core/decorators';
+import { WidgetRef } from "../widget-ref";
+import { WidgetComponent } from '../../core/base';
+import { Options } from './cube-analysis.base';
+import { CubeAccumAnalysisWidget } from './accum-cube.widget';
+import { CubeChartAnalysisWidget } from './cube-chart.widget';
+@Component({
+  template: '',
+  entryComponents: [CubeAccumAnalysisWidget, CubeChartAnalysisWidget]
+})
+@BizDoc({
+  selector: 'bizdoc-cube-analysis'
+})
+/** statistics component*/
+export class CubeAnalysisWidget implements WidgetComponent<any>, OnInit {
+  private _instance: WidgetComponent<Options, any>;
+  constructor(private _ref: WidgetRef<Options>,
+    private _resolver: ComponentFactoryResolver,
+    private _injector: Injector,
+    private _vc: ViewContainerRef) {
+  }
+  ngOnInit(): void {
+    const { chartType } = this._ref.options;
+    let comp;
+    switch (chartType) {
+      case 'Doughnut':
+      case 'HalfDoughnut':
+      case 'Pie':
+        comp = CubeAccumAnalysisWidget;
+        break;
+      default:
+        comp = CubeChartAnalysisWidget;
+    }
+    const factory = this._resolver.resolveComponentFactory(comp);
+    const cRef = this._vc.createComponent(factory, null, this._injector);
+    this._instance = cRef.instance as WidgetComponent<Options>;
+  }
+  onBind(data: any, args?: any) {
+    this._instance.onBind(data, args);
+  }
+}

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

@@ -0,0 +1,7 @@
+<!--<ejs-chart width="100%" [height]="height" background="transparent" [theme]='theme' [enableAnimation]='true' [useGroupingSeparator]='true'
+           [id]="id" dir="ltr"
+           [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [legendSettings]='legend'
+           [tooltip]='tooltip' (tooltipRender)="tooltipRender($event)" [palettes]="palettes" [currencyCode]="currencyCode">
+  <e-series-collection>
+  </e-series-collection>
+</ejs-chart>-->