From 19d692c1e10d0a3555d84ba6989d35e448c655e9 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 20 Jun 2024 11:34:37 +0300 Subject: [PATCH] UI: Added support unicode symbols in chart legend/tooltip --- .../chart/time-series-chart-widget.component.html | 6 +++--- .../widget/lib/chart/time-series-chart.models.ts | 15 ++++++++++----- .../widget/lib/chart/time-series-chart.ts | 6 +++++- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html index 092b0c2783..6d145c24c7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html @@ -106,15 +106,15 @@ (mouseleave)="onLegendKeyLeave(legendKey)" (click)="toggleLegendKey(legendKey)">
-
{{ legendKey.dataKey.label }}
+
{{ label | translate }} - - {{ legendData.data[legendKey.dataIndex][type] }} + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts index 76a3f84899..3687fe733c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts @@ -80,7 +80,7 @@ import { WidgetTimewindow } from '@shared/models/time/time.models'; import { UtilsService } from '@core/services/utils.service'; -import { Renderer2 } from '@angular/core'; +import { Renderer2, SecurityContext } from '@angular/core'; import { chartAnimationDefaultSettings, ChartAnimationSettings, @@ -98,6 +98,7 @@ import { prepareChartThemeColor } from '@home/components/widget/lib/chart/chart.models'; import { BarSeriesLabelOption } from 'echarts/types/src/chart/bar/BarSeries'; +import { DomSanitizer } from '@angular/platform-browser'; type TimeSeriesChartDataEntry = [number, any, number, number]; @@ -261,6 +262,7 @@ export const createTooltipValueFormatFunction = }; export const timeSeriesChartTooltipFormatter = (renderer: Renderer2, + sanitizer: DomSanitizer, tooltipDateFormat: DateFormatProcessor, settings: TimeSeriesChartTooltipWidgetSettings, params: CallbackDataParams[] | CallbackDataParams, @@ -280,8 +282,9 @@ export const timeSeriesChartTooltipFormatter = (renderer: Renderer2, renderer.setStyle(tooltipElement, 'align-items', 'flex-start'); renderer.setStyle(tooltipElement, 'gap', '16px'); - buildItemsTooltip(tooltipElement, tooltipParams.items, renderer, tooltipDateFormat, settings, valueFormatFunction, interval); - buildItemsTooltip(tooltipElement, tooltipParams.comparisonItems, renderer, tooltipDateFormat, settings, valueFormatFunction, interval); + buildItemsTooltip(tooltipElement, tooltipParams.items, renderer, sanitizer, tooltipDateFormat, settings, valueFormatFunction, interval); + buildItemsTooltip(tooltipElement, tooltipParams.comparisonItems, renderer, sanitizer, tooltipDateFormat, settings, + valueFormatFunction, interval); return tooltipElement; }; @@ -299,6 +302,7 @@ interface TooltipParams { const buildItemsTooltip = (tooltipElement: HTMLElement, items: TooltipItem[], renderer: Renderer2, + sanitizer: DomSanitizer, tooltipDateFormat: DateFormatProcessor, settings: TimeSeriesChartTooltipWidgetSettings, valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction, @@ -316,7 +320,7 @@ const buildItemsTooltip = (tooltipElement: HTMLElement, } for (const item of items) { renderer.appendChild(tooltipItemsElement, - constructTooltipSeriesElement(renderer, settings, item, valueFormatFunction)); + constructTooltipSeriesElement(renderer, sanitizer, settings, item, valueFormatFunction)); } } }; @@ -396,6 +400,7 @@ const constructTooltipDateElement = (renderer: Renderer2, }; const constructTooltipSeriesElement = (renderer: Renderer2, + sanitizer: DomSanitizer, settings: TimeSeriesChartTooltipWidgetSettings, item: TooltipItem, valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction): HTMLElement => { @@ -417,7 +422,7 @@ const constructTooltipSeriesElement = (renderer: Renderer2, renderer.setStyle(circleElement, 'background', item.param.color); renderer.appendChild(labelElement, circleElement); const labelTextElement: HTMLElement = renderer.createElement('div'); - renderer.appendChild(labelTextElement, renderer.createText(item.param.seriesName)); + renderer.setProperty(labelTextElement, 'innerHTML', sanitizer.sanitize(SecurityContext.HTML, item.param.seriesName)); renderer.setStyle(labelTextElement, 'font-family', settings.tooltipLabelFont.family); renderer.setStyle(labelTextElement, 'font-size', settings.tooltipLabelFont.size + settings.tooltipLabelFont.sizeUnit); renderer.setStyle(labelTextElement, 'font-style', settings.tooltipLabelFont.style); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts index 913c346712..3c184d7eab 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts @@ -74,6 +74,7 @@ import { DeepPartial } from '@shared/models/common'; import { BarRenderSharedContext } from '@home/components/widget/lib/chart/time-series-chart-bar.models'; import { TimeSeriesChartStateValueConverter } from '@home/components/widget/lib/chart/time-series-chart-state.models'; import { ChartLabelPosition, ChartShape, toAnimationOption } from '@home/components/widget/lib/chart/chart.models'; +import { DomSanitizer } from '@angular/platform-browser'; export class TbTimeSeriesChart { @@ -153,6 +154,8 @@ export class TbTimeSeriesChart { private latestData: FormattedData[] = []; + private readonly sanitizer: DomSanitizer; + yMin$ = this.yMinSubject.asObservable(); yMax$ = this.yMaxSubject.asObservable(); @@ -171,6 +174,7 @@ export class TbTimeSeriesChart { this.stateValueConverter = new TimeSeriesChartStateValueConverter(this.ctx.utilsService, this.settings.states); this.tooltipValueFormatFunction = this.stateValueConverter.tooltipFormatter; } + this.sanitizer = this.ctx.sanitizer; const $dashboardPageElement = this.ctx.$containerParent.parents('.tb-dashboard-page'); const dashboardPageElement = $dashboardPageElement.length ? $($dashboardPageElement[$dashboardPageElement.length-1]) : null; this.darkMode = this.settings.darkMode || dashboardPageElement?.hasClass('dark'); @@ -603,7 +607,7 @@ export class TbTimeSeriesChart { type: this.noAggregation ? 'line' : 'shadow' }, formatter: (params: CallbackDataParams[]) => - this.settings.showTooltip ? timeSeriesChartTooltipFormatter(this.renderer, this.tooltipDateFormat, + this.settings.showTooltip ? timeSeriesChartTooltipFormatter(this.renderer, this.sanitizer, this.tooltipDateFormat, this.settings, params, this.tooltipValueFormatFunction, this.settings.tooltipShowFocusedSeries ? getFocusedSeriesIndex(this.timeSeriesChart) : -1, this.dataItems, this.noAggregation ? null : this.ctx.timeWindow.interval) : undefined,