UI: Refactoring show total in chart tooltip
This commit is contained in:
Vladyslav_Prykhodko
parent
e4bdaba7de
commit
c1596b591d
@ -318,8 +318,8 @@
|
||||
{{ 'tooltip.hide-zero-tooltip-values' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div class="tb-form-row space-between">
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipStackedShowTotal">
|
||||
<div class="tb-form-row">
|
||||
<mat-slide-toggle class="mat-slide" formControlName="tooltipStackedShowTotal">
|
||||
{{ 'tooltip.show-stack-total' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
@ -363,10 +363,11 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
|
||||
this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable();
|
||||
this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
|
||||
this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroValues').enable({emitEvent: false});
|
||||
if (stack)
|
||||
if (stack) {
|
||||
this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').enable();
|
||||
else
|
||||
} else {
|
||||
this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').disable();
|
||||
}
|
||||
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').enable();
|
||||
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').enable();
|
||||
if (tooltipShowDate) {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
/// limitations under the License.
|
||||
///
|
||||
|
||||
import { isFunction } from '@core/utils';
|
||||
import { isDefined, isFunction, isNotEmptyStr } 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';
|
||||
@ -22,6 +22,7 @@ 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';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
export type TimeSeriesChartTooltipValueFormatFunction =
|
||||
(value: any, latestData: FormattedData, units?: string, decimals?: number) => string;
|
||||
@ -89,7 +90,8 @@ export class TimeSeriesChartTooltip {
|
||||
private sanitizer: DomSanitizer,
|
||||
private settings: TimeSeriesChartTooltipWidgetSettings,
|
||||
private tooltipDateFormat: DateFormatProcessor,
|
||||
private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction) {
|
||||
private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction,
|
||||
private translate: TranslateService) {
|
||||
|
||||
}
|
||||
|
||||
@ -131,23 +133,65 @@ export class TimeSeriesChartTooltip {
|
||||
if (this.settings.tooltipShowDate) {
|
||||
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval));
|
||||
}
|
||||
let total = 0, isStacked = false;
|
||||
let total = 0;
|
||||
let isStacked = false;
|
||||
const totalUnits = new Set<string>();
|
||||
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?.barRenderContext?.barStackIndex !== undefined && !isNaN(Number(item.param.value[1]))) {
|
||||
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)
|
||||
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipTotalStackedElement(total));
|
||||
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<string, string>): 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<CSSStyleDeclaration>) {
|
||||
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];
|
||||
@ -164,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 = '';
|
||||
@ -218,51 +244,29 @@ 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 constructTooltipTotalStackedElement(total: number): 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 labelTextElement: HTMLElement = this.renderer.createElement('div');
|
||||
this.renderer.setProperty(labelTextElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, 'Total'));
|
||||
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', 'bold');
|
||||
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');
|
||||
this.renderer.setProperty(valueElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, total.toString()));
|
||||
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', 'bold');
|
||||
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 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,
|
||||
|
||||
@ -143,7 +143,7 @@ export interface TimeSeriesChartDataItem {
|
||||
xAxisIndex: number;
|
||||
yAxisId: TimeSeriesChartYAxisId;
|
||||
yAxisIndex: number;
|
||||
option?: LineSeriesOption | CustomSeriesOption;
|
||||
option?: LineSeriesOption;
|
||||
barRenderContext?: BarRenderContext;
|
||||
unitConvertor?: TbUnitConverter;
|
||||
}
|
||||
|
||||
@ -212,7 +212,8 @@ export class TbTimeSeriesChart {
|
||||
this.ctx.sanitizer,
|
||||
this.settings,
|
||||
this.tooltipDateFormat,
|
||||
tooltipValueFormatFunction
|
||||
tooltipValueFormatFunction,
|
||||
this.ctx.translate
|
||||
);
|
||||
this.onResize();
|
||||
if (this.autoResize) {
|
||||
|
||||
@ -242,8 +242,8 @@
|
||||
{{ 'tooltip.hide-zero-tooltip-values' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div class="tb-form-row space-between">
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipStackedShowTotal">
|
||||
<div class="tb-form-row">
|
||||
<mat-slide-toggle class="mat-slide" formControlName="tooltipStackedShowTotal">
|
||||
{{ 'tooltip.show-stack-total' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
@ -227,10 +227,11 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
|
||||
this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').enable();
|
||||
this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
|
||||
this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroValues').enable();
|
||||
if (stack)
|
||||
if (stack) {
|
||||
this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').enable();
|
||||
else
|
||||
} else {
|
||||
this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').disable();
|
||||
}
|
||||
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').enable();
|
||||
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
|
||||
if (tooltipShowDate) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user