feat(experimental): LineChart add new component

projects/core/directives/hint/hint.component.ts

@@ -39,7 +39,7 @@ export const TUI_HINT_PROVIDERS = [
     template: `
         <ng-content />
         <span
-            *polymorpheusOutlet="content() as text; context: hint.context"
+            *polymorpheusOutlet="content() as text; context: hint.contextSignal()"
             [innerHTML]="text"
         ></span>
     `,

projects/core/directives/hint/hint.directive.ts

@@ -45,10 +45,9 @@
 {
     private readonly service = inject(TuiHintService);
 
-    @Input('tuiHintContext')
-    public context?: C;
+    public contextSignal = signal<C | undefined>(undefined);
 
     @Input('tuiHintAppearance')
     public appearance = inject(TUI_HINT_OPTIONS).appearance;
 
     public content = signal<PolymorpheusContent<C>>(null);
@@ -66,6 +65,16 @@
         }
     }
 
+    @Input()
+    public set tuiHintContext(context: C) {
+        this.contextSignal.set(context);
+    }
+
+    // TODO: drop in 5.0
+    public get context(): C | undefined {
+        return this.contextSignal();
+    }
+
     public ngOnDestroy(): void {
         this.toggle(false);
     }

projects/demo/src/modules/components/line-chart/examples/6/index.html

@@ -0,0 +1,17 @@
+<tui-axes
+    class="axes"
+    [horizontalLines]="2"
+    [verticalLines]="4"
+>
+    <tui-line-chart
+        [dots]="true"
+        [height]="200"
+        [tuiLineChartHint]="hintContent"
+        [value]="value"
+        [width]="400"
+        [x]="0"
+        [xStringify]="stringify"
+        [y]="0"
+        [yStringify]="stringify"
+    />
+</tui-axes>

projects/demo/src/modules/components/line-chart/examples/6/index.less

@@ -0,0 +1,5 @@
+.axes {
+    block-size: 12.5rem;
+    inline-size: 25rem;
+    color: #bc71c9;
+}

projects/demo/src/modules/components/line-chart/examples/6/index.ts

@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAxes} from '@taiga-ui/addon-charts';
+import type {TuiContext} from '@taiga-ui/cdk';
+import {type TuiPoint} from '@taiga-ui/core';
+import {TuiLineChart, TuiLineChartHint} from '@taiga-ui/experimental';
+
+@Component({
+    standalone: true,
+    imports: [TuiAxes, TuiLineChart, TuiLineChartHint],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly value: readonly TuiPoint[][] = [
+        [
+            [50, 50],
+            [100, 75],
+            [150, 50],
+            [200, 150],
+            [250, 155],
+            [300, 190],
+            [350, 90],
+        ],
+    ];
+
+    protected readonly stringify = String;
+
+    protected readonly hintContent = ({$implicit}: TuiContext<TuiPoint[]>): number => {
+        return $implicit[0]?.[1] ?? 0;
+    };
+}

projects/demo/src/modules/components/line-chart/examples/7/index.html

@@ -0,0 +1,15 @@
+<tui-axes
+    class="axes"
+    [horizontalLines]="2"
+    [verticalLines]="4"
+>
+    <tui-line-chart
+        class="chart"
+        [height]="200"
+        [tuiLineChartHint]="hint"
+        [value]="values"
+        [width]="400"
+        [x]="0"
+        [y]="0"
+    />
+</tui-axes>

projects/demo/src/modules/components/line-chart/examples/7/index.less

@@ -0,0 +1,9 @@
+.axes {
+    block-size: 12.5rem;
+    inline-size: 25rem;
+}
+
+.chart {
+    position: absolute;
+    color: #ffb74c;
+}

projects/demo/src/modules/components/line-chart/examples/7/index.ts

@@ -0,0 +1,51 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAxes} from '@taiga-ui/addon-charts';
+import type {TuiContext, TuiStringHandler} from '@taiga-ui/cdk';
+import {type TuiPoint} from '@taiga-ui/core';
+import {TuiLineChart, TuiLineChartHint} from '@taiga-ui/experimental';
+
+@Component({
+    standalone: true,
+    imports: [TuiAxes, TuiLineChart, TuiLineChartHint],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly values: TuiPoint[][] = [
+        [
+            [50, 50],
+            [100, 75],
+            [150, 50],
+            [200, 150],
+            [250, 155],
+            [300, 190],
+            [350, 90],
+        ],
+        [
+            [50, 40],
+            [100, 60],
+            [150, 90],
+            [200, 120],
+            [250, 150],
+            [300, 110],
+            [350, 130],
+        ],
+        [
+            [50, 0],
+            [100, 0],
+            [150, 80],
+            [200, 50],
+            [250, 130],
+            [300, 200],
+            [350, 200],
+        ],
+    ];
+
+    protected readonly hint: TuiStringHandler<TuiContext<readonly TuiPoint[]>> = ({
+        $implicit,
+    }) => `${$implicit[0]?.[0]} items:\n\n${$implicit.map(([_, y]) => y).join('$\n')}$`;
+}

projects/demo/src/modules/components/line-chart/index.ts

@@ -19,6 +19,8 @@ export default class Page {
         'Dotted',
         'Hint',
         'Several lines with hints',
+        'Experimental',
+        'Experimental with several lines',
     ];
 
     protected readonly value: readonly TuiPoint[] = [

projects/experimental/components/index.ts

@@ -2,4 +2,5 @@ export * from '@taiga-ui/experimental/components/accordion';
 export * from '@taiga-ui/experimental/components/expand';
 export * from '@taiga-ui/experimental/components/hint';
 export * from '@taiga-ui/experimental/components/input-phone-international';
+export * from '@taiga-ui/experimental/components/line-chart';
 export * from '@taiga-ui/experimental/components/search-results';

projects/experimental/components/line-chart/index.ts

@@ -0,0 +1,3 @@
+export * from './line-chart.component';
+export * from './line-chart.options';
+export * from './line-chart-hint.directive';

projects/experimental/components/line-chart/line-chart-hint.directive.ts

@@ -0,0 +1,118 @@
+import {computed, Directive, effect, inject, signal} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {tuiInjectElement, tuiIsElement} from '@taiga-ui/cdk/utils/dom';
+import {tuiDirectiveBinding, tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';
+import {
+    TuiHintDirective,
+    TuiHintHost,
+    TuiHintHover,
+    tuiHintOptionsProvider,
+} from '@taiga-ui/core/directives/hint';
+import {from} from 'rxjs';
+
+import type {TuiLineChartPoint} from './line-chart.component';
+import {TuiLineChart} from './line-chart.component';
+
+@Directive({
+    standalone: true,
+    selector: '[tuiLineChartHint]',
+    providers: [tuiHintOptionsProvider({hideDelay: 0, direction: 'top'})],
+    hostDirectives: [
+        TuiHintHost,
+        {
+            directive: TuiHintDirective,
+            inputs: ['tuiHint: tuiLineChartHint', 'tuiHintAppearance'],
+        },
+    ],
+    host: {
+        '[class._hovered]': 'hovered()',
+        '(mouseleave)': 'onMouseLeave($event)',
+        '(mouseenter)': 'onMouseEnter()',
+        '(mousemove)': 'onMouseMove($event)',
+    },
+})
+export class TuiLineChartHint {
+    private readonly el = tuiInjectElement();
+    private readonly hintHover = toSignal(
+        from(inject(TuiHintHover, {optional: true}) || [false]),
+    );
+
+    private readonly chart = inject(TuiLineChart);
+    private readonly mouseX = signal(0);
+
+    protected readonly hovered = signal(true);
+    protected hoveredEffect = effect(
+        () => {
+            if (!this.hintHover()) {
+                this.hovered.set(false);
+            }
+        },
+        {allowSignalWrites: true},
+    );
+
+    protected closestPointEffect = effect(
+        () => {
+            this.chart.currentPoints.set(this.findClosestPoints(this.mouseX()));
+        },
+        {allowSignalWrites: true},
+    );
+
+    protected readonly contextBinding = tuiDirectiveBinding(
+        TuiHintDirective,
+        'tuiHintContext',
+        computed(() => ({$implicit: this.chart.currentPoints().map((p) => p?.value)})),
+    );
+
+    protected readonly hostBinding = tuiDirectiveBinding(
+        TuiHintHost,
+        'tuiHintHost',
+        computed(() => {
+            const maxIndex = this.chart
+                .currentPoints()
+                .reduce(
+                    (maxIdx, item, idx, array) =>
+                        item.bottom > array[maxIdx]!.bottom ? idx : maxIdx,
+                    0,
+                );
+
+            return this.chart.hintHosts.get(maxIndex)?.nativeElement;
+        }),
+    );
+
+    protected onMouseLeave({relatedTarget}: MouseEvent): void {
+        if (tuiIsElement(relatedTarget) && !relatedTarget?.closest('tui-hint')) {
+            this.hovered.set(false);
+        }
+    }
+
+    protected onMouseEnter(): void {
+        this.hovered.set(true);
+    }
+
+    protected onMouseMove(event: MouseEvent): void {
+        this.mouseX.set(
+            ((event.clientX - this.el.getBoundingClientRect().left) /
+                this.el.getBoundingClientRect().width) *
+                100,
+        );
+    }
+
+    protected findClosestPoints(left: number): TuiLineChartPoint[] {
+        const closestIndex =
+            this.chart
+                .points()[0]
+                ?.reduce(
+                    (closestIdx, point, index, arr) =>
+                        Math.abs(point.left - left) <
+                        Math.abs((arr[closestIdx]?.left ?? 0) - left)
+                            ? index
+                            : closestIdx,
+                    0,
+                ) ?? 0;
+
+        return this.chart
+            .points()
+            .map((value) => value[closestIndex])
+            .filter(tuiIsPresent);
+    }
+}