UI: Improve bar chart with labels width configuration.

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html

@@ -84,8 +84,28 @@
       </div>
     </div>
   </div>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.time-series-chart.chart</div>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="dataZoom">
+        {{ 'widgets.time-series-chart.data-zoom' | translate }}
+      </mat-slide-toggle>
+    </div>
+  </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div>
+    <div class="tb-form-row space-between">
+      <div translate>widget-config.units-short</div>
+      <tb-unit-input
+          formControlName="units">
+      </tb-unit-input>
+    </div>
+    <div class="tb-form-row space-between">
+      <div translate>widget-config.decimals-short</div>
+      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+        <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
     <div class="tb-form-row space-between">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
         {{ 'widgets.bar-chart.label-on-bar' | translate }}
@@ -118,19 +138,57 @@
         </tb-color-input>
       </div>
     </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row">
-      <div translate>widget-config.units-short</div>
+      <mat-slide-toggle class="mat-slide" formControlName="showBarBorder">
-      <tb-unit-input
+        {{ 'widgets.time-series-chart.series.bar.show-border' | translate }}
-        formControlName="units">
+      </mat-slide-toggle>
-      </tb-unit-input>
     </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
-      <div translate>widget-config.decimals-short</div>
+      <div translate>widgets.time-series-chart.series.bar.border-width</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+      <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        <input matInput type="number" formControlName="barBorderWidth" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+      </mat-form-field>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.time-series-chart.series.bar.border-radius</div>
+      <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="number" formControlName="barBorderRadius" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
       </mat-form-field>
     </div>
+    <tb-time-series-chart-fill-settings
+        formControlName="barBackgroundSettings"
+        title="widgets.time-series-chart.series.background"
+        fillNoneTitle="widgets.time-series-chart.series.fill-type-solid">
+    </tb-time-series-chart-fill-settings>
+    <tb-time-series-no-aggregation-bar-width-settings
+        stroked
+        formControlName="noAggregationBarWidthSettings">
+    </tb-time-series-no-aggregation-bar-width-settings>
+  </div>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.y-axis</div>
+    <tb-time-series-chart-axis-settings
+        formControlName="yAxis"
+        axisType="yAxis"
+        hideUnits
+        hideDecimals>
+    </tb-time-series-chart-axis-settings>
+  </div>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.x-axis</div>
+    <tb-time-series-chart-axis-settings
+        formControlName="xAxis"
+        axisType="xAxis">
+    </tb-time-series-chart-axis-settings>
   </div>
+  <tb-time-series-chart-thresholds-panel
+      formControlName="thresholds"
+      [aliasController]="aliasController"
+      [dataKeyCallbacks]="callbacks"
+      [datasource]="datasource"
+      [widgetConfig]="widgetConfig?.config"
+      hideYAxis>
+  </tb-time-series-chart-thresholds-panel>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showLegend').value" [disabled]="!barChartWidgetConfigForm.get('showLegend').value">
       <mat-expansion-panel-header fxLayout="row wrap">
@@ -230,6 +288,9 @@
       </ng-template>
     </mat-expansion-panel>
   </div>
+  <tb-time-series-chart-animation-settings
+      formControlName="animation">
+  </tb-time-series-chart-animation-settings>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
     <div class="tb-form-row space-between">

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;
 }

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,
+  defaultTimeSeriesChartXAxisSettings,
-  TimeSeriesChartSettings
+  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<TimeSeriesChartSettings> => ({
-  dataZoom: false,
+  dataZoom: settings.dataZoom,
   yAxes: {
-    default: {
+    default: settings.yAxis
-      show: true,
-      showLine: false,
-      showTicks: false,
-      showTickLabels: true,
-      showSplitLines: true,
-    }
-  },
-  xAxis: {
-    show: true,
-    showLine: true,
-    showTicks: false,
-    showTickLabels: true,
-    showSplitLines: false
   },
+  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,
+      showBorder: settings.showBarBorder,
-      borderWidth: 0,
+      borderWidth: settings.barBorderWidth,
-      borderRadius: 0,
+      borderRadius: settings.barBorderRadius,
-      showLabel: settings.showBarLabel,
+      backgroundSettings: settings.barBackgroundSettings,
+      showLabel: settings.showBarLabel || settings.showBarValue,
       labelPosition: 'insideBottom',
       labelFormatter: (params: CallbackDataParams): string => {
         const labelParts: string[] = [];

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: {
+  xAxis: mergeDeep({} as TimeSeriesChartXAxisSettings,
-    show: true,
+    defaultTimeSeriesChartXAxisSettings),
-    label: '',
+  animation: mergeDeep({} as TimeSeriesChartAnimationSettings,
-    labelFont: {
+    timeSeriesChartAnimationDefaultSettings),
-      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
-  },
   barWidthSettings: {
     barGap: 0.3,
     intervalGap: 0.6
   },
-  noAggregationBarWidthSettings: {
+  noAggregationBarWidthSettings: mergeDeep({} as TimeSeriesChartNoAggregationBarWidthSettings,
-    strategy: TimeSeriesChartNoAggregationBarWidthStrategy.group,
+    timeSeriesChartNoAggregationBarWidthDefaultSettings),
-    groupWidth: {
-      relative: true,
-      relativeWidth: 2,
-      absoluteWidth: 1000
-    },
-    barWidth: {
-      relative: true,
-      relativeWidth: 2,
-      absoluteWidth: 1000
-    }
-  },
   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];

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);

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html

@@ -17,39 +17,99 @@
 -->
 <ng-container [formGroup]="barChartWidgetSettingsForm">
   <div class="tb-form-panel">
-    <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-chart-card-style</div>
+    <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-chart-style</div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
+      <mat-slide-toggle class="mat-slide" formControlName="dataZoom">
-        {{ 'widgets.bar-chart.label-on-bar' | translate }}
+        {{ 'widgets.time-series-chart.data-zoom' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings formControlName="barLabelFont"
-                          disabledLineHeight
-                          forceSizeUnit="px"
-                          previewText="Humidity">
-        </tb-font-settings>
-        <tb-color-input asBoxInput
-                        colorClearButton
-                        formControlName="barLabelColor">
-        </tb-color-input>
-      </div>
     </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-panel">
-      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarValue">
+      <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-appearance</div>
-        {{ 'widgets.bar-chart.value-on-bar' | translate }}
+      <div class="tb-form-row space-between">
-      </mat-slide-toggle>
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          {{ 'widgets.bar-chart.label-on-bar' | translate }}
-        <tb-font-settings formControlName="barValueFont"
+        </mat-slide-toggle>
-                          disabledLineHeight
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-                          forceSizeUnit="px"
+          <tb-font-settings formControlName="barLabelFont"
-                          previewText="45">
+                            disabledLineHeight
-        </tb-font-settings>
+                            forceSizeUnit="px"
-        <tb-color-input asBoxInput
+                            previewText="Humidity">
-                        colorClearButton
+          </tb-font-settings>
-                        formControlName="barValueColor">
+          <tb-color-input asBoxInput
-        </tb-color-input>
+                          colorClearButton
+                          formControlName="barLabelColor">
+          </tb-color-input>
+        </div>
+      </div>
+      <div class="tb-form-row space-between">
+        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarValue">
+          {{ 'widgets.bar-chart.value-on-bar' | translate }}
+        </mat-slide-toggle>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <tb-font-settings formControlName="barValueFont"
+                            disabledLineHeight
+                            forceSizeUnit="px"
+                            previewText="45">
+          </tb-font-settings>
+          <tb-color-input asBoxInput
+                          colorClearButton
+                          formControlName="barValueColor">
+          </tb-color-input>
+        </div>
+      </div>
+      <div class="tb-form-row">
+        <mat-slide-toggle class="mat-slide" formControlName="showBarBorder">
+          {{ 'widgets.time-series-chart.series.bar.show-border' | translate }}
+        </mat-slide-toggle>
+      </div>
+      <div class="tb-form-row space-between column-xs">
+        <div translate>widgets.time-series-chart.series.bar.border-width</div>
+        <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+          <input matInput type="number" formControlName="barBorderWidth" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+        </mat-form-field>
+      </div>
+      <div class="tb-form-row space-between column-xs">
+        <div translate>widgets.time-series-chart.series.bar.border-radius</div>
+        <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+          <input matInput type="number" formControlName="barBorderRadius" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+        </mat-form-field>
       </div>
+      <tb-time-series-chart-fill-settings
+          formControlName="barBackgroundSettings"
+          title="widgets.time-series-chart.series.background"
+          fillNoneTitle="widgets.time-series-chart.series.fill-type-solid">
+      </tb-time-series-chart-fill-settings>
+      <tb-time-series-no-aggregation-bar-width-settings
+          stroked
+          formControlName="noAggregationBarWidthSettings">
+      </tb-time-series-no-aggregation-bar-width-settings>
     </div>
+    <div class="tb-form-panel">
+      <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.y-axis</div>
+      <tb-time-series-chart-axis-settings
+          formControlName="yAxis"
+          axisType="yAxis"
+          advanced
+          hideUnits
+          hideDecimals>
+      </tb-time-series-chart-axis-settings>
+    </div>
+    <div class="tb-form-panel">
+      <div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.x-axis</div>
+      <tb-time-series-chart-axis-settings
+          formControlName="xAxis"
+          axisType="xAxis"
+          advanced>
+      </tb-time-series-chart-axis-settings>
+    </div>
+    <tb-time-series-chart-thresholds-panel
+        formControlName="thresholds"
+        [aliasController]="aliasController"
+        [dataKeyCallbacks]="dataKeyCallbacks"
+        [datasource]="datasource"
+        [widgetConfig]="widgetConfig?.config"
+        hideYAxis>
+    </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showLegend').value" [disabled]="!barChartWidgetSettingsForm.get('showLegend').value">
         <mat-expansion-panel-header fxLayout="row wrap">
@@ -149,16 +209,22 @@
         </ng-template>
       </mat-expansion-panel>
     </div>
-    <div class="tb-form-row space-between">
+    <tb-time-series-chart-animation-settings
-      <div>{{ 'widgets.background.background' | translate }}</div>
+        formControlName="animation">
-      <tb-background-settings formControlName="background">
+    </tb-time-series-chart-animation-settings>
-      </tb-background-settings>
+    <div class="tb-form-panel">
-    </div>
+      <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-    <div class="tb-form-row space-between">
+      <div class="tb-form-row space-between">
-      <div>{{ 'widget-config.card-padding' | translate }}</div>
+        <div>{{ 'widgets.background.background' | translate }}</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <tb-background-settings formControlName="background">
-        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+        </tb-background-settings>
-      </mat-form-field>
+      </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'widget-config.card-padding' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
     </div>
   </div>
 </ng-container>

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

@@ -16,6 +16,7 @@
 
 import { Component, Injector } from '@angular/core';
 import {
+  Datasource,
   legendPositions,
   legendPositionTranslationMap,
   WidgetSettings,
@@ -37,6 +38,15 @@ import {
 })
 export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsComponent {
 
+  public get datasource(): Datasource {
+    const datasources: Datasource[] = this.widgetConfig.config.datasources;
+    if (datasources && datasources.length) {
+      return datasources[0];
+    } else {
+      return null;
+    }
+  }
+
   legendPositions = legendPositions;
 
   legendPositionTranslationMap = legendPositionTranslationMap;
@@ -64,12 +74,26 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
   protected onSettingsSet(settings: WidgetSettings) {
     this.barChartWidgetSettingsForm = this.fb.group({
 
+      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, []],
+
+      yAxis: [settings.yAxis, []],
+      xAxis: [settings.xAxis, []],
+
+      thresholds: [settings.thresholds, []],
+
+      animation: [settings.animation, []],
 
       showLegend: [settings.showLegend, []],
       legendPosition: [settings.legendPosition, []],
@@ -94,12 +118,13 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
   }
 
   protected validatorTriggers(): string[] {
-    return ['showBarLabel', 'showBarValue', 'showLegend', 'showTooltip', 'tooltipShowDate'];
+    return ['showBarLabel', 'showBarValue', 'showBarBorder', 'showLegend', 'showTooltip', 'tooltipShowDate'];
   }
 
   protected updateValidators(emitEvent: boolean) {
     const showBarLabel: boolean = this.barChartWidgetSettingsForm.get('showBarLabel').value;
     const showBarValue: boolean = this.barChartWidgetSettingsForm.get('showBarValue').value;
+    const showBarBorder: boolean = this.barChartWidgetSettingsForm.get('showBarBorder').value;
     const showLegend: boolean = this.barChartWidgetSettingsForm.get('showLegend').value;
     const showTooltip: boolean = this.barChartWidgetSettingsForm.get('showTooltip').value;
     const tooltipShowDate: boolean = this.barChartWidgetSettingsForm.get('tooltipShowDate').value;
@@ -120,6 +145,12 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
       this.barChartWidgetSettingsForm.get('barValueColor').disable();
     }
 
+    if (showBarBorder) {
+      this.barChartWidgetSettingsForm.get('barBorderWidth').enable();
+    } else {
+      this.barChartWidgetSettingsForm.get('barBorderWidth').disable();
+    }
+
     if (showLegend) {
       this.barChartWidgetSettingsForm.get('legendPosition').enable();
       this.barChartWidgetSettingsForm.get('legendLabelFont').enable();

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html

@@ -56,13 +56,13 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div *ngIf="axisType === 'yAxis'" class="tb-form-row space-between">
+        <div *ngIf="axisType === 'yAxis' && !hideUnits" class="tb-form-row space-between">
           <div translate>widget-config.units-short</div>
           <tb-unit-input
             formControlName="units">
           </tb-unit-input>
         </div>
-        <div *ngIf="axisType === 'yAxis'" class="tb-form-row space-between">
+        <div *ngIf="axisType === 'yAxis' && !hideDecimals" class="tb-form-row space-between">
           <div translate>widget-config.decimals-short</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.ts

@@ -70,6 +70,14 @@ export class TimeSeriesChartAxisSettingsComponent implements OnInit, ControlValu
   @coerceBoolean()
   advanced = false;
 
+  @Input()
+  @coerceBoolean()
+  hideUnits = false;
+
+  @Input()
+  @coerceBoolean()
+  hideDecimals = false;
+
   private modelValue: TimeSeriesChartXAxisSettings | TimeSeriesChartYAxisSettings;
 
   private propagateChange = null;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html

@@ -73,7 +73,7 @@
       [formControl]="entityKeyFormControl">
     </tb-data-key-input>
   </div>
-  <div class="tb-y-axis-field">
+  <div *ngIf="!hideYAxis" class="tb-y-axis-field">
     <mat-form-field class="tb-inline-field fixed-height" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="yAxisId">
         <mat-option *ngFor="let yAxis of yAxisIds" [value]="yAxis">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.ts

@@ -53,6 +53,7 @@ import { deepClone } from '@core/utils';
 import {
   TimeSeriesChartThresholdSettingsPanelComponent
 } from '@home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-time-series-chart-threshold-row',
@@ -101,6 +102,10 @@ export class TimeSeriesChartThresholdRowComponent implements ControlValueAccesso
   @Input()
   yAxisIds: TimeSeriesChartYAxisId[];
 
+  @Input()
+  @coerceBoolean()
+  hideYAxis = false;
+
   @Output()
   thresholdRemoved = new EventEmitter();
 
@@ -220,6 +225,7 @@ export class TimeSeriesChartThresholdRowComponent implements ControlValueAccesso
       const ctx: any = {
         thresholdSettings: deepClone(this.modelValue),
         widgetConfig: this.widgetConfig,
+        hideYAxis: this.hideYAxis,
         yAxisIds: this.yAxisIds
       };
       const thresholdSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html

@@ -18,7 +18,7 @@
 <div class="tb-threshold-settings-panel" [formGroup]="thresholdSettingsFormGroup">
   <div class="tb-threshold-settings-title">{{ 'widgets.time-series-chart.threshold.threshold-settings' | translate }}</div>
   <div class="tb-threshold-settings-panel-content">
-    <div class="tb-form-row space-between column-xs">
+    <div *ngIf="!hideYAxis" class="tb-form-row space-between column-xs">
       <div translate>widgets.time-series-chart.axis.y-axis</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="yAxisId">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.ts

@@ -30,6 +30,7 @@ import {
 import { merge } from 'rxjs';
 import { WidgetConfig } from '@shared/models/widget.models';
 import { formatValue, isDefinedAndNotNull } from '@core/utils';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-time-series-chart-threshold-settings-panel',
@@ -66,6 +67,10 @@ export class TimeSeriesChartThresholdSettingsPanelComponent implements OnInit {
   @Input()
   popover: TbPopoverComponent<TimeSeriesChartThresholdSettingsPanelComponent>;
 
+  @Input()
+  @coerceBoolean()
+  hideYAxis = false;
+
   @Output()
   thresholdSettingsApplied = new EventEmitter<Partial<TimeSeriesChartThreshold>>();
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html

@@ -21,7 +21,7 @@
     <div class="tb-form-table-header">
       <div class="tb-form-table-header-cell tb-threshold-source-header" translate>widgets.time-series-chart.threshold.source</div>
       <div class="tb-form-table-header-cell tb-threshold-key-value-header" translate>widgets.time-series-chart.threshold.key-value</div>
-      <div class="tb-form-table-header-cell tb-y-axis-header" translate>widgets.time-series-chart.axis.y-axis</div>
+      <div *ngIf="!hideYAxis" class="tb-form-table-header-cell tb-y-axis-header" translate>widgets.time-series-chart.axis.y-axis</div>
       <div class="tb-form-table-header-cell tb-color-header" translate>widgets.color.color</div>
       <div class="tb-form-table-header-cell tb-units-header" translate>widget-config.units-short</div>
       <div class="tb-form-table-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
@@ -31,6 +31,7 @@
       <div *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold; let $index = index; let $last = last">
         <tb-time-series-chart-threshold-row fxFlex
                                     [formControl]="thresholdControl"
+                                    [hideYAxis]="hideYAxis"
                                     [yAxisIds]="yAxisIds"
                                     (thresholdRemoved)="removeThreshold($index)">
         </tb-time-series-chart-threshold-row>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.ts

@@ -38,6 +38,7 @@ import { IAliasController } from '@core/api/widget-api.models';
 import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
 import { DataKey, Datasource, WidgetConfig } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-time-series-chart-thresholds-panel',
@@ -77,6 +78,10 @@ export class TimeSeriesChartThresholdsPanelComponent implements ControlValueAcce
   @Input()
   yAxisIds: TimeSeriesChartYAxisId[];
 
+  @Input()
+  @coerceBoolean()
+  hideYAxis = false;
+
   thresholdsFormGroup: UntypedFormGroup;
 
   private propagateChange = (_val: any) => {};

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-form-panel" [formGroup]="barWidthSettingsFormGroup">
+<div class="tb-form-panel" [class.stroked]="stroked" [formGroup]="barWidthSettingsFormGroup">
   <div fxLayout="row" fxLayoutAlign="space-between center">
     <div fxFlex translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
     <tb-toggle-select formControlName="strategy" selectMediaBreakpoint="xs">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.ts

@@ -29,6 +29,7 @@ import {
   timeSeriesChartNoAggregationBarWidthStrategyTranslations
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import { merge } from 'rxjs';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-time-series-no-aggregation-bar-width-settings',
@@ -53,6 +54,10 @@ export class TimeSeriesNoAggregationBarWidthSettingsComponent implements OnInit,
   @Input()
   disabled: boolean;
 
+  @Input()
+  @coerceBoolean()
+  stroked = false;
+
   private modelValue: TimeSeriesChartNoAggregationBarWidthSettings;
 
   private propagateChange = null;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts

@@ -127,6 +127,9 @@ import {
 import {
   AutoDateFormatSettingsComponent
 } from '@home/components/widget/lib/settings/common/auto-date-format-settings.component';
+import {
+  TimeSeriesChartFillSettingsComponent
+} from '@home/components/widget/lib/settings/common/chart/time-series-chart-fill-settings.component';
 
 @NgModule({
   declarations: [
@@ -174,6 +177,7 @@ import {
     TimeSeriesChartYAxisRowComponent,
     TimeSeriesChartYAxisSettingsPanelComponent,
     TimeSeriesChartAnimationSettingsComponent,
+    TimeSeriesChartFillSettingsComponent,
     DataKeyInputComponent,
     EntityAliasInputComponent
   ],
@@ -227,6 +231,7 @@ import {
     TimeSeriesChartYAxisRowComponent,
     TimeSeriesChartYAxisSettingsPanelComponent,
     TimeSeriesChartAnimationSettingsComponent,
+    TimeSeriesChartFillSettingsComponent,
     DataKeyInputComponent,
     EntityAliasInputComponent
   ],

ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts

@@ -336,9 +336,6 @@ import {
 import {
   TimeSeriesChartLineSettingsComponent
 } from '@home/components/widget/lib/settings/chart/time-series-chart-line-settings.component';
-import {
-  TimeSeriesChartFillSettingsComponent
-} from '@home/components/widget/lib/settings/chart/time-series-chart-fill-settings.component';
 import {
   TimeSeriesChartBarSettingsComponent
 } from '@home/components/widget/lib/settings/chart/time-series-chart-bar-settings.component';
@@ -467,7 +464,6 @@ import {
     TimeSeriesChartKeySettingsComponent,
     TimeSeriesChartLineSettingsComponent,
     TimeSeriesChartBarSettingsComponent,
-    TimeSeriesChartFillSettingsComponent,
     TimeSeriesChartWidgetSettingsComponent
   ],
   imports: [
@@ -596,7 +592,6 @@ import {
     TimeSeriesChartKeySettingsComponent,
     TimeSeriesChartLineSettingsComponent,
     TimeSeriesChartBarSettingsComponent,
-    TimeSeriesChartFillSettingsComponent,
     TimeSeriesChartWidgetSettingsComponent
   ]
 })

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -5422,7 +5422,7 @@
             "bar-appearance": "Bar appearance",
             "label-on-bar": "Label on bar",
             "value-on-bar": "Value on bar",
-            "bar-chart-card-style": "Bar chart card style"
+            "bar-chart-style": "Bar chart style"
         },
         "battery-level": {
             "layout": "Layout",

ui-ngx/src/assets/locale/locale.constant-pl_PL.json

@@ -5172,7 +5172,7 @@
             "bar-appearance":"Wygląd słupka",
             "label-on-bar":"Etykieta na słupku",
             "value-on-bar":"Wartość na słupku",
-            "bar-chart-card-style":"Styl karty wykresu słupkowego"
+            "bar-chart-style":"Styl wykresu słupkowego"
         },
         "battery-level":{
             "layout":"Układ",