@bizdoc/core 1.14.5 → 1.14.9

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();
+  }
+}

package/src/lib/dashboard/cube/compare.widget.ts

@@ -0,0 +1,219 @@
+import { Component, OnDestroy, ViewChild, ElementRef } from "@angular/core";
+import { Chart, AxisModel, CrosshairSettingsModel, TooltipSettingsModel, SeriesModel, LegendSeriesModel, RowModel, LineSeriesService, CrosshairService, ColumnSeriesService, MarginModel, ZoomSettingsModel, ITooltipRenderEventArgs, ChartAreaModel, ChartComponent, ISharedTooltipRenderEventArgs } from "@syncfusion/ej2-angular-charts";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import dayjs from 'dayjs';
+import { WidgetComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { TranslateService } from "../../core/translate.service";
+import { SessionService } from "../../core/session.service";
+import { DatasourceService } from "../../core/datasource.service";
+import { WidgetRef } from "../widget-ref";
+import { FONT_FAMILY } from "../../core/colors";
+/** */
+@Component({
+  //templateUrl: './compare.widget.html',
+  template: '',
+  providers: [LineSeriesService, CrosshairService, ColumnSeriesService],
+  host: {
+    '[id]': 'id',
+    dir: 'ltr'
+  }
+})
+@BizDoc({
+  selector: 'bizdoc-cube-compare'
+})
+export class CubeCompareWidget implements WidgetComponent<Model[]>, OnDestroy {
+  static nextId = 0;
+  readonly id = `cube-compare-${CubeCompareWidget.nextId++}`;
+  palettes = this._session.accentPalette;
+  @ViewChild(ChartComponent) chart: Chart;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material'
+  readonly enableRtl = this._session.inverse;
+  readonly rows: RowModel[] = [
+    {
+      height: '15%'
+    }, {
+      height: '85%'
+    }
+  ];
+  readonly axes: AxisModel[] = [{
+    name: 'primary',
+    labelStyle: { size: '0px' },
+    rowIndex: 1
+  }, {
+    name: 'volume',
+    rowIndex: 0,
+    majorGridLines: { width: 0 }, lineStyle: { width: 0 },
+    labelStyle: { size: '0px' },
+    majorTickLines: { width: 0 }
+  }];
+  readonly chartArea: ChartAreaModel = {
+    border: {
+      width: 0
+    }
+  };
+  readonly zoomSettings: ZoomSettingsModel = {
+    mode: 'X',
+    enableMouseWheelZooming: true,
+    enablePinchZooming: true,
+    toolbarItems: [],
+    enableSelectionZooming: false,
+    enableScrollbar: true
+  };
+  readonly primaryXAxis: AxisModel = {
+    valueType: 'DateTime',
+    labelFormat: 'MMM dd',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    labelIntersectAction: 'Hide',
+    majorGridLines: { width: 0 }
+  };
+  readonly crosshair: CrosshairSettingsModel = {
+    enable: true,
+    lineType: 'Vertical'
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true, shared: true, textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+  };
+  readonly legend: LegendSeriesModel = {
+    visible: true,
+    isInversed: this._session.inverse,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+  };
+  readonly primaryYAxis: AxisModel = {
+    skeleton: 'duration',
+    labelStyle: {
+      //size: '0px'
+    },
+    labelFormat: '',
+    titleStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    title: this._translate.get('Duration'),
+    //lineStyle: { width: 0 },
+    //minorTickLines: { width: 0 }
+  };
+  readonly margin: MarginModel = {
+    bottom: 0
+  };
+  series: SeriesModel[];
+  height: string;
+  private readonly _destroy = new Subject<void>();
+  constructor(private _translate: TranslateService,
+    private _widgetRef: WidgetRef,
+    private _elementRef: ElementRef,
+    private _type: DatasourceService,
+    private _session: SessionService) {
+    _session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      this.theme = t.dark ? 'MaterialDark' : 'Material';
+      this.palettes = _session.accentPalette;
+      this._draw();
+    });
+    _widgetRef.resize.subscribe(d => {
+      this.height = `${d.height}px`;
+      if (this.chart) this.chart.height = this.height;
+    });
+  }
+  async onBind(data: Model[]) {
+    await this._prepare(data);
+    this._draw();
+  }
+  private _draw() {
+    this.chart && this.chart.destroy();
+    this.chart = new Chart({
+      axes: this.axes,
+      series: this.series,
+      height: this.height,
+      rows: this.rows,
+      legendSettings: this.legend,
+      crosshair: this.crosshair,
+      tooltip: this.tooltip,
+      background: 'transparent',
+      chartArea: this.chartArea,
+      primaryXAxis: this.primaryXAxis,
+      primaryYAxis: this.primaryYAxis,
+      theme: this.theme,
+      margin: this.margin,
+      useGroupingSeparator: true,
+      palettes: this.palettes,
+      zoomSettings: this.zoomSettings,
+      sharedTooltipRender: this.sharedTooltipRender.bind(this),
+    }, this._elementRef.nativeElement);
+
+  }
+  sharedTooltipRender(evt: ISharedTooltipRenderEventArgs) {
+    evt.data.forEach((d, i) => {
+      if (evt.series[d.seriesIndex].yName !== 'count')
+        evt.text[i] = `${d.seriesName} : <b>${dayjs.duration(d.pointY as any, 's').humanize()}</b>`;
+    });
+  }
+  private async _prepare(data: Model[]) {
+    const indicatorData: Volume[] = [], series: SeriesModel[] = [];
+    for (var item of data) {
+      item.points.forEach(p => {
+        const date = p.date = new Date(p.date),
+          indicator = indicatorData.find(i => i.date.valueOf() === date.valueOf());
+        if (indicator)
+          indicator.count += p.count;
+        else
+          indicatorData.push({ count: p.count, date });
+      });
+      const cube = this._session.profile.cubes.find(c => c.name === this._widgetRef.options.cube || this._widgetRef.options.cube == null);
+      const axis = cube.axes.find(a => a.name === this._widgetRef.options.series);
+      const title = await this._type.get(axis.dataType, item.series).toPromise();
+      series.push({
+        type: 'Line',
+        xName: 'date',
+        yName: 'duration',
+        yAxisName: 'primary',
+        name: title,
+        dataSource: item.points,
+        marker: {
+          width: 6,
+          height: 6,
+          visible: false
+        }
+      } as SeriesModel);
+    }
+    series.push({
+      type: 'Column',
+      xName: 'date',
+      yName: 'count',
+      name: this._translate.get('Volume'),
+      dataSource: indicatorData,
+      yAxisName: 'volume',
+      marker: {
+        width: 0,
+        height: 0,
+        visible: false
+      }
+    });
+    this.series = series;
+  }
+
+  ngOnDestroy(): void {
+    this.chart && this.chart.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+interface Model {
+  points: Point[];
+  series: string;
+}
+interface Point {
+  date: Date;
+  duration: number;
+  count: number;
+}
+interface Volume {
+  date: Date;
+  count: number;
+}

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

@@ -0,0 +1,113 @@
+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 } from '../../cube/cube.service';
+import { WidgetRef } from "../widget-ref";
+import { isArray } from '../../core/functions';
+import { CubeInfo } from '../../cube/cube-info.service';
+import { ScopeType } from '../../core/configuration';
+
+@Directive()
+export abstract class CubeAnalysisBase implements WidgetComponent<Series[]>, OnDestroy {
+  static nextId = 0;
+  readonly id = `cube-analysis-${CubeAnalysisBase.nextId++}`;
+  palettes = 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];
+    if (!this._cube)
+      throw `cube not found ${cube}`;
+    this._xAxis = !xAxis ? [this._cube.axes[0].name] : isArray(xAxis) ? xAxis : [xAxis];
+    this._series = !series ? [] : isArray(series) ? series : [series];
+    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;
+  indicesChartType?: ChartType;
+  cube?: string;
+  xAxis?: string[] | string;
+  exclude?: string[] | string;
+  series?: string[] | string;
+  indices?: string[] | string;
+}

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

@@ -0,0 +1,44 @@
+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':
+      case 'Funnel':
+      case 'Pyramid':
+        comp = CubeAccumAnalysisWidget;
+        break;
+      default:
+        comp = CubeChartAnalysisWidget;
+    }
+    const factory = this._resolver.resolveComponentFactory(comp);
+    const cRef = this._vc.createComponent(factory, 0, 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>-->

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

@@ -0,0 +1,144 @@
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { SessionService } from '../../core/session.service';
+import { Chart, AxisModel, MarkerOptionsModel, LegendSeriesModel, TooltipSettingsModel, ChartSeriesType, AnimationModel, SeriesModel, ChartComponent, ITooltipRenderEventArgs, AreaSeries, BarSeries, BubbleSeries, ColumnSeries, DateTime, LineSeries, PolarSeries, RadarSeries, ScatterSeries, SplineAreaSeries, SplineSeries, StackingAreaSeries, StackingBarSeries, StackingColumnSeries, StackingLineSeries, StepAreaSeries, StepLineSeries, IPointEventArgs, Point } from '@syncfusion/ej2-angular-charts';
+import { CubeAnalysisBase } from './cube-analysis.base';
+import { DatasourceService } from '../../core/datasource.service';
+import { WidgetRef } from "../widget-ref";
+import { TranslateService } from '../../core/translate.service';
+import { AXES_CODE_DIVIDER, CubeService, Series } from '../../cube/cube.service';
+import { FONT_FAMILY } from '../../core/colors';
+import { CubeInfo } from '../../cube/cube-info.service';
+import { AxesMap } from '../../core/models';
+
+@Component({
+  selector: 'bizdoc-cube-chart-analysis',
+  template: '',
+  //templateUrl: './cube-chart.widget.html'
+  host: {
+    '[id]': 'id',
+    dir: 'ltr'
+  }
+})
+/** statistics component*/
+export class CubeChartAnalysisWidget extends CubeAnalysisBase {
+  //@ViewChild(ChartComponent)
+  chart: Chart;
+  readonly type: ChartSeriesType = this._options.chartType as ChartSeriesType || 'Column';
+  readonly indexType: ChartSeriesType = this._options.indicesChartType as ChartSeriesType || 'Line';
+  readonly marker: MarkerOptionsModel = {
+    visible: true,
+    width: 10,
+    height: 10
+  }
+  readonly primaryXAxis: AxisModel = {
+    valueType: 'Category',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly primaryYAxis: AxisModel = {
+    labelFormat: this.currencyCode ? 'c0' : 'n0',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true,
+    enableAnimation: false,
+    shared: false,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly legend: LegendSeriesModel = {
+    visible: false,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly animation: AnimationModel = { enable: true };
+  constructor(ref: WidgetRef,
+    session: SessionService,
+    ds: DatasourceService,
+    cube: CubeService,
+    info: CubeInfo,
+    private _elementRef: ElementRef,
+    private _translate: TranslateService) {
+    super(ref, info, session, ds, cube);
+  }
+  onLoad(data: Series[]) {
+    const series = data.map(s => {
+      if (s.index)
+        return {
+          yName: 'y', xName: 'name',
+          type: this.indexType,
+          name: s.title,
+          width: 2,
+          stackingGroup: 'index',
+          marker: {
+            shape: 'Diamond', width: 4
+          },
+          dataSource: s.points,
+          fill: this._session.getPrimery(400)
+        } as SeriesModel;
+      else return {
+        yName: 'y', xName: 'name', type: this.type,
+        dataSource: s.points,
+        name: s.title ||
+          this._translate.get('Usage')
+      } as SeriesModel;
+    });
+    this.chart && this.chart.destroy();
+    if (series.length) this.chart = new Chart({
+      width: '100%',
+      height: this.height,
+      background: 'transparent',
+      theme: this.theme,
+      enableAnimation: true,
+      useGroupingSeparator: true,
+      primaryXAxis: this.primaryXAxis,
+      primaryYAxis: this.primaryYAxis,
+      tooltip: this.tooltip,
+      palettes: this.palettes,
+      currencyCode: this.currencyCode,
+      series,
+      pointClick: this.pointClick.bind(this),
+      legendSettings: {
+        isInversed: this._session.inverse,
+        visible: series.length > 1
+      } as LegendSeriesModel
+    }, this._elementRef.nativeElement);
+  }
+  pointClick(evt: IPointEventArgs) {
+    const axes: AxesMap = {},
+      serie = this._data[evt.seriesIndex],
+      { index, name, points } = serie;
+    if (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(axes, { index });
+  }
+  onThemeChange() {
+    this.onBind(this._data);
+  }
+  onResize() {
+    if (this.chart) {
+      this.chart.height = this.height;
+    }
+  }
+  tooltipRender(e: ITooltipRenderEventArgs) {
+    e.text = this._intl.formatNumber(e.point.y as number, {
+      currency: this.currencyCode,
+      format: this.currencyCode ? 'c' : 'n',
+      maximumFractionDigits: this._service.fractionDigits
+    });
+  }
+  ngOnDestroy() {
+    this.chart && this.chart.destroy();
+    super.ngOnDestroy();
+  }
+}