From c51f8ecd8cfa4f0e9acef426aa7d17a4940f361c Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Tue, 24 Sep 2024 19:30:53 +0400
Subject: [PATCH] fix(addon-charts): `LineChart` fix line thickness on 0 and
 max (#9167)

Co-authored-by: taiga-family-bot <taiga-family-bot@users.noreply.github.com>
---
 .../line-chart/line-chart.component.ts        | 32 ++++++++++++++-----
 .../line-chart/line-chart.style.less          |  2 ++
 .../line-chart/line-chart.template.html       |  2 +-
 .../components/line-chart/examples/5/index.ts |  8 ++---
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/projects/addon-charts/components/line-chart/line-chart.component.ts b/projects/addon-charts/components/line-chart/line-chart.component.ts
index f33fc21043d4..b77f32eb3c50 100644
--- a/projects/addon-charts/components/line-chart/line-chart.component.ts
+++ b/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);
     }
diff --git a/projects/addon-charts/components/line-chart/line-chart.style.less b/projects/addon-charts/components/line-chart/line-chart.style.less
index 4e639bf2fe22..465b61635ce2 100644
--- a/projects/addon-charts/components/line-chart/line-chart.style.less
+++ b/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 {
diff --git a/projects/addon-charts/components/line-chart/line-chart.template.html b/projects/addon-charts/components/line-chart/line-chart.template.html
index 2b9b3fe6e57b..85fa1ad69714 100644
--- a/projects/addon-charts/components/line-chart/line-chart.template.html
+++ b/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
diff --git a/projects/demo/src/modules/components/line-chart/examples/5/index.ts b/projects/demo/src/modules/components/line-chart/examples/5/index.ts
index 4b985de51bbc..04707795f422 100644
--- a/projects/demo/src/modules/components/line-chart/examples/5/index.ts
+++ b/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],
         ],
     ];