fix(chart): Fixes an issue where tooltips in pie/donut charts did not…

… work anymore

Fixes an issue where the tooltip was not updated when a different series was hovered on the same x-datapoint

apps/components-e2e/src/components/chart/chart.module.ts

@@ -20,6 +20,7 @@ import { Route, RouterModule } from '@angular/router';
 import { DtChartModule } from '@dynatrace/barista-components/chart';
 import { BasicChart } from './chart/chart';
 import { ChartHighchartsUI } from './highcharts/chart-highcharts-ui';
+import { PieChart } from './pie-chart/pie-chart';
 
 const routes: Route[] = [
   { path: '', component: BasicChart },
@@ -31,10 +32,11 @@ const routes: Route[] = [
         m => m.DtE2ESelectionAreaModule,
       ),
   },
+  { path: 'pie', component: PieChart },
 ];
 
 @NgModule({
-  declarations: [BasicChart, ChartHighchartsUI],
+  declarations: [BasicChart, ChartHighchartsUI, PieChart],
   imports: [CommonModule, RouterModule.forChild(routes), DtChartModule],
   exports: [],
   providers: [],

apps/components-e2e/src/components/chart/chart/chart.e2e.ts

@@ -19,10 +19,10 @@ import { Selector } from 'testcafe';
 fixture('Highcharts Setup').page('http://localhost:4200/chart');
 
 const counter = async () => Selector('#change-detection-counter').textContent;
-const chart = Selector('.dt-chart');
+const lineChart = Selector('.line-chart');
 
 test('change detection should only trigger docheck once on init', async (testController: TestController) => {
   const previousCounter = await counter();
-  await testController.hover(chart);
+  await testController.hover(lineChart);
   await testController.expect(await counter()).eql(previousCounter);
 });

apps/components-e2e/src/components/chart/chart/chart.html

@@ -1,2 +1,2 @@
 <span id="change-detection-counter">{{ changedetectionCounter }}</span>
-<dt-chart [series]="series" [options]="options"></dt-chart>
+<dt-chart class="line-chart" [series]="series" [options]="options"></dt-chart>

apps/components-e2e/src/components/chart/pie-chart/pie-chart.e2e.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Selector } from 'testcafe';
+import { waitForAngular } from '../../../utils';
+
+const body = Selector('body');
+const pieChart = Selector('.pie-chart');
+const tooltip = Selector('.dt-chart-tooltip-overlay');
+
+fixture('Pie chart')
+  .page('http://localhost:4200/chart/pie')
+  .beforeEach(async (testController: TestController) => {
+    await testController.resizeWindow(1200, 800);
+    await waitForAngular();
+  });
+
+test('Pie charts having tooltips', async (testController: TestController) => {
+  await testController
+    .hover(pieChart, { speed: 0.2, offsetX: 560, offsetY: 130 })
+    .expect(tooltip.exists)
+    .ok()
+    .expect(tooltip.textContent)
+    .match(/25/)
+    .hover(body, { speed: 0.1, offsetY: 300 })
+    .expect(tooltip.exists)
+    .notOk();
+});
+
+test('should get the correct overlay values when hovering on the different pies', async (testController: TestController) => {
+  await testController
+    .hover(pieChart, { speed: 0.3, offsetX: 560, offsetY: 130 })
+    .expect(tooltip.textContent)
+    .match(/25/)
+    .hover(pieChart, { speed: 0.3, offsetX: 580, offsetY: 80 })
+    .expect(tooltip.textContent)
+    .match(/15/)
+    .hover(pieChart, { speed: 0.3, offsetX: 620, offsetY: 140 })
+    .expect(tooltip.textContent)
+    .match(/55/);
+});

apps/components-e2e/src/components/chart/pie-chart/pie-chart.html

@@ -0,0 +1,7 @@
+<dt-chart class="pie-chart" [series]="pieSeries" [options]="pieOptions">
+  <dt-chart-tooltip>
+    <ng-template let-tooltip>
+      {{ tooltip.y }}
+    </ng-template>
+  </dt-chart-tooltip>
+</dt-chart>

apps/components-e2e/src/components/chart/pie-chart/pie-chart.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2019 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation } from '@angular/core';
+import {
+  DtChartSeries,
+  DtChartOptions,
+} from '@dynatrace/barista-components/chart';
+
+@Component({
+  selector: 'dt-e2e-pie-chart',
+  templateUrl: 'pie-chart.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class PieChart {
+  pieOptions: DtChartOptions = {
+    chart: {
+      type: 'pie',
+    },
+    legend: {
+      align: 'right',
+      borderWidth: 0,
+      enabled: true,
+      layout: 'vertical',
+      symbolRadius: 0,
+      verticalAlign: 'middle',
+      floating: true,
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true,
+      },
+    },
+  };
+
+  pieSeries: DtChartSeries[] = [
+    {
+      name: 'Browsers',
+      data: [
+        {
+          name: 'Chrome',
+          y: 55,
+        },
+        {
+          name: 'Firefox',
+          y: 25,
+        },
+        {
+          name: 'Edge',
+          y: 15,
+        },
+      ],
+    },
+  ];
+}

components/chart/src/chart.ts

@@ -550,7 +550,6 @@ export class DtChart
           if (!isDefined(tooltip) || !isDefined(plotBackground)) {
             return;
           }
-
           const plotBackgroundInfo = getPlotBackgroundInfo(plotBackground!);
 
           switch (state.status) {

components/chart/src/highcharts/highcharts-tooltip-extensions.ts

@@ -37,13 +37,20 @@ export function prepareTooltipData(
     // tslint:disable-next-line:no-any
     const pointConfig: any[] = [];
     // tslint:disable-next-line:no-any
-    highcharts.each(pointOrPoints, function(item: any): void {
-      pointConfig.push(item.getLabelConfig());
+    let hoveredIndex: number = -1;
+
+    highcharts.each(pointOrPoints, function(item: any, index: number): void {
+      const labelConfig = item.getLabelConfig();
+      if (labelConfig.series.state === 'hover') {
+        hoveredIndex = index;
+      }
+      pointConfig.push(labelConfig);
     });
     data = {
       x: pointOrPoints[0].category,
       y: pointOrPoints[0].y,
       points: pointConfig,
+      hoveredIndex,
     };
   } else {
     const label = pointOrPoints.getLabelConfig();
@@ -94,14 +101,6 @@ export function addTooltipEvents(): boolean {
   return true;
 }
 
-/** Searches for the hovered series in a tooltip event object */
-export function findHoveredSeriesIndex(ev: DtChartTooltipEvent): number {
-  if (ev.data.points !== undefined) {
-    return ev.data.points.findIndex(p => p.series.state === 'hover');
-  }
-  return -1;
-}
-
 /**
  * Compares two tooltip events if they differ.
  * Can be used as custom comparator function of a `distinctUntilChanged`
@@ -114,7 +113,7 @@ export function compareTooltipEventChanged(
     return (
       a.data.x === b.data.x &&
       a.data.y === b.data.y &&
-      findHoveredSeriesIndex(a) === findHoveredSeriesIndex(b)
+      a.data.hoveredIndex === b.data.hoveredIndex
     );
   }
   return false;

components/chart/src/highcharts/highcharts-tooltip-types.ts

@@ -43,6 +43,7 @@ export interface DtChartTooltipData {
   y: number;
   points?: DtChartTooltipPoint[];
   point?: DtChartTooltipPoint;
+  hoveredIndex?: number;
 }
 export interface DtChartTooltipEvent {
   data: DtChartTooltipData;

components/chart/src/tooltip/chart-tooltip.ts

@@ -100,7 +100,8 @@ export class DtChartTooltip implements OnDestroy {
     parentChart: DtChart,
     plotBackgroundInfo: PlotBackgroundInfo,
   ): void {
-    if (parentChart._chartObject && data && data.points) {
+    // We check for data.points and data.point property since with pie / donut charts we need
+    if (parentChart._chartObject && data && (data.points || data.point)) {
       const positionStrategy = this._overlay
         .position()
         .flexibleConnectedTo(