dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Added support unicode symbols in chart legend/tooltip

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-06-20 11:34:37 +03:00
parent c4e5ab65ee
commit 19d692c1e1
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
View File

@ -106,15 +106,15 @@
(mouseleave)="onLegendKeyLeave(legendKey)"
(click)="toggleLegendKey(legendKey)">
<div class="tb-time-series-chart-legend-item-label-circle" [style]="{background: !legendKey.dataKey.hidden ? legendKey.dataKey.color : null}"></div>
<div [style]="!legendKey.dataKey.hidden ? legendLabelStyle : disabledLegendLabelStyle">{{ legendKey.dataKey.label }}</div>
<div [style]="!legendKey.dataKey.hidden ? legendLabelStyle : disabledLegendLabelStyle" [innerHTML]="legendKey.dataKey.label | safe: 'html'"></div>
</div>
</div>
</ng-template>
<ng-template #legendDataRow let-label="label" let-type="type">
<tr>
<th class="tb-time-series-chart-legend-type-label" [style]="legendColumnTitleStyle">{{ label | translate }}</th>
<td *ngFor="let legendKey of legendKeys" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
{{ legendData.data[legendKey.dataIndex][type] }}
<td *ngFor="let legendKey of legendKeys" class="tb-time-series-chart-legend-value" [style]="legendValueStyle"
[innerHTML]="legendData.data[legendKey.dataIndex][type] | safe: 'html'">
</td>
</tr>
</ng-template>

15
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
View File

@ -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);

6
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
View File

@ -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,