fix(addon-charts): LineChart fix line thickness on 0 and max (#9167)

Co-authored-by: taiga-family-bot <[email protected]>

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

@@ -1,5 +1,5 @@
 import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
-import type {QueryList} from '@angular/core';
+import {computed, type OnChanges, type QueryList, signal} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -8,6 +8,8 @@ import {
     NgZone,
     ViewChildren,
 } from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {ResizeObserverService} from '@ng-web-apis/resize-observer';
 import type {TuiLineChartHintContext} from '@taiga-ui/addon-charts/types';
 import {tuiDraw} from '@taiga-ui/addon-charts/utils';
 import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
@@ -24,7 +26,7 @@ import {
 } from '@taiga-ui/core/directives/hint';
 import type {TuiPoint} from '@taiga-ui/core/types';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
-import type {Observable} from 'rxjs';
+import {map, type Observable} from 'rxjs';
 import {distinctUntilChanged, Subject} from 'rxjs';
 
 import {TUI_LINE_CHART_OPTIONS} from './line-chart.options';
@@ -37,20 +39,34 @@ import {TuiLineChartHint} from './line-chart-hint.directive';
     templateUrl: './line-chart.template.html',
     styleUrls: ['./line-chart.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [ResizeObserverService],
     viewProviders: [tuiHintOptionsProvider({direction: 'top', hideDelay: 0})],
     host: {
         '(mouseleave)': 'onMouseLeave()',
     },
 })
-export class TuiLineChart {
+export class TuiLineChart implements OnChanges {
     private readonly zone = inject(NgZone);
     private readonly options = inject(TUI_LINE_CHART_OPTIONS);
     private readonly hover$ = new Subject<number>();
     private readonly autoId = tuiInjectId();
+    private readonly resize = toSignal(
+        inject(ResizeObserverService, {self: true}).pipe(
+            map(([e]) => e?.contentRect.height || 0),
+        ),
+        {initialValue: 0},
+    );
 
-    protected readonly hintDirective = inject(TuiLineChartHint, {optional: true});
+    private readonly box = signal('');
 
+    protected readonly hintDirective = inject(TuiLineChartHint, {optional: true});
     protected readonly hintOptions = inject(TuiHintOptionsDirective, {optional: true});
+    protected readonly viewBox = computed(() => {
+        const offset = this.height / this.resize();
+        const [x = 0, y = 0, width = 0, height = 0] = this.box().split(' ').map(Number);
+
+        return `${x} ${y - offset} ${width} ${height + 2 * offset}`;
+    });
 
     @ViewChildren(TuiHintHover)
     public readonly drivers: QueryList<Observable<boolean>> = EMPTY_QUERY;
@@ -89,6 +105,10 @@ export class TuiLineChart {
         this.value = value.filter((item) => !item.some(Number.isNaN));
     }
 
+    public ngOnChanges(): void {
+        this.box.set(`${this.x} ${this.y} ${this.width} ${this.height}`);
+    }
+
     public onHovered(index: number): void {
         this.hover$.next(index);
     }
@@ -110,10 +130,6 @@ export class TuiLineChart {
         return this.filled ? `url(#${this.fillId})` : 'none';
     }
 
-    protected get viewBox(): string {
-        return `${this.x} ${this.y} ${this.width} ${this.height}`;
-    }
-
     protected get d(): string {
         return this.getD(this.value, this.smoothingFactor);
     }

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

@@ -8,7 +8,9 @@
 }
 
 .t-svg {
+    block-size: calc(100% + 1px);
     transform: scale(1, -1);
+    margin: -0.03125rem 0;
 }
 
 .t-column {

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

@@ -6,7 +6,7 @@
         width="100%"
         xmlns="http://www.w3.org/2000/svg"
         class="t-svg"
-        [attr.viewBox]="viewBox"
+        [attr.viewBox]="viewBox()"
     >
         <defs>
             <linearGradient

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

@@ -35,13 +35,13 @@ export default class Example {
             [350, 130],
         ],
         [
-            [50, 30],
-            [100, 90],
+            [50, 0],
+            [100, 0],
             [150, 80],
             [200, 50],
             [250, 130],
-            [300, 190],
-            [350, 150],
+            [300, 200],
+            [350, 200],
         ],
     ];