feat(addon-charts): add index to hint context

taiga-family · Apr 1, 2022 · 6afcb90 · 6afcb90
1 parent 7c419db
commit 6afcb90
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 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
@@ -10,6 +10,7 @@ import {
     Renderer2,
 } from '@angular/core';
 import {ANIMATION_FRAME} from '@ng-web-apis/common';
+import {TuiLineChartHintContext} from '@taiga-ui/addon-charts';
 import {
     EMPTY_QUERY,
     TuiContextWithImplicit,
@@ -73,7 +74,7 @@ export class TuiLineChartHintDirective {
     getContext(
         index: number,
         _chart: TuiLineChartComponent,
-    ): TuiContextWithImplicit<readonly TuiPoint[]> {
+    ): TuiLineChartHintContext<readonly TuiPoint[]> {
         return this.computeContext(index, this.charts);
     }
 
@@ -96,9 +97,10 @@ export class TuiLineChartHintDirective {
     private computeContext(
         index: number,
         charts: QueryList<TuiLineChartComponent>,
-    ): TuiContextWithImplicit<readonly TuiPoint[]> {
+    ): TuiLineChartHintContext<readonly TuiPoint[]> {
         return {
             $implicit: charts.map(chart => chart.value[index]),
+            index,
         };
     }
 }
diff --git a/projects/addon-charts/components/line-chart/line-chart.component.ts b/projects/addon-charts/components/line-chart/line-chart.component.ts
@@ -8,10 +8,10 @@ import {
     NgZone,
     Optional,
 } from '@angular/core';
+import {TuiLineChartHintContext} from '@taiga-ui/addon-charts/interfaces';
 import {draw} from '@taiga-ui/addon-charts/utils';
 import {
     inRange,
-    TuiContextWithImplicit,
     tuiDefaultProp,
     TuiIdService,
     tuiPure,
@@ -70,7 +70,7 @@ export class TuiLineChartComponent {
 
     @Input()
     @tuiDefaultProp()
-    hintContent: PolymorpheusContent<TuiContextWithImplicit<TuiPoint>> = '';
+    hintContent: PolymorpheusContent<TuiLineChartHintContext<TuiPoint>> = '';
 
     @Input()
     @tuiDefaultProp()
@@ -170,10 +170,14 @@ export class TuiLineChartComponent {
         return `${this.autoIdString}_${index}`;
     }
 
-    getContentContext($implicit: TuiPoint): TuiContextWithImplicit<readonly TuiPoint[]> {
+    getContentContext(
+        $implicit: TuiPoint,
+        index: number,
+    ): TuiLineChartHintContext<readonly TuiPoint[]> {
         return (
             this.hintDirective?.getContext(this.value.indexOf($implicit), this) || {
                 $implicit: [],
+                index,
             }
         );
     }

diff --git a/projects/addon-charts/components/line-chart/line-chart.template.html b/projects/addon-charts/components/line-chart/line-chart.template.html
@@ -77,14 +77,14 @@
                     polymorpheus-outlet
                     class="t-text"
                     [content]="hintDirective.hint"
-                    [context]="getContentContext(point)"
+                    [context]="getContentContext(point, index)"
                 ></div>
                 <ng-template #single>
                     <div
                         polymorpheus-outlet
                         class="t-text"
                         [content]="hintContent"
-                        [context]="{ $implicit: point }"
+                        [context]="{ $implicit: point, index: index }"
                     ></div>
                 </ng-template>
             </ng-template>

diff --git a/projects/addon-charts/interfaces/index.ts b/projects/addon-charts/interfaces/index.ts
@@ -1 +1,2 @@
+export * from './line-chart-hint-context';
 export * from './ring-chart-context';
diff --git a/projects/addon-charts/interfaces/line-chart-hint-context.ts b/projects/addon-charts/interfaces/line-chart-hint-context.ts
@@ -0,0 +1,5 @@
+import {TuiContextWithImplicit} from '@taiga-ui/cdk';
+
+export interface TuiLineChartHintContext<T> extends TuiContextWithImplicit<T> {
+    readonly index?: number;
+}
diff --git a/projects/demo/src/modules/charts/line-chart/examples/4/index.html b/projects/demo/src/modules/charts/line-chart/examples/4/index.html
@@ -21,6 +21,12 @@
         [height]="200"
         [value]="singleValue"
         [dots]="true"
-        [hintContent]="hint"
+        [hintContent]="hintContent"
     ></tui-line-chart>
 </tui-axes>
+
+<ng-template #hintContent let-value let-index="index">
+    <div>Vertical: {{value[0]}}</div>
+    <div>Horizontal: {{value[1]}}</div>
+    <div>index: {{index}}</div>
+</ng-template>