From 67caf425e78d9464017df9173fa38ab6671f1fa5 Mon Sep 17 00:00:00 2001 From: "Subarroca, Salvador" Date: Thu, 14 May 2020 08:44:47 +0200 Subject: [PATCH] fix(sunburst-chart,radial-chart): Fix css custom properties on template BREAKING CHANGE: Added DomSanitizer as non optional parameter to the components constructor. --- .../radial-chart/src/radial-chart.html | 4 ++- .../radial-chart/src/radial-chart.ts | 16 +++++++++- .../sunburst-chart/README.md | 30 +++++++++---------- .../sunburst-chart/src/sunburst-chart.html | 5 ++-- .../sunburst-chart/src/sunburst-chart.scss | 9 +++--- .../sunburst-chart/src/sunburst-chart.ts | 12 ++++++++ .../sunburst-chart/src/sunburst-chart.util.ts | 2 +- 7 files changed, 54 insertions(+), 24 deletions(-) diff --git a/libs/barista-components/radial-chart/src/radial-chart.html b/libs/barista-components/radial-chart/src/radial-chart.html index 662dda2057..fd3bda2c6c 100644 --- a/libs/barista-components/radial-chart/src/radial-chart.html +++ b/libs/barista-components/radial-chart/src/radial-chart.html @@ -22,7 +22,9 @@ {{ series.value }} {{ series.name }} diff --git a/libs/barista-components/radial-chart/src/radial-chart.ts b/libs/barista-components/radial-chart/src/radial-chart.ts index 626de1ce54..ea26949753 100644 --- 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, 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 index 6d250b5426..a9ba68f70a 100644 --- 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 index 2db657308a..c14ba98bc8 100644 --- 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 index 945f16c649..a490d2c377 100644 --- 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 index 0599391e94..6a6d656ecc 100644 --- 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, @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 index fd33a5a1ba..2a51e205a2 100644 --- 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;