From af5d24086d818094cfd4356ad01e51d6f8bc7983 Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Thu, 30 Jan 2025 15:39:02 +0300 Subject: [PATCH 1/3] feat(experimental): `LineChart` add new component --- .../core/directives/hint/hint.component.ts | 2 +- .../core/directives/hint/hint.directive.ts | 13 +- .../line-chart/examples/6/index.html | 17 +++ .../line-chart/examples/6/index.less | 5 + .../components/line-chart/examples/6/index.ts | 35 ++++++ .../line-chart/examples/7/index.html | 15 +++ .../line-chart/examples/7/index.less | 9 ++ .../components/line-chart/examples/7/index.ts | 51 ++++++++ .../modules/components/line-chart/index.ts | 2 + projects/experimental/components/index.ts | 1 + .../components/line-chart/index.ts | 3 + .../line-chart/line-chart-hint.directive.ts | 118 ++++++++++++++++++ .../line-chart/line-chart.component.ts | 107 ++++++++++++++++ .../line-chart/line-chart.options.ts | 26 ++++ .../line-chart/line-chart.style.less | 95 ++++++++++++++ .../line-chart/line-chart.template.html | 61 +++++++++ .../components/line-chart/line.component.ts | 96 ++++++++++++++ .../components/line-chart/line.style.less | 15 +++ .../components/line-chart/line.template.html | 42 +++++++ .../components/line-chart/ng-package.json | 5 + 20 files changed, 715 insertions(+), 3 deletions(-) create mode 100644 projects/demo/src/modules/components/line-chart/examples/6/index.html create mode 100644 projects/demo/src/modules/components/line-chart/examples/6/index.less create mode 100644 projects/demo/src/modules/components/line-chart/examples/6/index.ts create mode 100644 projects/demo/src/modules/components/line-chart/examples/7/index.html create mode 100644 projects/demo/src/modules/components/line-chart/examples/7/index.less create mode 100644 projects/demo/src/modules/components/line-chart/examples/7/index.ts create mode 100644 projects/experimental/components/line-chart/index.ts create mode 100644 projects/experimental/components/line-chart/line-chart-hint.directive.ts create mode 100644 projects/experimental/components/line-chart/line-chart.component.ts create mode 100644 projects/experimental/components/line-chart/line-chart.options.ts create mode 100644 projects/experimental/components/line-chart/line-chart.style.less create mode 100644 projects/experimental/components/line-chart/line-chart.template.html create mode 100644 projects/experimental/components/line-chart/line.component.ts create mode 100644 projects/experimental/components/line-chart/line.style.less create mode 100644 projects/experimental/components/line-chart/line.template.html create mode 100644 projects/experimental/components/line-chart/ng-package.json diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts index 43253c79b74d..0ca3ed7e53e3 100644 --- a/projects/core/directives/hint/hint.component.ts +++ b/projects/core/directives/hint/hint.component.ts @@ -39,7 +39,7 @@ export const TUI_HINT_PROVIDERS = [ template: ` `, diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts index 0e6e2666f300..594d679a5ce9 100644 --- a/projects/core/directives/hint/hint.directive.ts +++ b/projects/core/directives/hint/hint.directive.ts @@ -45,8 +45,7 @@ export class TuiHintDirective { private readonly service = inject(TuiHintService); - @Input('tuiHintContext') - public context?: C; + public contextSignal = signal(undefined); @Input('tuiHintAppearance') public appearance = inject(TUI_HINT_OPTIONS).appearance; @@ -66,6 +65,16 @@ export class TuiHintDirective } } + @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); } diff --git a/projects/demo/src/modules/components/line-chart/examples/6/index.html b/projects/demo/src/modules/components/line-chart/examples/6/index.html new file mode 100644 index 000000000000..200b75d20f2e --- /dev/null +++ b/projects/demo/src/modules/components/line-chart/examples/6/index.html @@ -0,0 +1,17 @@ + + + diff --git a/projects/demo/src/modules/components/line-chart/examples/6/index.less b/projects/demo/src/modules/components/line-chart/examples/6/index.less new file mode 100644 index 000000000000..9f47cc76c222 --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/modules/components/line-chart/examples/6/index.ts b/projects/demo/src/modules/components/line-chart/examples/6/index.ts new file mode 100644 index 000000000000..fa11cca2c782 --- /dev/null +++ b/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): number => { + return $implicit[0]?.[1] ?? 0; + }; +} diff --git a/projects/demo/src/modules/components/line-chart/examples/7/index.html b/projects/demo/src/modules/components/line-chart/examples/7/index.html new file mode 100644 index 000000000000..0ab692704887 --- /dev/null +++ b/projects/demo/src/modules/components/line-chart/examples/7/index.html @@ -0,0 +1,15 @@ + + + diff --git a/projects/demo/src/modules/components/line-chart/examples/7/index.less b/projects/demo/src/modules/components/line-chart/examples/7/index.less new file mode 100644 index 000000000000..e5b4e78c3c3e --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/modules/components/line-chart/examples/7/index.ts b/projects/demo/src/modules/components/line-chart/examples/7/index.ts new file mode 100644 index 000000000000..8de7eb93ec88 --- /dev/null +++ b/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> = ({ + $implicit, + }) => `${$implicit[0]?.[0]} items:\n\n${$implicit.map(([_, y]) => y).join('$\n')}$`; +} diff --git a/projects/demo/src/modules/components/line-chart/index.ts b/projects/demo/src/modules/components/line-chart/index.ts index a88d68daa2cc..6f0205beadca 100644 --- a/projects/demo/src/modules/components/line-chart/index.ts +++ b/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[] = [ diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts index ff66e4e79fcd..49d66c55d1be 100644 --- a/projects/experimental/components/index.ts +++ b/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'; diff --git a/projects/experimental/components/line-chart/index.ts b/projects/experimental/components/line-chart/index.ts new file mode 100644 index 000000000000..5c92ad5da5fa --- /dev/null +++ b/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'; diff --git a/projects/experimental/components/line-chart/line-chart-hint.directive.ts b/projects/experimental/components/line-chart/line-chart-hint.directive.ts new file mode 100644 index 000000000000..8ebf30ed486b --- /dev/null +++ b/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); + } +} diff --git a/projects/experimental/components/line-chart/line-chart.component.ts b/projects/experimental/components/line-chart/line-chart.component.ts new file mode 100644 index 000000000000..f9415351b222 --- /dev/null +++ b/projects/experimental/components/line-chart/line-chart.component.ts @@ -0,0 +1,107 @@ +import {NgForOf, NgIf} from '@angular/common'; +import type {ElementRef, QueryList} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, + Input, + signal, + ViewChildren, +} from '@angular/core'; +import {EMPTY_QUERY} from '@taiga-ui/cdk/constants'; +import type {TuiStringHandler} from '@taiga-ui/cdk/types'; +import {TuiHintDirective} from '@taiga-ui/core/directives/hint'; +import type {TuiPoint} from '@taiga-ui/core/types'; + +import {TuiLine} from './line.component'; +import {TUI_LINE_CHART_OPTIONS} from './line-chart.options'; + +export interface TuiLineChartPoint { + readonly left: number; + readonly bottom: number; + readonly value: TuiPoint; +} + +@Component({ + standalone: true, + selector: 'tui-line-chart', + imports: [NgForOf, NgIf, TuiLine], + templateUrl: './line-chart.template.html', + styleUrls: ['./line-chart.style.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TuiLineChart { + private readonly options = inject(TUI_LINE_CHART_OPTIONS); + protected readonly hint = inject(TuiHintDirective, {optional: true}); + protected readonly values = signal([]); + + @ViewChildren('hintHost') + public readonly hintHosts: QueryList> = EMPTY_QUERY; + + @Input() + public x = 0; + + @Input() + public y = 0; + + @Input() + public width = 0; + + @Input() + public height = 0; + + @Input() + public smoothingFactor = this.options.smoothingFactor; + + @Input() + public xStringify: TuiStringHandler | null = null; + + @Input() + public yStringify: TuiStringHandler | null = null; + + @Input() + public filled = this.options.filled; + + @Input() + public dots = this.options.dots; + + public readonly currentPoints = signal([]); + + public readonly points = computed(() => + this.values().map((v) => + v.map((value) => ({ + left: this.getLeft(value[0]), + bottom: this.getBottom(value[1]), + value, + })), + ), + ); + + @Input('value') + public set valueSetter(values: readonly TuiPoint[][]) { + this.values.set( + values.map((value) => value.filter((item) => !item.some(Number.isNaN))), + ); + } + + protected get isFocusable(): boolean { + return this.hasHints; + } + + protected get hasHints(): boolean { + return !!this.xStringify || !!this.yStringify || !!this.hint?.content(); + } + + protected trackByIndex(index: number): number { + return index; + } + + private getBottom(y: number): number { + return (100 * (y - this.y)) / this.height; + } + + private getLeft(x: number): number { + return (100 * (x - this.x)) / this.width; + } +} diff --git a/projects/experimental/components/line-chart/line-chart.options.ts b/projects/experimental/components/line-chart/line-chart.options.ts new file mode 100644 index 000000000000..a710ca46eb69 --- /dev/null +++ b/projects/experimental/components/line-chart/line-chart.options.ts @@ -0,0 +1,26 @@ +import type {Provider} from '@angular/core'; +import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; + +export interface TuiLineChartOptions { + readonly dots: boolean; + readonly filled: boolean; + readonly smoothingFactor: number; +} + +export const TUI_LINE_CHART_DEFAULT_OPTIONS: TuiLineChartOptions = { + dots: false, + filled: false, + smoothingFactor: 0, +}; + +export const TUI_LINE_CHART_OPTIONS = tuiCreateToken(TUI_LINE_CHART_DEFAULT_OPTIONS); + +export function tuiLineChartOptionsProvider( + options: Partial, +): Provider { + return tuiProvideOptions( + TUI_LINE_CHART_OPTIONS, + options, + TUI_LINE_CHART_DEFAULT_OPTIONS, + ); +} diff --git a/projects/experimental/components/line-chart/line-chart.style.less b/projects/experimental/components/line-chart/line-chart.style.less new file mode 100644 index 000000000000..fe5960d12469 --- /dev/null +++ b/projects/experimental/components/line-chart/line-chart.style.less @@ -0,0 +1,95 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +:host { + display: flex; + inline-size: 100%; + block-size: 100%; +} + +.t-svg { + block-size: calc(100% + 1px); + transform: scale(1, -1); + margin: -0.03125rem 0; +} + +.t-dot { + position: absolute; + inline-size: 0.375rem; + block-size: 0.375rem; + border-radius: 100%; + background: currentColor; + margin: -0.1875rem; + box-shadow: 0 0 0 2px #fff; +} + +.t-host { + position: absolute; + left: 50%; + inline-size: 0.5rem; + block-size: 0.5rem; + border-radius: 100%; + background: #fff; + margin: -0.25rem; + box-shadow: + 0 0 0 2px currentColor, + 0 0.0625rem 0.1875rem 0.125rem rgba(0, 0, 0, 0.1); + outline: none; + + &:focus { + opacity: 1; + } +} + +.t-line { + position: absolute; + background: var(--tui-border-normal); + + :host._hovered & { + opacity: 1; + } + + &_vertical { + top: 0; + bottom: 0; + left: 50%; + inline-size: 1px; + } + + &_horizontal { + z-index: -1; + inline-size: 100%; + block-size: 1px; + } +} + +.t-hint { + position: absolute; + box-shadow: var(--tui-shadow-small); + font: var(--tui-font-text-xs); + block-size: 1.25rem; + line-height: 1.25rem; + margin-bottom: -0.625rem; + padding: 0 0.375rem; + white-space: nowrap; + color: var(--tui-text-primary); + background: var(--tui-background-base); + transform: translate3d(-50%, 0, 0); + + &_x { + bottom: 0; + } + + &_y { + left: 0; + } +} + +.t-line, +.t-host, +.t-hint { + opacity: 0; + + :host._hovered & { + opacity: 1; + } +} diff --git a/projects/experimental/components/line-chart/line-chart.template.html b/projects/experimental/components/line-chart/line-chart.template.html new file mode 100644 index 000000000000..4a839f20b724 --- /dev/null +++ b/projects/experimental/components/line-chart/line-chart.template.html @@ -0,0 +1,61 @@ + + + + +
+ + + + +
+
+ +
+ {{ xStringify(point.value[0]) }} +
+
+ {{ yStringify(point.value[1]) }} +
+ + +
+ + diff --git a/projects/experimental/components/line-chart/line.component.ts b/projects/experimental/components/line-chart/line.component.ts new file mode 100644 index 000000000000..52f6f7be47c1 --- /dev/null +++ b/projects/experimental/components/line-chart/line.component.ts @@ -0,0 +1,96 @@ +import type {OnChanges} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, + Input, + signal, +} from '@angular/core'; +import {toSignal} from '@angular/core/rxjs-interop'; +import {ResizeObserverService} from '@ng-web-apis/resize-observer'; +import {tuiDraw} from '@taiga-ui/addon-charts/utils'; +import {tuiInjectId} from '@taiga-ui/cdk/services'; +import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous'; +import type {TuiPoint} from '@taiga-ui/core/types'; +import {map} from 'rxjs'; + +/* internal */ +@Component({ + standalone: true, + selector: 'tui-line', + templateUrl: './line.template.html', + styleUrls: ['./line.style.less'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ResizeObserverService], +}) +export class TuiLine implements OnChanges { + private readonly autoId = tuiInjectId(); + private readonly box = signal(''); + + private readonly resize = toSignal( + inject(ResizeObserverService, {self: true}).pipe( + map(([e]) => e?.contentRect.height || 0), + ), + {initialValue: 0}, + ); + + protected readonly viewBox = computed(() => { + const offset = this.height / Math.max(this.resize(), 1); + const [x = 0, y = 0, width = 0, height = 0] = this.box().split(' ').map(Number); + + return `${x} ${y - offset} ${width} ${height + 2 * offset}`; + }); + + @Input() + public x = 0; + + @Input() + public y = 0; + + @Input() + public width = 0; + + @Input() + public height = 0; + + @Input() + public smoothingFactor = 1; + + @Input() + public filled = false; + + @Input('value') + public value: readonly TuiPoint[] = []; + + public ngOnChanges(): void { + this.box.set(`${this.x} ${this.y} ${this.width} ${this.height}`); + } + + protected get fillId(): string { + return `tui-line-chart-${this.autoId}`; + } + + protected get fill(): string { + return this.filled ? `url(#${this.fillId})` : 'none'; + } + + protected get d(): string { + return this.getD(this.value, this.smoothingFactor); + } + + protected get fillD(): string { + return this.value.length + ? `${this.d}V ${this.y} H ${this.value[0]?.[0]} V ${this.value[0]?.[1]}` + : this.d; + } + + @tuiPure + private getD(value: readonly TuiPoint[], smoothingFactor: number): string { + return value.reduce( + (d, point, index) => + index ? `${d} ${tuiDraw(value, index, smoothingFactor)}` : `M ${point}`, + '', + ); + } +} diff --git a/projects/experimental/components/line-chart/line.style.less b/projects/experimental/components/line-chart/line.style.less new file mode 100644 index 000000000000..712b04f6e459 --- /dev/null +++ b/projects/experimental/components/line-chart/line.style.less @@ -0,0 +1,15 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +:host { + position: absolute; + display: flex; + inline-size: 100%; + block-size: 100%; + pointer-events: none; +} + +.t-svg { + block-size: calc(100% + 1px); + transform: scale(1, -1); + margin: -0.03125rem 0; +} diff --git a/projects/experimental/components/line-chart/line.template.html b/projects/experimental/components/line-chart/line.template.html new file mode 100644 index 000000000000..e0fc25b703fd --- /dev/null +++ b/projects/experimental/components/line-chart/line.template.html @@ -0,0 +1,42 @@ + + + + + + + + + + diff --git a/projects/experimental/components/line-chart/ng-package.json b/projects/experimental/components/line-chart/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/experimental/components/line-chart/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} From d00bd2d50752a1682a9f87fff515a7b8c3274ea7 Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin Date: Mon, 3 Feb 2025 18:01:07 +0300 Subject: [PATCH 2/3] chore: fix comments --- projects/core/directives/hint/hint.directive.ts | 3 +-- .../components/line-chart/line-chart.component.ts | 10 ++++++---- .../components/line-chart/line-chart.template.html | 3 +-- .../components/line-chart/line.component.ts | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts index 594d679a5ce9..398125d8685f 100644 --- a/projects/core/directives/hint/hint.directive.ts +++ b/projects/core/directives/hint/hint.directive.ts @@ -45,11 +45,10 @@ export class TuiHintDirective { private readonly service = inject(TuiHintService); - public contextSignal = signal(undefined); - @Input('tuiHintAppearance') public appearance = inject(TUI_HINT_OPTIONS).appearance; + public contextSignal = signal(undefined); public content = signal>(null); public component = inject(PolymorpheusComponent); public readonly el = tuiInjectElement(); diff --git a/projects/experimental/components/line-chart/line-chart.component.ts b/projects/experimental/components/line-chart/line-chart.component.ts index f9415351b222..12c7d752474c 100644 --- a/projects/experimental/components/line-chart/line-chart.component.ts +++ b/projects/experimental/components/line-chart/line-chart.component.ts @@ -1,5 +1,5 @@ import {NgForOf, NgIf} from '@angular/common'; -import type {ElementRef, QueryList} from '@angular/core'; +import type {ElementRef, OnChanges, QueryList, SimpleChanges} from '@angular/core'; import { ChangeDetectionStrategy, Component, @@ -31,7 +31,7 @@ export interface TuiLineChartPoint { styleUrls: ['./line-chart.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TuiLineChart { +export class TuiLineChart implements OnChanges { private readonly options = inject(TUI_LINE_CHART_OPTIONS); protected readonly hint = inject(TuiHintDirective, {optional: true}); protected readonly values = signal([]); @@ -85,8 +85,10 @@ export class TuiLineChart { ); } - protected get isFocusable(): boolean { - return this.hasHints; + public ngOnChanges(changes: SimpleChanges): void { + if (changes.x || changes.y || changes.width || changes.height) { + this.values.set(this.values()); + } } protected get hasHints(): boolean { diff --git a/projects/experimental/components/line-chart/line-chart.template.html b/projects/experimental/components/line-chart/line-chart.template.html index 4a839f20b724..3ea54ac8cb2d 100644 --- a/projects/experimental/components/line-chart/line-chart.template.html +++ b/projects/experimental/components/line-chart/line-chart.template.html @@ -26,7 +26,7 @@ [style.left.%]="point.left" >
@@ -55,7 +55,6 @@ [style.color]="'var(--tui-chart-categorical-0' + i + ')'" [style.left.%]="point.left" [style.zIndex]="point.bottom * 10" - [tabIndex]="isFocusable ? 0 : -1" > diff --git a/projects/experimental/components/line-chart/line.component.ts b/projects/experimental/components/line-chart/line.component.ts index 52f6f7be47c1..617215c1321a 100644 --- a/projects/experimental/components/line-chart/line.component.ts +++ b/projects/experimental/components/line-chart/line.component.ts @@ -60,7 +60,7 @@ export class TuiLine implements OnChanges { @Input() public filled = false; - @Input('value') + @Input() public value: readonly TuiPoint[] = []; public ngOnChanges(): void { From a326666e2b711f906f0cae7a75b5f12f0a92b28a Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Wed, 5 Feb 2025 08:43:57 +0000 Subject: [PATCH 3/3] chore: apply changes after linting [bot] --- .../src/modules/components/line-chart/examples/6/index.ts | 7 +++---- .../src/modules/components/line-chart/examples/7/index.ts | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/projects/demo/src/modules/components/line-chart/examples/6/index.ts b/projects/demo/src/modules/components/line-chart/examples/6/index.ts index fa11cca2c782..3986e83d3d2c 100644 --- a/projects/demo/src/modules/components/line-chart/examples/6/index.ts +++ b/projects/demo/src/modules/components/line-chart/examples/6/index.ts @@ -3,7 +3,7 @@ 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 type {TuiPoint} from '@taiga-ui/core'; import {TuiLineChart, TuiLineChartHint} from '@taiga-ui/experimental'; @Component({ @@ -29,7 +29,6 @@ export default class Example { protected readonly stringify = String; - protected readonly hintContent = ({$implicit}: TuiContext): number => { - return $implicit[0]?.[1] ?? 0; - }; + protected readonly hintContent = ({$implicit}: TuiContext): number => + $implicit[0]?.[1] ?? 0; } diff --git a/projects/demo/src/modules/components/line-chart/examples/7/index.ts b/projects/demo/src/modules/components/line-chart/examples/7/index.ts index 8de7eb93ec88..966137da6c6d 100644 --- a/projects/demo/src/modules/components/line-chart/examples/7/index.ts +++ b/projects/demo/src/modules/components/line-chart/examples/7/index.ts @@ -3,7 +3,7 @@ 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 type {TuiPoint} from '@taiga-ui/core'; import {TuiLineChart, TuiLineChartHint} from '@taiga-ui/experimental'; @Component({