@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/core/window-title.service.ts

@@ -0,0 +1,54 @@
+import { Injectable, Inject } from '@angular/core';
+import { HubService } from './hub.service';
+import { BIZDOC_CONFIG, BizDocConfig } from '../core/configuration';
+import { AccountService } from './account.service';
+import { TranslateService } from './translate.service';
+
+const TIME = 1000;
+
+@Injectable({ providedIn: 'root' })
+export class WindowTitleService {
+  private _inFocus = true;
+  private _isActive = false;
+  private _mode = false;
+  private _task: NodeJS.Timeout;
+  private _message: string;
+  private _title: string;
+    private readonly _appTitle = this.config.appTitle || 'BizDoc';
+
+  constructor(@Inject(BIZDOC_CONFIG) private config: BizDocConfig,
+    users: AccountService,
+    translate: TranslateService,
+    hub: HubService) {
+    document.addEventListener('blur', () => this._inFocus = false);
+    document.addEventListener('focus', () => {
+      this._isActive &&
+        this._clear();
+      this._inFocus = true;
+    });
+    hub.new$.subscribe(i =>
+      users.get(i.model.senderId).subscribe(u =>
+        !this._inFocus && this._show(translate.get('NewFrom', i.model.number, u.name))));
+    hub.notify$.subscribe(n =>
+      !this._inFocus && this._show(n.model.title));
+    this._title = document.title;
+  }
+  set(value: string) {
+    document.title = this._title = value ? `${this._appTitle} - ${value}` : this._appTitle;
+  }
+  private _show(message: string) {
+    this._message = message;
+    this._isActive = true;
+    this._task && clearInterval(this._task);
+    this._task = setInterval(() => {
+      this._mode = !this._mode;
+      document.title = this._mode ? this._title : this._message;
+    }, TIME);
+  }
+  private _clear() {
+    clearInterval(this._task);
+    this._task = null;
+    document.title = this._title;
+    this._isActive = false;
+  }
+}

package/src/lib/cube/accum/accum.component.html

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

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

@@ -0,0 +1,186 @@
+import { Component, Output, EventEmitter, OnDestroy, OnInit, ElementRef, HostBinding, Input, SimpleChanges, OnChanges } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { AccumulationDataLabelSettingsModel, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export, PieSeries, FunnelSeries, TooltipSettingsModel, LegendSettingsModel, AccumulationChart, IPointEventArgs, IAccTextRenderEventArgs, IAccTooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts';
+import { Internationalization } from '@syncfusion/ej2-base';
+import * as XLSX from 'xlsx';
+import { AxisClickEvent, CubeViewerComponent } from "../declarations";
+import { AxesMap, ChartType, Dimentions } from '../../core/models';
+import { FONT_FAMILY } from '../../core/colors';
+import { AXES_CODE_DIVIDER, CubeService, Point, ScopeType } from '../cube.service';
+import { SessionService } from '../../core/session.service';
+import { TranslateService } from '../../core/translate.service';
+import { PromptService } from '../../core/prompt.service';
+
+AccumulationChart.Inject(FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export, PieSeries);
+
+@Component({
+  selector: 'bizdoc-cube-accum',
+  template: '',
+  host: {
+    class: 'cube-view'
+  }
+})
+/** chart component*/
+export class CubeAccumulationChartComponent implements OnInit, OnChanges, OnDestroy, CubeViewerComponent {
+  static nextId = 0;
+  @HostBinding()
+  readonly id = `cube-accum-chart-${CubeAccumulationChartComponent.nextId++}`;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  accumchart: AccumulationChart;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: string;
+  dataSource: Point[];
+  readonly dataLabel: AccumulationDataLabelSettingsModel = {
+    visible: true,
+    name: 'text',
+    position: 'Outside',
+    font: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly legendSettings: LegendSettingsModel = {
+    visible: false,
+    isInversed: this._session.inverse,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  palettes = this._session.accentPalette;
+  @Input()
+  height: string;
+  @Input()
+  cube!: string;
+  @Input()
+  xAxis!: string[];
+  @Input()
+  indices?: string[];
+  @Input()
+  filters?: AxesMap;
+  @Input()
+  chartType?: ChartType;
+  @Input()
+  @Input() scope: ScopeType;
+  currencyCode: string;
+  @Input() loading: boolean;
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  @Output() readonly explore: EventEmitter<AxisClickEvent> = new EventEmitter();
+  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 _elementRef: ElementRef,
+    private _session: SessionService) {
+    _session.themeChange.pipe(takeUntil(this._destroy)).
+      subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this.palettes = _session.accentPalette;
+      });
+  }
+  ngOnInit() {
+    switch (this.chartType) {
+      case 'Doughnut':
+        this.innerRadius = '10%';
+        break;
+      case 'HalfDoughnut':
+        this.startAngle = 270;
+        this.endAngle = 90;
+        this.innerRadius = '10%';
+        break;
+      case 'Funnel':
+        break;
+      default:
+        this.startAngle = 0;
+        this.endAngle = 360;
+        this.innerRadius = '0';
+    }
+  }
+  textRender(e: IAccTextRenderEventArgs) {
+    e.text = e.point.x as string;
+  }
+  tooltipRender(e: IAccTooltipRenderEventArgs): void {
+    (e as any).text = this._intl.formatNumber(e.point.y, {
+      currency: this.currencyCode,
+      format: this.currencyCode ? 'c' : 'n',
+      maximumFractionDigits: this._service.fractionDigits
+    });
+  }
+  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.emit({ axes });
+  }
+  /**
+   * 
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'])
+      this.execute();
+    else
+      if (changes['height'])
+        this.accumchart && this.accumchart.accumulationResize();
+  }
+  private execute() {
+    this.loadingChange.emit(true);
+    this._service.series(this.cube, this.xAxis, {
+      filters: this.filters,
+      scope: this.scope
+    }).subscribe(r => {
+      this.dataSource = r[0].points;
+      this._draw();
+      this.loadingChange.emit(false);
+    }, (e: HttpResponse<any>) => {
+      this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+      this.loadingChange.emit(false);
+    });
+  }
+
+  private _draw() {
+    this.accumchart && this.accumchart.destroy();
+    this.accumchart = new AccumulationChart({
+      legendSettings: this.legendSettings,
+      tooltip: this.tooltip,
+      pointClick: this.pointClick.bind(this),
+      theme: this.theme,
+      textRender: this.textRender.bind(this),
+      tooltipRender: this.tooltipRender.bind(this),
+      enableAnimation: true,
+      background: 'transparent',
+      height: this.height,
+      currencyCode: this.currencyCode,
+      series: [{
+        dataSource: this.dataSource, xName: 'name', yName: 'y',
+        startAngle: this.startAngle, endAngle: this.endAngle,
+        radius: "70%", dataLabel: this.dataLabel,
+        explode: true, explodeOffset: '10%',
+        explodeIndex: 0, innerRadius: this.innerRadius,
+        palettes: this.palettes
+      }]
+    }, this._elementRef.nativeElement);
+  }
+  exportToExcel(title: string) {
+    const ws = XLSX.utils.json_to_sheet(this.dataSource);
+    const wb = XLSX.utils.book_new();
+    const name = this._translate.get('SheetN', 1);
+    wb.Sheets[name] = ws;
+    wb.SheetNames.push(name);
+    XLSX.writeFile(wb, `${title}.xlsx`);
+  }
+  ngOnDestroy(): void {
+    this.accumchart && this.accumchart.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

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

@@ -0,0 +1,32 @@
+<!--<ejs-chart [legendSettings]='legendSettings'
+           [primaryXAxis]='primaryXAxis'
+           [primaryYAxis]='primaryYAxis'
+           [enableExport]=true
+           [currencyCode]=currencyCode
+           background="transparent"
+           [theme]='theme'
+           [useGroupingSeparator]=true
+           [id]='id'
+           [palettes]='palettes'
+           [height]='height'
+           (tooltipRender)='tooltipRender($event)'
+           selectionMode="Point"
+           (pointClick)='pointClick($event)'
+           [tooltip]='tooltip'
+           [enableAnimation]=true
+           [crosshair]='crosshair'
+           [chartArea]='chartArea'
+           [enableRtl]='enableRtl'
+           width="100%">
+  <e-series-collection>
+    <e-series *ngFor="let s of series" xName='name'
+              yName='y'
+              [animation]="s.animation"
+              [fill]="s.fill"
+              [name]="s.name"
+              [width]="s.width"
+              [dataSource]="s.dataSource"
+              [type]="s.type"
+              [marker]="s.marker"></e-series>
+  </e-series-collection>
+</ejs-chart>-->

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

@@ -0,0 +1,252 @@
+import { Component, Output, EventEmitter, ElementRef, HostBinding, Input, OnInit, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
+import { Chart, SeriesModel, Export, BarSeries, StackingStepAreaSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, Legend, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, Tooltip, DateTime, Category, CrosshairSettingsModel } from '@syncfusion/ej2-charts';
+import { AxisModel, ChartAreaModel, TooltipSettingsModel, LegendSettingsModel, IPointEventArgs, ITooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts';
+import { Internationalization } from '@syncfusion/ej2-base';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as XLSX from 'xlsx';
+import { FONT_FAMILY } from '../../core/colors';
+import { AXES_CODE_DIVIDER, CubeService, ScopeType, Series } from '../cube.service';
+import { AxisClickEvent, CubeViewerComponent } from "../declarations";
+import { AxesMap, ChartType } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { SessionService } from '../../core/session.service';
+import { HttpResponse } from '@angular/common/http';
+import { TranslateService } from '../../core/translate.service';
+import { isArray } from '../../core/functions';
+
+Chart.Inject(Category, DateTime, Tooltip, Export, BarSeries, AreaSeries, StackingStepAreaSeries, BubbleSeries, ColumnSeries, LineSeries, Legend, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries);
+
+@Component({
+  selector: 'bizdoc-cube-chart',
+  template: '',
+  host: {
+    dir: 'ltr',
+    class: 'cube-view'
+  }
+})
+/** chart component*/
+export class CubeChartComponent implements OnInit, OnChanges, OnDestroy, CubeViewerComponent {
+  @Input()
+  width: string;
+  @Input()
+  height: string;
+  @Input()
+  cube!: string;
+  private _xAxis: string[];
+  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];
+  }
+  private _indices?: string[];
+  public get indices(): string[] | string {
+    return this._indices;
+  }
+  @Input()
+  public set indices(value: string[] | string) {
+    this._indices = isArray(value) ? value : [value];
+  }
+  @Input()
+  filters?: AxesMap;
+  @Input()
+  chartType?: ChartType;
+  @Input()
+  indexChartType?: ChartType;
+  @Input() scope: ScopeType;
+  @Input()
+  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;
+  palettes = this._session.accentPalette;
+  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,
+    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() {
+    if (this.chartType === 'Line' || this.chartType === 'Spline')
+      this.crosshair.enable = true;
+    this.primaryYAxis.labelFormat = this.currencyCode ? 'c0' : 'n0';
+  }
+  /**
+   * 
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['filters'])
+      this.execute();
+    else
+      if (changes['height'])
+        this.chart && this.chart.chartResize();
+  }
+  private 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: HttpResponse<any>) => {
+      this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+      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.indexChartType || 'Spline',
+            width: 2,
+            fill: this._session.getPrimery(),
+            stackingGroup: 'index',
+            marker: {
+              visible: !this.indexChartType || this.indexChartType === 'Line' || this.indexChartType === '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,
+      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 wb = XLSX.utils.book_new();
+    this._data.forEach((s, i) => {
+      const ws = XLSX.utils.json_to_sheet(s.points);
+      const name = s.title || this._translate.get('SheetN', i + 1);
+      wb.Sheets[name] = ws;
+      wb.SheetNames.push(name);
+    });
+    XLSX.writeFile(wb, `${title}.xlsx`);
+  }
+  ngOnDestroy(): void {
+    this.chart && this.chart.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

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

@@ -0,0 +1,129 @@
+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 { CubeMatrixComponent } from "./matrix/matrix.component";
+import { BizDocComponentFactoryResolver } from "../core/component-factory-resolver";
+import { CubeService, ScopeType } from "./cube.service";
+import { Popup } from "../core/popup/popup.service";
+import { RouterImpl } from "../core/router";
+
+export interface CubeData {
+  axes: AxesMap;
+  options?: CubeDataOptions;
+}
+
+export interface CubeDataOptions {
+  cube?: string;
+  xAxis: string;
+  serie: string;
+  indices?: string[] | string;
+  view?: string;
+  /** one or more axis */
+  filters?: string[] | string;
+  /** */
+  aggregate?: string[] | string;
+  sum?: {
+    xAxis?: string | number;
+    serie?: string | number;
+    title: string;
+  }
+}
+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, serie, xAxis, filters, aggregate, indices, sum } = 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, serie], {
+        queryParams: axes,
+        state: { indices, aggregate, filters, sum }
+      });
+    }
+  }
+  /**
+   * 
+   * @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(CubeMatrixComponent, 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 && (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" [bizdocTooltipDisabled]="!collapsed">{{v.icon || 'insights'}}</mat-icon>
+      <span matLine>{{v.title}}</span>
+    </mat-list-item>
+  </ng-container>
+</mat-nav-list>