feat(radial-chart): Added series-specific hover output for pie & legend.

libs/barista-components/radial-chart/src/radial-chart.html

@@ -13,12 +13,16 @@
       [totalValue]="_totalSeriesValue"
       [overlayTemplate]="_overlay"
       (click)="_select(series)"
+      (mouseenter)="_hoverStart(series, 'pie')"
+      (mouseleave)="_hoverEnd(series, 'pie')"
     ></svg:g>
   </svg>
   <dt-legend class="dt-radial-chart-legend">
     <dt-legend-item
       *ngFor="let series of _renderData"
       (click)="_toggleLegend(series)"
+      (mouseenter)="_hoverStart(series, 'legend')"
+      (mouseleave)="_hoverEnd(series, 'legend')"
       [class.dt-radial-chart-legend-item-inactive]="!series.origin.active"
     >
       <dt-legend-symbol

libs/barista-components/radial-chart/src/radial-chart.spec.ts

@@ -21,6 +21,7 @@ import { Component, QueryList, ViewChildren } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DT_CHART_COLOR_PALETTE_ORDERED } from '@dynatrace/barista-components/theming';
 import {
+  DtRadialChartHoverData,
   DtRadialChartModule,
   DtRadialChartSeries,
 } from '@dynatrace/barista-components/radial-chart';
@@ -37,6 +38,7 @@ describe('DtRadialChart', () => {
   const selectors = {
     pathGroup: 'g[dt-radial-chart-path]',
     series: '.dt-radial-chart-series',
+    legend: 'dt-legend-item',
   };
 
   beforeEach(
@@ -216,6 +218,44 @@ describe('DtRadialChart', () => {
       });
     });
 
+    describe('hovering', () => {
+      it('should emit hoverStart with hovered series data upon mouseenter event', () => {
+        dispatchFakeEvent(
+          chartSVG.querySelectorAll(selectors.pathGroup)[0],
+          'mouseenter',
+        );
+
+        expect(chartComponent.hoverStart).toMatchObject({
+          ...chartComponent._chartSeries[0],
+          hoveredIn: 'pie',
+        });
+      });
+
+      it('should emit hoverEnd with hovered series data upon mouseleave event', () => {
+        dispatchFakeEvent(
+          chartSVG.querySelectorAll(selectors.pathGroup)[0],
+          'mouseleave',
+        );
+
+        expect(chartComponent.hoverEnd).toMatchObject({
+          ...chartComponent._chartSeries[0],
+          hoveredIn: 'pie',
+        });
+      });
+    });
+
+    it('should emit hoveredIn as "legend" upon hovering the legend and not the pie', () => {
+      dispatchFakeEvent(
+        fixtureNative.querySelectorAll(selectors.legend)[0],
+        'mouseenter',
+      );
+
+      expect(chartComponent.hoverStart).toMatchObject({
+        ...chartComponent._chartSeries[0],
+        hoveredIn: 'legend',
+      });
+    });
+
     describe('Series', () => {
       describe('colors', () => {
         it('should use the sorted chart colors when no color is given', () => {
@@ -301,7 +341,12 @@ describe('DtRadialChart', () => {
 @Component({
   selector: 'dt-pie-chart',
   template: `
-    <dt-radial-chart [maxValue]="_maxValue" [selectable]="_selectable">
+    <dt-radial-chart
+      [maxValue]="_maxValue"
+      [selectable]="_selectable"
+      (hoverStart)="hoverStart = $event"
+      (hoverEnd)="hoverEnd = $event"
+    >
       <dt-radial-chart-series
         *ngFor="let s of _chartSeries"
         [value]="s.value"
@@ -339,4 +384,8 @@ class PieChart {
   _maxValue: number | null = null;
 
   _selectable: boolean = true;
+
+  hoverStart: DtRadialChartHoverData;
+
+  hoverEnd: DtRadialChartHoverData;
 }

libs/barista-components/radial-chart/src/radial-chart.ts

@@ -30,8 +30,10 @@ import {
   ContentChildren,
   Directive,
   ElementRef,
+  EventEmitter,
   Input,
   OnDestroy,
+  Output,
   QueryList,
   TemplateRef,
   ViewEncapsulation,
@@ -55,6 +57,19 @@ import {
   getSum,
 } from './utils/radial-chart-utils';
 
+/**
+ * Output type for hoverStart and hoverEnd attributes.
+ * Contains the main data of the hovered series, and wether it was hovered in the pie or on the legend.
+ */
+export type DtRadialChartHoverData = {
+  value: number;
+  name: string;
+  color: string;
+  selected: boolean;
+  active: boolean;
+  hoveredIn: 'legend' | 'pie';
+};
+
 /** Size of the inner (empty) circle in proportion to the circle's radius. */
 const DONUT_INNER_CIRCLE_FRACTION = 0.8;
 
@@ -144,6 +159,12 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
   _selectable: boolean = false;
   static ngAcceptInputType_selectable: BooleanInput;
 
+  /* Notifies the component container of the start of hover events per series, both in the pie and on the legend  */
+  @Output() hoverStart = new EventEmitter<DtRadialChartHoverData>();
+
+  /* Notifies the component container of the end of hover events per series, both in the pie and on the legend */
+  @Output() hoverEnd = new EventEmitter<DtRadialChartHoverData>();
+
   /** @internal Series data, <dt-radial-chart-series> */
   @ContentChildren(DtRadialChartSeries)
   _radialChartSeries: QueryList<DtRadialChartSeries>;
@@ -409,4 +430,44 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
       this._updateRenderData();
     }
   }
+
+  /** @internal Notify the component container of the start of a hover event on a specific series */
+  _hoverStart(
+    {
+      value,
+      name,
+      color,
+      origin: { selected, active },
+    }: DtRadialChartRenderData,
+    hoveredIn: 'legend' | 'pie',
+  ): void {
+    this.hoverStart.emit({
+      value,
+      name,
+      color,
+      selected,
+      active,
+      hoveredIn,
+    });
+  }
+
+  /** @internal Notify the component container of the end of a hover event on a specific series */
+  _hoverEnd(
+    {
+      value,
+      name,
+      color,
+      origin: { selected, active },
+    }: DtRadialChartRenderData,
+    hoveredIn: 'legend' | 'pie',
+  ): void {
+    this.hoverEnd.emit({
+      value,
+      name,
+      color,
+      selected,
+      active,
+      hoveredIn,
+    });
+  }
 }