@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/system.module.ts

@@ -0,0 +1,77 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { MomentModule } from 'ngx-moment';
+import { SharedModule } from './shared.module';
+import { FormResolve } from './admin/form/form.resolve.service';
+import { FormService } from './admin/form/form.service';
+import { ReassignDialog } from './admin/document-trace/reassign.dialog';
+import { TraceElementComponent } from './admin/document-trace/trace-element.component';
+import { WorkflowComponent } from './admin/form/workflow/workflow.component';
+import { PositionsPopup } from './admin/positions/positions-popup.component';
+import { SearchInput } from './admin/core/search.input';
+import { WorkflowNodeComponent } from './admin/form/workflow/node.component';
+import { UtilityPaneComponent } from './admin/utility.pane.component';
+import { ManageCubeIndexUtility } from './admin/indices/manage-cube-index.component';
+import { PermissionsUtility } from './admin/permissions/permissions.component';
+import { UtilityWrapperComponent } from './admin/utility-wrapper.component';
+import { SystemDiffComponent } from './admin/diff/configuration-diff.component';
+import { DocumentTraceComponent } from './admin/document-trace/document-trace.component';
+import { RoleNodeComponent } from './admin/form/workflow/role-node.component';
+import { PatternsComponent } from './admin/patterns/patterns.component';
+import { PositionsComponent } from './admin/positions/positions.component';
+import { ProfilerComponent } from './admin/profiler/profiler.component';
+import { SyncfusionChartModule } from './chart.module';
+import { SyncfusionDiagramModule } from './diagram.module';
+import { registerComponents } from './core/component-factory-resolver';
+
+const SYSTEM_COMPONENTS = [RoleNodeComponent, ManageCubeIndexUtility, PermissionsUtility, PositionsComponent, ProfilerComponent,
+  PatternsComponent, SystemDiffComponent, DocumentTraceComponent];
+
+
+@NgModule({
+  declarations: [
+    PermissionsUtility, ManageCubeIndexUtility,
+    UtilityWrapperComponent, UtilityPaneComponent,
+    SearchInput,
+    ReassignDialog,
+    SystemDiffComponent, DocumentTraceComponent, TraceElementComponent, ProfilerComponent,
+    PositionsComponent, PositionsPopup,
+    WorkflowComponent, WorkflowNodeComponent, RoleNodeComponent,
+    PatternsComponent
+  ],
+  providers: [
+    FormResolve, FormService
+  ],
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+    RouterModule,
+    MomentModule,
+    SyncfusionDiagramModule,
+    SyncfusionChartModule,
+    SharedModule
+  ],
+  exports: [
+    PermissionsUtility, ManageCubeIndexUtility,
+    UtilityWrapperComponent, UtilityPaneComponent,
+    SystemDiffComponent, DocumentTraceComponent, TraceElementComponent, ProfilerComponent,
+    PositionsComponent,
+    WorkflowComponent, WorkflowNodeComponent, RoleNodeComponent,
+    PatternsComponent
+  ]
+})
+export class SystemModule {
+  static forChild(): ModuleWithProviders<SystemModule> {
+    registerComponents(SYSTEM_COMPONENTS);
+    return {
+      ngModule: SystemModule,
+      providers: []
+    }
+  }
+}

package/src/lib/views/_views.theme.scss

@@ -0,0 +1,11 @@
+@mixin cube-views-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .view:after {
+    background: mat-color($mat-gray, if($is-dark-theme, 900, 50));
+    content: '\00a0';
+  }
+}

package/src/lib/views/cube/_sum.theme.scss

@@ -0,0 +1,59 @@
+@mixin cube-view-sum-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $next-color: mat-color($accent, 400);
+  $prev-color: mat-color($accent, 400);
+  $current-color: mat-color($primary);
+
+  $negative: mat-color($warn);
+  $positive: mat-color($mat-green);
+
+  .level {
+    cursor: default;
+    border-color: mat-color($mat-gray, 500);
+
+    &.next-level {
+      /*    color: $next-color;
+    border-color: $next-color
+*/
+    }
+
+    &.current-level {
+      color: $current-color;
+      border-color: $current-color;
+    }
+
+    &.prev-level {
+      /*    color: $prev-color;
+    border-color: $prev-color
+*/
+    }
+
+    &:hover {
+      background: mat-color($mat-gray, if($is-dark-theme, 900, 50));
+    }
+
+    .bar {
+      .value {
+        background: mat-color($mat-green, 600);
+      }
+
+      .overflow {
+        border-color: mat-color($mat-gray, 400);
+        /*border-left-width: 0 !important;*/
+      }
+
+      &:not(.available) .overflow {
+        background: mat-color($warn, 900);
+      }
+    }
+  }
+
+  [dir=rtl] .level .bar .available {
+/*    border-left-width: 1px !important;
+    border-right-width: 0 !important;
+*/  }
+}

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

@@ -0,0 +1,18 @@
+<ng-container *ngIf="hasdata; else none">
+  <ng-container [ngSwitch]="isAccum">
+    <bizdoc-cube-accum *ngSwitchCase="true" [chartType]="chartType" [width]="width" [scope]="scope"
+                       (explore)="explore($event)"
+                       [cube]="cube.name"
+                       [filters]="filters"
+                       [xAxis]="xAxis"></bizdoc-cube-accum>
+    <bizdoc-cube-chart *ngSwitchDefault [cube]="cube.name"
+                       [xAxis]="xAxis" [series]="series" [indices]="indices"
+                       [filters]="filters"
+                       [chartType]="chartType" [indexChartType]="indexChartType"
+                       [width]="width" [scope]="scope"
+                       (explore)="explore($event)"></bizdoc-cube-chart>
+  </ng-container>
+</ng-container>
+<ng-template #none>
+  <bizdoc-none icon="insert_chart_outlined" subtitle="NothingHere"></bizdoc-none>
+</ng-template>

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

@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { BizDoc } from '../../core/decorators';
+import { isArray } from '../../core/functions';
+import { AxesMap, ChartType } from '../../core/models';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { CubeService, ScopeType } from '../../cube/cube.service';
+import { AxisClickEvent } from '../../cube/declarations';
+import { DocumentViewRef } from '../document-view-ref';
+import { CubeBase } from './cube-base';
+
+@Component({
+  templateUrl: './chart.component.html',
+})
+@BizDoc({
+  selector: 'bizdoc-chart-view'
+})
+export
+  class CubeChartViewComponent extends CubeBase<Options> {
+  xAxis: string | string[];
+  series: string | string[];
+  width: number;
+  chartType?: ChartType;
+  indexChartType?: ChartType;
+  indices: string | string[];
+  filters: AxesMap;
+  isAccum: boolean;
+  constructor(session: SessionService,
+    viewRef: DocumentViewRef<Options>,
+    service: CubeService,
+    private _router: RouterImpl) {
+    super(viewRef, service, session);
+    viewRef.resize.subscribe(d => this.width = d.width);
+  }
+  onViewBind() {
+    const { scope, xAxis, series, indices, chartType, indexChartType } = this._viewRef.options;
+    if (!xAxis) throw 'chart view reqires xAxis';
+    this.xAxis = xAxis,
+      this.chartType = chartType,
+      this.indexChartType = indexChartType,
+      this.indices = indices,
+      this.series = series,
+      this.scope = scope;
+    this.filters = { ...this.axes };
+    if (isArray(xAxis))
+      xAxis.forEach(x => delete this.filters[x]);
+    else
+      delete this.filters[xAxis];
+    if (series) {
+      if (isArray(series))
+        series.forEach(x => delete this.filters[x]);
+      else
+        delete this.filters[series];
+    }
+    switch (chartType) {
+      case 'Pie':
+      case 'Doughnut':
+      case 'HalfDoughnut':
+      case 'Funnel':
+        this.isAccum = true;
+    }
+  }
+  /**
+   *
+   * @param evt
+   */
+  explore(evt: AxisClickEvent) {
+    const { axes, index } = evt;
+    this._router.navigate(['cube', this.cube.name, 'explore'],
+      {
+        group: this.group,
+        queryParams: { ...this.axes, ...axes },
+        state: { index }
+      });
+  }
+}
+
+interface Options {
+  xAxis: string | string[];
+  series?: string | string[];
+  indices?: string | string[];
+  aggregate?: string[];
+  chartType?: ChartType;
+  indexChartType?: ChartType;
+  scope?: ScopeType;
+}

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

@@ -0,0 +1,126 @@
+import { Directive } from "@angular/core";
+import { AxesMap, Cube, CubeEntry, DocumentModel } from "../../core/models";
+import { SessionService } from "../../core/session.service";
+import { DocumentViewRef } from "../document-view-ref";
+
+import { CubeService, Pattern, ScopeType } from '../../cube/cube.service';
+import { DocumentViewComponent } from "../../core/base";
+import { isArray, isString } from "../../core/functions";
+
+type ConsolidatedModel = {
+  [cube: string]: {
+    [axis: string]: string | string[];
+  };
+};
+
+@Directive()
+export abstract class CubeBase<O extends Options> implements DocumentViewComponent {
+  patterns: Pattern[];
+  pattern: Pattern;
+  scope: ScopeType;
+  loading: boolean;
+  axes: AxesMap;
+  anyFilters: boolean;
+  model: DocumentModel<any>;
+  originalAxes: AxesMap;
+  alternate: Cube[];
+  cube: Cube;
+  hasdata: boolean;
+  title: string;
+  private _consolidateData: ConsolidatedModel;
+  constructor(
+    protected _viewRef: DocumentViewRef<O>,
+    protected _service: CubeService,
+    protected _session: SessionService, private _none?: boolean) {
+  }
+  onBind(model: DocumentModel<any>) {
+    this.model = model;
+    if (model.cubes.length) {
+      this._consolidate();
+
+      const ids = Object.keys(this._consolidateData);
+
+      const cube = this._session.profile.cubes.find(c => c.name === ids[0]);
+
+      this.hasdata = true;
+
+      this.switchTo(cube);
+    }
+    else if(!this._none)
+      this._viewRef.hidden = true;
+  }
+  abstract onViewBind();
+  switchAxes(axes?: AxesMap) {
+    this._consolidate(axes);
+
+    this.originalAxes = this._consolidateData[this.cube.name];
+
+    this.axes = this.aggregate(this.originalAxes);
+  }
+  drop(axes: string | string[]) {
+    if (isString(axes))
+      delete this.axes[axes];
+    else axes.forEach(s => delete this.axes[s]);
+  }
+  /**
+   * 
+   * @param cube
+   */
+  switchTo(cube: Cube) {
+    const ids = Object.keys(this._consolidateData);
+
+    if (ids.length > 1)
+      this.alternate = this._session.profile.cubes.filter(c => ids.indexOf(c.name) > -1 && c != cube);
+
+    this.cube = cube;
+
+    this.originalAxes = this._consolidateData[cube.name];
+
+    this.axes = this.aggregate(this.originalAxes);
+
+    this.onViewBind();
+  }
+  private _consolidate(h?: AxesMap) {
+    const consolidate = {} as ConsolidatedModel;
+    let cube: Cube;
+    // collect
+    this.model.cubes.forEach(e => {
+      if (!consolidate[e.cube])
+        consolidate[e.cube] = {};
+      if (!cube || cube.name !== e.cube)
+        cube = this._session.profile.cubes.find(c => c.name === e.cube);
+      let i = 0;
+      while (i < cube.axes.length) {
+        let name = cube.axes[i].name, axis = e.axes[i], val = consolidate[e.cube][name];
+        if (!val)
+          consolidate[e.cube][name] = axis;
+        else if ((isString(val) && val !== axis) || (isArray(val) && val.indexOf(axis) < 0)) {
+          if (h && !Object.keys(h).every(a => e[a] === h[a]))
+            continue;
+          if (isArray(val)) val.push(axis);
+          else consolidate[e.cube][name] = [val, axis];
+        }
+        i++;
+      }
+    });
+    this._consolidateData = consolidate;
+  }
+  protected async getAggregateLabel() {
+    if (!this._viewRef.options.aggregate)
+      return null;
+    const axes = {};
+    this._viewRef.options.aggregate.forEach(a => axes[a] = this.originalAxes[a]);
+    return await this._service.nameOf(axes, this.cube.name).
+      toPromise();
+  }
+  protected aggregate(originalAxes: AxesMap): AxesMap {
+    const axes = { ...originalAxes };
+    if (this._viewRef.options.aggregate)
+      this._viewRef.options.aggregate.forEach(a => delete axes[a]);
+    return axes;
+  }
+  get group() { return `#${this.model.number}` }
+}
+interface Options {
+  aggregate?: string[];
+}

package/src/lib/views/cube/explore.component.html

@@ -0,0 +1,33 @@
+<ng-container *ngIf="hasdata">
+  <div class="row toolbar">
+    <ng-container *ngIf="alternate">
+      <button mat-button [matMenuTriggerFor]="cmenu">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>
+      <mat-menu #cmenu>
+        <button mat-menu-item *ngFor="let a of alternate"
+                (click)="switchTo(a)">
+          {{a.title}}
+        </button>
+      </mat-menu>
+    </ng-container>
+    <!-- filters -->
+    <ng-container *ngFor="let f of filters">
+      <button mat-button [matMenuTriggerFor]="fmenu">{{axes[f.name] | typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>
+      <mat-menu #fmenu xPosition="before">
+        <button mat-menu-item *ngFor="let kv of sources[f.name] | async"
+                (click)="filter(f.name, kv.key, kv.value)">
+          {{kv.value}}
+        </button>
+      </mat-menu>
+    </ng-container>
+    <span class="divider"></span>
+    <button mat-icon-button (click)="items.paginator.previousPage()" [matTooltip]="'PrevPage' | translate" [attr.aria-label]="'PrevPage' | translate" [disabled]="!items.paginator.hasPreviousPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+    <button mat-icon-button (click)="items.paginator.nextPage()" [matTooltip]="'NextPage' | translate" [attr.aria-label]="'NextPage' | translate" [disabled]="!items.paginator.hasNextPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_right</mat-icon></button>
+  </div>
+  <div class="loading-view" *ngIf="loading">
+    <mat-spinner color="accent"></mat-spinner>
+  </div>
+  <bizdoc-cube-explore #items [cube]="cube.name" [axes]=axes
+                       (explore)="item($event)"
+                       (loadingChange)="loading = $event"
+                       [scope]="scope"></bizdoc-cube-explore>
+</ng-container>

package/src/lib/views/cube/explore.component.ts

@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DatasourceService } from '../../core/datasource.service';
+import { BizDoc } from '../../core/decorators';
+import { isArray } from '../../core/functions';
+import { ChartType, CubeAxis, DocumentModel } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { CubeService, ScopeType } from '../../cube/cube.service';
+import { ExploreItemEvent } from '../../cube/explore/explore-items.component';
+import { DocumentViewRef } from '../document-view-ref';
+import { CubeBase } from './cube-base';
+
+@Component({
+  templateUrl: './explore.component.html',
+})
+@BizDoc({
+  selector: 'bizdoc-explore-view'
+})
+export
+  class CubeExploreViewComponent extends CubeBase<Options> {
+  readonly sources: { [axis: string]: Observable<{ key: string; value: any; }[]>; } = {};
+  filters: CubeAxis[];
+  constructor(viewRef: DocumentViewRef<Options>,
+    private _sb: PromptService,
+    private _router: RouterImpl,
+    service: CubeService,
+    private _ds: DatasourceService,
+    session: SessionService) {
+    super(viewRef, service, session);
+  }
+  onViewBind() {
+    const { scope, filters } = this._viewRef.options;
+    this.scope = scope;
+    this.filters = this.cube.axes.filter(a => isArray(filters) ?
+      filters.indexOf(a.name) > -1 :
+      a.name === filters);
+    this.filters.forEach(f =>
+      this.sources[f.name] = this._ds.all(f.dataType)
+    );
+  }
+  /**
+ *
+ * @param value
+ */
+  filter(name: string, value: string | number, title: string) {
+    const axes = { ...this.axes };
+    axes[name] = value;
+    this.anyFilters = true;
+    this.axes = axes;
+  }
+  reset() {
+    this.axes = super.aggregate(this.originalAxes);
+    this.anyFilters = false;
+  }
+  item(evt: ExploreItemEvent) {
+    const { keys } = evt;
+    this.loading = true;
+    this._service.item(this.cube.name, this.axes, keys).subscribe(item => {
+      this._router.navigate(['cube', this.cube.name, 'explore', 'i', evt.template, keys[0]], {
+        queryParams: this.axes,
+        state: { item },
+        group: this.group,
+      });
+      this.loading = false;
+    }, e => {
+      this.loading = false;
+      this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+    });
+  }
+}
+interface Options {
+  aggregate?: string[];
+  filters: string[];
+  scope?: ScopeType;
+}

package/src/lib/views/cube/matrix.component.html

@@ -0,0 +1,42 @@
+<ng-container *ngIf="hasdata; else none">
+  <div class="row toolbar">
+    <ng-container *ngIf="alternate">
+      <button mat-button [matMenuTriggerFor]="cmenu">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>
+      <mat-menu #cmenu>
+        <button mat-menu-item *ngFor="let a of alternate"
+                (click)="switchTo(a)">
+          {{a.title}}
+        </button>
+      </mat-menu>
+    </ng-container>
+    <span class="divider"></span>
+    <!-- title -->
+    <button mat-icon-button [matMenuTriggerFor]="options" *ngIf="patterns && patterns.length"><mat-icon [class.filled]="pattern">filter_alt</mat-icon></button>
+    <mat-menu #options xPosition="before">
+      <!-- patterns -->
+      <button mat-menu-item *ngFor="let p of patterns" (click)="patternChange(p)">{{p.title}}</button>
+    </mat-menu>
+    <button mat-icon-button (click)="reset()" [disabled]="!pattern" [matTooltip]="'Clear' | translate">
+      <mat-icon>clear_all</mat-icon>
+    </button>
+    <!-- filters -->
+    <ng-container *ngFor="let f of filters">
+      <button mat-button [matMenuTriggerFor]="fmenu">{{axes[f.name] | typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>
+      <mat-menu #fmenu xPosition="before">
+        <button mat-menu-item *ngFor="let kv of sources[f.name] | async"
+                (click)="filter(f.name, kv.key, kv.value)">
+          {{kv.value}}
+        </button>
+      </mat-menu>
+    </ng-container>
+  </div>
+  <div class="loading-view" *ngIf="loading">
+    <mat-spinner color="accent"></mat-spinner>
+  </div>
+  <bizdoc-cube-matrix-table [cube]="cube" [xAxis]="xAxis" [serie]="serie" [indices]="indices" [sum]=sum
+                          [axes]="axes" [scope]="scope"
+                          (explore)='explore($event)' [(loading)]="loading"></bizdoc-cube-matrix-table>
+</ng-container>
+<ng-template #none>
+  <bizdoc-none icon="insert_chart_outlined" subtitle="NothingHere"></bizdoc-none>
+</ng-template>

package/src/lib/views/cube/matrix.component.ts

@@ -0,0 +1,116 @@
+import { Component, ViewChild } from "@angular/core";
+import { DocumentViewComponent } from "../../core/base";
+import { DatasourceService } from "../../core/datasource.service";
+import { BizDoc } from "../../core/decorators";
+import { AxesMap, CubeAxis } from "../../core/models";
+import { SessionService } from "../../core/session.service";
+import { RouterImpl } from "../../core/router";
+import { CubeService, Pattern, ScopeType } from "../../cube/cube.service";
+import { DocumentViewRef } from "../document-view-ref";
+import { Observable } from "rxjs";
+import { CubeBase } from "./cube-base";
+import { isArray } from "../../core/functions";
+import { CubeMatrixTableComponent } from "../../cube/matrix/table.component";
+
+@Component({
+  templateUrl: 'matrix.component.html',
+  host: { class: 'view' },
+  styles: [`:host {
+padding: 0 8px;
+}`]
+})
+@BizDoc({
+  selector: 'bizdoc-cube-matrix'
+})
+export class CubeDocumentMatrixComponent extends CubeBase<Options> implements DocumentViewComponent {
+  @ViewChild(CubeMatrixTableComponent, { static: true }) table: CubeMatrixTableComponent;
+  readonly sources: { [axis: string]: Observable<{ key: string; value: any; }[]>; } = {};
+  filters: CubeAxis[];
+  indices?: string | string[];
+  xAxis: string;
+  serie: string;
+  sum?: {
+    xAxis?: string | number;
+    serie?: string | number;
+    title: string;
+  };
+  constructor(
+    viewRef: DocumentViewRef<Options>,
+    private _router: RouterImpl,
+    service: CubeService,
+    private _ds: DatasourceService,
+    session: SessionService) {
+    super(viewRef, service, session, true);
+  }
+
+  onViewBind() {
+    const { xAxis, serie, indices, sum, scope, filters } = this._viewRef.options;
+    if (!xAxis || !serie) throw 'xAxis and serie required';
+    this.xAxis = xAxis;
+    this.serie = serie;
+    this.indices = indices;
+    this.sum = sum;
+    this.scope = scope;
+
+    this._service.patterns(this.cube.name).subscribe(p => this.patterns = p);
+    /** one or more axis */
+    this.filters = this.cube.axes.filter(a => isArray(filters) ?
+      filters.indexOf(a.name) > -1 :
+      a.name === filters);
+    this.filters.forEach(f =>
+      this.sources[f.name] = this._ds.all(f.dataType)
+    );
+  }
+
+  explore(axes: AxesMap) {
+    this._router.navigate(['cube', this.cube.name, 'explore'], {
+      queryParams: axes,
+      group: this.group
+    });
+
+  }
+  /**
+ *
+ * @param value
+ */
+  filter(name: string, value: string | number, title: string) {
+    const axes = { ...this.axes };
+    axes[name] = value;
+    this.anyFilters = true;
+    this.axes = axes;
+  }
+  /**
+    *
+    * @param pattern
+    */
+  patternChange(pattern: Pattern) {
+    const axes = { ...pattern.axes };
+    this._service.base(this.cube.name, axes, this.originalAxes);
+    this.axes = axes;
+    this.anyFilters = true;
+    this.title = pattern.title;
+    this.pattern = pattern;
+  }
+
+  reset() {
+    this.axes = super.aggregate(this.originalAxes);
+    this.anyFilters = false;
+    this.pattern = null;
+    this.title = null;
+  }
+}
+
+export interface Options {
+  filters: string[];
+  sum: {
+    xAxis?: string | number;
+    serie?: string | number;
+    title: string;
+  };
+  indices: string[];
+  aggregate: string[];
+  group: string[];
+  xAxis: string;
+  serie: string;
+  scope?: ScopeType;
+}

package/src/lib/views/cube/parallel.component.html

@@ -0,0 +1,17 @@
+<div *ngIf="items.length" class="row">
+  <div *ngFor="let s of items" class="element">
+    <ejs-sparkline [width]='width' height='100px' [type]='s.chartType' [id]="s.data.name"
+                   [dataSource]="s.data.points" xName="name"
+                   yName="y" [palette]="s.palette" [format]="format"
+                   valueType="Category"
+                   [enableRtl]="enableRtl"
+                   [border]="s.border"
+                   [fill]="s.fill"
+                   [axisSettings]="axisSettings"
+                   [markerSettings]="s.markerSettings"
+                   (pointRegionMouseClick)="sprklineClick(s, $event)"
+                   [tooltipSettings]="s.tooltipSettings">
+    </ejs-sparkline>
+    <h4 class="mat-h4">{{s.data.title}}</h4>
+  </div>
+</div>

package/src/lib/views/cube/parallel.component.scss

@@ -0,0 +1,13 @@
+:host {
+  padding: 8px;
+}
+
+.element {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  align-items: center;
+  flex: 1 1 auto;
+}