diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html index 5e88f8e794..0c5eb426b3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html @@ -318,6 +318,11 @@ {{ 'tooltip.hide-zero-tooltip-values' | translate }} +
+ + {{ 'tooltip.show-stack-total' | translate }} + +
{{ 'tooltip.background-color' | translate }}
string; @@ -43,6 +44,7 @@ export interface TimeSeriesChartTooltipWidgetSettings { tooltipDateColor: string; tooltipBackgroundColor: string; tooltipBackgroundBlur: number; + tooltipStackedShowTotal?: boolean } export enum TimeSeriesChartTooltipTrigger { @@ -88,7 +90,8 @@ export class TimeSeriesChartTooltip { private sanitizer: DomSanitizer, private settings: TimeSeriesChartTooltipWidgetSettings, private tooltipDateFormat: DateFormatProcessor, - private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction) { + private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction, + private translate: TranslateService) { } @@ -130,16 +133,65 @@ export class TimeSeriesChartTooltip { if (this.settings.tooltipShowDate) { this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval)); } + let total = 0; + let isStacked = false; + const totalUnits = new Set(); + let totalDecimal = 0; for (const item of items) { - if (!this.settings.tooltipHideZeroValues || (item.param.value[1] && item.param.value[1] !== 'false')) { + if (this.shouldShowItem(item)) { this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item)); + if (item.dataItem?.option?.stack !== undefined && !isNaN(Number(item.param.value[1]))) { + isStacked = true; + total += Number(item.param.value[1]); + if (isNotEmptyStr(item.dataItem.units)) { + totalUnits.add(item.dataItem.units); + } + if (isDefined(item.dataItem.decimals)) { + totalDecimal = Math.max(item.dataItem.decimals, totalDecimal); + } + } } } + if (isStacked && this.settings.tooltipStackedShowTotal) { + const unit = totalUnits.size === 1 ? Array.from(totalUnits.values())[0] : ""; + const totalValue = this.valueFormatFunction(total, {} as FormattedData, unit, totalDecimal); + this.renderer.appendChild(tooltipItemsElement, this.constructTooltipTotalStackedElement(totalValue)); + } + } + } + + private shouldShowItem(item: TooltipItem): boolean { + if (!this.settings.tooltipHideZeroValues) return true; + const value = item.param?.value?.[1]; + return value && value !== 'false'; + } + + private createElement(tag = 'div', styles?: Record): HTMLElement { + const node = this.renderer.createElement(tag); + if (styles) { + for (const [k, v] of Object.entries(styles)) { + this.renderer.setStyle(node, k, v); + } + } + return node; + } + + private applyFont(el: HTMLElement, font: {family: string; size: number; sizeUnit: string; style: string; weight: string; lineHeight: string}, color: string, overrides?: Partial) { + this.renderer.setStyle(el, 'font-family', font.family); + this.renderer.setStyle(el, 'font-size', `${font.size}${font.sizeUnit}`); + this.renderer.setStyle(el, 'font-style', font.style); + this.renderer.setStyle(el, 'font-weight', font.weight); + this.renderer.setStyle(el, 'line-height', font.lineHeight); + this.renderer.setStyle(el, 'color', color); + if (overrides) { + for (const [k, v] of Object.entries(overrides)) { + if (v != null) this.renderer.setStyle(el, k, v as string); + } } } private constructTooltipDateElement(param: CallbackDataParams, interval?: Interval): HTMLElement { - const dateElement: HTMLElement = this.renderer.createElement('div'); + const dateElement = this.createElement(); let dateText: string; const startTs = param.value[2]; const endTs = param.value[3]; @@ -156,43 +208,25 @@ export class TimeSeriesChartTooltip { dateText = this.tooltipDateFormat.update(ts, interval); } this.renderer.appendChild(dateElement, this.renderer.createText(dateText)); - this.renderer.setStyle(dateElement, 'font-family', this.settings.tooltipDateFont.family); - this.renderer.setStyle(dateElement, 'font-size', this.settings.tooltipDateFont.size + this.settings.tooltipDateFont.sizeUnit); - this.renderer.setStyle(dateElement, 'font-style', this.settings.tooltipDateFont.style); - this.renderer.setStyle(dateElement, 'font-weight', this.settings.tooltipDateFont.weight); - this.renderer.setStyle(dateElement, 'line-height', this.settings.tooltipDateFont.lineHeight); - this.renderer.setStyle(dateElement, 'color', this.settings.tooltipDateColor); + this.applyFont(dateElement, this.settings.tooltipDateFont, this.settings.tooltipDateColor); return dateElement; } private constructTooltipSeriesElement(item: TooltipItem): HTMLElement { - const labelValueElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.setStyle(labelValueElement, 'display', 'flex'); - this.renderer.setStyle(labelValueElement, 'flex-direction', 'row'); - this.renderer.setStyle(labelValueElement, 'align-items', 'center'); - this.renderer.setStyle(labelValueElement, 'align-self', 'stretch'); - this.renderer.setStyle(labelValueElement, 'gap', '12px'); - const labelElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.setStyle(labelElement, 'display', 'flex'); - this.renderer.setStyle(labelElement, 'align-items', 'center'); - this.renderer.setStyle(labelElement, 'gap', '8px'); - this.renderer.appendChild(labelValueElement, labelElement); - const circleElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.setStyle(circleElement, 'width', '8px'); - this.renderer.setStyle(circleElement, 'height', '8px'); - this.renderer.setStyle(circleElement, 'border-radius', '50%'); - this.renderer.setStyle(circleElement, 'background', item.param.color); - this.renderer.appendChild(labelElement, circleElement); - const labelTextElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.setProperty(labelTextElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, item.param.seriesName)); - this.renderer.setStyle(labelTextElement, 'font-family', this.settings.tooltipLabelFont.family); - this.renderer.setStyle(labelTextElement, 'font-size', this.settings.tooltipLabelFont.size + this.settings.tooltipLabelFont.sizeUnit); - this.renderer.setStyle(labelTextElement, 'font-style', this.settings.tooltipLabelFont.style); - this.renderer.setStyle(labelTextElement, 'font-weight', this.settings.tooltipLabelFont.weight); - this.renderer.setStyle(labelTextElement, 'line-height', this.settings.tooltipLabelFont.lineHeight); - this.renderer.setStyle(labelTextElement, 'color', this.settings.tooltipLabelColor); - this.renderer.appendChild(labelElement, labelTextElement); - const valueElement: HTMLElement = this.renderer.createElement('div'); + const row = this.createElement('div', {display: 'flex', 'flex-direction': 'row', 'align-items': 'center', 'align-self': 'stretch', gap: '12px'}); + + const label = this.createElement('div', { display: 'flex', 'align-items': 'center', gap: '8px' }); + this.renderer.appendChild(row, label); + + const dot = this.createElement('div', { width: '8px', height: '8px', 'border-radius': '50%', background: item.param.color as string }); + this.renderer.appendChild(label, dot); + + const labelText = this.createElement('div'); + this.renderer.setProperty(labelText, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, item.param.seriesName)); + this.applyFont(labelText, this.settings.tooltipLabelFont, this.settings.tooltipLabelColor); + this.renderer.appendChild(label, labelText); + + const valueElement: HTMLElement = this.createElement('div', { flex: '1', 'text-align': 'end' }); let formatFunction = this.valueFormatFunction; let latestData: FormattedData; let units = ''; @@ -210,19 +244,32 @@ export class TimeSeriesChartTooltip { } const value = formatFunction(item.param.value[1], latestData, units, decimals); this.renderer.setProperty(valueElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, value)); - this.renderer.setStyle(valueElement, 'flex', '1'); - this.renderer.setStyle(valueElement, 'text-align', 'end'); - this.renderer.setStyle(valueElement, 'font-family', this.settings.tooltipValueFont.family); - this.renderer.setStyle(valueElement, 'font-size', this.settings.tooltipValueFont.size + this.settings.tooltipValueFont.sizeUnit); - this.renderer.setStyle(valueElement, 'font-style', this.settings.tooltipValueFont.style); - this.renderer.setStyle(valueElement, 'font-weight', this.settings.tooltipValueFont.weight); - this.renderer.setStyle(valueElement, 'line-height', this.settings.tooltipValueFont.lineHeight); - this.renderer.setStyle(valueElement, 'color', this.settings.tooltipValueColor); - this.renderer.appendChild(labelValueElement, valueElement); - return labelValueElement; + this.applyFont(valueElement, this.settings.tooltipValueFont, this.settings.tooltipValueColor); + this.renderer.appendChild(row, valueElement); + + return row; } - private static mapTooltipParams(params: CallbackDataParams[] | CallbackDataParams, + private constructTooltipTotalStackedElement(total: string): HTMLElement { + const row = this.createElement('div', {display: 'flex', 'flex-direction': 'row', 'align-items': 'center', 'align-self': 'stretch', gap: '12px'}); + + const label = this.createElement('div', { display: 'flex', 'align-items': 'center', gap: '8px' }); + this.renderer.appendChild(row, label); + + const labelText = this.createElement('div'); + this.renderer.setProperty(labelText, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, this.translate.instant('legend.Total'))); + this.applyFont(labelText, this.settings.tooltipLabelFont, this.settings.tooltipLabelColor, { fontWeight: 'bold' }); + this.renderer.appendChild(label, labelText); + + const valueEl = this.createElement('div', { flex: '1', 'text-align': 'end' }); + this.renderer.setProperty(valueEl, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, total)); + this.applyFont(valueEl, this.settings.tooltipValueFont, this.settings.tooltipValueColor, { fontWeight: 'bold' }); + this.renderer.appendChild(row, valueEl); + + return row; + } + +private static mapTooltipParams(params: CallbackDataParams[] | CallbackDataParams, series?: TimeSeriesChartDataItem[], focusedSeriesIndex?: number): TooltipParams { const result: TooltipParams = { 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 86d952f2e2..089c655224 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 @@ -143,7 +143,7 @@ export interface TimeSeriesChartDataItem { xAxisIndex: number; yAxisId: TimeSeriesChartYAxisId; yAxisIndex: number; - option?: LineSeriesOption | CustomSeriesOption; + option?: LineSeriesOption; barRenderContext?: BarRenderContext; unitConvertor?: TbUnitConverter; } @@ -762,6 +762,7 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { }, tooltipDateColor: 'rgba(0, 0, 0, 0.76)', tooltipDateInterval: true, + tooltipStackedShowTotal: false, tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)', tooltipBackgroundBlur: 4, comparisonEnabled: false, 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 7ac6e3ec85..d447b51b37 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 @@ -212,7 +212,8 @@ export class TbTimeSeriesChart { this.ctx.sanitizer, this.settings, this.tooltipDateFormat, - tooltipValueFormatFunction + tooltipValueFormatFunction, + this.ctx.translate ); this.onResize(); if (this.autoResize) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html index f1554fef22..9a80362c8d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html @@ -242,6 +242,11 @@ {{ 'tooltip.hide-zero-tooltip-values' | translate }}
+
+ + {{ 'tooltip.show-stack-total' | translate }} + +
{{ 'tooltip.background-color' | translate }}