UI: Implement no aggregated data bar width strategies

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html

@@ -114,6 +114,33 @@
       axisType="xAxis">
     </tb-time-series-chart-axis-settings>
   </div>
+  <div *ngIf="chartType === TimeSeriesChartType.default || chartType === TimeSeriesChartType.bar"
+       class="tb-form-panel" formGroupName="noAggregationBarWidthSettings">
+    <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">
+        <tb-toggle-option *ngFor="let strategy of timeSeriesChartNoAggregationBarWidthStrategies" [value]="strategy">
+          {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }}
+        </tb-toggle-option>
+      </tb-toggle-select>
+    </div>
+    <div *ngIf="timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings.strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.group"
+         class="tb-form-row space-between column-xs">
+      <div translate>widgets.time-series-chart.bar-group-interval-width</div>
+      <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="number" formControlName="groupIntervalWidth" min="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+        <span matSuffix>ms</span>
+      </mat-form-field>
+    </div>
+    <div *ngIf="timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings.strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.separate"
+         class="tb-form-row space-between column-xs">
+      <div translate>widgets.time-series-chart.separate-bar-width</div>
+      <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="number" formControlName="separateBarWidth" min="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+        <span matSuffix>ms</span>
+      </mat-form-field>
+    </div>
+  </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetConfigForm.get('showLegend').value"
                          [disabled]="!timeSeriesChartWidgetConfigForm.get('showLegend').value">

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts

@@ -45,7 +45,12 @@ import {
   TimeSeriesChartWidgetSettings
 } from '@home/components/widget/lib/chart/time-series-chart-widget.models';
 import { EChartsTooltipTrigger } from '@home/components/widget/lib/chart/echarts-widget.models';
-import { TimeSeriesChartType } from '@home/components/widget/lib/chart/time-series-chart.models';
+import {
+  timeSeriesChartNoAggregationBarWidthStrategies,
+  TimeSeriesChartNoAggregationBarWidthStrategy,
+  timeSeriesChartNoAggregationBarWidthStrategyTranslations,
+  TimeSeriesChartType
+} from '@home/components/widget/lib/chart/time-series-chart.models';
 
 @Component({
   selector: 'tb-time-series-chart-basic-config',
@@ -71,13 +76,19 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
 
   legendPositionTranslationMap = legendPositionTranslationMap;
 
+  TimeSeriesChartNoAggregationBarWidthStrategy = TimeSeriesChartNoAggregationBarWidthStrategy;
+
+  timeSeriesChartNoAggregationBarWidthStrategies = timeSeriesChartNoAggregationBarWidthStrategies;
+
+  timeSeriesChartNoAggregationBarWidthStrategyTranslations = timeSeriesChartNoAggregationBarWidthStrategyTranslations;
+
   timeSeriesChartWidgetConfigForm: UntypedFormGroup;
 
   tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this);
 
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
-  chartType = TimeSeriesChartType.default;
+  chartType: TimeSeriesChartType = TimeSeriesChartType.default;
 
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
@@ -129,6 +140,12 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       yAxis: [settings.yAxis, []],
       xAxis: [settings.xAxis, []],
 
+      noAggregationBarWidthSettings: this.fb.group({
+        strategy: [settings.noAggregationBarWidthSettings.strategy, []],
+        groupIntervalWidth: [settings.noAggregationBarWidthSettings.groupIntervalWidth, [Validators.min(100)]],
+        separateBarWidth: [settings.noAggregationBarWidthSettings.separateBarWidth, [Validators.min(100)]],
+      }),
+
       showLegend: [settings.showLegend, []],
       legendLabelFont: [settings.legendLabelFont, []],
       legendLabelColor: [settings.legendLabelColor, []],
@@ -181,6 +198,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.yAxis = config.yAxis;
     this.widgetConfig.config.settings.xAxis = config.xAxis;
 
+    this.widgetConfig.config.settings.noAggregationBarWidthSettings = config.noAggregationBarWidthSettings;
+
     this.widgetConfig.config.settings.showLegend = config.showLegend;
     this.widgetConfig.config.settings.legendLabelFont = config.legendLabelFont;
     this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor;
@@ -208,7 +227,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
   }
 
   protected validatorTriggers(): string[] {
-    return ['showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate'];
+    return ['showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate', 'noAggregationBarWidthSettings.strategy'];
   }
 
   protected updateValidators(emitEvent: boolean, trigger?: string) {
@@ -217,6 +236,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     const showLegend: boolean = this.timeSeriesChartWidgetConfigForm.get('showLegend').value;
     const showTooltip: boolean = this.timeSeriesChartWidgetConfigForm.get('showTooltip').value;
     const tooltipShowDate: boolean = this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').value;
+    const noAggregationBarWidthSettingsStrategy: TimeSeriesChartNoAggregationBarWidthStrategy =
+      this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('strategy').value;
 
     if (showTitle) {
       this.timeSeriesChartWidgetConfigForm.get('title').enable();
@@ -245,6 +266,14 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       this.timeSeriesChartWidgetConfigForm.get('iconColor').disable();
     }
 
+    if (noAggregationBarWidthSettingsStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.group) {
+      this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('groupIntervalWidth').enable();
+      this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('separateBarWidth').disable();
+    } else if (noAggregationBarWidthSettingsStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate) {
+      this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('groupIntervalWidth').disable();
+      this.timeSeriesChartWidgetConfigForm.get('noAggregationBarWidthSettings').get('separateBarWidth').enable();
+    }
+
     if (showLegend) {
       this.timeSeriesChartWidgetConfigForm.get('legendLabelFont').enable();
       this.timeSeriesChartWidgetConfigForm.get('legendLabelColor').enable();

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts

@@ -17,7 +17,11 @@
 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 {
+  TimeSeriesChartDataItem,
+  TimeSeriesChartNoAggregationBarWidthSettings,
+  TimeSeriesChartNoAggregationBarWidthStrategy
+} 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';
@@ -33,6 +37,8 @@ export interface BarVisualSettings {
 export interface BarRenderContext {
   barsCount?: number;
   barIndex?: number;
+  noAggregation: boolean;
+  noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings;
   timeInterval?: Interval;
   visualSettings?: BarVisualSettings;
   labelOption?: SeriesLabelOption;
@@ -44,19 +50,35 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
                                     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 end = api.value(3) as number;
   let interval = end - start;
   const ts = start ? start : time;
+
+  const noAggregationGroup = renderCtx.noAggregation &&
+    renderCtx.noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group;
+  const separateBar = renderCtx.noAggregation &&
+    renderCtx.noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate;
+
+  if (renderCtx.noAggregation) {
+    if (noAggregationGroup) {
+      interval = renderCtx.noAggregationBarWidthSettings.groupIntervalWidth;
+    } else {
+      interval = renderCtx.noAggregationBarWidthSettings.separateBarWidth;
+    }
+    start = time - interval / 2;
+    end = time + interval / 2;
+  }
   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 barInterval = separateBar ? interval : 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 startTime = separateBar ? start : start + intervalGap + (barInterval + barGap) * renderCtx.barIndex;
   const delta = barInterval;
   let offset = 0;
   if (renderCtx.currentStackItems?.length) {

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts

@@ -376,6 +376,27 @@ export const timeSeriesChartThresholdDefaultSettings: TimeSeriesChartThreshold =
   labelColor: timeSeriesChartColorScheme['threshold.label'].light
 };
 
+export enum TimeSeriesChartNoAggregationBarWidthStrategy {
+  group = 'group',
+  separate = 'separate'
+}
+
+export const timeSeriesChartNoAggregationBarWidthStrategies =
+  Object.keys(TimeSeriesChartNoAggregationBarWidthStrategy) as TimeSeriesChartNoAggregationBarWidthStrategy[];
+
+export const timeSeriesChartNoAggregationBarWidthStrategyTranslations = new Map<TimeSeriesChartNoAggregationBarWidthStrategy, string>(
+  [
+    [TimeSeriesChartNoAggregationBarWidthStrategy.group, 'widgets.time-series-chart.no-aggregation-bar-width-strategy-group'],
+    [TimeSeriesChartNoAggregationBarWidthStrategy.separate, 'widgets.time-series-chart.no-aggregation-bar-width-strategy-separate']
+  ]
+);
+
+export interface TimeSeriesChartNoAggregationBarWidthSettings {
+  strategy: TimeSeriesChartNoAggregationBarWidthStrategy;
+  groupIntervalWidth?: number;
+  separateBarWidth?: number;
+}
+
 export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings {
   thresholds: TimeSeriesChartThreshold[];
   darkMode: boolean;
@@ -383,6 +404,7 @@ export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings {
   stack: boolean;
   yAxis: TimeSeriesChartYAxisSettings;
   xAxis: TimeSeriesChartAxisSettings;
+  noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings;
 }
 
 export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = {
@@ -450,6 +472,11 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = {
     showSplitLines: true,
     splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light
   },
+  noAggregationBarWidthSettings: {
+    strategy: TimeSeriesChartNoAggregationBarWidthStrategy.group,
+    groupIntervalWidth: 1000,
+    separateBarWidth: 1000
+  },
   showTooltip: true,
   tooltipTrigger: EChartsTooltipTrigger.axis,
   tooltipValueFont: {
@@ -730,9 +757,12 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartAxisSetting
 export const generateChartData = (dataItems: TimeSeriesChartDataItem[],
                                   thresholdItems: TimeSeriesChartThresholdItem[],
                                   timeInterval: Interval,
+                                  noAggregation: boolean,
+                                  noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings,
                                   stack: boolean,
                                   darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => {
-  let series = generateChartSeries(dataItems, timeInterval, stack, darkMode);
+  let series = generateChartSeries(dataItems, timeInterval,
+    noAggregation, noAggregationBarWidthSettings, stack, darkMode);
   if (thresholdItems.length) {
     const thresholds = generateChartThresholds(thresholdItems, darkMode);
     series = series.concat(thresholds);
@@ -844,6 +874,8 @@ const createThresholdData = (val: string | number, item: TimeSeriesChartThreshol
 
 const generateChartSeries = (dataItems: TimeSeriesChartDataItem[],
                              timeInterval: Interval,
+                             noAggregation: boolean,
+                             noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings,
                              stack: boolean,
                              darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => {
   const series: Array<LineSeriesOption | CustomSeriesOption> = [];
@@ -863,8 +895,9 @@ const generateChartSeries = (dataItems: TimeSeriesChartDataItem[],
   for (const item of enabledDataItems) {
     if (item.dataKey.settings.type === TimeSeriesChartSeriesType.bar) {
       if (!item.barRenderContext) {
-        item.barRenderContext = {};
+        item.barRenderContext = {noAggregation, noAggregationBarWidthSettings};
       }
+      item.barRenderContext.noAggregation = noAggregation;
       item.barRenderContext.barsCount = barsCount;
       item.barRenderContext.barIndex = stack ? barGroups.indexOf(item.yAxisIndex) : barDataItems.indexOf(item);
       item.barRenderContext.timeInterval = timeInterval;

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

@@ -88,6 +88,10 @@ export class TbTimeSeriesChart {
     };
   }
 
+  private get noAggregation(): boolean {
+    return this.ctx.defaultSubscription.timeWindowConfig?.aggregation?.type === AggregationType.NONE;
+  }
+
   private readonly shapeResize$: ResizeObserver;
 
   private dataItems: TimeSeriesChartDataItem[] = [];
@@ -153,7 +157,7 @@ export class TbTimeSeriesChart {
       this.timeSeriesChartOptions.xAxis[0].min = this.ctx.defaultSubscription.timeWindow.minTime;
       this.timeSeriesChartOptions.xAxis[0].max = this.ctx.defaultSubscription.timeWindow.maxTime;
       this.timeSeriesChartOptions.xAxis[0].tbTimeWindow = this.ctx.defaultSubscription.timeWindow;
-      if (this.ctx.defaultSubscription.timeWindowConfig?.aggregation?.type === AggregationType.NONE) {
+      if (this.noAggregation) {
         this.timeSeriesChartOptions.tooltip[0].axisPointer.type = 'line';
       } else {
         this.timeSeriesChartOptions.tooltip[0].axisPointer.type = 'shadow';
@@ -414,7 +418,6 @@ export class TbTimeSeriesChart {
     this.timeSeriesChart = echarts.init(this.chartElement,  null, {
       renderer: 'canvas'
     });
-    const noAggregation = this.ctx.defaultSubscription.timeWindowConfig?.aggregation?.type === AggregationType.NONE;
     this.timeSeriesChartOptions = {
       darkMode: this.darkMode,
       backgroundColor: 'transparent',
@@ -423,7 +426,7 @@ export class TbTimeSeriesChart {
         confine: true,
         appendToBody: true,
         axisPointer: {
-          type: noAggregation ? 'line' : 'shadow'
+          type: this.noAggregation ? 'line' : 'shadow'
         },
         formatter: (params: CallbackDataParams[]) =>
           this.settings.showTooltip ? echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
@@ -488,7 +491,9 @@ export class TbTimeSeriesChart {
 
   private updateSeries(): Array<LineSeriesOption | CustomSeriesOption> {
     return generateChartData(this.dataItems, this.thresholdItems,
-      this.ctx.timeWindow.interval, this.settings.stack, this.darkMode);
+      this.ctx.timeWindow.interval,
+      this.noAggregation,
+      this.settings.noAggregationBarWidthSettings, this.settings.stack, this.darkMode);
   }
 
   private updateAxes() {

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

@@ -48,6 +48,33 @@
           axisType="xAxis">
       </tb-time-series-chart-axis-settings>
     </div>
+    <div *ngIf="chartType === TimeSeriesChartType.default || chartType === TimeSeriesChartType.bar"
+         class="tb-form-panel" formGroupName="noAggregationBarWidthSettings">
+      <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">
+          <tb-toggle-option *ngFor="let strategy of timeSeriesChartNoAggregationBarWidthStrategies" [value]="strategy">
+            {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }}
+          </tb-toggle-option>
+        </tb-toggle-select>
+      </div>
+      <div *ngIf="timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings.strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.group"
+           class="tb-form-row space-between column-xs">
+        <div translate>widgets.time-series-chart.bar-group-interval-width</div>
+        <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+          <input matInput type="number" formControlName="groupIntervalWidth" min="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+          <span matSuffix>ms</span>
+        </mat-form-field>
+      </div>
+      <div *ngIf="timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings.strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.separate"
+           class="tb-form-row space-between column-xs">
+        <div translate>widgets.time-series-chart.separate-bar-width</div>
+        <mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
+          <input matInput type="number" formControlName="separateBarWidth" min="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
+          <span matSuffix>ms</span>
+        </mat-form-field>
+      </div>
+    </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetSettingsForm.get('showLegend').value"
                            [disabled]="!timeSeriesChartWidgetSettingsForm.get('showLegend').value">

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

@@ -22,10 +22,10 @@ import {
   WidgetSettings,
   WidgetSettingsComponent
 } from '@shared/models/widget.models';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { formatValue, mergeDeep } from '@core/utils';
+import { formatValue, isDefinedAndNotNull, mergeDeep } from '@core/utils';
 import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models';
 import {
   barChartWithLabelsDefaultSettings
@@ -34,6 +34,12 @@ import { EChartsTooltipTrigger } from '../../chart/echarts-widget.models';
 import {
   timeSeriesChartWidgetDefaultSettings, TimeSeriesChartWidgetSettings
 } from '@home/components/widget/lib/chart/time-series-chart-widget.models';
+import {
+  timeSeriesChartNoAggregationBarWidthStrategies,
+  TimeSeriesChartNoAggregationBarWidthStrategy,
+  timeSeriesChartNoAggregationBarWidthStrategyTranslations, TimeSeriesChartType
+} from '@home/components/widget/lib/chart/time-series-chart.models';
+import { WidgetConfigComponentData } from '@home/models/widget-component.models';
 
 @Component({
   selector: 'tb-time-series-chart-widget-settings',
@@ -51,18 +57,28 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
     }
   }
 
+  TimeSeriesChartType = TimeSeriesChartType;
+
   EChartsTooltipTrigger = EChartsTooltipTrigger;
 
   legendPositions = legendPositions;
 
   legendPositionTranslationMap = legendPositionTranslationMap;
 
+  TimeSeriesChartNoAggregationBarWidthStrategy = TimeSeriesChartNoAggregationBarWidthStrategy;
+
+  timeSeriesChartNoAggregationBarWidthStrategies = timeSeriesChartNoAggregationBarWidthStrategies;
+
+  timeSeriesChartNoAggregationBarWidthStrategyTranslations = timeSeriesChartNoAggregationBarWidthStrategyTranslations;
+
   timeSeriesChartWidgetSettingsForm: UntypedFormGroup;
 
   tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this);
 
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
+  chartType: TimeSeriesChartType = TimeSeriesChartType.default;
+
   constructor(protected store: Store<AppState>,
               private $injector: Injector,
               private fb: UntypedFormBuilder) {
@@ -73,6 +89,13 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
     return this.timeSeriesChartWidgetSettingsForm;
   }
 
+  protected onWidgetConfigSet(widgetConfig: WidgetConfigComponentData) {
+    const params = widgetConfig.typeParameters as any;
+    if (isDefinedAndNotNull(params.chartType)) {
+      this.chartType = params.chartType;
+    }
+  }
+
   protected defaultSettings(): WidgetSettings {
     return mergeDeep({} as TimeSeriesChartWidgetSettings, timeSeriesChartWidgetDefaultSettings);
   }
@@ -88,6 +111,12 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       yAxis: [settings.yAxis, []],
       xAxis: [settings.xAxis, []],
 
+      noAggregationBarWidthSettings: this.fb.group({
+        strategy: [settings.noAggregationBarWidthSettings.strategy, []],
+        groupIntervalWidth: [settings.noAggregationBarWidthSettings.groupIntervalWidth, [Validators.min(100)]],
+        separateBarWidth: [settings.noAggregationBarWidthSettings.separateBarWidth, [Validators.min(100)]],
+      }),
+
       showLegend: [settings.showLegend, []],
       legendLabelFont: [settings.legendLabelFont, []],
       legendLabelColor: [settings.legendLabelColor, []],
@@ -111,13 +140,23 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
   }
 
   protected validatorTriggers(): string[] {
-    return ['showLegend', 'showTooltip', 'tooltipShowDate'];
+    return ['showLegend', 'showTooltip', 'tooltipShowDate', 'noAggregationBarWidthSettings.strategy'];
   }
 
   protected updateValidators(emitEvent: boolean) {
     const showLegend: boolean = this.timeSeriesChartWidgetSettingsForm.get('showLegend').value;
     const showTooltip: boolean = this.timeSeriesChartWidgetSettingsForm.get('showTooltip').value;
     const tooltipShowDate: boolean = this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').value;
+    const noAggregationBarWidthSettingsStrategy: TimeSeriesChartNoAggregationBarWidthStrategy =
+      this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('strategy').value;
+
+    if (noAggregationBarWidthSettingsStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.group) {
+      this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('groupIntervalWidth').enable();
+      this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('separateBarWidth').disable();
+    } else if (noAggregationBarWidthSettingsStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate) {
+      this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('groupIntervalWidth').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('noAggregationBarWidthSettings').get('separateBarWidth').enable();
+    }
 
     if (showLegend) {
       this.timeSeriesChartWidgetSettingsForm.get('legendLabelFont').enable();
@@ -170,5 +209,4 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
     processor.update(Date.now());
     return processor.formatted;
   }
-
 }

ui-ngx/src/app/shared/components/toggle-select.component.ts

@@ -43,7 +43,7 @@ export class ToggleSelectComponent extends _ToggleBase implements ControlValueAc
   disabled: boolean;
 
   @Input()
-  selectMediaBreakpoint;
+  selectMediaBreakpoint: string;
 
   @Input()
   appearance: ToggleHeaderAppearance = 'stroked';

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

@@ -6626,6 +6626,11 @@
             "type-line": "Line",
             "type-bar": "Bar",
             "type-point": "Point",
+            "no-aggregation-bar-width-strategy": "Bar width strategy for non-aggregated data",
+            "no-aggregation-bar-width-strategy-group": "Group",
+            "no-aggregation-bar-width-strategy-separate": "Separate",
+            "bar-group-interval-width": "Bar group interval width",
+            "separate-bar-width": "Separate bar width",
             "threshold": {
               "thresholds": "Thresholds",
               "source": "Source",