diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
index 8cdd89f01c..ab5fc0a867 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
@@ -44,6 +44,7 @@ import {
barChartWithLabelsDefaultSettings,
BarChartWithLabelsWidgetSettings
} from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models';
+import { TimeSeriesChartType } from '@home/components/widget/lib/chart/time-series-chart.models';
@Component({
selector: 'tb-bar-chart-with-labels-basic-config',
@@ -105,16 +106,30 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
icon: [configData.config.titleIcon, []],
iconColor: [configData.config.iconColor, []],
+ dataZoom: [settings.dataZoom, []],
+
showBarLabel: [settings.showBarLabel, []],
barLabelFont: [settings.barLabelFont, []],
barLabelColor: [settings.barLabelColor, []],
showBarValue: [settings.showBarValue, []],
barValueFont: [settings.barValueFont, []],
barValueColor: [settings.barValueColor, []],
+ showBarBorder: [settings.showBarBorder, []],
+ barBorderWidth: [settings.barBorderWidth, []],
+ barBorderRadius: [settings.barBorderRadius, []],
+ barBackgroundSettings: [settings.barBackgroundSettings, []],
+ noAggregationBarWidthSettings: [settings.noAggregationBarWidthSettings, []],
units: [configData.config.units, []],
decimals: [configData.config.decimals, []],
+ yAxis: [settings.yAxis, []],
+ xAxis: [settings.xAxis, []],
+
+ thresholds: [settings.thresholds, []],
+
+ animation: [settings.animation, []],
+
showLegend: [settings.showLegend, []],
legendPosition: [settings.legendPosition, []],
legendLabelFont: [settings.legendLabelFont, []],
@@ -159,6 +174,8 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
+ this.widgetConfig.config.settings.dataZoom = config.dataZoom;
+
this.widgetConfig.config.settings.showBarLabel = config.showBarLabel;
this.widgetConfig.config.settings.barLabelFont = config.barLabelFont;
this.widgetConfig.config.settings.barLabelColor = config.barLabelColor;
@@ -166,9 +183,22 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
this.widgetConfig.config.settings.barValueFont = config.barValueFont;
this.widgetConfig.config.settings.barValueColor = config.barValueColor;
+ this.widgetConfig.config.settings.showBarBorder = config.showBarBorder;
+ this.widgetConfig.config.settings.barBorderWidth = config.barBorderWidth;
+ this.widgetConfig.config.settings.barBorderRadius = config.barBorderRadius;
+ this.widgetConfig.config.settings.barBackgroundSettings = config.barBackgroundSettings;
+ this.widgetConfig.config.settings.noAggregationBarWidthSettings = config.noAggregationBarWidthSettings;
+
this.widgetConfig.config.units = config.units;
this.widgetConfig.config.decimals = config.decimals;
+ this.widgetConfig.config.settings.yAxis = config.yAxis;
+ this.widgetConfig.config.settings.xAxis = config.xAxis;
+
+ this.widgetConfig.config.settings.thresholds = config.thresholds;
+
+ this.widgetConfig.config.settings.animation = config.animation;
+
this.widgetConfig.config.settings.showLegend = config.showLegend;
this.widgetConfig.config.settings.legendPosition = config.legendPosition;
this.widgetConfig.config.settings.legendLabelFont = config.legendLabelFont;
@@ -196,7 +226,7 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
}
protected validatorTriggers(): string[] {
- return ['showTitle', 'showIcon', 'showBarLabel', 'showBarValue', 'showLegend', 'showTooltip', 'tooltipShowDate'];
+ return ['showTitle', 'showIcon', 'showBarLabel', 'showBarValue', 'showBarBorder', 'showLegend', 'showTooltip', 'tooltipShowDate'];
}
protected updateValidators(emitEvent: boolean, trigger?: string) {
@@ -204,6 +234,7 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
const showIcon: boolean = this.barChartWidgetConfigForm.get('showIcon').value;
const showBarLabel: boolean = this.barChartWidgetConfigForm.get('showBarLabel').value;
const showBarValue: boolean = this.barChartWidgetConfigForm.get('showBarValue').value;
+ const showBarBorder: boolean = this.barChartWidgetConfigForm.get('showBarBorder').value;
const showLegend: boolean = this.barChartWidgetConfigForm.get('showLegend').value;
const showTooltip: boolean = this.barChartWidgetConfigForm.get('showTooltip').value;
const tooltipShowDate: boolean = this.barChartWidgetConfigForm.get('tooltipShowDate').value;
@@ -250,7 +281,11 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
this.barChartWidgetConfigForm.get('barValueFont').disable();
this.barChartWidgetConfigForm.get('barValueColor').disable();
}
-
+ if (showBarBorder) {
+ this.barChartWidgetConfigForm.get('barBorderWidth').enable();
+ } else {
+ this.barChartWidgetConfigForm.get('barBorderWidth').disable();
+ }
if (showLegend) {
this.barChartWidgetConfigForm.get('legendPosition').enable();
this.barChartWidgetConfigForm.get('legendLabelFont').enable();
@@ -328,4 +363,6 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
processor.update(Date.now());
return processor.formatted;
}
+
+ protected readonly TimeSeriesChartType = TimeSeriesChartType;
}
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 8d99a7bd3f..73ecad5264 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
@@ -19,26 +19,49 @@ import {
BackgroundType,
ComponentStyle,
customDateFormat,
- Font, textStyle
+ Font,
+ textStyle
} from '@shared/models/widget-settings.models';
import { LegendPosition } from '@shared/models/widget.models';
import { EChartsTooltipWidgetSettings } from '@home/components/widget/lib/chart/echarts-widget.models';
import { DeepPartial } from '@shared/models/common';
import {
- TimeSeriesChartKeySettings, TimeSeriesChartSeriesType,
- TimeSeriesChartSettings
+ defaultTimeSeriesChartXAxisSettings,
+ defaultTimeSeriesChartYAxisSettings,
+ SeriesFillSettings,
+ SeriesFillType,
+ timeSeriesChartAnimationDefaultSettings,
+ TimeSeriesChartAnimationSettings,
+ TimeSeriesChartKeySettings,
+ timeSeriesChartNoAggregationBarWidthDefaultSettings,
+ TimeSeriesChartNoAggregationBarWidthSettings,
+ TimeSeriesChartSeriesType,
+ TimeSeriesChartSettings,
+ TimeSeriesChartThreshold,
+ TimeSeriesChartXAxisSettings,
+ TimeSeriesChartYAxisSettings
} from '@home/components/widget/lib/chart/time-series-chart.models';
import { CallbackDataParams, LabelLayoutOptionCallbackParams } from 'echarts/types/dist/shared';
-import { formatValue } from '@core/utils';
+import { formatValue, mergeDeep } from '@core/utils';
import { LabelLayoutOption } from 'echarts/types/src/util/types';
export interface BarChartWithLabelsWidgetSettings extends EChartsTooltipWidgetSettings {
+ dataZoom: boolean;
showBarLabel: boolean;
barLabelFont: Font;
barLabelColor: string;
showBarValue: boolean;
barValueFont: Font;
barValueColor: string;
+ showBarBorder: boolean;
+ barBorderWidth: number;
+ barBorderRadius: number;
+ barBackgroundSettings: SeriesFillSettings;
+ noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings;
+ yAxis: TimeSeriesChartYAxisSettings;
+ xAxis: TimeSeriesChartXAxisSettings;
+ animation: TimeSeriesChartAnimationSettings;
+ thresholds: TimeSeriesChartThreshold[];
showLegend: boolean;
legendPosition: LegendPosition;
legendLabelFont: Font;
@@ -48,6 +71,7 @@ export interface BarChartWithLabelsWidgetSettings extends EChartsTooltipWidgetSe
}
export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings = {
+ dataZoom: false,
showBarLabel: true,
barLabelFont: {
family: 'Roboto',
@@ -68,6 +92,28 @@ export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings
lineHeight: '12px'
},
barValueColor: 'rgba(0, 0, 0, 0.76)',
+ showBarBorder: false,
+ barBorderWidth: 2,
+ barBorderRadius: 0,
+ barBackgroundSettings: {
+ type: SeriesFillType.none,
+ opacity: 0.4,
+ gradient: {
+ start: 100,
+ end: 0
+ }
+ },
+ noAggregationBarWidthSettings: mergeDeep({} as TimeSeriesChartNoAggregationBarWidthSettings,
+ timeSeriesChartNoAggregationBarWidthDefaultSettings),
+ yAxis: mergeDeep({} as TimeSeriesChartYAxisSettings,
+ defaultTimeSeriesChartYAxisSettings,
+ { id: 'default', order: 0, showLine: false, showTicks: false } as TimeSeriesChartYAxisSettings),
+ xAxis: mergeDeep({} as TimeSeriesChartXAxisSettings,
+ defaultTimeSeriesChartXAxisSettings,
+ {showTicks: false, showSplitLines: false} as TimeSeriesChartXAxisSettings),
+ animation: mergeDeep({} as TimeSeriesChartAnimationSettings,
+ timeSeriesChartAnimationDefaultSettings),
+ thresholds: [],
showLegend: true,
legendPosition: LegendPosition.top,
legendLabelFont: {
@@ -116,27 +162,18 @@ export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings
};
export const barChartWithLabelsTimeSeriesSettings = (settings: BarChartWithLabelsWidgetSettings): DeepPartial
=> ({
- dataZoom: false,
+ dataZoom: settings.dataZoom,
yAxes: {
- default: {
- show: true,
- showLine: false,
- showTicks: false,
- showTickLabels: true,
- showSplitLines: true,
- }
- },
- xAxis: {
- show: true,
- showLine: true,
- showTicks: false,
- showTickLabels: true,
- showSplitLines: false
+ default: settings.yAxis
},
+ xAxis: settings.xAxis,
barWidthSettings: {
barGap: 0,
intervalGap: 0.5
},
+ noAggregationBarWidthSettings: settings.noAggregationBarWidthSettings,
+ animation: settings.animation,
+ thresholds: settings.thresholds,
showTooltip: settings.showTooltip,
tooltipValueFont: settings.tooltipValueFont,
tooltipValueColor: settings.tooltipValueColor,
@@ -164,10 +201,11 @@ export const barChartWithLabelsTimeSeriesKeySettings = (settings: BarChartWithLa
return {
type: TimeSeriesChartSeriesType.bar,
barSettings: {
- showBorder: false,
- borderWidth: 0,
- borderRadius: 0,
- showLabel: settings.showBarLabel,
+ showBorder: settings.showBarBorder,
+ borderWidth: settings.barBorderWidth,
+ borderRadius: settings.barBorderRadius,
+ backgroundSettings: settings.barBackgroundSettings,
+ showLabel: settings.showBarLabel || settings.showBarValue,
labelPosition: 'insideBottom',
labelFormatter: (params: CallbackDataParams): string => {
const labelParts: string[] = [];
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 02cd2bba75..df47a03692 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
@@ -408,6 +408,38 @@ export const defaultTimeSeriesChartYAxisSettings: TimeSeriesChartYAxisSettings =
splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light
};
+export const defaultTimeSeriesChartXAxisSettings: TimeSeriesChartXAxisSettings = {
+ show: true,
+ label: '',
+ labelFont: {
+ family: 'Roboto',
+ size: 12,
+ sizeUnit: 'px',
+ style: 'normal',
+ weight: '600',
+ lineHeight: '1'
+ },
+ labelColor: timeSeriesChartColorScheme['axis.label'].light,
+ position: AxisPosition.bottom,
+ showTickLabels: true,
+ tickLabelFont: {
+ family: 'Roboto',
+ size: 10,
+ sizeUnit: 'px',
+ style: 'normal',
+ weight: '400',
+ lineHeight: '1'
+ },
+ tickLabelColor: timeSeriesChartColorScheme['axis.tickLabel'].light,
+ ticksFormat: {},
+ showTicks: true,
+ ticksColor: timeSeriesChartColorScheme['axis.ticks'].light,
+ showLine: true,
+ lineColor: timeSeriesChartColorScheme['axis.line'].light,
+ showSplitLines: true,
+ splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light
+};
+
export type TimeSeriesChartYAxes = {[id: TimeSeriesChartYAxisId]: TimeSeriesChartYAxisSettings};
export interface TimeSeriesChartThreshold {
@@ -521,6 +553,20 @@ export interface TimeSeriesChartNoAggregationBarWidthSettings {
barWidth?: TimeSeriesChartBarWidth;
}
+export const timeSeriesChartNoAggregationBarWidthDefaultSettings: TimeSeriesChartNoAggregationBarWidthSettings = {
+ strategy: TimeSeriesChartNoAggregationBarWidthStrategy.group,
+ groupWidth: {
+ relative: true,
+ relativeWidth: 2,
+ absoluteWidth: 1000
+ },
+ barWidth: {
+ relative: true,
+ relativeWidth: 2,
+ absoluteWidth: 1000
+ }
+};
+
export interface TimeSeriesChartBarWidthSettings {
barGap: number;
intervalGap: number;
@@ -573,6 +619,17 @@ export interface TimeSeriesChartAnimationSettings {
animationDelayUpdate: number;
}
+export const timeSeriesChartAnimationDefaultSettings: TimeSeriesChartAnimationSettings = {
+ animation: true,
+ animationThreshold: 2000,
+ animationDuration: 500,
+ animationEasing: TimeSeriesChartAnimationEasing.cubicOut,
+ animationDelay: 0,
+ animationDurationUpdate: 300,
+ animationEasingUpdate: TimeSeriesChartAnimationEasing.cubicOut,
+ animationDelayUpdate: 0
+};
+
export interface TimeSeriesChartVisualMapPiece {
lt?: number;
gt?: number;
@@ -629,64 +686,16 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = {
defaultTimeSeriesChartYAxisSettings,
{ id: 'default', order: 0 } as TimeSeriesChartYAxisSettings)
},
- xAxis: {
- show: true,
- label: '',
- labelFont: {
- family: 'Roboto',
- size: 12,
- sizeUnit: 'px',
- style: 'normal',
- weight: '600',
- lineHeight: '1'
- },
- labelColor: timeSeriesChartColorScheme['axis.label'].light,
- position: AxisPosition.bottom,
- showTickLabels: true,
- tickLabelFont: {
- family: 'Roboto',
- size: 10,
- sizeUnit: 'px',
- style: 'normal',
- weight: '400',
- lineHeight: '1'
- },
- tickLabelColor: timeSeriesChartColorScheme['axis.tickLabel'].light,
- ticksFormat: {},
- showTicks: true,
- ticksColor: timeSeriesChartColorScheme['axis.ticks'].light,
- showLine: true,
- lineColor: timeSeriesChartColorScheme['axis.line'].light,
- showSplitLines: true,
- splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light
- },
- animation: {
- animation: true,
- animationThreshold: 2000,
- animationDuration: 500,
- animationEasing: TimeSeriesChartAnimationEasing.cubicOut,
- animationDelay: 0,
- animationDurationUpdate: 300,
- animationEasingUpdate: TimeSeriesChartAnimationEasing.cubicOut,
- animationDelayUpdate: 0
- },
+ xAxis: mergeDeep({} as TimeSeriesChartXAxisSettings,
+ defaultTimeSeriesChartXAxisSettings),
+ animation: mergeDeep({} as TimeSeriesChartAnimationSettings,
+ timeSeriesChartAnimationDefaultSettings),
barWidthSettings: {
barGap: 0.3,
intervalGap: 0.6
},
- noAggregationBarWidthSettings: {
- strategy: TimeSeriesChartNoAggregationBarWidthStrategy.group,
- groupWidth: {
- relative: true,
- relativeWidth: 2,
- absoluteWidth: 1000
- },
- barWidth: {
- relative: true,
- relativeWidth: 2,
- absoluteWidth: 1000
- }
- },
+ noAggregationBarWidthSettings: mergeDeep({} as TimeSeriesChartNoAggregationBarWidthSettings,
+ timeSeriesChartNoAggregationBarWidthDefaultSettings),
showTooltip: true,
tooltipTrigger: EChartsTooltipTrigger.axis,
tooltipValueFont: {
@@ -1000,6 +1009,11 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartXAxisSettin
fontFamily: xAxisTickLabelStyle.fontFamily,
fontSize: xAxisTickLabelStyle.fontSize,
hideOverlap: true,
+ /** Min/Max time label always visible **/
+ /* alignMinLabel: 'left',
+ alignMaxLabel: 'right',
+ showMinLabel: true,
+ showMaxLabel: true, */
formatter: (value: number, _index: number, extra: {level: number}) => {
const unit = tsToFormatTimeUnit(value);
const format = ticksFormat[unit];
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 df8b74f898..98cc1fd454 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
@@ -584,7 +584,7 @@ export class TbTimeSeriesChart {
}
this.timeSeriesChart.setOption(this.timeSeriesChartOptions);
- this.updateAxes();
+ this.updateAxes(false);
if (this.settings.dataZoom) {
this.timeSeriesChart.on('datazoom', () => {
@@ -609,7 +609,7 @@ export class TbTimeSeriesChart {
this.barRenderSharedContext, this.darkMode);
}
- private updateAxes() {
+ private updateAxes(lazy = true) {
const leftAxisList = this.yAxisList.filter(axis => axis.option.position === 'left');
let res = this.updateYAxisOffset(leftAxisList);
let leftOffset = res.offset + (!res.offset && this.settings.dataZoom ? 5 : 0);
@@ -659,7 +659,7 @@ export class TbTimeSeriesChart {
}
if (changed) {
this.timeSeriesChartOptions.yAxis = this.yAxisList.map(axis => axis.option);
- this.timeSeriesChart.setOption(this.timeSeriesChartOptions, {replaceMerge: ['yAxis', 'xAxis', 'grid'], lazyUpdate: true});
+ this.timeSeriesChart.setOption(this.timeSeriesChartOptions, {replaceMerge: ['yAxis', 'xAxis', 'grid'], lazyUpdate: lazy});
}
if (this.yAxisList.length) {
const extent = getAxisExtent(this.timeSeriesChart, this.yAxisList[0].id);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index bc8044b957..7db5a92746 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -17,39 +17,99 @@
-->