feat(core): Hint support 12 directions (#2256)

projects/addon-charts/components/bar-chart/bar-chart.component.ts

@@ -1,14 +1,23 @@
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
 import {
+    ChangeDetectionStrategy,
+    Component,
+    Inject,
+    Input,
+    QueryList,
+    ViewChildren,
+} from '@angular/core';
+import {
+    EMPTY_QUERY,
     sum,
     TuiContextWithImplicit,
     tuiDefaultProp,
     TuiIdService,
     TuiMapper,
     tuiPure,
 } from '@taiga-ui/cdk';
-import {TuiHintMode, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {TuiDriver, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {Observable} from 'rxjs';
 
 function valueAssertion(value: ReadonlyArray<readonly number[]>): boolean {
     const valid = value.every(array => array.length === value[0].length);
@@ -27,6 +36,9 @@ const VALUE_ERROR = `All arrays must be of the same length`;
 export class TuiBarChartComponent {
     private readonly autoIdString: string;
 
+    @ViewChildren(TuiDriver)
+    readonly drivers: QueryList<Observable<boolean>> = EMPTY_QUERY;
+
     @Input()
     @tuiDefaultProp(valueAssertion, VALUE_ERROR)
     value: ReadonlyArray<readonly number[]> = [];
@@ -49,7 +61,7 @@ export class TuiBarChartComponent {
 
     @Input()
     @tuiDefaultProp()
-    hintMode: TuiHintMode | null = null;
+    hintAppearance = ``;
 
     constructor(@Inject(TuiIdService) idService: TuiIdService) {
         this.autoIdString = idService.generate();
@@ -67,13 +79,6 @@ export class TuiBarChartComponent {
         return this.max || this.getMax(this.value, this.collapsed);
     }
 
-    @tuiPure
-    getContentContext(index: number): TuiContextWithImplicit<number> {
-        return {
-            $implicit: index,
-        };
-    }
-
     readonly percentMapper: TuiMapper<readonly number[], number> = (
         set,
         collapsed: boolean,

projects/addon-charts/components/bar-chart/bar-chart.style.less

@@ -15,9 +15,13 @@
     justify-content: center;
     height: 100%;
 
-    &_hoverable._hint_hovered {
-        background-color: rgba(0, 0, 0, 0.05);
+    &_hoverable {
         cursor: pointer;
+
+        &:hover,
+        &.t-wrapper_hovered {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
     }
 }
 
@@ -40,7 +44,3 @@
         box-shadow: 0 0 0 2px var(--tui-focus);
     }
 }
-
-.t-text {
-    white-space: pre-wrap;
-}

projects/addon-charts/components/bar-chart/bar-chart.template.html

@@ -3,10 +3,11 @@
     tuiHintDirection="top-left"
     class="t-wrapper"
     [class.t-wrapper_hoverable]="hasHint"
+    [class.t-wrapper_hovered]="drivers.get(index) | async"
     [tuiHintHost]="hintHost"
     [tuiHintId]="getHintId(index)"
     [tuiHint]="getHint(hint)"
-    [tuiHintMode]="hintMode"
+    [tuiHintAppearance]="hintAppearance"
 >
     <div
         class="t-container"
@@ -29,10 +30,9 @@
         #hint="polymorpheus"
         polymorpheus
     >
-        <div
-            *polymorpheusOutlet="hintContent as text; context: getContentContext(index)"
-            class="t-text"
-            [textContent]="text"
-        ></div>
+        <!-- TODO: Consider adding context to Hint directive -->
+        <ng-container *polymorpheusOutlet="hintContent as text; context: {$implicit: index}">
+            {{ text }}
+        </ng-container>
     </ng-template>
 </div>

projects/addon-charts/components/line-chart/line-chart-hint.directive.ts

@@ -1,4 +1,5 @@
 import {
+    AfterContentInit,
     ContentChildren,
     Directive,
     ElementRef,
@@ -9,35 +10,28 @@ import {
     QueryList,
     Renderer2,
 } from '@angular/core';
-import {ANIMATION_FRAME} from '@ng-web-apis/common';
 import {TuiLineChartHintContext} from '@taiga-ui/addon-charts/interfaces';
 import {
     EMPTY_QUERY,
     TuiContextWithImplicit,
     tuiDefaultProp,
     TuiDestroyService,
+    TuiHoveredService,
     tuiPure,
     tuiZonefree,
 } from '@taiga-ui/cdk';
-import {HINT_HOVERED_CLASS, TuiPoint} from '@taiga-ui/core';
+import {TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {Observable} from 'rxjs';
-import {
-    distinctUntilChanged,
-    filter,
-    map,
-    startWith,
-    takeUntil,
-    throttleTime,
-} from 'rxjs/operators';
+import {combineLatest, Observable} from 'rxjs';
+import {distinctUntilChanged, filter, map, startWith, takeUntil} from 'rxjs/operators';
 
 import {TuiLineChartComponent} from './line-chart.component';
 
 @Directive({
     selector: `[tuiLineChartHint]`,
-    providers: [TuiDestroyService],
+    providers: [TuiDestroyService, TuiHoveredService],
 })
-export class TuiLineChartHintDirective {
+export class TuiLineChartHintDirective implements AfterContentInit {
     @ContentChildren(forwardRef(() => TuiLineChartComponent))
     private readonly charts: QueryList<TuiLineChartComponent> = EMPTY_QUERY;
 
@@ -50,20 +44,18 @@ export class TuiLineChartHintDirective {
 
     constructor(
         @Inject(Renderer2) private readonly renderer: Renderer2,
-        @Inject(TuiDestroyService) destroy$: TuiDestroyService,
-        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,
-        @Inject(NgZone) ngZone: NgZone,
-        @Inject(ANIMATION_FRAME) animationFrame$: Observable<number>,
-    ) {
-        animationFrame$
+        @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
+        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
+    ) {}
+
+    ngAfterContentInit(): void {
+        combineLatest([tuiLineChartDrivers(this.charts), this.hovered$])
             .pipe(
-                throttleTime(200),
-                map(() => !!nativeElement.querySelector(`.${HINT_HOVERED_CLASS}`)),
-                startWith(false),
-                distinctUntilChanged(),
-                filter(v => !v),
-                tuiZonefree(ngZone),
-                takeUntil(destroy$),
+                map(([drivers, hovered]) => !drivers && !hovered),
+                filter(Boolean),
+                tuiZonefree(this.ngZone),
+                takeUntil(this.destroy$),
             )
             .subscribe(() => {
                 this.charts.forEach(chart => chart.onHovered(NaN));
@@ -104,3 +96,16 @@ export class TuiLineChartHintDirective {
         };
     }
 }
+
+export function tuiLineChartDrivers(
+    charts: QueryList<{drivers: QueryList<Observable<boolean>>}>,
+): Observable<boolean> {
+    return combineLatest(
+        charts
+            .map(({drivers}) => drivers.map(driver => driver.pipe(startWith(false))))
+            .reduce((acc, drivers) => acc.concat(drivers), []),
+    ).pipe(
+        map(values => values.some(Boolean)),
+        distinctUntilChanged(),
+    );
+}

projects/addon-charts/components/line-chart/line-chart.component.ts

@@ -7,18 +7,21 @@ import {
     Input,
     NgZone,
     Optional,
+    QueryList,
+    ViewChildren,
 } from '@angular/core';
 import {TuiLineChartHintContext} from '@taiga-ui/addon-charts/interfaces';
 import {tuiDraw} from '@taiga-ui/addon-charts/utils';
 import {
+    EMPTY_QUERY,
     tuiDefaultProp,
     TuiIdService,
     tuiInRange,
     tuiPure,
     TuiStringHandler,
     tuiZoneOptimized,
 } from '@taiga-ui/cdk';
-import {TuiPoint} from '@taiga-ui/core';
+import {TuiDriver, TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable, Subject} from 'rxjs';
 import {distinctUntilChanged} from 'rxjs/operators';
@@ -36,6 +39,9 @@ export class TuiLineChartComponent {
 
     private readonly autoIdString: string;
 
+    @ViewChildren(TuiDriver)
+    readonly drivers: QueryList<Observable<boolean>> = EMPTY_QUERY;
+
     @Input(`value`)
     @tuiDefaultProp()
     set valueSetter(value: readonly TuiPoint[]) {

projects/addon-charts/components/line-chart/line-chart.style.less

@@ -44,7 +44,7 @@
     &:focus,
     .t-column_hovered &,
     .t-column:hover &,
-    .t-column._hint_hovered & {
+    .t-column_hint_hovered & {
         opacity: 1;
     }
 }
@@ -69,18 +69,14 @@
 
     :host[style^='z-index: 0'] .t-column_hovered &,
     :host:not([style]) .t-column:hover &,
-    :host:not([style]) .t-column._hint_hovered &,
+    :host:not([style]) .t-column_hint_hovered &,
     :host[style^='z-index: 0'] .t-column_hovered + &,
     :host:not([style]) .t-column:hover + &,
-    :host:not([style]) .t-column._hint_hovered + & {
+    :host:not([style]) .t-column_hint_hovered + & {
         opacity: 1;
     }
 }
 
-.t-text {
-    white-space: pre-wrap;
-}
-
 .t-hint {
     .shadow();
     position: absolute;

projects/addon-charts/components/line-chart/line-chart.template.html

@@ -53,9 +53,10 @@
         <ng-container *ngFor="let point of value; let index = index">
             <div
                 *ngIf="value.length > 1 || dots"
-                tuiHintDirection="top-left"
+                tuiHintDirection="top"
                 class="t-column"
                 [class.t-column_hovered]="hovered === index"
+                [class.t-column_hint_hovered]="drivers.get(index) | async"
                 [tuiHintHost]="hintHost"
                 [tuiHint]="hintDirective || hintContent ? hint : ''"
                 [tuiHintId]="getHintId(index)"
@@ -82,20 +83,21 @@
                 [style.bottom.%]="getBottom(point[1])"
             ></div>
             <ng-template #hint>
+                <!-- TODO: Consider adding context to Hint directive -->
                 <ng-container *ngIf="hintDirective; else single">
-                    <div
+                    <ng-container
                         *polymorpheusOutlet="hintDirective.hint as text; context: getContentContext(point, index)"
-                        class="t-text"
-                        [textContent]="text"
-                    ></div>
+                    >
+                        {{ text }}
+                    </ng-container>
                 </ng-container>
                 <ng-template #single>
                     <!-- TODO: Polymorpheus fix type -->
-                    <div
+                    <ng-container
                         *polymorpheusOutlet="$any(hintContent) as text; context: {$implicit: point, index: index}"
-                        class="t-text"
-                        [textContent]="text"
-                    ></div>
+                    >
+                        {{ text }}
+                    </ng-container>
                 </ng-template>
             </ng-template>
         </ng-container>