From 19d692c1e10d0a3555d84ba6989d35e448c655e9 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 20 Jun 2024 11:34:37 +0300 Subject: [PATCH 1/3] 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, From 756945d252d7c573550ccd3c2b8c6f223d0145f8 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 20 Jun 2024 14:27:56 +0300 Subject: [PATCH 2/3] UI: Created new class TimeSeriesChartTooltip and move tooltip processing from TimeSeriesChartModels --- ...ime-series-chart-basic-config.component.ts | 2 +- .../bar-chart-with-labels-widget.models.ts | 4 +- .../lib/chart/range-chart-widget.models.ts | 4 +- .../chart/time-series-chart-state.models.ts | 6 +- .../chart/time-series-chart-tooltip.models.ts | 263 ++++++++++++++++++ .../lib/chart/time-series-chart.models.ts | 257 +---------------- .../widget/lib/chart/time-series-chart.ts | 44 +-- ...-series-chart-widget-settings.component.ts | 2 +- 8 files changed, 306 insertions(+), 276 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts index 9a8cb6a7b3..18a2e833f6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts @@ -46,12 +46,12 @@ import { TimeSeriesChartWidgetSettings } from '@home/components/widget/lib/chart/time-series-chart-widget.models'; import { - TimeSeriesChartTooltipTrigger, TimeSeriesChartKeySettings, TimeSeriesChartType, TimeSeriesChartYAxes, TimeSeriesChartYAxisId } from '@home/components/widget/lib/chart/time-series-chart.models'; +import { TimeSeriesChartTooltipTrigger } from '@home/components/widget/lib/chart/time-series-chart-tooltip.models'; @Component({ selector: 'tb-time-series-chart-basic-config', diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts index 185922a3eb..244d8e3ef1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts @@ -35,7 +35,6 @@ import { TimeSeriesChartSeriesType, TimeSeriesChartSettings, TimeSeriesChartThreshold, - TimeSeriesChartTooltipWidgetSettings, TimeSeriesChartXAxisSettings, TimeSeriesChartYAxisSettings } from '@home/components/widget/lib/chart/time-series-chart.models'; @@ -48,6 +47,9 @@ import { ChartFillSettings, ChartFillType } from '@home/components/widget/lib/chart/chart.models'; +import { + TimeSeriesChartTooltipWidgetSettings +} from '@home/components/widget/lib/chart/time-series-chart-tooltip.models'; export interface BarChartWithLabelsWidgetSettings extends TimeSeriesChartTooltipWidgetSettings { dataZoom: boolean; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts index 5b3fb52689..147be339df 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts @@ -38,7 +38,6 @@ import { TimeSeriesChartSettings, TimeSeriesChartThreshold, timeSeriesChartThresholdDefaultSettings, - TimeSeriesChartTooltipWidgetSettings, TimeSeriesChartVisualMapPiece, TimeSeriesChartXAxisSettings, TimeSeriesChartYAxisSettings @@ -54,6 +53,9 @@ import { ChartLineType, ChartShape } from '@home/components/widget/lib/chart/chart.models'; +import { + TimeSeriesChartTooltipWidgetSettings +} from '@home/components/widget/lib/chart/time-series-chart-tooltip.models'; export interface RangeItem { index: number; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-state.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-state.models.ts index 35159ba944..adde10d78f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-state.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-state.models.ts @@ -18,13 +18,15 @@ import { TimeSeriesChartStateSettings, TimeSeriesChartStateSourceType, TimeSeriesChartTicksFormatter, - TimeSeriesChartTicksGenerator, - TimeSeriesChartTooltipValueFormatFunction + TimeSeriesChartTicksGenerator } from '@home/components/widget/lib/chart/time-series-chart.models'; import { UtilsService } from '@core/services/utils.service'; import { FormattedData } from '@shared/models/widget.models'; import { formatValue, isDefinedAndNotNull, isNumber, isNumeric } from '@core/utils'; import { LabelFormatterCallback } from 'echarts'; +import { + TimeSeriesChartTooltipValueFormatFunction +} from '@home/components/widget/lib/chart/time-series-chart-tooltip.models'; export class TimeSeriesChartStateValueConverter { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts new file mode 100644 index 0000000000..61750ff75b --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts @@ -0,0 +1,263 @@ +/// +/// Copyright © 2016-2024 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { isFunction } from '@core/utils'; +import { FormattedData } from '@shared/models/widget.models'; +import { DateFormatProcessor, DateFormatSettings, Font } from '@shared/models/widget-settings.models'; +import { + TimeSeriesChartDataItem, +} from '@home/components/widget/lib/chart/time-series-chart.models'; +import { Renderer2, SecurityContext } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { CallbackDataParams } from 'echarts/types/dist/shared'; +import { Interval } from '@shared/models/time/time.models'; + +export type TimeSeriesChartTooltipValueFormatFunction = + (value: any, latestData: FormattedData, units?: string, decimals?: number) => string; + +export interface TimeSeriesChartTooltipWidgetSettings { + showTooltip: boolean; + tooltipTrigger?: TimeSeriesChartTooltipTrigger; + tooltipShowFocusedSeries?: boolean; + tooltipLabelFont: Font; + tooltipLabelColor: string; + tooltipValueFont: Font; + tooltipValueColor: string; + tooltipValueFormatter?: string | TimeSeriesChartTooltipValueFormatFunction; + tooltipShowDate: boolean; + tooltipDateInterval?: boolean; + tooltipDateFormat: DateFormatSettings; + tooltipDateFont: Font; + tooltipDateColor: string; + tooltipBackgroundColor: string; + tooltipBackgroundBlur: number; +} + +export enum TimeSeriesChartTooltipTrigger { + point = 'point', + axis = 'axis' +} + +export const tooltipTriggerTranslationMap = new Map( + [ + [TimeSeriesChartTooltipTrigger.point, 'tooltip.trigger-point'], + [TimeSeriesChartTooltipTrigger.axis, 'tooltip.trigger-axis'] + ] +); + +interface TooltipItem { + param: CallbackDataParams; + dataItem: TimeSeriesChartDataItem; +} + +interface TooltipParams { + items: TooltipItem[]; + comparisonItems: TooltipItem[]; +} + +export const createTooltipValueFormatFunction = + (tooltipValueFormatter: string | TimeSeriesChartTooltipValueFormatFunction): TimeSeriesChartTooltipValueFormatFunction => { + let tooltipValueFormatFunction: TimeSeriesChartTooltipValueFormatFunction; + if (isFunction(tooltipValueFormatter)) { + tooltipValueFormatFunction = tooltipValueFormatter as TimeSeriesChartTooltipValueFormatFunction; + } else if (typeof tooltipValueFormatter === 'string' && tooltipValueFormatter.length) { + try { + tooltipValueFormatFunction = + new Function('value', 'latestData', tooltipValueFormatter) as TimeSeriesChartTooltipValueFormatFunction; + } catch (e) { + } + } + return tooltipValueFormatFunction; + }; + +export class TimeSeriesChartTooltip { + + constructor(private renderer: Renderer2, + private sanitizer: DomSanitizer, + private settings: TimeSeriesChartTooltipWidgetSettings, + private tooltipDateFormat: DateFormatProcessor, + private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction) { + + } + + formatted(params: CallbackDataParams[] | CallbackDataParams, focusedSeriesIndex: number, + series?: TimeSeriesChartDataItem[], interval?: Interval): HTMLElement { + if (!this.settings.showTooltip) { + return undefined; + } + + const tooltipParams = TimeSeriesChartTooltip.mapTooltipParams(params, series, focusedSeriesIndex); + if (!tooltipParams.items.length && !tooltipParams.comparisonItems.length) { + return null; + } + + const tooltipElement: HTMLElement = this.renderer.createElement('div'); + this.renderer.setStyle(tooltipElement, 'display', 'flex'); + this.renderer.setStyle(tooltipElement, 'flex-direction', 'column'); + this.renderer.setStyle(tooltipElement, 'align-items', 'flex-start'); + this.renderer.setStyle(tooltipElement, 'gap', '16px'); + + this.buildItemsTooltip(tooltipElement, tooltipParams.items, interval); + this.buildItemsTooltip(tooltipElement, tooltipParams.comparisonItems, interval); + + return tooltipElement; + } + + private buildItemsTooltip(tooltipElement: HTMLElement, + items: TooltipItem[], interval?: Interval) { + if (items.length) { + const tooltipItemsElement: HTMLElement = this.renderer.createElement('div'); + this.renderer.setStyle(tooltipItemsElement, 'display', 'flex'); + this.renderer.setStyle(tooltipItemsElement, 'flex-direction', 'column'); + this.renderer.setStyle(tooltipItemsElement, 'align-items', 'flex-start'); + this.renderer.setStyle(tooltipItemsElement, 'gap', '4px'); + this.renderer.appendChild(tooltipElement, tooltipItemsElement); + if (this.settings.tooltipShowDate) { + this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval)); + } + for (const item of items) { + this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item)); + } + } + } + + private constructTooltipDateElement(param: CallbackDataParams, interval?: Interval): HTMLElement { + const dateElement: HTMLElement = this.renderer.createElement('div'); + let dateText: string; + const startTs = param.value[2]; + const endTs = param.value[3]; + if (this.settings.tooltipDateInterval && startTs && endTs && (endTs - 1) > startTs) { + const startDateText = this.tooltipDateFormat.update(startTs, interval); + const endDateText = this.tooltipDateFormat.update(endTs - 1, interval); + if (startDateText === endDateText) { + dateText = startDateText; + } else { + dateText = startDateText + ' - ' + endDateText; + } + } else { + const ts = param.value[0]; + 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); + 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'); + let formatFunction = this.valueFormatFunction; + let latestData: FormattedData; + let units = ''; + let decimals = 0; + if (item.dataItem) { + if (item.dataItem.tooltipValueFormatFunction) { + formatFunction = item.dataItem.tooltipValueFormatFunction; + } + latestData = item.dataItem.latestData; + units = item.dataItem.units; + decimals = item.dataItem.decimals; + } + if (!latestData) { + latestData = {} as FormattedData; + } + const value = formatFunction(item.param.value[1], latestData, units, decimals); + this.renderer.appendChild(valueElement, this.renderer.createText(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; + } + + private static mapTooltipParams(params: CallbackDataParams[] | CallbackDataParams, + series?: TimeSeriesChartDataItem[], + focusedSeriesIndex?: number): TooltipParams { + const result: TooltipParams = { + items: [], + comparisonItems: [] + }; + if (!params || Array.isArray(params) && !params[0]) { + return result; + } + const firstParam = Array.isArray(params) ? params[0] : params; + if (!firstParam.value) { + return result; + } + let seriesParams: CallbackDataParams = null; + if (Array.isArray(params) && focusedSeriesIndex > -1) { + seriesParams = params.find(param => param.seriesIndex === focusedSeriesIndex); + } else if (!Array.isArray(params)) { + seriesParams = params; + } + if (seriesParams) { + TimeSeriesChartTooltip.appendTooltipItem(result, seriesParams, series); + } else if (Array.isArray(params)) { + for (seriesParams of params) { + TimeSeriesChartTooltip.appendTooltipItem(result, seriesParams, series); + } + } + return result; + } + + private static appendTooltipItem(tooltipParams: TooltipParams, seriesParams: CallbackDataParams, series?: TimeSeriesChartDataItem[]) { + const dataItem = series?.find(s => s.id === seriesParams.seriesId); + const tooltipItem: TooltipItem = { + param: seriesParams, + dataItem + }; + if (dataItem?.comparisonItem) { + tooltipParams.comparisonItems.push(tooltipItem); + } else { + tooltipParams.items.push(tooltipItem); + } + }; +} 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 3687fe733c..d90f7c9b10 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 @@ -23,15 +23,12 @@ import { autoDateFormat, AutoDateFormatSettings, ComponentStyle, - DateFormatProcessor, - DateFormatSettings, Font, tsToFormatTimeUnit, ValueSourceConfig, ValueSourceType } from '@shared/models/widget-settings.models'; import { - CallbackDataParams, TimeAxisBandWidthCalculator, VisualMapComponentOption, XAXisOption, @@ -75,12 +72,10 @@ import { BuiltinTextPosition } from 'zrender/src/core/types'; import { CartesianAxisOption } from 'echarts/types/src/coord/cartesian/AxisModel'; import { calculateAggIntervalWithWidgetTimeWindow, - Interval, IntervalMath, WidgetTimewindow } from '@shared/models/time/time.models'; import { UtilsService } from '@core/services/utils.service'; -import { Renderer2, SecurityContext } from '@angular/core'; import { chartAnimationDefaultSettings, ChartAnimationSettings, @@ -98,7 +93,11 @@ 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'; +import { + TimeSeriesChartTooltipTrigger, + TimeSeriesChartTooltipValueFormatFunction, + TimeSeriesChartTooltipWidgetSettings +} from '@home/components/widget/lib/chart/time-series-chart-tooltip.models'; type TimeSeriesChartDataEntry = [number, any, number, number]; @@ -128,9 +127,6 @@ const toTimeSeriesChartDataEntry = (entry: DataEntry, valueConverter?: (value: a return item; }; -export type TimeSeriesChartTooltipValueFormatFunction = - (value: any, latestData: FormattedData, units?: string, decimals?: number) => string; - export interface TimeSeriesChartDataItem { id: string; datasource: Datasource; @@ -217,249 +213,6 @@ export const adjustTimeAxisExtentToData = (timeAxisOption: TimeAxisBaseOption, timeAxisOption.max = (typeof max !== 'undefined' && Math.abs(max - defaultMax) < 1000) ? max : defaultMax; }; -export enum TimeSeriesChartTooltipTrigger { - point = 'point', - axis = 'axis' -} - -export const tooltipTriggerTranslationMap = new Map( - [ - [ TimeSeriesChartTooltipTrigger.point, 'tooltip.trigger-point' ], - [ TimeSeriesChartTooltipTrigger.axis, 'tooltip.trigger-axis' ] - ] -); - -export interface TimeSeriesChartTooltipWidgetSettings { - showTooltip: boolean; - tooltipTrigger?: TimeSeriesChartTooltipTrigger; - tooltipShowFocusedSeries?: boolean; - tooltipLabelFont: Font; - tooltipLabelColor: string; - tooltipValueFont: Font; - tooltipValueColor: string; - tooltipValueFormatter?: string | TimeSeriesChartTooltipValueFormatFunction; - tooltipShowDate: boolean; - tooltipDateInterval?: boolean; - tooltipDateFormat: DateFormatSettings; - tooltipDateFont: Font; - tooltipDateColor: string; - tooltipBackgroundColor: string; - tooltipBackgroundBlur: number; -} - -export const createTooltipValueFormatFunction = - (tooltipValueFormatter: string | TimeSeriesChartTooltipValueFormatFunction): TimeSeriesChartTooltipValueFormatFunction => { - let tooltipValueFormatFunction: TimeSeriesChartTooltipValueFormatFunction; - if (isFunction(tooltipValueFormatter)) { - tooltipValueFormatFunction = tooltipValueFormatter as TimeSeriesChartTooltipValueFormatFunction; - } else if (typeof tooltipValueFormatter === 'string' && tooltipValueFormatter.length) { - try { - tooltipValueFormatFunction = - new Function('value', 'latestData', tooltipValueFormatter) as TimeSeriesChartTooltipValueFormatFunction; - } catch (e) {} - } - return tooltipValueFormatFunction; - }; - -export const timeSeriesChartTooltipFormatter = (renderer: Renderer2, - sanitizer: DomSanitizer, - tooltipDateFormat: DateFormatProcessor, - settings: TimeSeriesChartTooltipWidgetSettings, - params: CallbackDataParams[] | CallbackDataParams, - valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction, - focusedSeriesIndex: number, - series?: TimeSeriesChartDataItem[], - interval?: Interval): null | HTMLElement => { - - const tooltipParams = mapTooltipParams(params, series, focusedSeriesIndex); - if (!tooltipParams.items.length && !tooltipParams.comparisonItems.length) { - return null; - } - - const tooltipElement: HTMLElement = renderer.createElement('div'); - renderer.setStyle(tooltipElement, 'display', 'flex'); - renderer.setStyle(tooltipElement, 'flex-direction', 'column'); - renderer.setStyle(tooltipElement, 'align-items', 'flex-start'); - renderer.setStyle(tooltipElement, 'gap', '16px'); - - buildItemsTooltip(tooltipElement, tooltipParams.items, renderer, sanitizer, tooltipDateFormat, settings, valueFormatFunction, interval); - buildItemsTooltip(tooltipElement, tooltipParams.comparisonItems, renderer, sanitizer, tooltipDateFormat, settings, - valueFormatFunction, interval); - - return tooltipElement; -}; - -interface TooltipItem { - param: CallbackDataParams; - dataItem: TimeSeriesChartDataItem; -} - -interface TooltipParams { - items: TooltipItem[]; - comparisonItems: TooltipItem[]; -} - -const buildItemsTooltip = (tooltipElement: HTMLElement, - items: TooltipItem[], - renderer: Renderer2, - sanitizer: DomSanitizer, - tooltipDateFormat: DateFormatProcessor, - settings: TimeSeriesChartTooltipWidgetSettings, - valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction, - interval?: Interval) => { - if (items.length) { - const tooltipItemsElement: HTMLElement = renderer.createElement('div'); - renderer.setStyle(tooltipItemsElement, 'display', 'flex'); - renderer.setStyle(tooltipItemsElement, 'flex-direction', 'column'); - renderer.setStyle(tooltipItemsElement, 'align-items', 'flex-start'); - renderer.setStyle(tooltipItemsElement, 'gap', '4px'); - renderer.appendChild(tooltipElement, tooltipItemsElement); - if (settings.tooltipShowDate) { - renderer.appendChild(tooltipItemsElement, - constructTooltipDateElement(renderer, tooltipDateFormat, settings, items[0].param, interval)); - } - for (const item of items) { - renderer.appendChild(tooltipItemsElement, - constructTooltipSeriesElement(renderer, sanitizer, settings, item, valueFormatFunction)); - } - } -}; - -const mapTooltipParams = (params: CallbackDataParams[] | CallbackDataParams, - series?: TimeSeriesChartDataItem[], - focusedSeriesIndex?: number): TooltipParams => { - const result: TooltipParams = { - items: [], - comparisonItems: [] - }; - if (!params || Array.isArray(params) && !params[0]) { - return result; - } - const firstParam = Array.isArray(params) ? params[0] : params; - if (!firstParam.value) { - return result; - } - let seriesParams: CallbackDataParams = null; - if (Array.isArray(params) && focusedSeriesIndex > -1) { - seriesParams = params.find(param => param.seriesIndex === focusedSeriesIndex); - } else if (!Array.isArray(params)) { - seriesParams = params; - } - if (seriesParams) { - appendTooltipItem(result, seriesParams, series); - } else if (Array.isArray(params)) { - for (seriesParams of params) { - appendTooltipItem(result, seriesParams, series); - } - } - return result; -}; - -const appendTooltipItem = (tooltipParams: TooltipParams, seriesParams: CallbackDataParams, series?: TimeSeriesChartDataItem[]) => { - const dataItem = series?.find(s => s.id === seriesParams.seriesId); - const tooltipItem: TooltipItem = { - param: seriesParams, - dataItem - }; - if (dataItem?.comparisonItem) { - tooltipParams.comparisonItems.push(tooltipItem); - } else { - tooltipParams.items.push(tooltipItem); - } -}; - -const constructTooltipDateElement = (renderer: Renderer2, - tooltipDateFormat: DateFormatProcessor, - settings: TimeSeriesChartTooltipWidgetSettings, - param: CallbackDataParams, - interval?: Interval): HTMLElement => { - const dateElement: HTMLElement = renderer.createElement('div'); - let dateText: string; - const startTs = param.value[2]; - const endTs = param.value[3]; - if (settings.tooltipDateInterval && startTs && endTs && (endTs - 1) > startTs) { - const startDateText = tooltipDateFormat.update(startTs, interval); - const endDateText = tooltipDateFormat.update(endTs - 1, interval); - if (startDateText === endDateText) { - dateText = startDateText; - } else { - dateText = startDateText + ' - ' + endDateText; - } - } else { - const ts = param.value[0]; - dateText = tooltipDateFormat.update(ts, interval); - } - renderer.appendChild(dateElement, renderer.createText(dateText)); - renderer.setStyle(dateElement, 'font-family', settings.tooltipDateFont.family); - renderer.setStyle(dateElement, 'font-size', settings.tooltipDateFont.size + settings.tooltipDateFont.sizeUnit); - renderer.setStyle(dateElement, 'font-style', settings.tooltipDateFont.style); - renderer.setStyle(dateElement, 'font-weight', settings.tooltipDateFont.weight); - renderer.setStyle(dateElement, 'line-height', settings.tooltipDateFont.lineHeight); - renderer.setStyle(dateElement, 'color', settings.tooltipDateColor); - return dateElement; -}; - -const constructTooltipSeriesElement = (renderer: Renderer2, - sanitizer: DomSanitizer, - settings: TimeSeriesChartTooltipWidgetSettings, - item: TooltipItem, - valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction): HTMLElement => { - const labelValueElement: HTMLElement = renderer.createElement('div'); - renderer.setStyle(labelValueElement, 'display', 'flex'); - renderer.setStyle(labelValueElement, 'flex-direction', 'row'); - renderer.setStyle(labelValueElement, 'align-items', 'center'); - renderer.setStyle(labelValueElement, 'align-self', 'stretch'); - renderer.setStyle(labelValueElement, 'gap', '12px'); - const labelElement: HTMLElement = renderer.createElement('div'); - renderer.setStyle(labelElement, 'display', 'flex'); - renderer.setStyle(labelElement, 'align-items', 'center'); - renderer.setStyle(labelElement, 'gap', '8px'); - renderer.appendChild(labelValueElement, labelElement); - const circleElement: HTMLElement = renderer.createElement('div'); - renderer.setStyle(circleElement, 'width', '8px'); - renderer.setStyle(circleElement, 'height', '8px'); - renderer.setStyle(circleElement, 'border-radius', '50%'); - renderer.setStyle(circleElement, 'background', item.param.color); - renderer.appendChild(labelElement, circleElement); - const labelTextElement: HTMLElement = renderer.createElement('div'); - 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); - renderer.setStyle(labelTextElement, 'font-weight', settings.tooltipLabelFont.weight); - renderer.setStyle(labelTextElement, 'line-height', settings.tooltipLabelFont.lineHeight); - renderer.setStyle(labelTextElement, 'color', settings.tooltipLabelColor); - renderer.appendChild(labelElement, labelTextElement); - const valueElement: HTMLElement = renderer.createElement('div'); - let formatFunction = valueFormatFunction; - let latestData: FormattedData; - let units = ''; - let decimals = 0; - if (item.dataItem) { - if (item.dataItem.tooltipValueFormatFunction) { - formatFunction = item.dataItem.tooltipValueFormatFunction; - } - latestData = item.dataItem.latestData; - units = item.dataItem.units; - decimals = item.dataItem.decimals; - } - if (!latestData) { - latestData = {} as FormattedData; - } - const value = formatFunction(item.param.value[1], latestData, units, decimals); - renderer.appendChild(valueElement, renderer.createText(value)); - renderer.setStyle(valueElement, 'flex', '1'); - renderer.setStyle(valueElement, 'text-align', 'end'); - renderer.setStyle(valueElement, 'font-family', settings.tooltipValueFont.family); - renderer.setStyle(valueElement, 'font-size', settings.tooltipValueFont.size + settings.tooltipValueFont.sizeUnit); - renderer.setStyle(valueElement, 'font-style', settings.tooltipValueFont.style); - renderer.setStyle(valueElement, 'font-weight', settings.tooltipValueFont.weight); - renderer.setStyle(valueElement, 'line-height', settings.tooltipValueFont.lineHeight); - renderer.setStyle(valueElement, 'color', settings.tooltipValueColor); - renderer.appendChild(labelValueElement, valueElement); - return labelValueElement; -}; - export enum TimeSeriesChartType { default = 'default', 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 3c184d7eab..d93f529de8 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 @@ -21,7 +21,6 @@ import { createTimeSeriesVisualMapOption, createTimeSeriesXAxis, createTimeSeriesYAxis, - createTooltipValueFormatFunction, defaultTimeSeriesChartYAxisSettings, generateChartData, LineSeriesStepType, @@ -37,9 +36,6 @@ import { TimeSeriesChartThreshold, timeSeriesChartThresholdDefaultSettings, TimeSeriesChartThresholdItem, - timeSeriesChartTooltipFormatter, - TimeSeriesChartTooltipTrigger, - TimeSeriesChartTooltipValueFormatFunction, TimeSeriesChartType, TimeSeriesChartXAxis, TimeSeriesChartYAxis, @@ -74,7 +70,12 @@ 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'; +import { + createTooltipValueFormatFunction, + TimeSeriesChartTooltip, + TimeSeriesChartTooltipTrigger, + TimeSeriesChartTooltipValueFormatFunction +} from '@home/components/widget/lib/chart/time-series-chart-tooltip.models'; export class TbTimeSeriesChart { @@ -134,7 +135,7 @@ export class TbTimeSeriesChart { private timeSeriesChartOptions: EChartsOption; private readonly tooltipDateFormat: DateFormatProcessor; - private readonly tooltipValueFormatFunction: TimeSeriesChartTooltipValueFormatFunction; + private readonly timeSeriesChartTooltip: TimeSeriesChartTooltip; private readonly stateValueConverter: TimeSeriesChartStateValueConverter; private yMinSubject = new BehaviorSubject(-1); @@ -154,8 +155,6 @@ export class TbTimeSeriesChart { private latestData: FormattedData[] = []; - private readonly sanitizer: DomSanitizer; - yMin$ = this.yMinSubject.asObservable(); yMax$ = this.yMaxSubject.asObservable(); @@ -165,6 +164,8 @@ export class TbTimeSeriesChart { private renderer: Renderer2, private autoResize = true) { + let tooltipValueFormatFunction: TimeSeriesChartTooltipValueFormatFunction; + this.settings = mergeDeep({} as TimeSeriesChartSettings, timeSeriesChartDefaultSettings, this.inputSettings as TimeSeriesChartSettings); @@ -172,9 +173,8 @@ export class TbTimeSeriesChart { this.stackMode = !this.comparisonEnabled && this.settings.stack; if (this.settings.states && this.settings.states.length) { this.stateValueConverter = new TimeSeriesChartStateValueConverter(this.ctx.utilsService, this.settings.states); - this.tooltipValueFormatFunction = this.stateValueConverter.tooltipFormatter; + 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'); @@ -187,14 +187,20 @@ export class TbTimeSeriesChart { if (this.settings.tooltipShowDate) { this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.tooltipDateFormat); } - if (!this.tooltipValueFormatFunction) { - this.tooltipValueFormatFunction = - createTooltipValueFormatFunction(this.settings.tooltipValueFormatter); - if (!this.tooltipValueFormatFunction) { - this.tooltipValueFormatFunction = (value, _latestData, units, decimals) => formatValue(value, decimals, units, false); + if (!tooltipValueFormatFunction) { + tooltipValueFormatFunction = createTooltipValueFormatFunction(this.settings.tooltipValueFormatter); + if (!tooltipValueFormatFunction) { + tooltipValueFormatFunction = (value, _latestData, units, decimals) => formatValue(value, decimals, units, false); } } } + this.timeSeriesChartTooltip = new TimeSeriesChartTooltip( + this.renderer, + this.ctx.sanitizer, + this.settings, + this.tooltipDateFormat, + tooltipValueFormatFunction + ); this.onResize(); if (this.autoResize) { this.shapeResize$ = new ResizeObserver(() => { @@ -607,10 +613,12 @@ export class TbTimeSeriesChart { type: this.noAggregation ? 'line' : 'shadow' }, formatter: (params: CallbackDataParams[]) => - this.settings.showTooltip ? timeSeriesChartTooltipFormatter(this.renderer, this.sanitizer, this.tooltipDateFormat, - this.settings, params, this.tooltipValueFormatFunction, + this.timeSeriesChartTooltip.formatted( + params, this.settings.tooltipShowFocusedSeries ? getFocusedSeriesIndex(this.timeSeriesChart) : -1, - this.dataItems, this.noAggregation ? null : this.ctx.timeWindow.interval) : undefined, + this.dataItems, + this.noAggregation ? null : this.ctx.timeWindow.interval, + ), padding: [8, 12], backgroundColor: this.settings.tooltipBackgroundColor, borderWidth: 0, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts index 32d3f5dd80..47cfc45a2f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts @@ -33,7 +33,6 @@ import { TimeSeriesChartWidgetSettings } from '@home/components/widget/lib/chart/time-series-chart-widget.models'; import { - TimeSeriesChartTooltipTrigger, TimeSeriesChartKeySettings, TimeSeriesChartType, TimeSeriesChartYAxes, @@ -41,6 +40,7 @@ import { } from '@home/components/widget/lib/chart/time-series-chart.models'; import { WidgetConfigComponentData } from '@home/models/widget-component.models'; import { WidgetService } from '@core/http/widget.service'; +import { TimeSeriesChartTooltipTrigger } from '@home/components/widget/lib/chart/time-series-chart-tooltip.models'; @Component({ selector: 'tb-time-series-chart-widget-settings', From 0e5f85b175b901d085e8fea5b729bcadf2ee81ed Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 3 Jul 2024 12:56:24 +0300 Subject: [PATCH 3/3] UI: Added show unicode symbols in chart value units --- .../chart/time-series-chart-tooltip.models.ts | 2 +- .../time-series-chart-widget.component.html | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts index 61750ff75b..99fc0ffc69 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts @@ -205,7 +205,7 @@ export class TimeSeriesChartTooltip { latestData = {} as FormattedData; } const value = formatFunction(item.param.value[1], latestData, units, decimals); - this.renderer.appendChild(valueElement, this.renderer.createText(value)); + 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); 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 6d145c24c7..5179d71c7e 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 @@ -74,20 +74,20 @@ - - {{ legendData.data[legendKey.dataIndex].min }} + - - {{ legendData.data[legendKey.dataIndex].max }} + - - {{ legendData.data[legendKey.dataIndex].avg }} + - - {{ legendData.data[legendKey.dataIndex].total }} + - - {{ legendData.data[legendKey.dataIndex].latest }} +