fix(addon-charts): remove location origin from mask (taiga-family#3125)

oknimot · Dec 1, 2022 · 22db748 · 22db748
1 parent c25700c
commit 22db748
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 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
@@ -1,4 +1,4 @@
-import {Location} from '@angular/common';
+import {Location as NgLocation} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -10,8 +10,9 @@ import {
     QueryList,
     ViewChildren,
 } from '@angular/core';
+import {LOCATION} from '@ng-web-apis/common';
 import {TuiLineChartHintContext} from '@taiga-ui/addon-charts/interfaces';
-import {tuiDraw} from '@taiga-ui/addon-charts/utils';
+import {tuiDraw, tuiPrepareExternalUrl} from '@taiga-ui/addon-charts/utils';
 import {
     EMPTY_QUERY,
     tuiDefaultProp,
@@ -101,7 +102,8 @@ export class TuiLineChartComponent {
     constructor(
         @Inject(TuiIdService) idService: TuiIdService,
         @Inject(NgZone) private readonly ngZone: NgZone,
-        @Inject(Location) private readonly locationRef: Location,
+        @Inject(NgLocation) private readonly ngLocation: NgLocation,
+        @Inject(LOCATION) private readonly locationRef: Location,
         @Optional()
         @Inject(TuiLineChartHintDirective)
         readonly hintDirective: TuiLineChartHintDirective | null,
@@ -127,9 +129,7 @@ export class TuiLineChartComponent {
 
     get fill(): string {
         return this.filled
-            ? `url(${this.locationRef.prepareExternalUrl(this.locationRef.path())}#${
-                  this.fillId
-              })`
+            ? tuiPrepareExternalUrl(this.ngLocation, this.locationRef, this.fillId)
             : `none`;
     }
 

diff --git a/projects/addon-charts/components/pie-chart/pie-chart.component.ts b/projects/addon-charts/components/pie-chart/pie-chart.component.ts
@@ -1,4 +1,4 @@
-import {Location} from '@angular/common';
+import {Location as NgLocation} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -10,6 +10,8 @@ import {
     Output,
 } from '@angular/core';
 import {SafeValue} from '@angular/platform-browser';
+import {LOCATION} from '@ng-web-apis/common';
+import {tuiPrepareExternalUrl} from '@taiga-ui/addon-charts/utils';
 import {
     TuiContextWithImplicit,
     tuiDefaultProp,
@@ -74,7 +76,8 @@ export class TuiPieChartComponent {
 
     constructor(
         @Inject(TuiIdService) idService: TuiIdService,
-        @Inject(Location) private readonly locationRef: Location,
+        @Inject(NgLocation) private readonly ngLocation: NgLocation,
+        @Inject(LOCATION) private readonly locationRef: Location,
         @Optional()
         @Inject(TuiHintOptionsDirective)
         private readonly hintOptions: TuiHintOptionsDirective | null,
@@ -102,9 +105,7 @@ export class TuiPieChartComponent {
 
     get mask(): string | null {
         return this.masked
-            ? `url(${this.locationRef.prepareExternalUrl(this.locationRef.path())}#${
-                  this.maskId
-              })`
+            ? tuiPrepareExternalUrl(this.ngLocation, this.locationRef, this.maskId)
             : null;
     }
 
@@ -129,7 +130,7 @@ export class TuiPieChartComponent {
     }
 
     getColor(index: number): SafeValue {
-        return `var(--tui-chart-${index}`;
+        return `var(--tui-chart-${index})`;
     }
 
     @tuiPure

diff --git a/projects/addon-charts/utils/index.ts b/projects/addon-charts/utils/index.ts
@@ -5,3 +5,4 @@ export * from './draw-curve';
 export * from './draw-line';
 export * from './line-angle';
 export * from './line-length';
+export * from './prepare-external-url';
diff --git a/projects/addon-charts/utils/prepare-external-url.ts b/projects/addon-charts/utils/prepare-external-url.ts
@@ -0,0 +1,13 @@
+import {Location as NgLocation} from '@angular/common';
+
+export function tuiPrepareExternalUrl(
+    locationNg: NgLocation,
+    locationRef: Location,
+    hash: string,
+): string {
+    const url = locationNg
+        .prepareExternalUrl(locationNg.path(false))
+        .replace(locationRef.origin, ``);
+
+    return `url(${url}#${hash})`;
+}