@bizdoc/core 1.13.8 → 1.13.12

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

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

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

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

@@ -0,0 +1,115 @@
+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';
+
+@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 => {
+      this.loading = false;
+      this._sb.error(e.status === 406 ? '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

@@ -0,0 +1,25 @@
+<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">filter_alt</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>filter_list</mat-icon></button>
+</mat-toolbar>
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<!--<bizdoc-cube-tags [(filters)]="axes" [cube]="cube"></bizdoc-cube-tags>-->
+<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

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

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

@@ -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, ElementRef } from '@angular/core';
+import {
+  LegendSeriesModel, TooltipSettingsModel, AccumulationChart,
+  AccumulationDataLabelSettingsModel, AnimationModel, IAccTooltipRenderEventArgs, AccumulationDataLabel, AccumulationTooltip,
+  AccumulationSeriesModel,
+  IPointEventArgs,
+  PieSeries,
+  AccumulationLegend
+} from '@syncfusion/ej2-angular-charts';
+import { CubeAnalysisBase, Options } from './cube-analysis.base';
+import { DatasourceService } from '../../core/datasource.service';
+import { SessionService } from '../../core/session.service';
+import { AXES_CODE_DIVIDER, CubeService, Series, Point } 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';
+
+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: 'name',
+    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();
+  }
+}