Merge branch 'develop' of 10.10.31.70:/ervu-dashboard into develop

frontend/package-lock.json

@@ -1748,9 +1748,9 @@
       }
     },
     "@webbpm/base-package": {
-      "version": "3.192.6-SNAPSHOT-0404144846",
-      "resolved": "https://repo.micord.ru/repository/npm-all/@webbpm/base-package/-/base-package-3.192.6-SNAPSHOT-0404144846.tgz",
-      "integrity": "sha512-/sDQLq+EH5/pxySKmW62eqUJ3gILCgfPYYm68mhmYbAC2jcOaV3sUUx736zG7UussNN6IAKZum+85JYIorf2sg==",
+      "version": "3.192.7",
+      "resolved": "https://repo.micord.ru/repository/npm-all/@webbpm/base-package/-/base-package-3.192.7.tgz",
+      "integrity": "sha512-0CSs8FIpOBnccblPt3hJwLI5GeNhaocQYgCcYCiMMcZUq++6FsmsbtxxFwqikf9V5TUc9ZpLpGZxofe4XkDXug==",
       "requires": {
         "tslib": "^1.9.0"
       }

frontend/package.json

@@ -26,7 +26,7 @@
     "@angular/platform-browser-dynamic": "7.2.15",
     "@angular/router": "7.2.15",
     "@ng-bootstrap/ng-bootstrap": "4.2.2-micord.1",
-    "@webbpm/base-package": "3.192.6-SNAPSHOT-0404144846",
+    "@webbpm/base-package": "3.192.7",
     "ag-grid-angular": "29.0.0-micord.4",
     "ag-grid-community": "29.0.0-micord.4",
     "angular-calendar": "0.28.28",

frontend/src/resources/css/components-dashboard.css

@@ -790,7 +790,28 @@
     justify-content: end;
     overflow: visible;
 }
-
+/* Default Tooltip Styles in Chart.js */
+.webbpm.ervu_dashboard #chartjs-tooltip {
+    position: absolute;
+    color: var(--color-text-primary);
+    border-radius: 4px;
+    padding: 6px;
+    font: normal 12px 'Gilroy';
+    line-height: 1.2;
+    transition: all .1s ease;
+    pointer-events: none;
+    background-color: rgba(0, 0, 0, 0.9);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    z-index: 1;
+}
+.webbpm.ervu_dashboard #chartjs-tooltip .tooltip-color {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 4px;
+    border-radius: 10px;
+    border-color: var(--color-text-primary);
+}
 .webbpm.ervu_dashboard .graph-chart .chart-content {
     width: min(calc(10*var(--w-content)), 12.5rem);
     height: min(calc(7*var(--w-content)), 9rem);
@@ -1470,8 +1491,8 @@
 .webbpm.ervu_dashboard .grid-with-indents-border ag-grid-angular .ag-root .ag-cell.ag-cell-focus {
     border: 1px solid var(--color-primary-20);
     border-right: 0;
-    border-left: 0; 
-    background-color: var(--bg-brick);   
+    border-left: 0;
+    background-color: var(--bg-brick);
 }
 .webbpm.ervu_dashboard .grid-with-indents-border ag-grid-angular .ag-root .ag-cell:first-child {
     border-left: 1px solid var(--color-primary-20);

frontend/src/resources/template/ervu-dashboard/ErvuChartTooltip.html

@@ -0,0 +1,8 @@
+<div *ngIf="visible">
+    <div *ngFor="let item of items"
+         [ngStyle]=" {'left.px': this.position.left, 'top.px': this.position.top}"
+         id="chartjs-tooltip">
+        <span [style.background]="item.color" class="tooltip-color"></span>
+        {{ item.title }} {{ item.body }}
+    </div>
+</div>

frontend/src/resources/template/ervu-dashboard/ErvuChartV2.html

@@ -1,3 +1,7 @@
 <div class="chart-content" [ngStyle]="style">
     <canvas id="canvas"></canvas>
+    <ervu-chart-tooltip
+            [position]="this.tooltipPosition"
+            [tooltipModel]="this.tooltipModel">
+    </ervu-chart-tooltip>
 </div>

frontend/src/ts/ervu-dashboard/UnionAgeAndBirthDateTextScript.ts

@@ -69,6 +69,6 @@ export class UnionAgeAndBirthDateTextScript extends Behavior {
 
   private parseToIsoFormat(date: string): string {
     let strings = date.split('.');
-    return `${strings[2]}-${1}-${strings[0]}`;
+    return `${strings[2]}-${strings[1]}-${strings[0]}`;
   }
 }

frontend/src/ts/ervu-dashboard/component/chart/ErvuChartTooltip.ts

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges
+} from '@angular/core';
+import {Visible} from "@webbpm/base-package";
+import {TooltipModel} from "chart.js";
+
+@Component({
+             moduleId: module.id,
+             selector: 'ervu-chart-tooltip',
+             templateUrl: `./../../../../../src/resources/template/ervu-dashboard/ErvuChartTooltip.html`,
+             changeDetection: ChangeDetectionStrategy.OnPush
+           })
+export class ErvuChartTooltip implements OnChanges {
+  @Input()
+  public tooltipModel: TooltipModel<any>;
+  @Input()
+  public position: any;
+
+  @Visible("false")
+  public visible: boolean = false;
+  @Visible("false")
+  public items: any[];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('position' in changes) {
+      if (!this.tooltipModel || this.tooltipModel.opacity == 0 || this.tooltipModel.body.length == 0) {
+        this.visible = false;
+        return;
+      }
+      this.visible = true;
+      this.refreshContent();
+    }
+  }
+
+  public refreshContent() {
+    const tooltipModel: TooltipModel<any> = this.tooltipModel;
+    const titleLines: string[] = tooltipModel.title || [];
+    const bodyLines: any = tooltipModel.body.map((bodyItem) => bodyItem.lines);
+
+    this.items = bodyLines.map((body, i) => ({
+      title: titleLines[i] || '',
+      body: body,
+      color: this.tooltipModel.labelColors[i].backgroundColor
+    }));
+  }
+}

frontend/src/ts/ervu-dashboard/component/chart/ErvuChartV2.ts

@@ -4,10 +4,11 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Input
+  Input,
+  ViewChild
 } from "@angular/core";
 
-import {Chart as ChartJs, ChartData, ChartType, DefaultDataPoint} from "chart.js";
+import {Chart as ChartJs, ChartData, ChartType, DefaultDataPoint, TooltipModel} from "chart.js";
 import "chartjs-adapter-moment";
 import {
   AdvancedProperty,
@@ -29,6 +30,7 @@ import {ChartLegendSettings} from "./model/ChartLegendSettings";
 import {Options} from "./model/Options";
 import {ChartPlugin} from "./plugin/ChartPlugin";
 import {ChartUtils} from "./ChartUtils";
+import {ErvuChartTooltip} from "./ErvuChartTooltip";
 
 @Component({
              moduleId: module.id,
@@ -93,11 +95,19 @@ export class ErvuChartV2 extends Control implements Filterable {
   @AdvancedProperty()
   public noDataStyle: string = "rgb(100,100,100)";
 
+  @ViewChild(ErvuChartTooltip)
+  @Visible("false")
+  public chartTooltip: ErvuChartTooltip;
+  @Visible("false")
+  public tooltipPosition: any;
+  @Visible("false")
+  public tooltipModel: TooltipModel<any>;
+
   private chartRpcService: ChartV2RpcService;
   private filterMap: { [key: string]: Filter } = {};
   private loadEnabled: boolean = true;
   private filterDelegate: FilterDelegate;
-  private chartConfig;
+  private chartConfig: any;
   private plugins: ChartPlugin[] = [];
 
   private noDataPlugin = {
@@ -217,7 +227,25 @@ export class ErvuChartV2 extends Control implements Filterable {
     chartOptions.plugins = chartOptions.plugins ? chartOptions.plugins : {};
 
     chartOptions.plugins.legend = this.legend ? this.legend : {};
-    chartOptions.plugins.tooltip = {enabled: this.showTooltip};
+      chartOptions.plugins.tooltip = {
+        enabled: false, //Disables default tooltip from charjs (we'll use a custom tooltip)
+        external: (context) => {
+          if (this.showTooltip) {
+            if (!context || !this.chartTooltip) {
+              return;
+            }
+            const positionX = this.chart.canvas.offsetLeft;
+            const positionY = this.chart.canvas.offsetTop;
+
+            this.tooltipModel = context.tooltip;
+            this.tooltipPosition = {
+              'left': positionX  + context.tooltip.caretX,
+              'top': positionY + context.tooltip.caretY
+            }
+            this.cd.markForCheck();
+          }
+        }
+      };
 
     if (this.title && this.title.text) {
       chartOptions.plugins.title = this.title;

frontend/src/ts/modules/app/app.module.ts

@@ -29,6 +29,7 @@ import {ErvuFileUpload} from "../../ervu-dashboard/component/field/ErvuFileUploa
 import {FileUploadModule} from "ng2-file-upload";
 import {FilterTransferService} from "../../ervu-dashboard/FilterTransferService";
 import {CustomFilterGroup} from "../../ervu-dashboard/component/container/CustomFilterGroup";
+import {ErvuChartTooltip} from "../../ervu-dashboard/component/chart/ErvuChartTooltip";
 
 registerLocaleData(localeRu);
 export const DIRECTIVES = [
@@ -43,7 +44,8 @@ export const DIRECTIVES = [
   forwardRef(() => DropdownTreeviewSelectComponent),
   forwardRef(() => DataDateComponent),
   forwardRef(() => ErvuFileUpload),
-  forwardRef(() => CustomFilterGroup)
+  forwardRef(() => CustomFilterGroup),
+  forwardRef(() => ErvuChartTooltip)
 ];
 
 @NgModule({