fix(sunburst-chart,radial-chart): Fix css custom properties on template

BREAKING CHANGE: Added DomSanitizer as non optional parameter to the components constructor.
christian-fischer · May 15, 2020 · 67caf42 · 67caf42
1 parent 8fbe2c1
commit 67caf42
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 24 deletions.
diff --git a/libs/barista-components/radial-chart/src/radial-chart.html b/libs/barista-components/radial-chart/src/radial-chart.html
@@ -22,7 +22,9 @@
     <dt-legend-item *ngFor="let series of _renderData">
       <dt-legend-symbol
         class="dt-radial-chart-legend-symbol"
-        [style.--dt-radial-chart-legend-symbol-color]="series.color"
+        [style]="
+          _sanitizeCSS('--dt-radial-chart-legend-symbol-color', series.color)
+        "
       >
       </dt-legend-symbol>
       <strong>{{ series.value }}</strong> {{ series.name }}

diff --git a/libs/barista-components/radial-chart/src/radial-chart.ts b/libs/barista-components/radial-chart/src/radial-chart.ts
@@ -31,7 +31,10 @@ import {
   TemplateRef,
   ViewEncapsulation,
 } from '@angular/core';
-import { DT_CHART_COLOR_PALETTE_ORDERED } from '@dynatrace/barista-components/theming';
+import {
+  DT_CHART_COLOR_PALETTE_ORDERED,
+  DtColors,
+} from '@dynatrace/barista-components/theming';
 import { isNumber } from '@dynatrace/barista-components/core';
 import { PieArcDatum } from 'd3-shape';
 import { combineLatest, of, Subject } from 'rxjs';
@@ -44,6 +47,7 @@ import {
   generatePieArcData,
   getSum,
 } from './utils/radial-chart-utils';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 /** Size of the inner (empty) circle in proportion to the circle's radius. */
 const DONUT_INNER_CIRCLE_FRACTION = 0.8;
@@ -168,6 +172,8 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
     private _elementRef: ElementRef<HTMLElement>,
     private _changeDetectorRef: ChangeDetectorRef,
     private _platform: Platform,
+    // TODO: remove this sanitizer when ivy is no longer opt out
+    private _sanitizer: DomSanitizer,
   ) {}
 
   /** AfterContentInit hook */
@@ -274,4 +280,12 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
       value: series.value,
     };
   }
+
+  /**
+   * Sanitization of the custom property is necessary as, custom property assignments do not work
+   * in a viewEngine setup. This can be removed with angular version 10, if ivy is no longer opt out.
+   */
+  _sanitizeCSS(prop: string, value: string | number | DtColors): SafeStyle {
+    return this._sanitizer.bypassSecurityTrustStyle(`${prop}: ${value}`);
+  }
 }
diff --git a/libs/barista-components/sunburst-chart/README.md b/libs/barista-components/sunburst-chart/README.md
@@ -81,21 +81,21 @@ This `DtSunburstChartNode` holds the information for every slice in the chart.
 The context of the overlay will be set to DtSunburstChartTooltipData object
 containing useful information that can be used inside the overlay's template
 
-| Name            | Type                           | Description                                                                     |
-| --------------- | ------------------------------ | ------------------------------------------------------------------------------- |
-| `origin`        | `DtSunburstChartNode`          | Node passed by user in `series` array.                                          |
-| `id`            | `string`                       | Internal identifier.                                                            |
-| `label`         | `string`                       | Name of the node to be shown. Copied from `origin.label`.                       |
-| `value`         | `number`                       | Numeric value. Copied from `origin.value` or calculated from `origin.children`. |
-| `valueRelative` | `number`                       | Numeric percentage value based on this node vs sum of top level.                |
-| `children`      | `DtSunburstChartTooltipData[]` | Array of nodes belonging to this parent.                                        |
-| `depth`         | `number`                       | Number of levels of children.                                                   |
-| `color`         | `DtColors | string`            | Color for this node in this state.                                              |
-| `colorHover`    | `DtColors | string`            | Color for this node when hovering in this state.                                |
-| `isCurrent`     | `boolean`                      | If node is the deepest selected one.                                            |
-| `visible`       | `boolean`                      | If node is visible in the sunburst-chart.                                       |
-| `active`        | `boolean`                      | If node or child are selected.                                                  |
-| `showLabel`     | `boolean`                      | If label should be shown based on selection and a minimum angle of slice.       |
+| Name                      | Type                           | Description                                                                     |
+| ------------------------- | ------------------------------ | ------------------------------------------------------------------------------- |
+| `origin`                  | `DtSunburstChartNode`          | Node passed by user in `series` array.                                          |
+| `id`                      | `string`                       | Internal identifier.                                                            |
+| `label`                   | `string`                       | Name of the node to be shown. Copied from `origin.label`.                       |
+| `value`                   | `number`                       | Numeric value. Copied from `origin.value` or calculated from `origin.children`. |
+| `valueRelative`           | `number`                       | Numeric percentage value based on this node vs sum of top level.                |
+| `children`                | `DtSunburstChartTooltipData[]` | Array of nodes belonging to this parent.                                        |
+| `depth`                   | `number`                       | Number of levels of children.                                                   |
+| `color`                   | `DtColors | string`            | Color for this node in this state.                                              |
+| `colorHover` (deprecated) | `DtColors | string`            | Color for this node when hovering in this state.                                |
+| `isCurrent`               | `boolean`                      | If node is the deepest selected one.                                            |
+| `visible`                 | `boolean`                      | If node is visible in the sunburst-chart.                                       |
+| `active`                  | `boolean`                      | If node or child are selected.                                                  |
+| `showLabel`               | `boolean`                      | If label should be shown based on selection and a minimum angle of slice.       |
 
 ## Examples
 

diff --git a/libs/barista-components/sunburst-chart/src/sunburst-chart.html b/libs/barista-components/sunburst-chart/src/sunburst-chart.html
@@ -16,8 +16,9 @@
       class="dt-sunburst-chart-slice"
       [class.dt-sunburst-chart-slice-current]="slice.data.isCurrent"
       [attr.d]="slice.path"
-      [style.--dt-sunburst-chart-slice-color]="slice.data.color"
-      [style.--dt-sunburst-chart-slice-color--hover]="slice.data.colorHover"
+      [attr.style]="
+        _sanitizeCSS('--dt-sunburst-chart-slice-color', slice.data.color)
+      "
       (click)="_select($event, slice)"
       (mouseenter)="openOverlay(slice)"
       (mouseleave)="closeOverlay()"

diff --git a/libs/barista-components/sunburst-chart/src/sunburst-chart.scss b/libs/barista-components/sunburst-chart/src/sunburst-chart.scss
@@ -17,15 +17,16 @@ text {
   fill: var(--dt-sunburst-chart-slice-color);
 
   &:hover {
-    fill: var(
-      --dt-sunburst-chart-slice-color--hover,
-      var(--dt-sunburst-chart-slice-color)
-    );
+    opacity: 0.8;
   }
 }
 
 .dt-sunburst-chart-slice-current {
   cursor: default;
+
+  &:hover {
+    opacity: 1;
+  }
 }
 
 .dt-sunburst-chart-label {

diff --git a/libs/barista-components/sunburst-chart/src/sunburst-chart.ts b/libs/barista-components/sunburst-chart/src/sunburst-chart.ts
@@ -50,6 +50,8 @@ import {
   getValue,
 } from './sunburst-chart.util';
 import { Platform } from '@angular/cdk/platform';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { DtColors } from '@dynatrace/barista-components/theming';
 
 const OVERLAY_PANEL_CLASS = 'dt-sunburst-chart-overlay-panel';
 const VIEWBOX_WIDTH = 480;
@@ -144,6 +146,8 @@ export class DtSunburstChart {
     private _overlayService: Overlay,
     private _viewContainerRef: ViewContainerRef,
     private _platform: Platform,
+    // TODO: remove this sanitizer when ivy is no longer opt out
+    private _sanitizer: DomSanitizer,
     private _elementRef?: ElementRef<HTMLElement>,
     @Optional()
     @Inject(DT_UI_TEST_CONFIG)
@@ -288,4 +292,12 @@ export class DtSunburstChart {
       };
     }
   }
+
+  /**
+   * Sanitization of the custom property is necessary as, custom property assignments do not work
+   * in a viewEngine setup. This can be removed with angular version 10, if ivy is no longer opt out.
+   */
+  _sanitizeCSS(prop: string, value: string | number | DtColors): SafeStyle {
+    return this._sanitizer.bypassSecurityTrustStyle(`${prop}: ${value}`);
+  }
 }
diff --git a/libs/barista-components/sunburst-chart/src/sunburst-chart.util.ts b/libs/barista-components/sunburst-chart/src/sunburst-chart.util.ts
@@ -54,7 +54,7 @@ export interface DtSunburstChartTooltipData {
   depth: number;
   /** Color for this node in this state */
   color: DtColors | string;
-  /** Color for this node when hovering in this state */
+  /** @deprecated Color for this node when hovering in this state */
   colorHover: DtColors | string;
   /** If node is the deepest selected one */
   isCurrent: boolean;