fix(addon-charts): LineDaysChart fix hint circle not disappearing (#…

…3486)
taiga-family · Jan 24, 2023 · caa5f9a · caa5f9a
1 parent a1efcf0
commit caa5f9a
Show file tree

Hide file tree

Showing 15 changed files with 92 additions and 52 deletions.
diff --git a/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts b/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts
@@ -19,12 +19,20 @@ import {
     TuiDestroyService,
     TuiHoveredService,
     tuiPure,
+    tuiQueryListChanges,
     tuiZonefree,
 } from '@taiga-ui/cdk';
 import {TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {combineLatest, Observable} from 'rxjs';
-import {distinctUntilChanged, filter, map, startWith, takeUntil} from 'rxjs/operators';
+import {
+    distinctUntilChanged,
+    filter,
+    map,
+    startWith,
+    switchMap,
+    takeUntil,
+} from 'rxjs/operators';
 
 // TODO: find the best way for prevent cycle
 // eslint-disable-next-line import/no-cycle
@@ -55,8 +63,7 @@ export class TuiLineChartHintDirective implements AfterContentInit {
     ngAfterContentInit(): void {
         combineLatest([tuiLineChartDrivers(this.charts), this.hovered$])
             .pipe(
-                map(([drivers, hovered]) => !drivers && !hovered),
-                filter(Boolean),
+                filter(result => !result.some(Boolean)),
                 tuiZonefree(this.ngZone),
                 takeUntil(this.destroy$),
             )
@@ -104,10 +111,14 @@ 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), []),
+        charts.map(({drivers}) =>
+            tuiQueryListChanges(drivers).pipe(
+                map(drivers => drivers.map(driver => driver.pipe(startWith(false)))),
+            ),
+        ),
     ).pipe(
+        map(all => all.reduce((acc, drivers) => acc.concat(drivers), [])),
+        switchMap(drivers => combineLatest(drivers)),
         map(values => values.some(Boolean)),
         distinctUntilChanged(),
     );

diff --git a/projects/addon-charts/components/line-chart/line-chart.component.ts b/projects/addon-charts/components/line-chart/line-chart.component.ts
@@ -42,7 +42,7 @@ import {TuiLineChartHintDirective} from './line-chart-hint.directive';
     templateUrl: './line-chart.template.html',
     styleUrls: ['./line-chart.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    viewProviders: [tuiHintOptionsProvider({direction: 'top'})],
+    viewProviders: [tuiHintOptionsProvider({direction: 'top', hideDelay: 0})],
 })
 export class TuiLineChartComponent {
     private readonly _hovered$ = new Subject<number>();

diff --git a/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts b/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts
@@ -23,7 +23,7 @@ import {
 import {TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {combineLatest, Observable} from 'rxjs';
-import {filter, map, takeUntil} from 'rxjs/operators';
+import {filter, takeUntil} from 'rxjs/operators';
 
 // TODO: find the best way for prevent cycle
 // eslint-disable-next-line import/no-cycle
@@ -49,10 +49,12 @@ export class TuiLineDaysChartHintDirective implements AfterContentInit {
     ) {}
 
     ngAfterContentInit(): void {
-        combineLatest([tuiLineChartDrivers(this.charts), this.hovered$])
+        combineLatest([
+            ...this.charts.map(({charts}) => tuiLineChartDrivers(charts)),
+            this.hovered$,
+        ])
             .pipe(
-                map(([drivers, hovered]) => !drivers && !hovered),
-                filter(Boolean),
+                filter(result => !result.some(Boolean)),
                 tuiZonefree(this.ngZone),
                 takeUntil(this.destroy$),
             )

diff --git a/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts b/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts
@@ -1,15 +1,19 @@
 import {
+    AfterViewInit,
     ChangeDetectionStrategy,
     Component,
     HostBinding,
     Inject,
     Input,
+    NgZone,
     Optional,
     QueryList,
+    Self,
     ViewChildren,
 } from '@angular/core';
 import {
     TuiLineChartComponent,
+    tuiLineChartDrivers,
     TuiLineChartHintDirective,
 } from '@taiga-ui/addon-charts/components/line-chart';
 import {
@@ -18,15 +22,19 @@ import {
     TuiContextWithImplicit,
     TuiDay,
     tuiDefaultProp,
+    TuiDestroyService,
+    TuiHoveredService,
     tuiIsNumber,
     tuiIsPresent,
     TuiMonth,
     tuiPure,
     TuiStringHandler,
+    tuiZonefree,
 } from '@taiga-ui/cdk';
-import {TuiDriver, TuiPoint} from '@taiga-ui/core';
+import {TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {Observable} from 'rxjs';
+import {combineLatest, Observable} from 'rxjs';
+import {filter, takeUntil} from 'rxjs/operators';
 
 // TODO: find the best way for prevent cycle
 // eslint-disable-next-line import/no-cycle
@@ -40,18 +48,17 @@ const DUMMY: TuiPoint = [NaN, NaN];
     styleUrls: ['./line-days-chart.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
+        TuiDestroyService,
+        TuiHoveredService,
         {
             provide: TuiLineChartHintDirective,
             useExisting: TuiLineDaysChartComponent,
         },
     ],
 })
-export class TuiLineDaysChartComponent {
+export class TuiLineDaysChartComponent implements AfterViewInit {
     @ViewChildren(TuiLineChartComponent)
-    private readonly charts: QueryList<TuiLineChartComponent> = EMPTY_QUERY;
-
-    @ViewChildren(TuiDriver)
-    readonly drivers: QueryList<Observable<boolean>> = EMPTY_QUERY;
+    readonly charts: QueryList<TuiLineChartComponent> = EMPTY_QUERY;
 
     @Input('value')
     @tuiDefaultProp()
@@ -112,6 +119,9 @@ export class TuiLineDaysChartComponent {
         @Optional()
         @Inject(TuiLineDaysChartHintDirective)
         private readonly hintDirective: TuiLineDaysChartHintDirective | null,
+        @Self() @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
+        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
     ) {}
 
     get months(): ReadonlyArray<readonly TuiPoint[]> {
@@ -125,7 +135,7 @@ export class TuiLineDaysChartComponent {
     get hint():
         | PolymorpheusContent<TuiContextWithImplicit<[TuiDay, number]>>
         | PolymorpheusContent<TuiContextWithImplicit<readonly TuiPoint[]>> {
-        return this.hintDirective ? this.hintDirective.hint : this.hintContent;
+        return this.hintDirective?.hint ?? this.hintContent;
     }
 
     @tuiPure
@@ -138,11 +148,23 @@ export class TuiLineDaysChartComponent {
         };
     }
 
+    ngAfterViewInit(): void {
+        combineLatest([tuiLineChartDrivers(this.charts), this.hovered$])
+            .pipe(
+                filter(result => !result.some(Boolean)),
+                tuiZonefree(this.ngZone),
+                takeUntil(this.destroy$),
+            )
+            .subscribe(() => {
+                this.onHovered(NaN);
+            });
+    }
+
     readonly daysStringify: TuiStringHandler<number> = index =>
-        this.xStringify ? this.xStringify(this.getMonth(index)) : '';
+        this.xStringify ? this.xStringify(this.getDay(index)) : '';
 
     getX(index: number): number {
-        const current = this.getMonth(index);
+        const current = this.getDay(index);
         const months = TuiMonth.lengthBetween(this.value[0][0], current);
         const offset = months * current.daysCount;
 
@@ -171,7 +193,7 @@ export class TuiLineDaysChartComponent {
 
     raise(index: number, {value}: TuiLineChartComponent): void {
         const x = value[index][0];
-        const month = this.getMonth(x);
+        const month = this.getDay(x);
 
         if (this.hintDirective) {
             this.hintDirective.raise(month);
@@ -181,7 +203,7 @@ export class TuiLineDaysChartComponent {
     }
 
     getWidth(index: number): number {
-        return this.getMonth(index).daysCount * this.months.length;
+        return this.getDay(index).daysCount * this.months.length;
     }
 
     getContext(
@@ -191,7 +213,7 @@ export class TuiLineDaysChartComponent {
         const x = value[index][0];
 
         return this.hintDirective
-            ? this.hintDirective.getContext(this.getMonth(x))
+            ? this.hintDirective.getContext(this.getDay(x))
             : this.getHintContext(x, this.value);
     }
 
@@ -222,7 +244,7 @@ export class TuiLineDaysChartComponent {
             );
     }
 
-    private getMonth(index: number): TuiDay {
+    private getDay(index: number): TuiDay {
         return this.value[index - this.value[0][0].day + 1][0];
     }
 }
diff --git a/projects/addon-doc/src/components/documentation/documentation.component.ts b/projects/addon-doc/src/components/documentation/documentation.component.ts
@@ -14,8 +14,8 @@ import {
     EMPTY_QUERY,
     TuiDestroyService,
     tuiHexToRgb,
-    tuiItemsQueryListObservable,
     TuiMatcher,
+    tuiQueryListChanges,
     tuiWatch,
 } from '@taiga-ui/cdk';
 import {merge} from 'rxjs';
@@ -73,7 +73,7 @@ export class TuiDocDocumentationComponent implements AfterContentInit {
     ) {}
 
     ngAfterContentInit(): void {
-        tuiItemsQueryListObservable(this.propertiesConnectors)
+        tuiQueryListChanges(this.propertiesConnectors)
             .pipe(
                 switchMap(items => merge(...items.map(({changed$}) => changed$))),
                 tuiWatch(this.changeDetectorRef),

diff --git a/projects/addon-table/components/table/tr/tr.component.ts b/projects/addon-table/components/table/tr/tr.component.ts
@@ -7,7 +7,7 @@ import {
     Inject,
     QueryList,
 } from '@angular/core';
-import {EMPTY_QUERY, tuiItemsQueryListObservable} from '@taiga-ui/cdk';
+import {EMPTY_QUERY, tuiQueryListChanges} from '@taiga-ui/cdk';
 import {ReplaySubject} from 'rxjs';
 import {map, switchMap} from 'rxjs/operators';
 
@@ -33,7 +33,7 @@ export class TuiTrComponent<T extends Partial<Record<keyof T, any>>>
     private readonly contentReady$ = new ReplaySubject<boolean>(1);
 
     readonly cells$ = this.contentReady$.pipe(
-        switchMap(() => tuiItemsQueryListObservable(this.cells)),
+        switchMap(() => tuiQueryListChanges(this.cells)),
         map(cells =>
             cells.reduce(
                 (record, item) => ({...record, [item.tuiCell]: item}),
@@ -43,7 +43,7 @@ export class TuiTrComponent<T extends Partial<Record<keyof T, any>>>
     );
 
     readonly item$ = this.contentReady$.pipe(
-        switchMap(() => tuiItemsQueryListObservable(this.body.rows)),
+        switchMap(() => tuiQueryListChanges(this.body.rows)),
         map(
             rows =>
                 /**

diff --git a/projects/cdk/observables/items-query-list-observable.ts b/projects/cdk/observables/items-query-list-observable.ts
@@ -6,11 +6,16 @@ import {map, startWith} from 'rxjs/operators';
 /**
  * Converts changes observable of a QueryList to an Observable of arrays
  */
-export function tuiItemsQueryListObservable<T>(
+export function tuiQueryListChanges<T>(
     queryList: QueryList<T>,
 ): Observable<readonly T[]> {
     return queryList.changes.pipe(
         startWith(null),
         map(() => tuiGetOriginalArrayFromQueryList(queryList)),
     );
 }
+
+/**
+ * @deprecated An alias, use {@link tuiQueryListChanges} instead
+ */
+export const tuiItemsQueryListObservable = tuiQueryListChanges;
diff --git a/.../test/items-query-list-observable.spec.ts → ...servables/test/query-list-changes.spec.ts b/.../test/items-query-list-observable.spec.ts → ...servables/test/query-list-changes.spec.ts
@@ -1,7 +1,7 @@
 import {QueryList} from '@angular/core';
-import {tuiItemsQueryListObservable} from '@taiga-ui/cdk';
+import {tuiQueryListChanges} from '@taiga-ui/cdk';
 
-describe(`tuiItemsQueryListObservable`, () => {
+describe(`tuiQueryListChanges`, () => {
     let queryList: QueryList<number>;
 
     beforeEach(() => {
@@ -12,7 +12,7 @@ describe(`tuiItemsQueryListObservable`, () => {
     it(`emits current array on subscription`, () => {
         let result: readonly number[] | null = null;
 
-        tuiItemsQueryListObservable<number>(queryList).subscribe(data => {
+        tuiQueryListChanges<number>(queryList).subscribe(data => {
             result = data;
         });
 
@@ -22,7 +22,7 @@ describe(`tuiItemsQueryListObservable`, () => {
     it(`emits new array on changes`, () => {
         let result: readonly number[] | null = null;
 
-        tuiItemsQueryListObservable<number>(queryList).subscribe(data => {
+        tuiQueryListChanges<number>(queryList).subscribe(data => {
             result = data;
         });
 

diff --git a/projects/cdk/schematics/ng-update/v3/constants/deprecated-functions.ts b/projects/cdk/schematics/ng-update/v3/constants/deprecated-functions.ts
@@ -193,7 +193,7 @@ export const DEPRECATED_FUNCTIONS: readonly TypeToRename[] = [
     },
     {
         from: `itemsQueryListObservable`,
-        to: `tuiItemsQueryListObservable`,
+        to: `tuiQueryListChanges`,
         moduleSpecifier: [`@taiga-ui/cdk`],
     },
     {

diff --git a/projects/cdk/schematics/ng-update/v3/tests/schematic-replace-deprecated-functions.spec.ts b/projects/cdk/schematics/ng-update/v3/tests/schematic-replace-deprecated-functions.spec.ts
@@ -488,7 +488,7 @@ import {
   tuiToGradient,
 } from '@taiga-ui/addon-editor';
 import {tuiDefaultSort} from '@taiga-ui/addon-table';
-import { tuiMockCurrentDate, tuiRestoreRealDate, tuiMockDateInside, tuiPendingIfNotMoscowTimeZone, tuiDragAndDropFrom, tuiFocusVisibleObservable, tuiItemsQueryListObservable, tuiMouseDragFinishFrom, tuiMustBePresent, tuiPressedObservable, tuiPreventDefault, tuiStopPropagation, tuiTypedFromEvent, tuiWatch, tuiIsEdgeOlderThan, tuiIsEdge, tuiIsFirefox, tuiIsIE, tuiIsSafari, tuiCanScroll, tuiContainsOrAfter, tuiGetActualTarget, tuiGetClipboardDataText, tuiGetDocumentOrShadowRoot, tuiGetElementObscures, tuiGetElementOffset, tuiGetScrollParent, tuiIsCurrentTarget, tuiIsInsideIframe, tuiIsNodeIn, tuiBlurNativeFocused, tuiGetNativeFocused, tuiIsNativeFocusedIn, tuiIsNativeFocused, tuiIsNativeKeyboardFocusable, tuiIsNativeMouseFocusable, tuiMoveFocus, tuiSetNativeFocused, tuiSetNativeMouseFocused, tuiPx, tuiClamp, tuiInRange, tuiNormalizeToIntNumber, tuiQuantize, tuiRound, tuiCeil, tuiFloor, tuiSum, tuiToInt, tuiToRadians, tuiDistanceBetweenTouches, tuiEaseInOutQuad, tuiFlatLength, tuiGetOriginalArrayFromQueryList, tuiGetSwipeDirection, tuiIsElementEditable, tuiIsNumber, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiNullableSame, tuiUniqBy, tuiIsApplePlatform, tuiIsApple, tuiIsIos, tuiSvgLinearGradientProcessor, tuiGetClosestFocusable, tuiHexToRgb, tuiHsvToRgb, tuiParseColor, tuiRgbToHex, tuiRgbToHsv } from '@taiga-ui/cdk';
+import { tuiMockCurrentDate, tuiRestoreRealDate, tuiMockDateInside, tuiPendingIfNotMoscowTimeZone, tuiDragAndDropFrom, tuiFocusVisibleObservable, tuiQueryListChanges, tuiMouseDragFinishFrom, tuiMustBePresent, tuiPressedObservable, tuiPreventDefault, tuiStopPropagation, tuiTypedFromEvent, tuiWatch, tuiIsEdgeOlderThan, tuiIsEdge, tuiIsFirefox, tuiIsIE, tuiIsSafari, tuiCanScroll, tuiContainsOrAfter, tuiGetActualTarget, tuiGetClipboardDataText, tuiGetDocumentOrShadowRoot, tuiGetElementObscures, tuiGetElementOffset, tuiGetScrollParent, tuiIsCurrentTarget, tuiIsInsideIframe, tuiIsNodeIn, tuiBlurNativeFocused, tuiGetNativeFocused, tuiIsNativeFocusedIn, tuiIsNativeFocused, tuiIsNativeKeyboardFocusable, tuiIsNativeMouseFocusable, tuiMoveFocus, tuiSetNativeFocused, tuiSetNativeMouseFocused, tuiPx, tuiClamp, tuiInRange, tuiNormalizeToIntNumber, tuiQuantize, tuiRound, tuiCeil, tuiFloor, tuiSum, tuiToInt, tuiToRadians, tuiDistanceBetweenTouches, tuiEaseInOutQuad, tuiFlatLength, tuiGetOriginalArrayFromQueryList, tuiGetSwipeDirection, tuiIsElementEditable, tuiIsNumber, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiNullableSame, tuiUniqBy, tuiIsApplePlatform, tuiIsApple, tuiIsIos, tuiSvgLinearGradientProcessor, tuiGetClosestFocusable, tuiHexToRgb, tuiHsvToRgb, tuiParseColor, tuiRgbToHex, tuiRgbToHsv } from '@taiga-ui/cdk';
 import {
   tuiTextfieldWatchedControllerFactory,
   tuiSmartSearch,
@@ -576,7 +576,7 @@ tuiMockDateInside(...args);
 tuiPendingIfNotMoscowTimeZone(...args);
 tuiDragAndDropFrom(...args);
 tuiFocusVisibleObservable(...args);
-tuiItemsQueryListObservable(...args);
+tuiQueryListChanges(...args);
 tuiMouseDragFinishFrom(...args);
 tuiMustBePresent(...args);
 tuiPressedObservable(...args);
@@ -718,7 +718,7 @@ class Component {
     tuiPendingIfNotMoscowTimeZone();
     tuiDragAndDropFrom();
     tuiFocusVisibleObservable();
-    tuiItemsQueryListObservable();
+    tuiQueryListChanges();
     tuiMouseDragFinishFrom();
     tuiMustBePresent();
     tuiPressedObservable();

diff --git a/projects/core/components/data-list/data-list.component.ts b/projects/core/components/data-list/data-list.component.ts
@@ -18,9 +18,9 @@ import {
     tuiIsElement,
     tuiIsNativeFocusedIn,
     tuiIsPresent,
-    tuiItemsQueryListObservable,
     tuiMoveFocus,
     tuiPure,
+    tuiQueryListChanges,
     tuiSetNativeMouseFocused,
 } from '@taiga-ui/cdk';
 import {
@@ -82,7 +82,7 @@ export class TuiDataListComponent<T> implements TuiDataListAccessor<T> {
 
     @tuiPure
     get empty$(): Observable<boolean> {
-        return tuiItemsQueryListObservable(this.options).pipe(map(({length}) => !length));
+        return tuiQueryListChanges(this.options).pipe(map(({length}) => !length));
     }
 
     @HostListener('focusin', ['$event.relatedTarget', '$event.currentTarget'])

diff --git a/projects/kit/components/accordion/accordion.component.ts b/projects/kit/components/accordion/accordion.component.ts
@@ -13,7 +13,7 @@ import {
     tuiDefaultProp,
     TuiDestroyService,
     tuiIsPresent,
-    tuiItemsQueryListObservable,
+    tuiQueryListChanges,
 } from '@taiga-ui/cdk';
 import {identity, merge} from 'rxjs';
 import {filter, map, pairwise, switchMap, takeUntil} from 'rxjs/operators';
@@ -47,7 +47,7 @@ export class TuiAccordionComponent implements AfterContentInit {
 
     ngAfterContentInit(): void {
         const {accordionItems} = this;
-        const rows$ = tuiItemsQueryListObservable(accordionItems);
+        const rows$ = tuiQueryListChanges(accordionItems);
         const newOpenRow$ = rows$.pipe(
             pairwise(),
             map(([previous, current]) =>