SUPPORT-9111: commit

frontend/src/resources/css/components-business-metrics.css

@@ -420,6 +420,33 @@
     width: 35%;
     padding-right: 0;
 }
+/* Default Tooltip Styles in Chart.js */
+.webbpm.ervu_business_metrics #chartjs-tooltip {
+    position: absolute;
+    color: white;
+    border-radius: 4px;
+    padding: 6px;
+    font: normal 12px 'Golos';
+    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_business_metrics #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_business_metrics #chartjs-tooltip .tooltip-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
 .webbpm.ervu_business_metrics .graph-row-left ervu-chart-v2 {
     margin-top: -30px;
 }

frontend/src/resources/template/ervu_business_metrics/ErvuChartTooltip.html

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

frontend/src/resources/template/ervu_business_metrics/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_business_metrics/component/chart/ErvuChartTooltip.ts

@@ -0,0 +1,51 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges
+} from '@angular/core';
+import {Visible} from "@webbpm/base-package";
+import {TooltipModel} from "chart.js";
+import {color} from "chart.js/helpers";
+
+@Component({
+             moduleId: module.id,
+             selector: 'ervu-chart-tooltip',
+             templateUrl: `./../../../../../src/resources/template/ervu_business_metrics/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_business_metrics/component/chart/ErvuChartV2.ts

@@ -4,10 +4,11 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Input
+  Input,
+  ViewChild
 } from "@angular/core";
 
-import {Chart as ChartJs, ChartType, DefaultDataPoint} from "chart.js";
+import {Chart as ChartJs, ChartType, DefaultDataPoint, TooltipModel} from "chart.js";
 import "chartjs-adapter-moment";
 import {
   AdvancedProperty, ChartConfigDto,
@@ -23,6 +24,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,
@@ -88,6 +90,14 @@ 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;
@@ -214,7 +224,7 @@ 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 = this.getTooltipConfiguration();
 
     if (this.title && this.title.text) {
       chartOptions.plugins.title = this.title;
@@ -303,17 +313,6 @@ export class ErvuChartV2 extends Control implements Filterable {
       }
     }
 
-    chartConfig.tooltips = {
-      callbacks: {
-        title: function (tooltipItem, data) {
-          return data.labels[tooltipItem[0].index]
-        },
-        label: function (tooltipItem, data) {
-          let dataset = data.datasets[tooltipItem.datasetIndex];
-          return dataset.label + ": " + dataset.data[tooltipItem.index];
-        }
-      }
-    };
     this.chartConfig = chartConfig;
   }
 
@@ -414,6 +413,29 @@ export class ErvuChartV2 extends Control implements Filterable {
     this.chart = new ChartJs(canvasEl, jQuery.extend(true, chartConfig, chartData));
   }
 
+  //General config tooltip.
+  private getTooltipConfiguration() {
+    return {
+      enabled: false,
+      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();
+        }
+      }
+    };
+  }
+
   clear() { //todo SUPPORT-4909
     throw new UnsupportedOperationError("Unsupported operation");
   }

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

@@ -24,6 +24,7 @@ import {TokenInterceptor} from "./interceptor/token-interceptor.service";
 import {DropdownTreeViewComponent} from "../../component/field/DropdownTreeViewComponent";
 import {DropdownTreeviewSelectComponent} from "../../component/external/ngx-treeview/dropdown-treeview-select/dropdown-treeview-select.component";
 import {TreeviewModule} from "ngx-treeview";
+import {ErvuChartTooltip} from "../../ervu_business_metrics/component/chart/ErvuChartTooltip";
 
 registerLocaleData(localeRu);
 export const DIRECTIVES = [
@@ -34,7 +35,8 @@ export const DIRECTIVES = [
   forwardRef(() => ErvuChartV2),
   forwardRef(() => FilterContainer),
   forwardRef(() => DropdownTreeViewComponent),
-  forwardRef(() => DropdownTreeviewSelectComponent)
+  forwardRef(() => DropdownTreeviewSelectComponent),
+  forwardRef(() => ErvuChartTooltip)
 ];
 
 @NgModule({