SUPPORT-8932: commit

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; 
+    border-left: 0;
-    background-color: var(--bg-brick);   
+    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/component/chart/ErvuChartTooltip.ts

@@ -0,0 +1,58 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  SimpleChanges
+} from '@angular/core';
+import {Control, Visible} from "@webbpm/base-package";
+
+@Component({
+             moduleId: module.id,
+             selector: 'ervu-chart-tooltip',
+             templateUrl: `./../../../../../src/resources/template/ervu-dashboard/ErvuChartTooltip.html`,
+             changeDetection: ChangeDetectionStrategy.OnPush
+           })
+export class ErvuChartTooltip extends Control {
+  @Input()
+  public tooltipModel: any;
+  @Input()
+  public visible: boolean = false;
+  @Input()
+  public position: any;
+
+  @Visible("false")
+  public items: any[];
+  @Visible("false")
+  public bodyLines: string[][] = [];
+  @Visible("false")
+  public titleLines: string[] = [];
+
+  constructor(el: ElementRef, cd: ChangeDetectorRef) {
+    super(el, cd)
+  }
+
+  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 = this.tooltipModel;
+    this.titleLines = tooltipModel.title || [];
+    this.bodyLines = tooltipModel.body.map((bodyItem) => bodyItem.lines);
+
+    this.items = this.bodyLines.map((body, i) => ({
+      title: this.titleLines[i] || '',
+      body: body,
+      color: this.tooltipModel.labelColors[i].backgroundColor
+    }));
+  }
+}

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

@@ -4,7 +4,8 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Input
+  Input,
+  ViewChild
 } from "@angular/core";
 
 import {Chart as ChartJs, ChartData, ChartType, DefaultDataPoint} from "chart.js";
@@ -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,6 +95,11 @@ export class ErvuChartV2 extends Control implements Filterable {
   @AdvancedProperty()
   public noDataStyle: string = "rgb(100,100,100)";
 
+  @ViewChild(ErvuChartTooltip)
+  public chartTooltip: ErvuChartTooltip;
+
+  private tooltipPosition: any;
+  private tooltipModel;
   private chartRpcService: ChartV2RpcService;
   private filterMap: { [key: string]: Filter } = {};
   private loadEnabled: boolean = true;
@@ -217,7 +224,24 @@ 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: !this.showTooltip,
+        external: (context) => {
+          if (!context || !this.chartTooltip) {
+            this.visible = false;
+            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({