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

UI: Improve range chart and bar chart axis pointers.

Browse Source
This commit is contained in:
Igor Kulikov 2024-01-12 18:29:24 +02:00
parent d2ba3d2d84
commit 0bf213be7d
2 changed files with 35 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
View File

@ -384,7 +384,25 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
});
this.barChartOptions = {
tooltip: {
trigger: 'none'
trigger: 'axis',
confine: true,
appendToBody: true,
axisPointer: {
type: 'shadow'
},
formatter: (params: CallbackDataParams[]) => {
if (this.settings.showTooltip) {
const focusedSeriesIndex = this.focusedSeriesIndex();
return echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
this.settings, params, this.decimals, this.units, focusedSeriesIndex);
} else {
return undefined;
}
},
padding: [8, 12],
backgroundColor: this.settings.tooltipBackgroundColor,
borderWidth: 0,
extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`
},
grid: {
containLabel: true,
@ -421,26 +439,6 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
this.barChartOptions.series = this.updateSeries();
if (this.settings.showTooltip) {
this.barChartOptions.tooltip = {
trigger: 'axis',
confine: true,
appendToBody: true,
axisPointer: {
type: 'shadow'
},
formatter: (params: CallbackDataParams[]) => {
const focusedSeriesIndex = this.focusedSeriesIndex();
return echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
this.settings, params, this.decimals, this.units, focusedSeriesIndex);
},
padding: [8, 12],
backgroundColor: this.settings.tooltipBackgroundColor,
borderWidth: 0,
extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`
};
}
this.barChart.setOption(this.barChartOptions);
this.shapeResize$ = new ResizeObserver(() => {

31
ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
View File

@ -286,7 +286,8 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
this.rangeChart.setOption({
xAxis: {
min: this.ctx.defaultSubscription.timeWindow.minTime,
max: this.ctx.defaultSubscription.timeWindow.maxTime
max: this.ctx.defaultSubscription.timeWindow.maxTime,
tbTimeWindow: this.ctx.defaultSubscription.timeWindow
},
series: [
{data: this.ctx.data?.length ? toNamedData(this.ctx.data[0].data) : []}
@ -315,7 +316,19 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
});
this.rangeChartOptions = {
tooltip: {
trigger: 'none'
trigger: 'axis',
confine: true,
appendToBody: true,
axisPointer: {
type: 'shadow'
},
formatter: (params: CallbackDataParams[]) =>
this.settings.showTooltip ? echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
this.settings, params, this.decimals, this.units, 0) : undefined,
padding: [8, 12],
backgroundColor: this.settings.tooltipBackgroundColor,
borderWidth: 0,
extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`
},
grid: {
containLabel: true,
@ -403,19 +416,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
}
};
if (this.settings.showTooltip) {
this.rangeChartOptions.tooltip = {
trigger: 'axis',
confine: true,
appendToBody: true,
formatter: (params: CallbackDataParams[]) => echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
this.settings, params, this.decimals, this.units, 0),
padding: [8, 12],
backgroundColor: this.settings.tooltipBackgroundColor,
borderWidth: 0,
extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`
};
}
(this.rangeChartOptions.xAxis as any).tbTimeWindow = this.ctx.defaultSubscription.timeWindow;
this.rangeChart.setOption(this.rangeChartOptions);