@bizdoc/core 1.14.5 → 1.14.9

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

@@ -0,0 +1,63 @@
+@mixin cube-sum-theme($theme) {
+  $primary: mat.get-color-from-palette($theme, primary);
+  $accent: mat.get-color-from-palette($theme, accent);
+  $warn: mat.get-color-from-palette($theme, warn);
+  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
+  $green: mat.define-palette(mat.$green-palette);
+  $gray: mat.define-palette(mat.$gray-palette);
+
+  $next-color: mat.get-color-from-palette($accent, 400);
+  $prev-color: mat.get-color-from-palette($accent, 400);
+  $current-color: mat.get-color-from-palette($primary);
+
+  $negative: mat.get-color-from-palette($warn);
+  $positive: mat.get-color-from-palette($green);
+
+  .level {
+    cursor: default;
+    border-color: mat.get-color-from-palette($gray, 500);
+    color: if($is-dark-theme, white, black);
+
+    &.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.get-color-from-palette($gray, if($is-dark-theme, 900, 50));
+    }
+
+    .bar {
+      .value {
+        background: mat.get-color-from-palette($green, 600);
+      }
+
+      .overflow {
+        border-color: mat.get-color-from-palette($gray, 400);
+        /*border-left-width: 0 !important;*/
+      }
+
+      &:not(.available) .overflow {
+        background: mat.get-color-from-palette($warn, 900);
+      }
+    }
+  }
+
+  [dir=rtl] .level .bar .available {
+    /*    border-left-width: 1px !important;
+    border-right-width: 0 !important;
+*/
+  }
+}

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

@@ -0,0 +1,60 @@
+  <!-- levels -->
+<div class="row">
+  <div *ngIf="prev" class="level prev-level">
+    <div class="level-header row">
+      <mat-icon class="cliclable mat-icon-rtl-mirror" [inline]=true (click)="goprev()" *ngIf="back">keyboard_arrow_left</mat-icon>
+      <div div class="mat-h1 title">
+        {{'PrevLevel'| translate}}
+      </div>
+      <span class="divider"></span>
+      <mat-icon *ngIf="forward" class="cliclable mat-icon-rtl-mirror" [inline]=true (click)="gonext()">keyboard_arrow_right</mat-icon>
+    </div>
+    <ng-container *ngTemplateOutlet="level; context: {use: prev}"></ng-container>
+  </div>
+  <div *ngIf="current" class="level current-level">
+    <div class="level-header row">
+      <div div class="mat-h1 title">
+        {{'CurrentLevel'| translate : primaryAxis.title}}
+      </div>
+      <span class="divider"></span>
+      <mat-icon [bizdocTooltip]="help" *ngIf="help" [inline]="true">help_outline</mat-icon>
+    </div>
+    <ng-container *ngTemplateOutlet="level; context: {use: current}"></ng-container>
+  </div>
+  <div *ngIf="next" class="level next-level">
+    <div class="level-header">
+      <div div class="mat-h1 title">
+        {{'NextLevel'| translate}}
+      </div>
+    </div>
+    <ng-container *ngTemplateOutlet="level; context: {use: next}"></ng-container>
+  </div>
+</div>
+<!-- level -->
+<ng-template #level let-use="use" let-help="help">
+  <div>
+    <h2 class="mat-h1" [class.cliclable]="use.value !== 0" (click)="explore(use)">{{use.title}}</h2>
+    <div class="row">
+      <h3 class="mat-h1" [class.cliclable]="use.value !== 0" (click)="explore(use)">{{use.value | currency : currencyCode : 'symbol' : digitsInfo}}</h3>
+      <span class="divider"></span>
+      <div *ngIf="use.chain && use.value !== use.chain.value">
+        <span *ngIf="use.value !== 0 && use.chain.value !== 0">{{Math.round(use.value / use.chain.value * 100) }}%</span>
+        <mat-icon>{{use.value > use.chain.value ? 'trending_up':'trending_down' }}</mat-icon>
+      </div>
+    </div>
+  </div>
+  <!-- -->
+  <div class="row">
+    <div *ngFor="let i of use.indices" class="index">
+      <h4 class="mat-h3 title">{{i.title}}</h4>
+      <h5 class="mat-h3" [class.cliclable]="i.value !== 0" (click)="explore(use, i.name)">{{i.value | currency : currencyCode : 'symbol' : digitsInfo}}</h5>
+    </div>
+  </div>
+  <div class="bar" *ngIf="use.indices.length" [class.available]="use.percent < 100">
+    <div class="value" [style.flexBasis]="Math.round(use.percent < 100 ?
+            100 - use.percent :
+            100 / use.percent * 100) + '%'"
+         [@bar]="use.animation"></div>
+    <div class="overflow" *ngIf="use.percent > 0"></div>
+  </div>
+</ng-template>

package/src/lib/cube/sum/sum.component.scss

@@ -0,0 +1,94 @@
+:host {
+  padding: 0 8px;
+}
+
+.level {
+  border-width: thin;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  padding: 8px;
+  margin: 3px;
+  -ms-flex: 1 1 0;
+  -webkit-flex: 1 1 0;
+  flex: 1 1 0;
+  border-style: solid;
+
+  .cliclable {
+    cursor: pointer;
+  }
+
+  &.current-level {
+  }
+
+  &.next-level {
+    border-style: dashed;
+  }
+
+  .level-header {
+    align-items: center;
+
+    .title {
+      margin: 0;
+      line-height: 22px;
+      font-size: inherit;
+      font-variant-caps: all-petite-caps
+    }
+  }
+
+
+  h3 {
+    margin: 0;
+    font-size: x-large;
+  }
+
+  h2 {
+    font-weight: 400;
+    font-size: larger;
+    margin: 0;
+  }
+
+  .percent {
+    display: flex;
+    align-items: center;
+  }
+
+  .index {
+    padding: 0 4px;
+
+    h5 {
+      margin: 0
+    }
+
+    h4 {
+      margin: 0
+    }
+  }
+
+  .bar {
+    display: flex;
+
+    .value, .overflow {
+      height: 12px;
+    }
+
+    .value {
+      flex: 0 0 0%;
+    }
+
+    .overflow {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+
+    &.available {
+      .value {
+      }
+
+      .overflow {
+        border-width: 1px;
+        border-style: dashed;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,437 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from "@angular/core";
+import { HttpErrorResponse } from "@angular/common/http";
+import { animate, style, transition, trigger } from "@angular/animations";
+import { SessionService } from "../../core/session.service";
+import { CubeService, errResource, Series } from "../../cube/cube.service";
+import { DatasourceService } from "../../core/datasource.service";
+import { PromptService } from "../../core/prompt.service";
+import { AxesMap, AxisType, Cube, CubeAxis } from "../../core/models";
+import { isArray } from "../../core/functions";
+import { ScopeType } from "../../core/configuration";
+
+@Component({
+  selector: 'bizdoc-cube-sum',
+  templateUrl: 'sum.component.html',
+  styleUrls: ['sum.component.scss'],
+  animations: [trigger('bar', [
+    transition('*<=>*', [style({
+      flexBasis: '{{startWidth}}%'
+    }), animate('500ms ease')], { params: { startWidth: 100 } }),
+  ])]
+})
+export class CubeSumComponent implements OnChanges {
+  @Input()
+  xAxis!: string;
+  @Input()
+  periodPolicy?: 'Strict' | 'Fish';
+  @Input()
+  parentAxis: string;
+  @Input()
+  filters!: AxesMap;
+  @Input()
+  cube: string;
+  @Input()
+  indices: string[] | string;
+  @Input()
+  scope: ScopeType;
+  @Output('explore')
+  readonly onExplore = new EventEmitter<ExploreEvent>();
+  back = true;
+  forward = false;
+  primaryAxis: CubeAxis;
+  next: Level;
+  current: Level;
+  prev: Level;
+  help: string;
+  currencyCode: string;
+  digitsInfo: string;
+  loading: boolean;
+  readonly Math = Math;
+  private _cube: Cube;
+  private _parentAxis: CubeAxis;
+  private _results: Series[];
+  private _scoperesults: Series[];
+  private _scope: string;
+  constructor(
+    private _ds: DatasourceService,
+    private _service: CubeService,
+    private _sb: PromptService,
+    private _session: SessionService) {
+  }
+  ngOnChanges(_: SimpleChanges): void {
+    this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
+    this.currencyCode = this._cube.currencyCode;
+    this.digitsInfo = this._service.digitsInfo;
+    this.primaryAxis = this._cube.axes.find(a => a.name === this.xAxis);
+    if (!this.primaryAxis) throw 'xAxis';
+    if (this.parentAxis) this._parentAxis = this._cube.axes.find(a => a.name === this.parentAxis);
+    if (!this.indices) this.indices = this._cube.indices.map(i => i.name);
+    else if (!isArray(this.indices)) this.indices = [this.indices];
+    const originalValue = this.filters[this.xAxis];
+    const axis = isArray(originalValue) ? originalValue[0] : originalValue;
+    if (this.periodPolicy === 'Strict')
+      this._strict(axis);
+    else
+      this._fish(axis);
+  }
+  private async _strict(axis: AxisType) {
+    const keys = await this._ds.keys(this.primaryAxis.dataType).toPromise(), keyIndex = keys.indexOf(axis as string);
+
+    const filters = { ...this.filters };
+    const axes = [axis];
+    if (keyIndex > 0)
+      axes.push(keys[keyIndex - 1]);
+    if (keyIndex === keys.length - 1)
+      axes.push(keys[keyIndex + 1]);
+    filters[this.primaryAxis.name] = axis;
+    const results = await this._service.series(this._cube.name, this.primaryAxis.name, {
+      indices: this.indices,
+      scope: this.scope,
+      filters
+    }).toPromise().catch(this._handleErr.bind(this));
+    for (var i = 0; i < results.length; i++) {
+      const { index, title, points } = results[i];
+      for (var j = 0; j < points.length; j++) {
+        let point = points[j], { x, y, name: axis } = point;
+        if (x === axis) {
+          if (index)
+            this.current.indices.push({ name: index, title, value: y });
+
+          else
+            this.current = { axis: x, name: axis, value: y, indices: [] } as any;
+        }
+        else if (x === keys[keyIndex - 1]) {
+          if (!this.prev)
+            this.prev = { axis: x, name: axis, value: 0, indices: [] } as any;
+          if (index)
+            this.prev.indices.push({ name: index, title, value: y });
+
+          else
+            this.prev.value = y;
+        }
+        else if (x === keys[keyIndex + 1]) {
+          if (!this.next)
+            this.next = { axis: x, name: axis, value: 0, indices: [] } as any;
+          if (index)
+            this.next.indices.push({ name: index, title, value: y });
+
+          else
+            this.next.value = y;
+        }
+      }
+    }
+    const parallel = async (direction: 1 | -1) => {
+      const parentKey = this.filters[this.parentAxis];
+      const parentKeys = await this._ds.keys(this._parentAxis.dataType).toPromise();
+      const index = parentKeys.indexOf((isArray(parentKey) ? parentKey[0] : parentKey) as string), scope = parentKeys[index + direction];
+      if (!scope)
+        return;
+      filters[this.parentAxis] = scope;
+      const axis = keys[keys.length + direction];
+      filters[this.primaryAxis.name] = axis;
+      const results = await this._service.series(this._cube.name, this.primaryAxis.name, {
+        indices: this.indices,
+        scope: this.scope,
+        filters
+      }).toPromise().catch(this._handleErr.bind(this));
+
+      const level: Level = { axis, indices: [], scope } as any;
+      for (var i = 0; i < results.length; i++) {
+        const { index, title, points } = results[i];
+        if (!points.length)
+          continue;
+        const [point] = points;
+        if (index === 'Index')
+          level.indices.push({ name: index, title, value: point.y });
+
+        else
+          level.title = point.name, level.value = point.y;
+      }
+      return level;
+    };
+    if (keyIndex === 0 && this.parentAxis)
+      this.prev = await parallel(-1);
+    else if (keyIndex === keys.length - 1)
+      this.next = await parallel(1);
+  }
+  private _handleErr(response: HttpErrorResponse) {
+    this._sb.error(errResource(response));
+  }
+  private async _fish(axis: AxisType) {
+    this.loading = true;
+    try {
+      const filters = { ...this.filters };
+      delete filters[this.xAxis];
+      const results = this._results = await this._service.series(this._cube.name, this.xAxis, {
+        indices: this.indices, filters,
+        scope: this.scope
+      }).
+        toPromise().catch(this._handleErr.bind(this));
+      this.current = {
+        axis,
+        value: 0,
+        indices: []
+      } as Level;
+      for (var j = 0; j < results.length; j++) {
+        let { points, index, name, title } = results[j];
+        for (let i = 0; i < points.length; i++) {
+          let point = points[i];
+          if (point.x === axis) {
+            if (index)
+              this.current.indices.push({ name: index, title, value: point.y });
+            else
+              this.current.title = point.name,
+                this.current.value = point.y;
+            if (i > 0) {
+              point = points[i - 1];
+              if (!this.prev)
+                this.prev = {
+                  axis: point.x,
+                  title: point.name,
+                  value: 0,
+                  indices: []
+                } as Level;
+              if (index) {
+                let q = i;
+                while (q > 0 && point.x !== this.prev.axis)
+                  point = points[q--];
+
+                point.x === this.prev.axis &&
+                  this.prev.indices.push({
+                    name: index, title, value: point.y
+                  });
+              }
+              else this.prev.value = point.y;
+            }
+            if (i < points.length - 1) {
+              point = points[i + 1];
+              if (!this.next)
+                this.next = {
+                  axis: point.x,
+                  title: point.name,
+                  value: 0,
+                  indices: []
+                } as Level;
+              if (index) {
+                let q = i;
+                while (q < points.length - 1 && point.x !== this.next.axis)
+                  point = points[q++];
+                point.x === this.next.axis && this.next.indices.push({
+                  name: index, title, value: point.y
+                });
+              }
+              else
+                this.next.value = point.y;
+            }
+            break;
+          }
+          else if (this.next && point.x == this.next.axis)
+            this.next.indices.push({ name: index, title, value: point.y });
+          else if (this.prev && point.x == this.prev.axis)
+            this.prev.indices.push({ name: index, title, value: point.y });
+        }
+      }
+      this._calculate(this.current);
+      this.current.chain = this.prev;
+      this.help = await this.getAggregateLabel();
+      if (!this.prev)
+        this.prev = await this._parallel(-1, this.filters[this.parentAxis]);
+      if (!this.next)
+        this.next = await this._parallel(1, this.filters[this.parentAxis]);
+      this.next && this._calculate(this.next);
+      this.prev && this._calculate(this.prev);
+    } catch (e) {
+      throw e;
+    }
+    finally {
+      this.loading = false;
+    }
+  }
+  async getAggregateLabel() {
+    const axes = { ...this.filters };
+    delete axes[this.xAxis];
+    return await this._service.nameOf(axes, this._cube.name).
+      toPromise();
+  }
+  private _calculate(level: Level) {
+    const indices = level.indices
+      .filter(i => this._cube.indices.find(m => m.name === i.name && m.accumulate !== false))
+      .sum(i => i.value);
+    const percent = indices !== 0 ?
+      Math.round(level.value / indices * 100) : 0;
+    level.percent = percent;
+    level.animation = {
+      value: percent,
+      params: {
+        startWidth: percent < 100 ?
+          100 :
+          100
+      }
+    };
+  }
+  async goprev() {
+    let alternate: Level;
+    if (!this.prev.scope)
+      alternate = this._seek(this.prev.axis, this._results, -1);
+    if (!alternate) {
+      if (this._scope === this.prev.scope)
+        alternate = this._seek(this.prev.axis, this._scoperesults, -1);
+      if (!alternate)
+        alternate = await this._parallel(-1, this.prev.scope);
+    }
+    if (alternate) {
+      this._calculate(alternate);
+      alternate.animation.params.startWidth = this.prev.percent;
+      this.prev = alternate;
+      this.forward = true;
+    }
+
+    else
+      this.back = false;
+  }
+  private _seek(axis: string, results: Series[], direction: 1 | -1) {
+    let level: Level;
+    for (var i = 0; i < results.length; i++) {
+      let { index, points, title } = results[i], j = 0;
+      while (j < points.length - 1) {
+        let point = points[j];
+        if (point.x === axis) {
+          if ((direction > 0 && j === points.length - 1) || (direction < 0 && j === 0))
+            break;
+          point = points[j + direction];
+          if (!level)
+            level = {
+              axis: point.x,
+              title: point.name,
+              indices: []
+            } as Level;
+          if (index) {
+            let q = j;
+            while (point && point.x !== level.axis)
+              point = points[q += direction];
+            point && level.indices.push({ name: index, title, value: point.y });
+            if (level.value === undefined)
+              level.value = 0;
+          }
+
+          else
+            level.value = point.y;
+          if (direction > 0 && j < points.length - 2 && points[j + 2].x !== this.current.axis)
+            this.forward = true;
+          break;
+        }
+        else if (index && level && level.axis === point.x)
+          level.indices.push({ name: index, title, value: point.y });
+        j++;
+      }
+    }
+    return level;
+  }
+  async gonext() {
+    let alternate: Level;
+    this.forward = false;
+    if (this.prev.scope)
+      alternate = this._seek(this.prev.axis, this._scoperesults, 1);
+    if (!alternate)
+      alternate = this._seek(this.prev.axis, this._results, 1);
+    if (alternate) {
+      this._calculate(alternate);
+      alternate.animation.params.startWidth = this.prev.percent;
+      this.prev = alternate;
+      this.back = true;
+    }
+
+    else
+      this.forward = false;
+  }
+  private async _parallel(direction: 1 | -1, parentKey: AxisType) {
+    if (!this._parentAxis)
+      return;
+    const parentKeys = await this._ds.keys(this._parentAxis.dataType).toPromise();
+    const
+      keyIndex = parentKeys.indexOf((isArray(parentKey) ? parentKey[0] : parentKey) as string), scope = parentKeys[keyIndex + direction];
+    if (!scope)
+      return;
+    const filters = { ...this.filters } as AxesMap;
+    filters[this.parentAxis] = scope;
+    delete filters[this.xAxis];
+    const results = this._scoperesults = await this._service.series(this._cube.name, this.xAxis, {
+      indices: this.indices, filters,
+      scope: this.scope
+    }).toPromise().catch(this._handleErr.bind(this));
+    this._scope = scope;
+    if (!results.some(s => s.points.length))
+      return;
+    const level: Level = {
+      scope,
+      indices: []
+    } as any;
+    const parentTitle = await this._ds.get(this._parentAxis.dataType, scope).toPromise();
+    for (var j = 0; j < results.length; j++) {
+      let { index, title, points, name } = results[j], q = direction > 0 ? 0 : points.length - 1, point = points[q];
+      if (index) {
+        if (level.value === undefined) {
+          level.value = 0,
+            level.title = `${point.name} ${parentTitle}`;
+          level.indices.push({ name: index, title, value: point.y });
+        }
+        else {
+          if (direction > 0) {
+            while (q > 0 && point.x !== level.axis)
+              point = points[q--];
+            q > 0 && level.indices.push({ name, title, value: point.y });
+          }
+          else {
+            while (q < points.length - 1 && point.x !== level.axis)
+              point = points[q++];
+            q < points.length - 1 && level.indices.push({ name, title, value: point.y });
+          }
+        }
+      }
+
+      else
+        level.axis = point.x,
+          level.value = point.y,
+          level.title = `${point.name} ${parentTitle}`;
+    }
+    return level;
+  }
+  /**
+   * 
+   * @param level
+   * @param index
+   */
+  explore(level: Level, index?: string) {
+    if ((!index && level.value === 0) ||
+      (index && level.indices.find(i => i.name === index).value === 0)) return;
+    const axes = { ...this.filters };
+    axes[this.xAxis] = level.axis;
+    if (level.scope)
+      axes[this.parentAxis] = level.scope;
+    this.onExplore.emit({ axes, index });
+  }
+}
+export interface ExploreEvent {
+  axes: AxesMap;
+  index?: string;
+}
+export declare type Level = {
+  indices: {
+    name: string;
+    title: string;
+    value: number;
+  }[],
+  value: number,
+  title: string,
+  axis: string
+  /** parent axis */
+  scope?: string,
+  animation: {
+    value: number,
+    params: {
+      startWidth: number
+    }
+  };
+  chain?: Level;
+  percent: number;
+};