-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.scss
index f958bb6354..22e52e05dd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.scss
@@ -52,7 +52,18 @@
}
.tb-value-chart-card-chart {
flex: 1;
+ min-width: 0;
height: 100%;
}
+ &.auto-scale {
+ .tb-value-chart-card-value-container {
+ width: 35%;
+ display: flex;
+ justify-content: flex-start;
+ }
+ .tb-value-chart-card-chart {
+ width: 65%;
+ }
+ }
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
index d4b8404275..b59098de17 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
@@ -34,7 +34,9 @@ import {
ColorProcessor,
ComponentStyle,
getDataKey,
- overlayStyle, resolveCssSize,
+ overlayStyle,
+ resolveCssSize,
+ simpleDateFormat,
textStyle
} from '@shared/models/widget-settings.models';
import { WidgetComponent } from '@home/components/widget/widget.component';
@@ -44,16 +46,20 @@ import {
ValueChartCardLayout,
ValueChartCardWidgetSettings
} from '@home/components/widget/lib/cards/value-chart-card-widget.models';
-import { TbFlot } from '@home/components/widget/lib/flot-widget';
import { DataKey } from '@shared/models/widget.models';
-import { TbFlotKeySettings, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models';
import { getTsValueByLatestDataKey } from '@home/components/widget/lib/cards/aggregated-value-card.models';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
import { DomSanitizer } from '@angular/platform-browser';
+import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart';
+import {
+ TimeSeriesChartKeySettings,
+ TimeSeriesChartSeriesType,
+ TimeSeriesChartSettings
+} from '@home/components/widget/lib/chart/time-series-chart.models';
const layoutHeight = 56;
-const valueRelativeMaxWidth = 0.5;
+const valueRelativeWidth = 0.35;
@Component({
selector: 'tb-value-chart-card-widget',
@@ -81,6 +87,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
widgetTitlePanel: TemplateRef
;
layout: ValueChartCardLayout;
+ autoScale: boolean;
showValue = true;
valueText = 'N/A';
@@ -90,8 +97,8 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
backgroundStyle$: Observable;
overlayStyle: ComponentStyle = {};
- private flot: TbFlot;
- private flotDataKey: DataKey;
+ private lineChart: TbTimeSeriesChart;
+ private lineChartDataKey: DataKey;
private valueKey: DataKey;
private contentResize$: ResizeObserver;
@@ -129,6 +136,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
}
this.layout = this.settings.layout;
+ this.autoScale = this.settings.autoScale;
this.showValue = this.settings.showValue;
this.valueStyle = textStyle(this.settings.valueFont);
@@ -138,37 +146,34 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
this.overlayStyle = overlayStyle(this.settings.background.overlay);
if (this.ctx.defaultSubscription.firstDatasource?.dataKeys?.length) {
- this.flotDataKey = this.ctx.defaultSubscription.firstDatasource?.dataKeys[0];
- this.flotDataKey.settings = {
- fillLines: false,
- showLines: true,
- lineWidth: 2
- } as TbFlotKeySettings;
+ this.lineChartDataKey = this.ctx.defaultSubscription.firstDatasource?.dataKeys[0];
+ this.lineChartDataKey.settings = {
+ showPointLabel: false,
+ type: TimeSeriesChartSeriesType.line,
+ lineSettings: {
+ smooth: true,
+ showLine: true,
+ lineWidth: 2,
+ showPoints: false
+ }
+ } as TimeSeriesChartKeySettings;
}
}
public ngAfterViewInit() {
- const settings = {
- shadowSize: 0,
- enableSelection: false,
- smoothLines: true,
- grid: {
- tickColor: 'rgba(0,0,0,0.12)',
- horizontalLines: false,
- verticalLines: false,
- outlineWidth: 0,
- minBorderMargin: 0,
- margin: 0
+ const settings: TimeSeriesChartSettings = {
+ dataZoom: false,
+ xAxis: {
+ show: false
},
- yaxis: {
- showLabels: false,
- tickGenerator: 'return [(axis.max + axis.min) / 2];'
+ yAxis: {
+ show: false
},
- xaxis: {
- showLabels: false
- }
- } as TbFlotSettings;
- this.flot = new TbFlot(this.ctx, 'line', $(this.chartElement.nativeElement), settings);
+ tooltipDateInterval: false,
+ tooltipDateFormat: simpleDateFormat('dd MMM yyyy HH:mm:ss')
+ } as TimeSeriesChartSettings;
+
+ this.lineChart = new TbTimeSeriesChart(this.ctx, settings, this.chartElement.nativeElement, this.renderer, false);
this.contentResize$ = new ResizeObserver(() => {
this.onResize();
@@ -190,7 +195,9 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
}
public onDataUpdated() {
- this.flot.update();
+ if (this.lineChart) {
+ this.lineChart.update();
+ }
}
public onLatestDataUpdated() {
@@ -206,20 +213,21 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
this.valueColor.update(value);
this.cd.detectChanges();
setTimeout(() => {
- this.onResize(false);
+ this.onResize();
}, 0);
}
}
public onEditModeChanged() {
- this.flot.checkMouseEvents();
}
public onDestroy() {
- this.flot.destroy();
+ if (this.lineChart) {
+ this.lineChart.destroy();
+ }
}
- private onResize(fitTargetHeight = true) {
+ private onResize(fitTargetWidth = true) {
if (this.settings.autoScale && this.showValue) {
const contentWidth = this.valueChartCardContent.nativeElement.getBoundingClientRect().width;
const contentHeight = this.valueChartCardContent.nativeElement.getBoundingClientRect().height;
@@ -228,26 +236,26 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
this.valueFontSize = resolveCssSize(fontSize)[0];
}
const valueRelativeHeight = Math.min(this.valueFontSize / layoutHeight, 1);
- const targetValueHeight = contentHeight * valueRelativeHeight;
- const maxValueWidth = contentWidth * valueRelativeMaxWidth;
- this.setValueFontSize(targetValueHeight, maxValueWidth, fitTargetHeight);
+ const targetValueWidth = contentWidth * valueRelativeWidth;
+ const maxValueHeight = contentHeight * valueRelativeHeight;
+ this.setValueFontSize(targetValueWidth, maxValueHeight, fitTargetWidth);
}
- this.flot.resize();
+ this.lineChart.resize();
}
- private setValueFontSize(targetHeight: number, maxWidth: number, fitTargetHeight = true) {
+ private setValueFontSize(targetWidth: number, maxHeight: number, fitTargetWidth = true) {
const fontSize = getComputedStyle(this.valueChartCardValue.nativeElement).fontSize;
let valueFontSize = resolveCssSize(fontSize)[0];
this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px');
this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'lineHeight', '1');
- let valueHeight = this.valueChartCardValue.nativeElement.getBoundingClientRect().height;
- while (fitTargetHeight && valueHeight < targetHeight) {
+ let valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width;
+ while (fitTargetWidth && valueWidth < targetWidth) {
valueFontSize++;
this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px');
- valueHeight = this.valueChartCardValue.nativeElement.getBoundingClientRect().height;
+ valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width;
}
- let valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width;
- while ((valueHeight > targetHeight || valueWidth > maxWidth) && valueFontSize > 6) {
+ let valueHeight = this.valueChartCardValue.nativeElement.getBoundingClientRect().height;
+ while ((valueWidth > targetWidth || valueHeight > maxHeight) && valueFontSize > 6) {
valueFontSize--;
this.renderer.setStyle(this.valueChartCardValue.nativeElement, 'fontSize', valueFontSize + 'px');
valueWidth = this.valueChartCardValue.nativeElement.getBoundingClientRect().width;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
index 2e2faf35e8..c523bf7927 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
@@ -53,19 +53,14 @@ import { CallbackDataParams, CustomSeriesRenderItem, LabelLayoutOptionCallback }
import {
ECharts,
echartsModule,
- EChartsOption,
+ EChartsOption, EChartsSeriesItem,
echartsTooltipFormatter,
NamedDataSet,
toNamedData
} from '@home/components/widget/lib/chart/echarts-widget.models';
import { IntervalMath } from '@shared/models/time/time.models';
-interface BarChartDataItem {
- id: string;
- dataKey: DataKey;
- data: NamedDataSet;
- enabled: boolean;
-}
+type BarChartDataItem = EChartsSeriesItem;
interface BarChartLegendItem {
id: string;
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 d0b54fed53..99ea088c92 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
@@ -75,6 +75,7 @@ export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings
},
tooltipValueColor: 'rgba(0, 0, 0, 0.76)',
tooltipShowDate: true,
+ tooltipDateInterval: true,
tooltipDateFormat: customDateFormat('MMMM y'),
tooltipDateFont: {
family: 'Roboto',
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
index 515e47559d..7564bd9cab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
@@ -17,35 +17,45 @@
import * as echarts from 'echarts/core';
import { Axis } from 'echarts';
import AxisModel from 'echarts/types/src/coord/cartesian/AxisModel';
-import { formatValue, isDefinedAndNotNull, isNumber, isString } from '@core/utils';
+import { estimateLabelUnionRect } from 'echarts/lib/coord/axisHelper';
+import { formatValue, isDefinedAndNotNull } from '@core/utils';
import TimeScale from 'echarts/types/src/scale/Time';
import {
- DataZoomComponent, DataZoomComponentOption,
- GridComponent, GridComponentOption,
- MarkLineComponent, MarkLineComponentOption,
- TooltipComponent, TooltipComponentOption,
- VisualMapComponent, VisualMapComponentOption
+ DataZoomComponent,
+ DataZoomComponentOption,
+ GridComponent,
+ GridComponentOption,
+ MarkLineComponent,
+ MarkLineComponentOption,
+ TooltipComponent,
+ TooltipComponentOption,
+ VisualMapComponent,
+ VisualMapComponentOption
} from 'echarts/components';
import {
BarChart,
- LineChart,
+ BarSeriesOption,
CustomChart,
CustomSeriesOption,
+ LineChart,
LineSeriesOption,
- BarSeriesOption, PieSeriesOption, PieChart
+ PieChart,
+ PieSeriesOption
} from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
-import { DataEntry, DataSet } from '@shared/models/widget.models';
+import { DataEntry, DataKey, DataSet } from '@shared/models/widget.models';
import {
calculateAggIntervalWithWidgetTimeWindow,
- Interval,
IntervalMath,
WidgetTimewindow
} from '@shared/models/time/time.models';
import { CallbackDataParams } from 'echarts/types/dist/shared';
import { Renderer2 } from '@angular/core';
import { DateFormatProcessor, DateFormatSettings, Font } from '@shared/models/widget-settings.models';
+import GlobalModel from 'echarts/types/src/model/Global';
+import Axis2D from 'echarts/types/src/coord/cartesian/Axis2D';
+import SeriesModel from 'echarts/types/src/model/Series';
class EChartsModule {
private initialized = false;
@@ -139,6 +149,133 @@ export type EChartsDataItem = [number, any, number, number];
export type NamedDataSet = {name: string; value: EChartsDataItem}[];
+export type EChartsSeriesItem = {
+ id: string;
+ dataKey: DataKey;
+ data: NamedDataSet;
+ enabled: boolean;
+ units?: string;
+ decimals?: number;
+};
+
+export const getXAxis = (chart: ECharts): Axis2D => {
+ const model: GlobalModel = (chart as any).getModel();
+ const models = model.queryComponents({mainType: 'xAxis'});
+ if (models?.length) {
+ const axisModel = models[0] as AxisModel;
+ return axisModel.axis;
+ }
+ return null;
+};
+
+export const getYAxis = (chart: ECharts, axisId: string): Axis2D => {
+ const model: GlobalModel = (chart as any).getModel();
+ const models = model.queryComponents({mainType: 'yAxis', id: axisId});
+ if (models?.length) {
+ const axisModel = models[0] as AxisModel;
+ return axisModel.axis;
+ }
+ return null;
+};
+
+export const calculateYAxisWidth = (chart: ECharts, axisId: string): number => {
+ const axis = getYAxis(chart, axisId);
+ return calculateAxisSize(axis);
+};
+
+export const calculateXAxisHeight = (chart: ECharts): number => {
+ const axis = getXAxis(chart);
+ return calculateAxisSize(axis);
+};
+
+const calculateAxisSize = (axis: Axis2D): number => {
+ let size = 0;
+ if (axis && axis.model.option.show) {
+ const labelUnionRect = estimateLabelUnionRect(axis);
+ if (labelUnionRect) {
+ const margin = axis.model.get(['axisLabel', 'margin']);
+ const dimension = axis.isHorizontal() ? 'height' : 'width';
+ size += labelUnionRect[dimension] + margin;
+ }
+ if (!axis.scale.isBlank() && axis.model.get(['axisTick', 'show'])) {
+ const tickLength = axis.model.get(['axisTick', 'length']);
+ size += tickLength;
+ }
+ }
+ return size;
+};
+
+export const measureYAxisNameWidth = (chart: ECharts, axisId: string, name: string): number => {
+ const axis = getYAxis(chart, axisId);
+ if (axis) {
+ return axis.model.getModel('nameTextStyle').getTextRect(name).height;
+ }
+ return 0;
+};
+
+export const measureXAxisNameHeight = (chart: ECharts, name: string): number => {
+ const axis = getXAxis(chart);
+ if (axis) {
+ return axis.model.getModel('nameTextStyle').getTextRect(name).height;
+ }
+ return 0;
+};
+
+export const measureThresholdLabelOffset = (chart: ECharts, axisId: string, thresholdId: string, value: any): [number, number] => {
+ const axis = getYAxis(chart, axisId);
+ if (axis && !axis.scale.isBlank()) {
+ const extent = axis.scale.getExtent();
+ const model: GlobalModel = (chart as any).getModel();
+ const models = model.queryComponents({mainType: 'series', id: thresholdId});
+ if (models?.length) {
+ const lineSeriesModel = models[0] as SeriesModel;
+ const markLineModel = lineSeriesModel.getModel('markLine');
+ const labelPosition = markLineModel.get(['label', 'position']);
+ if (labelPosition === 'start' || labelPosition === 'end') {
+ const labelModel = markLineModel.getModel('label');
+ const formatter = markLineModel.get(['label', 'formatter']);
+ let textWidth = 0;
+ if (Array.isArray(value)) {
+ for (const val of value) {
+ if (val >= extent[0] && val <= extent[1]) {
+ const textVal = typeof formatter === 'string' ? formatter : formatter({value: val} as CallbackDataParams);
+ textWidth = Math.max(textWidth, labelModel.getTextRect(textVal).width);
+ }
+ }
+ } else {
+ if (value >= extent[0] && value <= extent[1]) {
+ const textVal = typeof formatter === 'string' ? formatter : formatter({value} as CallbackDataParams);
+ textWidth = labelModel.getTextRect(textVal).width;
+ }
+ }
+ if (!textWidth) {
+ return [0,0];
+ }
+ const distanceOpt = markLineModel.get(['label', 'distance']);
+ let distance = 5;
+ if (distanceOpt) {
+ distance = typeof distanceOpt === 'number' ? distanceOpt : distanceOpt[0];
+ }
+ const offset = distance + textWidth;
+ if (labelPosition === 'start') {
+ return [offset, 0];
+ } else {
+ return [0, offset];
+ }
+ }
+ }
+ }
+ return [0,0];
+};
+
+export const getAxisExtent = (chart: ECharts, axisId: string): [number, number] => {
+ const axis = getYAxis(chart, axisId);
+ if (axis) {
+ return axis.scale.getExtent();
+ }
+ return [0,0];
+};
+
export const toNamedData = (data: DataSet): NamedDataSet => {
if (!data?.length) {
return [];
@@ -162,11 +299,18 @@ const toEChartsDataItem = (entry: DataEntry): EChartsDataItem => {
return item;
};
+export enum EChartsTooltipTrigger {
+ point = 'point',
+ axis = 'axis'
+}
+
export interface EChartsTooltipWidgetSettings {
showTooltip: boolean;
+ tooltipTrigger?: EChartsTooltipTrigger;
tooltipValueFont: Font;
tooltipValueColor: string;
tooltipShowDate: boolean;
+ tooltipDateInterval?: boolean;
tooltipDateFormat: DateFormatSettings;
tooltipDateFont: Font;
tooltipDateColor: string;
@@ -177,13 +321,15 @@ export interface EChartsTooltipWidgetSettings {
export const echartsTooltipFormatter = (renderer: Renderer2,
tooltipDateFormat: DateFormatProcessor,
settings: EChartsTooltipWidgetSettings,
- params: CallbackDataParams[],
+ params: CallbackDataParams[] | CallbackDataParams,
decimals: number,
units: string,
- focusedSeriesIndex: number): null | HTMLElement => {
- if (!params.length || !params[0]) {
+ focusedSeriesIndex: number,
+ series?: EChartsSeriesItem[]): null | HTMLElement => {
+ if (!params || Array.isArray(params) && !params[0]) {
return null;
}
+ const firstParam = Array.isArray(params) ? params[0] : params;
const tooltipElement: HTMLElement = renderer.createElement('div');
renderer.setStyle(tooltipElement, 'display', 'flex');
renderer.setStyle(tooltipElement, 'flex-direction', 'column');
@@ -192,9 +338,9 @@ export const echartsTooltipFormatter = (renderer: Renderer2,
if (settings.tooltipShowDate) {
const dateElement: HTMLElement = renderer.createElement('div');
let dateText: string;
- const startTs = params[0].value[2];
- const endTs = params[0].value[3];
- if (startTs && endTs && (endTs - 1) > startTs) {
+ const startTs = firstParam.value[2];
+ const endTs = firstParam.value[3];
+ if (settings.tooltipDateInterval && startTs && endTs && (endTs - 1) > startTs) {
const startDateText = tooltipDateFormat.update(startTs);
const endDateText = tooltipDateFormat.update(endTs - 1);
if (startDateText === endDateText) {
@@ -203,7 +349,7 @@ export const echartsTooltipFormatter = (renderer: Renderer2,
dateText = startDateText + ' - ' + endDateText;
}
} else {
- const ts = params[0].value[0];
+ const ts = firstParam.value[0];
dateText = tooltipDateFormat.update(ts);
}
renderer.appendChild(dateElement, renderer.createText(dateText));
@@ -216,14 +362,16 @@ export const echartsTooltipFormatter = (renderer: Renderer2,
renderer.appendChild(tooltipElement, dateElement);
}
let seriesParams: CallbackDataParams = null;
- if (focusedSeriesIndex > -1) {
+ if (Array.isArray(params) && focusedSeriesIndex > -1) {
seriesParams = params.find(param => param.seriesIndex === focusedSeriesIndex);
+ } else if (!Array.isArray(params)) {
+ seriesParams = params;
}
if (seriesParams) {
- renderer.appendChild(tooltipElement, constructEchartsTooltipSeriesElement(renderer, settings, seriesParams, decimals, units));
- } else {
+ renderer.appendChild(tooltipElement, constructEchartsTooltipSeriesElement(renderer, settings, seriesParams, decimals, units, series));
+ } else if (Array.isArray(params)) {
for (seriesParams of params) {
- renderer.appendChild(tooltipElement, constructEchartsTooltipSeriesElement(renderer, settings, seriesParams, decimals, units));
+ renderer.appendChild(tooltipElement, constructEchartsTooltipSeriesElement(renderer, settings, seriesParams, decimals, units, series));
}
}
return tooltipElement;
@@ -233,7 +381,8 @@ const constructEchartsTooltipSeriesElement = (renderer: Renderer2,
settings: EChartsTooltipWidgetSettings,
seriesParams: CallbackDataParams,
decimals: number,
- units: string): HTMLElement => {
+ units: string,
+ series?: EChartsSeriesItem[]): HTMLElement => {
const labelValueElement: HTMLElement = renderer.createElement('div');
renderer.setStyle(labelValueElement, 'display', 'flex');
renderer.setStyle(labelValueElement, 'flex-direction', 'row');
@@ -262,7 +411,16 @@ const constructEchartsTooltipSeriesElement = (renderer: Renderer2,
renderer.setStyle(labelTextElement, 'color', 'rgba(0, 0, 0, 0.76)');
renderer.appendChild(labelElement, labelTextElement);
const valueElement: HTMLElement = renderer.createElement('div');
- const value = formatValue(seriesParams.value[1], decimals, units, false);
+ let formatDecimals = decimals;
+ let formatUnits = units;
+ if (series) {
+ const item = series.find(s => s.id === seriesParams.seriesId);
+ if (item) {
+ formatDecimals = item.decimals;
+ formatUnits = item.units;
+ }
+ }
+ const value = formatValue(seriesParams.value[1], formatDecimals, formatUnits, false);
renderer.appendChild(valueElement, renderer.createText(value));
renderer.setStyle(valueElement, 'flex', '1');
renderer.setStyle(valueElement, 'text-align', 'end');
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 c50813f7b6..31905e70ba 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
@@ -71,6 +71,7 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
},
tooltipValueColor: 'rgba(0, 0, 0, 0.76)',
tooltipShowDate: true,
+ tooltipDateInterval: true,
tooltipDateFormat: simpleDateFormat('dd MMM yyyy HH:mm'),
tooltipDateFont: {
family: 'Roboto',
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts
new file mode 100644
index 0000000000..37ce7a9c7f
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts
@@ -0,0 +1,134 @@
+///
+/// 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 { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient';
+import { Interval, IntervalMath } from '@shared/models/time/time.models';
+import { LabelFormatterCallback, SeriesLabelOption } from 'echarts/types/src/util/types';
+import { TimeSeriesChartDataItem } from '@home/components/widget/lib/chart/time-series-chart.models';
+import { CustomSeriesRenderItemParams } from 'echarts';
+import { CustomSeriesRenderItemAPI, CustomSeriesRenderItemReturn } from 'echarts/types/dist/shared';
+import { isNumeric } from '@core/utils';
+import * as echarts from 'echarts/core';
+
+export interface BarVisualSettings {
+ color: string | LinearGradientObject;
+ borderColor: string;
+ borderWidth: number;
+ borderRadius: number;
+}
+
+export interface BarRenderContext {
+ barsCount?: number;
+ barIndex?: number;
+ timeInterval?: Interval;
+ visualSettings?: BarVisualSettings;
+ labelOption?: SeriesLabelOption;
+ barStackIndex?: number;
+ currentStackItems?: TimeSeriesChartDataItem[];
+}
+
+export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI,
+ renderCtx: BarRenderContext): CustomSeriesRenderItemReturn => {
+ const time = api.value(0) as number;
+ let start = api.value(2) as number;
+ const end = api.value(3) as number;
+ let interval = end - start;
+ const ts = start ? start : time;
+ if (!start || !end || !interval) {
+ interval = IntervalMath.numberValue(renderCtx.timeInterval);
+ start = time - interval / 2;
+ }
+ const gap = 0.3;
+ const barInterval = interval / (renderCtx.barsCount + gap * (renderCtx.barsCount + 3));
+ const intervalGap = barInterval * gap * 2;
+ const barGap = barInterval * gap;
+ const value = api.value(1);
+ const startTime = start + intervalGap + (barInterval + barGap) * renderCtx.barIndex;
+ const delta = barInterval;
+ let offset = 0;
+ if (renderCtx.currentStackItems?.length) {
+ for (let i = 0; i < renderCtx.barStackIndex; i++) {
+ const stackItem = renderCtx.currentStackItems[i];
+ const dataName = ts + '';
+ const data = stackItem.data.find(d => d.name === dataName);
+ if (data) {
+ const val = data.value[1];
+ if (isNumeric(val)) {
+ offset += Number(val);
+ }
+ }
+ }
+ }
+ let lowerLeft: number[];
+ if (offset !== 0 && isNumeric(value)) {
+ lowerLeft = api.coord([startTime, value >= 0 ? Number(value) + offset : offset]);
+ } else {
+ lowerLeft = api.coord([startTime, value >= 0 ? value : 0]);
+ }
+ const size = api.size([delta, value]);
+ const width = size[0];
+ const height = size[1];
+
+ const coordSys: {x: number; y: number; width: number; height: number} = params.coordSys as any;
+
+ const rectShape = echarts.graphic.clipRectByRect({
+ x: lowerLeft[0],
+ y: lowerLeft[1],
+ width,
+ height
+ }, {
+ x: coordSys.x,
+ y: coordSys.y,
+ width: coordSys.width,
+ height: coordSys.height
+ });
+
+ const zeroPos = api.coord([0, offset]);
+
+ const style: any = {
+ fill: renderCtx.visualSettings.color,
+ stroke: renderCtx.visualSettings.borderColor,
+ lineWidth: renderCtx.visualSettings.borderWidth
+ };
+
+ if (renderCtx.labelOption.show) {
+ let position = renderCtx.labelOption.position;
+ if (value < 0) {
+ if (position === 'top') {
+ position = 'bottom';
+ } else if (position === 'bottom') {
+ position = 'top';
+ }
+ }
+ style.text = (renderCtx.labelOption.formatter as LabelFormatterCallback)({value: [null, value]} as any);
+ style.textDistance = 5;
+ style.textPosition = position;
+ style.rich = renderCtx.labelOption.rich;
+ }
+
+ return rectShape && {
+ type: 'rect',
+ id: time + '',
+ shape: {...rectShape, r: renderCtx.visualSettings.borderRadius},
+ style,
+ focus: 'series',
+ transition: 'all',
+ enterFrom: {
+ style: { opacity: 0 },
+ shape: { height: 0, y: zeroPos[1] }
+ }
+ };
+};
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
new file mode 100644
index 0000000000..1b96aac669
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ {{ 'legend.Min' | translate }} |
+ {{ 'legend.Max' | translate }} |
+ {{ 'legend.Avg' | translate }} |
+ {{ 'legend.Total' | translate }} |
+ {{ 'legend.Latest' | translate }} |
+
+
+
+
+ |
+
+ |
+
+ {{ 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 }}
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ legendKey.dataKey.label }}
+
+
+
+
+ | {{ label | translate }} |
+
+ {{ legendData.data[legendKey.dataIndex][type] }}
+ |
+
+
+
+